2022년에 알아야 할 몇 가지 새로운 CSS 기능(수집하여 학습)

이 글에서는 2022년에 기대할 가치가 있고 놓쳐서는 안 될 몇 가지 CSS 새로운 기능을 함께 공유하겠습니다.

CSS의 경우 2022년은 많은 새로운 기능이 곧 등장할 예정이며 일부는 이미 브라우저에 로그인하기 시작했으며 일부는 2022년에 광범위한 브라우저 지원을 받게 될 수도 있습니다. 2022년에 기대할 만한 새로운 CSS 기능을 살펴보겠습니다! (추천 학습: css 비디오 튜토리얼)

1. 컨테이너 쿼리

1. 기본 개념

컨테이너 쿼리를 사용하면 상위 요소의 크기에 따라 요소의 스타일을 설정할 수 있습니다. @media 쿼리이지만 다릅니다. 중요한 점은 뷰포트 크기가 아닌 컨테이너 크기를 기준으로 판단한다는 것입니다. 때때로 구성 요소가 해당 컨텍스트에 적응하기를 원하기 때문에 이는 반응형 디자인에서 항상 문제가 되어 왔습니다.

2. 사용 방법

컨테이너 쿼리의 경우 컨테이너 속성(container-type 및 컨테이너 이름의 약어)을 사용하여 요소를 컨테이너로 지정해야 합니다. 컨테이너 유형은 너비, 높이, 인라인 크기, 블록 크기일 수 있습니다. 인라인 크기 및 블록 크기는 문서의 쓰기 모드에 따라 다른 결과를 생성할 수 있는 논리적 속성입니다.

main, aside {
    container: inline-size;
}

@container는 미디어 쿼리와 비슷한 방식으로 사용할 수 있습니다. 규칙을 괄호 안에 표현하는 방식에는 차이가 있습니다(컨테이너 쿼리에서는 min-width: 30em 대신 inline-size > 30em을 사용해야 함). 이는 미디어 문의 레벨 4 사양의 일부입니다. 컨테이너 너비가 30rem보다 큰 경우 가변 레이아웃으로 전환:

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

CSS Containment Level 3 사양은 현재 작업 초안 단계이므로 구문이 언제든지 변경될 수 있습니다.

3. 현황

현재 주류 브라우저에서는 컨테이너 쿼리를 사용할 수 없습니다. 브라우저에서는 컨테이너 쿼리 구현을 기대할 수 있습니다.

CSS 격리 모듈 레벨 3(공식 사양): https://www.w3.org/TR/css-contain-3

2. :has()

1. code>:has() 종종 "상위 선택자"라고 불리는 이 의사 클래스를 사용하면 하위 항목을 기반으로 요소를 선택할 수 있습니다. 매우 흥미로운 사용 사례가 있습니다. 예를 들어, 614eb9dc63b3fb809437a716aa228d24이 포함되어 있는지 여부에 따라 a7e92aa379a95c24a947f9b436d5f4f4에서 이미지 스타일을 다르게 지정할 수 있습니다.

2. 사용 방법

:has()通常被称为“父选择器”，这个伪类使我们能够根据其后代选择一个元素。它有一些非常有趣的用例。例如，可以根据图像是否包含 614eb9dc63b3fb809437a716aa228d24，而在24203f2f45e6606542ba09fd2181843a中对图像进行不同的样式设置。

2. 使用方法

要设置包含c1a436a314ed609750bd7c7d319db4da的2f8332c8dcfd5c7dec030a070bf652c3元素的样式，可以执行以下操作：

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

当 a1f02c36ba31691bcfe87b2722de723b 的父级 2f8332c8dcfd5c7dec030a070bf652c3 包含 c1a436a314ed609750bd7c7d319db4da时，设置 a1f02c36ba31691bcfe87b2722de723b

c1a436a314ed609750bd7c7d319db4da를 포함하는 <code>2f8332c8dcfd5c7dec030a070bf652c3 요소의 스타일을 설정합니다. code>를 사용하면 다음 작업을 수행할 수 있습니다.

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

<img alt="2022년에 알아야 할 몇 가지 새로운 CSS 기능(수집하여 학습)" >의 상위 <section></section>에 <h2></h2>가 포함된 경우 설정 code> a1f02c36ba31691bcfe87b2722de723b 스타일:

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

3 현재 상태

현재 이 속성을 지원하는 주요 브라우저는 없지만 Safari Technology Preview에서 사용할 수 있습니다.

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. 사용 방법

사용자의 뷰포트가 특정 너비를 초과하는지, 사용자의 브라우저가 서브그리드를 지원하는지 등 여러 미디어 조건이나 지원되는 기능을 쿼리할 수 있습니다.

:root {
    accent-color: lime;
}

3. 현재 상태

현재 브라우저에서는 속성 변경이 지원되지 않습니다. 초기 단계이고 아직 논의 중입니다. 올해 브라우저에서 널리 지원될 것으로 예상되지는 않지만 주목할 가치가 있는 매우 유용한 속성임은 분명합니다.

CSS 조건부 규칙 모듈 레벨 5(공식 사양): https://www.w3.org/TR/css-conditional-5

4. Accent-color

1. 기본 개념 -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 중국어 웹사이트의 기타 관련 기사를 참조하세요!