The New Year is about to begin! The completion of the article has begun!

Although CSS has changed a lot in recent years, I think 2021 is the first year of CSS. In the coming year of 2021, CSS will change very much, with many new features, such as CSS container query, CSS parent selector, CSS cascading control rules, CSS sub-grid and so on. These features are already available in a few, even in most major browsers.

The major browsers (Chrome, Firefox, Safari, and Edge) also focus on fixing browser compatibility pain points to make Web developers’ lives easier.

Browser compatibility fixes. The mid-year and year-end reports for 2021 were released on Web.dev, and while the reports are simple, we can see that browser vendors are working hard to smooth out CSS compatibility in browsers. For this, we should thank them for their efforts!

As 2021 draws to a close, let’s take a look at what CSS features we can expect to see in browsers in 2022. This is the third year in a row THAT I’ve compiled articles about new CSS features, the other two being:

  • What’s new in the CSS in 2020
  • Styles applied to the next generation Web
  • CSS features you may not know about in 2021

As you’ll see in 2022, you’ll see that the CSS features mentioned in these three articles are the same, but they also vary.

Review the development of CSS in the past two years

@Bramus posted a message on Twitter the other day, compiling a list of CSS that will appear in browsers in 2022:

For an introduction to the CSS listed In this list, read his article CSS In 2022.

This list of CSS features is similar to the ones @Adam Argyle shared in 2020 and 2021, except that in 2021, some CSS features are already supported by browsers. Some are already in the browser’s experimental properties list, and you may see them in 2022!

I also compiled a list of CSS features that @Adam Argyle shared in 2020 and 2021. The list is somewhat similar, but the content is still different. It mainly covers some of my own knowledge and attempts in CSS. What’s New in CSS in 2020, What you Might not Know about CSS in 2021, and Styles for the Next Generation of the Web

Of course, if you’re a fan of CSS and are constantly watching and pushing CSS forward, you probably already know that since 2019, there have been annual reports on the state of CSS development (2019, 2020 and 2021). In the annual report, we see a statistic on “CSS features developers expect” :

When the first report came out, I took some time to understand the report about CSS: “The Use of CSS Features from the CSS Status Report of 9102”. In addition, I was lucky to have a conversation about CSS status and learning with some college students at the end of 2020. If you’re interested in this topic, you can check out the state of CSS and How to Learn, with a video of the sharing!

In addition, the CSS Working Group of the W3C has published key reports on the CSS specification in both years, the latest of which are 2020 and 2021. Note that a W3C highlight report on the CSS specification doesn’t come out every year!

Next, I will follow the outline of CSS In 2022 by @Bramus and add some of my own understanding and opinions on this aspect.

I should add that the CSS features mentioned in the following sections only cover those that are new or still not supported by browsers (even experimental ones). But that doesn’t mean they’re not worth looking forward to, as soon as 2022! If you’re interested, keep reading!

Popular CSS features

The CSS features mentioned in this section are features that Web developers have been waiting for (or missing from) in recent years. These features will be available in major browsers sometime in 2022. Fortunately, some features are already supported in one or more major browsers, and others will follow over time. Learn or understand these CSS features in 2022 and I think you’ll reap the benefits!

Interestingly, CSSWG maintains a list of incomplete errors in CSS design. Those interested can read it here!

CSS Container Query

The CSS container query feature has long been one of the desired features of Web designers and developers, as can be seen in reports on the state of CSS development over the years. Before container queries, Web developers mostly relied on JavaScript scripts to make judgments that changed the UI grid.

Although CSS container queries have existed in the CSS Containment Module for some years, they have not been supported by browsers. Fortunately, in 2021, this feature took off and CSS container queries are now available in major browsers. All of this is thanks to @Terriblemia, who brought CSS to us and continues to push it forward.

TerribleMia designed the @layer and @scoped @ (At rule) rules in addition to the CSS container query feature. Read Miriam’s CSS Sandbox for details.

The CSS container query @Container is similar to the CSS media query @media, except that it will adjust the style rules of its own or its descendants based on the size or style of the element’s parent container (or ancestor element). In the absence of CSS container queries, Web developers mostly rely on media queries in order to adapt the UI to different containers. That is, with this feature, there is no need to rely on window size and adding class names to adjust the UI:

The figure above illustrates window-based design and container-based sizing. It can be said that CSS container query, in addition to changing the way Web developers develop, will also bring a revolution to Web design. This argument was shared by @una Kravets at The GDS Conference in 2021. The theme Web Design in a Component-Driven World (which can be accessed on YouTube) makes this point:

CSS container queries will become an essential feature of the next generation of responsive Web design.

With CSS container queries, we can adjust the UI at different sizes based on the same component, such as the search box at the top of our mobile APP:

Check out the video here

The key code for the above effect is as follows:

.form__container { container: inline-size; } .form { display: grid; align-items: center; } @container (min-width: 480px) { .form { grid-template-columns: min-content 1fr 200px; grid-template-areas: "searchIcon searchInput button"; grid-template-rows: 88px; gap: 10px; } } @container (min-width: 768px) { .form { grid-template-columns: min-content 1fr min-content 200px; grid-template-areas: "searchIcon searchInput cameraIcon button"; grid-template-rows: 88px; gap: 10px; }}Copy the code

The detailed code can be read or obtained here.

CSS container queries are available in all major browsers, but you need to turn on the markup. If you’re going to use it in a production environment, consider polyfills:

CSS container query is definitely a desirable feature, and it’s going full steam ahead in 2022!

For more information on CSS container queries, read the following articles:

  • Query the CSS container
  • In the container querycontainer 和 @container
  • The changes container queries bring to the design
  • Modern Web technology brings us one step closer to container queries

CSS parent selector:has()

CSS selector is the most basic knowledge of CSS, is also an essential part of, if you do not master the CSS selector, then you will have that kind of “in the world of CSS to find her thousands of times, suddenly look back, that person is in the lights dim” feeling! As a result, iterations of the CSS selector module are very fast and are now in Level 4.

In Level 4, several pseudo-class selectors were added, such as: IS (), : Where (), :not(), and :has(), among which the :has() selector was also a long-awaited one. @Sarasoueidan quoted @Jen Simmons on Twitter:

:has()Selectors are essentially the long-awaited parent selectors in CSS!

CSS’s :has() pseudo-class selector is similar to :not() and is also known as structural pseudo-class selector. It is also known as dynamic pseudo-class function in CSS functions. It allows you to match elements more finely:

The :has() pseudo-class represents an element if any selectors passed as arguments match at least one element!

Simply put, an element is selected only if the selector passed to :has() matches at least one element. This may seem confusing, but let’s look at a simple example:

figure img { 
    aspect-ratio: 21 / 9; 
    border: 5px solid #3f51b5; 
}

figure:has(figcaption) img { 
    border: 5px solid #9c27b0; 
}
Copy the code

The figure img selector in the example above, as you probably know, selects all elements in the

element; Figure :has(figcaption) The IMG selector selects all
elements in the

element that contains the
element. Note that :has() passes a Figcaption selector as its argument.
<! <img Alt ="" SRC ="" /> </figure> <! <img Alt ="" SRC ="" /> </figure>Copy the code

Here’s what you should see in supported browsers:

Note that Safari TP 137 is currently the only browser that supports the has() selector by default.

Although :has() is called the parent selector of CSS, it does much more than that. We can combine selectors like :has() and :not() to achieve some more complex effects.

As in the example above, when you enter a valid value in , the form has different UI effects in different states:

Isn’t that interesting? If you’re interested in CSS :has() selectors, you can also read what CSS selectors: Is () and: Where () and :has() do.

More on selectors:

  • Exploring CSS selector Level 4
  • Let’s talk about CSS property selectors
  • CSS pseudo-selectors::empty vs :blank
  • CSS3 selector: pseudo-class selector
  • CSS3 selector: Property selector
  • CSS3 selector: Basic selector

@layerControls the cascading layer of the CSS

Cascading CSS has long been a source of confusion and headache for developers, especially those unfamiliar with CSS. CSS’s new @ rule @ Layer will allow you to control the cascading order of CSS according to your intent. Simply put, @Layer lets you control the cascading ordering of same-origin rules in a hierarchical manner.

Take this example:

/* Specify the order of cascading layers and separate adjacent cascading layers with commas */ @layer setting, tool, generic, Element, object, Component, utilities; @layer setting {/* Append to CSS in cascading layer setting */} @layer tool {/* Append to CSS in cascading layer tool */} @layer generic {/* Append to cascading layer Generic CSS */} @layer Element {/* Attached to the cascading layer element CSS */} @layer object {/* Attached to the cascading layer object CSS */} @layer Component {/* Attached to the cascading layer CSS */} @layer Utilities {/* Attached to the cascading layer CSS */}Copy the code

The above only demonstrates a basic use of the @layer rule, but there are a lot of knowledge and details related to the @layer, which will not be further expanded here. If you’re interested in this feature, you can read a primer on CASCADING layers of CSS (@Layer).

So far, you can check it out in Chromium 99, Firefox 97 and Safari TP 133. Note that Safari was the first browser to support this feature.

For more on cascading in CSS, read:

  • Graphical CSS: CSS cascading and inheritance
  • Talk about cascading concepts in CSS
  • Manage CSS cascading
  • Web Layout: CSS positioning and cascading control

The color function

In CSS Color Module Level 5, there are two new functions for handling colors, color-mix() and color-contrast(). It also extends the function of previous color functions (such as RGB (), HSL (), HWB (), LAB () and LCH (), etc.), which can change the value of one or several parameters on the basis of a color to get a new color.

For example, the HSL () function in the figure above, We can change its saturation (from 50% to 30%) based on the –theme-primary color (assuming its value is HSL (274, 61%, 50%)) to get a new color HSL (274, 61%, 30%). This feature allows us to easily control the brand color palette in CSS:

As an aside, one of the main things I’ve been working on recently is applying Design Tokens to engineering links in front-end production and automatically generating different styles of UI components based on component variables. Then, one day, I could use this feature to build a palette for brand colors.

The new color-mix() and color-contrast() functions are somewhat more complex. The color-mix() function is a bit like a designer palette: it allows you to mix two colors in a given color space.

Such as:

:root {
    --theme-color: #ff0000;
}

.text-primary-dark {
    color: color-mix(var(--theme-primary), black 10%);
}

.text-primary-darker {
    color: color-mix(var(--theme-primary), black 20%);
}
Copy the code

The color-contrast() function is interesting, especially useful when building an accessible Web. Because it helps us improve Web accessibility (better control of the contrast between text colors and background colors). Its main function is to take a color value and compare it to a list of other colors, selecting the one with the highest contrast from the list.

For example, white-contrast (white vs red, white, green) is used to compare red, white, and green with white, respectively. Green and white have the highest contrast, and the final color is green:

You can also use color-contrast like this: Wheat vs tan, Sienna, #d2691e to Aa-large. It would compare Wheat to Tan, Sienna, and # D2691E, and the Sienna color won because it had a contrast of 4.273 with the Wheat color, above the AA-Large threshold.

HWB (), LCH (), lab(), color-mix(), and color-contrast() are default features in Safari TP 124!

In addition, the color space expressed by HWB (), LCH () and LAB () is different from RGB (), which can express the color more delicate. Take the HWB () function:

Colors based on 0DEG description of the same hue:

For more information on CSS colors, read:

  • Graphical CSS: CSS colors
  • A11Y 101: Color contrast and Web accessibility
  • usecolor-mod()Function to change color

The window unit

“Windows unit” for everyone should not feel strange, especially for mobile development students. Because the mobile terminal is now one of the mainstream adaptation is to use window units to deal with. But the Windows units most of you know are VW, VH, vmin, and vmax:

Windows units are a huge advantage for mobile development, but I think you’re also running into problems with Safari compatibility on iOS when using Windows units. Because Safari on iOS has a long-standing and extremely annoying Bug that doesn’t work well with VH units. If you set the height of a container to 100vh, this element will be a little too high (the scroll bar will appear). The main reason for this is that Safari on mobile ignores part of its user interface when calculating 100vh.

If you’re interested in the 100vh issues and solutions for Safari on iOS, you can also read:

  • The trick to viewport units on mobile
  • Does Safari 15 finally fix viewport height?
  • CSS fix for 100vh in mobile Webkit
  • A Bashfuul Button Worth $8 Million
  • 100vh in Safari on iOS

If you don’t want to spend too much time figuring out the problem, and just want to solve it quickly, you can put this code in your code snippet:

body { height: 100vh; } @supports (-webkit-touch-callout: none) { body { height: -webkit-fill-available; }}Copy the code

While this code is an elegant solution to the problem of 100vh in iOS Safari, it is still only a Hack (in fact, there is a lot of black magic in CSS, and this is not the main topic here, which is considered.)

Thankfully, CSS Values and Units Module Level 4 has several new windows-related Units:

  • svh/svw: Window height (height), width (width)1%
  • lvh/lvw: Large window height (height), width (width)1%
  • dvh/dwv: Dynamic window height (height), width (width)1%

There are also units for logical properties of CSS, such as SVI/SVB. For more details on these new Windows units, Read The Large, Small by @Bramus, And Dynamic Viewports and “Investigating the New CSS Viewport Relative Units” by @Arek Nawo.

Now that we’re talking about CSS units, it would be interesting to spend a little more time talking about some new CSS units. CSS Values and Units Module Level 4 added LH and RLH.

A quick reminder of another pair of units in CSS: EM and REM. Those of you who know a little about CSS know:

  • emIs relative to the element itselffont-sizeThe value evaluates (except for the element itselffont-sizeValues foremOf the element itselffont-sizeValue of the unit isemIs relative to its parent elementfont-sizeTerms)
  • remIs relative to the root element of the HTML documentfont-sizeValue calculation, the root element of the document generally refers to<html>The element

These two new lh and RLH are very similar to EM and REM, except that they are relative to the calculation of line-height:

  • lhRelative to the element itselfline-heightTo calculate
  • rlhRelative to the document root element (<html>)line-heightTo calculate

What is the use of such units, you may ask? I’m sure when you’re restoring your UI design, you’ll encounter elements that are visually inconsistent because of different fonts and line-height values. So, with LH and RLH, things will get a little better. Here’s a scenario like this:

We used to set the width and height to 1em for tags like the one above, so now we can set 1lh:

::marker {
    width: 1lh;
    height: 1lh;
}
Copy the code

So far, only Safari TP 105 claims to support the two relative units LH and RLH.

The CSS container query feature mentioned above has been a long-awaited feature for Web designers and developers, and will be rapidly evolving in 2021. The “* container query unit” that comes with the CSS container query feature is also meaningful and useful. However, CSS container query units are grouped with CSS container query modules, not with other CSS units.

CSS container query units are similar to window units, except that window units are computed relative to the browser window size, while container query units are computed relative to the query container. Stylesheets that use container query units of length make it easier to move a component from one query container to another. The CSS container can be queried in the following units:

  • cqwIs equal to the query container width (width)1%
  • cqh: is equal to the query container height (height)1%
  • cqi: is equal to the query container inline size (inline-size)1%
  • cqb: equal to the query container block size (block-size)1%
  • cqmin 是 cqi 或 cqbThe smaller of the twocqw 或 cqhThe smaller one)
  • cqmaxiscqi 或 cqbThe larger of the twocqw 或 cqhThe larger one)

Earlier container queries defined units like C * (for example, CW, CH, Cmin, and cmax), but some of these units conflicted with ch, so the final container query unit started with Cq *. The ones listed above!

As shared by @Miriam Suzanne (the original proposer and editor of the specification), these CSS units are part of the experimental container query support in Chromium.

More interestingly, in his article CSS Container Query Units, @Ahmad Shadeed proposed qW, qh, Qmin, qmax and their corresponding logical attribute Units qi and QB.

@Ahmad Shadeed uses these new CSS units for font size. A trove of CSS code that can be used for container queries, replaced by CQW units in clamp() comparison functions.

Excessive scrolling behavior:overscroll-behavior

In 2018, WE introduced the overscroll behavior property when we talked about changing the scrolling experience. By using this property, we can override the default behavior of the Overscroll container. Take a specific example, for example, when we are building a pop-up, the content of the pop-up is too high, and the scroll bar will also appear. At this time, there will be two scroll bars, one for the pop-up and one for the body, and its default behavior will be like the following screen recording effect:

Click here to see the video

When the popbox cannot scroll, the content at the bottom of the popbox can continue to scroll. To be honest, this default scrolling behavior is a terrible experience for users. More often than not, we want the bottom scroll bar to not scroll when the popup doesn’t scroll. As follows:

Click here to see the video

To contain the above video, we need to use the overscroll behavior property and set it to contain:

.modal {
    overscroll-behavior-y: contain;
    overflow-y: auto;
}
Copy the code

This feature has been supported since Firefox 36 and Chrome 63, but Safari is not yet supported, although Safari is catching up.

For an introduction to overscroll Behavior, read Prevent Scroll Chaining With Overscroll Behavior by @Ahmad Shadeed.

In addition to the overscrollbehavior property, other properties such as scroll capture scrollsnap (properties in the Scroll Snap module) and pull-to-refresh can be used to improve scrolling experience in the CSS.

In addition to controlling scrolling behavior, CSS can also control the style of the scroll bar. Until this year, CSS controlled scrollbar styles using some proprietary browser properties:

The CSS Scrollbars Styling Module Level 1 specification was released by the W3C on 09 December 2021. The SPECIFICATION provides scrollbar-color and scrollbar-width attributes. Used to style the scroll bar. In the future, we’ll use them to easily customize scrollbar styles:

.section {
    scrollbar-color: #6969dd #e0e0e0;
    scrollbar-width: thin;
}
Copy the code

I think we all know that one of the main reasons for using CSS to beautify scrollbars is because scrollbars look different and look different on different platforms. But there is another problem. A side effect of displaying scrollbars on the Web is that the layout of the content can change depending on the type of scrollbar. If we want to prevent unnecessary layout changes caused by scrollbars, we want CSS properties to handle them.

We didn’t before, but now we do. CSS Overflow Module Level 4 added a new scrollbar-gutter property. With this property, developers can now control the gutter property of the scrollbar or resolve layout variations depending on the scrollbar type. Here’s what would happen if you had different values for scrollbar-gutter:

If you’re interested in decorating the scrollbar and gutter, read:

  • Custom Scrollbars In CSS
  • Prevent unwanted Layout Shifts caused by Scrollbars with the scrollbar-gutter CSS property

CSS gridsubgrid

As good as Flexbox is in terms of Web layouts, it has a lot of limitations when it comes to two-dimensional layouts. In the whole technical system of Web layout, only CSS Grid is the only two-dimensional layout.

CSS Grd layouts have been advancing over the years and are now supported by major browsers. In addition to the browser developer teams, I personally have @Jen Simmons and @Rachel Andrew to thank for moving the CSS Grid forward so quickly.

In addition to being the creator of the CSS Grid specification and CSS Grid evangelist, @Jen Simmons and @Rachel Andrew have been working hard in the community to move the Grid forward.

The CSS Grid has been around for years, and many of the features in this module are supported in major browsers. In 2021, I have spent nearly half a year to systematically study CSS Grid technology, and sorted out more than 20 series of tutorials on CSS Grid. In this series, in addition to the theoretical knowledge of CSS Grid, there are also some practical cases. If you’re interested in this, you can check out the article “Don’t Miss CSS Grid Layouts in 2022.”

There is a reason why the subgrid of the CSS grid is singled out. Subgrids have undergone many versions of evolution from their definition to today, and they are also controversial in the CSS community. After the emergence of CSS Grid, it was proposed that:

CSS grid layout system should have a sub-grid, namely subgrid

For this reason, the earliest subgrid definition, like grid and inline-grid, is simply a value of the display property:

.subgrid {
    display: subgrid;
}
Copy the code

Within a few years, the subgrid was removed from the display property. Use nested grids to simulate sub-grids:

.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.grid__item {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
Copy the code

Simply put, you can redefine a grid again using display: Grid and grid-related properties on grid projects that need to nest grids. However, there is a problem with this approach: it is difficult to align nested grid items with the parent grid. In other words, the parent grid and the nested grid are two independent grids with their own independent grid parameters.

In order to enable the sub-grid to continue the related parameters of the parent Grid, the subgrid is introduced into the CSS Grid system again, but the subgrid is no longer the value of display. It is the value of the grid property grid-template-columns or grid-template-rows.

.grid__container { 
    display: grid; 
    grid-template-columns: 1fr 2fr 3fr 2fr 1fr; 
    grid-template-rows: 1fr 2fr 2fr 1fr; gap: 1rem; 
} 

.grid__container--subgrid { 
    grid-column: 2 / 5; 
    grid-row: 2 / 4; 
} 

.grid__container--subgrid { 
    display: inherit; 
    grid-template-columns: subgrid; 
    grid-template-rows: subgrid; 
}
Copy the code

As shown in the figure above, this is what the subgrid is for: by setting grid-template-columns or grid-template-rows as the subgrid, it will be aligned with the parent grid. A true subgrid can use the parameters of the parent grid. In short, using this feature, you can easily achieve a card layout like the one below:

There was also a time when another suggestion was to use display: Contents instead of subgrid. As of today, in grid layout systems, nested grids, sub-grids, and display: contents simulation sub-grids all exist at the same time. They all have their own characteristics. I won’t spend too much time here.

Subgrid has become an integral feature of the CSS Grid module, and as of today (the last day of 2012) is only supported by Firefox. However, Chrome has entered the WIP phase, and I think you’ll be able to experience subgrid in Chrome in the first half of 2022.

Since CSS Grid is mentioned, let’s mention the GAP property of CSS. This property is not unique to Grid layouts. The GAP property is found in CSS Flexbox, Grid, and multi-column layouts. In layout, in some scenes, it is much easier to set spacing between adjacent elements than margins.

According to a tweet from @Jen Simmons, Safari 14.1 also supports gap in Flexbox. I tested myself and gap in the Grid is supported. This is not to say that all major browsers now support the gap attribute:

accent-color

There are many controls on the Web whose UI effects follow the system. For example, some controls in the form, such as the common input box (), radio button, check box, progress bar, etc.

In the past, in order to meet the needs of designers in the style of the UI, the use of a consistent style of UI on all platforms. To do this, Web developers need to add additional development effort and use custom form controls to unify the UI grid.

CSS Basic User Interface Module Level 4 has added the accent color attribute to help developers better meet the needs of designers and quickly unify the UI grid for various platforms. Widget Accent UI can be easily controlled:

:root { accent-color: deeppink; } @media (prefers-color-scheme: dark) { :root { accent-color: hsl(328 100% 65%); }}Copy the code

Since we’re talking about controls in Web forms, I’ll mention two attributes for the element. Because these two attributes give your users a better experience, especially when working with forms. In addition to providing different keyboard types when specifying different values for the type of the element, you can also use the inputMode attribute:

Inputmode can invoke different types of soft keys. Another way to improve the user experience is to set different values for the enterKeyHint attribute of the element, which can change the behavior of the type of the Enter key in the soft key:

The attributes mentioned above, whether CSS or HTML, are used to change the user experience. One more htML-related attribute.

Since Safari 15, we’ve set the theme color in the HTML
tag to give the developer control over the browser’s own UI color:

In particular, theme-color is not a CSS attribute, it is the name value of the HTML
element. Combining content and media can easily control system level color.

Seems off topic! We’re talking about CSS in 2022! Well! Let’s go back to the world of CSS.

Media queries

CSS media query @media is not a new feature (apart from the addition of some user preference criteria). But today we’re going to talk about how he wrote the rules of grammar. Here’s a picture:

In the past, @media and @container rules used min-width and max-width when writing judgment conditions. When using min-width and max-width, you can’t tell the range between them. To this end, I always like to use the following figure as a judgment:

As of CSS Media Queries Level 4, we can now use familiar mathematical expressions, such as >, >=, <, or <= in Media conditions:

The @media syntax in the figure above would look something like this:

/* Old Way */ @media (max-width: 768px) {... } @media (min-width: 375px) {... } @media (min-width: 375px) and (max-width: 768px) { ... } /* New Way */ @media (width <= 768px) {... } @media (width >= 375px) {... } @media (375px <= width <= 768px) { ... }Copy the code

Similarly, mathematical comparison operator expressions can be used to determine the conditions of @container queries.

If you are interested in learning about media queries, you can also read:

  • Graphic CSS: CSS media query
  • New CSS media query feature
  • Things like system preferences

F-mods

F-mods is short for Font Metrics Override Descriptors. It corresponds to section 11 of the @font-face section of the CSS Fonts Module Level 4 specification, which is the default font metric override. To put it simply, the @font-face rule adds ascent- Override, Descent – Override, line-gap-override and advance- Override attributes:

@font-face { 
    font-family: 'Arial' src: local('Arial'); 
    --unitsPerEm: 1000; 
    --lineGap: 10; 
    --descender: -237; 
    --ascender: 1041; 
    --advanceWidthMax: 815; 
    ascent-override: calc(var(--ascender) / var(--unitsPerEm) * 100%); 
    descent-override: calc(var(--descender) / var(--unitsPerEm) * 100%); 
    line-gap-override: calc(var(--lineGap) / var(--unitsPerEm) * 100%); 
    advance-override: calc(var(--advanceWidthMax) / var(--unitsPerEm)); 
}
Copy the code

Among them, advanced-Override has not yet entered the W3C specification and is only in the proposal at present. The ascent- Override, Descent – Override and line-gap-override attributes are currently implemented in Chromium 87+ and Firefox 89+!

The combination of these four descriptors allows us to tell the browser how much space the characters take up before downloading the Web Fonts to override the layout of the fallback font (system font) to match the Web Fonts. Simply put: These four descriptors make your system Fonts more like Web Fonts!

The ascent- Override, Descent – Override and line-gap-Override descriptors allow us to completely eliminate vertical layout offsets because all three descriptors affect row heights.

In the CSS Fonts Module Level 5 specification, several new attributes have been added for the @font-face rule. For instance, Superscript-position-override, subscript-position-override, superscript-size-override and superscript-position-override are used to override font superscripts (sup) and subscripts (sub) Subscript-size-override descriptor. While these attributes are not yet supported by any browser, they are the hope for Web developers.

In addition, the size-adjust descriptor has been added, which allows us to adjust the proportion factor (percentage) of the glyphs. This descriptor replaces the advance- Override descriptor mentioned earlier. As @Addy Osmani wrote on his own Twitter account, size-adjust:

Size-adjust is already supported by Chromium 92+ and Firefox 89+.

Speaking of @font-face, it’s worth mentioning another CSS feature you’ve been waiting for: leading-trim:

Leading-trim is used to change text layout.

In lead printing, to give some space between the blocks of type (in rows), the typesetter would put strips of lead between the lines to make reading more comfortable. At that time, pot strips were usually placed under the lead. Similarly, there is lead in Web layout, but it has two parts: top and bottom. Introduced in CSS, it works like a text box clipper. Remove the extra space between the top and bottom of the text box (this space is actually half the height of the lead bar) :

h1 { 
    text-edge: cap alphabetic; 
    leading-trim: both; 
}
Copy the code

The example uses the text-edge attribute, which is briefly described as follows:

When developing the Web, typography is more complex and involves more CSS knowledge. If you are interested, you can read the following articles:

  • Optimization of Web Fonts: Web Fonts vs. System Fonts
  • Optimization of Web Fonts: FOUT, FOIT and FOFT
  • Optimization of Web Fonts: Web Fonts loading strategy
  • Optimization of Web Fonts: F-MOds
  • In-depth understanding of CSS font metrics, line height andvertical-align
  • Font variantsfont-variation-*
  • Graphical CSS: Variable fonts
  • CSSleading-trimChanges to the layout

Next Generation CSS Transform

This is similar to the CSS media query mentioned earlier. The CSS Transform Level 2 specification turns the rotate(), scale(), and translate() functions that used the Transform property into separate CSS properties. And they’ve all become experimental properties in major browsers, so you can experience them in the browser.

element {
    scale: 2;
    rotate: 30deg;
    translate: -50% -50%;
}
Copy the code

The Translate, rotate, and Scale properties allow developers to specify simple transformations independently, in a manner consistent with typical user interface use, without having to remember the order in which the transformations are performed. Keep the actions of transform(), rotate(), and scale() independent and active in screen coordinates.

The order in which they are applied, first by translation, then by rotation, then by scaling, is not the order in which you define them. Having separate transform properties also means we can animate and transition them separately.

@keyframes individual {
    50% {
        translate: 0 50%;
    }
    75% {
        scale: 1;
    }
}

element {
    transition:  rotate 200ms ease-in-out, scale 500ms linear;
}

element:hover {
    scale: 2;
    rotate: -3deg;
}
Copy the code

A more detailed introduction to this can be read:

  • Transform of the next generation CSS
  • CSS3 3D Transform
  • CSS3 2D Transform

Experimental attribute

The CSS features mentioned below are experimental in some browsers and will not be supported by most browsers, or they may only be visible if the experimental markup is turned on in the appropriate browser. These features may not be supported by all major browsers in 2022, or even a year or two from now. Except that it won’t be supported by browsers, and the specifications are subject to change. Maybe even removed from CSS!

CSS nested

This picture looks familiar, right? But it’s not nested in SCSS, it’s nested in native CSS. This is a breakthrough addition to CSS, as well as a continuation of CSS custom properties (CSS variables). In the past, such rules could only be run in CSS processors.

In nested modules of CSS, we can use & and @nest rules to nest a block of style rules within another block of style rules:

table.colortable { & td { text-align: center; &.c { text-transform: uppercase } &:first-child, &:first-child + td { border: 1px solid black } } & th { text-align: center; background: black; color: white; } @nest footer & {font-size: 0.8em; }}Copy the code

For more on native nesting of CSS, see The article Illustration CSS: CSS Nesting.

CSS scope:@scope

CSS Cascading and Inheritance Level 5 introduced the @Layer rule, and Level 6 will introduce another rule, @Scope. This is a way to extend the style scope to the DOM tree.

<! -- HTML --> <div class="dark-theme"> <a href="#">plum</a> <div class="light-theme"> <a href="#">also plum??? </a> </div> </div> /* When. Light-theme and. Dark-theme are nested, you may not get the expected result */. Light-theme a {color: purple; } .dark-theme a { color: plum; } /* We can solve this problem by scoping, because the style of a element will be determined by its nearest scope */ @scope (.light-scheme) {a {color: darkmagenta; } } @scope (.dark-scheme) { a { color: plum; }}Copy the code

@when ... @else

@when … Else is a new feature in CSS Conditional Rules Module Level 5. They can be used separately or together.

@when media(width >= 400px) and media(pointer: fine) and supports(display: flex) {
    /* A */
} @else supports(caret-color: pink) and supports(background: double-rainbow()) {
    /* B */
} @else {
    /* C */
}
Copy the code

@Stefan Judis put this CSS feature (@when… Else) has the aforementioned CSS feature, which combines mathematical expressions for CSS container queries and media queries, Redesigned the Conditional rounded corners mentioned In @Ahmad Shadeed’s Conditional Border Radius In CSS article:

Stefan Judis:

There are other options for conditionally rounding radii besides the ones mentioned here. If you want to check them out, you can read conditional rounding Techniques in CSS just a few days ago.

Scrolling and animation

Scrolling and animation in this context refer to the @scroll-timeline rule and animation-Timeline attribute provided in the Scroll-Linked Animations module. You can associate CSS animations with the scroll offset of a scroll container. As you scroll up or down a container, the linked animations will move forward or backward accordingly.

For example:

Click here to see the video

Using the @scrolltimeline rule and animation-timeline to create a similar effect, follow the following three steps:

/* (1) Define Keyframes */
@keyframes adjust-progressbar {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}

/* (2) Define a ScrollTimeline */
@scroll-timeline scroll-in-document {
    source: auto;
    orientation: block;
    scroll-offsets: 0, 100%;
}

/* (3) Attach the Animation + set the ScrollTimeline as the driver for the Animation */
#progressbar {
    animation: 1s linear forwards adjust-progressbar;
    animation-timeline: scroll-in-document;
}
Copy the code

For a more detailed introduction to this topic, read this series of tutorials from @Bramus:

  • Part 1: Introduction + Basic Scroll-Linked Animations
  • Part 2: Scroll-Linked Animations with Element-based offsets
  • Part 3: Practical Use-Cases
  • Part 4: Scroll-Linked Animations With the Web Animations API (WAAPI)

CSS Houdini variable:@property

@property is used to register a variable, which is a variable in THE CSS Houdini, but it is used the same way as a custom property in the CSS (CSS variables).

// Chrome 78+ // need to register CSS in JavaScript script. RegisterProperty ({'name': '--custom-property-name', 'syntax': '<color>', 'initialValue': 'black', 'inherits': False}) // Chrome 85+ // register @property --custom-property-name {'syntax': '<color>', 'initialValue': 'black', 'inherits': false }Copy the code

One of its best features is the ability to specify the type, initial value, and inheritance of registered CSS variables:

Although it is used in a similar way to CSS custom properties, it is more powerful, especially in the use of dynamic effects, can enhance the dynamic effects of CSS, and even achieve some of the previous CSS can not achieve dynamic effects. Such as

@property --milliseconds { syntax: '<integer>'; initial-value: 0; inherits: false; } .counter { counter-reset: ms var(--milliseconds); animation: count 1s steps(100) infinite; } @keyframes count { to { --milliseconds: 100; }}Copy the code

Click here to see the video

Combine it with the CSS Houdini Paint API to do even more:

More of this direction can be found at houdin.How:

The @Property and Paint APIS in CSS Houdini are extensions to current CSS capabilities. If you’re interested, read:

  • CSS Houdini User-defined properties@propertyExtension to dynamic effects
  • CSS Houdini: @propertyRegister custom properties
  • CSS Houdini: In-depth understanding of CSS custom properties
  • The CSS Paint API is bringing new light to CSS extensions
  • CSS Paint API

Waterfall flow layout

Waterfall flow is one of the classic layouts on the Web. So far, the waterfall flow layout is still implemented by JavaScript as the main technical scheme. Although CSS technology can be used to complete the waterfall flow layout under certain conditions, it has great limitations.

The CSS Grid provides a native CSS waterfall layout scheme in the latest module:

.masonry { 
    display: grid; gap: 20px; 
    grid: masonry / repeat(auto-fill, minmax(250px, 1fr)); 
}
Copy the code

So far it has been an experimental property in Firefox and I don’t see it in other browsers yet, but I expect to see cascading layouts implemented by CSS Grid on all major browsers sometime in 2022.

summary

Some of the CSS features listed above (and new syntax as well), and exactly what will be in browsers by 2022 are unknown. Some of the features mentioned above are already available in one or more browsers. Those who are interested can try it out for themselves. In addition, I would like to mention that the CSS property list above comes from the community, industry experts and my own accumulation and opinions, if there is any wrong, welcome to discuss. If there is anything missing from the list, please share it with us.

Finally, hopefully this has helped you learn some new things about CSS and open up some uncharted territory! Thank you very much! (^_^)