数据结构
网络
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+ 浏览量
