https://github.com/techgaun/browser-dead
Identify old and unsupported browsers simple easy way
https://github.com/techgaun/browser-dead
Last synced: about 1 year ago
JSON representation
Identify old and unsupported browsers simple easy way
- Host: GitHub
- URL: https://github.com/techgaun/browser-dead
- Owner: techgaun
- License: apache-2.0
- Created: 2016-11-02T22:29:16.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2016-11-12T07:12:34.000Z (over 9 years ago)
- Last Synced: 2025-04-03T10:38:15.810Z (about 1 year ago)
- Language: JavaScript
- Size: 24.4 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# browser-dead
> Inform users that their browser is unsupported by your website
## Installation
### as node module
```shell
npm i --save browser-dead
```
### as browser script
Download [browser-dead.min.js](https://raw.githubusercontent.com/techgaun/browser-dead/master/dist/browser-dead.min.js) and place it in appropriate directory of your choice.
```shell
wget "https://raw.githubusercontent.com/techgaun/browser-dead/master/dist/browser-dead.min.js" -O browser-dead.min.js
```
Include the script in your html:
```html
```
Download [browser-dead.min.css](https://raw.githubusercontent.com/techgaun/browser-dead/master/dist/css/browser-dead.min.css) and place it in appropriate directory of your choice.
```shell
wget https://raw.githubusercontent.com/techgaun/browser-dead/master/dist/css/browser-dead.min.css -O browser-dead.min.css
```
Include the stylesheet in your html:
```html
```
## Usage
Add a html element with content inside it as you wish.
```html
Unsupported browser
```
If using the node module, in your source files, import the `browser-dead` module and then initialize as below:
```javascript
import browserDead from 'browser-dead'
browserDead({
background: #f00,
color: #fff,
supportBreakpoint: 'promise',
browserDead: 'browser-dead'
})
```
If directly using in html, place the initialization code right below the script tag:
```html
browserDead({
background: #f00,
color: #fff,
supportBreakpoint: 'promise',
browserDead: 'browser-dead'
})
```
### Examples
- [Promise (<=IE11)](https://techgaun.github.io/browser-dead/examples)
- [transform(<=IE8)](https://techgaun.github.io/browser-dead/examples/transform.html)
- [borderImage(<=IE10)](https://techgaun.github.io/browser-dead/examples/borderImage.html)
- [borderSpacing(<=IE7)](https://techgaun.github.io/browser-dead/examples/borderSpacing.html)
## Support Breakpoint
Refer to [caniuse.com](http://caniuse.com) to know what support breakpoint can you use for your scenario. Below are some of the common ones that you can use as breakpoints to not support your choices of browsers:
- `promise` (<= IE11) - [Promise check](http://caniuse.com/#search=promise) is a special implementation in browser-dead which is useful for detecting IE11 properly if you do not wish to support IE11 and below.
- `transform` (<= IE8) - [CSS transform](http://caniuse.com/#search=transform)
- `borderImage` (<= IE10) - [CSS Border Image](http://caniuse.com/#search=border)
- `borderSpacing` (<= IE7) - [CSS Border Spacing](https://msdn.microsoft.com/en-us/library/cc304069(v=vs.85).aspx)
## Contributing
- Fork the repo and clone locally
- `npm i`
- `npm run dev`
- Open examples at `http://localhost:3000/examples/` and see what they do with your changes
- Change or Add examples to play around
- Create pull request
Also, feel free to contribute by providing more breakpoints.