Kurs HTML

Wprowadzenie: Stylizowanie zaznaczenia użytkownika

Kiedy użytkownik zaznacza tekst na stronie internetowej (np. przeciągając myszą), przeglądarka domyślnie podświetla go, używając systemowych kolorów (zazwyczaj niebieskie tło i biały tekst).

Pseudoelement ::selection pozwala **nadpisać domyślne style zaznaczenia** i zdefiniować własny wygląd dla zaznaczonego fragmentu tekstu.

Daje to możliwość dostosowania wyglądu zaznaczenia do kolorystyki i stylu strony, poprawiając spójność wizualną.

Jak działa ::selection?

Pseudoelement ::selection stosuje się do fragmentu dokumentu, który został aktualnie zaznaczony przez użytkownika. Można go zastosować globalnie (bez poprzedzającego selektora) lub do konkretnych elementów, aby styl zaznaczenia różnił się w zależności od kontekstu.

<p class="custom-selection">Zaznacz fragment tego tekstu, aby zobaczyć niestandardowy styl zaznaczenia. Kolory tła i tekstu zostaną zmienione.</p>
<p>Ten tekst będzie miał domyślne zaznaczenie systemowe.</p>Kopiuj

/* Globalny styl zaznaczenia dla całej strony */
/* (Uwaga: niektóre przeglądarki wymagają prefixu -moz-) */
::selection {
  background-color: #ffcc00; /* Żółte tło */
  color: #333; /* Ciemny tekst */
}
::-moz-selection { /* Dla Firefoxa */
  background-color: #ffcc00;
  color: #333;
}

/* Niestandardowy styl zaznaczenia tylko dla elementów .custom-selection */
.custom-selection::selection {
  background-color: darkred; /* Ciemnoczerwone tło */
  color: white; /* Biały tekst */
}
.custom-selection::-moz-selection { /* Dla Firefoxa */
  background-color: darkred;
  color: white;
}
Kopiuj

Wypróbuj: Zaznacz tekst w pierwszym akapicie - powinien mieć ciemnoczerwone tło i biały tekst. Następnie zaznacz tekst w drugim akapicie - powinien mieć żółte tło i ciemny tekst (lub domyślne style systemowe, jeśli globalne style ::selection nie zostały zastosowane lub przeglądarka ich nie obsługuje w pełni).

Uwaga: Ze względu na historyczne różnice implementacyjne, dla zapewnienia kompatybilności z przeglądarką Firefox często dodaje się również regułę z prefiksem ::-moz-selection.

Dozwolone właściwości CSS dla ::selection

Zakres właściwości, które można bezpiecznie stosować do ::selection, jest **bardzo ograniczony**. Główne właściwości, które działają spójnie w większości przeglądarek, to:

• color: Kolor zaznaczonego tekstu.
• background-color: Kolor tła zaznaczenia.
• text-shadow: Cień dla zaznaczonego tekstu (wsparcie może być różne).
• cursor: Kształt kursora nad zaznaczonym tekstem (rzadko używane).
• outline: Obrys wokół zaznaczonego tekstu (wsparcie może być różne).

Właściwości takie jak background-image, font-size, margin, padding, border **nie działają** lub nie są wspierane dla ::selection.

Celem jest głównie zmiana kolorów zaznaczenia, aby pasowały do projektu strony, bez wprowadzania drastycznych zmian w układzie czy typografii.

Wskazówki dotyczące użycia ::selection

• Kontrast: Upewnij się, że wybrany kolor tekstu i tła zapewniają wystarczający kontrast, aby zaznaczony tekst był czytelny. Narzędzia do sprawdzania kontrastu (dostępne online lub w narzędziach deweloperskich) mogą być pomocne.
• Spójność: Staraj się używać spójnych stylów zaznaczenia na całej stronie, chyba że istnieje dobry powód, aby różnicować je w konkretnych sekcjach.
• Subtelność: Zbyt jaskrawe lub nietypowe kolory zaznaczenia mogą rozpraszać użytkownika. Często subtelna zmiana domyślnych kolorów jest lepsza niż drastyczna modyfikacja.
• Testowanie: Zawsze testuj wygląd zaznaczenia w różnych przeglądarkach (w tym Firefox z prefiksem ::-moz-selection), aby upewnić się, że efekt jest zgodny z oczekiwaniami.