11. Posizionamento

I CSS permettono di posizionare all'interno di una pagina oggetti che scorrono o restino fissi indipendentemente dalla dimensione in cui viene visualizzata la pagina.

Nella pagina, un elemento può essere posizionato secondo tre modi differenti:

1. seguendo il normale andamento della pagina previsto dall'HTML
2. senza alcun legame con il resto del flusso degli elementi
3. allineandosi in modo tale che gli elementi si dispongano al lato (questa tecnica, chiamata in gergo tecnico floating.

Posizionare relativamente agli altri elementi della pagina

Per posizionare un elemento rispetto agli elementi della pagina, usiamo la proprietà position con questi valori:

static (valore di default per quasi tutti gli oggetti HTML)
relative: l'elemento è posizionato seguendo il normale flusso degli elementi nella pagina, tramite l'uso di quattro proprietà (left, right, top e bottom) che assumono come valore una grandezza e specificano la distanza (positiva o negativa) dell'elemento rispetto alla posizione che questo dovrebbe occupare normalmente nella pagina.

esempio:

strong {position: relative; top: -5px;}

Con questo codice, tutti gli elementi in neretto appariranno spostati di 5 pixel verso l'alto rispetto alla linea del paragrafo.

In particolare:

top indica la distanza del bordo superiore dell'oggetto dal bordo superiore dell'elemento in cui è contenuto
bottom indica la distanza del bordo inferiore dell'oggetto dal bordo inferiore dell'elemento in cui è contenuto
left indica la distanza del bordo sinistro dell'oggetto dal bordo sinistro dell'elemento in cui è
contenuto
right indica la distanza tra il bordo destro dell'oggetto dal bordo destro dell'elemento in cui è contenuto

Posizionamento assoluto e fisso

Per posizionamento assoluto o fisso si intende un posizionamento che non segue il flusso degli elementi.
È fissato tramite la proprietà position con l'uso dei valori:

absolute: l'elemento è posizionato rispetto al suo blocco contenitore (la pagina o un altro elemento block-level a sua volta posizionato con la medesima proprietà) tramite le proprita left, right, top e bottom. L'elemento risulterà quindi legato allo scorrere della pagina
fixed: l'elemento è posizionato rispetto alla finestra sempre tramite le quattro proprietà left, right, top e bottom e non è legato allo scorrimento della pagina. Ad esempio:

div.bann {
position: fixed;
bottom: 0px;
right: 0px;
}

mostra l'elemento fisso nell'angolo in basso a destra dello schermo (può servire, ad esempio, per la creazione di banner o simili)

Usare il floating

Il floating è una tecnica CSS che, tramite la proprietà float, permette agli elementi HTML di allinearsi a destra o a sinistra della pagina (o dell'elemento contenitore).
Con la possibilità che gli elementi della pagina scorrano a destra o a sinistra dell'oggetto in questione.

il floating può essere usato solo su elementi con una larghezza fissata (impostata dalla proprietà width oppure, ad esempio per le immagini, dalle dimensioni in pixel del file di origine)

la proprietà float non viene considerata se l'elemento ha un posizionamento assoluto o fisso

gli elementi flottanti diventano necessariamente elementi block.
gli elementi flottanti vengono automaticamente estratti dal flusso della pagina: questo significa che un elemento di tipo blocco che contenga elementi flottanti risulta in realtà vuoto.

La proprietà clear

La proprietà clear sposta l'elemento a cui viene applicata sotto a tutti gli elementi flottanti dal lato specificato. Può assumere i valori:

none: non viene effettuato alcuno spostamento
left o right: l'elemento viene spostato sotto a tutti gli elementi floattanti a destra o a sinistra
both: vengono considerati tutti gli elementi flottanti sia a destra sia a sinistra.
che interrompe il testo effettuando il clear in maniera semplice e pulita.

12. Altre proprietà

In questo modulo analizzeremo alcune proprietà CSS che non sono ancora state trattate.

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:

Se la dichiarazione display: none; si utilizzata insieme a linguaggi dinamici come JavaScript, permette di nascondere o visualizzare elementi della pagina con un semplice clic dell'utente.

visibility

La proprietà >visibility 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 visibility

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

Il futuro prossimo di CSS3

Siamo dunque oltre l’alba del Web 2.0 e pensiamo sia giunto il momento che anche le applicazioni web assurgano a ruolo di vere e proprie applicazioni come quelle che si scrivono ordinariamente per i desktop, ma perché diventino tali a tutti gli effetti è necessario che gli sviluppatori cambino l’approccio alla scrittura di codice (più pulito, ordinato, compatibile, standard e così via) e che i progettisti dei browser aderiscano, finalmente in modo uniforme e quanto più in fretta possibile, agli standard web.

Detto ciò vediamo cosa ci riserva il futuro prossimo di CSS3 ricordando che, se in via sperimentale si vogliono provare le proprietà presenti nei seguenti moduli, bisogna verificare se il browser in uso le supporta e nel caso usare l’opportuno prefisso.

• Il CSS 2D Transforms Module, mediante il quale possiamo applicare delle trasformazioni agli elementi renderizzati dai CSS in uno spazio bidimensionale avvalendoci della proprietà transform e delle relative funzioni di trasformazione degli elementi come quelle per traslazione, rotazione, distorsione, ridimensionamento e così via.
• Il CSS 3D Transforms Module Level 3, mediante il quale possiamo applicare delle trasformazioni agli elementi renderizzati dai CSS in uno spazio tridimensionale. Anche qui abbiamo una serie di proprietà (transform-style, perspective, backface-visibility e così via) e funzioni (matrix3d, translate3d, scale3d, rotate3d e così via) con cui compiere le suddette operazioni di trasformazione.
• Il CSS Transitions Module Level 3, mediante il quale possiamo creare delle transizioni, ovvero delle animazioni da eseguire quando c’è un cambiamento di stato in una proprietà di un elemento.
• Il CSS Animations Module Level 3, mediante il quale possiamo creare delle vere e proprie animazioni per gli elementi di una pagina HTML usando una sintassi più specifica e granulare di quella offerta dal modulo delle transizioni.
• Il CSS Flexible Box Layout Module, mediante il quale possiamo progettare il layout delle pagine web con un box model flessibile e ottimizzato per il disegno delle interfacce utente.
• Il CSS Template Layout Module, mediante il quale possiamo progettare il layout delle pagine web creando dei template con degli slot dove posizionare degli elementi HTML.
• Il CSS Grid Positioning Module Level 3, mediante il quale possiamo progettare il layout delle pagine web come un sistema di griglie similare a quello usato per i libri e i quotidiani.