index.md

template	title
Simple	cssnext - Use tomorrow’s CSS syntax, today.

Use tomorrow’s CSS syntax, today.

Check out postcss-cssnext on GitHub or try it in your browser

<iframe frameborder="0" scrolling="0" width="145px" height="30px" style="vertical-align: middle" src="https://ghbtns.com/github-btn.html?user=MoOx&repo=postcss-cssnext&type=star&count=true&size=large" ></iframe> <script async src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=cssnextio" id="_carbonads_js"></script>

What is cssnext?

PostCSS-cssnext is a PostCSS plugin that helps you to use the latest CSS syntax today. It transforms new CSS specs into more compatible CSS so you don't need to wait for browser support. You can literally write future-proof CSS and forget old preprocessor specific syntax.

Features

• automatic vendor prefixes
• custom properties & var()
• custom properties set & @apply
• reduced calc()
• custom media queries
• media queries ranges
• custom selectors
• nesting
• color() function
• hwb() function
• gray() function
• #rrggbbaa colors
• rgba function (rgb fallback)
• rebeccapurple color
• font-variant property
• filter property (svg fallback)
• initial value
• rem unit (px fallback)
• :any-link pseudo-class
• :matches pseudo-class
• :not pseudo-class (to l.3)
• ::pseudo syntax (: fallback)
• overflow-wrap property (word-wrap fallback)
• attribute case insensitive
• rgb() function (functional-notation)
• hsl() function (functional-notation)
• system-ui font-family (font-family fallback)

l.* are level of the specification (when information is relevant)

Why cssnext?

Prior to 2015, CSS was frustrating by not having any specification for features we were looking for. No variables, no math, no color manipulation & no customization. Things are going to change soon since a lot of work has been made by the W3C to write new specs to make our life easier. With cssnext, you can start using some new features today!

Future-proof code

In a near future, browsers will implement new CSS specifications. As time passes, cssnext will remove some transformations that won't be necessary anymore. And maybe one day, you will be able to completely remove cssnext from your workflow without touching your CSS.

It's fast. Lightning fast.

cssnext uses PostCSS which has a way faster CSS parser.
It's a good competitor to libsass, a bit faster than LESS and Stylecow, and way faster than Myth or original Ruby Sass.

Try postcss-cssnext in your browser now.

Follow @cssnext to get the latest news or join the chat on gitter if you have any questions.

Check out cssrecipes, components working with cssnext

You can also check suitcss or basscss