Understanding the tools to write a CSS polyfill from scratch

To write CSS polyfills, we first need to understand our possibilities to even hook into CSS in the first place. We cannot hook into the rendering engine of every browser itself, at least not with browser plugins or a custom build, and we can’t directly add code to the inner workings of the browser from a website. That would be a substantial security risk at best. Besides, CSS rendering engines are arguably some of the most optimized software in the world, and we don’t want to mess with them.

So, what else can we do? We could use preprocessors, such as SASS or LESS. However, that would mean we potentially need to ship polyfill code to clients that do support the polyfilled feature, which is not ideal.

There are, however, a few tricks up our sleeves on how we can ship the CSS and only execute the polyfilling code once necessary. One such solution is to use PostCSS in the browser.

A note on writing polyfills...