[译] 盘点CSS3中的新特性

这篇文章目标读者网页开发人员本文首先讲诉CSS3的浏览器前缀,接着将讲述一些基于标准的扩展。在CSS3特性的部分里,将涉及圆角,rgba颜色,阴影,渐变,动画变换,和2D转换

 

前缀

有一些浏览器在CSS3还未标准化之前就已经实现了CSS3的特性。因此,在语法还未被标准规定下来之前,一些CSS3的样式就在那些浏览器中加上了其特定的前缀。例如在Firefox和Safari上,渐变的CSS3语法就不相同。Firefox 使用 -moz-linear-gradient,而 Safari (WebKit) 则使用 -webkitgradient。同理,很多的CSS3语法都被不同的浏览器加上了不同的前缀。

常见的前缀有:
• Chrome: -webkit-
• Safari: -webkit-
• Firefox: -moz-
• IE: -ms-
• Opera: -o-

目前,你应该首先声明带浏览器前缀的样式,然后再声明W3C标准的样式。这是为了保证当未来的浏览器只支持标准化后的CSS3样式时,你的代码仍然能够有效运行。

#prefix-example {
   -moz-box-shadow: 0 3px 5px #FFF;
   -webkit-box-shadow: 0 3px 5px #FFF;
   box-shadow: 0 3px 5px #FFF;
}

 

颜色

CSS3提供了一些新方法来定义颜色,比如增加了alpha透明度的设置。在以前,想实现透明效果通常是平铺一个 1px × 1px 的背景图片,现在你可以抛弃那种做法了。

新增加的 rgb 样式可以允许你用数字来定义RGB的值,而不再需要使用16进制了。 如果你想自己转化两者的对应值,你可以使用Safari自带的 Web Inspector 工具,在 Styles 面板上点击相应的颜色即可。

下面的代码等同于 #FFF, 就是白色:

#rgb-example {
   // rgb(red, green, blue);
   color: rgb(255, 255, 255);
}

你也可以使用新增的 hsl 样式。HSL分别代表色度、饱和度、亮度。

色度:代表在颜色盘上的度数,0度表示红色,120度表示绿色,240度表示蓝色。在之间的表示相应的中间色。

饱和度一个百分比100表示完全显示颜色

亮度: 也是一个百分比0表示黑色100表示白色

如果采用rgb或者hsl写法,那么增加alpha透明度非常简单,只需要在后面加上一个 0 到1之间的小数即可。 0表示完全透明,1表示完全不透明。

#alpha-example {
   background: hsla(324, 100%, 50%, .5);
   border: 1em solid rgba(0, 0, 0, .3);
   color: rgba(255, 255, 255, .8);
}

浏览器支持:
• Firefox: 完全支持
• Chrome: 完全支持
• Opera: 完全支持
• Safari: 完全支持
• IE: 完全支持

 

圆角

过去,在CSS2.1的环境下实现圆角效果简直就是一种打击。因为那通常需要额外的HTML代码段,图片甚至JavaScript代码。

现在,事情变得容易多了,你只需要使用 border-radius 样式。就像 padding 或者 margin的样式定义一样,你可以使用4个radius来定义4个角,或者使用2个radius定义水平的和垂直的角,或者使用1个radius定义所有的角。如果你设置一个足够大的 radius,甚至可以将整个容器组成一个圆形。

#rounded-corner{
   border-radius: 20px;
   // horizonal, vertical
   border-radius: 20px 20px;
   // top left, top right, bottom right, bottom left
   border-radius: 20px 20px 20px 20px;
}

浏览器支持:
• Firefox: 完全支持
• Chrome: 完全支持
• Opera: 完全支持
• Safari: 需要使用 -webkit- 前缀
• IE: 版本9 以上支持

 

阴影

在CSS3之前,很多开发人员不会理会阴影效果,因为那是一个大麻烦。现在CSS3提供了 box-shadow 样式,可以让你轻松实现阴影效果。但是注意不要过度使用阴影效果,因为那可能带来浏览器渲染的性能问题。

box-shadow 可以接受若干选项:垂直方向的偏移,水平方向的偏移,模糊的半径,阴影扩展的距离,以及颜色。如果你还给出inset选项,阴影将向容器内扩展,否者默认情况下,阴影是向容器外扩展的。另外,你也可以对一个容器使用若干个阴影,通过使用逗号隔开他们各自的定义,如同下列代码所示:

#drop-shadows{
// horizonal offset, vertical offset, blur radius, color
box-shadow: 10px 5px 15px #000;
// inset shadows
box-shadow: 10px 5px 15px #000 inset;
// horizonal offset, vertical offset, blur radius, spread distance, color
box-shadow: 10px 5px 15px 15px #000;
// multiple shadows
box-shadow: 0 1px 1px #FFF inset, 5px 5px 10px #000;
}

浏览器支持:
• Firefox: 完全支持
• Chrome: 需要使用 -webkit- 前缀
• Opera: 完全支持
• Safari: 需要使用 -webkit- 前缀
• IE: 版本9 以上支持

 

文字阴影

在CSS3之前,可能唯一实现文字阴影的方法就是使用加工好的图片代替文字——真是一个淫荡的方法。(没错,原文就是这么写的 ==!)

现在,CSS3允许你通过 text-shadow 样式来增加文字阴影。只需要传入几个参数:垂直偏移、水平偏移、模糊半径(可选参数)、颜色。

#text-shadow{
// horizonal offset, vertical offset, color
text-shadow: 1px 1px #FFF;
// horizonal offset, vertical offset, blur radius, color
text-shadow: 1px 1px .3em rgba(255, 255, 255, .8);
}

文字阴影与容器阴影不同点就是:它不支持阴影扩展半径和向内的阴影。

浏览器支持:
• Firefox: 完全支持
• Chrome: 完全支持
• Opera: 完全支持
• Safari: 完全支持
• IE: 不支持

 

渐变效果

以前,实现渐变效果通常是靠平铺背景图片。背景图片是固定的宽度或者高度,然后靠图像编辑软件制造渐变效果。

CSS3增加了对线性渐变和径向渐变渐变的支持,也被看作最有用的新特性之一。有若干个种CSS方法可以生成渐变,你只需要声明对应的颜色即可。

对于线性渐变,只需要传入颜色列表即可。

linear-gradient(#CCC, #DDD, white) CCC变到DDD,再变到FFF

默认情况下,渐变效果是垂直的。但是你可以通过传入位置值来改变它的方向。

// horizontal gradient
linear-gradient(left, #CCC, #DDD, #FFF);
// or with a specific angle
linear-gradient(-45deg , #CCC , #FFF)

如果你希望更多地控制渐变效果从哪个位置开始,你可以在颜色旁边使用声明一个百分比或者像素值。

linear-gradient(white , #DDD 20% , black)  在容器高度20%的地方已经变成DDD了

你也可以渐变到透明或者从透明渐变到不透明:

radial-gradient( rgba(255, 255, 255, .8) , transparent )

Safari目前使用的是不同的语法,在不久的将来它将变得兼容标准写法。但是现在,你需要这样使用:

// -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*);
-webkit-gradient(linear, left top, left bottom, from(#FFF), color-stop(10%, #DDD), to(#CCC) );

尽管主流的浏览器都支持渐变,但是几乎都要其浏览器前缀写法:

• Firefox: with -moz-
• Chrome: with -webkit-
• Safari: alternative implementation
• IE >= 10: with -ms-
• Opera >= 11.1: with -o-

所以,一个支持跨浏览器的渐变效果实现的CSS代码如下:

#gradient-example {
/* Fallback */
background: #FFF;
/* Chrome < 10, Safari < 5.1 */
background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#CCC));
/* Chrome >= 10, Safari >= 5.1 */
background: -webkit-linear-gradient(#FFF, #CCC);
/* Firefox >= 3.6 */
background: -moz-linear-gradient(#FFF, #CCC);
/* Opera >= 11.1 */
background: -o-linear-gradient(#FFF, #CCC);
/* IE >= 10 */
background: -ms-linear-gradient(#FFF, #CCC);
/* The standard */
background: linear-gradient(#FFF, #CCC);
}

 

多重背景

就像你可以在CSS3里设置多重阴影一样(逗号隔开),你也可以设置多重背景。

以前,实现多重背景通常需要创建若干嵌套的DOM元素。现在CSS3让你只需使用"逗号隔开"的写法加上若干个背景样式了。这极大地简化了代码量。

#multiple-backgrounds{
   background: url(snowflakes.png) top repeat-x,
               url(chimney.png) bottom no-repeat,
               -moz-linear-gradient(white, #CCC),
               #CCC ;
}

浏览器支持:
• Firefox: 完全支持
• Chrome: 完全支持
• Opera: 完全支持
• Safari:  完全支持
• IE: 版本9 以上支持

 

选择符

CSS3提供了若干新的选择符:

:first-child
选择Collection中的第一个元素
:last-child
选择Collection中的最后一个元素
:only-child
选择只有一个孩子的元素
:target
选择跟URL的hash值对应的元素
:checked
选择被checked状态的check元素

我想要重点讲述的是下面一些选择符:

第N个孩子

:nth-child 选择符让你改变每N个元素的样式。例如,下面的代码将选择每第3个元素:

#example:nth-child( 3n ) { /* ... */ }

下面的代码将选择奇数号元素或者偶数号元素:

/* Even children */
#example:nth-child( 2n ) { /* ... */ }
#example:nth-child( even ) { /* ... */ }
/* Odd children */
#example:nth-child( 2n+1 ) { /* ... */ }
#example:nth-child( odd ) { /* ... */ }

你也可以使用反向的Nth-child选择符。例如,下面代码将选择最后一个元素:

/* Last child */
#example:nth-last-child( 1 )

实际上,:first-child 选择符等同于 :nth-child(1),同理, :last-child 等同于 :nth-last-child(1) 。

直接孩子选择符

你可以使用 大于符号> 来限制只选择直接孩子元素

/* Only directly descendant divs */
#example > div { }

否定选择符

你可以使用 :not 来否定一个简单的选择符。不过,目前否定选择符并不支持复杂的选择符,例如你不能这样用  p:not(h1 + p)

/* Only directly descendant children, except ones with the "current" class */
#example > *:not(.current) {
display: none
}

浏览器支持:
• Firefox: 完全支持
• Chrome: 完全支持
• Opera: 完全支持
• Safari:  完全支持
• IE: 版本9 以上支持

 

变换效果(Transition)

CSS3增加了对transition的支持,使得你可以借由样式变化创造简单的动画效果。你需要做的是传入以下参数:变换持续时间,属性,变换的方式(可选)。你可以使用秒(s)或微秒(ms)作为持续时间参数。

/* duration, property, animation type (optional) */
transition: 1.5s opacity ease-out
/* Multiple transitions */
transition: 2s opacity , .5s height ease-in
transition: .5s height , .5s .5s width

有若干种时间点序列(timing sequence)方式可供选择:

• linear
• ease-in
• ease-out
• ease-in-out

或者,你可以自定义一个时间点序列(timing sequence)。时间点序列的目的是控制transition效果在不同时间的速度。

#transition-example {
position: absolute;
/* cubic-bezier(x1, y1, x2, y2) */
transition: 5s left cubic-bezier(0.0, 0.35, .5, 1.3);
}

在Safari和Chrome中,一旦transition完成,一个名叫 WebKitTransitionEvent 的事件将在该元素上触发。 在Firefox中,这个事件叫做 transitionend。不好的地方是,使用CSS3有若干缺点:比如,在变换过程中你不能作过多的控制,以及并不是所有的DOM元素都是可变换的(transitionable)。这就意味着,transition只能被用于简单的动画。另外,一些浏览器(例如 Safari)对transition做了硬件层面上的渲染加速。

#transition-example {
width: 50px;
height: 50px;
background: red;
-webkit-transition: 2s background ease-in-out;
-moz-transition: 2s background ease-in-out;
-o-transition: 2s background ease-in-out;
transition: 2s background ease-in-out;
}
#transition-example:hover {
background: blue;
}

由于某些原因,如果你想在渐变效果上做transition那么必须至少有一端点具有alpha值。另外,你也不能在某些值之间作transition,比如height:0和 height:auto之间。

浏览器支持:
• Firefox: with -moz-
• Chrome: with -webkit-
• Safari: with -webkit-
• IE >= 10.0: with -ms-
• Opera: with -o-

 

边框图像

使用 border-image 样式,你可以设置一张图片作为DOM元素的边框。第一个参数指出图片的URL,接着一个参数指出需要的图片是怎样从原图片上切割的,最后一个参数指出图片的伸展方式。可选的伸展方式有round(平铺),repeat(重复),和stretch(缩放)。

border-image: url(border.png) 14 14 14 14 round round;
border-image: url(border.png) 14 14 14 14 stretch stretch;

浏览器支持:
• Firefox: with -moz-
• Chrome: with -webkit-
• Safari: with -webkit-
• IE: 不支持
• Opera: with -o-

 

Box Sizing(盒模型的大小调整?)

你是否曾经有过这样的想法,使一个元素的宽度为100%,但是它仍然具有padding和margin值? 对于传统的盒模型来说,CSS对于百分比宽度的计算时参考的是父容器的宽度,然后再加上margin和padding。因此,如果一个元素有100%的宽度,再加上padding和margin或者border,它一定会溢出的(overflow)。

现在,通过设置 box-sizing属性的值为 border-box (它的默认值是contetbox),你可以改变盒模型大小计算的方式,让它一并考虑borders、margins、padding,和content。

.border-box {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

该特性目前已被各浏览器广泛支持了,而且它是安全稳定的除非你考虑在IE8之前的版本中使用。

 

形状变换(Transformations)

拜CSS3所赐,我们可以实现简单的2D形状变换。比如,可以让元素旋转,缩放,倾斜。下面的代码是把一个元素逆时针旋转30度。

transform: rotate( -30deg );

下面的代码是把一个元素沿着X方向和Y方向各自倾斜一定的角度。

transform: skew( 30deg , -10deg );

下面的代码是使用scale表达式把一个元素的大小增加或减少一定的比例。默认情况下,一个元素的scale应该是1.0。

transform: scale(1.2);

注意,你可以通过并排这些transformation函数,从而达到实现多种变换的效果。

transform: rotate(30deg) skewX(30deg);

浏览器支持:
• Firefox: with -moz-
• Chrome: with -webkit-
• Safari: with -webkit-
• IE >= 9: with -ms-
• Opera: with -o-

 

活动盒模型(Flexible Box Model)

CSS3引进了活动盒模型的概念。这个概念在其他GUI框架上已经存在很久了,比如在Adobe Flex上。活动盒模型有什么用呢?比如,在以前,如果你想让list元素按照水平方向排列,你需要使用元素浮动。现在活动盒模型让你可以完成这个效果。请参照以下的代码。

.hbox {
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-align: stretch;
-webkit-box-pack: left;
display: -moz-box;
-moz-box-orient: horizontal;
-moz-box-align: stretch;
-moz-box-pack: left;
}
.vbox {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-align: stretch;
display: -moz-box;
-moz-box-orient: vertical;
-moz-box-align: stretch;
}

首先,我们设置该元素的display属性值为 -webkit-box 或者 -moz-box。然后,设置direction的值,告诉该元素的子元素将如何排列它们的盒子。默认情况下,所有的子元素会相同地扩展以适应父元素的大小,但是,你可以设置 box-flex 改变这种行为。

通过设置 box-flex 为0,就使得子元素不会扩展。如果设置 box-flex 为1甚至更高的值,那么子元素将扩展以占领其他的空白的空间。例如,可以设置边栏sidebar的 flex值为0,设置主栏的 flex值为1,这样边栏不会扩展,主栏将扩展到占满剩余的空间。

#sidebar {
-webkit-box-flex: 0;
-moz-box-flex: 0;
box-flex: 0;
width: 200px;
}
#content {
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
}

浏览器支持:
• Firefox: with -moz-
• Chrome: with -webkit-
• Safari: with -webkit-
• IE >= 10: with -ms-
• Opera: 不支持

 

自定义字体

@font-face 样式可以让你在网页中使用自定义字体。这样,该网页的显示就可以不再依赖于用户电脑中已安装的字体了。目前支持字体类型为 TrueType 或者 OpenType 的字体。字体文件必须放在跟该网页相同的域名上。
使用 @font-face 时首先要给出该字体的font-family,然后给出指向字体文件的地址。

@font-face {
font-family: "Bitstream Vera Serif Bold";
src: url("/fonts/VeraSeBd.ttf");
}

接着在网页中的任何地方使用该字体了。font-family的值跟上面的font-family值对应。

#font-example {
font-family: "Bitstream Vera Serif Bold";
}

字体将以异步下载的方式下载到用户浏览器中,并且在下载完成后作用与网页上。在下载还未完成的时间里,那些字体会暂时以浏览器默认字体显示。因此,如果考虑用户体验,可以先指定一个其他已安装的可选字体来替换浏览器的默认字体。

浏览器支持:
• Firefox: full support
• Chrome: full support
• Safari: full support
• IE >= 9: full support
• Opera: full support

 

posted @ 2013-02-06 08:57  爷爷泡的茶  阅读(...)  评论(... 编辑 收藏