2022 is a very exciting year for CSS, with a large number of new features coming, some already arriving in browsers, and some likely to be widely supported in browsers in 2022. Here’s a look at some new CSS features to look forward to in 2022.
This article was first published on wechat public account: Front-end Charging Treasure
My wechat: CUG-gz
1. Container query
1. Basic concepts
Container queries, which allow us to style elements based on the size of their parent, are similar to @Media queries, except that they are judged by the size of the container rather than the size of the viewport. This has always been a problem with responsive design, because we sometimes want a component to adapt to its context.
2. Usage
For container queries, you need to specify an element as the container using the Container attribute (which is a contraction of container-type and container-name). Container-type can be width, height, inline-size, or block-size. Inline-size and block-size are logical attributes that may yield different results depending on the mode in which the document is written.
main.aside {
container: inline-size;
}
Copy the codeYou can use @Container in a manner similar to media queries. Note that the rules are expressed differently in parentheses (inline-size > 30em should be used in container queries instead of min-width: 30em). This is part of the Media Query Level 4 specification. When the container width is greater than 30rem, switch to flex layout:
@container (inline-size > 30em) {
.card {
display: flex; }}Copy the codeThe CSS Containment Level 3 specification is currently in a working draft, which means the syntax could change at any time.
3. Current status
Container queries are currently not available in mainstream browsers, so we can expect to see container queries implemented in browsers.
CSS Containment Module Level 3: www.w3.org/TR/css-cont…
(2) : from the ()
1. Basic concepts
:has() is often called a “parent selector.” This pseudo-class enables us to select an element based on its descendants. It has some very interesting use cases. For example, an image can be styled differently in
2. Usage
To style a
, do the following:
section:has(h2) {
background: lightgray;
}
Copy the codeWhen a parent
, set the style of ![]()
:
section:has(h2) img {
border: 5px solid lime;
}
Copy the code3 Current Status
No major browsers currently support this property, but it is available in the Safari Technical Preview.
Safari technical preview: developer.apple.com/safari/tech… CSS Selectors Level 4: www.w3.org/TR/selector…
Third, @ the when / @ the else
1. Basic concepts
@when/@else are conditional rules in CSS, similar to if/else logic in other programming languages. It makes writing complex media queries more logical. I chose to use @when instead of @if to avoid conflicts with Sass.
2. Usage
You can query multiple media conditions or supported features, such as whether the user’s viewport exceeds a certain width or whether the user’s browser supports subgrid.
@when media(min-width: 30em) and supports(display: subgrid) {
} @else{}Copy the code3. Current status
Modifying properties is not currently supported in browsers. It’s too early. It’s still under discussion. It’s not expected to be widely supported by browsers this year, but it’s certainly a very useful property to keep an eye on.
CSS Conditional Rules Module Level 5 (Official Specification) : www.w3.org/TR/css-cond…
Four, accent color
1. Basic concepts
The color-scheme attribute allows an element to indicate the color scheme it can easily render. Common choices for operating system color schemes are “light” and “dark,” or “day mode” and “night mode.” When the user selects one of the color schemes, the operating system adjusts the user interface. This includes use values for form controls, scrollbars, and CSS system colors.
2. Usage
Usage is simple, and the property is inheritable. So it can be set at the root level to apply it anywhere:
:root {
accent-color: lime;
}
Copy the codeCan be used on a single element:
form {
accent-color: lime;
}
input[type="checkbox"] {
accent-color: hotpink;
}
Copy the code3. Current status
Accent Color is currently supported in Chrome, Edge, Firefox, and Safari technical previews. Browsers that do not support this property will simply use the default color, and the input will be fully available.
CSS Basic User Interface Module Level 4: www.w3.org/TR/css-ui-4…
5. Color function
1. Basic concepts
We are probably already familiar with Hex, RGB, and HSL color formats. CSS Color Module Levels 4 and 5 include a whole new set of Color functions that enable you to specify and manipulate colors in CSS like never before. They include:
- HWB () : hue, whiteness, and blackness.
- Lab () : brightness and a and B values that determine the hue.
- LCH () : brightness, chroma, tone.
- Color-mix () : Mixes two colors together.
- Color-contrast () : From the color list, prints the color with the highest contrast compared to the first parameter.
- Color () : Specifies the colors in different color Spaces (for example, display-p3).
2. Usage
HWB (), lab(), and LCH () are used in much the same way as my RGB () and HSL () functions, each taking an optional alpha argument:
.my-element {
background-color: lch(80% 100 50);
}
.my-element {
background-color: lch(80% 100 50 / 0.5);
}
Copy the codeColor-mix () mixes the other two colors and outputs a color. We need to specify the color interpolation method as the first argument:
.my-element {
background-color: color-mix(in lch, blue, lime);
}
Copy the codeColor-contrast () requires a base color to compare other colors. It will output the color with the highest contrast, or, in the case of additional keywords, the first color in the output list that matches the corresponding contrast:
/* Outputs the highest contrast color */
.my-element {
color: white;
background-color: color-contrast(white vs, lightblue, lime, blue);
}
/* Outputs the first color with AA contrast */
.my-element {
color: white;
background-color: color-contrast(white vs, lightblue, lime, blue to AA);
}
Copy the code3. Current status
Safari currently leads the way in browser support, with HWB (), LCH (), lab(), color(), color-mix() and color-contrast() enabled through Flag since version 15. Firefox supports HWB () and has flagged support for color-mix() and color-contrast(). Surprisingly, Chrome doesn’t support these functions yet.
It is not difficult to provide style compatibility in code: given two color rules, if the browser does not support the second color rule, it will ignore the second color rule:
.my-element {
background-color: rgb(84.08% 0% 77.36%);
background-color: lch(50% 100 331);
}
Copy the codeThis way, when the browser supports the function, you can use it directly.
CSS Color Module Level 4 (official spec) : www.w3.org/TR/css-colo… CSS Color Module Level 5 (official spec) : www.w3.org/TR/css-colo…
Six, layers
1. Basic concepts
Cascading gives us more power to manage the “cascading” part of CSS. Currently, several factors determine which styles are applied to YOUR CSS code, including selector masses and the order in which they appear. Layering allows us to effectively group (or “layer”) CSS. Code in a lower order layer takes precedence over code in a higher level, even though the selector in a higher level has a higher weight.
2. Usage
Here’s a look at the basic use of layers:
/* Create layers in sequence */
@layer reset, base, theme;
/* Add CSS to each layer */
@layer reset {
}
@layer base {
h1.title {
font-size: 5rem; }}@layer theme {
h1 {
font-size: 3rem; }}Copy the codeThe CSS font size declaration in the Theme layer overrides the font size declaration in the base layer, although the latter selector has a higher weight.
3. Current status
Layering is already supported in the latest versions of Firefox and can be enabled in Chrome and Edge using Flag (it will be fully supported in Chrome 99). It seems that all major browsers are using this specification, so hopefully it will be widely supported soon.
CSS Cascading and Inheritance Level 5 (official spec) : www.w3.org/TR/css-casc…
Seven, subgrid
1. Basic concepts
As part of the CSS Grid Layout Module 2 specification, a subgrid allows an element to inherit its parent element’s Grid on a row or column axis. Subgrid is useful for solving various user interface challenges.
For example, take the caption image below. Headings vary in length, and subGrid allows you to align them without having to set a fixed height.
2. Usage
First set the parent element to grid layout and set the child element’s “grid-template-columns” or “grid-template-rows” property to subgrid:
.grid {
display: grid;
grid-template-columns: repeat(3.1fr);
grid-template-rows: repeat(2, auto);
}
.grid > figure {
display: grid;
grid-template-rows: subgrid;
}
.grid figcaption {
grid-row: 2;
}
Copy the codeEffect:
Complete code:
3. Current status
It’s worth noting that Firefox has supported subgrid since 2019, but nearly three years later no other browser has followed suit. There are signs that the Chromium team is already working on it, so it might be lucky to see it on Chrome and Edge this year.
CSS Grid Layout Module Level 2: www.w3.org/TR/css-grid…
Eight, @ scroll – timeline
1. Basic concepts
The @scroll-Timeline property defines an AnimationTimeline whose time value is determined by the scroll progress in the scroll container (not by the time). Once specified, @scrolltimeline is associated with the CSS animation by using the animation-timeline property.
2. Usage
Here’s a simple example:
/* Set keyframe animation */
@keyframes slide {
to { transform: translateX(calc(100vw - 2rem)); }}/* Configure scroll timeline, named slide-timeline */
@scroll-timeline slide-timeline {
source: auto;
orientation: vertical;
scroll-offsets: 0%.100%;
/* Specify keyframe animation and scroll timeline */
.animated-element {
animation: 1s linear forwards slide slide-timeline;
}
Copy the codeWe can also use eleme-based offsets for the scrolloffsets property to trigger timeline when a particular element scrolls into the view:
@scroll-timeline slide-timeline {
scroll-offsets: selector(#element) end 0.selector(#element) start 1;
}
Copy the code3. Current status
If you’re interested in @scrolltimeline, you can use Flag in Chrome to enable it. When we encounter a complex animation, we may need to use the JavaScript animation library, but for relatively simple animations, using this property can reduce unnecessary imports.
Scroll- Linked Animations (official guidelines) : drafts.csswg.org/scroll-anim…
Nine, nested
1. Basic concepts
If you’re familiar with Sass, you know the convenience of nested selectors. Essentially, you write child rules in the parent. Nesting can make writing CSS code much easier, and nesting is finally coming to native CSS!
2. Usage
Syntactically, it is similar to Sass. Let’s define a style rule for class for the h2 child of card:
.card {
color: red;
& h2 {
color: blue; }}Copy the codeIt can be used for pseudo-classes and pseudo-elements:
.link {
color: red;
&:hover,
&:focus {
color: blue; }}Copy the codeThis is equivalent to the following CSS code:
.link {
color: red;
}
.link:hover..link:focus {
color: blue;
}
Copy the code3. Current status
No browser currently supports nesting. If you use PostCSS, you can try nesting with the postCSS-preset -env plugin.
The CSS Nesting Module (official specification) : www.w3.org/TR/css-nest…
Ten,
CSS is booming now. While writing this article, I noticed that these new features have a few things in common, and they’re all meant to help us write better, cleaner, and more efficient code. Over time, pre-processing tools such as Sass may become less important. Let’s look forward to more CSS features.
By Michelle Barker
Translator: CUGGZ
Original: www.smashingmagazine.com/2022/03/new…