Using CSS4 features today with cssnext

For the past four years, since September 2011, the W3C has been developing CSS4. Modules of the fourth version of cascading style sheets are designed on the basis of CSS3 and supplement them with new properties and values. In this article, I would like to talk about how to use the features of CSS4 today, about cssnext .

So, cssnext is a CSS compiler that allows you to use the latest CSS syntax today. It converts new CSS specifications to more modern code so that you don’t have to wait for new features to be supported in your browser.

Opportunities

Automatic placement of vendor prefixes

Vendor prefixes are automatically added (or, in the event that they are obsolete, are deleted) using the Autoprefixer PostCSS plugin.

Variables in CSS Properties

Thanks to the cssnext capabilities in the root selector: root we can set an unlimited number of variables and use them in our CSS properties.
')

:root { --fontSize: 1rem; --mainColor: #ddd; } a { color: var(--mainColor); font-size: var(--fontSize); } 

Specification | Plugin documentation

Simple math expressions

Allows the use of the calc () property. This property can be used not only with simple values, but also with variables.

 :root { --fontSize: 1rem; } h2 { font-size: calc(var(--fontSize)*2); } 

Plugin documentation

Variables for media queries

 @custom-media --small-viewport (max-width: 30em); @media (--small-viewport) { /*     */ } 

Specification | Plugin documentation

Improved media query syntax

Allows the use of the expressions> = and <= instead of min-width and max-width in media queries.

 @media (width >= 500px) and (width <= 1200px) { /*   */ } 

Specification | Plugin documentation

Custom selectors

Allows you to create your own selectors.

 @custom-selector :--heading h1, h2, h3, h4, h5, h6; :--heading { margin-top: 0; } 

Specification | Plugin documentation

Functions for color modification

At the moment, a significant amount of color modifiers is already available. More details can be found here .

 a { color: color(red alpha(-10%)); } a:hover { color: color(red blackness(80%)); } 

Specification | Plugin documentation

Hwb color support ()

Allows you to use W3C CSS hwb () colors to be converted to rgb () or rgba ()

 body { color: hwb(90, 0%, 0%, 0.5); } 

Specification | Plugin documentation

More than 50 shades of gray

The ability to use the property gray (). As a first argument, you can use a value from 0 to 255 or from 0 to 100 percent.

 .foo { color: gray(85); } .bar { color: gray(10%, 50%); } 

Specification | Plugin documentation

Colors #rrggbbaa

Allows the use of four or eight-digit values ​​for color designation.

 .boo { color: #9d9c; } 

Specification | Plugin documentation

Rebeccapurple color

New color.

 .foo { background: rebeccapurple; } 

Specification | Plugin documentation

Font-variant property

This plugin allows you to transform the font-variant property into CSS more compatible with today's most popular browsers.

 h2 { font-variant-caps: small-caps; } table { font-variant-numeric: lining-nums; } 

Specification | Plugin documentation

Filters

Allows you to use 10 different CSS filters:

• grayscale
• sepia
• saturate
• hue-rotate
• invert
• opacity
• brightness
• contrast
• blur
• drop-shadow

 .blur { filter: blur(4px); } 

Specification | Plugin documentation

Rem units

Rem units are returned in px.

 h1 { font-size: 1.5rem; } 

Specification | Plugin documentation

Pseudo-class: any-link

Allows you to use the class: any-link for links.

 /* : */ nav :any-link > span { background-color: yellow; } /* : */ nav :link > span, nav :visited > span { background-color: yellow; } 

Specification | Plugin documentation

Pseudo-class: matches

Allows you to use the class: matches ().

 /* : */ p:matches(:first-child, .special) { color: red; } /* : */ p:first-child, p.special { color: red; } 

Specification | Plugin documentation

Pseudo-class: not

Something similar to the previous pseudo-class, but with the opposite result.

 p:not(:first-child, .special) { color: red; } 

Specification | Plugin documentation

Alpha colors

Adds color folbacks for rgba colors (for older browsers).

 body { background: rgba(153, 221, 153, 0.8); } 

Specification | Plugin documentation

Also, cssnano, in addition to all of the above, contains a number of bonus features, such as importing (@import) third-party CSS files into your final CSS file, going to production and compressing the final output CSS using CSSNano.

Using

You can use cssnext as a plugin for your favorite Grunt , Gulp , Broccoli , Webpack , Fly , etc. build systems. or as a plug-in for PostCSS.

I prefer the latter option. Actually, I use it in my starting assembly for developing my own projects.

I hope you were interested in the possibilities of cssnext.

That's all. Thanks for attention!