HTML and CSS and the 2019 Web Almanac
Post from January 15, 2020 (↻ November 14, 2020), filed under Web Development.
Short and sweet: The HTTP Archive’s Web Almanac is fantastic because it provides us with data about how we build what kinds of websites. While the release of the 2019 Almanac has been accompanied by some analysis, I had found it interesting to interpret the data, too, especially the sections on HTML and CSS. I shared my observations on Twitter—see the respective threads for HTML and CSS—, but liked the idea of documenting them here as well.
In this section I wish to note some impressions from the Almanac’s markup chapter.
The top elements look like there’s less presentational markup. Fewer layout tables, fewer line breaks for layout purposes. That’s great—but the dominant “2nd paradigm” we’re in suggests it’s now worse CSS-wise.
The increase in number of different elements per page hints at better (but still not good) knowledge of HTML. Although I still deem HTML rather poorly understood (cf. the intro for Upgrade Your HTML), such development would of course be great.
Side note: Through all HTML incarnations, there should be around 170 (not 145) elements—compare with the continuously updated index at meiert.com/en/indices/html-elements. I suspect that—for understandable reason—XHTML 2.0 was ignored.
For deprecated elements, then, I find it quite surprising that
marquee is still comparatively popular—and striking that it’s even more popular on mobile than on desktop. (Is this real?)
There are around two billion web sites on the web. If something appears on 0.1% of all websites in our dataset, we can extrapolate that this represents perhaps two million web sites in the whole web. Even 0.01% extrapolates to two hundred thousand sites. This is also why removing support for elements, even very old ones which we think aren’t great ideas, is a very rare occurrence.
With other popular elements also meaning
ymaps, we—and I want to call this one out specifically—find both irresponsible markup by vendors (cf. ancient How to Share Code with Users), and unprofessional conduct by developers (validation is more modern than ever).
There are also lots of accordions, dialogs, at least 65 variants of carousels, lots of stuff about popups, at least 27 variants of toggles and switches, and so on.
This number seems really low, and is yet really interesting. Maybe we reinvent the wheel too rarely.
Here are the observations around Una’s and Adam’s CSS report, which I was excited to go through.
Color count, with a median of about 50 colors per page (!), seems really high, and I like the question the respective section ends with: “How can you reduce this number into a manageable and reasonable amount?”
As for color duplication (median 25 repetitions), custom properties or variables are one option to curb it—another being using every declaration just once (UDJO). UDJO can be employed intelligently on a component or module level.
Side note: For classes per element, knowing the average seems to be more useful than the median (1). What is it?
The writing modes section seems off. RTL pages as well as sites with both LTR and RTL contents are usually the ones explicit about text directionality, and that asymmetry seems to make interpreting the data difficult to impossible.
❧ Short and sweet. I look forward to the next edition of the Web Almanac—for which the team asks for volunteers! If you’re also interested in contributing, fill out Web Almanac 2020 interest form.
If you have a question or suggestion about what I write, please leave a comment (if available) or a message.
Have a look at the most popular posts, possibly including:
- If It Can Be Done Using an HTTP Header, Use an HTTP Header
- Professional Agile Leadership (PAL) Reminders and Resources
Perhaps my most relevant book: CSS Optimization Basics (2018). Writing CSS is a craft. As craftspeople we strive to write high quality CSS. In CSS Optimization Basics I lay out some of the most important aspects of such CSS. (Also available in a bundle with Upgrade Your HTML and The Web Development Glossary.)
Looking for a way to comment? Comments have been disabled, unfortunately.