Here’s a look at different trends in the use of CSS in 2021

Test basis:

All metrics in this article are from the HTTP Archive dataset. HTTP Archive is a community-run project that has been tracking the way the web is built since 2010. Using WebPageTest and Lighthouse behind the scenes, the metadata of approximately 8.2 million websites is tested each month and included in a public BigQuery database for analysis.

Test sites: 8.2 million;

Data processing: 39.5TB.

A, usage,

1. Style sheet size

Here is the size distribution for each stylesheet file:The size of CSS files increases every year. The size of a medium-sized page is about 70KB, and that of a large page is about 250KB. The median CSS file size increased by 7.9% compared to 2020, while the percentages for all mobile CSS were slightly lower than those for Web CSS.

Of all CSS files tested, the largest Web page CSS file size is 64,628 KB, and the largest mobile page CSS file size is 17,823 KB.

2. Preprocessor

The CSS size of a page is not significantly affected by the preprocessor. Seventeen percent of Web pages and 16.5 percent of mobile pages contain preprocessors, up slightly from 15 percent last year. The specific styles used are as follows:

3. Number of stylesheets

Here is the distribution of the number of external stylesheets used per page:This year’s stylesheet distribution per page has increased from last year, with an increase in the 50th to 90th percentiles and no change in the 10th to 15th percentiles.

This year, the record for the largest number of external stylesheets was 2,368, roughly double the 1,379 recorded in 2020.

4. Style sheet rules

Here is the distribution of the number of style rules per page:There was little change in the higher percentile and a slight increase in the lower percentile from last year. In most percentile number distributions, Web pages have a little more style rules than mobile pages.

Second, selector

1. class

The most common class names are as follows:

2. id

The most common ID names are as follows:

3. Property selector

The most common property selectors are as follows:The most common property selector is Type, which can be used to select form controls such as checkboxes, radio buttons, text input, and so on.

4. The pseudo class

The most commonly used pseudo-classes are as follows:As in 2020, user-operated pseudoclasses hover, : Focus, and :active dominate the top three, all appearing on at least two-thirds of pages.

5. Pseudo elements

The most common pseudo-elements are as follows:

6. !important

Every page used! The proportion of important is as follows:The survey found a maximum of 17,990 mobile pages! Important rule, a maximum of 17,648 Web pages! Important rules.

Use! The style attribute distribution for the important rule is as follows:

Value and unit

The length of the 1.

Favorite unit of length:Pixel units remain by far the most common unit of length, appearing in approximately 71% of pages.

Here is the length type distribution for each attribute: ​

Here are the most commonly used font units of relative length:

The use units of the 0 length are distributed as follows:Nearly 88% of the values omit units, and the rest are almost always px.

2. Calculate

Here are the most common attributes that use the calc() function:As in past years, the most common use of calc() is to set width.

Here are the most commonly used units of length in calc() functions: ​

The distribution of units in the calc() function is as follows:Calc () values are relatively simple, and most are computed in two different units, such as subtracting pixels from the result of a percentage value calculation. A total of 99% of calc() expressions use one or both unit types.

3. Global keywords

Here are the most commonly used global keywords and their distribution:

4. Color

The most common color formats are as follows:For a long time, the #RRGGBB format has been the most used color format, with over half of all color declarations using this format. 75% of the color values are represented using hexadecimal and RGB syntax.

The most commonly used color keyword values:

Four, pictures,

1. Image format in the CSS

Here is the proportional distribution of image formats in CSS:

2. Image format in the CSS

Here is the distribution of the number of images loaded in the CSS style file:Most CSS does not load a lot of images. The site with the most images in the survey had 6,088 images loaded in its Web page CSS and 6,089 images loaded in its mobile page CSS.

3. Size of the image in the CSS

Here is the size distribution of external images loaded with CSS:In general, mobile pages tend to be slightly smaller than the external images that CSS loads on Web pages. In the survey, there was one page where CSS loaded images with a total size of 314,386.1 KB.

Here is an external image size distribution loaded with CSS on a mobile page according to the image format:Interestingly, at the 90th percentile, GIF images are, on average, smaller than SVG files.

4. The gradient

Here are some common attributes that use gradients:Here are the most commonly used gradients:

Five, the layout

Here are the most commonly used layout types:Note that this is not the primary layout of the page, but position: Absolute appears in 93% of the styles we analyzed. Similarly, display: Grid appears in 36% of page styles, but that doesn’t mean 37% of all pages are grid layouts, just that the combination appears somewhere in the stylesheet.

1. Flexbox and Grid layout

Here’s the Flexbox versus Grid layout on mobile:The use of Flexbox and Grid layouts continues to grow. In 2019, the Flexbox layout had a 41% adoption rate; In 2020, it was 63 percent. This year, Flexbox reached 71 percent on mobile and 73 percent on desktop. Meanwhile, Grid layout adoption rates are doubling every year, from 2% to 4% to 8% now.

2. Multi-column layout

Percentage of pages with a multi-column layout: 20%.

3. The number of border – box

Box-sizing: border-box

Transitions and animations

Animation is still widely used, with the animation property used on 77% of mobile pages and 73% of desktop pages. The Transition property is used on 85% of mobile pages and 90% of desktop pages.

The most commonly used transition attribute:Distribution of transition duration:Even at the 90th percentile, the median duration of the transition was only half a second.

Distribution of delayed transition:As you can see, the highest median transition delay is 1.7 seconds, and the 10th percentile has a median delay of approximately less than minus one-third of a second, indicating that a large number of transitions begin midway through the generated animation.

Distribution of transition timing functions:

The most common types of animation:

6. Responsive design

1. Media query function

The most common functions used for media queries are as follows:Max-width and min-width are by far the most popular query features.

2. Media query breakpoints

The most common media query breakpoint values are:By far the most common breakpoints are 767 and 768 px, which fits nicely with the iPad’s resolution in portrait mode. 767px is used heavily as a maximum width breakpoint and rarely as a minimum width value. 786px is often used as a minimum and maximum breakpoint.

3. Media query properties

Query the most frequently changed properties by media:The most commonly set properties are display, followed by color, width, and height.

7. Feature query

The use of feature queries (@supports) continues to grow. In 2019, 30% of pages were in use, compared to 39% in 2020. In 2021, nearly 48% of pages used feature queries to decide which CSS to apply in what context.

The basis distribution of the most commonly used feature queries is as follows:Sticky positioning is the most popular query basis, accounting for more than half of all feature queries.

Custom attributes

The changes in the use of custom attributes in 2019-2021 are as follows:This year, 28.6% of mobile pages and 28.3% of desktop pages defined custom properties (i.e., CSS variables). Furthermore, 35.2% of mobile pages and 35.6% of desktop pages contain at least one var() value.

1. The name

For naming custom attributes, the most commonly used custom attribute names are as follows:The most commonly used custom attributes are those that start with WP. These are all attributes in WordPress sites.

2. Usage

The most commonly used custom attributes are as follows:The distribution of custom attribute value types is as follows:

3. The complex

Custom attributes can contain other custom attributes:

: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 */
}
Copy the code

The depth distribution of custom attributes is as follows:The vast majority of custom attributes have zero value depth: they do not include the values of other custom attributes in their own values. Nearly a third have a depth level, and beyond that, there is almost no depth for two or more custom attribute values.

In addition, 60% of selectors using custom attribute values are set on the root element (using :root or HTML selectors) and about 5% are set on the element. The rest are applied to some descendant of the root element rather than . This means that about two-thirds of the custom attributes are used as what are actually global constants.

Nine, nationalization

There may be different writing forms for different languages, such as:

  • English characters are written from left to right;
  • Arabic, Hebrew and Urdu are all written from right to left,
  • Chinese, Mongolian and Japanese can be written from top to bottom.

Both HTML and CSS provide solutions to these complex situations.

Direction of 1.

You can use the DIRECTION property of CSS to enforce the direction of text. This attribute is used on 11% of the elements and 3% of the elements on the page. On pages that use CSS orientation, 92% of < HTML > elements and 82% of elements are set to LTR (left-to-right), and only 9% of pages have this property set to RTL (right-to-left).

2. Logical attributes

Another CSS feature useful for internationalization is the “logical” property. For example, margin-block-start, padding-inline-end, and text-align attributes start and end. These attributes and values are related to the direction of the text stream.

Here is the distribution of attribute types for logical attributes:Statistics show that only 4% of pages use logical attributes. Of those pages, about 33% use it to set text-align to start or end. Another 46% have logical margins and padding.

CSS in JS

Here is the distribution of csS-in-JS libraries in use:Statistics show that about 3% of all pages use CSS-in-JS. Styled Component accounts for more than half of the network.

11. Abbreviations

1. Shorthand properties

Some stylesheets use a mixture of the shorthand attribute background and the common attribute background-size. The most common common attributes that appear after the corresponding shorthand attribute are as follows:

2. background

As you can see, common background-related attributes are most commonly used. The following are the most commonly used background attributes:

3. The padding and margin

Here are the most common padding and margin attributes:

4. font

Here are the most commonly used font attributes:

5. Flexbox

Here are the most commonly used Flexbox-related attributes:

6. Grid

Here are the most commonly used Grid-related attributes:

Error types

Here are some common CSS errors.

1. Repeat the statement

Number of “declaration duplicates” – a rough estimate of the efficiency of a stylesheet by determining how many declarations use the same properties and values and how many declarations are unique within the page.

Here is the distribution of repeated declarations per page:

2. Non-existent properties

The most common non-existent attributes are as follows:

Preprocessor Sass

Sass is one of the most popular CSS preprocessors, and the most commonly used Sass function calls are as follows:You can see that 28% of Sass functions are for changing colors (e.g., Darken, Mix) and another 6% are for reading colors (e.g., alpha, Blue).

Here are the flow control constructs most commonly used in Sass:Here are the most commonly used rule nesting in Sass:One of the main advantages of Sass is the ability to nest rules within other rules to avoid writing repetitive selector patterns. Statistics show that 87% of Sass stylesheets use rule nesting.

This is the trend of CSS usage in 2021. Look forward to the development of CSS in the future

About this article:

Original text: almanac.httparchive.org/en/2021/css

By Eric A. Meyer and Shuvam Manna

Translator: CUGGZ