最近のCSSで使える新しい技術についてそろそろまとめておきたいという話

目次

• 浦島太郎化を防ぎたい
• とりあえず2022までのはなし
• Footnotes

浦島太郎化を防ぎたい

IEがなくなって久しく、Webの技術の中でもCSSに関しては本当に便利になっていると思う。

で、ぼちぼち新しい技術の追加状況に付いていけなくなりそうな予感がしている。

とりあえず2022までのはなし

web.devの記事から、2つ。

• Interop 2022: end of year update
• State of CSS 2022

まとまっとるやんけ！ってなってしまうが、2022年時点で新たにすべてのブラウザで使用可能となった技術たち。

この中でも、2023年に入って使用可能になったものもある。 とくに以下のやつはちゃんとまとめたいし、自分でも使えるようになっておきたい。

• カスケードレイヤー¹
• コンテナクエリ
• 色の指定方法の追加分（Level4,5）
  • グラデーションの色空間、コントラストなども
• 疑似クラス（:has(),:modal,:is(),:where()）
• 三角関数
• メディアクエリの範囲構文²
• ネスト可能
• @scopeによるスタイルのスコープ

IEのサポートなんて前々からしてなかったけど、それでも正式にサポート切れたことで一気に新技術が広まっている感があり、とても良いと思う。 あとは僕が置いて行かれないように努力するだけだと思った。

以下はここで羅列しておくだけにして個別に書かなくても良いかなってやつ。

• :any-link - CSS: カスケーディングスタイルシート | MDN
• conic-gradient() - CSS: カスケーディングスタイルシート | MDN
• filter - CSS: カスケーディングスタイルシート | MDN
• backdrop-filter - CSS: カスケーディングスタイルシート | MDN
• background-clip - CSS: カスケーディングスタイルシート | MDN
• background-blend-mode - CSS: カスケーディングスタイルシート | MDN
• env() - CSS: カスケーディングスタイルシート | MDN
• CSS 封じ込め - CSS: カスケーディングスタイルシート | MDN
• font-display - CSS: カスケーディングスタイルシート | MDN³
• :in-range - CSS: カスケーディングスタイルシート | MDN
• :out-of-range - CSS: カスケーディングスタイルシート | MDN
• :focus-within - CSS: カスケーディングスタイルシート | MDN
• :focus-visible - CSS: カスケーディングスタイルシート | MDN
• initial - CSS: カスケーディングスタイルシート | MDN
• max-inline-size - CSS: Cascading Style Sheets | MDN
• margin-inline - CSS: カスケーディングスタイルシート | MDN
• CSS math functions min(), max() and clamp() | Can I use… Support tables for HTML5, CSS3, etc
• ::marker - CSS: カスケーディングスタイルシート | MDN
• caret-color - CSS: カスケーディングスタイルシート | MDN⁴

以上、そのうち追加でなんか書く。

Footnotes

1. 参考: カスケードレイヤー - ウェブ開発を学ぶ | MDN ↩

2. 敢えて書くまでないかもしれんけど…… メディアクエリーの使用 - CSS: カスケーディングスタイルシート | MDN ↩

3. そういえばこのサイトにこれ指定してないの気づいた ↩

4. いつ使えばいいのこれ…… ↩