|
Feature Detection
我們?nèi)绾螢閒irefox提供一組可用的樣式，和為另外的一組Safari或Chrome？解決辦法就是多做測試。
通過feature detection，我們可以利用JavaScript來測試某屬性是否可用，如果不行，我可就要采用備用的。
再回到text-stroke的問題上，為不支持此屬性的瀏覽器設(shè)定一個(gè)備用黑色（目前的除webkit外）。
var h1 = document.createElement('h1');
if ( !( 'webkitTextStroke' in h1.style ) ) {
var heading = document.getElementsByTagName('h1')[0];
heading.style.color = 'black';
}
首先我們設(shè)定一個(gè)h1元素，然后執(zhí)行，通過樣式屬性以確定-webkit-text-stroke是否支持此元素。如果不支持，我們會把標(biāo)題由白色設(shè)置成黑色。
如果你想了解更多關(guān)于feature-detection的問題，請參閱Modernizr。
5、Multiple Backgrounds
演示
Background屬性在CSS3樣式中已經(jīng)徹底改革，開始支持多背景圖片。
舉個(gè)簡單的例子，如果沒和合適的圖像，我們將使用兩個(gè)教程的圖像作為我們的背景，當(dāng)然在程序中你可能會用紋理，也許是漸變作為圖像。
.box {
background: url(image/path.jpg) 0 0 no-repeat,
url(image2/path.jpg) 100% 0 no-repeat;
}
以上，通過逗號分隔符，插入了兩張背景圖像，第一個(gè)的定位是(0,0)，第二個(gè)的定位是(100%,0)。
要確定你對不支持的瀏覽器使用了備用圖片，否則，它將跳此屬性，使背景圖像留空。
對舊瀏覽器的補(bǔ)償
要添加一張單獨(dú)的圖像給老瀏覽器用，像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;
}
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 你需要熟知10個(gè)的CSS3屬性 [4] 下一頁 你需要熟知10個(gè)的CSS3屬性 [6]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 5 頁 你需要熟知10個(gè)的CSS3屬性 [5]
