18.1 Kursory: własność ‚cursor’

Własność ta służy do określania typu kursora urządzenia wskazującego. Opis wartości:

auto

Aplikacja kliencka wybiera kursor na podstawie kontekstu.

crosshair

Krzyżyk (np. dwie krótkie kreski przypominające znak "+").

default

Domyślny kursor platformy. Często ma postać strzałki.

pointer

Kursor oznaczający hiperłącze.

move

Oznacza, że coś powinno zostać przeniesione.

e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize

Oznacza, że jakaś krawędź powinna zostać przeniesiona. Na przykład kursor ‚se-resize’ jest używany, gdy ruch zaczyna się od południowo-wschodniego rogu pola.

text

Oznacza tekst, który można zaznaczyć. Często ma postać pionowej kreski (|)

wait

Kursor oznaczający, że program jest zajęty i należy czekać. Często ma postać zegarka lub klepsydry.

progress

Wskaźnik postępu. Program wykonuje jakieś zadania, ale w odróżnieniu od kursora ‚wait’ w tym przypadku użytkownik może używać programu. Często ma postać wirującej piłki lub strzałki z zegarkiem lub klepsydrą.

help

Oznacza, że dostępna jest pomoc na temat znajdującego się pod kursorem obiektu. Często ma postać znaku zapytania lub balonika.

<uri>

Aplikacja kliencka pobiera obraz kursora z zasobu wskazywanego przez identyfikator URI. Jeśli aplikacja kliencka nie może użyć pierwszego kursora z listy kursorów, powinna spróbować użyć drugiego itd. Jeśli aplikacja nie może użyć żadnego z kursorów zdefiniowanych przez użytkownika, powinna użyć kursora rodzajowego zdefiniowanego na końcu listy. Wewnętrzne rozmiary kursorów są obliczane tak samo, jak obrazów tła z tym wyjątkiem, że zamiast prostokąta ustanawiającego układ współrzędnych dla własności ‚background-image’ używany jest prostokąt zdefiniowany przez aplikację kliencką. Rozmiar prostokąta zdefiniowanego przez aplikację kliencką powinien zostać wyznaczony na podstawie rozmiaru typowego kursora w danym systemie operacyjnym. Jeśli kursor nie mieści się w tym prostokącie, aplikacja kliencka może go proporcjonalnie zmniejszyć do odpowiedniego rozmiaru.

:link,:visited { cursor: url(example.svg#linkcursor), url(hyper.cur), pointer }

18.2 Kolory systemowe

Poza zestawem predefiniowanych wartości kolorów dla tekstu, tła itd. w CSS 2 dostępny jest również zestaw nazw kolorów pozwalających na zastosowanie kolorystyki integrującej się ze środowiskiem graficznym systemu operacyjnego.

Jeśli w danym systemie nie ma odpowiedniej wartości, określona wartość powinna zostać zamieniona na najbliższą jej wartość systemową lub na kolor domyślny.

Poniżej znajduje się lista dodatkowych wartości, dostępnych dla własności CSS związanych z określaniem kolorów. Każda własność określająca kolor (np. ‚color’ czy ‚background-color’) przyjmuje wszystkie te nazwy jako wartości. Mimo że wielkość liter nie jest rozróżniana, zaleca się, aby stosować taki sam zapis, jak poniżej. Dzięki temu nazwy te są bardziej czytelne.

ActiveBorder

Obramowanie aktywnego okna.

ActiveCaption

Podpis aktywnego okna.

AppWorkspace

Kolor tła interfejsu wielodokumentowego.

Background

Tło pulpitu.

ButtonFace

Kolor pierwszego planu trójwymiarowych elementów ekranowych.

ButtonHighlight

Kolor podświetlenia trójwymiarowych elementów ekranowych (dla krawędzi odwróconych od źródła światła).

ButtonShadow

Kolor cienia trójwymiarowych elementów ekranowych.

ButtonText

Tekst na przyciskach.

CaptionText

Tekst w podpisie, polu wielkości oraz polu strzałki paska przewijania.

GrayText

Tekst elementu wyłączonego. Jeśli sterownik ekranu nie obsługuje jednolitego szarego koloru, kolor ten zostanie ustawiony na wartość #000.

Highlight

Zaznaczony element w kontrolce.

HighlightText

Tekst elementu zaznaczonego w kontrolce.

InactiveBorder

Obramowanie nieaktywnego okna.

InactiveCaption

Podpis nieaktywnego okna.

InactiveCaptionText

Kolor tekstu w nieaktywnym podpisie.

InfoBackground

Kolor tła chmurki.

InfoText

Kolor tekstu w chmurkach.

Menu

Tło menu.

MenuText

Tekst w menu.

Scrollbar

Szary obszar paska przewijania.

ThreeDDarkShadow

Ciemny cień trójwymiarowych elementów ekranowych.

ThreeDFace

Kolor pierwszego planu trójwymiarowych elementów ekranowych.

ThreeDHighlight

Kolor podświetlenia trójwymiarowych elementów ekranowych.

ThreeDLightShadow

Kolor światła trójwymiarowych elementów ekranowych (dla krawędzi odwróconych w stronę źródła światła).

ThreeDShadow

Ciemny cień trójwymiarowych elementów ekranowych.

Window

Tło okna.

WindowFrame

Ramka okna.

WindowText

Tekst w oknach.

p { color: WindowText; background-color: Window }

18.3 Preferencje użytkownika dotyczące pisma

Podobnie jak w przypadku kolorów, zasoby systemowe można wykorzystywać również do określania własności pisma. Szczegółowe informacje na ten temat można znaleźć w opisie własności ‚font’.

18.4 Dynamiczne obrysy: własność ‚outline’

Czasami dla wyróżnienia obiektów wizualnych (np. przycisków, aktywnych pól formularzy, map obrazkowych itp.) stosuje się obrysy. W CSS 2.1 różnice między obrysem a obramowaniem są następujące:

1. Obrys nie zajmuje miejsca.
2. Obrys nie musi być prostokątny.

Do definiowania dynamicznych obrysów służą poniższe własności:

Obrys jest rysowany "na" polu, tzn. znajduje się on zawsze na wierzchu i nie ma wpływu na położenie ani rozmiar tego pola, ani żadnych innych pól. Dlatego wyświetlenie lub usunięcie obrysu nie powoduje zmiany układu ani przepełnienia.

Obrys może być rysowany bezpośrednio za krawędzią obramowania.

Obrys nie musi być prostokątny. Jeśli na przykład element zostanie podzielony na kilka linii, obrys zostanie rozciągnięty tak, aby obejmować wszystkie pola tego elementu jak najściślej. W przeciwieństwie do obramowania obrys nie jest przerywany na początkach i końcach pól, tylko w miarę możliwości jest zawsze ciągły.

Własność ‚outline-width’ przyjmuje takie same wartości, jak własność ‚border-width’.

Własność ‚outline-style’ przyjmuje takie same wartości, jak własność ‚border-style’ z wyjątkiem ‚hidden’, która dla obrysów jest niedozwolona.

Własność ‚outline-color’ przyjmuje wszystkie kolory oraz słowo kluczowe ‚invert’. Wartość ‚invert’ dokonuje inwersji kolorów pikseli na ekranie. Jest to często stosowana sztuczka zapewniająca widoczność obramowania fokusu bez względu na kolor tła.

Zgodne aplikacje klienckie mogą ignorować wartość ‚invert’ na platformach nie obsługujących inwersji kolorów pikseli na ekranie. Jeśli aplikacja kliencka nie obsługuje wartości ‚invert’, wartością domyślną własności ‚outline-color’ jest wartość własności ‚color’, podobnie jak w przypadku wartości domyślnej własności ‚border-top-color’.

‚outline’ to własność zbiorcza pozwalająca ustawić wartości własności ‚outline-style’, ‚outline-width’ oraz ‚outline-color’.

Niniejsza specyfikacja nie określa sposobu rysowania nakładających się obrysów ani obrysów elementów, które są częściowo zasłonięte przez inne elementy.

button { outline : thick solid}

18.4.1 Obrysy i fokus

Graficzne interfejsy użytkownika mogą stosować obrysy do wizualnego wyróżniania elementów z fokusem. Obrysy te są niezależne od obramowania, a ich wyświetlanie i ukrywanie nie powinno powodować zmian w układzie strony. Fokus jest przedmiotem interakcji użytkownika z dokumentem (np. przy wprowadzaniu tekstu, klikaniu przycisku itd.). Aplikacje klienckie obsługujące grupę mediów interaktywnych muszą śledzić fokus i go w jakiś sposób reprezentować. Efekt taki można osiągnąć dzięki kombinacji dynamicznych obrysów i pseudoklasy :focus.

:focus  { outline: thick solid black }
:active { outline: thick solid red }

18.5 Powiększanie

Grupa robocza CSS uznała, że sposoby powiększania dokumentów lub ich części nie powinny być zdefiniowane w arkuszach stylów. Aplikacje klienckie mogą obsługiwać powiększanie na różne sposoby (np. powiększanie obrazów, pogłaśnianie dźwięku itp.).

Podczas powiększania strony aplikacje klienckie powinny zachowywać relacje między pozycjonowanymi elementami. Na przykład komiks może być ułożony z obrazów, na które nałożono elementy tekstowe. Przy powiększaniu takiej strony aplikacja kliencka powinna utrzymać tekst w odpowiednich chmurkach.