Woah, I didn’t see this coming! The HTTP Archive dropped this big “state of the web” report called Web Almanac with guest writers exploring data from 5.8 million websites.
Una Kravetz and Adam Argyle wrote the CSS chapter. The point is to squeeze a digestible amount of insight out of a mountain’s worth of data. So there is some irony here with me squeezing in my thoughts about this chapter for an even quicker read, but hey, here we go.
- 83% of sites make use of
rgba()
but only 22% usergb()
. That entirely makes sense to me, asrgb()
isn’t a particularly useful color format, if you ask me. It’s the “a” (alpha) that gives the format the ability control transparency, which is only recently available in the most popular format, Hex, in the form of 8-Digit Hex Codes. But even then, it isn’t as nice asrgba()
.hsla()
is arguably the nicest color format. - Definitely not surprising that white and black are the two most popular named colors. I use them, by name, a lot. I even change CSS commits to use
white
instead of#FFF
andblack
instead of#000
because I think there is less mental overhead to it. em
is twice as popular asrem
. Wow. I’m arem
guy myself, just because I find it less finicky and more predictable. In theory, I still like the idea of px at the Root, rem for Components, and em for Text Elements, but I’m not sure I’ve ever pulled it off that cleanly.- Classes are by far the leader in selector types. Factoring how many are used, they have over a 10x lead over anything else. I like to see that. They have a low-but-not-too-low specificity value. They have nice APIs for manipulating them. Their entire purpose is to be a styling hook. They are element-agnostic. It’s just the right way to do styling. The flatter you keep styles, the less headaches you’ll have., A little more surprisingly to me is the fact that the average number of classes per element is one. Makes me really wanna know the decimal though. Was it 1.1? 1.4? 1.00001?
- Holy buckets. Flexbox on half of sites and grid only on two percent?! The browser support isn’t that different. I’m well aware they are both very useful and can be used together and are for different things, but I find grid generally more useful and personally use it more often than flexbox.
- I would have guessed the median number of loaded fonts on a site to average to 0, but it’s 3! I think of CSS-Tricks as having one (which is Rubik at time of writing and used only for titles. The body font of this site is
system-ui
.) But really, it’s 4, because of preloading and subsetting and bold versus regular and such. I wonder when variable fonts will start having an impact. I would think it would lower this number over time. Open Sans and Roboto are triple any other loaded font, and the whole list is Google Font stuff, other than some instances of Font Awesome. - It’s funny how some major libraries can skew stats at such a global/universal scale for their use of certain features. I remember how YouTube’s play button used to “morph” into a pause button using an SVG technology called SMIL. But because YouTube is so huge, it could look like a very high percentage of internet traffic includes SMIL, when it’s really just one button on one site.
filter
is in that report. While filters are cool, it’s really the fact that it happens to be within YouTube embeds and Font Awesome’s stylesheet that the percentage of sites using it (78%) looks astonishingly high. - Of pages that make super heavy use of transitions and animations, transitions are about twice as heavily used, but, transitions are used six times more at the 50th percentile. That feels about right to me. Transitions are generally more useful, but the more animation you are doing, the more you reach for advanced tools like keyframes.
- Looks like most websites have approximately 45 media queries on them. It’s not totally clear if those are different media queries, or if they could be the same media queries repeated elsewhere in the stylesheet. That seems like a lot if they are all different, so I suspect it’s just a tooling thing where people use nested media queries for authoring clarity and they bubble out but don’t get combined because that’s too weird with specificity. I’d be interested to see how many unique media queries people use. The most fascinating thing to me about the media query data is that
min-width
andmax-width
are neck-and-neck in usage. I would have putmax-width
far ahead if I was guessing. - About six stylesheets per site. It’s probably too hard to tell because assets like this are so often hosted on CDNs, but I’d love to know how many are hand-authored for the site, and how many are from third parties. Is the distribution like three and three or like one and five?
There is a lot more in the report, and CSS is just one of twenty chapters. So go digging!
Fascinating. I wonder how these stats would skew if people not using factories (A/V/R) were separated out. I’ll have to read this later today.
um – SMIL is not a “SVG technology” – its technology by its own – using it in SVG is thanks to X in XML :)
Oh cool! What else can you use SMIL on?
I don’t see much SMIL usage – there are ideas from there like [switch] in svg, things in css animations or VTT – this is really SMIL-ish; we cant use it because no browser had implemented this – that is not a great loss – everything can be reproduced by js
Well, isn’t that implicit?
Flex
is useful on most lists wheregrid
is more a specific layout thing. To create a flexible layout that expands with its contents is way more elaborate withgrid
than withflexbox
.Grid
relies on defined boxes, whereasflexbox
mostly spreads content evenly.Yes, those things are true. Sounds like you think the “spreading content evenly” is something that more sites need than the different things Grid does. OK. I think the opposite. Although really I can’t imagine building most sites without both.
Mostly I think more people just know flexbox better hence the higher usage.
For me it’s the middling IE11 support that keeps me away from using grid.
One reason I see for using flexbox way more than Grid is the support. If you have to support IE, grid becomes a real pain.
But when I see people using flexbox to centre a single
<div />
, I’m even more in pain.I also think there are two or three other factors that have at least a little impact:
Grid is kind of hard compared to flexbox. We might argue that it’s not bad, and the learning materials around Grid are really wonderful. However, there’s conceptual leap going from two to three dimensions, plus new syntax (and middling IE11 support like someone said), that learning and implementing is more work than any perceived benefit.
Bootstrap doesn’t support it yet. The abundance of flexbox-based grid systems make implementing grid a no brainer, and especially since the grid classes are almost one-for-one with the ol’ 960/1140-based grid systems before it, that was as uper easy transition.
Most sites don’t need it. In fact, I’d still argue that the downward pressure on site design is down to a single column. For most folks, being great on mobile is more important than being neat on a larger screen, so that’s where the energy goes.
I don’t know if I really see CSS Grid getting much more adopted than it is now until a major framework (bootstrap 5?) makes it the default of their layout system.
em
is used more because of browser support far longer back. Of courserem
is easier, that’s why it was invented!Looking by the number, it seems a safe guess that “45 media queries” refers to 45 queries, possibly in sass-made-files, but not 45 breakpoints.