CSS的兩種重要概念:優(yōu)雅降級和漸進增強。
優(yōu)雅降級是在較高級的瀏覽器上開發(fā)站點,然后再在較低版本的瀏覽器上適應(yīng)站點。這種方法是從較高級的瀏覽器向下兼容,讓倒退的瀏覽器保留站點的基本結(jié)構(gòu)和功能。優(yōu)雅的設(shè)計使得在較低級的瀏覽器上站點也是可訪問的。
/* 示例代碼 */ .newFeature { background-color: #FFF; border-radius: 5px; box-shadow: 3px 3px 3px rgba(0,0,0,0.3); transition: border-radius .2s ease-out; } .no-border-radius .newFeature { border: 2px solid #333; border-radius: 0; box-shadow: none; }
在示例代碼中,.no-border-radius類只有當瀏覽器不支持border-radius時才被應(yīng)用。如果瀏覽器不支持box-shadow屬性,則不會有任何影響。
漸進增強是一種反向方法,它從基本結(jié)構(gòu)開始設(shè)計網(wǎng)站,然后再逐步將額外的功能添加到站點中。網(wǎng)站基本結(jié)構(gòu)一定要優(yōu)良,沒有任何附加的功能和插件,這樣可以確保較低級的瀏覽器可以訪問網(wǎng)站。隨著終端環(huán)境變得越來越先進,可以逐步切換到添加功能和插件的版本。
/* 示例代碼 */ .newFeature { background-color: #FFF; border: 2px solid #333; color: #000; } .advancedBrowser .newFeature { border-radius: 5px; box-shadow: 3px 3px 3px rgba(0,0,0,0.3); }
在示例代碼中,.advancedBrowser類只有在瀏覽器支持border-radius和 box-shadow屬性時才會應(yīng)用。如果瀏覽器不支持這些屬性,則不會有任何影響。
總之,選擇正確的方法取決于設(shè)計師和開發(fā)人員的首要目標和成本效益。優(yōu)雅降級和漸進增強應(yīng)該在站點的生命周期中謹慎使用。