在使用CSS3時,通常需要加上前綴以適應不同瀏覽器,比如-webkit、-moz、-ms等。但是考慮到兼容性,有時候我們需要進行CSS3前綴檢查。
/* CSS代碼 */ div { -webkit-border-radius: 10px; border-radius: 10px; }
上面代碼中,一個div元素應用了圓角屬性(border-radius),加上了-webkit前綴以適應WebKit內核的瀏覽器。但是,如果瀏覽器不支持這個屬性,那么這個屬性就會被忽略,因此我們需要通過CSS3前綴檢查來判斷瀏覽器是否支持這個屬性。
/* JavaScript代碼 */ if ('borderRadius' in document.body.style || '-webkit-border-radius' in document.body.style || '-moz-border-radius' in document.body.style) { alert('瀏覽器支持border-radius屬性'); } else { alert('瀏覽器不支持border-radius屬性'); }
上面代碼中,我們使用JavaScript代碼來檢查當前瀏覽器是否支持border-radius屬性。如果支持,則彈出“瀏覽器支持border-radius屬性”的提示,否則彈出“瀏覽器不支持border-radius屬性”的提示。
當然,這種做法不是絕對可靠的,因為瀏覽器可能會出現Bug,導致某些屬性雖然能用,但檢查出來卻是不支持的。不過,對于絕大多數情況下,這種做法還是比較可靠的。