CSS是標(biāo)準(zhǔn)化最吸引人的地方,也是時(shí)下討論最多的話(huà)題,市面上的相關(guān)書(shū)籍也在web標(biāo)準(zhǔn)類(lèi)里占據(jù)壓倒性的比重,甚至有些人(包括一些用人單位)認(rèn)為CSS就是網(wǎng)頁(yè)標(biāo)準(zhǔn)。這種過(guò)于夸大CSS作用的觀點(diǎn)固然是錯(cuò)誤的,但CSS對(duì)于網(wǎng)頁(yè)標(biāo)準(zhǔn)的重要性卻也可見(jiàn)一斑。
CSS相關(guān)的知識(shí)、技巧很多,從知識(shí)的必備性方面來(lái)講,以下幾個(gè)方面是我認(rèn)為最重要的:
布局。布局是表現(xiàn)層技術(shù)的基礎(chǔ),任何表現(xiàn)層的東西都是基于布局之上的。利用CSS布局的方法有很多種,例如float、絕對(duì)定位、負(fù)margin等等。每一種布局都有著各自的優(yōu)勢(shì)和局限性,從適性最廣來(lái)講顯然是float最佳,也最為常用,但清除浮動(dòng)往往是讓人頭疼的問(wèn)題。絕對(duì)定位的網(wǎng)頁(yè)抗壓性好,但自由度低,而且渲染效率最差。負(fù)margin是最不破壞文檔流的辦法,但在對(duì)負(fù)值支持不佳的IE下往往會(huì)有靈異表現(xiàn)。關(guān)于布局方面的知識(shí),建議看一下webflash的《徹底弄懂CSS盒子模式》系列文章,個(gè)人認(rèn)為相關(guān)知識(shí)的文章尚無(wú)出其右者。
IE下的Haslayout渲染模式。其實(shí)hack是許多標(biāo)準(zhǔn)工程師所深?lèi)和唇^的東西,但在瀏覽器兼容性要求越來(lái)越高的今天,hack卻往往是一種無(wú)奈之舉。而深入了解IE的Haslayout渲染模式,就會(huì)明白許多hack的來(lái)由,以及許多兼容性問(wèn)題的產(chǎn)生之源。推薦閱讀——譯文On having layout。然而HasLayout問(wèn)題之多,絕非一兩篇文章所能概括,通過(guò)閱讀文章,了解其中的原理,再舉一反三,很多問(wèn)題就會(huì)迎刃而解了。
符合標(biāo)準(zhǔn)的CSS規(guī)則。關(guān)于這一點(diǎn),我可以不負(fù)責(zé)任地說(shuō),數(shù)以千萬(wàn)計(jì)的網(wǎng)站建設(shè),其CSS完全符合標(biāo)準(zhǔn)的,所占比重不會(huì)超過(guò)1%。這并不是一個(gè)悲觀的估計(jì),即使是w3c推薦的一些網(wǎng)站,例如ESPN,他們的CSS也時(shí)常會(huì)通不過(guò)校驗(yàn)。CSS的許多規(guī)則的確令CSSer們非常不適,例如background和color,這兩個(gè)屬性絕大多數(shù)人都是分開(kāi)來(lái)使用的,而w3c標(biāo)準(zhǔn)卻規(guī)定兩者必須“生則同生,死則同死”。還有就是各個(gè)瀏覽器的專(zhuān)有屬性,在實(shí)現(xiàn)一些效果時(shí)是最簡(jiǎn)單有效的。這種時(shí)候我們往往會(huì)選擇放棄標(biāo)準(zhǔn),但暫時(shí)的放棄不意味著無(wú)視。今天知道我們哪些行為是錯(cuò)誤的,以及為什么要用錯(cuò)誤的方法,明天改正起來(lái)就不會(huì)太難。
提高網(wǎng)站建設(shè)性能的技巧,如有助于SEO的以圖代字、用盡量少和小容量的圖片實(shí)現(xiàn)圓角表格、用background-position實(shí)現(xiàn)圖片切換以提高渲染效率等等。從對(duì)網(wǎng)站的幫助角度來(lái)看,這些技巧遠(yuǎn)比瀏覽器hack更值得掌握。
了解一點(diǎn)js知識(shí)。這個(gè)和CSS關(guān)系不是那么密切,但經(jīng)??吹胶芏嗳算@牛角尖,用js可以非常簡(jiǎn)單實(shí)現(xiàn)的效果,非要用CSS去勉強(qiáng)實(shí)現(xiàn)。例如將子菜單放在鏈接里,通過(guò):hover觸發(fā)。又比如多列等高布局的實(shí)現(xiàn)。這已經(jīng)是行為層的范疇了,為什么還非要用表現(xiàn)層來(lái)實(shí)現(xiàn)呢?當(dāng)然這里并不是說(shuō)所有CSS不容易實(shí)現(xiàn)的都往js里扔,而是要了解一下雙方的技術(shù)特點(diǎn),合理地選用最佳方案。
【 微信掃一掃 】