14 DAY TRIAL // Even if CSS3 hasn't been officially released, developers are looking past the standard to what lies beneath and are already experimenting and implementing new CSS4 tools on a regular basis.
The cssnext (not CSSNext) JavaScript library is a CSS-to-CSS transpiler that can be used with Node.js to convert experimental, unofficial CSS4 code to standards compliant CSS3 syntax.
This can be done programmatically in your Node.js code using a classic JavaScript library file, by using the Node.js CLI utility, or one of the plugins for various dev tools like Webpack, Grunt, Gulp, Duo, Brunch, Broccoli, PostCSS, Prepos, or Connect.
The features cssnext implements are not based on the whimsical dreams of an unknown developer but on actual W3C CSS4 specification drafts, and some of them on CSS3 modules that have not reached a final, stable version.
Since CSS3 as a standard is not one single entity but a collection of smaller modules, cssnext can also be a good way to future-proof CSS3 features that are still under development.
Experiment with CSS4 right now, and get ready for what's coming in the future
At a quick glance over cssnext's current features, we highlight support custom selectors, custom media queries, media query ranges, the color() function, the HWB color space, the RGBa hexadecimal notation (#RRGGBBAA), font variants, pseudo elements, rem units, the filter effects module, the :matches and :not pseudo-classes.
While all of these sound like gibberish if you barely can keep track of all the new CSS3 updates, then you'll need to have a look at cssnext's website and see if they're really useful to your workflow. A demo playground is available, useful for giving the CSS4 syntax a test drive yourself.
Considering how everything is handled automatically by the cssnext core, even fallbacks, the only thing left for developers is to put some time aside and dive deeper into what W3C has planned for CSS4.