18 Gebruikersinterface

Inhoud

18.1 Cursors: de 'cursor' eigenschap

Waarde:	[ [<uri> ,]* [ auto \| crosshair \| default \| pointer \| move \| e-resize \| ne-resize \| nw-resize \| n-resize \| se-resize \| sw-resize \| s-resize \| w-resize\| text \| wait \| help ] ] \| inherit
Startwaarde:	auto
Van toepassing op:	alle elementen
Geërfd:	ja
Percentages:	N/A
Media:	visual, interactive

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:

Ze produceren pagina's die passen in de door de gebruiker gedefinieerde "look and feel".
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.

Om bijvoorbeeld de voorgrond- en achtergrondkleur van een alinea in te stellen op dezelfde voorgrond- en achtergrondkleur als van het venster van de gebruiker, wordt hetvolgende geschreven:

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:

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

De outline eigenschappen controleren de stijl van deze dynamische outlines.

'outline'

Waarde:	[ <'outline-color'> \|\| <'outline-style'> \|\| <'outline-width'> ] \| inherit
Startwaarde:	zie individuele eigenschappen
Van toepassing op:	alle elementen
Geërfd:	nee
Percentages:	N/A
Media:	visual, interactive

'outline-width'

Waarde:	<border-width> \| inherit
Startwaarde:	medium
Van toepassing op:	alle elementen
Geërfd:	nee
Percentages:	N/A
Media:	visual, interactive

'outline-style'

Waarde:	<border-style> \| inherit
Startwaarde:	none
Van toepassing op:	alle elementen
Geërfd:	nee
Percentages:	N/A
Media:	visual, interactive

'outline-color'

Waarde:	<color> \| invert \| inherit
Startwaarde:	invert
Van toepassing op:	alle elementen
Geërfd:	nee
Percentages:	N/A
Media:	visual, interactive

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.

Nota. Aangezien de focus outline de opmaak niet beïnvloed (hetgeen wil zeggen dat er geen ruimte voor gelaten wordt in het box model), kan het wel andere elementen op de pagina overlappen.

Hier volgt een voorbeeld van een dikke outline rond een BUTTON element:

BUTTON { outline-width : thick }

Scripts kunnen gebruikt worden om de breedte van outline te dynamisch wijzigen zonder reflow te veroorzaken.

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.

Om bijvoorbeeld een dikke zwarte lijn rond een element te tekenen wanneer het de focus heeft en een dikke rode lijn wanneer het actief is, kunnen de volgende regels gebruikt worden:

: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.

Nederlandse vertaling

U hebt gevraagd om deze site in het Nederlands te bezoeken. Voor nu wordt alleen de interface vertaald, maar nog niet alle inhoud.

Als je me wilt helpen met vertalingen, is je bijdrage welkom. Het enige dat u hoeft te doen, is u op de site registreren en mij een bericht sturen waarin u wordt gevraagd om u toe te voegen aan de groep vertalers, zodat u de gewenste pagina's kunt vertalen. Een link onderaan elke vertaalde pagina geeft aan dat u de vertaler bent en heeft een link naar uw profiel.

Bij voorbaat dank.

Document heeft de 04/02/2006 gemaakt, de laatste keer de 26/10/2018 gewijzigd
Bron van het afgedrukte document:https://www.gaudry.be/nl/css-rf-./ui.html

De infobrol is een persoonlijke site waarvan de inhoud uitsluitend mijn verantwoordelijkheid is. De tekst is beschikbaar onder CreativeCommons-licentie (BY-NC-SA). Meer info op de gebruiksvoorwaarden en de auteur.

Referenties

CSS2 Specificatie : http://www.playgarden.com

Deze verwijzingen en links verwijzen naar documenten die geraadpleegd zijn tijdens het schrijven van deze pagina, of die aanvullende informatie kunnen geven, maar de auteurs van deze bronnen kunnen niet verantwoordelijk worden gehouden voor de inhoud van deze pagina.
De auteur Deze site is als enige verantwoordelijk voor de manier waarop de verschillende concepten, en de vrijheden die met de referentiewerken worden genomen, hier worden gepresenteerd. Vergeet niet dat u meerdere broninformatie moet doorgeven om het risico op fouten te verkleinen.

Inhoudsopgave Haut