What CSS versions are you talking about?

May 08, 2021css-practicescss

There is no official CSS documentation for CSS authors, the closest things you can find are MDN CSS tutorials and references. There are only official specifications for CSS implementers standardized by W3C.

Being able to understand the CSS specifications requires understanding the context, vocabulary, and fundamental concepts that the specifications are built out of. If you want to really understand the specs, good luck with that.

When your site has a CSS problem which delays upcoming releases, you might have a hard time explaining to your boss about CSS versions.

  • Boss: What CSS versions are you talking about?
  • You: CSS3, I guess
  • Boss: You guess? I heard there is CSS4?
  • You: There is no single, integrated CSS4 specification
  • Boss: How about modules and snapshots thing?
  • You: It’s complicated
  • Boss: Hit me!
  • You: …

CSS features are controlled and developed by CSS Working Group, belongs to the broader organization W3C, over the years across multiple specifications.

A specification is not a user manual or user reference guide. The purpose of a spec is to tell developers who will implement the technology what features it must have, and how they are to be implemented.

CSS does not have versions in the traditional sense; instead it has levels. Each level of CSS builds on the previous, refining definitions and adding features.

The feature set of each higher level is a superset of any lower level, and the behavior allowed for a given feature in a higher level is a subset of that allowed in the lower levels. A user agent conforming to a higher level of CSS is thus also conformant to all lower levels.

  • CSS Level 1 (CSS1): published in 1996 as a single document
  • CSS Level 2 (CSS2): published in 1998 as a single document
  • CSS Level 2 Revision 1 (CSS2.1): published in 2011 as a single document
  • CSS Level 3 (CSS3): a term is used only to differentiate it from the previous monolithic versions. CSS Working Group chose to adopt a modular approach, where each module defines a part of CSS, rather than to define a single monolithic specification. This breaks the specification into more manageable 60+ modules and allows more immediate, incremental improvement to CSS.
  • CSS Level 4 (CSS4) and beyond: There is no such thing CSS4. Independent modules can reach level 4 or beyond, but CSS the language no longer has levels.

The main reason for adopting modular approach is that browser vendors implement CSS features at different speeds. To release a monolithic specification, every component part also has to be finished. It doesn’t make sense to draw a line at which all work slowed down by a single stubborn feature.

When a new technology is added to CSS that is not an extension of something in an earlier CSS specification, it is published in a module that includes the indication Level 1 (CSS Flexible Box Layout Module Level 1, CSS Grid Layout Module Level 1, etc.)

Since different CSS modules are at different levels of stability, the CSS Working Group has chosen to publish the CSS snapshot document. It includes only modules that the working group considers stable and for which there is enough implementation experience to be sure of that stability.

Currently CSS versioning is a mess with countless separate modules. CSS authors should embrace feature or module based thinking by using feature queries (@supports) or automatic tools (browserslist, PostCSS, autoprefixer, etc.) to polyfill or provide fallbacks for legacy browsers.