features.md

title	subtitle	backgroundModifier
postcss-cssnext features	Discover the future of CSS	darkRoad

@[toc]

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 to :root selector of the features provided by native CSS custom properties.

:root {
  --mainColor: red;
}

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

⚠️ The definitions are limited to :root selector.

Specification | Plugin documentation

custom properties set & @apply

Allows you to store a set of properties in a named custom property, then reference them in other style rules.

:root {
  --danger-theme: {
    color: white;
    background-color: red;
  };
}

.danger {
  @apply --danger-theme;
}

⚠️ The definitions are limited to :root selector.

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

:any-link pseudo-class

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

overflow-wrap property (word-wrap fallback)

Converts overflow-wrap to word-wrap (many browser support only the old word-wrap property).

body {
  overflow-wrap: break-word;
}

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.