CSS: proprietà dell'interfaccia utente

  • CSS
  • Gabriele Romanato

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'

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

Torna su