Chances are, you use the border-box default, too:

*, *:before, *:after {
    box-sizing: border-box;
}

Today I stumbled upon the fact that many still kinda recent browser versions need prefixing for that. What I want is:

*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

I am using the autoprefixer of PostCSS to help me out. However, the default configuration does only consider the last few versions of any evergreen browser – which is usually the case for other autoprefixers as well. Thus the prefixes shown above don't get added.

To configure the autoprefixer appropriately I started from IE9's release date in 2011. I took each browser that can be configured with Browserlist and added the version that was also released around the same time.

In the end I got:

autoprefixer({ browsers: [
    'Android >= 2.3',
    'BlackBerry >= 7',
    'Chrome >= 9',
    'Firefox >= 4',
    'Explorer >= 9',
    'iOS >= 5',
    'Opera >= 11',
    'Safari >= 5',
    'OperaMobile >= 11',
    'OperaMini >= 6',
    'ChromeAndroid >= 9',
    'FirefoxAndroid >= 4',
    'ExplorerMobile >= 9'
]})

Maybe it is a bit too much to support even evergreen browsers back to 2011. Nonetheless it certainly is better than the autoprefixer's default.

What about you? Which configuration do you prefer in your "IE9 and up" projects?