postcss-cssnext features

Discover the future of CSS

Note that according to your browser scope some transformation can be skipped to avoid extra useless output. Eg: if you use don’t cover IE 8, rem fallback and rgba fallback might be skipped.

# automatic vendor prefixes

Vendor prefixes are automatically added (and removed if deprecated/useless depending on your browser scope) using autoprefixer).

# custom properties & var()

The current transformation for custom properties aims to provide a future-proof way of using a limited subset (to top-level :root selector) of the features provided by native CSS custom properties.

:root {
  --mainColor: red;
}

a {
  color: var(--mainColor);
}

(The transformation is not complete and can’t be properly. By injecting selectors with new computed rules, we will break original cascade & unexpected results might happen).

Specification | Plugin documentation

# reduced calc()

Allows you to use safely calc with custom properties by optimizing previously parsed var() references.

:root {
  --fontSize: 1rem;
}

h1 {
  font-size: calc(var(--fontSize) * 2);
}

Specification | Plugin documentation

# custom media queries

A nice way to have semantic media queries

@custom-media --small-viewport (max-width: 30em);
/* check out media queries ranges for a better syntax !*/

@media (--small-viewport) {
  /* styles for small viewport */
}

Specification | Plugin documentation

# media queries ranges

Allows to replace min-/max- with <= & >= (syntax easier to read)

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

/* or coupled with custom media queries */
@custom-media --only-medium-screen (width >= 500px) and (width <= 1200px);

@media (--only-medium-screen) {
  /* your styles */
}

Specification | Plugin documentation

# custom selectors

Allows you to create your own selectors

@custom-selector :--button button, .button;
@custom-selector :--enter :hover, :focus;

:--button {
  /* styles for your buttons */
}
:--button:--enter {
  /*
    hover/focus styles for your button

    Read more about :enter proposal
    http://discourse.specifiction.org/t/a-common-pseudo-class-for-hover-and-focus/877
   */
}

Specification | Plugin documentation

# nesting

Allows you to nest selectors

a {
  /* direct nesting (& MUST be the first part of selector)*/
  & span {
    color: white;
  }

  /* @nest rule (for complex nesting) */
  @nest span & {
    color: blue;
  }

  /* media query automatic nesting */
  @media (min-width: 30em) {
    color: yellow;
  }
}

Specification | Plugin documentation

# color() function

A color function to modify colors (transpiled to: rgba())

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

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

There is a lot of color modifiers available, so be sure to check them !

Specification | Plugin documentation

# hwb() function

Similar to hsl() but easier for humans to work with (transpiled to: rgba()).

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

Specification | Plugin documentation

# gray() function

Allows you to use more than 50 shades of gray (transpiled to: rgba()). For the first argument, you can use a number between 0 and 255 or a percentage.

.foo {
  color: gray(85);
}

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

Specification | Plugin documentation

# #rrggbbaa colors

Allows use to use 4 or 8 digits hexadecimal notation (transpiled to: rgba()).

body {
  background: #9d9c;
}

Specification | Plugin documentation

# rgba function (rgb fallback)

Add solid colors fallback for rgba colors (if your browser scope cover old browsers, eg: IE8).

body {
  background: rgba(153, 221, 153, 0.8);
  /* you will have the same value without alpha as a fallback */
}

Specification | Plugin documentation

# rebeccapurple color

Allows you to use the new color keyword as a homage to Eric Meyer’s daughter

body {
  color: rebeccapurple;
}

Specification | Plugin documentation

# font-variant property

properties (fallback: font-feature-settings)

h2 {
  font-variant-caps: small-caps;
}

table {
  font-variant-numeric: lining-nums;
}

font-variant are transformed to font-feature-settings. You might take a look at the support of font feature settings.

Specification | Plugin documentation

# filter property

The W3C filters are only transformed as svg filter using the url(data:*) trick for Firefox < 35.

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

Specification | Plugin documentation

# initial value

Allow you to use initial value for any value. This value represents the value specified as the property’s initial value. It does not mean browser default.

For example, for the display property, initial always means inline, because that’s the designated initial value of the property. As an example, using div { display: initial }, will not be block, but inline.

div {
  display: initial; /* inline */
}

Killer feature :

div {
  all: initial; /* use initial for ALL PROPERTIES in one shot */
}

Specification | Plugin documentation

# rem unit (px fallback)

rem fallback to px (if your browser scope cover old browsers, eg: IE8).

h1 {
  font-size: 1.5rem;
}

Specification | Plugin documentation

Allows you to use :any-link pseudo class.

nav :any-link {
  background-color: yellow;
}

Specification | Plugin documentation

# :matches pseudo-class

Allows you to use :matches().

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

Specification | Plugin documentation

# :not pseudo-class

Allows you to use :not() level 4 (which allows multiples selector). Transformed to :not() level 3 (which allow only one selector)`.

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

Specification | Plugin documentation

# :: pseudo syntax (: fallback)

Adjust :: to : (if your browser scope cover old browsers, eg: IE8).

a::before {
  /* ... */
}

Specification | Plugin documentation

# @todo

Any omissions of the CSS specifications (even in draft) that are subject to be handled by cssnext are not intentional. You can take a look at the list of features that are waiting to be implemented. Feel free to work on a feature ready to be added, or open a new issue if you find something that should be handled. Keep in mind that, as of right now, this project is intended to support new CSS syntax only.

Try postcss-cssnext in your browser now.