57
Help us understand the problem. What are the problem?

posted at

updated at

Organization

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

概要

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

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

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

Compat 2021についてこちらの記事ご覧ください。

この記事では、Compat 2021に引き続き、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 こうなり、
それぞれのレイヤーの中に、スタイルを記入することで、詳細度とスタイルの順番を明示的に階層化できるというわけです。

@layer components, variations;

@layer variations {
  .style {
  }
}

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

ブラウザの互換性

74%くらい使えそうです。
主要なブラウザーのEdge, Firefox, Chrome, safariでは使えそうです。
IEに対応しないといけないとかがなければ、問題なさそうです。

Data on support for the css-cascade-layers feature across the major browsers from caniuse.com

ref

サブグリッド subgrid

概要

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

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

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

ブラウザの互換性

まだ、Firefoxししか使えなさそうです。
まだ使えないですね!

Data on support for the css-subgrid feature across the major browsers from caniuse.com

ref

コンテナクエリ @container

概要

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

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

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

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

ブラウザの互換性

まだまだですね!

Data on support for the css-container-queries feature across the major browsers from caniuse.com

ref

色空間の拡張

概要

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

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

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

ref

色の混合 color-mix()

概要

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

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

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

ブラウザの互換性

まだまだですね!
スクリーンショット 2022-05-13 14.47.07.png

ref

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

概要

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

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

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

ブラウザの互換性

まだまだですね!
スクリーンショット 2022-05-13 20.13.59.png

ref

color関数 color()

概要

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

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

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

ブラウザの互換性

safariでは使えるようですが、まだまだですね!
スクリーンショット 2022-05-13 20.37.21.png

ref

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

概要

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

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

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

ref

viewport variantsの改善

概要

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

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

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

ブラウザの互換性

safari以外ではまだ使えなさそうです。

Data on support for the viewport-unit-variants feature across the major browsers from caniuse.com

擬似クラス has :has()

概要

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

例えば、子要素にimgタグを含む要素のスタイルを当てる時は、こんな感じ

.style:has(> img) {
  /*任意のスタイル*/
}

兄弟要素に styleItem classがある要素にスタイルを当てる時はこんな感じ

.style:has(+ .styleItem) {
  /*任意のスタイル*/
}

ブラウザの互換性

safari以外ではまだ使えなさそうです。

Data on support for the css-has feature across the major browsers from caniuse.com

ref


最後まで読んでくださってありがとうございます!
Twitterでも情報を発信しているので、良かったらフォローお願いします!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
57
Help us understand the problem. What are the problem?