The problem with CSS versioning

My first version of CSS was 2 and the latest CSS version is 3 which was kind of released in early 2010’s. And since then we are to some degree stuck with it even though CSS from 2018 is a lot more capable than CSS from 2012.

Currently W3C divides CSS into modules, Box Model, Selectors, Animations, etc. and each module has its own version, level. So on one hand we have modules that are on Level 1 as Candidate Recommendation, Grid Layout module which has also Working Draft for Level 2, and on the other modules such as Selectors are currently on Level 3 as Recommendation and Level 4 as Working Draft. As a developer who likes to follow standards development it makes perfect sense but to a Java developer who decided to give Front-end development a try (or was thrown into it) it can be confusing.

Note for Front-end developers: In back-end development developers don’t have to take into account as much environmental fluidity as there is on Front-end. There’s always a specific version of a compiler and a runtime environment. There’s no need to support in production several versions of runtime environment from several vendors.

Although I am not exactly thrilled in things such as CSS-in-JS, CSS can take an inspiration from JavaScript. In JavaScript there’s a hybrid versioning and a hybrid name as well, ECMAScript is the true name of the standard. The most recent well-known version of ECMAScript/JavaScript is ES6. Since then three more versions were released, always in June. So the most recent one is version 9 which is officially known as ECMAScript 2018.

ECMAScript 2018 is a version of a document, not an indicator of support among JavaScript engines.

With CSS we could, officially or not, do something similar. There are several options how to do it because some modules are implemented before they are finalized:

  1. CSS 20XY is all specifications that reached Recommendation level in that year
  2. CSS 20XY is all specifications that reached Candidate Recommendation and at least N major browsers implemented them in that year
  3. CSS 20XY is all specifications that were implemented by major browser and percentage of users who can benefit from them reached to at least 80% that year

First option might not be the best solution because it takes very long time before a module reaches Recommendation stage and many times next level is being drafted.

Third option is the most radical and relies on browser vendors rather than the specification. To the outside world, including back-end developers, is probably the easiest to communicate. Also 80% is an arbitrary number which can be discussed.

Second option is a compromise which feels the most confusing as it opens a discussion to what is a major browser. In some contexts Internet Explorer is still a major browser, in others IE and Edge are marginal browsers.

There is a somewhat heated discussion on Twitter about this topic and I wanted to throw my $.02 into the discussion in the long form.