FireFox Specific CSS
Published
•1 min readA
I am a web developer from Navi Mumbai.
Mainly dealt with LAMP stack, now into Django and getting into Laravel and Cloud.
Founder of nerul.in and gaali.in
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
