Tutorialspoint.dev

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:

<!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>                    

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:

<!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>                    

Output:
firefox1

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



This article is attributed to GeeksforGeeks.org

leave a comment

code

0 Comments

load comments

Subscribe to Our Newsletter