定义未来Web样式 CSS 3最新特性一览
控制溢出
通过text-overflow属性控制当文本溢出其容器时显示什么,例如,如果你想让新闻列表中的所有项目占据的高度都一样,这时你可以使用CSS增加省略号表示由更多的文本内容未显示,在iPhone中我们经常看到这样的应用。这个属性在最新的Safari、Opera、IE6(溢出元素应该设置一个宽度,如100%)和 IE 7中有效,在Opera中还必须加上厂家特殊的属性。
li {
white-space: nowrap;
width: 100%;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
在编辑的规范草案中,你可以看到其它与text-overflow相关的属性也被考虑进去了,如text-overflow-mode和text-overflow-ellipsis。
对齐和断字
控制断字是件麻烦事,在设置为自动断字时有许多因素要考虑,不同语言有不同的规则,就拿葡萄牙文为例,你可以在最后一个音节处断字,对于双辅音,连字符必须在中右侧。规范仍在开发中,但已经提议的属性有:
◆hyphenate-dictionary
◆hyphenate-before和hyphenate-after
◆hyphenate-lines
◆hyphenate-character
另一个在大多数浏览器中还未实现的CSS3属性是text-align-last(目前只有IE支持一部分),如果你的文本设为justify,你可以定义一个段落的最后一行或一行的右边在强制断字前如何调整,这个属性的有效属性值包括:start,end,left,right,center和justify。
Unicode范围和语言
Unicode范围
unicode-range属性让你定义给定字体支持的Unicode字符范围,在限制支持各种语言或数学符号时非常有用,可以减少网络带宽的使用。假设你想在你的网页中包括日语字符,使用font-face规则,需为相同的font-family声明多次,每个声明提供一个不同的字体文件供浏览器下载,同时每次都要声明不同的Unicode范围(即使范围重叠也得声明),浏览器应该只下载渲染网页需要的范围。要研究unicode-range是如何工作的,这里有一个例子。
语言
使用:lang伪类创建语言敏感的排版,这样你可以为法语(fr)设置一个背景色,为德语(de)设置另一个背景色:
div:lang(fr) {
background-color: blue;
}
div:lang(de) {
background-color: yellow;
}
你可能会问,为什么我们不使用一个简单的选择器来实现呢,如:
div[lang|=fr] {
background-color: blue;
}
这样我们的目标就是所有lang属性等于fr或以fr开头的div元素,如果我们有一个元素位于这个div中,它们不应该继承这个选择器的属性,因为它们根本就没有设置lang属性,通过使用:lang伪类,lang属性就让所有子元素继承父元素的属性。好消息是几乎所有最新的浏览器都支持这个伪类了。
总结
在本文所列举的例子中,你可能会问为什么大部分都讲得很模糊,是的,因为规范还未获得正式通过,随时间的推移完全有可能会发生改变,但现在正是试验的时候,如果你也参与进来,将有助于最终规范的定格。大胆尝试这些新特性,看看应该如何改进才能让你的工作变得更轻松。向规范增加一个属性有实际的例子非常重要,此外,浏览器厂商也需要跟进。