Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Targeting only Firefox with CSS
While developing web applications, developers must make them look consistent across all browsers. Some CSS properties are not supported by Firefox but work in other browsers like Chrome, Opera, etc. In such cases, we need to write CSS code that targets only the Firefox browser.
In this article, we will learn two different methods to write CSS that targets only Firefox browsers.
Syntax
/* Method 1: Mozilla-specific CSS Extension */
@-moz-document url-prefix() {
/* CSS code for Firefox only */
}
/* Method 2: @supports Rule */
@supports(-moz-appearance:none) {
/* CSS code for Firefox only */
}
Method 1: Using the Mozilla-specific CSS Extension
The first approach to target Firefox is using the @-moz-document url-prefix() CSS-specific extension. CSS code written inside this extension will only be applied when the page is opened in Firefox.
Example 1: Basic Firefox-only Styling
In this example, we create a div element that gets styled only in Firefox
<!DOCTYPE html>
<html>
<head>
<style>
@-moz-document url-prefix() {
.firefox {
background: green;
border: 2px solid red;
padding: 20px;
margin: 20px;
font-size: 1.3rem;
color: white;
width: 500px;
border-radius: 8px;
}
}
</style>
</head>
<body>
<h3>Using @-moz-document to target Firefox only</h3>
<div class="firefox">
<p>Firefox is a free, open-source web browser from Mozilla.</p>
</div>
</body>
</html>
In Firefox: A green box with red border, white text, and rounded corners appears. In other browsers: Plain unstyled text appears without any background or styling.
Example 2: Flexbox Layout for Firefox
This example creates a flexbox layout that only displays in Firefox
<!DOCTYPE html>
<html>
<head>
<style>
@-moz-document url-prefix() {
.parent {
display: flex;
justify-content: space-around;
align-items: center;
height: 150px;
width: 500px;
background-color: #f0f0f0;
border: 2px solid #333;
}
.box {
height: 80px;
width: 80px;
}
.first { background-color: red; }
.second { background-color: green; }
.third { background-color: blue; }
}
</style>
</head>
<body>
<h3>Flexbox layout visible only in Firefox</h3>
<div class="parent">
<div class="box first"></div>
<div class="box second"></div>
<div class="box third"></div>
</div>
</body>
</html>
In Firefox: A gray container with three colored boxes (red, green, blue) arranged horizontally appears. In other browsers: Three empty divs appear without any styling or layout.
Method 2: Using the @supports Rule
The @supports rule applies CSS only if the browser supports a specific property. We use -moz-appearance:none as a condition since this is a Firefox-specific property.
Example: Firefox-only Text Styling
This example applies different text colors only in Firefox
<!DOCTYPE html>
<html>
<head>
<style>
@supports(-moz-appearance:none) {
.text-one {
color: red;
font-weight: bold;
}
.text-two {
color: green;
font-size: 1.2rem;
}
.text-three {
color: blue;
text-decoration: underline;
}
}
</style>
</head>
<body>
<h3>Using @supports rule to target Firefox</h3>
<p class="text-one">TutorialsPoint</p>
<p class="text-two">CSS Tutorial</p>
<p class="text-three">HTML Tutorial</p>
</body>
</html>
In Firefox: "TutorialsPoint" appears in bold red, "CSS Tutorial" in larger green text, and "HTML Tutorial" in underlined blue text. In other browsers: All text appears in default black color without any special styling.
Key Points
- Both methods work exclusively in Firefox
-
@-moz-document url-prefix()is more widely used but considered deprecated -
@supports(-moz-appearance:none)is the modern, standards-compliant approach - Use Firefox-specific CSS only when necessary for cross-browser compatibility
Conclusion
Firefox-specific CSS targeting is useful when you need to apply different styles for Firefox due to rendering differences or unsupported properties. The @supports rule is preferred over the deprecated @-moz-document approach for modern web development.
5K+ Views
