6 new features of CSS in 2022

Container Queries



introduce
The container query @container is similar to the media query @media, the difference is that the query is based on different objects. Media queries are based on the browser's viewport size, and container queries are based on the size of an element's parent or ancestor.
There are three attributes related to container query, namely container-type, container-name, and container.
container-type: Identifies a container to be queried, the value range is size, inline-size, block-size, style, state
container-name: the name of the container being queried
container: shorthand for container-type and container-name
Instructions
First, you need to use the container-type or container attribute to specify an element as the container to be queried. Then use @container for container queries.




When the width of the parent element is 200px, the background color is red.

When the width of the parent element increases to 400px, the @container query takes effect, and the background color of the text changes to green.

For details about the value and specific meaning of each attribute, you can refer to here
Browser Support

practice
Using the chrome browser, you need to manually turn on the Enable CSS Container Queries setting on the chrome://flags page.
https://code.juejin.cn/pen/7096467334268715021
Cascade Layers
introduce
Sometimes when we want to override the original style of the component to apply our custom style, we usually use the style name with higher priority to override (or ID selector or nested many layers), sometimes I have to apply !important again, which is easy to cause confusion in the style, which is not easy to manage.
The cascading layer was born to solve the above problems. It allows CSS styles to be displayed in the cascading order we defined, and plays a role in controlling the priority between different styles.
Instructions
A cascading layer can be defined via @layer. We define a cascade layer named A as follows.




When there are multiple cascading layers, we can name all the cascading layers first, and then add the rules one by one.
@layer A, B, C;

@layer A {
div {
background-color: red;
}
}

@layer B {
#app {
background-color: blue;
}
}

@layer C {
div {
background-color: green;
}
}

The priority order of multiple cascading layers is that the higher the priority is written later, so the cascading layer C has the highest priority, even if we use the ID selector in the cascading layer B. So in the end the div will display the green background color.

Browser Support

practice
https://code.juejin.cn/pen/7093816225150533640
Color Functions
CSS Color Module Level 5 adds two color-related functions: color-mix() and color-contrast(), and extends other previously existing color functions (such as rgb(), hsl(), hwb(), etc. ) related syntax.
Before we define a color, we need to explicitly specify the absolute color of each channel. The new specification allows us to first define a base color and then perform relative color transformations on top of it. for example:
--accent: lightseagreen;
--complement: hsl(from var(--accent) calc(h + 180deg) s l);

lightseagreen's hsl (177deg 70% 41%), so transformed hsl (357deg 70% 41%).
color-mix()
color-mix() can mix two colors into one in a given color space.
It receives 3 parameters, the first parameter is the specified interpolation method, and the second and third parameters are the color values ​​to be mixed.
color-mix(in lch, purple 50%, plum 50%)
color-mix(in lch, purple 50%, plum)

color-contrast()
color-contrast() is used to find the color with the highest contrast in the color list compared with the given color (usually the background color) and output it.
Syntactically, the basic color and color list that need to be compared are distinguished by the keyword vs. If there is a target contrast threshold setting, the keyword to is used to separate the color list. (The target contrast threshold is used to control the minimum range of contrast values, and if present, the first color output that exceeds this threshold will be selected, even if it is not the one with the highest contrast in the list.)
When calculating contrast, all colors are converted to the CIE XYZ color space. The final contrast ratio is then calculated by the following formula:
contrast = (Yl + 0.05) / (Yd + 0.05), where Yl is the lightness of the colors in the list, and Yd is the lightness of the base color

Example
Having talked about so many concepts, let's take an example:
color-contrast (wheat vs tan, sienna, #d2691e, darkgreen, maroon to AA-large)

The above code compares wheat with tan, sienna, #d2691e, darkgreen, maroon for contrast, and outputs the first color that exceeds AA-large (constant 3).
The specific comparison method is as follows:
wheat (#f5deb3), the background, has relative luminance 0.749
tan (#d2b48c) has relative luminance 0.482 and contrast ratio 1.501
sienna (#a0522d) has relative luminance 0.137 and contrast ratio 4.273
#d2691e has relative luminance 0.305 and contrast ratio 2.249
darkgreen (#006400) has relative luminance 0.091 and contrast ratio 5.662

It can be seen from the calculation that darkgreen is the color with the highest contrast, but we have a limit to AA-large, so sienna will be output, because sienna is the first to exceed AA-large (constant 3).
Browser Support


Pseudo-class selector: has()
introduce
The :has() selector can also be called a parent selector, and it accepts a selector group as a parameter. With it, we can apply some styles to parent classes that have matching child elements. E.g:
a:has(span) // will only match a elements that contain span children:

Browser Support

practice
Using the chrome browser, you need to manually enable the Experimental Web Platform features settings on the chrome://flags page.
https://code.juejin.cn/pen/7094638836466221069
accent-color
introduce
The accent-color property resets the color of a form component without changing the basic style of the browser's default form component. Currently supported HTML elements are:






Browser Support

practice
https://code.juejin.cn/pen/7085562391907270690
Media Query Ranges
introduce
Media queries are not a new concept, this time it is syntactically optimized. What was originally achieved by max-width and min-width can now be achieved by mathematical operators >= and <=. Compared with the original writing, the new syntax is easier to understand. For example, to achieve the style of the screen below 750px, it was necessary to apply @media (max-width: 750px), but now it can be written directly as @media (width <= 750px).
Similarly, the mathematical operators are also applicable to the container query @container described above.
Example
// original writing
@media (max-width: 750px) {

}
@media (min-width: 750px) {

}
@media (min-width: 375px) and (max-width: 750px) {

}
// new way of writing
@media (width <= 750px) {

}
@media (width >= 750px) {

}
@media (375px <= width <= 750px) {

}

Related Articles

Explore More Special Offers

  1. Short Message Service(SMS) & Mail Service

    50,000 email package starts as low as USD 1.99, 120 short messages start at only USD 1.00