Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Targeting only Firefox with CSS
While developing the web application, developers must make it look fine in every browser. Some CSS properties are not supported by the browsers like Firefox but are supported by other browsers such as Chrome, Opera, etc.
In such cases, we need to write a CSS code that targets only Firefox browser. In this tutorial, we will learn two different methods to write CSS, which targets only Firefox browsers.
Using the Mozila-specific CSS Extension
The first approach in our list to target the Firefox browser with CSS is using the ‘@-moz-document url-prefix()’ CSS-specific extension. We need to write the CSS code inside this CSS extension, which will only be applied to the web page when opening the Firefox browser.
Syntax
Users can follow the syntax below to use the @-moz-document url-prefix() CSS-specific extension to target the Firefox with CSS.
@-moz-document url-prefix() {
/* Add CSS here */
}
Example 1
In the example below, we have created an HTML div element and added text content inside that. After that, we have used the @-moz-document url-prefix() in CSS to apply styles to the div elements in the Firefox browser only.
Users can open the web page below in the Chrome and Firefox browser and observe the difference between the div element's styling.
<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 <i> @-moz-document url-prefix() CSS-specific extension </i> to target only Firefox browser </h3>
<div class = "firefox">
<p> Firefox is a free, open-source web browser from Mozilla. </p>
</div>
</body>
</html>
Example 2
In the example below, we have created the parent div element and added some other div elements inside that. In CSS, we used the @-moz-document url-prefix() CSS-specific extension to only style the div elements in the Firefox browser.
In the Chrome browser, users can observe the empty web page as dimensions will not be applied, and in the Firefox browser, users can observe the styled HTML content.
<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 <i> @-moz-document url-prefix() CSS-specific extension </i> to target only firefox browser </h3>
<div class = "parent">
<div class = "first"> </div>
<div class = "second"> </div>
<div class = "third"> </div>
</div>
</body>
</html>
Using the @supports Rule
CSS contains various rules, and every rule provides different functionalities. The @supports rule takes the condition as a parameter, and if the condition becomes true, it applies the CSS to the web page in the Firefox browser.
In our case, we will use the ‘-moz-appearance:none’ CSS condition to check if the current browser is the Firefox browser. The ‘-moz-appearance:none’ removes the default style of HTML elements like checkbox, etc., but here, we can use it to check whether the current browser is Firefox.
Syntax
Users can follow the syntax below to use the @supports CSS rule to target the Firefox browser with CSS.
@supports(-moz-appearance:none) {
/* CSS code */
}
In the above syntax, we require to add CSS code inside the declaration block of the @supports rule.
Example 3
In the example below, we have created three different ‘<p> elements in HTML. After that, we used the @supports rule with the ‘-moz-appearance:none’ condition to set the CSS for the ‘<p>’ element in the Firefox browser only.
In the Firefox browser, users can observe the different colors of the text.
<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 <i> @supports CSS rule </i> to target only the firefox browser </h3>
<p class = "one"> TutorialsPoint </p>
<p class = "two"> CSS </p>
<p class = "three"> HTML </p>
</body>
</html>
Users learned to target the Firefox browser only with CSS. We have used the CSS-specific extension and @supports rule. Users should target Firefox only with CSS when the Firefox browser does not support some CSS properties to apply the alternative styles.
2K+ Views
