2022 年に知っておくべきいくつかの新しい CSS 機能 (収集して学習)

この記事では、2022 年に期待する価値があり見逃せない CSS の新機能をいくつか紹介します。一緒に収集して学びましょう!

CSS にとって、2022 年は楽しみに値する年です。多数の新機能が間もなく登場し、一部はすでにブラウザにログインし始めていますが、一部はブラウザにログインする可能性があります。 2022 年にリリースされる予定です。幅広いブラウザーをサポートします。 2022 年に期待される新しい CSS 機能を見てみましょう。 (推奨される学習: css ビデオ チュートリアル )

1. コンテナ クエリ

1. 基本概念

コンテナ クエリにより、次のことが可能になります。親のサイズに基づいて要素のスタイルを設定できます。これは @media クエリに似ていますが、ビューポートのサイズではなくコンテナのサイズに基づいている点が異なります。コンポーネントをコンテキストに適応させたい場合があるため、これはレスポンシブ デザインでは常に問題になります。

2. 利用方法

コンテナクエリの場合、container属性(container-typeとcontainer-nameの略)を使用してコンテナ属性を指定する必要があります。コンテナとしての要素。コンテナタイプには、幅、高さ、インラインサイズ、ブロックサイズを指定できます。 inline-size と block-size は論理プロパティであり、ドキュメントの書き込みモードに応じて異なる結果が生成される可能性があります。

main, aside {
    container: inline-size;
}

@container はメディア クエリと同様の方法で使用できます。括弧内のルールの表現方法に違いがあることに注意してください (コンテナクエリでは min-width: 30em の代わりに inline-size > 30em を使用する必要があります)。これは、メディア照会レベル 4 仕様の一部です。コンテナの幅が 30rem より大きい場合はフレックス レイアウトに切り替えます:

@container (inline-size > 30em) {
    .card {
        display: flex;
    }
}

CSS 包含レベル 3 仕様は現在草案段階にあり、構文がいつでも変更される可能性があります。

3. 現状

現在、コンテナ クエリは主流のブラウザでは利用できませんが、ブラウザへのコンテナ クエリの実装に期待してください。

CSS 封じ込めモジュール レベル 3 (公式仕様): https://www.w3.org/TR/css-contain-3

2. :has( )

1. 基本概念

:has() は「親セレクター」と呼ばれることが多く、この疑似クラスを使用すると、子孫が選択されている要素を選択します。非常に興味深い使用例がいくつかあります。たとえば、<figcaption> 内で画像に <figcaption> が含まれるかどうかに応じて、画像のスタイルを変えることができます。

2. 使用方法

<h2>を含む <section> 要素のスタイルを設定するには, 次のことができます:

section:has(h2) {
    background: lightgray;
}

<img> の親 <section> に <h2> が含まれる場合に設定します。 <img> スタイル:

section:has(h2) img {
    border: 5px solid lime;
}

3 現在のステータス

現在、この属性をサポートしている主流ブラウザはありませんが、Safari テクノロジーでは使用できます。プレビュー版でご利用ください。

Safari テクノロジー プレビュー: https://developer.apple.com/safari/technology-preview/

CSS セレクター レベル 4 (公式仕様): https://www 。 w3.org/TR/selectors-4/

3. @when/@else

1. 基本概念

@ when /@else は CSS の条件付きルールで、他のプログラミング言語の if/else ロジックに似ています。これにより、複雑なメディア クエリをより論理的に作成できるようになります。 Sass との競合を避けるために、ここでは @if の代わりに @when を使用することにしました。

2. 使用方法

ユーザーのビューポートが特定の幅を超えているかどうか、ユーザーのブラウザがサブグリッドをサポートしているかどうかなど、複数のメディア条件やサポートされている機能を照会できます。

@when media(min-width: 30em) and supports(display: subgrid) {
    
} @else {
    
}

3. 現在のステータス

現在、属性の変更はブラウザではサポートされていません。まだ初期段階であり、まだ議論中です。今年はブラウザーで広くサポートされるとは予想されていませんが、注目に値する非常に便利なプロパティであることは確かです。

CSS 条件付きルール モジュール レベル 5 (公式仕様): https://www.w3.org/TR/css-conditional-5

4. アクセント- color

1. 基本概念

color-scheme 属性を使用すると、要素が簡単にレンダリングできる配色を示すことができます。オペレーティング システムのカラー スキームの一般的な選択肢は、「明るい」と「暗い」、または「日中モード」と「夜間モード」です。ユーザーがいずれかの配色を選択すると、オペレーティング システムがユーザー インターフェイスを調整します。これには、フォーム コントロール、スクロール バー、CSS システム カラーの使用値が含まれます。

2. 利用方法

利用方法は非常に簡単で、このプロパティは継承可能です。したがって、ルート レベルで設定してどこにでも適用できます。

:root {
    accent-color: lime;
}

可以在单个元素上使用：

form {
    accent-color: lime;
}

input[type="checkbox"] {
    accent-color: hotpink;
}

3. 当前状态

目前，accent-color 在 Chrome、Edge、Firefox 和 Safari 技术预览版中已经得到了支持。不支持该属性的的浏览器会直接使用默认颜色，并且输入是完全可用的。

CSS Basic User Interface Module Level 4（官方规范）：https://www.w3.org/TR/css-ui-4/

五、颜色函数

1. 基本概念

我们可能已经很熟悉 Hex、RGB 和 HSL 颜色格式。CSS Color Module Levels 4 和 5 中包括一整套新的颜色函数，使我们能够以前所未有的方式在 CSS 中指定和操作颜色。它们包括：

• hwb()：色相、白度、黑度。
• lab()：亮度以及决定色调的 a和b值。
• lch()：亮度、色度、色调。
• color-mix()：将两种颜色混合在一起。
• color-contrast()：从颜色列表中，输出与第一个参数相比对比度最高的颜色。
• color()：指定不同颜色空间中的颜色（例如display-p3）。

2. 使用方法

hwb(), lab() 和 lch() 的使用方式与我 rgb() 和 hsl() 函数基本相同，都有一个可选的alpha 参数：

.my-element {
  background-color: lch(80% 100 50); 
}

.my-element {
  background-color: lch(80% 100 50 / 0.5); 
}

color-mix() 将其他两种颜色混合后输出一种颜色。我们需要指定颜色插值方法作为第一个参数：

.my-element {
  background-color: color-mix(in lch, blue, lime);
}

color-contrast() 需要一个基色来比较其他颜色。它将输出对比度最高的颜色，或者在提供额外关键字的情况下，输出列表中符合相应对比度的第一种颜色：

/*  输出对比度最高的颜色 */
.my-element {
    color: white;
    background-color: color-contrast(white vs, lightblue, lime, blue);
}

/* 输出符合AA对比度的第一种颜色 */
.my-element {
    color: white;
    background-color: color-contrast(white vs, lightblue, lime, blue to AA);
}

3. 当前状态

Safari 目前在浏览器支持方面处于领先地位，从版本 15 就开始支持hwb()、 lch()、lab()、color()，color-mix() 和 color-contrast() 可以通过 flag 启用。Firefox 支持 hwb()，并且还标记了对 color-mix() 和 color-contrast() 的支持。令人惊讶的是，Chrome 现在还不支持这些函数。

在代码中提供样式兼容并不难：给定两种颜色规则，如果浏览器不支持第二种颜色规则，它将忽略第二种颜色规则：

.my-element {
    background-color: rgb(84.08% 0% 77.36%);
    background-color: lch(50% 100 331);
}

这样，当浏览器支持该函数时，就可以直接使用了。

CSS Color Module Level 4（官方规范）：https://www.w3.org/TR/css-color-4/

CSS Color Module Level 5（官方规范）：https://www.w3.org/TR/css-color-5

六、层叠层

1. 基本概念

层叠层让我们有更多的能力来管理CSS的“层叠”部分。目前，有几个因素决定了 CSS 代码中将应用哪些样式，包括选择器群众和出现的顺序。层叠层允许我们有效地将CSS分组（或者“分层”）。顺序较低的层中的代码将优先于较高层中的代码，即使较高层中的选择器具有更高的权重。

2. 使用方法

下面来看看层叠层的基本使用：

/* 按顺序创建图层 */
@layer reset, base, theme;

/* 将CSS添加到每个层 */
@layer reset {
  
}

@layer base {
  h1.title {
      font-size: 5rem;
  }
}

@layer theme {
  h1 {
      font-size: 3rem;
  }
}

theme 层中的CSS字体大小声明将覆盖base层中的字体大小声明，尽管后者选择器具有更高的权重。

3. 当前状态

最新版本的 Firefox 已经支持了层叠层，并且可以在 Chrome 和 Edge 中使用 flag 启用（Chrome 99 版本将全面支持层叠层）。看起来所有主流浏览器都在使用这个规范，所以希望尽快能得到更广泛的支持。

CSS Cascading and Inheritance Level 5（官方规范）：https://www.w3.org/TR/css-cascade-5/

七、subgrid

1. 基本概念

作为 CSS Grid Layout Module 2 规范的一部分，subgrid 允许元素在行轴或列轴上继承其父元素的网格。subgrid 对于解决各种用户界面挑战非常有用。

例如，以下面这个带有标题的图像为例。标题的长度各不相同，使用 subgrid 可以直接让它们对齐，而无需设置固定的高度。

2. 使用方法

首先将父元素设置为grid布局，将子元素的“grid-template-columns”或“grid-template-rows”属性设置为 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;
}

实现效果：

完整代码：

html：

<div class="grid">
  <figure>
    <img src=&#39;https://images.unsplash.com/photo-1633083018029-bd1d4d52cb19?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0NTE5NTYyMw&ixlib=rb-1.2.1&q=80&w=400&#39; alt=&#39;Bluetit&#39;>
    <figcaption>A colourful mix of blue, yellow, white and green makes the blue tit one of our most attractive and most recognisable garden visitors.</figcaption>
  </figure>
  <figure>
    <img src=&#39;https://images.unsplash.com/photo-1619976302135-5efbc2a7785a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0NTE5NTY4NA&ixlib=rb-1.2.1&q=80&w=400&#39; alt=&#39;Robin&#39;>
    <figcaption>Robins sing nearly all year round and despite their cute appearance, they are aggressively territorial and are quick to drive away intruders.</figcaption>
  </figure>
  <figure>
    <img src=&#39;https://images.unsplash.com/photo-1623627733740-4724cb1fe84e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0NTE5NTc4NQ&ixlib=rb-1.2.1&q=80&w=400&#39; alt=&#39;Chaffinch&#39;>
    <figcaption>The chaffinch is one of the most widespread and abundant bird in Britian and Ireland.</figcaption>
  </figure>
</div>

CSS：

* {
  box-sizing: border-box;
}

body {
  font-family: "Open Sans", sans-serif;
  margin: 0;
  padding: max(1rem, 3vw);
}

figure {
  margin: 0;
  display: grid;
/*  grid-template-rows: subgrid; */
/*  grid-row: 1 / 3; */
}

img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  grid-row: 1 / 3;
  grid-column: 1;
}

figcaption {
  padding: 1rem;
  grid-column: 1;
  grid-row: 2;
  background: hsl(0 0% 0% / 0.6);
  color: white;
}

.grid {
  display: grid;
  max-width: 80rem;
  margin: 0 auto;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 1.5rem;
}

@media (min-width: 62em) {
  .grid {
    grid-template-rows: 1fr auto;
  }
  
  figure {
    grid-template-rows: subgrid;
    grid-row: 1 / 3;
  }
}

演示demo：https://codepen.io/michellebarker/pen/YzERyor

3. 当前状态

值得注意的是，自 2019 年以来，Firefox 已经支持了 subgrid，但近三年后还没有其他浏览器跟进。有迹象表明 Chromium 团队已经开始着手实现它，所以可能有幸在今年看到它登陆 Chrome 和 Edge。

CSS Grid Layout Module Level 2（官方规范）：https://www.w3.org/TR/css-grid-2/

八、@scroll-timeline

1. 基本概念

@scroll-timeline 属性定义了一个AnimationTimeline，其时间值由滚动容器中的滚动进度决定（而不是时间决定）。一旦指定，@scroll-timeline 将通过使用animation-timeline 属性与CSS Animation相关联。

2. 使用方法

这里来看一个简单的例子：

/* 设置关键帧动画 */
@keyframes slide {
    to { transform: translateX(calc(100vw - 2rem)); }
}

/* 配置scroll timeline，这里将它命名为了slide-timeline */
@scroll-timeline slide-timeline {
  source: auto;
  orientation: vertical; 
  scroll-offsets: 0%, 100%; 

/*  指定关键帧动画和 scroll-timeline */
.animated-element {
  animation: 1s linear forwards slide slide-timeline;
}

我们也可以对scroll-offsets属性使用基于元素的偏移量，以在特定元素滚动到视图中时触发 timeline：

@scroll-timeline slide-timeline {
    scroll-offsets: selector(#element) end 0, selector(#element) start 1;
}

3. 当前状态

如果对 @scroll-timeline 感兴趣，可以在 Chrome 中使用 flag 来启用它。当我们遇到一个复杂的动画时，可能需要使用 JavaScript 动画库来实现，但是对于相对简单的动画，使用该属性就可以减少不必要的import。

Scroll-linked Animations（官方规范）：https://drafts.csswg.org/scroll-animations-1/

九、嵌套

1. 基本概念

如果你熟悉 Sass，就会知道嵌套选择器的便利性。本质上，就是在父级中编写子级规则。嵌套可以使编写CSS代码更加方便，现在嵌套终于来到了原生 CSS！

2. 使用方法

从语法上讲，它与 Sass 相似。下面来给 class 为 card 中的 h2 子元素定义样式规则：

.card {
    color: red;

    & h2 {
        color: blue;
    }
}

可以将其用于伪类和伪元素：

.link {
    color: red;

    &:hover,
    &:focus {
        color: blue;
    }
}

这些就等价于下列 CSS 代码：

.link {
    color: red;
}

.link:hover,
.link:focus {
    color: blue;
}

3. 当前状态

目前还没有浏览器支持嵌套。如果你使用PostCSS，可以通过预置的 postcss-preset-env 插件来尝试嵌套。

CSS Nesting Module（官方规范）：https://www.w3.org/TR/css-nesting-1/

十、总结

现在正处于 CSS 蓬勃发展的时代。在写这篇文章时，我注意到这些新功能有一些共同点，它们都是为了帮助我们编写更好、更干净、更高效的代码。随着时间的推移，预处理工具（如 Sass）可能会变得不再重要。让我们一起期待更多新的 CSS 功能出现吧！

英文原文：https://www.smashingmagazine.com/2022/03/new-css-features-2022/

作者：Michelle Barker

译者：CUGGZ

（学习视频分享：web前端）

以上が2022 年に知っておくべきいくつかの新しい CSS 機能 (収集して学習)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。