Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including browser-classes with all npm packages installed. Try it out:

var browserClasses = require("browser-classes")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

browser-classes v1.0.1

Adds browser classes to document body. For better browser bug fixing.

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

Usage

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

SCSS Usage

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">

Javascript usage

The below method can test for Internet Explorer 9

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

Browser only targeting

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

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

Browser Support

Currently this library identifies the following browsers:

  • Chrome
  • Internet Explorer
  • Edge
  • Safari
  • Firefox

Example class names for browsers

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

BrowserClass
Internet Explorer 10<body class="browser-ie-10">
Edge 12<body class="browser-edge-12">
Google Chrome 50<body class="browser-chrome-50">
Firefox 60<body class="browser-firefox-60">
Safari 11<body class="browser-safari-1">
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free