資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究僅使用 CSS 針對 Firefox
在開發 Web 應用程式時，開發人員必須使其在每個瀏覽器中都看起來不錯。一些 CSS 屬性不受 Firefox 等瀏覽器支援，但受 Chrome、Opera 等其他瀏覽器支援。
在這種情況下，我們需要編寫僅針對 Firefox 瀏覽器的 CSS 程式碼。在本文中，我們將學習兩種不同的 CSS 編寫方法，這些方法僅針對 Firefox 瀏覽器。
使用 CSS 針對 Firefox 的不同方法
如以下所述，有兩種方法可以使用 CSS 針對 Firefox。
注意：以下示例中的 CSS 樣式僅在 Firefox 瀏覽器中有效。
使用 Mozilla 專用 CSS 擴充套件
我們列表中使用 CSS 針對 Firefox 瀏覽器的第一種方法是使用“@-moz-document url-prefix()” CSS 專用擴充套件。我們需要在此 CSS 擴充套件中編寫 CSS 程式碼，只有在開啟 Firefox 瀏覽器時才會將其應用於網頁。
語法
使用者可以按照以下語法使用 @-moz-document url-prefix() CSS 專用擴充套件來使用 CSS 針對 Firefox。
@-moz-document url-prefix() {
/* CSS Code */
}
示例 1
在下面的示例中，我們建立了一個 HTML div 元素並在其中添加了文字內容。之後，我們在 CSS 中使用了 @-moz-document url-prefix()，僅在 Firefox 瀏覽器中將樣式應用於 div 元素。
使用者可以在 Chrome 和 Firefox 瀏覽器中開啟以下網頁，並觀察 div 元素樣式之間的差異。
<!DOCTYPE html>
<head>
<style>
@-moz-document url-prefix() {
.firefox {
background: green;
border: 1px solid red;
padding: 20px;
margin: 20px;
font-size: 1.3rem;
color: white;
width: 500px;
}
}
</style>
</head>
<body>
<h3>
Using the @-moz-document url-prefix() CSS-specific
extension to target only Firefox browser
</h3>
<div class = "firefox">
<p>
Firefox is a free, open-source web
browser from Mozilla.
</p>
</div>
</body>
</html>
示例 2
在下面的示例中，我們建立了父 div 元素並在其中添加了一些其他 div 元素。在 CSS 中，我們使用了 @-moz-document url-prefix() CSS 專用擴充套件，僅在 Firefox 瀏覽器中為 div 元素設定樣式。
在 Chrome 瀏覽器中，使用者可以觀察到空白網頁，因為尺寸不會應用，而在 Firefox 瀏覽器中，使用者可以觀察到帶樣式的 HTML 內容。
<html>
<head>
<style>
@-moz-document url-prefix() {
.parent {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
height: 200px;
width: 500px;
background-color: yellow;
}
.first,
.second,
.third { height: 100px; width: 100px; }
.first { background-color: red;}
.second {background-color: green;}
.third {background-color: blue;}
}
</style>
</head>
<body>
<h3>
Using the @-moz-document url-prefix() CSS-specific
extension to target only firefox browser
</h3>
<div class = "parent">
<div class = "first"> </div>
<div class = "second"> </div>
<div class = "third"> </div>
</div>
</body>
</html>
使用 @supports 規則
CSS 包含各種規則，每個規則都提供不同的功能。@supports 規則將條件作為引數，如果條件為真，則它會將 CSS 應用於 Firefox 瀏覽器中的網頁。
在我們的案例中，我們將使用“-moz-appearance:none” CSS 條件來檢查當前瀏覽器是否為 Firefox 瀏覽器。“-moz-appearance:none” 刪除了 HTML 元素（如複選框等）的預設樣式，但在這裡，我們可以使用它來檢查當前瀏覽器是否為 Firefox。
語法
使用者可以按照以下語法使用 @supports CSS 規則來使用 CSS 針對 Firefox 瀏覽器。
@supports(-moz-appearance:none) {
/* CSS code */
}
在上述語法中，我們需要在 @supports 規則的宣告塊中新增 CSS 程式碼。
示例
在下面的示例中，我們在 HTML 中建立了三個不同的<p>元素。之後，我們使用帶有“-moz-appearance:none”條件的 @supports 規則，僅在 Firefox 瀏覽器中為“<p>”元素設定 CSS。
在 Firefox 瀏覽器中，使用者可以觀察到文字的不同顏色。
<html>
<head>
<style>
@supports(-moz-appearance:none) {
p.one {color: red;}
p.two {color: green;}
p.three {color: blue;}
}
</style>
</head>
<body>
<h3>
Using the @supports CSS rule to target
only the firefox browser
</h3>
<p class = "one"> TutorialsPoint </p>
<p class = "two"> CSS </p>
<p class = "three"> HTML </p>
</body>
</html>
結論
在這裡，我們學習瞭如何僅使用 CSS 針對 Firefox 瀏覽器。我們使用了 CSS 專用擴充套件和 @supports 規則。當 Firefox 瀏覽器不支援某些 CSS 屬性以應用備用樣式時，使用者應僅使用 CSS 針對 Firefox。
4K+ 瀏覽量
