#CSS
12 件
CSS に関数と条件分岐が入ってきた:@function と if()
CSS に追加された @function と if() は、コンポーネントが抱える「同じ宣言のコピペ」を減らす。どちらもまだ Baseline ではないが、何を置き換えるのかは先に読む価値がある。
text-box-trim が使えるようになった:見出しの上下の余白を削る
行ボックスは常に文字より高い。見出し上の半行分の余白は負のマージンで誤魔化してきた。text-box-trim はそれを正しく解決する。
Chrome 155:JPEG XL が復活し、耐量子アルゴリズムが Web Crypto へ
Chrome 155 は Rust 実装の jxl-rs で JPEG XL を直接デコードし、Web Crypto API に ML-KEM と ML-DSA を追加しました。
sibling-index() と sibling-count():CSS がついに自分が何番目かを知る
Firefox 154 がこの二つの関数を Baseline に押し上げた。兄弟の中での位置と兄弟の総数を返すので、時間差アニメーション、順序に応じた配色、均等割りまで CSS で計算でき、要素ごとのインライン変数が要らなくなる。
@layer で CSS の優先順位を「詳細度競争」から「順序の宣言」へ
スタイルが崩壊するのは詳細度を足して解決するからです。カスケード層は順序を明示します。層の間は順序のみ、層の内部では従来どおり詳細度で決まります。
アンカーがヘッダーに隠れる:scroll-padding-top を一箇所に
固定ヘッダーはアンカーの着地点を隠す。見出しごとの scroll-margin は必ず漏れる。正解はスクロールコンテナの scroll-padding-top で、実際のヘッダー高さを ResizeObserver から戻す。
モーダルはネイティブの dialog で:無料で付いてくるものが多い
自前のモーダルはフォーカストラップ、ESC、スクロール固定、フォーカス復帰を全部書くことになる。dialog と showModal なら全部入りで ::backdrop も使える。
ダークモードなのにフォームが白い:color-scheme が本丸
背景を暗くしてもネイティブコントロールは暗くならない。select のポップアップや日付ピッカー、自動入力の下地は color-scheme が決め、accent-color はチェックボックスとスライダーまで。
ヘッダーの高さを勘で書かない:ResizeObserver で実測して戻す
ナビの折り返し、遅れて届く Web フォント、内容の長さの変化で、CSS に書いた定数はすぐずれる。ResizeObserver で要素そのものを観測し、実測値を変数に書き戻す。
デザイントークン:1ファイルでサイト全体を統制する
色・余白・角丸をすべて _tokens.scss に集約した理由と、ビジュアル方針の変更が2ファイルの書き換えだけで済んだ話。
孔版印刷の制約をデザイントークンに翻訳する
このサイトの視覚方向は孔版印刷(リソ)です。実際にやったのは印刷の物理的な制約をトークンに書き出すことで、おかげで見た目を変えても触ったのは 2 ファイルだけ、コンポーネントは 1 行も直していません。
View Transitions でテーマ切り替えの波紋を作る
クリック位置から広がる円で新しいテーマを現します。半径は最も遠い角まで届く必要があり、終了時にカスタムプロパティを消さないと次の切り替えに漏れます。
