Enabling Upcoming CSS Features with PostCSS

Picking up where we left off in the previous article, "The PostCSS Guide to Improving Selectors and Media Queries", we will have a look at more PostCSS plugins that expand the horizons of CSS. The earlier article focused on improving the structure of your stylesheets through extending selectors and media queries. This one will concentrate on implementing new properties and values from upcoming specifications. The plugins covered in this article implement different functionality and can be effectively used both together and separately, depending on your needs.

We'll start with my personal favorite.

Taking Resets to a New Level

CSS3 introduced two nice features: the initial value and the all property. The initial value used with values of inherit and unset allow you to reset a property to its original value. The all property serves as a shorthand property to reset every property to one of these three states. While each is interesting on their own, when used together, they allow you to quickly reset all styles for a particular element and prevent it from inheriting styles from parent elements of the page. Another step to writing modular CSS!

Sadly, both of these features are still not supported by IE. But, as you might have already guessed, there's a plugin for that.

Postcss-initial adds support for the initial value and the all: initial combination. Here's how it works:

.article {
  font-size: initial;
  color: initial;
  padding: initial;
  margin: initial;
}

Gets compiled into:

.article {
  font-size: medium;
  font-size: initial;
  color: #000;
  color: initial;
  padding: 0;
  padding: initial;
  margin: 0;
  margin: initial;
}

By default, it leaves the original properties with initial for browsers that natively support this feature.

The all property, in turn, will be translated into a long list of reset properties.

.container {
  all: initial;
}

Continue reading %Enabling Upcoming CSS Features with PostCSS%

by Pavels Jelisejevs via SitePoint