https://github.com/etoxin/browser-classes
Adds browser classes to document body. For better browser css bug fixing.
https://github.com/etoxin/browser-classes
browser internet-explorer javascript
Last synced: 7 days ago
JSON representation
Adds browser classes to document body. For better browser css bug fixing.
- Host: GitHub
- URL: https://github.com/etoxin/browser-classes
- Owner: etoxin
- Created: 2018-07-23T04:09:35.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2021-02-23T09:11:45.000Z (over 4 years ago)
- Last Synced: 2024-08-09T16:19:50.199Z (about 1 year ago)
- Topics: browser, internet-explorer, javascript
- Language: JavaScript
- Homepage:
- Size: 72.3 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# browser-classes
[](https://app.codacy.com/app/etoxin/browser-classes?utm_source=github.com&utm_medium=referral&utm_content=etoxin/browser-classes&utm_campaign=Badge_Grade_Dashboard)
Adds browser classes to document body. For better cross browser SCSS styling.
This library adds the current browser and version to the `` tag as a class to the site.
Once you run the class, your `` tag will have the following class added.
```html
```
## Installation
```
npm i --save browser-classes
```
## Usage
```js
import BrowserClasses from 'browser-classes';
new BrowserClasses();
```
## SCSS Usage
Use the `@at-root` method when using with SCSS
```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.
```html
```
## Javascript usage
The below method can test for Internet Explorer 9
```js
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
```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.
| Browser | Class |
|----------------------|-------------------------------------|
| Internet Explorer 10 | `` |
| Edge 12 | `` |
| Google Chrome 50 | `` |
| Firefox 60 | `` |
| Safari 11 | `` |