I CSS possono definire alcuni aspetti dell'interfaccia utente, quali il cursore, i contorni dinamici sugli elementi e l'aspetto predefinito di alcuni elementi della pagina. In questo articolo vedremo le proprietà che regolano tali aspetti.
La proprietà 'cursor'
| Valore: | [[<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 | progress]] | inherit |
|---|---|
| Iniziale: | auto |
| Si applica a: | tutti gli elementi |
| Ereditata: | si |
| Percentuali: | N/A |
| Media: | visuale, interattivo |
| Valore calcolato: | come specificato, tranne con gli URI relativi che vengono convertiti in assoluti |
Questa proprietà specifica il tipo di cursore da visualizzare per il dispositivo di puntamento. I valori sono:
- auto
- Determinato dal browser in base al contesto.
- crosshair
- Una croce semplice (segno '+').
- default
- Dipendente dalla piattaforma. Spesso visualizzato come una freccia.
- pointer
- Un puntatore che indica un link.
- move
- Indica qualcosa che sta per essere mosso.
- e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize
- Indica che un limite di un box sta per essere mosso nella direzione dei quattro punti cardinali (north. south, east, west). Per esempio, 'se-resize' viene usato quando il movimento parte dall'angolo sud-est del box.
- text
- Indica il testo selezionabile. Spesso reso con una "I" maiuscola.
- wait
- Indica che il programma è occupato e l'utente deve aspettare. Spesso reso con un orologio o una clessidra.
- progress
- Indica l'avanzamento di stato del programma.
- help
- Indica un aiuto fornito per l'oggetto sotto il cursore. Spesso reso con un punto interrogativo o un fumetto.
- <uri>
- Il browser reperisce il cursore dalla risorsa indicata dall'URI. Differente il supporto nei browser.
Esempio:
acronym[title] {cursor: help}
Internet Explorer 6 non supporta alcuni di questi valori (es. 'pointer').
Contorni dinamici
I contorni vengono creati intorno agli elementi senza occuparne lo spazio. Le proprietà che regolano i contorni (outlines) sono 'outline-width', 'outline-style', 'outline-color' e 'outline' (proprietà abbreviata). Le prime due proprietà accettano come valori, rispettivamente, i valori delle proprietà 'border-width' e 'border-style':
input:focus {outline-width: 1px; outline-style: dotted}
Per 'outline-style' il valore 'hidden' non è valido. 'outline-color' accetta tutti i colori, più la parola chiave 'invert' (valore iniziale), che esegue un'inversione di colore sui pixel dello schermo, allo scopo di assicurare che il bordo del contorno sia visibile, a prescindere dallo sfondo:
input: focus {
outline-width: 1px;
outline-style: dotted;
outline-color: #ccc
}
La proprietà abbreviata 'outline' imposta in un'unica dichiarazione le precedenti proprietà:
input:focus {outline: 1px dotted #ccc}
I contorni creati vengono tracciati sopra i box, ossia sulla parte superiore e non influenzano la posizione e la dimensione del box, né causano il riflusso degli elementi.
Le specifiche incoraggiano i browser ad usare i contorni per tracciare il focus degli elementi:
:focus {outline: thin dotted invert}
Molti browser lo hanno implementato correttamente, ma questa scelta a volte può rivelarsi fastidiosa, specie per i link. Quindi scriveremo:
:focus {outline-style: none} /* rimuove il contorno da tutti gli elementi */
a:focus {outline-style: none} /* rimuove il contorno solo dai link */
Internet Explorer 7 e inferiori non supporta i contorni.
Nota sui colori di sistema
I colori di sistema sono stati rielaborati nel modulo CSS 3 sul colore e i valori CSS 2.1 non sono più supportati.