Style sheets have been in existence for over 35 years, with the original version of what we now know as CSS dating from the days of SGML in the 1980s.

We have come a long way since the original CSS standard was released in 1996—over the last few years, the standard for CSS4 has been developed, with new features such as :not or :matches pseudo-classes to better target elements, custom properties (or variables), and location-based links, such as local-link. Over the course of the next few pages, we're going to explore a few of these CSS4 features, and see how we can introduce support for them using current CSS3 equivalent code.

There is one small thing that we need to clear up first—CSS4…does not exist. What? I hear you say. Surely it must, I've seen plenty online about it! Yes, it is true: CSS4 as a standard does exist, but not as a single unique entity. Let me explain.

Previous iterations of CSS have been based around creating a single global standard, irrespective of how browser manufacturers decide to support elements that make up standard. It's for this reason that we had to rely heavily on vendor prefixes for some years, we still do, but most vendors have since removed prefixes from many of the more common attributes such as border-radius or box-shadow.

The key difference here, though, is that a decision was taken to deliver CSS4 as a series of modules—CSS as a standard has become very heavy, with the resulting increase in time required for development becoming unsustainable. This is why we will see talk of CSS Modules, such as Custom Properties or Selectors—these can evolve as independent standards to a point that we may no longer refer to CSS as version X, but just CSS.

Okay, this aside, it's time to get stuck in: PostCSS offers good support for some of the more common elements of we collectively call CSS4. Let's take a look to see what is available.