pseudo-elements

疑似要素

このスキルでは、CSS の疑似要素と View Transitions API を確認します。装飾目的のレイヤーには、ノードを追加するのではなく疑似要素を優先します。

各チェックはペアになっています。問題のある行と、その置き換えとなる行を並べて示します。

content: "" は必須です。指定しないと ::before と ::after は描画されません。これは明確な要件です。装飾的なオーバーレイやヒット領域の拡張だけに使う 2 つ目の DOM ノードは、疑似要素で実現できる場合、指摘の対象です。最小ターゲットサイズについては laws-of-ux を参照してください。疑似要素を使ったシャドウのアニメーションについては visual-design を参照してください。コンポーネントの終了時のマウントについては exit-animations を参照してください。

使用する場面

ホバー時のレイヤー、ヒット領域、プレースホルダー、選択範囲、ダイアログの背景、または共有要素によるページ遷移をスタイリングするときに使用します。その場でマウントとアンマウントを行う Motion ツリーには exit-animations を使用してください。

1. 装飾レイヤーを確認する

対象範囲のファイルを読みます。::before、::after、::backdrop、::placeholder、::selection、::marker、::first-line、および view-transition-name や startViewTransition の呼び出しをすべて列挙します。

2. 生成ボックスを確認する

::before と ::after には、通常 "" を content に設定します。これは pseudo-content-required です。装飾的なオーバーレイ、下線、ヒット領域の拡張には、空の span ではなく疑似要素を使います。これは pseudo-over-dom-node です。絶対配置された疑似要素には、position: relative の親要素が必要です。これは pseudo-position-relative-parent です。疑似要素がテキストに重なる場合は、テキストをその上に配置します。通常は疑似要素に z-index: -1 を設定します。これは pseudo-z-index-layering です。

疑似要素に負のインセットを指定して、ヒット領域を広げます。たとえば inset: -8px -12px のようにします。これは pseudo-hit-target-expansion です。最小ターゲットサイズの 32px については laws-of-ux を参照してください。

リストマーカーのスタイリングには、見せかけの箇条書き要素ではなく ::marker を使います。これは pseudo-marker-styling です。文章の先頭行のスタイリングには ::first-line を使います。これは pseudo-first-line-styling です。

3. ネイティブの疑似要素とビュー遷移を確認する

dialog またはポップオーバーでページを暗くする場合は、兄弟要素のオーバーレイ div ではなく ::backdrop を使います。これは native-backdrop-styling です。プレースホルダーテキストには ::placeholder を使います。これは native-placeholder-styling です。選択色には ::selection を使います。これは native-selection-styling です。

ページ間で変形させる要素は、単一の参加要素に view-transition-name を設定します。これは transition-name-required です。遷移の実行中、この名前は一意である必要があります。これは transition-name-unique です。ターゲットに名前を割り当てる際は、ソースから名前をクリアします。これは transition-name-cleanup です。共有要素によるページ遷移には、Motion の layoutId ではなく document.startViewTransition を優先します。これは transition-over-js-library です。カスタムのタイミングは、デフォルトのクロスフェードだけに頼らず、::view-transition-group に設定します。これは transition-style-pseudo-elements です。

4. 報告して終了する

指摘事項を記載してから、概要を記載します。セマンティック要素を疑似要素に置き換えてはいけません。

対になるもの

すべてのチェックは対になっています。誤った行の隣に、それを置き換える行があります。

ルール	誤り	置き換え
pseudo-content-required	.button::before { position: absolute }	content: "" を追加する
pseudo-over-dom-node	ボタン内の <span className={styles.background} />	その背景には .button::before を使う
pseudo-position-relative-parent	static な親要素に設定された絶対配置の ::before	.button { position: relative }
pseudo-z-index-layering	ラベルの上に重なる、z-index のない ::before の背景	疑似要素に z-index: -1 を設定する
pseudo-hit-target-expansion	グリフと同じ大きさのヒット領域	::before に inset: -8px -12px を設定する
pseudo-marker-styling	箇条書きに見せかけた要素	li::marker
pseudo-first-line-styling	折り返された先頭行を囲む span	p::first-line
native-backdrop-styling	<dialog> の背後に置かれた兄弟オーバーレイ	dialog::backdrop
native-placeholder-styling	入力欄が空のときに切り替えるプレースホルダー用の <span>	input::placeholder
native-selection-styling	ラッパーに設定された選択色	::selection
transition-name-unique	すべてのカードに設定された .card { view-transition-name: card }	アクティブな要素にのみ名前を設定する
transition-name-cleanup	切り替え後もソースに viewTransitionName が残る	コールバック内でクリアする
transition-over-js-library	ページをまたぐ共有要素に対する layoutId	document.startViewTransition

レポート

重大度。 HIGH は、content がないため描画されない疑似要素、または名前が衝突するビュー遷移名です。MEDIUM は、余分な装飾用ノード、背景用の div、クリアされない名前、または拡張されていないヒット領域です。LOW は、UI のほかの部分にはスタイルが設定されている一方で、スタイルの設定されていない ::selection または ::marker です。

検証。 対象ファイルで宣言されている値を読み取ります。ブラウザーの使用は任意です。実行できなかったチェックには Not verified と記載します。

形式。 根本原因ごとに指摘を 1 件記載します。

file:line - [rule-id] what is wrong

続けて、次の要約を記載します。

ルール	件数	重大度

HIGH が 1 件でも残っている場合は Block とします。それ以外は Approve とし、重大度の低い行も表に残します。読んでいないファイルを Approve にしてはいけません。報告事項がない場合は「対応が必要な指摘はありません」と記載し、未検証の項目を列挙します。