The State of CSS 2022で気になったもの

⚠この記事が公開されたのは 2023年1月14日で、内容が古く、間違っている可能性があります。

The State of CSSはCSSに関する技術的な統計調査のようなサイトです。(類似サイトにThe State of JS, The State of GraphQLがあります)

世界中のWebデザイナー/開発者を対象にしたアンケートで、CSSで今年流行ったものやこれから流行るものなど技術的なトレンドをまとめて知ることができます。

ぜひ公式サイトをご覧いただきたいと思いますが、今回は個人的に気になったものをピックアップしてみました。

@container

従来の@media()では画面の幅や高さを基準にスタイルを変更できますが、

@container()では親要素の幅を基準にスタイルを変更することができます。

個人的にはこのプロパティを知れて一番うれしかったです。

Container Queriesという考え方の紹介と今から利用するには

CSS Logical Properties(論理プロパティ)

margin-top, margin-bottom, margin-left, margin-rightなどに代わる新しいプロパティです。画面を基準にした方向ではなく、物理的な方向のため柔軟なmarginが設定できることから積極的に使用したいところです。

CSS : 論理プロパティについて再び

content-visibility

ビューポート外のimgやiframe要素のコンテンツの読み込みを遅延させる方法としてloading=”lazy”が有名ですが、content-visibilityプロパティを用いるとレンダリング(描画)を遅延させることができます。

まだ使用したことがないプロパティなので今度試してみたいと思います。

表示速度を飛躍的に向上させるHTML/CSS最新仕様「content-visibility」「Lazy loading」「contain」をコード付き簡単解説

flexbox gap

flexbox要素で列間、行間の余白を指定できるgapプロパティです。

こちらもとても便利なプロパティだと思います。

gapの余白指定が便利!gridとflexでできる新しいCSSレイアウト手法

Media Queries Range Contexts

従来のmedia queryで画面の幅の範囲を指定する際は@media (min-width:768px) {},@media (max-width:1024px){}と別々に記述していたものを@media(768px <= width <=1024px)~と比較演算子を利用して1つにまとめることができるようになりました。可読性がよくなって非常に便利です。

これは朗報! CSSのメディアクエリの範囲指定で、比較演算子を使用できるようになります

conic-gradient()

linear-gradient(線形グラデーション)、radial-gradient(円形グラデーション)に加え、円錐グラデーションが使用できるようになりました。

instagramのようなオーロラUIのようなデザインで使用できそうです。

CSSで円グラフや集中線が描けるconic-gradient入門

currentColor

要素に適用されているcolorの値と同じ色を他のプロパティでも指定できます。

CSS Tips – currentColor を使ってテキストと同じ色を指定しよう

scrollsnap

スクロール時のセクションの境界が画面にフィットしたときにピタッと動きを止めるときのプロパティ。

Scrollifyというjqueryを使用していたのですがCSSだけで同じ動きを実現できるのはいいですね。

表示領域にピタッと移動!CSSでスクロールスナップを実装しよう

font-display

Webフォントの読み込みが遅い場合、テキストが表示されるのを待っていなければならない現象を防ぐのに役立つプロパティです。

@font-face{}の中にfont-display: swap;を記述することで、まずは代替フォントで表示し、その後指定のwebフォントが表示されるようになります。

Webフォントを使う場合に font-display 記述子を使ってすぐにテキストを表示させる

line-clamp

長文になった場合に行数を指定して末尾の「…」で省略できるプロパティ。

text-overflow: ellipsis;で要素サイズを超えたときに省略する方法やjsを使って文字数で省略(truncate)する方法もあります。

JavaScript 文字列省略(truncate)ワンライナー

:has()

疑似クラス:has()で指定した子要素が存在する場合に適用できるプロパティ。

上の画像をみると注目使用率、認知度が高く、今後重要な疑似クラスになるでしょう。

:is(), :where()を併用することでより複雑なセレクタを指定できます。

CSSのhas()疑似クラス関数の使い方

【CSSの疑似クラス】:is()と:where()って何?違いは?

will-change

CSSアニメーションを使用した際の不安定な挙動を防ぐことができるプロパティです。

will-changeを使ってなめらかなアニメーションを作成しよう

さいごに

CSSは日進月歩で目まぐるしい進化をとげています。

jsでしかできなかったことがcssで実現できるようになってきて非常に便利になりましたが、その反面、仕様も複雑になってきているのでついていくのがとても大変です。

年に1度はThe State of CSSでじっくりと新しいプロパティの動向を知り、必要なものを身につけていきたいと思います。