Zmiany dziedziczenia stylów zaznaczenia CSS

Stephen Chenney

Opublikowano: 8 października 2024 r.

W Chrome 131 zmienia się dziedziczenie wyróżnionych elementów CSS w interfejsach ::selection i Pseudoklasy: ::target-text. Ma to na celu utworzenie bardziej intuicyjnego modelu dziedziczenia i dostosowanie go do niedawno dodanych pseudoklas ::highlight, ::spelling-error i ::grammar-error. W tym poście objaśniamy tę zmianę, która nie powinna będą miały zauważalny wpływ na większość witryn.

Styl zaznaczenia

Stylizacja wyglądu wybranego tekstu może przekazywać użytkownikom znaczenie, np. przeznaczenie wybranych treści lub brak możliwości ich wybrania. Na przykład w GitHubie kolory zostały wybrane inaczej niż w wybranym katalogu do jego struktury.

CSS obsługuje style zaznaczenia z atrybutem ::selection pseudoelement, jeden z zestawów pseudoelementów znanych jako wyróżnij pseudoelementy. Te pseudoelementy kontrolują sposób wyświetlania tekstu na różnych kontach użytkowników. działań opartych na przeglądarce lub skryptach. Oprócz zaznaczania możesz stylizować błędy ortograficzne (::spelling-error), błędy gramatyczne (::grammar-error), tekstowe cele z osadzonym adresem URL (::target-text) oraz wyróżnienia wygenerowane przez skrypt (::highlight).

Podobnie jak w przypadku dowolnej kolekcji właściwości CSS, podczas projektowania witryny należy wziąć pod uwagę dziedziczenie. Ogólnie deweloperzy oczekują, że właściwości CSS będą dziedziczone w drzewie elementów DOM (np. font) lub wcale nie będą dziedziczone (np. background).

Zmiany w działaniu zaznaczania w Chrome 131

Weź pod uwagę ten fragment dokumentu:

p {
  color: red;
}

.blue::selection {
  color: blue;
}

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

Deklaracje stylu fragmentu modyfikują kolor zaznaczonego tekstu, z jedną regułą pasującą do wszystkich elementów i jedną pasującą do tych z klasą "blue". Po wybraniu opcji Chrome w wersji 130 lub starszej:

Tekst, który powinien być niebieski, jest czerwony.

Po wybraniu tej opcji w Chrome 131 wynik zmieni się na taki:

Tekst jest teraz podświetlony na niebiesko.

Co się zmieniło? Zachowanie dziedziczenia właściwości selekcji było wcześniej implementowane za pomocą dziedziczenia elementu źródłowego, w którym do wyboru używane są właściwości elementu ::selection dopasowanego do wybranego elementu. Tego modelu używają Chrome w wersji 130 i starszych, wyróżniony tekst nie pasuje do wzorca ::selection, ponieważ .blue::selection dopasowuje tylko elementy z klasą "blue", której brakuje elementowi <em>.

Chrome 131 umożliwia nowy sposób działania, w ramach którego elementy dziedziczą działanie wyboru z metody rodzica. W poprzednim przykładzie element <em> nie ma elementów ::selection pasujących do siebie, więc dziedziczy kolory elementów <p>. To jest to tzw. dziedziczenie wyróżnień CSS. Możesz je wypróbować wcześniej. wersji Chrome po włączeniu eksperymentalnych funkcji platformy internetowej w chrome://flags.

W przypadku witryn, które polegają na właściwościach selekcji, które nie są dziedziczone, mogą wystąpić zmiany w wyglądzie wybranego tekstu, ale raporty o błędach wskazują, że takich przypadków jest niewiele.

Właściwości niestandardowe CSS wybrane do wyboru nadal działają

Wiele witryn symuluje dziedziczenie wyróżnień CSS za pomocą właściwości niestandardowych w CSS. Właściwości niestandardowe są dziedziczone przez drzewo elementów, co nadaje atrybutowi „dziedziczenie od elementu nadrzędnego” z fragmentem kodu podobnym do tego:

: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>

Oto wynik wybrany w Chrome 130 i 131:

Pierwszy wiersz jest zielony, a drugi niebieski.

W tym przypadku każdy element dziedziczy pewną wartość właściwości --selection-color z drzewa elementów, a ten kolor jest używany po wybraniu tekstu. Żywioły z klasą .blue, a elementy podrzędne mają po zaznaczeniu kolor niebieski, a inne elementy są jasnozielone. Wiele witryn korzysta z tej techniki, a ta metoda jest zalecana na Stack Overflow.

Aby zachować zgodność, model dziedziczenia CSS wyróżniania określa, że ::selection (i inne pseudoelementy wyróżnienia CSS) dziedziczą właściwość niestandardową z elementu źródłowego (czyli stosowanego do nich elementu) do). Zmiany w Chrome 131 nie powinny mieć wpływu na witryny korzystające z tej metody.

Właściwości niestandardowe zdefiniowane w samym pseudoelementu ::selection są ignorowane w celu uniknięcia konkurujących zachowań dziedziczenia. Należy zdefiniować właściwości w samym elemencie, a następnie odwoływać się do nich w pseudoelemencie.

Selektory uniwersalne dla ::selection wyłączają dziedziczenie wyróżnienia

Witryny, które nie używają właściwości niestandardowych w CSS, mogły używać selektora uniwersalnego do ustawiania koloru wybranego tekstu. Na przykład:

::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>

Tak wygląda efekt po wybraniu zarówno Chrome 130 (i starszych), jak i Chrome 131 (i później):

Pierwszy wiersz tekstu jest zielony. Drugi jest niebieski, ale słowo jest podkreślone na zielono.

Dziedziczenie wyróżnienia CSS nie powoduje, że drugi wyróżniony tekst dziedziczy kolor niebieski od swojego nadrzędnego elementu, ponieważ uniwersalny selektor pasuje do elementu <em> i stosuje uniwersalny kolor wyróżnienia, czyli jasnozielony.

Aby skorzystać z dziedziczenia wyróżnień CSS, zmień uniwersalny selektor aby dopasować tylko element główny, który będzie dziedziczony przez jego elementy podrzędne:

:root::selection {
  color: lightgreen;
}

.blue::selection {
  color: blue;
}

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

Wynik w Chrome 131 wygląda tak:

Pierwszy wiersz tekstu jest zielony. Drugi wiersz jest niebieski.

Jeśli witryna zmienia kolory zaznaczonego tekstu, ale nie korzysta z właściwości niestandardowych, prawdopodobnie masz uniwersalny selektor dla pseudo ::selection. Dobrą wiadomością jest to, że ta zmiana w Chrome nie spowoduje problemów z Twoją witryną, ale nie będziesz mieć dostępu do żadnych korzyści ergonomicznych wynikających z dziedziczenia wyróżnień.

Zmienia się też styl ::target-text

Wszystkie opisane tutaj zachowania i zmiany dotyczą pseudoelementu ::target-text, tak jak w przypadku elementu ::selection. Przypadki użycia stylizacji tekstu docelowego w pojedynczej witrynie są ograniczone, a ta funkcja jest dość nowa, więc jest mało prawdopodobne, aby w Twojej witrynie zmieniło się zachowanie ::target-text.

Dlaczego wprowadzamy tę zmianę?

Gdy pracowano nad innymi pseudoelementami, funkcja CSS Workflow Grupa postanowiła wdrożyć dziedziczenie z modelem dziedziczenia podświetlenia. Ta metoda była już używana w specyfikacji pliku ::selection pseudoelementu, ale nie został on zaimplementowany w przeglądarkach. Brak wyboru pseudoelementy korzystają z dziedziczenia podświetleń, gdzie pseudoelement jest dziedziczony jakby była nieruchomością. Oznacza to, że elementy dziedziczą wyróżnione pseudoelementy od nadrzędnego dokumentu.

W celu zachowania spójności we wszystkich pseudoruchach CSS Grupa potwierdziła ponowne wsparcie dziedziczenia najciekawszych informacji w przypadku reguł ::selection. przeglądarki pracują nad wprowadzeniem nowego sposobu działania, starając się nie do istniejących witryn.

Wypróbuj

Zmiany te ilustruje poniższy przykładowy kod w usłudze CodePen. Wypróbuj w Chrome 131.