【CSS】これから期待できるCSSまとめ2022

## 概要

今までCSSのプロパティは、
「**特定のバージョンしか使えない**」とか、「**特定のブラウザだと使えない**」とかで
新しいプロパティが公開されても、使えないことが多々ありました。

そのため、主要なブラウザの関係者が集まり、
Web開発者の開発体験を向上する[**Compat 2021**](https://web.dev/compat2021/)の取り組みが行われ、
ブラウザの互換性を解消する動きが活発になっていきました。

例えば、`CSS flexbox` や `Grid Layout`などもこの取り組みによって、
多くのブラウザで対応できるようになってきました。

※ [Compat 2021についてこちらの記事ご覧ください。](https://web.dev/compat2021/)

この記事では、Compat 2021に引き続き、[Interop 2022](https://web.dev/interop-2022/)で解消されるCSSプロパティの10個についてまとめました。

こんなものがもうすぐ使えるようになるんだな...みたいに思っていただけると嬉しいです。

## 目次

+ カスケードレイヤー`@layer`
+ サブグリッド `subgrid`
+ コンテナクエリ `@container`
+ HWB色空間 `hwb()`
+ 色空間の拡張
+ 色の混合 `color-mix()`
+ コントラストの高い色を選ぶ方法 `color-contrast()`
+ color関数 `color()`
+ グラデーションの色空間の拡張
+ viewport variantsの改善
+ 擬似クラス has `:has() `


## カスケードレイヤー `@layer`
### 概要

カスケードレイヤー `@layer`を使うと、CSSの詳細度とスタイルの順番をカスケード内で明示的に階層化できるため、CSSの実装方法が変わります。

例えば、こんな感じに記入することで、
優先度が、`components > variations` こうなり、
それぞれのレイヤーの中に、スタイルを記入することで、詳細度とスタイルの順番を明示的に階層化できるというわけです。

```css
@layer components, variations;

@layer variations {
  .style {
  }
}

@layer variations {
  .style--error {
  }
}

```

### ブラウザの互換性

74%くらい使えそうです。
主要なブラウザーのEdge, Firefox, Chrome, safariでは使えそうです。
IEに対応しないといけないとかがなければ、問題なさそうです。
<picture>
<source type="image/webp" srcset="https://caniuse.bitsofco.de/image/css-cascade-layers.webp">
<source type="image/png" srcset="https://caniuse.bitsofco.de/image/css-cascade-layers.png">
<img src="https://caniuse.bitsofco.de/image/css-cascade-layers.jpg" alt="Data on support for the css-cascade-layers feature across the major browsers from caniuse.com">
</picture>


### ref

https://developer.mozilla.org/ja/docs/Web/CSS/@layer

https://qiita.com/degudegu2510/items/51bb0a66423d419dc7ea

## サブグリッド `subgrid`
### 概要

グリッドコンテナーに `display: grid` を追加すると、
その直下の子だけがグリッドアイテムになり、作成したグリッド上に置くことができます。
そのため、グリッドアイテム内の要素をグリッドコンテナーのグリッド上に置くことができませんでした。

サブグリットでは、グリッドアイテムにこのように記載することで、
グリッドアイテム内の要素をグリッドコンテナーのグリッド上に置くことができるようになります。

```css
.gridItem {
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}
```



### ブラウザの互換性

まだ、Firefoxししか使えなさそうです。
まだ使えないですね！
<picture>
<source type="image/webp" srcset="https://caniuse.bitsofco.de/image/css-subgrid.webp">
<source type="image/png" srcset="https://caniuse.bitsofco.de/image/css-subgrid.png">
<img src="https://caniuse.bitsofco.de/image/css-subgrid.jpg" alt="Data on support for the css-subgrid feature across the major browsers from caniuse.com">
</picture>

### ref

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout/Subgrid

https://qiita.com/degudegu2510/items/a28383fd334a976c7ad8

## コンテナクエリ `@container`
### 概要

今までは、メディアクエリで、ビューポートベースにスタイルを変えることができていましたが、
コンテナクエリでは、指定した要素の大きさに合わせてスタイルを変えることができます。

例えば、このように、
`styleWapper`のコンテナーにwrapperという名前をつけて
`styleWapper`のサイズに合わせて、任意のスタイルが当てられるようになります。

```css
.styleWapper {
  container: inline-size / wrapper;
}

@container wrapper (max-width: 400px){
  .style {
    /*任意のスタイル*/
  }
}

```



### ブラウザの互換性

まだまだですね！
<picture>
<source type="image/webp" srcset="https://caniuse.bitsofco.de/image/css-container-queries.webp">
<source type="image/png" srcset="https://caniuse.bitsofco.de/image/css-container-queries.png">
<img src="https://caniuse.bitsofco.de/image/css-container-queries.jpg" alt="Data on support for the css-container-queries feature across the major browsers from caniuse.com">
</picture>

### ref

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries

## 色空間の拡張
### 概要

今までのCSSの色の空間では、RGBのみでした。
しかし、これからは、RGBのみだけでなく10種類の指定方法で色を指定することができるよう拡張されます。

具体的には以下の通りです。

+ **RGB**
    + 今まで通りのRGB
+ **RGBA**
    + RGBに透明度が追加されたもの
+ **HSL**
    + 色相, 彩度, 明度からなる色空間
+ **HSLA**
    + HSLに透明度が追加されたもの
+ **HWB**
    + 色相, 白, 黒からなる色空間
+ **Lab**
    + 色の物理的な測定に使われる色空間
+ **LCH**
    + CIE により創出された 極座標形のLab色空間
+ **OKLab**
    + Labが改善された OKLab空間
+ **OKLCH**
    + LCHが改善された OKLCH空間
+ **キーワード**
    + `red` や `blue`といったキーワード

### ref

https://triple-underscore.github.io/css-color-ja.html#the-hsl-notation

## 色の混合 `color-mix()`
### 概要

`color-mix()` は色と色を指定された量を指定された色空間で混ぜた色を返す関数です。

例えば、
RGB色空間で、`White`に`Red`を50%だけ混ぜるとすると以下のようになります。

```css
.style {
  color: color-mix(in srgb, red 50%, white);
}
```

### ブラウザの互換性

まだまだですね！
![スクリーンショット 2022-05-13 14.47.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/0c8e48b1-d844-3393-4c60-ee0ec2722867.png)


### ref
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix


## コントラストの高い色を選ぶ方法 `color-contrast()`
### 概要

`color-contrast()` は、指定された色が他に指定された色と比べて、コントラストが高い色を返す関数です。

例えば、`white`と`black`、`gray`を比較する場合は以下のようになります。
背景色が白の場合は、`black`、背景色が黒の場合は、`white`になります。

```css
.style {
  color: color-contrast(white vs black, gray);
}
```

### ブラウザの互換性

まだまだですね！
![スクリーンショット 2022-05-13 20.13.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/ad27f7d4-374e-74e1-ac1b-302d290d693f.png)

### ref

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-contrast

## color関数 `color()`
### 概要

color関数では、RGB色空間だけでなく、指定した色空間で色を指定できる関数です。

例えば、display-p3の色空間で、色を指定する場合はこんな感じです。

```css
.style {
  color: color(display-p3 1 0.5 0);
}
```

### ブラウザの互換性

safariでは使えるようですが、まだまだですね！
![スクリーンショット 2022-05-13 20.37.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/d5daeba7-f296-88df-2e4f-163f8974cf8a.png)



### ref

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color

## グラデーションの色空間の拡張
### 概要

今まで、のグラデーションは、RGB色空間のみしか指定できませんでしたが、
これからは特定の色空間でグラデーションを作成することができます。

例えば、hsl空間上で`black`から`white`にグラデーションをする場合はこのようになります。

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

### ref

https://triple-underscore.github.io/css-images4-ja.html#funcdef-linear-gradient


## viewport variantsの改善
### 概要

今までは、`vh`や`vw`などで画面の高さ、幅の指定していましたが、
これからは、これらが拡張されさまざまな画面の高さを指定することができるようにな入ります。

以下の単位が追加されます。

+ vh系
    + svh
    + lvh
    + dvh
+ vw系
    + svw
    + lvw
    + dvw

### ブラウザの互換性

safari以外ではまだ使えなさそうです。
<picture>
<source type="image/webp" srcset="https://caniuse.bitsofco.de/image/viewport-unit-variants.webp">
<source type="image/png" srcset="https://caniuse.bitsofco.de/image/viewport-unit-variants.png">
<img src="https://caniuse.bitsofco.de/image/viewport-unit-variants.jpg" alt="Data on support for the viewport-unit-variants feature across the major browsers from caniuse.com">
</picture>

## 擬似クラス has `:has() `
### 概要

`:has()` は、引数に渡されたセレクターに該当する要素が一個以上ある時にスタイルを当てる擬似クラスになります。

例えば、子要素にimgタグを含む要素のスタイルを当てる時は、こんな感じ
```css
.style:has(> img) {
  /*任意のスタイル*/
}
```

兄弟要素に `styleItem` classがある要素にスタイルを当てる時はこんな感じ
```css
.style:has(+ .styleItem) {
  /*任意のスタイル*/
}
```


### ブラウザの互換性

safari以外ではまだ使えなさそうです。
<picture>
<source type="image/webp" srcset="https://caniuse.bitsofco.de/image/css-has.webp">
<source type="image/png" srcset="https://caniuse.bitsofco.de/image/css-has.png">
<img src="https://caniuse.bitsofco.de/image/css-has.jpg" alt="Data on support for the css-has feature across the major browsers from caniuse.com">
</picture>

### ref

https://developer.mozilla.org/ja/docs/Web/CSS/:has#browser_compatibility


<script src="https://cdn.jsdelivr.net/gh/ireade/caniuse-embed/public/caniuse-embed.min.js"></script>

---

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。

https://twitter.com/degudegu2510