18 Interfaccia utente

Sommario

18.1 Cursori: 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 ] ] | inherit
Iniziale:  auto
Si applica a:  tutti gli elementi
Ereditata:  si
Percentuali:  N/A
Media:  visuale, interattivo

Questa proprietà specifica il tipo di cursore che dovrà essere visualizzato per il dispositivo di puntamento. I valori hanno i seguenti significati:

auto
Il programma utente determina il cursore da visualizzare sulla base del contesto corrente.
crosshair
Un semplice simbolo a forma di croce (per esempio, brevi segmenti lineari che imitano un segno "+").
default
Il cursore predefinito che dipende dalla piattaforma. Spesso reso come una freccia.
pointer
Il cursore è un puntatore che indica un collegamento.
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 sta per essere mosso. Per esempio, il cursore 'se-resize' è usato quando il movimento parte dall'angolo sud-est [south-east] del riquadrato.
text
Indica il testo che può essere selezionato. Spesso reso come una barra verticale simile ad una "I" maiuscola.
wait
Indica che il programma è occupato e che l'utente dovrebbe aspettare. Spesso reso come un orologio o una clessidra.
help
L'aiuto [help] è disponibile per l'oggetto che si trova sotto il cursore. Spesso reso come un punto interrogativo o una nuvoletta da fumetto.
<uri>
Il programma utente reperisce il cursore dalla risorsa contrassegnata dall'URI. Se il programma utente non può gestire il primo cursore di un elenco di cursori, dovrebbe cercare di gestire il secondo, ecc. Se il programma utente non può gestire nessuno dei cursori definiti dall'utente, deve usare il cursore generico alla fine dell'elenco.

Esempi(o):

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

18.2 Preferenze dell'utente per i colori

In aggiunta alla capacità di assegnare valori di colore predefiniti al testo, agli sfondi, ecc., i CSS2 permettono agli autori di specificare i colori in modo tale da integrarli nell'ambiente grafico dell'utente. Le regole di stile che tengono in considerazione le preferenze dell'utente offrono così i seguenti vantaggi:

  1. Producono pagine che si adattano al gusto e all'aspetto definito dall'utente.
  2. Producono pagine che possono essere più accessibili, quando le impostazioni correnti dell'utente si possono correlare ad una sua disabilità.

L'insieme dei valori definiti per i colori di sistema è da intendersi come esaustivo. Per i sistemi che non hanno un valore corrispondente, il valore specificato dovrebbe essere correlato all'attributo di sistema più vicino, o ad un colore predefinito.

Di seguito riportiamo i valori addizionali per gli attributi CSS relativi al colore ed il loro significato generale. Ogni proprietà di colore (per esempio, 'color' o 'background-color') può assumere uno dei seguenti nomi. Sebbene questi nomi non siano sensibili alle maiuscole e alle minuscole, si raccomanda di osservare l'uso misto di maiuscole e minuscole come illustrato di seguito, allo scopo di rendere i nomi più leggibili.

ActiveBorder
Il colore del bordo della finestra attiva.
ActiveCaption
Il colore del titolo della finestra attiva.
AppWorkspace
Il colore di sfondo utilizzato in un'applicazione che consente documenti multipli.
Background
Il colore di sfondo per il desktop.
ButtonFace
Il colore utilizzato sulla faccia di elementi dello schermo tridimensionali.
ButtonHighlight
Il colore della luce inclusa nei bordi di elementi dello schermo tridimensionali (per i bordi che si trovano dalla parte opposta rispetto alla sorgente di luce).
ButtonShadow
Il colore dell'ombra per gli elementi dello schermo tridimensionali.
ButtonText
Il colore del testo nei pulsanti di scelta.
CaptionText
Il colore del testo incluso nei titoli, nella casella di dimensionamento, e nel simbolo della casella delle frecce di una barra di scorrimento.
GrayText
Il testo colorato di grigio (disattivato). Questo colore è impostato a #000 se il driver di visualizzazione corrente non supporta un colore grigio uniforme.
Highlight
Il colore dell'elemento (o degli elementi) selezionato in un controllo.
HighlightText
Il colore del testo di un elemento (o degli elementi) selezionato in un controllo.
InactiveBorder
Il colore del bordo di una finestra inattiva.
InactiveCaption
Il colore del titolo di una finestra inattiva.
InactiveCaptionText
Il colore del testo in un titolo inattivo.
InfoBackground
Il colore di sfondo per i riquadri di informazione a comparsa [tooltip].
InfoText
Il colore del testo per i riquadri di informazione a comparsa.
Menu
Il colore dello sfondo dei menu.
MenuText
Il colore del testo incluso nei menu.
Scrollbar
L'area grigia di una barra di scorrimento.
ThreeDDarkShadow
Il colore di un'ombra scura per gli elementi dello schermo tridimensionali.
ThreeDFace
Il colore della faccia per gli elementi dello schermo tridimensionali.
ThreeDHighlight
Il colore della massima zona di luce per gli elementi dello schermo tridimensionali.
ThreeDLightShadow
Il colore chiaro per gli elementi dello schermo tridimensionali (per i bordi di fronte alla sorgente di luce).
ThreeDShadow
L'ombra scura per gli elementi dello schermo tridimensionali.
Window
Il colore di sfondo di una finestra.
WindowFrame
Il colore del frame di una finestra.
WindowText
Il colore del testo nella finestra.

Esempi(o):

Per esempio, per impostare i colori di primo piano e di sfondo di un paragrafo sugli stessi colori di primo piano e di sfondo della finestra dell'utente, si scriva la seguente regola:

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

18.3 Preferenze dell'utente per i font

Come per i colori, gli autori possono specificare i font in un modo che fa uso delle risorse di sistema dell'utente. Si prega di consultare la proprietà 'font' per i dettagli.

18.4 Contorni dinamici: la proprietà 'outline'

A volte gli autori possono voler creare dei contorni intorno ad oggetti visuali come bottoni, campi attivi dei moduli, mappe a immagine, ecc., per farli risaltare. I contorni CSS2 differiscono dai bordi nei modi seguenti:

  1. I contorni non occupano spazio.
  2. I contorni possono essere non-rettangolari.

Le proprietà del contorno controllano lo stile di questi contorni dinamici.

'outline'
Valore:  [ <'outline-color'> || <'outline-style'> || <'outline-width'> ] | inherit
Iniziale:  si vedano le proprietà individuali
Si applica a:  tutti gli elementi
Ereditata:  no
Percentuali:  N/A
Media:  visuale, interattivo
'outline-width'
Valore:  <border-width> | inherit
Iniziale:  medium
Si applica a:  tutti gli elementi
Ereditata:  no
Percentuali:  N/A
Media:  visuale, interattivo
'outline-style'
Valore:  <border-style> | inherit
Iniziale:  none
Si applica a:  tutti gli elementi
Ereditata:  no
Percentuali:  N/A
Media:  visuale, interattivo
'outline-color'
Valore:  <color> | invert | inherit
Iniziale:  invert
Si applica a:  tutti gli elementi
Ereditata:  no
Percentuali:  N/A
Media:  visuale, interattivo

Il contorno creato con le proprietà del contorno viene tracciato "sopra" un riquadrato, ossia il contorno è sempre sulla parte superiore, e non influenza la posizione o le dimensioni del riquadrato o di qualsiasi altro riquadrato. Perciò, visualizzare o sopprimere i contorni non causa la risistemazione del contenuto.

Il contorno è tracciato partendo appena al di fuori dellimite del bordo.

I contorni possono essere non-rettangolari. Per esempio, se l'elemento è spezzato su diverse righe, il contorno è il contorno minimo che racchiude tutti i riquadrati dell'elemento. In contrapposizione ai bordi, il contorno non è aperto nella parte terminale e iniziale del riquadrato di riga, ma è sempre completamente collegato.

La proprietà 'outline-width' accetta gli stessi valori di 'border-width'.

La proprietà 'outline-style' accetta gli stessi valori di 'border-style', tranne per il fatto che 'hidden' non è uno stile del contorno valido.

La proprietà 'outline-color' accetta tutti i colori, compresa la parola chiave 'invert'. Ci si aspetta che 'invert' compia un'inversione di colori sui pixel dello schermo. Questo è uno stratagemma comune per assicurare che il bordo del fuoco [focus] sia visibile, a prescindere dal colore dello sfondo.

La proprietà 'outline' è una proprietà stenografica [shorthand, o abbreviata], e imposta le tre proprietà 'outline-style', 'outline-width', e 'outline-color'.

Si noti che il contorno è lo stesso su tutti i lati. Contrariamente ai bordi, non c'è una proprietà 'outline-top' o 'outline-left'.

Queste specifiche non definiscono come vengano tracciati contorni multipli che si sovrappongono, o come vengano tracciati i contorni per i riquadrati che sono parzialmente oscurati dietro altri elementi.

Nota. Poichè il contorno del fuoco non influenza la formattazione (ossia non gli viene lasciato spazio nel modello per riquadrati), può sovrapporsi ad altri elementi nella pagina.

Esempi(o):

Ecco un esempio di come viene tracciato un contorno spesso intorno ad un elemento BUTTON:

BUTTON { outline-width : thick }

Gli script possono essere usati per cambiare la larghezza del contorno, senza provocare la risistemazione del contenuto.

18.4.1 Contorni e fuoco

Le interfaccie utente grafiche possono usare i contorni attorno agli elementi per dire all'utente quale elemento nella pagina ha il fuoco [focus]. Questi contorni sono in aggiunta a tutti i bordi, e attivare o disattivare i contorni non provoca la risistemazione del documento. Il fuoco è il soggetto dell'interazione con l'utente in un documento (per esempio per inserire del testo, selezionare un bottone, ecc.). I programmi utente che supportano il gruppo di media interattivi devono essere al corrente di dove si trova il fuoco e devono anche rappresentarlo. Questo può essere fatto usando i contorni dinamici in unione con la pseudo-classe :focus.

Esempi(o):

Per esempio, per tracciare una spessa riga nera intorno ad un elemento quando ha il fuoco, e una spessa linea rossa quando è attivo, si possono usare le seguenti regole:

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

18.5 Ingrandimento

Il gruppo di lavoro sui CSS ritiene che l'ingrandimento di un documento o di parti di un documento non dovrebbe essere specificato attraverso i fogli di stile. I programmi utente possono supportare tale ingrandimento in modi diversi (per esempio, immagini più grandi, suoni più forti, ecc.)

Qaundo ingrandiscono una pagina, i programmi utente dovrebbero preservare le relazioni fra elementi posizionati. Per esempio, un fumetto può essere composto di immagini con elementi testuali sovrapposti. Quando ingrandisce questa pagina, un programma utente dovrebbe mantenere il testo all'interno della nuvoletta dei fumetti.