Back in 2011, I decided to make a timeline out of CSS modules’ version histories, where “version history” means “a list of all the various drafts that were published”. I updated the data every now and again, and then kind of let it go dormant for a few years.
Until this past weekend, when for no clear reason I decided what the hell, it’s time for a refresh. So I trawled through all the specs’ version histories to get the stuff I didn’t have, and gave the presentation a bit of an upgrade. The overall look and feel is pretty consistent, except now, thanks to repeating linear gradients, I have vertical stripes to show each year in the now 21-year-long timeline. I put labels up at the top of the stripes, and figured they should remain visible no matter where you scroll, so I set them to
position: sticky. Then I realized most people would have to scroll horizontally, so I made the specification names sticky as well.
So now, no matter where you scroll on the page, you’ll see the specifications along the left and the years along the top. The layout isn’t mobile-hostile, exactly, but it isn’t RWD-ized either. I’m not really sure how I could make this fully responsive, except maybe to just drop the timeline layout altogether and revert to the lists that underlie the layout.
While I was at it, I converted a fair bit of the CSS to use
calc() so that I could set a column width in one place, and sprinkled in just a tiny bit more PHP to output offset values in a couple of places. Nothing major, just quality-of-life upgrades for the maintainer, which is to say, me.
- CSS Color Module Level 5
- Media Queries Level 5
- CSS Conditional Rules Module Level 4
- CSS Transforms Module Level 2
I do find it a little weird that Color Level 5 is out when Color Level 4 has never left Working Draft status, but maybe Level 4 is about to graduate, and this just happened to come out first. We’ll see!