18 Gebruikersinterface

18.1 Cursors: de 'cursor' eigenschap

Deze eigenschap specificeert het type van cursor dat weergegeven wordt voor de aanwijzer. Waarden hebben de volgende betekenissen:

auto

De User Agent bepaalt de cursor die weergegeven moet worden op basis van de huidige context.

crosshair

Een eenvoudig haarkruis (hetgeen wil zeggen korte lijnsegmenten die lijken op een "+" teken).

default

De platform-afhankelijke cursor. Dikwijls weergegeven als een pijl.

pointer

De cursor is pijl die een link aangeeft.

move

Geeft aan dat iets verplaatst kan worden.

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

Geeft aan dat een rand verplaatst kan worden. De 'se-resize' cursor wordt bijvoorbeeld gebruikt wanneer de beweging start vanuit de zuid-oost (south-east) hoek van de box.

text

Geeft tekst aan die geselecteerd kan worden. Dikwijls weergegeven als een I-balk.

wait

Geeft aan dat het programma bezig is en de gebruiker zou moeten wachten. Dikwijls weergegeven als een horloge of zandloper.

help

Help is beschikbaar voor het object onder de cursor. Dikwijls weergegeven als een vraagteken of een ballon.

<uri>

De user agent haalt de cursor uit de bron die aangegeven wordt door de URI. Als de user agent de eerste cursor van een lijst niet vindt, zou deze de tweede moeten zoeken, enz. Als de user agent geen enkele door-de-gebruiker-gedefinieerde cursor kan vinden, moet deze de algemene cursor op het einde van de lijst gebruiken.

P { cursor : url("mything.cur"), url("second.csr"), text; }

18.2 Gebruikersvoorkeuren voor kleuren

Aanvullend op de mogelijkheid om voorgedefinieerde kleurwaarden aan tekst, achtergronde, enz., toe te wijzen, geeft CSS2 auteurs de mogelijkheid om kleuren te specificeren op een manier die ze integreert in de grafische omgeving van de user. Stijlregels die gebruikersvoorkeuren mee laten tellen bieden dus de volgende voordelen:

1. Ze produceren pagina's die passen in de door de gebruiker gedefinieerde "look and feel".
2. Ze produceren pagina's die toegankelijker kunnen zijn omdat de huidige gebruikersinstellingen gerelateerd kunnen zijn tot beperkingen.

De set van waarden gedefinieerd voor systeemkleuren is bedoeld om eindig te zijn. Voor systemen die een overeenkomende waarde niet hebben, zou de gespecificeerde waarde gemapt moeten worden op het kortst bijzijnde systeem attribuut, of op de standaard kleur.

Het volgende geeft aanvullende waarden voor kleur-gerelateerde CSS attributen en hun algemene betekenis. Alke kleureigenschap (zoals 'color' of 'background-color') kan één van de namen volgen. Hoewel ze hoofdletter-ongevoelig zijn, wordt het aangeraden om de gemengde hoofdletters die hierna getoond worden te gebruiken om zo de namen leesbaarder te maken.

ActiveBorder

Actieve vensterrand.

ActiveCaption

Actief vensteropschrift.

AppWorkspace

Achtergrondkleur van multiple document interface.

Background

Bureaublad achtergrond.

ButtonFace

Voorgrondkleur van 3-dimensioneel weergegeven elementen.

ButtonHighlight

Donkere schaduw van 3-dimensioneel weergegeven elementen (voor randen die weg wijzen van de lichtbron).

ButtonShadow

Schaduwkleur van 3-dimensioneel weergegeven elementen.

ButtonText

Tekst op drukknoppen.

CaptionText

Tekst in opschrift, grootte box en scrolbalk pijl box.

GrayText

Grijs (weergegeven) tekst. Deze kleur wordt op #000 ingesteld als de huidige display driver een volle grijze kleur niet ondersteund.

Highlight

Geselecteerd(e) item(s).

HighlightText

Tekst van item(s) die geselecteerd zijn.

InactiveBorder

Inactieve vensterrand.

InactiveCaption

Inactief vensteropschrift.

InactiveCaptionText

Kleur van tekst in een inactief opschrift.

InfoBackground

Achtergrondkleur voor tooltips.

InfoText

Tekstkleur voor tooltips.

Menu

Menu achtergrond.

MenuText

Tekst in menu's.

Scrollbar

Grijze zone van scrolbalk.

ThreeDDarkShadow

Donkere schaduw for van 3-dimensioneel weergegeven elementen.

ThreeDFace

Voorgrondkleur van 3-dimensioneel weergegeven elementen.

ThreeDHighlight

Hoofdkleur van 3-dimensioneel weergegeven elementen.

ThreeDLightShadow

Lichte kleur van 3-dimensioneel weergegeven elementen (voor randen die naar de lichtbron wijzen).

ThreeDShadow

Donkere schaduw van 3-dimensioneel weergegeven elementen.

Window

Venster achtergrond.

WindowFrame

Venster kader.

WindowText

Tekst in vensters.

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

18.3 Gebruikersvoorkeuren voor lettertypes

Net zoals voor kleuren mogen auteurs lettertypes specificeren op een manier die gebruik maakt van de bronnen van het systeem van de gebruiker. Raadpleeg de 'font' eigenschap voor details.

18.4 Dynamische outlines: de 'outline' eigenschap

Soms willen style sheet auteurs outlines maken rond visuele objecten zoals knoppen, actieve formuliervelden, image maps, enz., om ze meer te laten opvallen. CSS2 outlines verschillen van borders op de volgende manieren:

1. Outlines nemen geen plaats in.
2. Outlines kunnen niet-rechthoekig zijn.

De outline eigenschappen controleren de stijl van deze dynamische outlines.

De outline gemaakt met de outline eigenschappen wordt getekend "over" een box, hetgeen wil zeggen dat de outline altijd bovenop ligt en de positie en de grootte van de box of elke andere box niet beïnvloed. Daarom zal het weergeven of het onderdrukken geen reflow veroorzaken.

De outline wordt juist buiten de border edge getekend.

Outlines kunnen niet-rechthoekig zijn. Als het element bijvoorbeeld gebroken is over verschillende lijnen, is de outline de minimale outline die alle boxen van het element omsluit. In tegenstelling tot randen is de outline niet open op de start of het einde van de box van deze lijn, maar altijd volledig verbonden.

De 'outline-width' eigenschap accepteert dezelfde waarden als 'border-width'.

De 'outline-style' eigenschap accepteert dezelfde waarden als 'border-style', behalve dat 'hidden' geen geldige outline stijl is.

De 'outline-color' accepteert alle kleuren, maar ook het sleutelwoord 'invert'. Van 'invert' wordt verondersteld dat deze een kleurinversie toepast van de pixels op het scherm. Dit is een gekende truk om te verzekeren dat de focus rand onafhankelijk van de achtergrondkleur zichtbaar is.

De 'outline' eigenschap is een verkorte eigenschap en stelt alle drie de eigenschappen 'outline-style', 'outline-width' en 'outline-color' in.

Merk op dat de outline hetzelfde is aan alle kanten. Dit verschilt van randen aangezien er geen 'outline-top' of 'outline-left' eigenschap is.

Deze specificatie definieert niet hoe meerdere overlappende outlines getekend worden of hoe outlines getekend worden voor boxen die gedeeltelijk afgedekt worden door andere elementen.

BUTTON { outline-width : thick }

18.4.1 Outlines en de focus

Graphische gebruikersinterfaces kunnen outlines gebruiken rond elementen om aan de gebruiker aan te geven welk element op de pagina de focus heeft. Deze outlines zijn in aanvulling op alle randen en in- en uitschakelen van outlines zou geen reflow van het document mogen veroorzaken. De focus is het onderwerp van gebruikersinteractie in een document (zoals bij het ingeven van tekst, selecteren van een knop, enz.). User agents die de interactive media group ondersteunen moeten bijhouden waar de focus ligt en moeten deze ook weergeven. Dit kan gedaan worden door gebruik van dynamische outlines in conjunctie met de :focus pseudo-class.

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

18.5 Vergroting

De CSS working group vindt dat de vergroting van een document of delen van een document niet gespecificeerd moeten worden via style sheets. User agenten kunnen zulke vergroting ondersteunen op andere manieren (zoals grotere figuren, luidere geluiden, enz.)

Wanneer een pagina vergroot wordt, zouden User Agenten de relatie tussen gepositioneerde elementen moeten behouden. Een stripverhaal kan bijvoorbeeld samengesteld worden uit figuren met overlappende tekstelementen. Wanneer deze pagine vergroot wordt zou een user agent de tekst binnen de tekstballonnen van de strip moeten houden.