Post-processing: Autoprefixer, Pixrem and Other

Buy ebook

CSS Mine

Get my e-book focusing on CSS3 and
modern web UI development.

Learn more

Post-processing or subsequent processing of CSS code is an interesting trend in the world of CSS.

It usually means adding code to fallbacks for older browsers, but it could also partially replace pre-processors in a few years’ time. Let’s demonstrate their use on some post-processing tools.

Autoprefixer: Adding Prefixed Declarations

Write code according to W3C syntax:

transform: scale(1.1);

and the Autoprefixer will then add prefixed variants to your CSS:

-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);

By default, it will add prefixes for the two latest versions of all browsers but you can easily change that. You just need to configure the grunt-autoprefixer, a Grunt plugin which sets up broader support for the prefixed variants of CSS properties:

autoprefixer: {
  options: {
    browsers: [
      'last 3 versions', 'ios 6',
      'ie 7', 'ie 8', 'ie 9'
    ]
  },
  style: {
      src: 'dist/css/style.css',
      dest: 'dist/css/style.css'
  }
}

See more at github.com/postcss/autoprefixer.

Pixrem

If you decide to use the rem unit (which I strongly recommend), you will be faced with a compatibility problem in older browsers.

By using a pixrem plugin, you can define conversions between rem and px, thus adding fallbacks to your CSS code:

.box {
  margin-bottom: 24px;
  margin-bottom: 1.5rem;
}

See more at github.com/robwierzbowski/grunt-pixrem.

Legaccsy

Legaccsy is a plugin by Robin Pokorny that is able to create a version of your CSS without Media Queries that are not recognized by older browsers. This is a true life-saver for IE8 or IE9.

See more at github.com/robinpokorny/grunt-legacssy.

Postcss

As I have already mentioned, in time, postcss can replace LESS, SASS and other preprocessors in some regards. The philosophy is simple. CSS code is written according to the W3C syntax, however browsers are not familiar with it. Thanks to postcss, you can compile the code into contemporary CSS.

You might be surprised, but after years of inactivity the CSS standard is evolving even on the level of syntax.

As a result, CSS variables and media use the following piece of code:

:root {
  --fontSize: 1.2rem;
}

@custom-media --viewport-medium (width <= 600px);

@media only screen and (--viewport-medium) {
  body { font-size: calc(var(--fontSize) * 1.2); }
}

which is then compiled into a well-known form:

@media only screen and (max-width: 600px) {
  body { font-size: 1.44rem; }
}

Postcss has a wonderful slogan:

Use tomorrow’s CSS syntax, today.

See more at cssnext.io.




Content

Introduction

Introduction

On today’s frontend UI development

UI development transformations

Tools, technologies and workflows

Fallback strategies

CSS3 reference guide

Introduction

Text properties

Background properties

Border properties

Box properties

Media Queries

CSS transforms

CSS animations

CSS3 Layout

Another CSS3 Properties

Non-standard properties

End

End

Buy ebook

CSS Mine

Get my e-book focusing on CSS3 and
modern web UI development.

Learn more