Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki

Pseudoelement ::selection

Email Drukuj PDF

Pseudoelement ::selection służy do formatowania tekstu zaznaczonego przez użytkownika strony. Wraz z tym elementem możemy używać następujących stylów:

  • color,

  • background,

  • cursor,

  • outline.

Poniżej zamieszczam przykład wykorzystania omawianego pseudoelementu.

P::selection

{

color:red;

}

Dzięki powyższej deklaracji wpisanej do arkusza stylów zaznaczony blok tekstu (zamknięty pomiędzy znaczniki <P></P>) zostanie pokolorowany na czerwono. Aby zobaczyć efekt działania niniejszego przykładu, zaznacz tekst widoczny poniżej (tak jakbyś chciał go skopiować do schowka systemowego).

<<przykład>>

<html>

<head>

<meta http-equiv="Content-type" content="text/html;charset=ISO-8859-2">

<title>Tytuł Strony WWW</title>

<style type="text/css">

P::selection

{

color:red;

}

}

</style>

</head>

<body>

<div>

<h1>Lorem ipsum dolor sit amet</h1>

<p>Zaznacz ten tekst, tak by go skopiować do schowka systemowego. Tekst powinien zmienić kolor na czerwony</p>

</div>

</body>

</html>

<</przykład>

Pseudoelement ::selection nie działa do końca poprawnie w popularnych przeglądarkach dostępnych na rynku. Dokładniej mówiąc, przykład, o którym mowa w niniejszym podrozdziale, zadziała w Operze, Safari i Chrome. Natomiast użytkownicy przeglądarek Mozilla Firefox oraz Internet Explorer muszą obejść się smakiem.

Obsługa pseudoelementu ::selection w przeglądarkach Opera, Safari i Chrome nie jest jednolita. W chwili pracy nad niniejszym kursem zaznaczenie tekstu w powyższym przykładzie w przeglądarce Chrome i Safari zmieniało kolor tekstu i kolor tła. Natomiast Opera zachowywała kolor tła i zmieniała kolor tekstu. Jeżeli jednak do stylów opisujących pseudoelement ::selection dodamy wpis background-color z definicją jakiegoś koloru, to wtedy zarówno w Operze, jak i w Safari i Chrome zaznaczony tekst będzie wyglądać tak samo.

Na rysunku 15.12 przestawiłem przykład działania pseudoelementu ::selection, tak by użytkownicy Mozilli Firefox i Internet Explorera mogli zobaczyć omawiany element w akcji.

Rysunek 15.12. Przykład działania pseudoelementu ::selection

 

CSS. Tworzenie nowoczesnych stron WWW.

CSS3. Tworzenie nowoczesnych stron WWW
(czerwiec 2012)

HTML5 i CSS3. Standardy przyszłości

HTML5 i CSS3
Standardy przyszłości

CSS3. Szybki start. Wydanie V

CSS3. Szybki start.
Wydanie V

Nowości Helionu

Statystyki

Użytkowników : 766
Artykułów : 513
Zakładki : 28
Odsłon : 15752052