CSS hack 概論 – 什麼是 CSS hack?

什麼是 CSS hack?

所謂的「CSS hack」指的就是能夠解決瀏覽器問題的特殊技巧,也就是俗稱的「密技」。

僅管 W3C 制定了標準化的 CSS 和 XHTML 語法,但是,各家瀏覽器的支援程度卻不太一樣,因此衍生出了各種亂七八糟的問題,問題狀況輕的時候可能只是位置偏移了一點點,或是間距大了一點點…. 問題狀況嚴重的時候可能就會讓整個網頁的版面都垮掉了!例如~明明在 Firefox 看到的網頁是好好的,換到 IE6 看的時候就完全壞掉了….這是大家現在都見怪不怪的問題了…唉…

說穿了,「CSS hack」其實是利用該瀏覽器即有的問題所衍生出來的特殊解決辦法,也就是利用問題點來解決問題~ 例如,在 選擇器{} 前面加上 * html 的時候,所有的瀏覽器都會認為這是無效的而忽略這一段語法,但是 IE6 卻偏偏還是會執行這一段語法,因此,以後只要是 IE6 出問題的時候,就可以使用 * html 選擇器{} 來為 IE6 解決問題,而且不會影響到其他的瀏覽器….真是神奇啊!

我們在寫 CSS 語法的時候,能夠避免就儘量避免使用那些會產生問題的語法,遇到問題發生的時候,就把有問題的語法拿掉,換個更保守的寫法就好了。 但是,有時候還是會遇到完全無法解決的狀況,這時候就只能派「CSS hack」「密技」出場啦~ 以下舉一兩個 CSS hack 的例子:

* html 選擇器{
    ....
    ....
    ....
}
/* ====這段語法只有 IE6 能夠讀取==其他瀏覽器會忽略==== */
*:first-child+html 選擇器{
    ....
    ....
    ....
}
/* ====這段語法只有 IE7 能夠讀取==其他瀏覽器會忽略==== */

同學們對於「CSS hack」的使用需要有一個觀念,使用「CSS hack」實在是萬不得已而為之的方法,儘量先使用 W3C 標準的 CSS 語法來解決問題才是長久之道啊,真的無法解決的時候,再來用上「CSS hack」啊!


CSS hack 相關整理列表

CSS 語法 - 網頁設計  - CSS hack 概論 - 什麼是 CSS hack? - CSShack01

網址 http://www.communis.co.uk/dithered/css_filters/css_only/index.html

by
姜智豪
老師

當您對本文有任何問題或指教,歡迎到我們的【飛肯粉絲團】一起交流討論喔!

posted in CSS 語法 - 網頁設計 and tagged , , .

迴響已被關閉。