Feature Detection

我们如何为firefox提供一组可用的样式，和为另外的一组Safari或Chrome？解决办法就是多做测试。

通过feature detection，我们可以利用JavaScript来测试某属性是否可用，如果不行，我可就要采用备用的。

再回到text-stroke的问题上，为不支持此属性的浏览器设定一个备用黑色（目前的除webkit外）。

var h1 = document.createElement('h1');  
 if ( !( 'webkitTextStroke' in h1.style ) ) { 
var heading = document.getElementsByTagName('h1')[0]; 
heading.style.color = 'black'; 
}

首先我们设定一个h1元素，然后执行，通过样式属性以确定-webkit-text-stroke是否支持此元素。如果不支持，我们会把标题由白色设置成黑色。

如果你想了解更多关于feature-detection的问题，请参阅Modernizr。

5、Multiple Backgrounds

Background属性在CSS3样式中已经彻底改革，开始支持多背景图片。

举个简单的例子，如果没和合适的图像，我们将使用两个教程的图像作为我们的背景，当然在程序中你可能会用纹理，也许是渐变作为图像。

.box { 
background: url(image/path.jpg) 0 0 no-repeat,  
 url(image2/path.jpg) 100% 0 no-repeat; 
}

以上，通过逗号分隔符，插入了两张背景图像，第一个的定位是(0,0)，第二个的定位是(100%,0)。

要确定你对不支持的浏览器使用了备用图片，否则，它将跳此属性，使背景图像留空。

对旧浏览器的补偿

要添加一张单独的图像给老浏览器用，像IE7。要定义两遍background，一遍是为老浏览器，另一遍是重写。或者你可以再次查看下Modernizr。

.box { 
/* fallback */
background: url(image/path.jpg) no-repeat; 
/* modern browsers */
background: url(image/path.jpg) 0 0 no-repeat,  
 url(image2/path.jpg) 100% 0 no-repeat; 
}

出处：蓝色理想
责任编辑：bluehearts

上一页 你需要熟知10个的CSS3属性 [4] 下一页 你需要熟知10个的CSS3属性 [6]

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。