CSS 選択のスタイル設定の継承の変更

Stephen Chenney

公開日: 2024 年 10 月 8 日

Chrome 131 以降、::selection と ::target-text 疑似クラス。これは、より直感的なモデルを作成し、 継承され、最近追加された ::highlight、::spelling-error と一致します。 および ::grammar-error 疑似クラス。この投稿ではこの変更について説明しますが、 ほとんどのサイトに大きな影響を及ぼします。

選択範囲のスタイル設定

選択したテキストの外観をスタイル設定することで、次のような意味がユーザーに伝わります。 テキストをまったく選択できない、などの理由が考えられます。 たとえば、GitHub では、選択したコードの色が選択したディレクトリ構造とは異なります。

CSS は、ハイライト疑似要素と呼ばれる一連の疑似要素の 1 つである ::selection 疑似要素による選択スタイルをサポートしています。これらの疑似要素は、さまざまなユーザー、たとえば、 スクリプト主導のアクションも実行できます。選択範囲とは別に、スペルと エラー（::spelling-error）、文法エラー（::grammar-error）、URL 埋め込みテキスト ターゲット（::target-text）、スクリプトで生成されたハイライト（::highlight）。

他の CSS プロパティのコレクションと同様に、継承動作はサイトの設計時に考慮すべき重要な要素です。一般的にデベロッパーは プロパティを DOM 要素ツリー（ font など）、または継承されていないものを指定します（例: background）。

選択動作の変更（Chrome 131）

次のドキュメント フラグメントについて考えてみましょう。

p {
  color: red;
}

.blue::selection {
  color: blue;
}

<p class="blue">Some <em>emphasized</em> text that one would expect to be blue</p>

フラグメントのスタイル宣言は、選択したテキストの色を変更します。1 つのルールはすべての要素に一致し、もう 1 つのルールはクラス "blue" に一致します。Chrome 130 以前でこれを選択した場合、次の結果になります。

青色と想定されるテキストが赤色になっている。

Chrome 131 で選択すると、結果は次のようになります。

テキストが青色でハイライト表示されるようになりました。

変更点として、選択プロパティの継承動作は、 従来は開始要素の継承を通じて実装され、 選択内容では、要素に一致する ::selection のプロパティが使用されます。 選択します。Chrome バージョン 130 以前では、このモデルを使用しています。 強調表示されたテキストに一致する ::selection はありません。これは、.blue::selection <em> 要素にない "blue" クラスの要素にのみ一致します。

Chrome 131 で、要素が選択の動作を継承する新しい動作が可能に できます。上記の例では、<em> 要素に ::selection がありません。 そのため、<p> 要素の選択色を継承します。これは CSS ハイライトの継承と呼ばれ、chrome://flags で試験運用版のウェブ プラットフォームの機能を有効にすることで、以前の Chrome バージョンで試すことができます。

選択プロパティの継承に依存しているサイトでは、選択したテキストの外観が変更される可能性がありますが、バグレポートから得られた証拠によると、このような動作のユースケースはほとんどありません。

選択用の CSS カスタム プロパティは引き続き機能する

多くのサイトは CSS カスタムを使用して CSS ハイライトの継承をシミュレートしている プロパティです。カスタム プロパティは要素ツリーを介して継承され、次のコード スニペットのように「親から継承」の結果が得られます。

:root {
   --selection-color: lightgreen;
}

::selection {
  color: var(--selection-color);
}

.blue {
  --selection-color: blue;
}

<p>Some <em>emphasized</em> text</p>
<p class="blue">Some <em>emphasized</em> text that is blue</p>

Chrome 130 と 131 の両方で選択した場合の結果は次のようになります。

最初の行は緑色、2 番目の行は青色です。

この場合、すべての要素が --selection-color プロパティの値を継承します。 この色はテキストが選択されたときに使用されます。要素 .blue クラスとその子孫は、選択すると青色になり、 要素は薄い緑色です。多くのサイトでこの手法が使用されており、 Stack Overflow でおすすめしています。

互換性を維持するため、CSS ハイライト継承モデルでは、::selection（および他の CSS ハイライト擬似要素）が元の要素（適用される要素）からカスタム プロパティ値を継承するように指定されています。この方法を使用しているサイトは、Chrome 131 の変更の影響を受けません。

::selection 疑似要素自体で定義されているカスタム プロパティは無視されます 継承動作の競合を回避します。要素自体でプロパティを定義し、疑似要素で参照する必要があります。

::selection のユニバーサル セレクタでハイライトの継承を無効化

CSS カスタム プロパティを使用していないサイトでは、ユニバーサル セレクタを使用して選択したテキストの色を設定していた可能性があります。たとえば、次の CSS のようにします。

::selection /* = *::selection (universal) */ {
  color: lightgreen;
}

.blue::selection {
  color: blue;
}

<p>Some <em>emphasized</em> text</p>
<p class="blue">Some <em>emphasized</em> text</p>

Chrome 130 以前と Chrome 131 の両方で選択した場合の結果です （およびそれ以降）

最初の行のテキストは緑色です。2 番目は青色ですが、強調された単語は緑色です。

CSS ハイライトの継承では、2 番目の強調テキストが親から青色を継承することはありません。これは、ユニバーサル セレクタが <em> 要素と一致し、ユニバーサル ハイライト色（ライトグリーン）が適用されるためです。

CSS ハイライトの継承を利用するには、ユニバーサル セレクタを変更してください はルートのみと一致し、その子孫に継承されます。

:root::selection {
  color: lightgreen;
}

.blue::selection {
  color: blue;
}

<p>Some <em>emphasized</em> text</p>
<p class="blue">Some <em>emphasized</em> text</p>

Chrome 131 での結果は次のようになります。

最初の行のテキストは緑色です。2 つ目の線は青です。

サイトが選択色を変更しているが、カスタム プロパティを使用していない場合は、::selection 疑似クラスのユニバーサル セレクタが存在している可能性があります。良い点 Chrome のこの変更によって サイトが壊れることはありませんが ハイライトの継承による人間工学的なメリットを見逃す可能性があります。

::target-text のスタイルも変更されます

ここで説明する動作と変更はすべて、::selection と同様に ::target-text 疑似要素にも適用されます。1 つのサイトで複数のターゲット テキストのスタイル設定を使用するユースケースは限られており、この機能は非常に新しいため、サイトの ::target-text の動作が変更される可能性はほとんどありません。

変更の理由

その他のハイライト疑似要素が開発中だったとき、CSS の動作は グループは、ハイライト継承モデルで継承を実装することを解決しました。 これは、::selection 疑似要素の仕様ですでに定義されていた方法ですが、ブラウザでは実装されていませんでした。非選択 疑似要素はハイライト継承を使用し、疑似要素は継承される プロパティのように操作しますつまり、要素はドキュメントの親からハイライト疑似要素を継承します。

すべてのハイライト疑似クラスの一貫性を保つため、CSS Working Group は ::selection のハイライト継承のサポートを再確認しました。ブラウザは、既存のサイトを壊さないようにしながら、新しい動作をリリースするために取り組んでいます。

試してみる

次の CodePen は、変更内容を示しています。Chrome 131 でお試しください。

<ph type="x-smartling-placeholder">