Targeting only Firefox with CSS

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <title>Targetting 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>                    

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <title>Targetting 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>                    

chevron_right


Output:
firefox1

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



My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.