如何使用 CSS 專門針對 Firefox？

僅使用 CSS 來定位 Firefox

條件註解透過特定於瀏覽器的 CSS 規則來定位 Internet Explorer 的能力是眾所周知的。然而，當問題源自 Firefox 使用的 Gecko 引擎時，就需要採用不同的方法。如何將 CSS 規則專門應用於 Firefox，而不影響其他瀏覽器？

基於瀏覽器功能的解決方案

JavaScript 瀏覽器嗅探器不被認為是乾淨的解決方案這個目的。相反，首選利用瀏覽器功能的方法。

使用 @-moz-document

@-moz-document 規則可專門用於針對 Firefox。它的工作原理是將 CSS 規則應用於具有以“-moz-”開頭的“url-prefix()”函數的文件。 Firefox 是目前唯一支援此功能的瀏覽器。

使用範例

以下範例示範如何使用@-moz-document 變更h1 的顏色僅在Firefox 中將元素變為紅色：

@-moz-document url-prefix() {
  h1 {
    color: red;
  }
}

<h1>This should be red in FF</h1>

在其他瀏覽器中，h1 元素將保留未更改，因為它們不識別@-moz-document 規則。

以上是如何使用 CSS 專門針對 Firefox？的詳細內容。更多資訊請關注PHP中文網其他相關文章！