On

Read this week about the CSS features introduced in State of CSS 2022.

Solve the !important problem of business code. Why does business code need to solve problems with !important? Because css priority is related to the order in which files are declared, and now a large number of businesses use the dynamic insertion of css scenarios, the timing of insertion is related to the js file load and execution time, which results in a fixed style priority.

@layer allows the business to define style priorities, and the lower the layer, the higher the priority, such as the following example, override defines the style priority higher than the framework:

Subgrid solves the problem that when the grid nests the grid, the position and track lines of the subgrid cannot be fully aligned to the parent grid. Just define the following in the subgrid style:

@container enables an element to respond to a specific container size. Before the @container came out, we could only respond to the overall size of the device with @media, and @container could limit it to a DOM container:

One usage scenario is that the style of an element within a different .container element can be different, depending on the style of the .container you are currently in.

Support hwb(hue, whiteness, blackness) definition colors:

The three parameters are indicated: angle [0-360], mixed into the white scale, mixed into the black ratio. Angles correspond to the positions of different angles in the color wheel, and each angle has its own color value, which is very suitable for intuitive color extraction from a certain position in the color wheel.

lch (lightness, chroma, hue), i.e. brightness, saturation, and hue, syntax such as:

chroma (saturation) refers to the vividness of the color, the higher the color, the more vibrant, the lower the color, the darker the color. hue refers to the color value of the swatch corresponding to the angle.

oklch (lightness, chroma, hue, alpha), i.e. brightness, saturation, hue and transparency.

More is not one by one, in short, the color expression is various, and they can also be converted to each other.

The css syntax supports the mix, similar to the mix() function of sass:

The first parameter is the color type, such as hwb, lch, lab, srgb, etc., the second parameter is to benchmark the color and percentage, and the third parameter is to mix the color.

Have the browser automatically adjust accessible colors in different backgrounds. In other words, white text is automatically used when the background is too deep, and black text is automatically used when the background is too shallow:

More parameters are also supported, see Manage Accessible Design System Themes With CSS Color-Contrast().

A value can be changed to some extent based on a syntax based on the syntax type:

As in the example above, we reduce the –color variable by 20% in the hsl color mode.

Gradient colors now also support declaring namespaces, such as:

This is to solve a problem called the gray dead zone, that is, if the gradient color passes through the saturation 0 area of the color wheel, a gray will appear in the middle, and after specifying a namespace such as hsl, you can bypass the gray dead zone.

Because hsl corresponds to the color wheel, the logic of the gradient is to go around the arc on the color pad, rather than directly through the center of the circle (the center of the circle is less saturated and appears gray).

The accent-color is mainly effective for the native input components of single selection, multi-select, and progress bar, and controls their accent color:

For example, after this setting, the background colors of single and multiple selections will change accordingly, and the horizontal bar and center color of the progress bar indicating the progress will also change.

inert is an attribute that makes doms and their child elements that own this attribute inaccessible, i.e. cannot be clicked, selected, or selected by shortcuts:

COLRv1 Fonts is a vector font scheme for custom colors and styles that is supported by browsers using the following:

In the example above we introduced vector font files and customized a color palette called colorized by @font-palette-values –colorized, which defines the first built-in color palette inherited by base-palette:0.

In addition to font-family, you also need to define font-palette to specify which color palette to use, such as –colorized as defined above.

In addition to vh, vw, etc., there are also differences between dvh, lvh, svh, mainly under mobile devices:

Can be used to represent a parent element with certain child elements:

Represents a .parent node that has those useful .child child nodes selected.

You can isolate a scoped style from the outside world and not inherit the external style:

As defined above, the style of the header element within .card is determined and will not be affected by the outside world. If we define a style with .card { header {} }, the global header {} style definition may still override it.

@nest proposal css has built-in support for nesting, just as postcss does:

@media adds prefers-reduced-data, which describes the user’s expectations for resource consumption, such as prefers-reduced-data: reduce means that the expectation is to consume only a small amount of network bandwidth, then we can hide all images and videos in this case:

It is also possible to reduce the image quality for the reduce situation, and the effect depends on the business.

Custom names are allowed for @media, and many custom @media are defined as follows:

We can then use it according to the custom name:

Previously, @media (min-width: 320px) could only be used to describe a width of not less than a certain value, but now it can be replaced by @media (width >= 320px).

@property allows extension of css variables, describing some modifiers:

The above example defines the variable x as a length type, so if a string type is incorrectly assigned, its initial-value will be inherited.

scroll-start allows you to define a container to start scrolling from a certain location:

:snapped This pseudo-class can select the element being responded to in the current scrolling container:

This feature is a bit like the IOS select control, swiping up and down and turning the element like a revolver, and finally staying on an element, the element is in the :snapped state. JS also supports two event types: snapchanging and snapchanged.

Only some built-in html elements have a :checked state,:toggle proposal that extends this state to every custom element:

The above example defines the button as the trigger of the lightswitch, and defines the css style when the lightswitch fires or does not fire, so that the switch between black and yellow faces can be achieved after clicking the button.

anchor() allows elements that do not have a parent-child relationship to be relative to each other, and more detailed usage can be found in CSS Anchored Positioning.

selectmenu allows any element to be added as an option for select:

More complex syntax is also supported, such as grouping drop-down content:

A large part of the new features of CSS 2022 is to expose the native capabilities of HTML and empower business customization, but if these states are completely implemented by the business, such as Antd