CSS/Altre proprietà

In questo modulo analizzeremo alcune proprietà CSS che non sono state presentate nel corso del libro ma sono comunque rilevanti.

cursor

Questa proprietà serve a modificare l'aspetto del cursore quando si posiziona sull'elemento in questione. Può assumere come valore una combinazione dei seguenti valori (posizionarsi sopra il testo per vederne l'effetto):

• auto: il cursore automatico per il tipo di elemento
• default: il cursore predefinito di sistema (normalmente una freccetta)
• pointer: il puntatore usato ad esempio per i link (normalmente la manina con l'indice puntato)
• text: il cursore usato per il testo selezionabile (solitamente il caret I)
• wait: indica di aspettare (solitamente è una clessidra)
• progress: l'applicazione sta lavorando, ma può comunque reagire ai comandi (solitamente una freccia con accanto una clessidra)
• crosshair: la croce usata per puntare con precisione (a forma di "+")
• help: usato per indicare la possibilità di visualizzare un aiuto relativo all'elemento in questione (spesso un punto interrogativo)
• move: il cursore visualizzato su elementi spostabili (normalmente la manina chiusa)
• e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize: le frecce usate per i ridimensionamenti. Le lettere che precedono -resize indicano il verso — N = nord (north), S = sud (south), E = est (east), W = ovest (west).
• un percorso indicante un file di cursore

Il browser scorrerà la lista di valori fino a quando non incontrerà un cursore valido o rappresentabile. Altrimenti userà il cursore automatico.

display

La proprietà display serve a definire la visualizzazione e il rendering dell'elemento da parte del browser. Può assumere, tra gli altri, i valori:

• inline: l'elemento viene visualizzato come in linea
• block: l'elemento è visualizzato come blocco
• list-item: l'elemento viene visualizzato come un oggetto di una lista (formattabile tramite le proprietà list-style)
• none: l'elemento non viene visualizzato e non influisce sulla visualizzazione della pagina

Questa proprietà può servire:

• nell'ambito di pagine XML, i quali elementi non hanno associato un rendering
• ad esempio per poter posizionare e gestire come un blocco (quindi impostare dimensioni, posizioni, ecc...) elementi in-line come i link

È invece molto interessante l'uso della dichiarazione display: none; che, soprattutto se utilizzata insieme a linguaggi dinamici come JavaScript, permette di nascondere o visualizzare elementi della pagina con un semplice clic dell'utente.

visible

La proprietà visible determina se un elemento è visibile o meno all'interno della pagina. Può assumere come valori:

• visible: l'elemento risulta visibile
• hidden: l'elemento risulta nascosto ma occupa comunque spazio nella pagina

Differenze tra display e visible

Abbiamo visto che esistono due modi per rendere invisibile un elemento HTML: il primo è quello di usare la proprietà display: none; e il secondo prevede l'uso di visible: hidden;.
La differenza tra i due metodi è che, mentre con la prima dichiarazione l'elemento viene considerato come se non esistesse del tutto, con il secondo l'elemento influisce ancora sulla visualizzazione della pagina e nel flusso degli elementi che lo circondano.