これまでCSSでは表現しきれず、JavaScriptやSassのような前処理ツールに任せてきた処理がいくつもありました。要素が並びの中で何番目かを数えたり、条件によって値を出し分けたりといった、いわば「ロジック」にあたる部分です。ここ最近、その領域をCSSの標準機能として扱えるようにする新しい関数がブラウザに入り始めています。中小企業サイトの制作でも、外部ライブラリを一つ減らせる余地が広がってきました。今回はそうした関数を並べて紹介します。
並びの順番を数える sibling-index() と sibling-count()
sibling-index() はその要素が兄弟要素の中で何番目かを返し、sibling-count() は兄弟要素の総数を返します。これまで各要素に少しずつ違う値を割り当てるには、:nth-child() を項目の数だけ書き並べるか、JavaScriptで番号を振るしかありませんでした。
この二つを calc() と組み合わせると、リストの各項目に段階的な遅延を与えるアニメーションが一行で書けます。たとえば animation-delay: calc(sibling-index() * 0.08s) と書けば、項目が5個でも500個でも同じ記述で順番にずれて動きます。ナビゲーションのメニューやカードの一覧を、順に浮かび上がらせるといった演出が、余分なマークアップなしで表現できるわけです。
遅延だけでなく、要素の位置に応じた大きさや透明度の調整、リストへの連番の割り当てなど、数式で表せる装飾なら幅広く応用できます。項目の増減があっても記述を書き直さずに済むため、更新頻度の高いお知らせ一覧や商品の並びといった、中身が動くコンテンツと相性がよい機能です。
値そのものを出し分ける if() 関数
if() は、スタイルクエリやメディアクエリ、機能クエリの結果に応じて、プロパティの値そのものを分岐させる関数です。これまで同じことをするには、状態ごとにクラスを付け替えたり、カスタムプロパティを何段も重ねて条件を組み立てたりする必要がありました。
if() を使うと、たとえばカスタムプロパティの値を見て背景色を切り替える、といった書き分けが一つのプロパティの中で完結します。分岐のたびにセレクタを増やさずに済むため、コンポーネントのスタイルが見通しよく保てます。テーマの切り替えやボタンの種類ごとの装飾など、これまで冗長になりがちだった部分を短く書ける関数です。
たとえば明るい配色と暗い配色を切り替えるサイトで、ボタンや枠線の色を状態に合わせて出し分ける、といった使い方が考えられます。従来はそのためにクラス名の組み合わせが増えていきがちでしたが、値の分岐を一箇所にまとめられると、後から見返したときの読みやすさが変わってきます。
導入時に押さえておきたいブラウザ対応
便利な一方で、対応状況にはまだ差があります。sibling-index() と sibling-count() はChromeが先行して対応し、Safariも追随、Firefoxは実装が進んでいる段階です。if() はさらに新しく、現時点ではChromiumを基盤とするブラウザが中心で、SafariやFirefoxはこれからという位置づけです。
つまり、いますぐ全ての利用者に届く機能とは言い切れません。本番のサイトでは @supports で対応ブラウザを見分け、未対応の環境には従来どおりの書き方を残しておくのが安全です。長くウェブ制作に携わってきた立場からも、こうした新機能は「安全な既定値を先に書き、その上に重ねる」という進め方を勧めたいところです。派手さはありませんが、この順序を守ることで、新しい表現を取り入れつつ表示崩れを避けられます。手元の小さなコンポーネントから試して、感触を確かめてみるのがよさそうです。
