Browserhacks is an extensive list of browser specific CSS and JavaScript hacks from all over the interwebs.
Please keep in mind using a hack is not always the perfect solution. It can be useful to fix some weird browser specific bug, but in most cases you should fix your CSS/JS.
The site is a Jekyll setup hosted on GitHub Pages. Simply update the gh-pages
branch to update the site (direct edit on GitHub, manual push or pull-request merge).
Adding a new hack is as simple as adding a new entry in _data/hacks.json
. Like this:
{
"type": "selector",
"browsers": {
"ch": "*",
"op": "14+"
},
"label": "A label for your hack if necessary.",
"language": "css",
"code": [
".selector:not(*:root) {}"
],
"test": [
".selector:not(*:root) { background: lightgreen; }"
]
}
The type key defines which type of hack it is; valid types are listed in _data/hackTypes.json
.
The browsers key is an object mapping a browser’s shortname to a version expression; valid browsers are listed in _data/browsers.json
. Versions can be:
42
)42|43
)42+
)42-
)*
)The label key can be left empty, or describe the hack if it is necessary.
The language key defines how to display the hack, and how to create the dynamic test for it. Possible languages are css
, javascript
and markup
.
The code key is an array of expressions for the hack. Certain hacks can be written in several forms, hence the need for an array.
The test key is an array of expressions for the test. It should be a direct copy of the code
array, except the braces should be filled with a background: lightgreen;
in case of a selector, or .selector { background: lightgreen; }
in case of a media expression. Take example on other existing hacks.
Once you’ve done that, simply run npm run build
to complete the hack with a unique ID, a human-readable version, a check for whether or not it’s a legacy hack, and create dynamic tests.