タグアーカイブ 疑似要素

CSS最新情報まとめ。Safariテスト手法、::checkmark、データ属性によるアンカー制御

Web制作の現場では、新しいCSS機能のキャッチアップとブラウザ間の動作検証が日々の課題だ。CSS-Tricksの定期連載「What’s !important」第12回では、5月末時点で注目すべき6つのトピックが取り上げられている。

実機がないSafariでのテスト手法から、スタイル付与が難しかったチェックマークを操作できる新疑似要素、さらには一度は策定が見送られたHTML属性に代わるデータ属性を用いたアンカー制御テクニックまで、幅広い知見が共有された。

本記事ではこれらのトピックを整理し、実務への応用ポイントを解説する。とくにCSS-Tricksの著者Geoff Graham氏が自ら考案したアンカー制御の代替手法は、現場の制約を乗り越えるヒントになるはずだ。

Safariがない環境でSafariテストを実施する手法

Webブラウザのシェアで2番手に位置するSafariだが、その利用はAppleデバイスに限定されている。macOSやiOSを持たない開発者にとって、Safari専用のバグ潰しやレイアウト確認は長年の悩みの種だった。

Frontend Mastersの記事でDeclan Chidlow氏が解説したのは、予算や環境に制約がある状況下での実践的なSafariテスト手法だ。物理デバイスを持たずに検証するアプローチは、大きく3つのカテゴリに分けられる。

どの手法を選ぶべきか

最も確実なのはクラウド型のテストサービスだが、無料枠には限りがあり、動作速度もローカル環境に劣る。一方PlaywrightのWebKitビルドは、Safariのレンダリングエンジンを手軽に再現できる点で優れている。ただしフォントレンダリングや一部のOS依存機能まではカバーしきれない。

重要なのは「どのレベルで検証が必要か」の線引きだ。レイアウトの崩れやCSSプロパティの対応状況を確認するだけならPlaywrightで十分だが、タッチ操作やスクロール挙動、Apple Pay連携などの最終検証は、必ず実機かクラウドサービスで行うべきである。

::checkmark疑似要素が解決するチェックマークのスタイル課題

チェックボックスやラジオボタン、セレクトボックスのチェック状態を示すマーク。このUIパーツは長年、開発者の手によって擬似的に再現されてきた。本来のチェックマーク（チェック状態を示すインジケーター）にはCSSで直接スタイルを当てられなかったからだ。

Sunkanmi Fafowora氏がPiccalilliで紹介した::checkmark疑似要素は、この制約を根本から解決する。チェックボックスだけでなく、ラジオボタンやセレクトボックスのチェック状態にも作用する点がポイントだ。

この機能がブラウザに実装されれば、チェックボックス周りのCSSトリックは大幅に削減されるだろう。とくにフォームのブランディング要件が厳しいプロジェクトでは、作業工数の縮小に直結する。

border-shapeとshape()で広がるシェイプ表現の選択肢

CSSで複雑な図形を描くとき、これまではclip-pathが主戦場だった。Temani Afif氏がCSS Tipで示したのは、border-shapeプロパティとshape()関数を組み合わせるアプローチだ。

clip-pathが要素全体を切り抜くのに対し、border-shapeは境界線に沿ってシェイプを適用する。この違いにより、輪郭のみのシェイプや、塗りつぶしと輪郭を組み合わせた表現が容易になる。

実務での活用シーンとしては、カードUIの装飾枠や、セクション区切りに使うカスタムシェイプが考えられる。とくにECサイトの商品カードやブランドページのビジュアルセクションでは、微妙な形状の差別化がUIの印象を大きく左右する。

sibling-index()とsibling-count()がもたらす数理レイアウト

兄弟要素の中で「自分が何番目か」「兄弟全体で何個あるか」をCSSだけで取得できるsibling-index()とsibling-count()。この2つの関数はBaseline（ブラウザ間の相互運用が確立された機能群）への移行が目前に迫っている。

Smashing MagazineでDurgesh Pawar氏が公開した詳細な解説では、これらの関数を使った数学的レイアウトの実例が数多く紹介されている。たとえば、兄弟要素の数に応じてグリッドの列数を動的に変えたり、要素の位置に比例したスタイルを適用したりといったパターンだ。

とくにCMSで生成されるリストや、ユーザー投稿型のコンテンツ一覧では、アイテム数が動的に変動する。このようなシーンで、JavaScriptに頼らずCSSだけでレイアウトを最適化できる価値は大きい。Pawar氏の記事ではView Transitionsに関する連載もCSS-Tricksで展開されており、合わせて参照することを勧める。

anchor属性の代案としてのデータ属性制御テクニック

これはCSS-Tricksの著者Geoff Graham氏自身の取り組みだ。CSSアンカー位置指定において、HTML属性anchorの策定が見送られたことを受け、同氏はデータ属性とattr()関数を用いた代替手法を考案した。

アンカー位置指定とは、ある要素（ターゲット）を別の要素（アンカー）からの相対位置で配置する仕組みである。ポップオーバーやツールチップの位置決めに使われる。本来anchor属性は、このターゲットとアンカーの紐付けをHTML上で宣言的に行うために提案されていた。

この手法の実用性は、CSSのattr()関数の進化に依存している。attr()が<custom-ident>型をサポートするようになれば、データ属性の値をCSS内で参照し、アンカー名として利用できるようになる。ブラウザ実装の進捗を注視しつつ、先行してHTML構造をデータ属性ベースに整えておくことは、将来の移行コストを下げる有効な準備だ。

State of CSS 2026に見る開発者の学習負荷と向き合い方

毎年恒例のState of CSS調査が2026年版の回答受付を開始した。今回の特徴は、冒頭文から明確に打ち出された「取捨選択」の姿勢である。調査の主催者は、CSSの進化があまりに速く、すべてを追いかけることが逆に開発者の負担になっている現状を率直に認めている。

CSS-TricksのGraham氏もこの方針に賛同しつつ、「CSSの新機能を学んでいるときにさらに別の機能がリリースされる感覚は、圧倒的でありながら最高の体験でもある」とコメントしている。業務で必要な機能を見極め、それ以外は「面白そうだから」という理由で触れる余裕も持ちたいところだ。

ちなみに今回の調査期間中、Firefox 151がリリースされ、コンテナスタイルクエリがBaselineに到達した。デスクトップ向けではSafariの未対応が残るものの、モバイル含め多くの環境で動作する段階に入っている。またDocument Picture-in-Picture APIも新たに追加され、Webプラットフォーム全体の進化は依然として加速中だ。

この記事のポイント

• Safariのテストにはクラウドサービス・Playwright WebKitビルド・Epiphanyブラウザの3段階がある
• ::checkmark疑似要素は、チェックボックス・ラジオ・セレクトのチェック状態を直接スタイリングできる
• border-shapeとshape()の組み合わせで、輪郭・塗りつぶし・切り抜きを同一シェイプから切り替え可能
• sibling-index()とsibling-count()により、CSSだけで兄弟要素の位置と総数を取得できる
• 見送られたanchor属性の代わりに、データ属性とattr()を組み合わせたアンカー制御が提案されている

海田 洋祐

・ 複数業界における17年間のデジタルビジネス開発経験
・ ウェブサイト開発のためのHTML、PHP、CSS、Java等の実用的知識
・ 15ヶ国語対応の多言語SaaSの開発経験
・ 17年間にも及ぶ、Eコマース長期運営経験
・ 幅広い業界でのSEO最適化の豊富な経験

www.aandgweb.co.jp