1、第18章 未來(lái)的CSS,讀者讀到本章之前，已經(jīng)對(duì)CSS2有了較為全面地認(rèn)識(shí)，隨著網(wǎng)絡(luò)技術(shù)的進(jìn)一步發(fā)展，CSS也在與時(shí)俱進(jìn)，目前最新的版本CSS3標(biāo)準(zhǔn)正在制訂中。本章是本書的最后一章，我們將介紹一下這個(gè)CSS的未來(lái)版本。實(shí)際上，這個(gè)未來(lái)并不遙遠(yuǎn)，因?yàn)楹芏酁g覽器已經(jīng)慢慢地開(kāi)始實(shí)現(xiàn)CSS3的部分功能，比如蘋果公司2008年3月新推出的支持很多CSS3標(biāo)準(zhǔn)的瀏覽器Safari 3.1版，Mozilla組織的Firefox目前版本也支持不少CSS3技術(shù)，更新的Firefox3和IE8也都在緊鑼密鼓地開(kāi)發(fā)當(dāng)中，即將和我們見(jiàn)面。 一句話，未來(lái)是很快就會(huì)到來(lái)的，如果能提前了解下一代的CSS，并成為未來(lái)的一部分

2、，該是多么令人感到興奮和激動(dòng)！ “忘記過(guò)去就意味著背叛”。在體會(huì)未來(lái)的高科技之前，先讓我們總結(jié)一下過(guò)去，從缺點(diǎn)方面回顧一下本書前文所介紹的CSS2。,18.1 現(xiàn)有CSS的不足,根據(jù)業(yè)內(nèi)很多專家的總結(jié)，現(xiàn)有CSS2主要有以下不足： 不一致的瀏覽器支持：不同的瀏覽器在處理CSS的時(shí)候結(jié)果會(huì)很不相同。 有些CSS技術(shù)瀏覽器之間實(shí)現(xiàn)的方法不同導(dǎo)致效果不同。比如IE瀏覽器6.0版本，對(duì)于某些CSS2.0技術(shù)的具體實(shí)現(xiàn)就和其他瀏覽器不相同，導(dǎo)致同樣的CSS設(shè)置不能通用于主流的瀏覽器中。為了解決這樣的問(wèn)題，必須特別的修改CSS代碼，以適應(yīng)每個(gè)瀏覽器的特點(diǎn)，這樣就會(huì)增加工作量，增加出錯(cuò)的機(jī)會(huì)和調(diào)試的難度。

3、有些CSS技術(shù)在目前支持的瀏覽器很少，比如我們?cè)诘谒恼绿岬降哪承┻x擇器，只有很少的瀏覽器支持。,18.2 CSS3介紹,在本節(jié)，請(qǐng)暫時(shí)拋開(kāi)前文書一直講解的CSS2，進(jìn)入CSS3的多彩世界。 【CSS3的主人】 CSSWG討論并制定CSS標(biāo)準(zhǔn)，它的全稱為Cascade Style Sheet Working Group，也就是CSS工作組的意思。CSSWG從屬于第一章我們提到的W3C組織，主要由業(yè)內(nèi)相關(guān)的各家公司和科研院所派出代表組成，比如微軟，惠普，Google，瀏覽器廠商Opera，Mozilla，美國(guó)在線，蘋果等，還有HTML作者行會(huì)的一些成員，總之都是業(yè)內(nèi)的專家。 CSS3是CSS2.0

4、和CSS2.1的下一個(gè)版本，最早在本世紀(jì)初就已經(jīng)提出了工作草案（Working Draft），用于描述預(yù)計(jì)的工作內(nèi)容，之后在不斷的討論和修訂，直到2008年的3月份，CSS3仍在制定當(dāng)中。,18.2.1 CSS3預(yù)覽 - 漸變效果邊框,在CSS3中，我們不光可以設(shè)置邊框的顏色，線的類型，還可以生成顏色漸變效果的邊框，如代碼所示。,Firefox2中顯示應(yīng)用漸變邊框效果的表格,IE7中顯示應(yīng)用漸變邊框效果的表格,18.2.2 CSS3預(yù)覽 - 圓角效果,在網(wǎng)頁(yè)中，有時(shí)候需要對(duì)表格等塊形標(biāo)簽制作出圓角的效果，使得它們看起來(lái)不那么單調(diào)，死板。在CSS2中，我們只能采取變通的方法來(lái)實(shí)現(xiàn)：比如事先制作四

5、幅小圓角的圖片，放置或者設(shè)置成背景于表格等的四個(gè)邊頂點(diǎn)；也還有其他的幾種方法，但是都有一個(gè)共同的缺點(diǎn)：制作和維護(hù)起來(lái)比較麻煩，時(shí)間也比較長(zhǎng)。 在CSS3中，由于它天生就已經(jīng)支持圓角這樣的屬性，我們可以通過(guò)簡(jiǎn)單的幾行樣式定義就實(shí)現(xiàn)，非常方便。代碼就是一個(gè)例子。,Firefox2中邊框的圓角效果,18.2.3 CSS3預(yù)覽 - 多重背景,長(zhǎng)期以來(lái)，除了利用背景色之外，我們?cè)诰W(wǎng)頁(yè)上所看到的標(biāo)簽背景都是單獨(dú)的一幅圖片。這種情況在CSS3中要發(fā)生變化了，因?yàn)镃SS3支持一個(gè)標(biāo)簽有多個(gè)背景，它們可以一起顯示在網(wǎng)頁(yè)上，請(qǐng)看代碼。,Safari3中顯示Div標(biāo)簽的多重背景,18.2.4 CSS3預(yù)覽 - 文本

6、溢出處理,當(dāng)我們把網(wǎng)站的文章列表頁(yè)面制作完畢并上傳到服務(wù)器之后，隨著新文章的不斷加入，有時(shí)會(huì)發(fā)現(xiàn)某行文章的標(biāo)題超出或者拉長(zhǎng)單元格寬度的情形。代碼顯示了這樣一個(gè)例子：,當(dāng)鼠標(biāo)劃過(guò)Div時(shí)，文字全部顯示,18.2.5 CSS3預(yù)覽 - 改變標(biāo)簽大小,在現(xiàn)有的CSS2中，如果想要通過(guò)簡(jiǎn)單的樣式設(shè)置就實(shí)現(xiàn)網(wǎng)頁(yè)標(biāo)簽的大小改變是比較困難的，總要求助于JavaScript等客戶端腳本程序的幫忙。CSS3推出的改變標(biāo)簽大小Resize屬性，讓這一切變得非常輕松。請(qǐng)看代碼。,Safari3.1下可改變大小Div的顯示 鼠標(biāo)拖拽后Div大小改變,18.2.6 瀏覽器與ACID測(cè)試,前文介紹了CSS3的一些新穎而實(shí)

7、用的屬性，有的是效果的增強(qiáng)，豐富了頁(yè)面顯示技術(shù)，使得網(wǎng)頁(yè)設(shè)計(jì)師能夠進(jìn)一步放開(kāi)手腳，探索更多更酷更眩目的效果；有的是簡(jiǎn)化了現(xiàn)有版本中純用CSS很難解決的問(wèn)題，使得網(wǎng)頁(yè)制作者不用再把過(guò)多的時(shí)間花在“Hack”瀏覽器（指通過(guò)特殊的方法在某瀏覽器下實(shí)現(xiàn)其不支持的樣式效果）方面?？傊珻SS3的確是一個(gè)值得期待的嶄新標(biāo)準(zhǔn)。 但是，我們也能夠發(fā)現(xiàn)CSS3的這些新屬性主流瀏覽器支持的并不好：這個(gè)屬性IE支持，F(xiàn)irefox不支持；那個(gè)屬性Safari支持，IE又不支持。根據(jù)第一章提供的瀏覽器市場(chǎng)占有率表，IE，F(xiàn)irefox/Mozilla和Safari占有了絕大部分的市場(chǎng)份額，但是它們之間都不統(tǒng)一，就會(huì)導(dǎo)

8、致有很多新鮮的樣式屬性無(wú)法全部應(yīng)用，實(shí)在令人感覺(jué)郁悶。那么，如何得知哪些瀏覽器對(duì)新技術(shù)支持的更好些呢？,18.2.7 發(fā)展中的CSS3,截至目前為止，CSS3仍在相關(guān)組織緊鑼密鼓的制定過(guò)程當(dāng)中。前不久，W3C組織關(guān)于“你最希望CSS3支持的功能”征集活動(dòng)也剛剛結(jié)束，新的兩年度工作草案可能就將出臺(tái)。隨著網(wǎng)絡(luò)的發(fā)展，對(duì)頁(yè)面效果要求的進(jìn)一步提高，CSS技術(shù)必然會(huì)從默默無(wú)聞的HTML源代碼背后走出來(lái)，作為我們的有力武器之一，創(chuàng)造出一個(gè)更新更美的虛擬世界。,18.3 小結(jié),本章第一節(jié)通過(guò)幾個(gè)實(shí)際例子介紹了現(xiàn)有CSS2版本的諸多不足，從而引出正在制定中的CSS下一代版本 - CSS3。CSS3在總體上將網(wǎng)頁(yè)效果分為多個(gè)模塊，在每個(gè)模塊