Browser-specific CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

This tool generates browser-specific CSS, stripping unsupported features.

Supported features are:

  • remove unused prefixed properties, e.g. if compiling for Firefox, remove the -webkit-s
  • keep _ and * hacks in IE67, remove in all other browsers
  • use cssprops library to strip unsupported properties
  • remove empty delimiters, like ;; (result of stripping things)
  • no media queries in IE < 9

More to come:

  • data
  • random observations and heuristics
  • your input and contributions


Because CSS is on the critical path to rendering pages. It must be small! Or else!

Why send extra bytes the browser has no use for? Walk in Firefox's shoes for a minute. You've just served something like:

a {
  filter: progid:microsoft:obladi:oblada:AlphaImageLoader(bananas.png);

You can imagine Firefox thinking: "This is BS... I mean ... too browser-specific! I've no use for this. And I don't appreciate you wasting my time. I could've been delighting your users with your gorgeous app and instead look at me - having to sift through this nonsense"


$ npm install bscss


The list of supported browsers is as follows:

  • IE (6, 7, 8, 9, 10, 11)
  • Chrome
  • Firefox
  • Safari
  • iOS Safari
  • Opera


  var bs = require('bscss');
  var css =
    'a{color: red; _color: blue; -o-stuff: cool; -ms-filter: 1}';
  css = bs.transform(css, 'chrome');

This spits out only the color: red, the rest is stripped.

bs.transform(css, 'ie7'); for example will keep the color:blue too and remove the --prefixed properties. In IE6 and IE7 the hack characters are removed, e.g. _color becomes color


Available at