ブラウザの更新が続いていて、CSSだけで書ける範囲がまた少し広がっている。9月1日に公開されたFirefox 155と、8月にベータ版へ入ったChrome 153では、これまでJavaScriptを挟んで処理していたことや、回避策を組み合わせて実現していた表現が、スタイルシート側に移ってきた。
もちろん、実装されたばかりの指定をすぐ本番で使えるわけではない。ただ、どの方向に進んでいるかを知っておくと、いま組むサイトの設計や、数年後の書き直しの量が変わってくる。直近の更新から、頭の隅に置いておくと役に立ちそうなものを並べてみる。
HTMLの属性値をどのプロパティでも使えるようになった
CSSの attr() 関数は、これまで content プロパティの中でしか使えなかった。疑似要素にHTMLの属性値を文字として流し込む用途に限られていて、幅や時間の指定に使うことはできなかった。
Firefox 155では、この制限が外れて任意のプロパティで使えるようになった。width: attr(data-size px) のように単位を添えた型の指定ができ、値がなかったときのフォールバックや、名前空間つきの属性にも対応している。コンテナスタイルクエリの条件式の中でも使える。
棒グラフの長さや進捗バーの幅のように、データによって変わる数値をテンプレートから渡したい場面は多い。これまではインラインのstyle属性を書き出すか、JavaScriptで後から当てるかのどちらかだったが、data-属性に数値を入れておけばCSS側で受け取れる形になる。
色の透明度だけを差し替えられる関数
同じくFirefox 155で、alpha() 関数が使えるようになった。色を渡すと、他の成分はそのままに透明度だけを変えた色が返ってくる。関数の中では alpha というキーワードで元の色の透明度を参照できるので、alpha(from var(–brand) / calc(alpha * 0.5)) のように、元の値を基準にした計算も書ける。
ブランドカラーを変数でひとつ持っておき、ホバー時の背景や区切り線をそこから派生させる、といった使い方に向いている。色ごとに半透明版を別の変数として用意して二重に管理する、という手間が減らせる。
値の進み具合を数値として返す関数
progress() 関数も同じ更新で入った。開始値と終了値を渡すと、ある値がその間のどのあたりまで進んだかを数値で返す。opacity: calc(0.4 + progress(100cqw, 300px, 900px) * 0.6) と書けば、コンテナの幅が300pxから900pxへ広がるあいだに不透明度が変化していく。
これまでも calc() と clamp() の組み合わせで近いことはできたが、式が長くなって後から読み解きにくかった。どこからどこまで変化させたいのかが、そのまま式の形に出る。
スクロールの軸を分けて指定できるようにする動き
Chrome 153のベータでは、スクロールまわりの指定がふたつ増えている。ひとつは overflow プロパティで、scroll と clip を軸ごとに組み合わせて書けるようになる。overflow: scroll clip のように指定すると、position: sticky の固定範囲を軸ごとに別の祖先要素へ預けられ、clip を指定した側は動かないまま保てる。
もうひとつは scroll-axis-lock という新しいプロパティ。ブラウザは指やホイールの動きが片方の軸に大きく偏ると、その軸だけにスクロールを固定してしまうことが多い。誤操作を防ぐには合理的な挙動だが、地図や大きな図面のように斜めへ動かしたい領域では、固定がかからない角度から操作を始めないといけない、という不便につながる。この指定で、固定しないようブラウザへ伝えられる。
名前が変わったものと、まだ既定で無効なもの
Firefox 155では font-stretch プロパティが font-width という名前に変わった。旧名は別名として引き続き動くが、算出済みスタイルを列挙すると font-width のほうが返るようになっている。スタイルをJavaScriptから読み取って処理しているところがあれば、影響を受けないか確かめておきたい。
一方で、枠線の描画領域に背景を切り抜く background-clip の border-area や、スクロール量に連動するアニメーションは、Firefox 155では既定で無効のままだ。設定を切り替えれば試せるが、検証記事を読むときは、そのまま出荷されたものなのか、設定で有効にして試したものなのかを分けて見ておいたほうがいい。
ここに挙げたものは、いずれも片方のブラウザで実装が進んだ段階で、主要ブラウザで揃うまでにはまだ時間がかかる。中小企業のサイトで今日から使い始める類の話ではない。それでも、属性値や色や進み具合といった、これまでスクリプトに任せていた計算がCSS側へ降りてきているという流れは共通している。手元の案件で、これは本当にスクリプトが要るのかと一度立ち止まってみると、思ったより短く書ける箇所が見つかるかもしれない。
