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 |
