原文:用CSS3將你的設(shè)計(jì)帶入下個(gè)高度 譯自:Take Your Design To The Next Level With CSS3 版權(quán)所有,轉(zhuǎn)載請(qǐng)注明出處,多謝!
級(jí)聯(lián)樣式表在13年前被引入,而且被廣泛使用的CSS 2.1 標(biāo)準(zhǔn)在11年前被創(chuàng)建,顯然我們現(xiàn)在已經(jīng)與當(dāng)年相差千里了。相當(dāng)了不起的是期間網(wǎng)站開發(fā)有了多少進(jìn)步——事實(shí)上,我們也無法想象。
為什么會(huì)這樣呢,當(dāng)提到CSS的時(shí)候,過去我們是如此的不情愿和害怕嘗試?為什么我們還要使用討厭的hack和依賴JavaScript的技術(shù)來寫樣式?為什么我們不能利用豐富的CSS3 特性和現(xiàn)代瀏覽器中可用的工具 并將我們的設(shè)計(jì)品質(zhì)帶到下一個(gè)等級(jí)?
是時(shí)候在我們的項(xiàng)目中引入CSS3 特性了,不用害怕逐漸在我們的樣式表中加入css3特性和選擇器會(huì)出問題。讓我們的客戶意識(shí)到CSS3的優(yōu)勢(shì) (而且讓舊瀏覽器更快的消失)是我們力所能及的事情——我們應(yīng)該這樣做,特別是在它能夠讓網(wǎng)站更加靈活并減少開發(fā)和維護(hù)成本的時(shí)候。
在本文中,我們將研究CSS3的優(yōu)勢(shì),并看一下一些網(wǎng)頁設(shè)計(jì)師是如何使用它們的。最后,我們將了解到從CSS3中我們能得到什么以及我們?nèi)绾卧谖覀兊捻?xiàng)目中使用它的新特性。
同時(shí)請(qǐng)參考我們之前的一篇相關(guān)文章:
使用瀏覽器專有屬性
為了使用大部分CSS3特性,我們不得不與原來的屬性一起使用生產(chǎn)商專有擴(kuò)展。原因是直到現(xiàn)在,大部分瀏覽器只支持部分CSS3屬性。而且不幸的是,一些屬性甚至到最后都可能不被W3C推薦,所以通過指定瀏覽器專有屬性,將他們與標(biāo)準(zhǔn)屬性區(qū)分開來是很重要的(然后在他們是多余的的時(shí)候使用符合標(biāo)準(zhǔn)的樣式將之覆蓋)。
當(dāng)然,這種方法的劣勢(shì)是,將導(dǎo)致一個(gè)雜亂的樣式表和網(wǎng)站在瀏覽器之間的表現(xiàn)不一致。畢竟,我們不想在我們的樣式表中重拾私有瀏覽器hack的需求。Internet Explorer的臭名昭著的marquee、blink以及其它標(biāo)簽在大量樣式表中被應(yīng)用,并在20世紀(jì)九十年代成為一個(gè)傳奇;它們依然讓現(xiàn)存的很多網(wǎng)站(在其他瀏覽器中)表現(xiàn)不一致甚至難以閱讀。而我們現(xiàn)在也不想將我們自己置于同樣的境地,對(duì)吧?
然而,網(wǎng)站不需要在所有的瀏覽器中看起來必須嚴(yán)格的一致。有的時(shí)候在某個(gè)瀏覽器中使用私有屬性來實(shí)現(xiàn)特定的效果是可行的。
最常見的私有屬性是用于Webkit核心瀏覽器的(比如, Safari), 它們以-webkit-開始,以及Gecko核心的瀏覽器(比如, Firefox),以-moz-開始,還有Konqueror (-khtml-)、Opera (-o-) 以及Internet Explorer (-ms-)都有它們自己的屬性擴(kuò)展(目前只有IE8支持-ms-前綴)
作為專業(yè)的設(shè)計(jì)師,我們不得不注意:使用這些私有屬性將讓我們的樣式表不能通過驗(yàn)證。所以目前將他們放到最終版的樣式中是少見的。但是在某種情況下,比如試驗(yàn)或?qū)W習(xí),我們至少可以考慮將他們和標(biāo)準(zhǔn)的CSS屬性一起寫到一個(gè)樣式表中。
擴(kuò)展閱讀
出處:藍(lán)色理想
責(zé)任編輯:bluehearts
上一頁 下一頁 用CSS3將你的設(shè)計(jì)帶入下個(gè)高度 [2]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論,我還想發(fā)表評(píng)論。
|