Firefox-only CSS

November 17, 2022 · CSS

If you are a web developer, you might have come across the need to apply some CSS rules only for Firefox.

For instance, you might want to apply some CSS rules only for Firefox because it doesn’t support some CSS properties or you might want to apply some CSS rules only for Firefox because it doesn’t support some CSS properties in a certain way.

In this article, I will show you how you can apply some CSS rules only for Firefox.

The `@-moz-document` rule

The @-moz-document rule is a CSS rule that allows you to apply some CSS rules only for Firefox. It is a non-standard CSS rule and is only supported by Firefox.

So, let’s say we want to change the background color of the body to be “green” only for Firefox. Everywhere else, it should be “red”. Here’s how we can do it!

body {
    background-color: red;
}

@-moz-document url-prefix() {
    body {
        background-color: green;
    }
}

The url-prefix() is a function to lets you specify if the CSS rule should be applied only for the URLs that start with the specified prefix. When used with no URL argument like @-moz-document url-prefix() it applies to all pages.

Here’s a CodePen that you can play around with. Try opening it in Chrome and Firefox and see the difference.

See the Pen Firefox-only CSS by Amit Merchant (@amit_merchant) on CodePen.

Previous: Probability-based randomness using Lottery class in Laravel 9.x Next: Ability to use Constants in Traits in PHP 8.2

» Share: Twitter, Facebook, Hacker News

Like this article? Consider leaving a

Tip

👋 Hi there! I'm Amit. I write articles about all things web development. You can become a sponsor on my blog to help me continue my writing journey and get your brand in front of thousands of eyes.

Become a Sponsor