Intensive reading of "State of CSS 2022"

Read about CSS features introduced at State of CSS 2022 this week.

Overview

Features already supported in 2022

@layer

Fix the !important issue with business code. Why does business code need to use !important to solve problems? Because the CSS priority is related to the file declaration order, and now a large number of businesses use the scheme of dynamically inserting CSS, the timing of insertion is related to the loading and execution time of the JS file, which leads to the unfixed style priority.

@layer Allows business to define style priority, the higher the layer, the higher the priority, such as the following example, override The defined style has a higher priority than framework :

 @layer framework, override;

@layer override {
  .title {
    color: white;
  }
}

@layer framework {
  .title {
    color: red;
  }
}

subgrid

subgrid solves the problem that the position and track lines of the subgrid cannot be completely aligned with the parent grid when the grid is nested. Just do the following definition in the subgrid style:

 .sub-grid {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

@container

@container enables the element to respond to a specific container size. Before @container came out, we could only use @media to respond to the overall size of the device, while @container can limit the response to a DOM container:

 // 将 .container 容器的 container-name 设置为 abc
.container {
  container-name: abc;
}

 // 根据 abc 容器大小做出响应
@container abc (max-width: 200px) {
  .text {
    font-size: 14px;
  }
}

A usage scenario is that the styles of elements within different .container elements can be different, depending on the current style of .container .

hwb

Support hwb (hue, whiteness, blackness) Define color:

 .text {
  color: hwb(30deg 0% 20%);
}

The three parameters represent: the angle [0-360], the proportion of white mixed, and the proportion of black mixed. The angles correspond to different angles of the color wheel, and each angle has its own color value. This function is very suitable for intuitively picking colors from a certain position on the color wheel.

lch, oklch, lab, oklab, display-p3 etc.

lch (lightness, chroma, hue), namely brightness, saturation and hue, syntax such as:

 .text {
  color: lch(50%, 100, 100deg);
}

chroma (saturation) refers to the vividness of the color, the higher the color, the brighter the color, and the lower the color, the duller the color. hue (hue) refers to the color value of the corresponding angle of the swatch.

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

 .text {
  color: oklch(59.69% 0.156 49.77 / 0.5);
}

More will not be enumerated one by one, in short, there are various ways of expressing colors, and they can also be converted to each other.

color-mix()

The mix supported by CSS syntax is similar to the mix() function of sass:

 .text {
  color: color-mix(in srgb, #34c9eb 10%, white);
}

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

color-contrast()

Let the browser automatically adjust accessible colors on different backgrounds. In other words, white text is automatically used when the background is too dark, and black text is automatically used when the background is too light:

 .text {
  color: color-contrast(black);
}

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

Relative color syntax

Depending on the grammar type, a value can be changed to a certain extent based on a grammar:

 .text {
  color: hsl(from var(--color) h s calc(l - 20%));
}

As in the above example, we will --color this variable in hsl color mode, reduce its l(lightness) brightness by 20%.

gradient namespace

Now gradient colors also support namespace declaration, for example:

 .text {
  background-image: linear-gradient(to right in hsl, black, white);
}

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

Because hsl corresponds to the color wheel, the logic of the gradient is to detour along the arc direction on the color wheel, rather than directly passing through the center of the circle (the center of the circle has low saturation and will appear gray).

accent-color

accent-color mainly takes effect on native input components such as single-selection, multiple-selection, and progress bar, and controls their theme color:

 body {
  accent-color: red;
}

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

inert

inert is an attribute that can make the dom with this attribute and its child elements inaccessible, that is, cannot be clicked, selected, or selected by shortcut keys:

 <div inert>...</div>

COLRv1 Fonts

COLRv1 Fonts is a vector font scheme with custom colors and styles. The browser supports this function. The usage is as follows:

 @import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);

@font-palette-values --colorized {
  font-family: "Bungee Spice";
  base-palette: 0;
  override-colors: 0 hotpink, 1 cyan, 2 white;
}

.spicy {
  font-family: "Bungee Spice";
  font-palette: --colorized;
}

In the above example, we import the vector font file and customize a palette called colorized through @font-palette-values --colorized base-palette: 0 , which is defined by ---784307082480701e8a9d0341f7694139--- It inherits the first built-in palette.

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

Viewport Units

除了vh 、 vw等，还提供了dvh 、 lvh 、 svh ，主要是在移动设备The difference below:

dvh : dynamic vh, indicates the content height, and will automatically ignore the browser navigation bar height.
lvh : large vh, maximum height, including browser navigation bar height.
svh : small vh, minimum height, excluding browser navigation bar height.

:has()

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

 .parent:has(.child) {
}

Indicates that those useful .child child nodes .parent node are selected.

Upcoming features

@scope

A scoped style can be isolated from the outside world and will not inherit external styles:

 @scope (.card) {
  header {
    color: var(--text);
  }
}

After the above definition, the element style of .card header is determined and will not be affected by the outside world. If we use .card { header {} } to define the style, the global header {} style definition may still override it.

style nesting

CSS has built-in support for nesting when @nest proposed, just like postcss does:

 .parent {
  &:hover {
    // ...
  }
}

prefers-reduced-data

@media added prefers-reduced-data to describe the user's expectation of resource usage, such as prefers-reduced-data: reduce means that it expects to occupy only a small amount of network bandwidth, then we can hide all pictures and video:

 @media (prefers-reduced-data: reduce) {
  picture,
  video {
    display: none;
  }
}

You can also reduce the image quality for the reduce situation, and how much effect to compress depends on the business.

custom media name

Allows custom names for @media, many custom @media are defined as follows:

 @custom-media --OSdark (prefers-color-scheme: dark);
@custom-media --OSlight (prefers-color-scheme: light);

@custom-media --pointer (hover) and (pointer: coarse);
@custom-media --mouse (hover) and (pointer: fine);

@custom-media --xxs-and-above (width >= 240px);
@custom-media --xxs-and-below (width <= 240px);

We can use it according to the custom name:

 @media (--OSdark) {
  :root {
    …
  }
}

media range description supports expressions

In the past, only @media (min-width: 320px) could be used to describe the width of not less than a certain value, but now @media (width >= 320px) can be used instead.

@property

@property allows to expand css variables, describing some modifiers:

 @property --x {
  syntax: "<length>";
  initial-value: 0px;
  inherits: false;
}

The above example defines the variable x as the length type, so if the string type is wrongly assigned, it will continue to use its initial-value .

scroll-start

scroll-start Allows to define a container to start scrolling from a certain position:

 .snap-scroll-y {
  scroll-start-y: var(--nav-height);
}

:snapped

The :snapped pseudo-class can select the element that is being responded to in the current scroll container:

 .card:snapped {
  --shadow-distance: 30px;
}

This feature is a bit like the IOS select control. After sliding up and down, it rotates the element like a revolver, and finally stays on an element. This element is in the :snapped state. At the same time, JS also supports snapchanging and snapchanged two event types.

:toggle()

Only some built-in html elements have :checked state, :toggle The proposal is to use it to extend this state to every custom element:

 button {
  toggle-trigger: lightswitch;
}

button::before {
  content: "🌚 ";
}
html:toggle(lightswitch) button::before {
  content: "🌝 ";
}

The above example defines button lightswitch as the trigger of ---3d88dd3b1411443d66a37600afc8240f---, and defines the css style when the button is clicked when lightswitch is triggered or not. , switch between black face and yellow face.

anchor()

Anchor() can establish a relative position relationship between elements without parent-child relationship. For more detailed usage, see CSS Anchored Positioning .

selectmenu

selectmenu allows adding any element as a select option:

 <selectmenu>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</selectmenu>

More complex syntax is also supported, such as grouping dropdown content:

 <selectmenu class="my-custom-select">
  <div slot="button">
    <span class="label">Choose a plant</span>
    <span behavior="selected-value" slot="selected-value"></span>
    <button behavior="button"></button>
  </div>
  <div slot="listbox">
    <div popup behavior="listbox">
      <div class="section">
        <h3>Flowers</h3>
        <option>Rose</option>
        <option>Lily</option>
        <option>Orchid</option>
        <option>Tulip</option>
      </div>
      <div class="section">
        <h3>Trees</h3>
        <option>Weeping willow</option>
        <option>Dragon tree</option>
        <option>Giant sequoia</option>
      </div>
    </div>
  </div>
</selectmenu>

Summarize

A large part of the new features of CSS 2022 is to expose the native HTML capabilities and enable business customization. However, if these states are completely realized by the business, such as Antd <Select> components have already implemented custom drop-down options and styles , since HTML does not provide customization capabilities, it is implemented by DIV + JS simulation according to its interaction, and the customization space is larger.

But there are also many capabilities that rely on browser implementation, or are more suitable for implementation on the CSS side, such as @scope, subgrid, and color processing.

The discussion address is: Intensive Reading "State of CSS 2022" Issue #442 dt-fe/weekly

If you'd like to join the discussion, click here , there are new topics every week, with a weekend or Monday release. Front-end intensive reading - help you filter reliable content.

Follow Front-end Intensive Reading WeChat Official Account

Copyright notice: Free to reprint - non-commercial - non-derivative - keep attribution ( Creative Commons 3.0 license )