「The State of CSS 2021」で振り返るCSSの近況（前編）

2022年2月27日 15:18

昨年同様、昨今のCSS状況を「The State of CSS」にて振り返ります。
今年も以下のサイトに掲載されている内容のうち、馴染みがないものや忘れているものを中心に調べ直しました。

まず前編として、レイアウト関連、シェープや配色関連についてまとめます。

去年のまとめ

レイアウト関連

以前も扱った気がしますが、グリッドの中にさらにグリッドを簡単に設けることができるプロパティです。現在ほぼすべてのモダンブラウザで実装されているため、さらにグリッドを使った柔軟なレイアウトが簡単に実現可能に。

flexが横組みレイアウトのほぼデファクトスタンダードになっています。しかし場合によっては　カラムをmulti-columnで指定したほうがすっきりわかりやすく記述できます。

flexにgapが本格採用されている今使いどころは限定的ですが、親タグが不要であったりHTML構造的にはシンプルにまとまります。

ただし、すべてのプロパティが全モダンブラウザで実装されているとも言えないので注意。

いわゆる論理プロパティで、プロパティというより概念です。これまで物理的に付与していたマージンやパディング等を、「スタートとエンドで方向」「インラインとブロックで内外」を定めて指定するものです。右から左に流れる言語など、異なる言語間での齟齬を抑えることができるなどのメリットがあります。

従来のメディアクエリでは画面幅を基準にCSSを切り替えるものですが、親セレクタを基準として設定できるのがコンテナクエリです。メディアクエリでは切り分けが厄介な場合などに重宝します。

が、現在のブラウザ実装はこの通り真っ赤なので概要理解にとどめます。

いわゆる要素そのものではなく、背面にぼかしや透過などのフィルターを設定できるプロパティです。背面と分けるために疑似要素や親タグを用意するといったHTMLへの干渉がさらに抑えられます。

ただしまだfirefoxあたりの実装が怪しいので取り扱いに注意。

内在的という文字通り、中に介在するもののサイズに応じたサイズ規定が可能になるものです。インラインブロックで行っていた文の長さに応じたサイジングが可能になります。

まだ全モダンブラウザで完全対応とは言えませんが、じきに重宝しそうです。

扇状や円形にカラーのグラデを作成できる関数です。

結構前からモダンブラウザで問題なく実装されているため、円形チャートなどをイメージで用意する必要がなくなりました。

sRGB以外でも色空間を指定できます。が、まだブラウザ実装状況が整っていない＆色空間の知見が最低限必要なので注意です。

いったんここまで備忘録として記載しましたが、何らかのお役に立てばうれしいです。

この記事が気に入ったらサポートをしてみませんか？