diff --git a/src/content/en/2021/css.md b/src/content/en/2021/css.md index c9923e9e04b..b155b360a17 100644 --- a/src/content/en/2021/css.md +++ b/src/content/en/2021/css.md @@ -5,99 +5,95 @@ description: CSS chapter of the 2021 Web Almanac covering trends, changes, and p authors: [meyerweb, GeekBoySupreme] reviewers: [svgeesus, j9t, estelle, bkardell, argyleink, LeaVerou] analysts: [rviscomi] -editors: [] +editors: [shantsis] translators: [] +meyerweb_bio: Eric A. Meyer has been a burger flipper, a hardward jockey, a college webmaster, an early blogger, one of the original CSS Samurai, a member of the [CSS Working Group](https://en.wikipedia.org/wiki/CSS_Working_group), a consultant and trainer, and a Standards Evangelist for [Netscape](https://en.wikipedia.org/wiki/Netscape). Currently, he is a Developer Advocate at Igalia and co-founder of An Event Apart with Jeffrey Zeldman. Among other things, Eric co-wrote Design For Real Life with Sara Wachter-Boettcher for A Book Apart and CSS: The Definitive Guide with Estelle Weyl for O'Reilly, created the first official W3C test suite, and assisted in the creation of microformats. +GeekBoySupreme_bio: Shuvam is a designer, doodler, writer, shutterbug and a software tinkerer. He's currently designing at Winuall and Indie-Hacking, working on Projects such as TabTrum. results: https://docs.google.com/spreadsheets/d/12vQIA0xsC5Jr3J9Sh03AcAvgFjMAmP1xSS6Tjai9LF0/ 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 -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 -unedited: true +featured_stat_label_2: The median number of images loaded via CSS +featured_stat_3: 29% +featured_stat_label_3: The percentage of pages using custom properties. --- - - ## 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. +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 behavior 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 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. -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. - +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 rabbit hole 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", caption="Distribution of stylesheet transfer sizes per page.", - description="A paired-column chart showing the 10th, 25th, 50th, 75th, and 90th percentile median values for the total weight of the stylesheets for a page. The numbers are as follows. 10th percentile, 9 kilobytes on desktop and 6 kilobytes on mobile. 25th percentile, 31 KB desktop and 27 KB mobile. 50th percentile, 71 KB desktop and 66 KB mobile. 75th percentile, 142 KB desktop and 135KB mobile. 90th percentile, 257 KB desktop and 250 KB mobile.", + description="A paired-column chart showing the 10th, 25th, 50th, 75th, and 90th percentile median values for the total weight of the stylesheets for a page. The numbers are as follows. 10th percentile, 9 KB on desktop and 6 KB on mobile. 25th percentile, 31 KB desktop and 27 KB mobile. 50th percentile, 71 KB desktop and 66 KB mobile. 75th percentile, 142 KB desktop and 135KB mobile. 90th percentile, 257 KB desktop and 250 KB mobile.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRXMwdR5iy0KEMBzUWuZqDfWsj8HDDJcd5lFfjJpBmJr8gI1TE3xz2BzbNB9SEzSrxDtxfqvDvnvbQ3/pubchart?oid=900703452&format=interactive", sheets_gid="350963758", 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. +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. + +Not every page was so constrained: the page with the greatest CSS weight loaded 64,628 KB. The biggest mobile CSS weight seems positively svelte in comparison: only 17,823 KB. -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 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 +As for what kinds of sourcemaps were used, the numbers were largely consistent with last year:
- - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + +
Sourcemap type20202021
CSS files45%45%
Sass34%37%
Less21%17%
Sourcemap type20202021
CSS files45%45%
Sass34%37%
Less21%17%
{{ figure_link( - caption="Sourcemap types in 2021 versus 2020.", - sheets_gid="945827671", - sql_file="sourcemap_adoption.sql" + caption="Sourcemap types in 2021 versus 2020.", + sheets_gid="945827671", + sql_file="sourcemap_adoption.sql" ) }}
-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. +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. {{ figure_markup( image="stylesheets-per-page.png", caption="Distribution of the number of stylesheets per page.", - description="A paired-column chart showing the 10th, 25th, 50th, 75th, and 90th percentile median values for the total number of stylesheets loaded per page. The results are as follows. 10th percentile, 1 stylesheet for desktop and 1 stylesheet for mobile. 25th percentile, 3 for both desktop and mobile. 50th percentile, 7 for desktop and 6 for mobile. 75th percentile, 13 for both desktop and mobile. 90th percentile, 22 for both desktop and mobile.", + description="A paired-column chart showing the 10th, 25th, 50th, 75th, and 90th percentile median values for the total number of stylesheets loaded per page. The results are as follows. 10th percentile, 1 stylesheet for desktop and 1 stylesheet for mobile. 25th percentile, 3 for both desktop and mobile. 50th percentile, 7 for desktop and 6 for mobile. 75th percentile, 13 for both desktop and mobile. 90th percentile, 22 for both desktop and mobile.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRXMwdR5iy0KEMBzUWuZqDfWsj8HDDJcd5lFfjJpBmJr8gI1TE3xz2BzbNB9SEzSrxDtxfqvDvnvbQ3/pubchart?oid=1775427809&format=interactive", sheets_gid="751625680", 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! +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( caption="The largest number of external stylesheets loaded by a page.", @@ -107,31 +103,31 @@ Incredibly, this year’s record for the largest number of external stylesheets 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. +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( image="rules-per-page.png", caption="Distribution of the total number of style rules per page.", - description="A paired-column chart showing the 10th, 25th, 50th, 75th, and 90th percentile median values for the total number of CSS rules. The results are as follows. 10th percentile, 17 rules for desktop and 15 rules for mobile. 25th percentile, 145 rules for desktop and 152 for mobile. 50th percentile, 512 for desktop and 483 for mobile. 75th percentile, 1,078 for desktop and 1,063 for mobile. 90th percentile, 1,841 for desktop and 1,821 for mobile.", + description="A paired-column chart showing the 10th, 25th, 50th, 75th, and 90th percentile median values for the total number of CSS rules. The results are as follows. 10th percentile, 17 rules for desktop and 15 rules for mobile. 25th percentile, 145 rules for desktop and 152 for mobile. 50th percentile, 512 for desktop and 483 for mobile. 75th percentile, 1,078 for desktop and 1,063 for mobile. 90th percentile, 1,841 for desktop and 1,821 for mobile.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRXMwdR5iy0KEMBzUWuZqDfWsj8HDDJcd5lFfjJpBmJr8gI1TE3xz2BzbNB9SEzSrxDtxfqvDvnvbQ3/pubchart?oid=472863207&format=interactive", sheets_gid="697775839", sql_file="selectors.sql" ) }} +Number of stylesheets 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. + ## 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. +Understanding cascade is an incredibly important part of working with CSS. Even more so for instances when you'd see that the styles you had written for an element are 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", caption="The most popular class names.", - description="A chart showing the most popular class names, with percentage share given for mobile. The desktop bars are all within a percent or two of their mobile cousins. The list is as follows, with the values indicating the percent of all pages containing the given class name: active 42%; fa 32%; fa-* 32%, pull-right 29%, pull-left 28%, disabled 24%, selected 22%, button 22%, container 20%, wp-* 20%, sr-only 20%, title 20%, btn 19%, sr-only-focusable 19%, clearfix 17%, current 16%, right 16%, rtl 15%, widget 15%, row 15%.", + description="A chart showing the most popular class names, with percentage share given for mobile. The desktop bars are all within a percent or two of their mobile cousins. The list is as follows, with the values indicating the percent of all pages containing the given class name: `active` 42%; `fa` 32%; `fa-*` 32%, `pull-right` 29%, `pull-left` 28%, `disabled` 24%, `selected` 22%, `button` 22%, `container` 20%, `wp-*` 20%, `sr-only` 20%, `title` 20%, `btn` 19%, `sr-only-focusable` 19%, `clearfix` 17%, `current` 16%, `right` 16%, `rtl` 15%, `widget` 15%, `row` 15%.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRXMwdR5iy0KEMBzUWuZqDfWsj8HDDJcd5lFfjJpBmJr8gI1TE3xz2BzbNB9SEzSrxDtxfqvDvnvbQ3/pubchart?oid=1533988979&format=interactive", width=600, height=691, @@ -139,17 +135,16 @@ Much like last year, the most popular class name on the web is `active`, and the 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. +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. +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 `