标签存档: CSS

CSS优化

作者: 日期: 2009年07月10日 没有评论

本文总结了一些CSS优化的规则，包括一些简写技巧，选择器的使用，及其它注意事项。

css简写技巧

1、属性值为0，而非0px。如果属性值为0，那么可以不为其添加单位（如px、em等），例如：

padding: 10px 5px 0px 0px;

 可以写成：

padding: 10px 5px 0 0;

2、背景属性合写。背景属性可能会包含设置背景色、背景图、背景图的位置和背景图重复方式的参数，可以将这些合并写到一句里，例如：

background-image: url(bg.png);
background-position: 0 0;
background-repeat: no-repeat;

可以写成：

background: url(bg.png) no-repeat 0 0;

4、文字属性合写。和背景一样，文字属性也有很多可能会用到的属性值，来个复杂的文字样式：

font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5;
font-family:Arial, sans-serif;

 可以写成：

font:italic small-caps bold 12px/1.5 Arial, sans-serif;

4、颜色简写。css里的颜色数值使用“#”加6个16进制数表示的。这6个数两个一组，分别表示red，green，blue的值，有人说如果每对的颜色值都是各自相等的，可以简写成一个数值。例如，#ff6600，可以简写成#f60。关于这写法没找到确实的数据证明对浏览器的渲染效率是否有影响，但十六进制的颜色值默认标准是大写字母及数字组成的六位数标注。在未知情况下不希望冒险而降低了渲染的效率，所以还是建议写成#FF6600。

5、margin、padding等的简写。有些人会这样声明边框：

margin-top:5px;
margin-right:10px;
margin-bottom:5px;
margin-left:10px;

可以这样简写：

margin:5px 10px 5px 10px;

css里，像margin、padding、border-width等在写属性值时都是按照上-右-下-左的顺时针方向来写的，不要弄混顺序。像上面的例子，上下边距，左右边距分别是相等的，还可以进一步简化：

margin:5px 10px;

同理，padding、border-width等也是如此。

6、border的简写。举个例子，声明一个1像素的黑色实线边框：

border-width:1px;
border-style:solid;
border-color:#000;

可以简写成：

border:1px solid #000;

有人可能会记不清顺序，我通常这样记，“数字靠两端，字母摆中间”。

7、列表样式。用的不多，一个例子：

list-style-type:square;
list-style-position:inside;
list-style-image:url(filename.gif);

这样简写：

list-style:square inside url(filename.gir);

选择器使用

据说Mozilla样式系统的选择器是从右向左匹配的，这里有篇文章https://developer.mozilla.org/en/Writing_Efficient_CSS，看看就行，毕竟因为ie6的存在，像>，+这样的选择器我们是用不到的，关于浏览器对选择器的支持情况，可以看下http://www.masterboke.cn/2009/02/26/css-browser-support/。不管选择器是从左还是从右匹配，有三点注意一下：

1、避免使用通用选择符。想*{}，#test *{}这样的选择器还是不要用。

2、不要用标签修饰id选择器。不要出现div #test{}这样的选择器，id选择器直接单独使用就行，不用再画蛇添足。

3、不要使用标签修饰class选择器。不要出现div .test{}这样的选择器。

其它注意事项

1、对css代码进行压缩。不管开发时是啥样的，呈现到用户面前时必定是压缩过的。

2、应该将CSS 放置于结构的上方（一般放置于head 元素内）。CSS 是解释型语言，ff和ie在等待CSS 传输完成之前不会渲染任何东西。放在顶部，浏览器能够有针对性的对 HTML 页面从顶到下进行解析和渲染。

3、尽量使用 <link rel=”stylesheet” href=”http://www.masterboke.cn/test.css” type=”text/css”> 的样式导入方式，而减少@import 的使用，更不要使用多层嵌套的@import 。因为在 IE 里，@import 相当于将<link> 放在页面尾部。

4、不要使用css表达式。CSS Expressions这个东西好像也只有ie里能用。

5、将css从页面里剥离，放在单独的文件里，这样能够使用缓存、压缩等策略，当然要注意不要引入过多的css文件，会增加http请求的。

6、避免使用滤镜。IE独有属性AlphaImageLoader用于修正7.0以下版本中显示PNG图片的半透明效果。这个滤镜的问题在于浏览器加载图片时它会终止内容的呈现并且冻结浏览器。在每一个元素（不仅仅是图片）它都会运算一次，增加了内存开支，因此它的问题是多方面的。完全避免使用AlphaImageLoader的最好方法就是使用PNG8格式来代替，这种格式能在IE中很好地工作。如果确实需要使用AlphaImageLoader，请使用下划线_filter又使之对IE7以上版本的用户无效。

浏览器对CSS选择器支持情况

作者: 日期: 2009年02月26日 没有评论

应该说是目前最全的总结了，FROM：CSS, JavaScript and XHTML Explained— Estelle Weyl。

  • 绿色 / √  表示目前支持。
  • 橙色/ Δ   表示浏览器部分支持当前CSS选择器。
  • 红色/ Χ   表示浏览器完全不支持。

css browser support

点击图片查看大图
cssbrowsersupport
点击图片查看大图

原文地址：http://www.evotech.net/blog/2009/02/css-browser-support/

CSS选择器

作者: 日期: 2009年02月7日 没有评论

重学prototype，半道研究了一下css2.1和css3的选择器，整理整理：

CSS 2.1

1. 通用选择器(Universal selector)

即星号”*”，匹配任何元素类型

2. 类型选择器(Type selectors)

h1 {font-size:19px;} /*匹配文档中所有的h1元素*/

3. 后代选择器(Descendant selectors)

<h1>I <span>am <em>boke.</em></span></h1>

h1 em {color:blue} /*匹配h1中的em元素*/

4. 子选择器(Child selectors)

 <h1>I <span>am <em>boke.</em></span></h1>

span > em {color:blue} /*匹配span中的em元素。子选择器只对儿子辈的可用，对孙子、重孙子辈等都不可用，如h1 em{color:blue}将不起作用*/

5. 相邻兄弟选择器(Adjacent sibling selectors)

<span class=”abc”>I am Peter Petrelli.</span>

<h1>I am boke.</h1>

<span class=”abc”>I am Sylar.</span>

h1 + .abc {color:blue} /*匹配与h1紧邻的后一个，类名为abc的元素。注意是后一个，“I am Peter Petrelli”是不会变蓝的。*/ 

6. 属性选择器(Attribute selectors)

<span lang=”zh-cn” title=”heroes the 4400″>Super men?</span>

  • span[title] {color:red;} /*匹配含有title属性的span*/
  • span[title="heroes the 4400"] {color:red;} /*匹配title属性的值为“heroes the 4400”的span*/
  • span[title~="heroes"] {color:red;} /*匹配title属性中含有以空格分隔的，单词为“heroes”的span*/
  • span[lang|="zh"] {color:blue;} /*匹配lang属性中含有连字符且以“zh”开头的span*/

7. 类选择器和ID选择器(Class selectors and ID selectors)

不必多言。

8. 伪类

<div><p>I am boke.</p><p>I am Hiro Makamura.</p><a href=”">I am Matt Parkman.</a></div>

  • :first-child  例如：div > p:first-child {color:red;} /*匹配div下的第一个p元素*/
  • :link and :visited  例如a:link {color:blue;} /*匹配没有被访问的超链接*/ a:visited {color:yellow} /*匹配已经被用户点击的超链接*/ 
  • :hover,:active and :focus  例如：.b:hover {color:blue;} /*匹配class=”b”的元素鼠标放上时*/ .b:active {color:red;} /*匹配class=”b”的元素鼠标按下时*/ .b:focus {color:yellow;} /*匹配class=”b”的元素得到焦点时*/
  • :lang  例如：html:lang(zh-cn) {qutoes:’?’ ‘?’}

9. 伪元素

  • :first-line  例如：p:first-line {font-size:3em;} /*匹配p元素内的第一行，注意，只作用于块元素，内联元素要设定height或width属性，或设定position为absolute，或设定display为block*/
  • :first-letter  例如：p:first-letter{font-size;2em;} /*匹配p元素内的第一个字符，注意，同first-letter*/
  • :before and :after  例如：p:before {content:”nani?”} /*设置在p之前发生的内容，注意要和content配合使用*/

CSS 3

2.1中有的不再重复，将标注 “²  ”这个符号表示

1. 通用选择器(Universal selector)²

2. 类型选择器(Type selector)² 

3. 属性选择器(Attribute selector)²

<a href=”" title=”copyright boke”>sa ku sha.</a>

  • a[title]²
  • a[title="copyright boke"]²
  • a[title~="copyright"]²
  • a[lang|="zh"]²
  • a[title^="copy"] /*匹配有title属性且属性值以“copy”开头的a元素*/
  • a[title$="ke"] /*匹配有title属性且属性值以“ke”结尾的a元素*/
  • a[title*="right"] /*匹配有title属性且属性值中包含“right”字符串的a元素*/

4. 类选择器和ID选择器(Class selectors and ID selectors)²

5. 伪类(Pseudo-classes)

  1. 动态伪类(Dynamic pseduo-classes)
    • :link and :visited²
    • :hover, :active and :focus² 
  2. 目标伪类(Target pseduo-class) :target /*简单理解成匹配被从URI中定位的锚点*/
  3. 语言伪类(Language pseudo-class)²
  4. UI元素状态伪类(UI element states pseudo-classes)
    • :enabled and :disabled  例如：.urt:disabled {color:#333;} /*匹配类为.urt且被设置成不可用(disabled)的元素*/
    • :checked  /*匹配被设置成checked的元素*/
    • :indeterminate  /*匹配checked状态不确定的元素，CSS 3还没加入，将来可能加入*/
  5. 结构伪类(Structural pseudo-classes)
    • :root  /*匹配文档的根元素，在html 4 中这个总是匹配*/
    • :nth-child() and nth-last-child()  /*按索引值匹配子元素。例如：li:nth-child(3) 匹配在ul中排第3个位置的li，li:nth-child(2n+1)和li:nth-child(odd)匹配所有奇数位置的li，li:nth-child(2n)和li:nth-child(even)匹配所有偶数位置的li。当然4n+1，4n+2，4n+3，4n+4可以四行匹配，类推。注意，第一个元素的索引是1而不是0。倒数的:nth-child()*/
    • :nth-of-type() and :nth-last-of-type() /*匹配某种类型的同级兄弟元素，括号里的参数同:nth-child()。倒数的:nth-of-type()*/
    • :first-child and :last-child /*匹配第一个和最后一个元素，例如：ul li:first-child {color:red}*/
    • :first-of-type and :last-of-type /*匹配第一个和最后一个某种类型的元素*/
    • only-of-type /*匹配一个元素其在这个元素的父元素中再也没有和它同名的元素*/
    • :empty /*例如，p:empty，匹配一个<p></p>*/
  6. 否定伪类(Negation pseudo-class) :not() /*匹配除了括号里规定的之外的元素，例如：button:not([disabled])，匹配除了属性设置为disabled之外的所有button，*:not(p)，匹配除了p元素之外的所有元素*/

6. 伪元素

  • ::first-line² /*不过这里是两个“:”*/
  • ::first-letter² /*不过这里是两个“:”*/
  • ::selection /*匹配元素中被用户选中的部分，例如span::selection {color:red}*/
  • ::before and ::after² /*两个“:”*/

7. 组合选择器

<div><p class=”god”>I am boke.</p><p>I am Isaac Mendez.</p><p>I am Nathan Petrelli.</p></div>

  • 后代(Descendant combinator)² /*同2.1里的后代选择器，例如：div p {color:red;}*/
  • 子代(Child combinators)² /*同2.1里的子选择器，例如div>p{color:blue;}*/
  • 相邻兄弟(Adjacent sibling combinator)² /*同2.1里的相邻兄弟选择器，例如：.god+p{font-size:2em;}*/
  • 通用兄弟(Genetal sibling combinator) /*可以选择普通的兄弟了，例如：.god~p{color:yellow;}*/

终于写完了，等发现那里有问题再改正。有种感觉，w3c那帮闲人弄这么多东西干嘛，实际应用中真的都会用到吗，想让css取代js吗？南哈蒙理工学院（=S H I T）！

过两天再整理个Mobile Profile的。