從事Web前端開發的人都與CSS打交道很多,有的人也許不知道css是怎麼去工作的,寫出來的css瀏覽器是怎麼樣去解析的呢?當這個成爲我們提高css水平的一個瓶頸時,是否應該多瞭解一下呢?
一、瀏覽器的發展與CSS
網頁瀏覽器主要通過HTTP協議連接網頁服務器而取得網頁,HTTP容許網頁瀏覽器送交資料到網頁服務器並且獲取網頁。目前最常用的 HTTP 是 HTTP/1.1,這個協議在RFC2616中被完整定義。HTTP/1.1 有其一套Internet Explorer並不完全支援的 標準,然而 許多其他當代的網頁瀏覽器則完全支援這些標準。網頁的位置以URL(統一資源定位符)指示,此乃網頁的地址;以http:開首的便是 通過 HTTP協議登陸。很多瀏覽器同時支援其他類型的URL及協議,例如ftp:是FTP(檔案傳送協議)、gopher:是Gopher及https: 是 HTTPS(以SSL加密的HTTP)。
早期的網頁瀏覽器只支援簡易版本的HTML。專屬軟件的瀏覽器的迅速發展導致非標準的HTML代碼的產生。但隨着HTML的成長,爲了滿足設計師的要求,HTML獲得了很多顯示功能。隨着這些功能的增加外來定義樣式的語言越來越沒有意義了。
1994年哈坤·利提出了CSS的最初建議。伯特·波斯(BertBos)當時正在設計一個叫做Argo的瀏覽器,他們決定一起合作設計CSS。 當時已經有過一些樣式表語言的建議了,但CSS是第一個含有“層疊”的主意的。在CSS中,一個文件的樣式可以從其他的樣式表中繼承下來。讀者在有 些 地方可以使用他自己更喜歡的樣式,在其他地方則繼承,或“層疊”作者的樣式,這種層疊的方式使作者和讀者都可以靈活地加入自己的設計,混合各人的愛好。
1997年初,W3C內組織了專門管CSS的工作組,其負責人是克里斯·裏雷。這個工作組開始討論第一版中沒有涉及到的問題,其結 果是1998年5月出版的第二版要求。到2007年爲止,第三版還未完備。
二、瀏覽器是如何渲染頁面和加載頁面
6. JS、CSS中如有重定義,後定義函數將覆蓋前定義函數。
3. 要進行渲染內容的大小
三、什麼是CSS以及CSS的優點
-CSS是由W3C的CSS工作組產生和維護的。
3. 易於維護和改版你只要簡單的修改幾個CSS文件就可以重新設計整個網站的頁面。
四、瀏覽器對CSS的匹配原理
瀏覽器CSS匹配不是從左到右進行查找,而是從右到左進行查找。比如之前說的DIV#divBox p span.red{color:red;},瀏覽器 的查找順序如下:先查找html中所有class=’red’的span元素,找到後,再查找其父輩元素中是否有p元素,再判斷p的父元素中是否有id爲 divBox的div元素,如果都存在則CSS匹配上。
瀏覽器從右到左進行查找的好處是爲了儘早過濾掉一些無關的樣式規則和元素。firefox稱這種查 找方式爲keyselector(關鍵字查詢),所謂的關鍵字就是樣式規則中最後(最右邊)的規則,上面的key就是span.red。
五、優化你的CSS
所謂高效的CSS就是讓瀏覽器在查找style匹配的元素的時候儘量進行少的查找,下面列出一些我們常見的寫CSS犯一些低效錯誤:
解釋:因爲ID選擇器是唯一的,加上div反而增加不必要的CSS匹配。
span.red{color:#ff00ff}
如果是這樣定義的就不要去掉,去掉後就會混淆,不過建議最好不要這樣寫
更好寫法:.red{..}
更好寫法:.block{display:block;}