第8章 招數和過濾器

2021-06-05 03:16:27 字數 3023 閱讀 3850

在理想的環境中,編寫正確的 css 會在支援 css 的每個瀏覽器中正常工作。不幸的是,我們並不是生活在理想的世界中,瀏覽器有不少 bug 和不一致的地方。為了建立能夠在各種瀏覽器上顯示相同樣式的頁面,css 開發人員需要發揮創造性。通過利用 bug 和未實現的 css ,開發人員能夠選擇性地對不同瀏覽器應用不同的規則。招數過濾器是css開發人員的強大工具。但是,正因為功能強大,使用時更應該謹慎。了解各種常用招數以及它們的工作原理確實很重要,但是,了解在什麼時候應該使用它們以及什麼時候不應該使用也同樣重要。

在本章中,你將學習:

css 過濾器 (filter) 是一種對特定的瀏覽器或瀏覽器組顯示或隱藏規則或宣告的方法。過濾器根據瀏覽器中的缺陷,比如解析 bug 以及未實現或錯誤地實現的 css ,對瀏覽器顯示或隱藏規則。

css 招數是一種讓瀏覽器表現得符合自己希望的不優雅的方法。css 招數通常用來解決特定的瀏覽器 bug ,比如 ie 的專有框模型。不幸的是,招數 (hack)這個詞有比較強的負面意義,而且它暗示著還有更好的方法,儘管常常沒有。因此,有些人喜歡用補丁 (patch) 這個詞表示它實際上利用了不正確的瀏覽器行為。

css 招數可以使用過濾器將乙個規則應用於一種瀏覽器,將另乙個規則應用於另一種瀏覽器。招數也可以利用不正確的 css 實現,從而 "哄騙" 瀏覽器表現得符合自己的希望。從本質上說, css 過濾器是一種用來過濾不同瀏覽器的招數型別。不幸的是,大多數人一般使用通用詞招數來描述過濾器。因此,當人們談到 css 招數時,他們往往是特指過濾器。

作為一種語言,css 設計成具有很強的向前相容性如果瀏覽器不理解某個選擇器,那麼它會忽略整個規則。同樣,如果它不理解某個屬性或值,它就會忽略整個宣告。這個特性意味著新增新的選擇器、屬性和值應該不會對老式瀏覽器產生嚴重的影響。

可以利用這個特性,對比較高階的瀏覽器應用規則和宣告,同時可以確定老式瀏覽器會平穩地退化。當瀏覽器的新版本發布時,如果它現在支援你作為過濾器使用的css,那麼它應該會如預期那樣工作。因為瀏覽器會越來越符合標準,如果使用比較高階的 css 克服老式瀏覽器中的問題,這個問題很有希望在新版本中得到解決。因此,使用不支援的 css 作為過濾機制是一種相對安全的方法。之所以說 "相對" 是因為瀏覽器有可能支援新的 css,但是仍然表現出你試圖修復的 bug 。

使用依賴於解析 bug 的過濾器是一種有點兒冒險的方法。這是因為依賴於 bug 而不是特性。與前面的方法相似,如果解析 bug 被修復了,而你試圖修復的 bug 還沒有得到解決,那麼可能會遇到問題。但是,更嚴重的是,解析 bug 在瀏覽器的新版本中可能有新的表現形式。例如,假設 firefox 的乙個新版本有某個解析 bug 。如果使用這個 bug 作為過濾器向 ie 提供不同的寬度值,從而解決專用框模型的問題,那麼 firefox 有可能突然繼承這個寬度,這可能會破壞許多站點的設計。

作為一般規則,使用依賴於不支援的 css 的過濾器,而不是依賴於某種瀏覽器 bug 的過濾器,這可能比較安全。

與印刷的頁面不同,設計在 web 上的顯示方式不但取決於設計者,同樣也取決於使用者和他們的設定。如果你的設計在 ie5.0 偏了3畫素,只要這對站點的其餘部分沒有嚴重影響,頁面仍然大致良好,那麼可能不必修復這個 bug 。如果使用招數來修復一種老式瀏覽器中不嚴重的顯示 bug,那麼不但要做許多額外的工作,而且可能會給未來的瀏覽器造成問題。請記住,罪魁禍首是 css 的瀏覽器實現,而不是你的站點。

在 css 中,有許多方法可以實現同樣的效果,所以如果某些東西造成了問題,那麼可以嘗試另一種方法。許多 css 錯誤是由過分複雜的**和標記造成的。如果使**保持簡單明瞭,那麼可以避免使用大多數招數。

為了幫助你選擇正確的過濾器,幾個站點提供了**來描述哪些過濾器在哪些瀏覽器中是有效的。這些支援表中最有名、最新的可以在 centricle(和dithered(www.dithered.com/css_filters)上找到。

將招數放在瀏覽器特定的 css 檔案中,然後使用過濾器將它們傳送給對應的瀏覽器,這會大大簡化招數的管理。當前有兩種主要的實現方法。一種方法是使用解析 bug 利用@import 規則將特定的 css 檔案傳送到適當的瀏覽器。另一種方法是使用 ie 有條件注釋。

有條件注釋是一種專有的 (因此是非標準的)、對常規 (x)html 注釋的 microsoft 擴充套件。顧名思義,有條件注釋使你能夠根據條件 (比如瀏覽器版本) 顯示**塊。儘管是非標準的,但是有條件注釋對於其他所有瀏覽器作為常規注發布現,因此本質上是無害的。有條件注釋在 windows 上的 ie5 首次出現,並且得到了 windows 瀏覽器的所有後續版本的支援。

要想將乙個特定的樣式表交給 ie5 和更高的所有版本,那麼可以在 (x)html 文件的開頭放置以下**

background-image: url(bg.png);

ie7 預期會支援子選擇器,還可能會支援 png 透明度。通過以這種方式使用子選擇器,就允許 ie 的新版本看到透明背景,而不需要修改**,因而提供了向前相容性。

另一種過濾規則的有趣方法是使用屬性選擇器。許多現代瀏覽器 (比如 safari 和 firefox) 支援屬性選擇器,但是 ie6 和更低版本不支援它。因此,可以使用屬性選擇器在比較高階的瀏覽器中對類和 id 應用樣式。在這個示例中,使用屬性選擇器在符合標準的瀏覽器中將背景 png 應用於內容 div 。

div[id="content"] ,ie7 能識別 *+html .class{} 或者 *:first-child+html .class{} 。ie8 兩個都不認識。

3."\9" 例如: "border: 1px \9;" 這裡的 "\9" 可以區別所有 ie 和 firefox.

4. "\0" ie8,ie9 識別,ie6、ie7 不能。

5. "\9\0"  ie9 識別,ie 8 不能。

書寫順序,一般是將識別能力強的瀏覽器的 css 寫在後面。

Java Web 第8天 過濾器

一 什麼是過濾器 從技術上講過濾器是乙個中間元件,用於攔截源資料和目的資料間的訊息,並且過濾二者之間傳遞的資料。對於 web 應用程式,過濾器是駐留在 web 伺服器上的 web 元件。對於客戶端和目標資源而言過濾器是透明的,他們是不知道傳送來的資料是否經過過濾器的處理。二 過濾器的作用 過濾器相當...

讓CSS更規範 招數和過濾器簡介

摘自 精通css 高階web標準解決方案 css過濾器 filter 是一種對特定的瀏覽器或瀏覽器組顯示或隱藏規則或宣告的方法。過濾器根據瀏覽器中的缺陷,比如解析bug以及未實現或錯誤地實現的css,對瀏覽器顯示或隱藏規則。css招數是一種讓瀏覽器表現得符合自己希望的不優雅的方法。css招數通常用來...

wireshark捕獲過濾器和顯示過濾器

wireshark的捕獲過濾器是在裝置驅動級別提供抓包的過濾介面 表示式 目的埠 dst post 80 源埠 src port 80 協議 udp 設定網段 net 192.168.0.0 mask 255.255.255.0等價於net 192.168.0.0 24 埠範圍 portrange ...