From cd2b3259eea317f1544a4cbf12e077fda2bdf611 Mon Sep 17 00:00:00 2001 From: "Eric A. Meyer" Date: Mon, 15 Nov 2021 16:02:16 -0500 Subject: [PATCH 01/11] Filled in the text around the figures MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Also corrected some errors in figure construction around image weight and counts. I hope I didn’t introduce more errors! --- src/content/en/2021/css.md | 356 ++++++++++++++++++++++++++++++++++--- 1 file changed, 336 insertions(+), 20 deletions(-) diff --git a/src/content/en/2021/css.md b/src/content/en/2021/css.md index fb734cdaeb1..8039eaaff28 100644 --- a/src/content/en/2021/css.md +++ b/src/content/en/2021/css.md @@ -17,9 +17,22 @@ featured_stat_3: TODO featured_stat_label_3: TODO --- -## TODO +## Introduction + +CSS (Cascading Style Sheets) is one of the three main pillars for building pages on the web - with HTML, used to define the structure; and Javascript, used to specify behaviour and interactions, completing the triumvirate. + +Compared to last edition, the 2021 Web Almanac offers a deeper insight into how the use of CSS differs in the realm of what we all think we need vs. what we actually see in production. As the calls for more robust CSS features and the challenge of centering a `
` with CSS kept making the rounds on our blog posts, conference talks, and Twitter chatter, pages around the web offered us vastly contradicting results, betraying the fact that CSS has, perhaps, become old enough to put more thought on staying stable instead of going wild with the zaniest of toys. + +While CSS-in-JS adoption grew to 3% of all pages crawled (a 1% jump from last year), cutting-edge Houdini features are still mostly confined to tutorials and example galleries. Responsiveness continued to be one of most engrossing priorities, with `max-width` and `min-width` being the top media queries, and calc() being the top CSS function most commonly in use to determine widths. + +As users continue to throng to the web, let’s jump into the data that would give us a better insight into how we have been faring in painting the internet - a place that is a second home, a workspace, a garage, or a rabbithole for the rest of us. + + +## Usage + +It isn’t the heaviest component of most pages, but CSS — like the rest of the web — continues to grow in size from year to year. The median web page loads around 70 KB of CSS, and at the upper end, the average size is just over a quarter of a megabyte. Compared to 2020, the median total CSS weight rose about 7.9%, and the 90th percentile just under 7%, while preserving the pattern seen last year that mobile CSS is a little smaller than desktop CSS across all percentiles. {{ figure_markup( image="stylesheet-transfer-size.png", @@ -30,7 +43,11 @@ featured_stat_label_3: TODO sql_file="stylesheet_kbytes.sql" ) }} +Not every page was so constrained: the page with the greatest CSS weight loaded 64,628KB. The biggest mobile CSS weight seems positively svelte in comparison: only 17,823KB. +As in 2020, it was found that page weight wasn’t significantly driven by preprocessors. 17% of desktop pages and 16.5% of mobile pages included sourcemaps, up slightly from 15% last year. The consistent share of CSS including sourcemaps seems to indicate that the sourcemap share is due more to build tool usage than sourcemap adoption, as we would expect to see much bigger year-over-year changes to sourcemap usage otherwise. + +As for what kinds of sourcemaps were used, the numbers were largely consistent with last year
@@ -66,7 +83,9 @@ featured_stat_label_3: TODO ) }} +While this could be taken as evidence that Sass continues to gain ground over Less, the changes are small enough that it’s difficult to call them significant, statistically or otherwise. Time, as always, will tell. +In terms of the average number of stylesheets per page, whether embedded or external, the numbers this year are up only slightly from last year. The 50th through 90th percentiles went up by one each, while the 10th and 25th percentiles didn’t budge. {{ figure_markup( image="stylesheets-per-page.png", @@ -77,7 +96,7 @@ featured_stat_label_3: TODO sql_file="stylesheet_count.sql" ) }} - +Incredibly, this year’s record for the largest number of external stylesheets beat last year’s by nearly a factor of two: 2,368 versus 1,379 in 2020. Whoever’s done this, we beg you — combine some files and give your server a rest! {{ figure_markup( caption="The largest number of external stylesheets loaded by a page.", @@ -87,7 +106,7 @@ featured_stat_label_3: TODO sql_file="stylesheet_count.sql" ) }} - +Number of style_sheets_ is one thing, but what about the number of actual style _rules_? Compared to last year, the lower percentiles rose a bit, while the highest barely budged. What _is_ different in 2021 versus 2020 is that across nearly all percentiles, desktop pages have more rules on average than do mobile pages. {{ figure_markup( image="rules-per-page.png", @@ -98,7 +117,15 @@ featured_stat_label_3: TODO sql_file="selectors.sql" ) }} +## Selectors and the cascade + +Understanding cascade is an incredibly important part of working with CSS, more so for instances when you’d see that the styles you had written for an element, not working at all. + +CSS offers a number of ways of applying styles to pages, from classes, ids and using the all-important cascade to avoid duplicating styles. +### Class names + +Much like last year, the most popular class name on the web is `active`, and the `fa`, `fa-*` (the Font Awesome prefix), and `wp-*` (the WordPress prefix) class names make very strong showings. `selected` and `disabled` switched places in the lineup compared to last year, but the most heartening change was a 5% drop for `clearfix`, a sign that float-based layout continues to wane. {{ figure_markup( image="most-popular-class-names.png", @@ -111,7 +138,12 @@ featured_stat_label_3: TODO sql_file="top_selector_classes_wp_fa_prefixes.sql" ) }} +We were also heartened to see the placement of `sr-only-focusable`, which is a Bootstrap accessibility feature. It causes an element to be placed off-screen, yet remains accessible to screen readers. + +### IDs + +Pages continue to use IDs, and at about the same rate as seen in 2020. Even the list of popular ID names is consistent: `content` sits in the top spot at about 14% of pages, followed by `footer` and `header`. These latter two IDs dropped about a percent versus last year, which isn’t really enough to say anything definitive about them other than, developers should replace them with the corresponding HTML elements `
` and `
` whenever possible. {{ figure_markup( image="most-popular-id-names.png", @@ -124,7 +156,12 @@ featured_stat_label_3: TODO sql_file="top_selector_ids.sql" ) }} +We were unhappy to see so many IDs starting with `rc-`. These are part of the reCAPTCHA system, which is inaccessible to the members of the deafblind community. + +### Attribute selectors + +The most popular attribute selector continues to be `type`, which is most likely to be used in selecting form controls like checkboxes, radio buttons, text inputs, and so on. {{ figure_markup( image="most-popular-attribute-selectors.png", @@ -136,6 +173,9 @@ featured_stat_label_3: TODO ) }} +### Pseudo-classes and -elements + +The ranking and distribution of both pseudo-classes and pseudo-elements was not greatly changed from the 2020 Web Almanac. A few rankings changed, but overall, things seemed highly static. Whether this represents a solidification of common practice, a snapshot of designer interests, or simply the nature of the analysis, is open to debate. {{ figure_markup( image="most-popular-pseudo-classes.png", @@ -146,7 +186,11 @@ featured_stat_label_3: TODO sql_file="top_selector_pseudo_classes.sql" ) }} +Just as in 2020, the user-action pseudo-classes `:hover`, `:focus`, and `:active` took the top three spots, with all of them appearing in a minimum of two-thirds of all pages. Structural pseudo-classes put in a number of appearances, but one of the most interesting changes was `:not()`, the negation pseudoclass, becoming more popular than `:visited` and achieving a 50% share of pages. +One thing we did check specifically this year was the use of [`:focus-visible`, a way to style elements in focus in a way that better matches user expectations](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible). This capability landed in Chromium in 2020, Firefox in January 2021, and (as of publication) is available in Safari 15 behind an experimental flag. Likely reflecting its recent implementation status, it appeared in less than 1% of the pages analyzed. It will be interesting to see if that number changes over the next few years. + +Most of the pseudo-elements in use are browser-specific ways of selecting things like specific interface components, parts of browser chrome, or highlighted text. Once we filtered those out, we found that `::first-letter` is used on a very small number of pages, but still many more than `::first-line`, which didn’t make it onto the chart at all. `::marker`, a way of selecting list item markers like bullets or counters in an ordered list, has much less than 1% page share, yet still made it onto the list. We should note here that cross-browser support for `::marker` [is relatively new](https://caniuse.com/css-marker-pseudo) (October 2020). It will be interesting to see if use increases over the next few years. {{ figure_markup( image="most-popular-unprefixed-pseudo-elements.png", @@ -159,6 +203,9 @@ featured_stat_label_3: TODO ) }} +### !important + +That old battleaxe `!important` maintains a toehold on the web, with its share of marked rules hardly changing at all compared to the 2020 Web Almanac. {{ figure_markup( image="important-properties-per-page.png", @@ -169,7 +216,9 @@ featured_stat_label_3: TODO sql_file="meta_important_adoption.sql" ) }} +If that seems like a lot, hold on to your IDEs: we found a mobile page with 17,990 rules marked `!important`! That just edged out the most-important desktop page, which had 17,648 specificity-busting rules. We sincerely, truly hope these were the result of a script or preprocessor gone wrong. +As for what `!important` gets applied to, as with last year, it’s `display`, with the rest of the chart falling in the same order as in 2020 — with the exception of the last item on the chart, where `position` bumped off `float`. {{ figure_markup( image="top-important-properties.png", @@ -180,7 +229,9 @@ featured_stat_label_3: TODO sql_file="meta_important_properties.sql" ) }} +### Selector specificity +Many CSS methodologies recommend that authors restrict themselves to single classes in order to squash all selector specificity into a single layer that is more easily managed. The [BEM methodology](​​https://en.bem.info/methodology/css/), for example, was found on 34% of all pages. The 10th percentile of median selector specificity shows further evidence of this type of thinking, where both desktop and mobile specificity averages at (0,1,0). This is in line with last year’s findings, as are nearly all the medians — with the exception of mobile’s 25th percentile, which rose a little bit.
@@ -227,6 +278,13 @@ featured_stat_label_3: TODO +## Values and units + +CSS provides multiple ways to specify values and units, either in set lengths or calculations based on global keywords. + +### Lengths + +Whatever you may think of pixel lengths, it’s still the most popular length unit by far, appearing in about 71% of all pages. The second-place length unit, percentage, trailed pixels by an overwhelming distance. {{ figure_markup( image="most-popular-length-units.png", @@ -237,7 +295,7 @@ featured_stat_label_3: TODO sql_file="units_frequency.sql" ) }} - +Where things become interesting is in the breakdown of exactly how the various length units are used. To pick one example, the most common length unit used on `line-height` is pixels, followed by `` values (which includes all instances of unitless zero length values). Ems are the most popular length unit for `vertical-align` and `padding-inline-start`.
@@ -370,7 +428,9 @@ featured_stat_label_3: TODO ) }} +The positive and negative figures given in parentheses next to the figures in this table show change from 2020 results. In almost every property we analyzed, pixels became less popular as compared to the uses of other length units, with just two exceptions. The biggest change by far was in `vertical-align`, with an 11-point shift from pixels to ems as the unit of choice when the supplied value was a length, as opposed to a keyword like `baseline`. +Although `em` maintains a huge dominance over `rem` when it comes to sizing fonts, there are signs of change: there was a seven-point swing from `em` to `rem` between 2020 and 2021. {{ figure_markup( image="most-popular-font-relative-units-of-length.png", @@ -381,7 +441,7 @@ featured_stat_label_3: TODO sql_file="units_properties.sql" ) }} - +There are a few properties that allow bare `` units (e.g., `line-height`), but `` values have a special case where a length of zero does not require a unit. When we looked at all zero-length values, almost 88% of them omitted the unit. Nearly all of those zero lengths that included a unit used pixels (`0px`). This was a nice result to see, since any length of zero doesn’t need a unit and including one is fairly pointless. We hope the share of unitless zero values will grow in the future. {{ figure_markup( image="zero-lengths-by-unit.png", @@ -393,6 +453,9 @@ featured_stat_label_3: TODO ) }} +### Calculations + +As in past years, the most popular usage of `calc()` is to set widths, although the share of `calc()` values in `width` dropped a full 20 points as compared to 2020. This seems most likely to reflect an expansion of `calc()` use in other properties, rather than a contraction of its use for `width`. {{ figure_markup( image="most-popular-properties-using-calc.png", @@ -403,7 +466,7 @@ featured_stat_label_3: TODO sql_file="calc_properties.sql" ) }} - +Although pixel units didn’t shift at all in terms of their usage in calculations, percentages lost a bit of ground compared to the long tail of other units, falling four points since 2020. {{ figure_markup( image="most-popular-units-using-calc.png", @@ -414,7 +477,7 @@ featured_stat_label_3: TODO sql_file="calc_units.sql" ) }} - +As with last year, when it comes to calculation operators, subtraction is the clear favorite, and barely shifted its share of usage. There were much bigger changes in the second and third spots, where addition vaulted ahead of division, gaining six points while division dropped a similar amount. {{ figure_markup( image="most-popular-operators-using-calc.png", @@ -425,7 +488,7 @@ featured_stat_label_3: TODO sql_file="calc_operators.sql" ) }} - +`calc()` values remain relatively simple, with the overwhelming preponderance of calculations using two different units, such as to subtract pixels from the calculated result of a percent value. A total of 99% of all `calc()` expressions use either one or two unit types. {{ figure_markup( image="units-per-calc-occurence.png", @@ -437,6 +500,9 @@ featured_stat_label_3: TODO ) }} +### Global keywords + +The use of global keywords such as `initial` rose significantly as compared to the 2020 Web Almanac. While `inherit` only gained a couple of points, `initial` rose about eight points, and `unset` around 10 points. Even `revert` managed to lift itself up a point. {{ figure_markup( image="global-keyword-adoption.png", @@ -448,6 +514,9 @@ featured_stat_label_3: TODO ) }} +## Colors + +Despite the availability of a wide number of color value types, the `#RRGGBB` syntax that has been with us since the days of Netscape 1.1 is still used in half of all color declarations. The CSS innovation of the `#RGB` shorthand came in second, at a quarter of color values. In other words, a solid 75% of all color values are expressed using hexadecimal RGB syntax. The third-place format, `rgba()`, points to the likely reason authors go beyond the classic hexadecimal format: to get access to alpha values. (Indeed, though both their shares are tiny, `hsla()` is more popular than `hsl()`, just as `rgba()` is much more common than plain `rgb()`.) {{ figure_markup( image="most-popular-color-formats.png", @@ -458,7 +527,9 @@ featured_stat_label_3: TODO sql_file="color_formats.sql" ) }} +In color formats where the value has historically used commas inside a functional syntax — for example, `rgba(0, 0, 0, 1)` — authors may now drop the commas and separate colors from alpha with a slash (thus, `rgb(0 0 0 / 1)`. Since 2020, this comma-less syntax has doubled its usage share, going from 0.12% to 0.25% of all functional color syntax. +In the realm of just the named colors, `transparent` is still the faraway favorite, with around 82% of all named color keyword usage. The familiar and comfortable `white`, `black`, and `red` total another 12% or so, and `currentColor` comes in fifth with a half-percent rise over its 2020 numbers.
@@ -579,7 +650,18 @@ featured_stat_label_3: TODO ) }} +In last year’s Web Almanac, there was a note about “the once-deprecated—now partially un-deprecated—system colors like `Canvas` and `ThreeDDarkShadow`” being just barely in use. This is still true, but oddly, there are now two such values in the top 20 instead of just one (`Highlight`). That said, both occur in the realm of tiny, tiny numbers of pages, so such shifts are probably unremarkable. + +The usage of the display-p3 color space remains about as vanishingly small as was found in 2020, probably because it’s only supported in Safari (both desktop and mobile) as of this writing. Desktop and mobile use roughly tripled, to 90 and 105 pages, respectively. In the cases where `color(display-p3)` was used, it was with good reason: 79% of the colors expressed using display-p3 on mobile were colors that cannot be represented in the sRGB color space. Until the `color()` function becomes more widely supported by browsers, the web will remain stuck in sRGB, which permits about two-thirds of the colors that screens can actually display. + + +## Images + +They say a picture is worth a thousand words, but byte wise, they often cost an order of magnitude or two more. While there are a myriad approaches to embedding images with javascript, or include them with the HTML scaffolding, here we take a look at how CSS-loaded images are getting used. + +### Formats of images in CSS +First, here’s a breakdown of the image formats we looked for, and how often each format appeared. PNG was the clear favorite, with a surprisingly close clustering of GIF, SVG, and JPG following behind. The fairly new WEBP format accounted for only 3.7% of images loaded by CSS, and the tiny slice at the top corresponds to unrecognized values and the ICO format. {{ figure_markup( image="css-initiated-image-formats.png", @@ -590,28 +672,39 @@ featured_stat_label_3: TODO sql_file="image_formats.sql" ) }} +We did not attempt to determine whether any of the images were animated. +Please also note that this analysis only covers the images loaded by CSS: we did not check the HTML to see what was being loaded there. Thus, the following results cannot be taken as a metric of how heavy web pages are, or even how heavy CSS is or is not. It can only show how much CSS-loaded images contribute to a page’s total weight. + + +### Number of images in CSS + +What we found was that most CSS doesn’t result in a lot of image loads: the lower two percentiles came in at one image each, and even the 90th percentile hovered around 10 images, across all image types. {{ figure_markup( image="number-of-images-loaded.png", - caption="Distribution of the number of external images loaded via CSS.", + caption="Distribution of the median number of external images loaded via CSS.", description="A paired-column chart showing the 10th, 25th, 50th, 75th, and 90th percentile median values for the number of images loaded via CSS. The results are as follows. 10th and 25th percentiles, 1 on both desktop and mobile. 50th percentile, 3 on both dekstop and mobile. 75th percentile, 6 on desktop and 5 on mobile. 90th percentile, 11 on desktop and 10 on mobile.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRXMwdR5iy0KEMBzUWuZqDfWsj8HDDJcd5lFfjJpBmJr8gI1TE3xz2BzbNB9SEzSrxDtxfqvDvnvbQ3/pubchart?oid=1206209320&format=interactive", sheets_gid="361647805", sql_file="image_weights.sql" ) }} - +We did find one site where the desktop CSS loaded 6,088 PNG images. The mobile version of the site actually added an image, bringing it to 6,089 PNGs. We hope they were all small and color-indexed for efficiency’s sake. {{ figure_markup( - caption="The heaviest total weight of images loaded via CSS, in KB.", - content="314,386", + caption="The largest number of external images loaded by a page’s CSS.", + content="6,089", classes="big-number", sheets_gid="361647805", sql_file="image_weights.sql" ) }} +### Weight of images in CSS + +The number of images is one thing, but how much they weigh is at least as important — loading a single 10MB background is worse than loading 10 100KB pictures, after all, even with server compression factored in. + {{ figure_markup( image="total-image-weight.png", @@ -622,7 +715,19 @@ featured_stat_label_3: TODO sql_file="image_weights.sql" ) }} +All told, things were not as bad as we’d feared going in: the median page’s CSS loads a total of 16KB or so in images. It was also encouraging to see that overall, mobile image loading via CSS was consistently a bit lower than desktop — a sign that CSS developers do keep the limitations of mobile contexts at least somewhat in mind. + +Sometimes, anyway. We did find a page where the total weight of the images loaded by CSS was a gargantuan 314,386.1KB — a third of a _gigabyte_. +{{ figure_markup( + caption="The heaviest total weight of images loaded via CSS, in KB.", + content="314,386", + classes="big-number", + sheets_gid="361647805", + sql_file="image_weights.sql" +) }} + +When we broke down the image weights by format, we discovered a fascinating tidbit: at the 90th percentile, GIF images were actually lighter on average than even SVG files.
@@ -692,7 +797,12 @@ featured_stat_label_3: TODO ) }} +It was also interesting, though perhaps not surprising, that the heaviest image format was JPG. This is likely because JPG is favored for those big splashy photographs one so often sees across the tops of home pages and so forth, and even with compression and other optimization tricks, all those pixels do add up. + +### Gradients + +The share of pages using CSS gradients was roughly the same as last year: 77% of desktop pages and 76% of mobile pages. The properties on which they were used did change, however: while still the overwhelming favorites, `background` and `background-image` were the properties to which about 62% of gradients were assigned.
@@ -743,7 +853,7 @@ featured_stat_label_3: TODO ) }} - +Linear gradients continue to be the clear favorite, maintaining the 5-to-1 lead over radial gradients seen in the 2020 Web Almanac. {{ figure_markup( image="most-popular-unprefixed-gradient-functions.png", @@ -754,18 +864,29 @@ featured_stat_label_3: TODO sql_file="gradient_functions.sql" ) }} +When prefixed versions of gradients (e.g., `-webkit-linear-gradient`) were included, the resulting graph looked basically the same as last year’s. + +Some other things we found in analyzing gradient values: +* The median number of color stops in gradients is just two, except at the 90th percentile, where the four stops was the median. +* Hard color stops — that is, gradients where two color stops were placed at the same position — occurred in just over half of all gradients. +* Color-stop interpolation (a.k.a “midpoints”) were used in 21% of all gradient instances. + +We also saw a dramatic reduction at the top end of gradient complexity. Last year, the gradient with the largest number of color stops had 646 stops. This year, the winner had only 81 color stops. {{ figure_markup( image="most-color-stops.png", classes="height-16vw-122px", - caption="The linear gradient with the most color stops.", + caption="The linear gradient with the most color stops foudn in our analysis.", description="A screenshot of the gradient with the most color stops, which is a series of intricate multicolor stripes of varying hues.", width=600, height=100 ) }} +## Layout + +We have come a long, long way from using tables to create layouts on the web to a time when we have a number of options - Flexbox, Grid, and Multicolumn, as well as old chestnuts like floats, positioning and even CSS table properties. We did a simple search of stylesheets to see which property and value combinations were present, and came up with the following figures. {{ figure_markup( image="top-layout-methods.png", @@ -777,7 +898,14 @@ featured_stat_label_3: TODO sql_file="layout_properties.sql" ) }} +Note that this doesn’t chart primary layout methods — we are not claiming here that 93% of the pages we analyzed are laid out using absolute positioning! Rather, what the chart says is that `position: absolute` appeared in the styles for 93% of the page we analyzed, even if that was just to put an icon in a corner or place bits of content `-9999px` offscreen. Similarly, `display: grid` may have appeared in 36% of page’s styles, but that doesn’t mean 37% of all pages are Grid pages, just that they combination appeared somewhere in the stylesheet. +The rest of this section is where more in-depth analyses were done, looking not just for property-value combinations, but for evidence of actual usage on pages. + + +### Flexbox and Grid adoption + +The adoption of Flexbox and grid continues to grow. In 2019, Flexbox adoption was 41%; in 2020, it was 63%. This year, Flexbox hit 71% on mobile and 73% on desktop. Grid, in the meantime, has been doubling each year of the Web Almanac, from 2% to 4% and now 8%. Note that, in contrast to the previous section, what is measured here is the percentage of pages that are actually using Flexbox or Grid for layout, as opposed to the pages that simply have some sort of Flexbox or Grid property in their stylesheet. {{ figure_markup( image="flexbox-grid-adoption.png", @@ -788,7 +916,22 @@ featured_stat_label_3: TODO sql_file="flexbox_grid.sql" ) }} +### Usage of different Grid layout techniques + +Digging into the various Grid properties, we discovered a few interesting patterns. +* About 15% of all Grid pages used `grid-template-areas` to define named areas of the grid. +* When we looked for square brackets in Grid templates, which would indicate the presence of named Grid lines, we found a little fewer than 10,000 pages out of the seven million or so analyzed. + +We also analyzed Flexbox layouts to see which ones set the flex grow and shrink values to zero, and then set all the flex item widths to be something static, like percentage or pixel widths. These are referred to as “Grid-like Flexbox,” and we found that just over a quarter of all Flexbox layouts met these criteria. Given the complexity of the analysis, it is entirely possible that we missed many cases. Still, it seems clear that designers are strongly interested in grid-style layouts, and this could drive migration to Grid in the coming years. + +### Multicolumn + +Even though multicolumn layout is a bit fraught on the web, where it can force users to scroll down to the bottom of a column and then back up to the top of the next column, we detected multicolumn use on 20% of the pages we analyzed, which is a 5% rise over the 2020 Web Almanac. We continue to be surprised to see it on so many pages, and even more surprised to see its adoption increasing. + +### Box sizing + +The principles of the original W3C box model continue to be rejected: when we looked to see how many pages were using `box-sizing: border-box`, it was an overwhelming 90%, up around 5% from 2020. Almost half of all pages analyzed apply border-box sizing to every element on the page via the universal selector (`*`). This “one sizing fitted to all” approach may help explain why the median number of `border-box` declarations per page is so low across the bottom three percentiles. {{ figure_markup( image="border-box-declarations-per-page.png", @@ -799,8 +942,15 @@ featured_stat_label_3: TODO sql_file="box_sizing.sql" ) }} +In addition, about a quarter of pages apply `box-sizing` to checkboxes and radio buttons. +## Transitions and animations + +Animations continue to be widely used, with the `animation` property appearing on 77% of all mobile and 73% of all desktop pages analyzed. Its even more popular cousin, `transition`, is used on 85% of all mobile and 90% of all desktop pages. + +Among those transitions, the most common application is to all [animatable properties]([https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties)) using the `all` keyword (whether explicitly or by default), which occurred in 46% of the analyzed pages. Just behind that is `opacity`, at 42% of all pages containing transitions. + {{ figure_markup( image="most-popular-transition-properties.png", caption="The most popular properties given transition effects.", @@ -810,7 +960,7 @@ featured_stat_label_3: TODO sql_file="transition_properties.sql" ) }} - +Among all those transitions, we took a look at the duration and delay times of those transitions. Even at the 90th percentile, the median transition duration was just half a second. The highest median transition delay was 1.7 seconds, but even more interestingly, the 10th percentile median delay was about not quite one-third of a negative second, indicating that a large number of transitions are started partway through the resulting animation (which is what negative delays cause to happen). {{ figure_markup( image="distribution-of-transition-durations.png", @@ -821,8 +971,6 @@ featured_stat_label_3: TODO sql_file="transition_durations.sql" ) }} - - {{ figure_markup( image="distribution-of-transition-delays.png", caption="Distribution of transition delays.", @@ -833,6 +981,9 @@ featured_stat_label_3: TODO ) }} +A closer look at the range of transition durations and delays revealed some seriously lengthy spans of time. The largest duration value we found was 9,999,999,999,999,996 seconds, which corresponds to almost 317 million years. Put another way, if that duration were used in a horizontal scroll transition of [If the Moon Were Only 1 Pixel](https://www.joshworth.com/dev/pixelspace/pixelspace_solarsystem.html), it would take just over two _centuries_ to scroll to the right by a single pixel. This, however, pales in comparison to the longest transition delay we found: a value in milliseconds that equals not quite 31.7 _quintillion_ years. + +As for the timing functions used during the transitions, the clear leader is the default value, `ease`. There’s a virtual tie for second between `ease-in-out` and `linear`, but the surprise was our fourth-place finisher, `cubic-bezier`. This seems most likely to come from a library or some sort of tool, because while it’s possible to learn how to construct cubic Bézier curves by hand, very few people bother to do so (nor is there much reason why they should). {{ figure_markup( image="timing-functions.png", @@ -843,7 +994,7 @@ featured_stat_label_3: TODO sql_file="transition_timing_functions.sql" ) }} - +Okay, but, what _kinds_ of animations are being performed? To determine this, we classified various animation labels by the type of animation being performed. For example, animations labeled `fa-spin`, `spin`, `spinner-spin`, and so on were classified as “rotate” animations, and these were the most popular. {{ figure_markup( image="animation-name-categories.png", @@ -854,7 +1005,18 @@ featured_stat_label_3: TODO sql_file="transition_animation_names.sql" ) }} +One reason for the high ranking of “unknown/other” is the animation label `a`, which was around 6-7% of all named animations. (The most likely companion to these, `b`, had a 2% prevalence.) + +The weak showing of “move” and “slide” style animations might seem surprising, but remember: these are specifically types of `animation`. Transitions driven by the `transition` property are not represented in this sample. It is highly likely that many simple movements (and fades) are handled with transitions, and `animation` is reserved mostly for more complex effects. + + +## Responsive design + +Making a site that copes well with all the different screen sizes wherein you can now browse the web has become significantly easier with the advent of built-in tools like Flexbox and Grid, which are further enhanced by using media-queries. + +### Media features in use +When authors build their media queries, they most often test the width of the viewport: `max-width` and `min-width` were the most popular queries by far, the same as in 2020. There was no ranking change in the third and fourth place results, either. {{ figure_markup( image="media-query-features.png", @@ -866,7 +1028,17 @@ featured_stat_label_3: TODO sql_file="media_query_features.sql" ) }} +Where we did see a notable change was in the ranking of the `prefers-reduced-motion` query. This query placed 7th in 2020, with a share of 24%; this year, with a share of 32%, it’s up to fifth, where it just missed edging out `orientation`. +We also saw newcomers come and go at the bottom of the list. [`pointer`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer), a query which checks to see if the display device’s primary input mechanism is a pointing device such as a mouse and which placed 19th last year, fell off the chart as it slipped to 21st place. The [`hover` media feature](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover), on the other hand, entered the chart at 20th place. `hover` is used to test if the display device’s primary input mechanism can cause a hover state in elements on the page. + +Both queries have a similar aim, which is (put simply) to figure out if the device being used to display the page is mouse-driven or not. Combined with a mobile-first design philosophy, where desktop styles are added to or override the default mobile styling, one can see how queries like `pointer` or `hover` would be useful. While it’s too soon to say if one or the other will become dominant, the trends this year swung toward `hover`. + +This year also saw the debut of `prefers-color-scheme`, coming in at 7%. This may be due to iOS devices adding dark mode support since last year’s report, but in any event, it’s good to see that designers are starting to take color scheme preferences into account. + +### Common breakpoints + +As in 2020, the most common breakpoints by far are at 767 and 768 pixels, which correspond suspiciously well with the resolution of an iPad in portrait mode. We found `767px` was overwhelmingly used as a maximum-width breakpoint and only rarely as a minimum-width value. `786px`, by contrast, was quite often used as both a minimum and maximum breakpoint. {{ figure_markup( image="most-popular-breakpoints.png", @@ -877,7 +1049,13 @@ featured_stat_label_3: TODO sql_file="media_query_values.sql" ) }} +Beyond the 767-768 range, the next most popular breakpoints were at 600 and 1,200 pixels, and close behind that comes 480 pixels. + +Lest you think we converted all the breakpoint queries to pixels, we’re sorry to say we did not: these are the straight values from stylesheets. Out of all the breakpoints we analyzed, the first non-pixel value on the list is `48em`, which came in at 76th on the ranking list, appearing in 1% of desktop and 2% of mobile styles. The next em-based value, `40em`, is found in 85th place. +### Properties inside media queries + +So what do authors actually style inside these media query blocks? The most often property to set is `display`, followed closely by `color`, `width`, and `height`. {{ figure_markup( image="most-popular-properties-used-in-media-queries.png", @@ -888,7 +1066,16 @@ featured_stat_label_3: TODO sql_file="media_query_properties.sql" ) }} +One of the most notable changes between 2020 and 2021 was the fall of `font-size` as a property set inside media blocks. In 2020, it appeared in 73% of all media blocks, placing fifth on the list. This year, it appeared in around 60% of all media blocks, coming in 12th on the list. + +`margin-right` and `margin-top` had even bigger falls, going from 8th and 9th to 25th and 17th, respectively. These sorts of shifts strongly imply a change in a common framework or piece of software — a change in the default Wordpress theme would be one example, though we cannot say if this is the exact source of the change. + + +## Feature queries +Feature queries (`@supports`) continue to grow in usage. In 2019, 30% of pages were found to use them, and last year it was 39%. In 2021, almost 48% of pages are using feature queries to decide which CSS to apply in what contexts. + +So what do authors condition CSS upon? Sticky positioning was far and away the most popular query, accounting for over half of all feature queries. {{ figure_markup( image="most-popular-features-queried.png", @@ -899,7 +1086,12 @@ featured_stat_label_3: TODO sql_file="supports_criteria.sql" ) }} +Only 3% of feature queries checked for Grid support, which translates to 261,406 pages querying Grid support. Given that we found grid layout in use on 2.7 million mobile pages and 2.3 million desktop pages, if our numbers are accurate, it appears that the vast majority of Grid layouts are deployed without fallbacks. + + +## Custom properties +Over the three years of the Web Almanac, custom properties (also known as CSS variables) have seen one of the greatest surges in usage. In 2019, usage was around 5% of all sites, and last year that had shot up to nearly 20% mobile and 15% desktop. This year, we found custom properties being defined on 28.6% of all mobile pages, and 28.3% of desktop pages. Even more, we found that 35.2% of mobile and 35.6% of desktop pages contained at least one `var()` function value. {{ figure_markup( image="custom-property-usage.png", @@ -911,6 +1103,9 @@ featured_stat_label_3: TODO ) }} +### Naming + +The first thing we checked was, “What are developers calling their custom properties?” As it turned out, the prevalence of WordPress came out here, with the top entry being a link-coloring custom property defined by the WP core. {{ figure_markup( image="custom-property-names.png", @@ -921,7 +1116,12 @@ featured_stat_label_3: TODO sql_file="custom_property_names.sql" ) }} +After that, a lot of color names were found. It might seem odd that anyone would need to define a custom value for `--blue` when the named color `blue` is sitting right there, but in practice, developers are assigning custom shades to their basic color names. So rather than `--blue: blue`, we see declarations like `--blue: #3030EA`. + +### Usage + +In addition to all the custom properties named after colors, the four most popular properties to be the recipients of custom-property values (using the `var()` function) are all setting color in one way or another. {{ figure_markup( image="custom-property-properties.png", @@ -932,7 +1132,7 @@ featured_stat_label_3: TODO sql_file="custom_property_properties.sql" ) }} - +Each custom property gets a CSS value of one type or another. For example, `--red: #EF2143` is assigning a color value to `--red`, whereas `--multiplier: 2.5` is assigning a number value. We found that the most popular value type was colors, followed by dimensions (lengths), and then fonts families, whether singly or in groups. {{ figure_markup( image="custom-property-value-types.png", @@ -944,6 +1144,21 @@ featured_stat_label_3: TODO ) }} +### Complexity + +It’s possible to include custom properties in the values of other custom properties. Consider this example from the 2020 Web Almanac: + +```css +:root { + --base-hue: 335; /* depth = 0 */ + --base-color: hsl(var(--base-hue) 90% 50%); /* depth = 1 */ + --background: linear-gradient(var(--base-color), black); /* depth = 2 */ +} +``` + +As the comments in the previous example show, the more of these sub-references are chained together, the greater the _depth_ of the custom property. + +Perhaps unsurprisingly, the clear majority of custom properties had a value depth of zero: they did not include the values of other custom properties in their own values. Nearly a third have one level of depth, and beyond that, there are almost no custom-property values with a depth of two or more. {{ figure_markup( image="custom-property-depth.png", @@ -954,7 +1169,24 @@ featured_stat_label_3: TODO sql_file="custom_property_depth.sql" ) }} +As in 2020, we also checked the selectors in which custom-property values were used. Almost 60% were set on the root element (using either the `:root` or `html` selectors), and around 5% were applied to the `` element. The rest were applied to some descendant of the root element other than ``. This means around two-thirds of all custom properties are used as what are, in effect, global constants. This is in line with the results seen last year. + + +## Internationalization + +English is written horizontally and the characters flow from left to right. But languages such as Arabic, Hebrew and Urdu, among others, are mostly written right to left and then there are languages and scripts — such as Mongolian, Chinese, and Japanese — which can be written in vertical lines, from top to bottom. Owing to this, things can get quite complicated. Both HTML and CSS provide ways to handle this. + +### Direction + +Text direction can be explicitly enforced using the CSS property `direction`. We found it in use on the `` element in 11% of all pages, and on the `` element on 3% of pages. (Note that there may be overlap there, as we did not check for duplicate results.) + +Of those pages that used CSS to set direction, 92% of `` elements and 82% of `` elements were set to `ltr` (left-to-right). Overall, we found `rtl` (right-to-left) used on only 9% of pages that set a direction in CSS. This is more or less to be expected, given that most languages are not right-to-left. + +### Logical and physical properties +Another CSS feature useful for internationalization are the “logical” properties like `margin-block-start`, `padding-inline-end`, and so on, as well as values such as `start` and `end` for properties like `text-align`. These properties and values allow box features to be tied to the direction of text flow, rather than physical directions like top, right, bottom, and so on. + +As of mid-2021, only 4% of pages were found to be using logical properties of any kind. Of the pages that did, about 33% were using it to set `text-align` to `start` or `end`. Another 46% or so (combined) were setting logical margins and padding. Again, note that there could be overlap in these figures. {{ figure_markup( image="logical-property-and-value-usage.png", @@ -965,7 +1197,14 @@ featured_stat_label_3: TODO sql_file="i18n_logical_properties.sql" ) }} +### Ruby + +In addition to directionality and logical features, CSS also offers internationalization support via CSS Ruby, a collection of properties used to affect the layout of interlinear annotation, which are short runs of text alongside the base text. Its usage is vanishingly small: only 8,157 desktop pages and 9,119 mobile pages were found to be using it — less than 0.1% of all pages analyzed. + +## CSS and JS + +While the topic of “CSS in JS” is good for at least a Twitter flame war or two, its use in the wild continues to be very small. This year, we found that about 3% of pages are using some form of CSS-in-JS, up from 2% in 2020. Furthermore, nearly all of it comes from libraries built for the purpose, and more than half of that usage is from the Styled Components library. {{ figure_markup( image="css-in-js-libraries.png", @@ -976,7 +1215,20 @@ featured_stat_label_3: TODO sql_file="css_in_js.sql" ) }} +### Houdini + +In some ways, CSS Houdini represents the opposite of the CSS-in-JS approach: it allows authors to mix a little JS into their CSS. Perhaps in part due to [slow implementation](https://ishoudinireadyyet.com/) (in browsers that aren’t based on Blink) of core parts of the specification, Houdini has struggled to find its feet. We find that it’s effectively not used on the open web in 2021: only 1,030 desktop pages and 1,175 mobile pages show evidence of animated custom properties, a feature of Houdini. This is a threefold increase over the 2020 findings, but it looks like it will still be some time before Houdini finds an audience. + + +## Meta + +In this section, we take a look at more generic concepts in CSS, such as how often declarations are repeated or what kinds of mistakes authors make in writing their CSS. + +### Declaration repetition +In the 2020 Web Almanac, analysis was done to determine the amount of “declaration repetition” — a metric meant to roughly estimate the efficiency of a stylesheet by determining how many declarations used the same property and value, and how many were unique within the page’s styles. + +The 2021 figures are in, and appear to show a slight drop in the median amount of repetition across all percentiles. {{ figure_markup( image="declaration-repetition.png", @@ -987,7 +1239,15 @@ featured_stat_label_3: TODO sql_file="repetition.sql" ) }} +The degree of this drop is on the order of 2% for the 10th, 50th, and 90th percentiles, so it is entirely possible this is statistical noise. The only way to tell would be to continue the analysis in future years, and chart the long-term trends. + +### Shorthands and longhands + +There are many parts of CSS where a collection of very specific properties are also covered by a single “umbrella” property that can set the more specific properties’ values in a single declaration. `font`, for example, encompasses the values of `font-family`, `font-size`, `line-height`, `font-weight`, `font-style`, and `font-variant`. The umbrella property `font` is what’s called a “shorthand” property, because it allows authors to set a number of things in a kind of shorthand. The corresponding specific properties (e.g., `font-family`) are referred to as “longhand” properties. +#### Shorthands before longhands + +If an author mixes shorthand properties like `background` and longhand properties like `background-size` in a stylesheet, it is always best to have the longhands come after the shorthands. We looked at instances where authors did this to see which longhands were most common. {{ figure_markup( image="most-popular-longhand-properties-after-shorthands.png", @@ -998,7 +1258,11 @@ featured_stat_label_3: TODO sql_file="meta_shorthand_first_properties.sql" ) }} +As in 2020, the winner was `background-size`, although last year it showed up in 41% of such cases on mobile, and this year was seen in only 15% of such cases. + +#### Background +Since background longhand properties were at the top of the previous section’s chart, we turned our attention to the use of background shorthands and longhands. It will come as little surprise that these are used almost universally; if anything, it came as a small surprise that there were any pages that didn’t set them. An overwhelming 96% of pages used the `background` shorthand, which goes back to CSS1 in 1996. The same went for the longhand properties of the same age, which were found being applied 85% or more of pages. {{ figure_markup( image="usage-of-background-shorthand-vs-longhands.png", @@ -1010,7 +1274,11 @@ featured_stat_label_3: TODO sql_file="all_properties.sql" ) }} +That said, the much more recent `background-size` has seen rapid and widespread adoption, appearing in 82% of pages, speaking to its incredible utility to authors. At the other end of the spectrum is `background-origin`, which dropped from 12% usage last year to just 5% this year. +#### Margins and paddings + +Moving down the list, we took a look at margin and padding properties. Much as with backgrounds, it’s more a surprise that any pages don’t set these properties than that so many do. What interested us this year was that the longhand `margin-left` edged out its shorthand counterpart `margin` to take the top ranking. {{ figure_markup( image="usage-of-margin-padding-shorthands-vs-longhands.png", @@ -1021,7 +1289,9 @@ featured_stat_label_3: TODO sql_file="all_properties.sql" ) }} +#### Font +Just as was the case in 2020, the shorthand `font` came in behind all of its common longhand counterparts, with `font-size` leading the way and taking the top spot from last year’s winner, `font-weight`. {{ figure_markup( image="usage-of-font-shorthand-vs-longhands.png", @@ -1032,6 +1302,9 @@ featured_stat_label_3: TODO sql_file="all_properties.sql" ) }} +The also-rans here, `font-variant` and `font-stretch`, have two very different stories. `font-variant` has been around since CSS1, but never really caught on with designers, perhaps because for a long time, the only thing you could do with it was set `small-caps`. Nowadays you can do a lot more with it and downloadable fonts, but authors do not seem to be making use of this capability. Its use dropped significantly this year, down from 43% in 2020 to 23% in 2021. + +It’s worth taking a little closer look at `font-variant`. While it’s used on 23% of mobile pages, the longhand properties that it’s now a shorthand for are barely used at all. Here are the actual number of pages found that use not just `font-variant`, but each of its corresponding longhands.
@@ -1087,6 +1360,14 @@ featured_stat_label_3: TODO ) }} +Does this mean authors are only using the shorthand, and ignoring the longhands? That probably accounts for a lot of the existing usage, but the steep decline in use of `font-variant` since last year makes us wonder if a common framework or tool dropped `font-variant` from its default styles. Either way, authors may be missing out on a lot of font features that are widely supported. + +The other low scoring property, `font-stretch`, is heavily dependent on both font families having wide or narrow faces available and authors choosing (or knowing) to make use of them, so its 5% share (down from 8% last year) comes as little surprise. + + +#### Flexbox + +Some of the Flexbox longhand and shorthand properties have had a turbulent history; for example, the CSS Flexbox specification itself [recommends that authors avoid ](https://drafts.csswg.org/css-flexbox-1/#flex-grow-property)using `flex-grow`, `flex-shrink`, and `flex-basis` and use the `flex` shorthand instead. This ensures that unset properties have sensible values. Unfortunately, this doesn’t seem to be bearing out in the wild, where `flex-basis` is used more often on mobile pages than is `flex`, by a margin of more than 10%. {{ figure_markup( image="usage-of-flex-shorthands-vs-longhands.png", @@ -1097,7 +1378,11 @@ featured_stat_label_3: TODO sql_file="all_properties.sql" ) }} +It must be noted that there is a great deal of volatility in these figures as compared to last year’s, such as `flex-basis` doubling in usage on mobile while not really shifting on desktop. This could be due to changes in a common framework used in mobile development, or it could be some other factor. + +#### Grid +The pattern observed in past years is that Grid shorthand properties (`grid-template`, `grid`, etc.) are used far less often than the longhand properties they encompass. In fact, both come in at a staggering 0%, right next to each other in the rankings. The rest of the shorthands are all clustered with them, while longhand properties like `grid-template-rows` and `grid-column` enjoy widespread use. In fact, the only longhand property of any notable usage is `grid-gap`, with 24% usage on mobile Grid pages. It will be interesting to see if the more recent, and generic, `gap` will overtake `grid-gap` in years to come. {{ figure_markup( image="usage-of-grid-properties.png", @@ -1110,6 +1395,17 @@ featured_stat_label_3: TODO ) }} +### CSS mistakes + +Sometimes, one can learn as much from a mistake as from a success. We took the opportunity to look for not just common errors, but things that looked like they should be correct, but weren’t. + +#### Unrecoverable syntax errors + +This year’s parsing run, which as in 2020 uses the [Rework](https://github.com/reworkcss/css) CSS parser, yielded more heartening numbers. Just 0.94% of desktop pages and 0.55% of mobile pages contained an unrecoverable error — that is, an error so bad, it made parsing the entirety of the stylesheet with Rework impossible. There certainly may have been a much greater number of pages with small, recoverable CSS errors, but the unrecoverable-error figures this year are a great deal lower than last year. This may easily indicate a change in Rework, as opposed to a sudden outbreak of syntax cleanup in the wild. + +#### Nonexistent properties + +One of the things we like to check for is the existence of declarations that are syntactically valid, but use properties that don’t actually exist. This doesn’t count vendor-prefixed properties, but does include malformed vendor-prefixed properties. Indeed, the most widespread non-existent property we found was `webkit-transition` (which lacks the `-` at the beginning needed for a proper vendor prefix), appearing on 14% of all pages that contained a nonexistent property. Essentially tied with that was `font-smoothing`, an unprefixed version of `-webkit-font-smoothing` that does not actually exist, [nor is it likely to](https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth) any time soon. {{ figure_markup( image="most-popular-unknown-properties.png", @@ -1121,7 +1417,11 @@ featured_stat_label_3: TODO sql_file="meta_unknown_properties.sql" ) }} +#### Longhands before shorthands + +In the previous section of this chapter, we looked at which longhand properties were most likely to appear after the corresponding shorthand property (e.g., `background` being followed by `background-size` at some point). +Doing things the other way around, putting a shorthand _after_ a longhand, is a depressingly common mistake, and it happens most often with background properties. In all the cases where a longhand was followed by a corresponding shorthand, a background longhand property was overwritten by the values in the `background` shorthand property. {{ figure_markup( image="most-common-shorthands-after-longhands.png", @@ -1134,6 +1434,11 @@ featured_stat_label_3: TODO ) }} +## Sass + +One of the great advantages of CSS preprocessors is that they can reveal what’s missing in CSS itself, and can thus be a guide to how CSS should be extended in the future. This has already happened before, with variables being so popular in preprocessors that CSS eventually added [custom properties](https://www.w3.org/TR/css-variables-1/) to its repertoire. Other features of preprocessors, like color modifications and nested selectors, are also finding their way into the base language. + +This is why we devote a section of this chapter to seeing how developers are using Sass, one of the most popular preprocessors on the web today. The Sass functions we found in use largely mirrored those found in the 2020 Web Almanac, albeit with some changes in the specific percentages. When classified by type, we found that 28% of all Sass functions were those that modify colors (e.g., `darken`, `mix`) and a further 6% were used to read color components (e.g., `alpha`, `blue`). {{ figure_markup( image="most-popular-sass-function-calls.png", @@ -1145,7 +1450,9 @@ featured_stat_label_3: TODO sql_file="sass_function_calls.sql" ) }} +The desire for conditional behavior can be seen in the fact that the `if()` function placed third on the list, at 15% of all Sass functions. +This same desire can be seen even more clearly in the use of Sass’s flow control structures, like `@if`. Literally two-thirds of all Sass stylesheets use `@if`, and more than half use `@for` or `@each` (or both). This popular capability was [recently added to CSS](https://drafts.csswg.org/css-conditional-4/#when-rule). By contrast, only 2% use the `@while` structure. {{ figure_markup( image="usage-of-control-flow-statements-in-scss.png", @@ -1156,7 +1463,7 @@ featured_stat_label_3: TODO sql_file="sass_control_flow_statements.sql" ) }} - +Another of Sass’s major draws is the ability to nest rules inside other rules and thus avoid having to write repetitive selector patterns. This capability is [under development for native CSS](https://www.w3.org/TR/css-nesting-1/), and our analysis shows why: 87% of all Sass stylesheets use a detectable form of rule nesting. Implicit nesting, which does not require special characters, was not measured. {{ figure_markup( image="usage-of-explicit-nesting-in-scss.png", @@ -1167,3 +1474,12 @@ featured_stat_label_3: TODO sheets_gid="1859409315", sql_file="sass_nesting.sql" ) }} + + +## Conclusion + +In the end, the 2021 Web Almanac tells the story of a technology that’s stable but still evolving. We saw very few instances of major shifts between last year’s Almanac and this year’s — some practices and web features are clearly growing, while others are beginning to fade, but overall, there was a very strong sense of continuity. + +Does this mean CSS has become stagnant? Hardly: new layout methods are gaining ground, and major new capabilities are being developed, many of them based on practices worked out in the realm of preprocessors. We would not think to claim that CSS is “solved” or that the best possible practices have already been worked out. As practitioners gain ever more experience, changes will come to both CSS the language and CSS the practice. These changes may be gradual rather than sudden, steady rather than disruptive, but this is what we expect in any mature technology. + +We look forward to seeing how CSS will grow over the years to come. From 52457c83c7d7ae922a487582b2761b54316d7421 Mon Sep 17 00:00:00 2001 From: Rick Viscomi Date: Mon, 15 Nov 2021 16:27:59 -0500 Subject: [PATCH 02/11] Update src/content/en/2021/css.md --- src/content/en/2021/css.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/en/2021/css.md b/src/content/en/2021/css.md index 8039eaaff28..8f27a8cfdd8 100644 --- a/src/content/en/2021/css.md +++ b/src/content/en/2021/css.md @@ -1367,7 +1367,7 @@ The other low scoring property, `font-stretch`, is heavily dependent on both fon #### Flexbox -Some of the Flexbox longhand and shorthand properties have had a turbulent history; for example, the CSS Flexbox specification itself [recommends that authors avoid ](https://drafts.csswg.org/css-flexbox-1/#flex-grow-property)using `flex-grow`, `flex-shrink`, and `flex-basis` and use the `flex` shorthand instead. This ensures that unset properties have sensible values. Unfortunately, this doesn’t seem to be bearing out in the wild, where `flex-basis` is used more often on mobile pages than is `flex`, by a margin of more than 10%. +Some of the Flexbox longhand and shorthand properties have had a turbulent history; for example, the CSS Flexbox specification itself [recommends that authors avoid](https://drafts.csswg.org/css-flexbox-1/#flex-grow-property) using `flex-grow`, `flex-shrink`, and `flex-basis` and use the `flex` shorthand instead. This ensures that unset properties have sensible values. Unfortunately, this doesn’t seem to be bearing out in the wild, where `flex-basis` is used more often on mobile pages than is `flex`, by a margin of more than 10%. {{ figure_markup( image="usage-of-flex-shorthands-vs-longhands.png", From 0f67b0e60239d8c3cdb77c21d1be75f8789b6992 Mon Sep 17 00:00:00 2001 From: "Eric A. Meyer" Date: Mon, 15 Nov 2021 16:30:14 -0500 Subject: [PATCH 03/11] Update src/content/en/2021/css.md Co-authored-by: Rick Viscomi --- src/content/en/2021/css.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/en/2021/css.md b/src/content/en/2021/css.md index 8f27a8cfdd8..ea5618ac079 100644 --- a/src/content/en/2021/css.md +++ b/src/content/en/2021/css.md @@ -683,7 +683,7 @@ What we found was that most CSS doesn’t result in a lot of image loads: the lo {{ figure_markup( image="number-of-images-loaded.png", - caption="Distribution of the median number of external images loaded via CSS.", + caption="Distribution of the number of external images loaded via CSS.", description="A paired-column chart showing the 10th, 25th, 50th, 75th, and 90th percentile median values for the number of images loaded via CSS. The results are as follows. 10th and 25th percentiles, 1 on both desktop and mobile. 50th percentile, 3 on both dekstop and mobile. 75th percentile, 6 on desktop and 5 on mobile. 90th percentile, 11 on desktop and 10 on mobile.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRXMwdR5iy0KEMBzUWuZqDfWsj8HDDJcd5lFfjJpBmJr8gI1TE3xz2BzbNB9SEzSrxDtxfqvDvnvbQ3/pubchart?oid=1206209320&format=interactive", sheets_gid="361647805", From 0fa3b467a7dc9f13f1d54535ce880d67f861ab0b Mon Sep 17 00:00:00 2001 From: "Eric A. Meyer" Date: Mon, 15 Nov 2021 16:30:23 -0500 Subject: [PATCH 04/11] Update src/content/en/2021/css.md Co-authored-by: Rick Viscomi --- src/content/en/2021/css.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/en/2021/css.md b/src/content/en/2021/css.md index ea5618ac079..5bd047e11ef 100644 --- a/src/content/en/2021/css.md +++ b/src/content/en/2021/css.md @@ -877,7 +877,7 @@ We also saw a dramatic reduction at the top end of gradient complexity. Last ye {{ figure_markup( image="most-color-stops.png", classes="height-16vw-122px", - caption="The linear gradient with the most color stops foudn in our analysis.", + caption="The linear gradient with the most color stops.", description="A screenshot of the gradient with the most color stops, which is a series of intricate multicolor stripes of varying hues.", width=600, height=100 From 27bb5a3754c0be686e61770ae2a71a88c2d0a7f5 Mon Sep 17 00:00:00 2001 From: "Eric A. Meyer" Date: Mon, 15 Nov 2021 16:30:37 -0500 Subject: [PATCH 05/11] Update src/content/en/2021/css.md Co-authored-by: Rick Viscomi --- src/content/en/2021/css.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/en/2021/css.md b/src/content/en/2021/css.md index 5bd047e11ef..7a2619ecf83 100644 --- a/src/content/en/2021/css.md +++ b/src/content/en/2021/css.md @@ -853,7 +853,7 @@ The share of pages using CSS gradients was roughly the same as last year: 77% of ) }} -Linear gradients continue to be the clear favorite, maintaining the 5-to-1 lead over radial gradients seen in the 2020 Web Almanac. +Linear gradients continue to be the clear favorite, maintaining the 5-to-1 lead over radial gradients seen in the [2020 Web Almanac](../2020/css). {{ figure_markup( image="most-popular-unprefixed-gradient-functions.png", From 4f37d973121eea116ae9880b3cdfc8f75d486160 Mon Sep 17 00:00:00 2001 From: "Eric A. Meyer" Date: Mon, 15 Nov 2021 16:45:04 -0500 Subject: [PATCH 06/11] First half of metadata Second half still to come (need to go through and find my favorite bits). --- src/content/en/2021/css.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/content/en/2021/css.md b/src/content/en/2021/css.md index 7a2619ecf83..7c062a5c767 100644 --- a/src/content/en/2021/css.md +++ b/src/content/en/2021/css.md @@ -1,10 +1,10 @@ --- #See https://github.com/HTTPArchive/almanac.httparchive.org/wiki/Authors'-Guide#metadata-to-add-at-the-top-of-your-chapters title: CSS -description: TODO -authors: [] -reviewers: [] -analysts: [] +description: CSS chapter of the 2021 Web Almanac covering trends, changes, and patterns in CSS use across the web. +authors: [meyerweb, GeekBoySupreme] +reviewers: [svgeesus, j9t, estelle, bkardell, argyleink, LeaVerou] +analysts: [rviscomi, thecraftysoul] editors: [] translators: [] results: https://docs.google.com/spreadsheets/d/12vQIA0xsC5Jr3J9Sh03AcAvgFjMAmP1xSS6Tjai9LF0/ From b30239782d828b1f4a7463f904924e37d359c113 Mon Sep 17 00:00:00 2001 From: Rick Viscomi Date: Mon, 15 Nov 2021 17:24:43 -0500 Subject: [PATCH 07/11] Update 2021.json --- src/config/2021.json | 70 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 70 insertions(+) diff --git a/src/config/2021.json b/src/config/2021.json index 6d5e0d62507..680b9fb4a76 100644 --- a/src/config/2021.json +++ b/src/config/2021.json @@ -234,6 +234,16 @@ "avatar_url": "https://avatars.githubusercontent.com/u/44442451?v=4&s=200", "github": "AbbyTsai" }, + "argyleink": { + "name": "Adam Argyle", + "teams": [ + "reviewers" + ], + "avatar_url": "https://avatars.githubusercontent.com/u/1134620?v=4&s=200", + "website": "https://nerdy.dev", + "github": "argyleink", + "twitter": "argyleink" + }, "tropicadri": { "name": "Adriana Jara", "teams": [ @@ -313,6 +323,16 @@ "linkedin": "tunetheweb", "twitter": "tunetheweb" }, + "bkardell": { + "name": "Brian Kardell", + "teams": [ + "reviewers" + ], + "avatar_url": "https://avatars.githubusercontent.com/u/870501?v=4&s=200", + "website": "https://bkardell.com", + "github": "bkardell", + "twitter": "briankardell" + }, "carlopi": { "name": "Carlo Piovesan", "teams": [ @@ -322,6 +342,16 @@ "github": "carlopi", "twitter": "carlop54002226" }, + "svgeesus": { + "name": "Chris Lilley", + "teams": [ + "reviewers" + ], + "avatar_url": "https://avatars.githubusercontent.com/u/2506926?v=4&s=200", + "website": "https://svgees.us/", + "github": "svgeesus", + "twitter": "svgeesus" + }, "christianliebel": { "name": "Christian Liebel", "teams": [ @@ -364,6 +394,25 @@ "github": "demianrenzulli", "twitter": "drenzulli" }, + "meyerweb": { + "name": "Eric A. Meyer", + "teams": [ + "authors" + ], + "avatar_url": "https://avatars.githubusercontent.com/u/939727?v=4&s=200", + "github": "meyerweb", + "website": "http://meyerweb.com/" + }, + "estelle": { + "name": "Estelle Weyl", + "teams": [ + "reviewers" + ], + "avatar_url": "https://avatars.githubusercontent.com/u/69888?v=4&s=200", + "website": "http://standardista.com/", + "github": "estelle", + "twitter": "estellevw" + }, "fili": { "name": "Fili Wiese", "teams": [ @@ -462,6 +511,16 @@ "github": "jeffposnick", "twitter": "jeffposnick" }, + "j9t": { + "name": "Jens Oliver Meiert", + "teams": [ + "reviewers" + ], + "avatar_url": "https://avatars.githubusercontent.com/u/1700772?v=4&s=200", + "website": "https://meiert.com/en/", + "github": "j9t", + "twitter": "j9t" + }, "jonoalderson": { "name": "Jono Alderson", "teams": [ @@ -508,6 +567,16 @@ "github": "vdwijngaert", "twitter": "vdwijngaert" }, + "LeaVerou": { + "name": "Lea Verou", + "teams": [ + "reviewers" + ], + "avatar_url": "https://avatars.githubusercontent.com/u/175836?v=4&s=200", + "website": "https://lea.verou.me/", + "github": "LeaVerou", + "twitter": "leaverou" + }, "lucasbona05": { "name": "Lucas Gonçalves", "teams": [ @@ -723,6 +792,7 @@ "GeekBoySupreme": { "name": "Shuvam Manna", "teams": [ + "authors", "designers" ], "avatar_url": "https://avatars.githubusercontent.com/u/15321738?v=4&s=200", From decdc22c49c47b177424f53166845834c3fe7701 Mon Sep 17 00:00:00 2001 From: "Eric A. Meyer" Date: Mon, 15 Nov 2021 23:08:38 -0500 Subject: [PATCH 08/11] Update src/content/en/2021/css.md Co-authored-by: Rick Viscomi --- src/content/en/2021/css.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/en/2021/css.md b/src/content/en/2021/css.md index 7c062a5c767..7db92336546 100644 --- a/src/content/en/2021/css.md +++ b/src/content/en/2021/css.md @@ -4,7 +4,7 @@ title: CSS description: CSS chapter of the 2021 Web Almanac covering trends, changes, and patterns in CSS use across the web. authors: [meyerweb, GeekBoySupreme] reviewers: [svgeesus, j9t, estelle, bkardell, argyleink, LeaVerou] -analysts: [rviscomi, thecraftysoul] +analysts: [rviscomi] editors: [] translators: [] results: https://docs.google.com/spreadsheets/d/12vQIA0xsC5Jr3J9Sh03AcAvgFjMAmP1xSS6Tjai9LF0/ From e765c8fb2bf7dd912e458c9d411af34a9049fd54 Mon Sep 17 00:00:00 2001 From: "Eric A. Meyer" Date: Mon, 15 Nov 2021 23:24:00 -0500 Subject: [PATCH 09/11] Second half of metadata MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit I hope the quote isn’t too spicy! --- src/content/en/2021/css.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/content/en/2021/css.md b/src/content/en/2021/css.md index 7db92336546..c1e3b8df1dd 100644 --- a/src/content/en/2021/css.md +++ b/src/content/en/2021/css.md @@ -8,13 +8,13 @@ analysts: [rviscomi] editors: [] translators: [] results: https://docs.google.com/spreadsheets/d/12vQIA0xsC5Jr3J9Sh03AcAvgFjMAmP1xSS6Tjai9LF0/ -featured_quote: TODO -featured_stat_1: TODO -featured_stat_label_1: TODO -featured_stat_2: TODO -featured_stat_label_2: TODO -featured_stat_3: TODO -featured_stat_label_3: TODO +featured_quote: While the topic of “CSS in JS” is good for a Twitter flame war or two, its use in the wild continues to be very small. +featured_stat_1: 71% +featured_stat_label_1: The percentage of pages using Flexbox for some form of layout. +featured_stat_2: 3 +featured_stat_label_2: The average number of images loaded via CSS. +featured_stat_3: 28.6% +featured_stat_label_3: The percentage of pages using custom properties. --- From c9b5f15f12b8566775bf78a996e22e4ce8f8353a Mon Sep 17 00:00:00 2001 From: "Eric A. Meyer" Date: Tue, 16 Nov 2021 00:06:39 -0500 Subject: [PATCH 10/11] Updated pull quote I decided to skip spicy for summarizing. --- src/content/en/2021/css.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/en/2021/css.md b/src/content/en/2021/css.md index c1e3b8df1dd..087eb9d62b3 100644 --- a/src/content/en/2021/css.md +++ b/src/content/en/2021/css.md @@ -8,7 +8,7 @@ analysts: [rviscomi] editors: [] translators: [] results: https://docs.google.com/spreadsheets/d/12vQIA0xsC5Jr3J9Sh03AcAvgFjMAmP1xSS6Tjai9LF0/ -featured_quote: While the topic of “CSS in JS” is good for a Twitter flame war or two, its use in the wild continues to be very small. +featured_quote: The 2021 Web Almanac offers deeper insight into how the use of CSS differs in the realm of what we all think we need versus what we actually see in production. featured_stat_1: 71% featured_stat_label_1: The percentage of pages using Flexbox for some form of layout. featured_stat_2: 3 @@ -23,7 +23,7 @@ featured_stat_label_3: The percentage of pages using custom properties. CSS (Cascading Style Sheets) is one of the three main pillars for building pages on the web - with HTML, used to define the structure; and Javascript, used to specify behaviour and interactions, completing the triumvirate. -Compared to last edition, the 2021 Web Almanac offers a deeper insight into how the use of CSS differs in the realm of what we all think we need vs. what we actually see in production. As the calls for more robust CSS features and the challenge of centering a `
` with CSS kept making the rounds on our blog posts, conference talks, and Twitter chatter, pages around the web offered us vastly contradicting results, betraying the fact that CSS has, perhaps, become old enough to put more thought on staying stable instead of going wild with the zaniest of toys. +Compared to last edition, the 2021 Web Almanac offers a deeper insight into how the use of CSS differs in the realm of what we all think we need versus what we actually see in production. As the calls for more robust CSS features and the challenge of centering a `
` with CSS kept making the rounds on our blog posts, conference talks, and Twitter chatter, pages around the web offered us vastly contradicting results, betraying the fact that CSS has, perhaps, become old enough to put more thought on staying stable instead of going wild with the zaniest of toys. While CSS-in-JS adoption grew to 3% of all pages crawled (a 1% jump from last year), cutting-edge Houdini features are still mostly confined to tutorials and example galleries. Responsiveness continued to be one of most engrossing priorities, with `max-width` and `min-width` being the top media queries, and calc() being the top CSS function most commonly in use to determine widths. From df51d328ac4cf41c9db1561b9ce8b71987049225 Mon Sep 17 00:00:00 2001 From: "Eric A. Meyer" Date: Tue, 16 Nov 2021 11:05:47 -0500 Subject: [PATCH 11/11] Added a couple of big-number figures Lines 657-663 and 940-946 --- src/content/en/2021/css.md | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/src/content/en/2021/css.md b/src/content/en/2021/css.md index 087eb9d62b3..2b2417c91bb 100644 --- a/src/content/en/2021/css.md +++ b/src/content/en/2021/css.md @@ -654,6 +654,14 @@ In last year’s Web Almanac, there was a note about “the once-deprecated—no The usage of the display-p3 color space remains about as vanishingly small as was found in 2020, probably because it’s only supported in Safari (both desktop and mobile) as of this writing. Desktop and mobile use roughly tripled, to 90 and 105 pages, respectively. In the cases where `color(display-p3)` was used, it was with good reason: 79% of the colors expressed using display-p3 on mobile were colors that cannot be represented in the sRGB color space. Until the `color()` function becomes more widely supported by browsers, the web will remain stuck in sRGB, which permits about two-thirds of the colors that screens can actually display. +{{ figure_markup( + caption="Percentage of display-p3 colors that lie outside the sRGB space.", + content="79%", + classes="big-number", + sheets_gid="721597121", + sql_file="color_p3.sql" +) }} + ## Images @@ -898,7 +906,7 @@ We have come a long, long way from using tables to create layouts on the web to sql_file="layout_properties.sql" ) }} -Note that this doesn’t chart primary layout methods — we are not claiming here that 93% of the pages we analyzed are laid out using absolute positioning! Rather, what the chart says is that `position: absolute` appeared in the styles for 93% of the page we analyzed, even if that was just to put an icon in a corner or place bits of content `-9999px` offscreen. Similarly, `display: grid` may have appeared in 36% of page’s styles, but that doesn’t mean 37% of all pages are Grid pages, just that they combination appeared somewhere in the stylesheet. +Note that this doesn’t chart primary layout methods — we are not claiming here that 93% of the pages we analyzed are laid out using absolute positioning! Rather, what the chart says is that `position: absolute` appeared in the styles for 93% of the page we analyzed, even if that was just to put an icon in a corner or place bits of content `-9999px` offscreen. Similarly, `display: grid` may have appeared in 36% of page’s styles, but that doesn’t mean 37% of all pages are Grid pages, just that the combination appeared somewhere in the stylesheet. The rest of this section is where more in-depth analyses were done, looking not just for property-value combinations, but for evidence of actual usage on pages. @@ -929,6 +937,14 @@ We also analyzed Flexbox layouts to see which ones set the flex grow and shrink Even though multicolumn layout is a bit fraught on the web, where it can force users to scroll down to the bottom of a column and then back up to the top of the next column, we detected multicolumn use on 20% of the pages we analyzed, which is a 5% rise over the 2020 Web Almanac. We continue to be surprised to see it on so many pages, and even more surprised to see its adoption increasing. +{{ figure_markup( + caption="The percentage of pages using multicolumn layout.", + content="20%", + classes="big-number", + sheets_gid="1371521792", + sql_file="multicol.sql" +) }} + ### Box sizing The principles of the original W3C box model continue to be rejected: when we looked to see how many pages were using `box-sizing: border-box`, it was an overwhelming 90%, up around 5% from 2020. Almost half of all pages analyzed apply border-box sizing to every element on the page via the universal selector (`*`). This “one sizing fitted to all” approach may help explain why the median number of `border-box` declarations per page is so low across the bottom three percentiles.