Open In App

Targeting only Firefox with CSS

Improve
Improve
Like Article
Like
Save
Share
Report

Sometimes the content needs to focus on the particular browser. This article target the Firefox browser to display CSS property. The targeted CSS will works only for targeted browser. Target the Firefox browser with CSS in many ways. Some of them are discussed below:

Method 1: This method uses Mozilla specific extension to add CSS property. This extension supply the CSS property only in Firefox browser. 

Syntax: 

@-moz-document url-prefix() {
element {
// CSS Property
}
}

Example: 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>Targeting firefox with CSS</title>
    <style type="text/css">
        @-moz-document url-prefix() {
            h1 {
                color: green;
                font-size: 34px;
                text-align: center;
            }
            p {
                font-size: 24px;
                text-align: center;
            }
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
   
    <p>A Computer Science portal for geeks. It contains
        well written, well thought and well explained computer
        science and programming articles, quizzes etc.
    </p>
</body>
 
</html>


Output:

firefox

Method 2: The -moz-appearance CSS property is used in Gecko (Firefox) to display an element using platform-native styling based on the operating system’s theme. 

Syntax: 

@supports (-moz-appearance:none) {
element {
// CSS Property
}
}

Example: 
 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>Targeting firefox with CSS</title>
    <style type="text/css">
        @supports (-moz-appearance:none) {
            h1 {
                color: green;
                font-size: 34px;
                text-align: center;
            }
            p {
                font-size: 24px;
                text-align: center;
                display:block;
                padding: 20px;
                background: green;
                color: white;
            }
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
 
    <p>A Computer Science portal for geeks. It contains
        well written, well thought and well explained computer
        science and programming articles, quizzes etc.
    </p>
</body>
 
</html>


Output: 

firefox1

Note: The CSS style of above examples will work only in Firefox browsers.



Last Updated : 03 Aug, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads