' CSS Hack”的定義是什麼？-css教學-PHP中文網

首頁

web前端

css教學

' CSS Hack”的定義是什麼？

Joseph Gordon-Levitt

Feb 22, 2025 am 09:17 AM

' CSS Hack”的定義是什麼？

您至少寫了CSS已有幾年了，那麼您肯定會使用CSS Hack。但是，如果您對CSS相對較新，那麼您可能已經聽過該術語了，但不確定它的含義。

> 在這篇文章中，我將解釋CSS hack術語的含義以及如何使用CSS hack。但是首先，一些背景可以解釋為什麼我覺得這篇文章甚至是必要的。

鑰匙要點

a CSS hack是一種將樣式應用於特定瀏覽器版本的技術，同時被他人忽略。它通常用於克服瀏覽器的不一致或局限性，尤其是在較舊版本的瀏覽器中，這些瀏覽器可能無法完全支持最新的CSS標準。

>在某些情況下CSS駭客可能很有用，但通常被認為是一種不良的做法，因為它們可以使代碼更加複雜，更難維護。建議使用標準CSS技術和設計網站在較舊的瀏覽器中優雅地降低。
>

>您當前寫下以下哪個Microsoft瀏覽器或包含CSS hacks？

>當我第一次研究結果時，我似乎錯過了這個問題的結果。幸運的是，研究了微軟最新瀏覽器的工程師David Storey指出了這一點。在回答這個問題的1,418個人中，結果是這樣的：

IE9 - 62％ IE10 - 61％ IE11 - 57％

邊緣 - 45％

IE8 - 35％

IE6 - 3％
>足夠糟糕的是，有60％以上的開發人員聲稱為IE9和IE10編寫CSS hacks，但是Edge為45％？儘管Edge有一些已發布的黑客攻擊，但它們尚未在瀏覽器網站上，因此似乎不太可能有這麼多人在瀏覽器中使用hacks。但是更重要的問題是：開發人員遇到了哪些問題，將CSS渲染到Edge中，他們需要黑客攻擊？
起初，我認為許多參與者都會通過用戶代理嗅探將hacks與瀏覽器檢測混淆。但這也無法解釋為什麼邊緣的數字如此之高。

<span>* html <span>.sidebar</span> {
</span>  <span>margin-left: 5px;
</span><span>}</span>

>上述示例中的CSS（通常稱為“ Star-Html Hack”）將目標

>僅針對Internet Explorer版本6及以下。大多數支持IE6的開發人員在IE6之前都不真正在乎任何東西，因此通常可以用作IE6 hack。 >“黑客”的部分是星號，其次是“ html”。這是通用選擇器和元素類型選擇器的組合。在某個時候，有人發現這兩個選擇器在另一個選擇器之前僅在某些版本的IE中起作用，而在其他瀏覽器中沒有效果。這意味著上面代碼示例中定義的.sidebar元素上的左邊距僅適用於IE6或更早。在這種情況下，CSS實際上是有效的，因此您不會出現錯誤或警告（稍後再詳細介紹）。 >

這是從瀏覽器網站上獲取的另一個示例，這次是針對IE11的：

>我不會介紹為什麼這是一個黑客的細節（部分是因為我不確定自己理解它），但是上述CSS僅適用於Internet Explorer版本11。從技術上講，Browserhacks說“ IE11及以上”，所以我假設這意味著它也將在Microsoft的Edge瀏覽器中使用，但是我尚未驗證。

<span>_<span>:-ms-fullscreen, :root .selector</span> {
</span>  <span>margin-left: 5px;
</span><span>}</span>

>這裡的重要一點不是針對哪些瀏覽器，而是我們在同一頁面上都在了解什麼是CSS hack。

CSS hacks無效CSS？

>如果您的樣式表中有黑客攻擊，則如果您通過W3C的CSS驗證器運行，您的CSS可能會發出警告和/或錯誤。但這不是保證，也不是一種識別某物是否是黑客的方式。

>您的CSS可能會包含黑客攻擊，也可能不會產生任何警告或錯誤。例如，如果您僅使用的CSS黑客使用Star-HTML hack來定位IE6，則您的樣式表將驗證良好，而無需與黑客相關的錯誤或警告。

>另外，一些hacks（例如我上面討論的IE11黑客）使用特定於供應商的代碼（例如：-ms-fullscreen）。在這種情況下，驗證器中的默認設置可以通過“通過”綠屏消息顯示您的CSS：

' CSS Hack”的定義是什麼？

但是，如果您在驗證器屏幕上向下滾動，則會看到這樣的警告：

' CSS Hack”的定義是什麼？

在這種情況下，警告我是因為：-ms-fullscreen被認為是“未知的供應商擴展偽級”。如果您更舒服地將這種CSS視為錯誤而不僅僅是警告，則可以使用驗證器輸入區域下方的“更多選項”部分調整驗證器的設置：

' CSS Hack”的定義是什麼？

>如果“錯誤”將“供應商擴展”選項更改為“錯誤”，則如果其中包含供應商前綴或其他特定於瀏覽器的CSS（不一定是hacks），則可以防止樣式表傳遞驗證。

上述CSS目標IE8及以下。 “黑客”是後斜線和九個（9）的組合。大多數瀏覽器都會忽略整個線路，因為9個部分使該行無效CSS。但是，無論出於何種原因，Internet Explorer版本8及較低的版本仍然將其視為有效，並將應用保證金設置。但是，在這種情況下，無論您為驗證器選擇哪種設置，它都會顯示錯誤消息，樣式表將不會傳遞驗證：>

<span>* html <span>.sidebar</span> {
</span>  <span>margin-left: 5px;
</span><span>}</span>

哪些技術不是hacks？

以下方法和技術不一定應歸類為CSS hacks：

！重要的聲明不是hacks

附加重要的關鍵字的CSS行完全是另一個問題。這是有效的CSS，不用於針對特定的瀏覽器。這不是黑客，但可以將其視為不良的CSS。

>供應商前綴不一定是hacks

供應商的前綴針對特定的瀏覽器，但這些不是我們通常稱為黑客的瀏覽器。在大多數情況下，如果您使用的是供應商前綴，則還提供有效的隨附標準代碼。那不是黑客。話雖如此，在某些情況下，您會編寫特定於供應商的代碼來定位瀏覽器，從而成為侵略者。上述使用_： - ms-fullscreen的代碼是一個示例。另一個很好的例子是觸發硬件加速度在Webkit瀏覽器中。但是供應商的前綴在大多數情況下是一個獨立的主題。實際上，W3C具有有關供應商特定代碼的文檔，支持這樣的觀點，即這些概念本身不應將其視為黑客。

高特異性選擇器不是hacks

真正地使用選擇器，以試圖在樣式表的另一部分（例如身體.content #sidebar p）中覆蓋某些東西不是CSS hack。這是不好的CSS，但這不是黑客。

舊語法不是hack

一個很好的例子是Flexbox中深瀏覽器支持所需的複雜代碼。除了今天這可能是不必要的事實之外，我也不會將這種事情歸類為黑客。當這些瀏覽器支持它時，這是有效的代碼，因此它可能具有與黑客攻擊相同的效果，但我認為這不是同一件事。

有條件評論呢？

>有條件的註釋，您可以編寫CSS甚至HTML來定位某些版本的Internet Explorer（甚至排除某些版本的Internet Explorer）是一個灰色區域。如果以某種方式寫的話，它們是有效的HTML，但它們是“ hacky”。早在2008年，保羅·愛爾蘭（Paul Irish）普及了我們所說的“有條件課程”，我敢肯定我們中的許多人已經使用過。這些使用有條件的註釋來產生您可以在樣式表中使用的類，以使用有效的CSS來定位IE的特定版本。

>那麼，有條件評論的使用是否是“ CSS HACK”嗎？我會說是的，僅僅是因為他們在使用更習慣的CSS hack時完成了完全相同的事情。

您應該使用CSS hacks嗎？

與許多Web開發主題一樣，此處的答案不僅是是YAS

或

> no 。正確的答案是>取決於。大多數純粹主義者會說不要使用它們。但這通常不是那麼簡單。當談到黑客時，我的建議是：>

在項目的預算和時間限制內完成所有力量的所有操作，以編寫有效的，基於標準的跨瀏覽器CSS，而無需使用hacks。

>寫黑客時，做類似哈里·羅伯茨（Harry Roberts）建議的事情，因此您的黑客分離且在您的時間和預算允許時更容易重構。

>始終將註釋（或文檔）與黑客包含，並嘗試盡快重新分配代碼。

總結

如果您不記得這篇文章的其他內容，請記住這一點：

a CSS hack在一個或多個特定的瀏覽器版本中應用CSS，而其他瀏覽器將忽略同一CSS。

這是CSS黑客的簡單定義。因此，僅僅因為您支持CSS中的Microsoft Edge，並不意味著您為Edge編寫hacks;支持是一個不同的主題。

這篇文章中可能有幾件事並不是每個人都同意的，但是我認為大多數了解hacks的開發人員都會同意上述結論的摘要。

如果我遺漏了任何東西或犯了任何錯誤，請隨時在評論中告訴我，我將進行任何必要的更正。

經常詢問有關CSS hacks

的問題（常見問題解答）

> CSS hack？

a css hack是Web開發人員使用的一種技術來創建特定的樣式或佈局，而標準CSS規則可能無法使用特定樣式或佈局。這些駭客通常用於克服瀏覽器不一致或局限性。例如，開發人員可能會使用CSS Hack來確保網站在舊版本的Internet Explorer中正確顯示，這可能無法完全支持最新的CSS標準。但是，很重要的是，只有在必要時才使用CSS黑客攻擊，因為它們可以使您的代碼更加複雜，更難維護。

>我如何識別CSS hack？涉及以非常規的方式使用CSS選擇器或屬性。例如，開發人員可能會使用CSS黑客來實現特定的瀏覽器，以利用該瀏覽器唯一的錯誤或功能。這可能涉及使用僅由該瀏覽器識別的CSS屬性，或以僅瀏覽器理解的方式使用CSS選擇器。如果您看到CSS代碼似乎不尋常或不遵循標準CSS語法，則可能是CSS Hack。在某些情況下，它們通常被認為是一種不好的做法。這是因為它們可以使您的代碼更難理解和維護，並且可以在不同的瀏覽器中引起意外行為。通常最好使用標準CSS技術並以在較舊的瀏覽器中優雅降低的方式設計您的網站，而不是使用CSS hacks。

>有哪些常見的CSS hacks？

>一些常見的CSS hacks包括“框模型hack”，這些hack用於修復瀏覽器如何計算元素寬度和高度的差異以及元素的寬度和高度的差異引起的佈局問題，以及“ Star Hack”，用於針對Internet Explorer 7及以下。另一個常見的CSS黑客是“下劃線黑客”，它用於針對Internet Explorer 6及以下。

>我如何避免需要使用CSS hacks？使用CSS Hacks是以與所有主要瀏覽器兼容的方式設計您的網站。這可能涉及使用CSS重置以確保您的樣式在不同的瀏覽器上持續應用，並避免使用不廣泛支持的CSS功能。此外，您可以使用諸如我可以使用的工具來檢查不同CSS功能的瀏覽器兼容性。

> CSS hacks的替代方案是什麼？

而不是使用CSS Hacks，您可以使用功能檢測庫（如Modernizr）以檢測用戶瀏覽器是否支持特定的CSS功能。然後，您可以使用此信息根據瀏覽器的功能應用不同的樣式或佈局。另一種選擇是使用CSS預處理器（例如Sass或更少），這使您可以編寫更強大且可維護的CSS代碼。

>我如何了解有關CSS Hacks的更多信息？您可以在線了解有關CSS黑客的更多信息。 CSS-tricks和Smashing Magazine等網站經常發表有關CSS Hacks和其他高級CSS技術的文章。此外，您可以在Codepen和Jsfiddle等網站上找到許多CSS hacks的教程和示例。