2009-02-02 34 views
7

是否有一個'良好'乾淨的CSS黑客列表,這肯定是未來的證明?可接受的CSS黑客/修補程序

例如,zoom:1是安全的,只要它只用於IE,並且您記得它在那裏。使用兒童選擇器的最常見的黑客行爲是而不是,因爲IE7支持它們。使用height:1%只是覺得骯髒(但那可能只是我)。

我知道ie7-js,所以IE6的bug並不讓我擔心。另外,我不在尋找宗教辯論,只是消息來源。


感謝您的答覆 - 我選擇了一個與最佳貨源的答案。

也感謝您使用單獨CSS文件的建議,或者不要擔心。我完全同意你的觀點,對我而言,這些都是回報。但是,當面對佈局問題時,我想要一個安全的修復方法,以最大限度地減少我必須在$ IE或$ FF + 1中重新訪問問題的風險。對不起,我沒有更清楚。

回答

1

下劃線黑客對IE6-東西的作品相當不錯,如。

min-height:50px; 
_height:50px; 

它不需要搬東西斷章取義成新的CSS-文件,只有IE6讓他們和它們很容易過濾掉,如果你決定停止支持IE6。它們也非常小,不會混亂你的CSS。

+0

下劃線前綴是無效的CSS,所以不會以任何方式安全。使用IE6的「* html」黑客入侵。 – bobince 2009-02-02 18:58:48

+0

應該先添加最小值或最大值,然後用_height或_width值進行覆蓋......這將允許您設置最小/最大值,然後對最佳處理IE6缺少最小/最大值的值進行硬編碼。 – scunliffe 2009-02-02 19:00:30

10

對於大多數IE錯誤,我認爲你最好使用conditional comments圍繞鏈接瀏覽器特定的樣式表。它傾向於使事情變得非常整潔,而且非常自我記錄。

4

我已經使用Peter-Paul Koch的「QuirksMode」網站了解涉及CSS和跨瀏覽器兼容性的問題。他傾向於對瀏覽器特定的方法皺眉,但他確實在CSS Hacks上有一個頁面。

+0

是的,我虔誠地使用他的網站,因爲最好先避免問題。特別是我喜歡他對CSS Hacks的看法(奇怪的是我以前從未閱讀過)。 – Mark 2009-02-10 05:43:43

2

有沒有這樣的事情作爲一個好的乾淨/可以接受的[CSS]破解 - 總是代碼標準,然後使用瀏覽器+特定於版本的樣式表所需的任何黑客工作。

例如:
default.css
default.ie6-fix.css
default.ie7-fix.css
default.ff2-fix.css

然後,當瀏覽器新版本的發佈,複製以前版本的黑客和刪除不再適用的位(並在必要時添加新的位)。

(使用IE條件註釋,和用戶代理嗅探其他瀏覽器加載單獨的樣式表)

+0

(雖然這不是真正的問題的直接答案,我仍然認爲這是一個有效的答案) – 2009-02-02 19:01:35

+1

我同意;這是一個可接受的答案,因爲問題的前提無效地假定存在可接受的黑客行爲。 – jacobangel 2009-02-02 19:04:06

+0

但是你依靠瀏覽器嗅探來做到這一點。 – Nosredna 2009-02-02 19:08:13

1

修改你的CSS針對特定瀏覽器的支持,是永遠沒有錯 - 只要你可以很容易地包含它。正如你會注意到的那樣,符合標準的瀏覽器,*咳嗽*一切除了 MSIE,將永遠不會與未來的版本打破。新的W3C標準也不會破壞以前的標準,他們通常最多會棄用或擴展以前的標準。

人們提到了很好的處理IE的條件註釋。但是在處理所有瀏覽器(手機,壁虎,webkit,歌劇等)時需要多一點。通常,您將解析傳入的請求標頭以從User-Agent參數中獲取瀏覽器類型和版本。基於此你可以開始加載你的CSS文件。

我相信方式我們大多數人是通過:

  • 第一個符合標準的瀏覽器開發(讓我們FF爲例)
  • 一旦CSS完成你接近的providig支持IE(這個可以與有條件的意見很容易做到,因爲perviously提到)
    • 首先創建一個CSS文件,將微調家居IE6和其他版本低於
    • 然後創建將處理一切爲了IE7
    • 最後一個CSS文件,創建一個CSS文件,將處理一切爲IE8的IE版本和更高
      • 一旦IE9出來,一定要設置IE8 +搬運到IE8具體,創建IE9 + CSS文件,需要修復
  • 最後,創建了WebKit的修復
    • 如果需要,您還可以創建其他網絡附加CSS文件如果需要的話

關於特定瀏覽器CSS實現,我一般組中的所有那些在我的主css文件的LES專門針對Chrome或Safari(你可以很容易地做一個搜索那些和一個文件替換它們如果需要的話)。因此,如果某件事必須透明,我會在同一個塊中設置不透明度和過濾器(MSIE)。瀏覽器只是忽略他們不支持的實現,所以你的安全。我傾向於避免的具體實現是自定義實現(嘿,我喜歡W3C之上的-moz框,但我只是不想依賴它)。

隨着CSS繼承和覆蓋,你不必重新定義每個CSS文件中的所有CSS聲明和定義。每個連續加載的CSS文件應僅包含包含修復程序所需的選擇器和特定定義,而不包含其他內容。

你最終得到的結果是你的(巨大的)主css文件和其他文件,其中包含幾行代碼,用於特定的瀏覽器修復 - 總結一些不太難以維護和跟蹤的內容。這是一個個人偏好,你的基本CSS文件將基於什麼瀏覽器,但通常你會針對一個瀏覽器,爲其他瀏覽器創造最少的問題(所以是的,開發IE6將是一個非常糟糕的決定,在那點)。

一如既往,遵循良好的實踐並且謹慎地選擇每個類和使用框架的選擇器和細節將會帶領你走向善良的道路,但很少需要修復。除非你想結束無序的無意義的混亂,否則構建你的CSS文件是一個巨大的優勢。

3

Nicole Sullivan(AKA Stubbornella)誰的雅虎性能團隊工作在The 7 Habits for Exceptional Perf建議你應該使用CSS下劃線黑客修補IE6漏洞的原因是:

  • 黑客應該是少之又少。
  • 如果你只會有5-6黑客(這已經是很多),那麼將沒有任何意義將那些在外部文件中,從而它從上下文中分離。
  • 額外的文件會導致性能損失(Yahoo Best Practices, Rule 1)。

然而,應該指出的是,這不是有效的CSS。

0

在定義規則,我覺得很不錯,讓自然降解發生,例如,在CSS3存在的RGBA顏色模型的支持,但沒有在CSS2,所以我覺得自己做:

background-color: #FF0000; 
background-color: rgba(255,0,0, 50%); 

因此,如果較舊的規則在不支持它的舊瀏覽器上失敗,它將降級到先前定義的樣式。

1

Centricle有CSS黑客和他們的相容性良好列表。

我不認爲你會發現黑客,這將是面向未來的,因爲知道一看就知道是什麼愚蠢的事會在IE下一個實施的列表。

0

我更喜歡由弘樹查爾方特描述的global conditional comment技術;

我發現它有助於保持我的IE針對性的規則並排側與我的標準,有針對性的規則,在一個有效的樣式表。

1

這有一個非常穩定的過濾器good list

/* Opera */ 
.dude:read-only { color: green; } 

/* IE6/IE7 */ 
@media, 
    { 
    .dude { color: silver;} 
    } 

/* IE8 \0 */ 
@media all\0 
    { 
    .dude { color: brown; } 
    } 

/* IE9 monochrome and \9 */ 
@media all and (monochrome: 0) 
    { 
    .dude { color: pink\9; } 
    } 

/* Webkit */ 
* > /**/ .dude, x:-webkit-any-link { color:red; } 
    /* 
    * > /**/ 
    /* hides from IE7; remove if unneeded */ 


/* Firefox */ 
@-moz-document url-prefix() 
    { 
    .dude { color: green; } 
    }