最近のCSSで使える新しい技術についてそろそろまとめておきたいという話
浦島太郎化を防ぎたい
IEがなくなって久しく、Webの技術の中でもCSSに関しては本当に便利になっていると思う。
で、ぼちぼち新しい技術の追加状況に付いていけなくなりそうな予感がしている。
とりあえず2022までのはなし
web.devの記事から、2つ。
まとまっとるやんけ!ってなってしまうが、2022年時点で新たにすべてのブラウザで使用可能となった技術たち。
この中でも、2023年に入って使用可能になったものもある。
とくに以下のやつはちゃんとまとめたいし、自分でも使えるようになっておきたい。
- カスケードレイヤー[1]
- コンテナクエリ
- 色の指定方法の追加分(Level4,5)
- グラデーションの色空間、コントラストなども
- 疑似クラス(
:has()
,:modal
,:is()
,:where()
) - 三角関数
- メディアクエリの範囲構文[2]
- ネスト可能
@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[3]
- :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[4]
以上、そのうち追加でなんか書く。
脚注
敢えて書くまでないかもしれんけど…… メディアクエリーの使用 - CSS: カスケーディングスタイルシート | MDN ↩︎
そういえばこのサイトにこれ指定してないの気づいた ↩︎
いつ使えばいいのこれ…… ↩︎