FireFox Specific CSS

Though the chances of wanting this is pretty slim, but if you want to target a set of CSS attributes just for FireFox instead of using JavaScript to alter the styles, its possible.
Though most -moz- properties get deprecated & later removed, when the official CSS3 one is implemented, the @-moz-document is Mozilla/Gecko-only specific which is used to contain different styles rules based on filtering document URLs.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>FireFox Specific CSS</title>
<style type="text/css">
h1
{
    color:red;
}
h2
{
    color:green;
}
@-moz-document url-prefix()
{
    h1
    {
        color:blue;
    }
    h2
    {
        color:black;
    }
}
</style>
</head>
<body>
<h1>Hello</h1>
<h2>World</h2>
</body>
</html>

Example : Mozilla Extensions

Mozilla Extensions
Targeting only FireFox with CSS

FireFox Specific CSS

Comments

More from this blog

@supports API

Using the :has selector to display full with of a container

first-of-type

Text Input Validation & Error without JavaScript

Mega Menu using CSS only

Command Palette

Comments

More from this blog

Related Links :