how to apply specific CSS file to Mozilla Firefox browser?

Question

<script type="text/javascript">
        var isChrome = /Chrome/.test(navigator.userAgent) && /Google 
                          Inc/.test(navigator.vendor);
          if (isChrome) { 
                      document.write('<'+'link rel="stylesheet" 
                                      href="css/framesmainchrome.css" />');
                        }
/script>

In above script I got Chrome browser and i can easily apply specific CSS file for chrome browser.

I want to apply another CSS file For Mozilla Firefox browser so modify above script which give the solution for my question.

Why do you need browser specific CSS file? – Satpal Jun 20 '17 at 05:38 — Satpal, Jun 20 '17 at 05:38

score 0 · Answer 1 · answered Jun 20 '17 at 05:41

OK, I've found it. This is probably the most clean and easy solution out there and does not rely on JavaScript being turned on.

<!DOCTYPE html>

<html>
<head>
<style type="text/css">
@-moz-document url-prefix() {
    h1 {
        color: red;
    }
}
</style>
</head>
<body>

<h1>This should be red in FF</h1>

</body>
</html>

It's based on yet another Mozilla specific CSS extension. There's a whole list for these CSS extensions right here:https://developer.mozilla.org/en-US/docs/Web/CSS/Mozilla_Extensions

how to apply specific CSS file to Mozilla Firefox browser?

1 Answers1