概要
今までCSSのプロパティは、
「特定のバージョンしか使えない」とか、「特定のブラウザだと使えない」とかで
新しいプロパティが公開されても、使えないことが多々ありました。
そのため、主要なブラウザの関係者が集まり、
Web開発者の開発体験を向上するCompat 2021の取り組みが行われ、
ブラウザの互換性を解消する動きが活発になっていきました。
例えば、CSS flexbox や Grid 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に対応しないといけないとかがなければ、問題なさそうです。
ref
サブグリッド subgrid
概要
グリッドコンテナーに display: grid を追加すると、
その直下の子だけがグリッドアイテムになり、作成したグリッド上に置くことができます。
そのため、グリッドアイテム内の要素をグリッドコンテナーのグリッド上に置くことができませんでした。
サブグリットでは、グリッドアイテムにこのように記載することで、
グリッドアイテム内の要素をグリッドコンテナーのグリッド上に置くことができるようになります。
.gridItem {
grid-template-columns: subgrid;
grid-template-rows: subgrid;
}
ブラウザの互換性
まだ、Firefoxししか使えなさそうです。
まだ使えないですね！
ref
コンテナクエリ @container
概要
今までは、メディアクエリで、ビューポートベースにスタイルを変えることができていましたが、
コンテナクエリでは、指定した要素の大きさに合わせてスタイルを変えることができます。
例えば、このように、
styleWapperのコンテナーにwrapperという名前をつけて
styleWapperのサイズに合わせて、任意のスタイルが当てられるようになります。
.styleWapper {
container: inline-size / wrapper;
}
@container wrapper (max-width: 400px){
.style {
/*任意のスタイル*/
}
}
ブラウザの互換性
まだまだですね！
ref
色空間の拡張
概要
今までの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
色の混合 color-mix()
概要
color-mix() は色と色を指定された量を指定された色空間で混ぜた色を返す関数です。
例えば、
RGB色空間で、WhiteにRedを50%だけ混ぜるとすると以下のようになります。
.style {
color: color-mix(in srgb, red 50%, white);
}
ブラウザの互換性
まだまだですね！
ref
コントラストの高い色を選ぶ方法 color-contrast()
概要
color-contrast() は、指定された色が他に指定された色と比べて、コントラストが高い色を返す関数です。
例えば、whiteとblack、grayを比較する場合は以下のようになります。
背景色が白の場合は、black、背景色が黒の場合は、whiteになります。
.style {
color: color-contrast(white vs black, gray);
}
ブラウザの互換性
まだまだですね！
ref
color関数 color()
概要
color関数では、RGB色空間だけでなく、指定した色空間で色を指定できる関数です。
例えば、display-p3の色空間で、色を指定する場合はこんな感じです。
.style {
color: color(display-p3 1 0.5 0);
}
ブラウザの互換性
safariでは使えるようですが、まだまだですね！
ref
グラデーションの色空間の拡張
概要
今まで、のグラデーションは、RGB色空間のみしか指定できませんでしたが、
これからは特定の色空間でグラデーションを作成することができます。
例えば、hsl空間上でblackからwhiteにグラデーションをする場合はこのようになります。
.style {
background-image: linear-gradient(in hsl to right, black, white);
}
ref
viewport variantsの改善
概要
今までは、vhやvwなどで画面の高さ、幅の指定していましたが、
これからは、これらが拡張されさまざまな画面の高さを指定することができるようにな入ります。
以下の単位が追加されます。
- vh系
- svh
- lvh
- dvh
- vw系
- svw
- lvw
- dvw
ブラウザの互換性
safari以外ではまだ使えなさそうです。
擬似クラス has :has()
概要
:has() は、引数に渡されたセレクターに該当する要素が一個以上ある時にスタイルを当てる擬似クラスになります。
例えば、子要素にimgタグを含む要素のスタイルを当てる時は、こんな感じ
.style:has(> img) {
/*任意のスタイル*/
}
兄弟要素に styleItem classがある要素にスタイルを当てる時はこんな感じ
.style:has(+ .styleItem) {
/*任意のスタイル*/
}
ブラウザの互換性
safari以外ではまだ使えなさそうです。
ref
最後まで読んでくださってありがとうございます！
普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。