browser-classes

Adds browser classes to document body. For better cross-browser SCSS styling.

This library adds the current browser and version to the <body> tag as a class to the site.

Once you run the class, your <body> tag will have the following class added.

<body class="browser-firefox-65">
<body class="browser-ie-10">

Installation

npm i --save browser-classes

import BrowserClasses from 'browser-classes';
new BrowserClasses();

Use the @at-root method when using with SCSS

.myClass {
    color: red;
    @at-root .browser-ie-10 {
        color: blue
    }
}

This will target Internet Explorer 10 with browser-ie-10 added to the body tag.

<body class="browser-ie-10">

The below method can test for Internet Explorer 9

if (document.body.classList.contains('browser-ie-9')) {
    // fix
}

To target only a certain browser not by version use the following syntax.

body[class^="browser-firefox"] {
    color: red;
}

Currently, this library identifies the following browsers:

Below are some examples of the classes that will be generated for the browsers.