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

はじめに

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

そのため主要なブラウザの関係者が集まり、Web開発者の開発体験を向上させるための取り組み、「 Compat 2021」・「Compat 2022」が行われていました。

このような取り組みが2023年も引き続続いていくようです。

この記事では、Compat 2022に引き続き、Interop 2023で解消されるCSSプロパティについてまとめました。

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

目次

• Border Image
• CSSの色空間と関数
• コンテナクエリ
• Containment
• 擬似クラス
• カスタムプロパティ
• フレックス ボックス
• CSS 数学関数

まとめ

1. Border Image

Border Imageの項目では以下の要素が今後つかえるようになります。

• border-image-repeat： stretch;
  • borderに入れられた画像が引き伸ばされます
• border-image-repeat： stretch;
  • borderに入れられた画像が繰り返され、足りない文が引き伸ばされます。
• border-image-repeat: repeat;
  • borderに入れられた画像が繰り返され、足りない文は切り抜かれます。
• border-image-slice: <パーセンテージ>;
  • borderに入れられた画像の分割する大きさにパーセンテージが使えるようになります。

2. CSSの色空間と関数

CSSの色空間と関数 の項目では以下の要素が今後つかえるようになります。

• 色空間の追加
  • a98rgb、display-p3、lab、oklab、predefined-rgb、prophoto-rgb、srgb-linear、xyz
• 色空間におけるグラデーションの追加
  • rgb以外での色空間でグラデーションを作成することができるようになります。

3. コンテナクエリ

コンテナクエリ の項目では以下の要素が今後つかえるようになります。

• @container (/* 条件 */) { }
  • divの大きさに合わせて、スタイルを当てることができるメディアクエリです。
  • firefoxとSafariで使えるようになります。

4. Containment

containの項目では以下の要素が今後つかえるようになります。

• contain-intrinsic-block-size: 100px;
• contain-intrinsic-height: 100px;
• contain-intrinsic-inline-size: 100px;
• contain-intrinsic-size: 100px;
• contain-intrinsic-width: 100px;

5. 擬似クラス

擬似クラスの項目では以下の要素が今後つかえるようになります。

• 疑似クラスの追加
  • :dir()、:has()

6. カスタムプロパティ

カスタムプロパティの項目では以下の要素が今後つかえるようになります。

• CSSで変数を使えるようになります。
  • 定義する時：--変数名: blue;
  • 呼び出す時： background-color: var(--変数名);

7. フレックス ボックス

フレックス ボックスの項目では以下の要素が今後つかえるようになります。

• align-items: baseline;
  • ベースラインに合わせて、揃えることができます。
• 細かいバグの修正

8. CSS 数学関数

CSS 数学関数の項目では以下の要素が今後つかえるようになります。

• CSSで以下の関数を追加
  • sin()・cos()・tan()・exp()・log()・hypot()・pow()・sqrt()・round()・mod()・rem()

---

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

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