Targeting only Firefox with CSS - GeeksforGeeks

20 Jan, 2022
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  
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:  
Note: The CSS style of above examples will work only in Firefox browsers. 
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
avtarkumar719
CSS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to update Node.js and NPM to next version ?
How to create footer to stay at the bottom of a Web page?
How to apply style to parent if it has child with CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to update Node.js and NPM to next version ?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property