Introduction

2024年はクラシックな今まで新しいCSSの分岐点となったみたい。
NewなCSSによって今までJSを利用してどうにかしてきた実装部分をどうにかしてくれるものが登場した。
ブラウザベンダーがこれらに取り組んでくれたからこそである。本当に感謝🙏🙏

T-shirt

Tシャツ販売中。

Demographics

総勢9704名が回答してくれたみたい。

USが1,135人と多い。日本は114人。もっといると思った。
年収については割愛。

年齢は30~39歳が42%
経験年数は5~9年が26%
30代で絞ると、10~14年が32%と一番多い。20代をそのまま積んでる感じですかね。

会社の規模は101~1000人。

大学卒業生が多いみたいで、それによる年収アップも見受けられるが、必ずしもプログラミングに関連する学位の必要はない。

Features

CSS Filter Effectsが一番使われているのが驚き。aspect-ratioが普及しまくっているとばかり...

以下は気になったやつ

filterとbackdrop-filterの差異

filter：その画像に対して。
backdrop-filter：後ろの画像に対して。

CSS比較関数(min, max, clamp)

お世話になっております。
clampをもっと活かしたいのにいつも計算ロジックがよくわからん...ってなってしまうの辛い。
どこかで一次関数がわかれば計算できるみたいな記事あったのに見失ったの悲しい。

focus-visibleとfocusの差異

focus-visible：キーボード操作
focus：キーボード操作とマウス操作
このあたり、もう少し調べたい。他の操作(あるのか?)に対しても影響があるのか。
jsのfocus()メソッドは こちら の記事を参考。

CSS Nesting

CSSでもネストが可能👏
とはいえ、BEMのような連結は不可能なので、このあたりで導入しきれるかが難しそう。
個人的には連結を利用するとVSCodeで一発検索が出来ないのでもどかしさはある...

prefers-color-scheme

OSのカラーテーマを検出するメディア特性。
ダークモード用のCSSの作り分けに利用できる。

line-clamp

ブロックコンテナーの内容を指定した行数に制限することができる。
おまじないのように

display: -webkit-box;
-webkit-box-orient: vertical;

は追加することがあるが、これが無いと使用できないので必須条件なんですね。

prefers-reduced-motion

ユーザーの設定で余計なアニメーションなどの動きを抑えたいという設定をしていることを検出するメディア特性

font-display

フォントの読み込みが完了するまでの間、テキストをどう表示するかを設定できる。
詳しくはこの記事が解説してくださっています。感謝🙏

@supports

CSSのアットルールの１つ。
CSSのプロパティ、プロパティと値の組み合わせでブラウザのサポートがあるかをチェックする機能。

mix-blend-mode

重なっている要素同士をブレンドして見え方を変える。
ほぼ問題なく使えそう

background-blend-mode

背景画像と背景色、背景画像と背景画像でのブレンドができる。
ブラウザは問題なし。

isolation

isolation: isolate で新しい重ね合わせコンテキストを生成する。
これによって干渉したくない要素同士のz-index問題を解決することができる。
わかりやすいのはこちらの記事🙏

論理プロパティ

テキストの流れる方向に合わせて値を設定できる。
block：横書きに対して垂直方向
inline：横書きに対して水平方向
これと普通の指定を混合しちゃうときがあるので注意。
縦・横のみの指定が楽になったのでそういう使い方しがち🥲

scroll-snap-type

スナップ点...？が存在する時に、その点に合わせて強制移動することが可能。(表現合ってるかな)
この移動時の動きをカスタムはできず、ユーザー側の設定に委ねられる。
スナップさせる方向(x,y,論理プロパティ,both)やその強制力(mandatory,proximity)を設定できる。
これがあれば画面幅目一杯のコンテンツを1つずつ見せていくみたいな表現しやすいのかも。
アクセシビリティを考慮すると、文章を読む必要がある時は強制力が弱めのproximityが良いのかも？

scroll-snap-align

スクロールスナップで止まる要素のどの位置に止めるかの設定。

text-wrap: balance

複数行のテキストの横幅をすべて均一に揃える。
日本語でこれを使う場面は少なそう。

:where()