2023年のCSSの復習をしておこうかなと思いました！

CSSって、いつの間にか機能追加されてたり、効率的な実装方法が実はあったりして、定期的にキャッチアップしないとなーと思ってます^^;

今年注目された仕様や機能を見ていきます！
ここで紹介するものは、主要なブラウザの安定バージョンで対応されているものです。

コンテナクエリ

今まで、レスポンシブデザインを実装する際はビューポートのクエリを使うのが基本だったかと思いますが、指定要素のサイズ基準でレスポンシブできます。

以下の例では、親要素が500px以上のクエリを指定しています。
`main`という名前のコンテナクエリを作成し、親要素のクラスに`container`プロパティ(`container-name` + `container-type`)でコンテナクエリを適用しています。
`container-type`でオプションに合わせたコンテナコンテキストが生成され、`container-name`では適用する名前付きコンテナを指定しています。

1.parent {
2  width: 100%;
3  container: main / inline-size;
4  /* ↑適用するコンテナクエリを指定。以下と同義。
5    container-name: main;
6    container-type: inline-size; 
7  */
8  display: grid;
9  gap: 8px;
10}
11
12.card {
13  display: grid;
14  word-break: break-all;
15  border: 1px solid gray;
16  border-radius: 8px;
17  overflow: hidden;
18}
19
20// コンテナクエリの設定
21@container main (width > 500px) {
22  .card {
23    grid-template-columns: 100px 1fr;
24    gap: 4px;
25  }
26}

親要素の幅が500pxより大きい場合

親要素の幅が500px以下の場合

コンテナクエリ宣言時、名前をつけない場合は、コンテナのコンテキストを持つ要素（≒`container-type`が宣言されている要素）全てにそのクエリが適用されます。

1// 名前なし
2@container (width > 500px){
3  .card {
4    grid-template-columns: 100px 1fr; gap: 4px;
5  }
6}

サブグリッド

`display: grid;`を利用するグリッドの話です。
サブグリッドを利用すると、親グリッド内の、子要素のグリッドの整列基準に、親グリッドのトラックを利用することができます。

具体的に言うと、`grid-template-columns`と`grid-template-rows`に`subgrid`というオプションが追加されました。
このオプションを設定すると、設定した行/列は、親のトラックを参照できるようになります。

親グリッドのCSS

1.container {
2  display: grid;
3  grid-template-columns: repeat(3, 200px); 
4  word-break: break-all;
5}

子要素に通常のグリッドを適用した場合

1.item {
2  display: grid;
3}

子要素にサブグリッドを適用した場合

1.item {
2  display: grid;
3  grid-template-rows: subgrid;
4  grid-row: span 2; // 使う行の幅指定。2つ先の行までの大きさにする。
5}

親のグリッドのトラックが変わったのが分かるかと思います。

補足

上記で、サブグリッドを適用した場合、理想の配置にするために、`grid-row`を指定しましたが、指定しなかった場合はこうなります。
実際にサブグリッドを使うときは、開発者ツールでトラックの変化を確認しながら使うと良いかもです。

1.item {
2  display: grid;
3  grid-template-rows: subgrid;
4}

color-mix()

2つのカラーを組み合わせたカラーを表現できます。
特にメインカラーのサブカラーを色の割合で作りたい時に便利かなと思いました。

使用する際には、1.色空間, 2.カラー1つ目とその割合, 3.もう１つのカラー を指定します。
以下のコードでは、srgbの色空間で、red20%、white80％の色が指定されてます。

1p {
2  color: color-mix(in srgb, red 20%, white);
3}

ネスト

Sassを使わなくても、通常のCSSでネストができちゃいます。
デフォルトでネストできるなんてとても便利で有り難いです〜。

こんな感じで使えます↓

1.container {
2  & a {
3    color: red;
4
5    &:hover {
6       color: yellow;
7    }
8  }
9
10  .text {
11     color: blue; 
12  }
13}

layer

スタイルにレイヤーという考えを取り入れ、スタイルをレイヤーごとに管理できます。レイヤーの優先度もコントロール可能です。

以下のように、layerの中にスタイルを宣言すると、指定スタイルがレイヤーに割り当てられます。

1@layer base {
2  p {
3    color: #999999;
4  }
5}

また、最初に複数のレイヤーを宣言すると、優先度を設定できます。
後ろになるほど優先度が高くなるので、`base < utilities`のレイヤー構造を宣言できます。

1@layer base, utilities;
2
3@layer base {
4  p {
5    color: black;
6  }
7}
8
9@layer utilities {
10  p {
11    color: pink;
12  }
13}

ファイルごとにレイヤーを設定することもできます。
以下のコードだと、`base.css`のスタイルデータをbase layerに、`utilities.css`のものをutilities layerに割り当てています。

1@import "base.css" layer(base);
2@import "utilities.css" layer(utilities);

nth-of

nth-child等は、兄弟要素の位置（n番目）によって、スタイルを指定することができました。

これに、of という表現が加わったことで、条件に当てはまった要素の中で、指定位置のスタイルを宣言できます。

従来の使い方

偶数位置の要素のcolorがredになります。

1li:nth-child(2n) {
2  color: red;
3}

of を使ってフィルタリング

`focus`クラスを持つ要素のなかで、偶数位置の要素にボーダーが付きます。

1:nth-child(2n of .focus) {
2    border: 2px solid pink;
3}

:user-valid / :user-invalid

:valid / :invalid に似た擬似セレクタです。
:valid / :invalid は、ユーザーが入力していない状態でも有効無効を判定するのに対して、:user-valid / :user-invalid はユーザーが入力した後に有効無効を判定します。

使い方は通常の擬似要素と同様です。

1input:user-valid {
2  border: 1px solid lime;
3}

三角関数

CSSで扱う数値として三角関数が追加されました。
複雑なアニメーションやレイアウトを実装する際に役立ちそうです。

1div {
2  width: calc(sin(45deg) * 200px);
3}

終わり

以上で復習事項の共有は終わりです！
実際に使っていけるといいですねー！