Il posizionamento CSS (prima parte)

Introduzione

Questo tutorial è una traduzione dell’articolo chiamato “Understanding CSS Positioning part 1” di Kilian Valkhof.

Senza ombra di dubbio il posizionamento è la parte più difficile da capire dei CSS.
Non solo perchè ciò dipende molto dal browser che l’utente utilizza, ma anche perchè i CSS permettono più modi di posizionare un elemento con i relativi vantaggi e svantaggi.

Display

Prima di iniziare è giusto parlare dei 2 modi di visualizzazione di un elemento: block ed inline.

Display: block

Block può essere considerato letteralmente come un “blocco”.
Esso ha una specifica larghezza ed altezza, opzionalmente esse possono dipendere dal suo contenuto anche se le dimensioni date mediante CSS hanno la priorità.
Un’altra proprietà degli elementi visualizzati in block è che non possono stare nella stessa linea.
Anche se un elemento ha una larghezza piccola , il prossimo elemento sarà visualizzato sempre sotto di esso.
Due elementi in display:block verranno visualizzati come segue:

display:block

Display: inline

Display: inline è in qualche modo l’opposto.
Elementi con display:inline prendono sempre le dimensioni del loro contenuto ed ignorano qualsiasi dimensioni specificata dal CSS (Internet Explorer ingiustamente non lo fa).
Un’altra caratteristica opposta, come suggerisce il nome, è che gli elementi vengono visualizzati nella stessa linea, così ogni elemento seguirà il suo precedente. Se la linea è “riempita” completamente dagli elementi, gli elementi successivi verranno visualizzati nella riga sottostante.
Ecco una rappresentazione grafica:

display:inline

La proprietà display:none è molto facile da spiegare: essa semplicemente non farà visualizzare l’elemento.

Ci sono una moltitudine di proprietà di visualizzazione come table, inline-block, ecc…

Il flusso di posizionamento

Con il posizionamento non si può non parlare di “flusso” (flow).
Il flusso nei CSS è il modo in cui gli elementi sono posizionati logicamente nel display.
Per esempio, se disattiviamo i CSS su questa pagina, si può vedere come gli elementi sono disposti originariamente (in un determinato ordine) ossia dall’alto verso il basso.

Posizionamento

Una delle proprietà più complesse del CSS.
Questo è vero sia per questioni legate al cross-browsing ma anche ad una denominazione ambigua.
Non è complessa (o comunque non facile da apprendere) la dichiarazione del posizionamento ma il modo in cui l’elemento interagisce con il contesto.
Il posizionamento varia anche in combinazione con la proprietà display utilizzata con esso.
Il modo in cui il posizionamento e la proprietà display interagiscono è il seguente:
position:static e position:relative possono essere entrambe display:block e display:inline, mentre position:absolute e position:fixed (e float) vengono sempre visualizzati come display:block.

Inizieramo con il posizionamento più facile, lo static.

Position: static

E’ il posizionamento base e più semplice da comprendere.
Un elemento con position:static riempie tutto lo spazio di cui necessita (il suo contenuto).
La proprietà display (display:block o display:inline) dipende dal valore di default dell’elemento (ad esempio i div hanno display:block, mentre gli span hanno display:inline) oppure da ciò che si è specificato nel CSS.

Il offsetting (top, bottom, left e right) è ignorato.

Position: relative

Questa proprietà è simile al position:static con una sola ed importante differenza: l’elemento (con altezza e larghezza propri) reso a video non occupa lo spazio originariamente designato ad esso.
La proprietà top, bottom, left e right permettono di spostare l’elemento relativamente allo spazio designato.
Un elemento con position:relative top:20px e left:20px appare come segue:

relative1

La zona grigia è lo spazio designato originariamente all’elemento.

Il prossimo elemento del flusso verrà posizionato usando lo spazio designato dell’elemento precedente considerandolo come quello “reale”.
In questo modo se si posiziona un div al di sotto dell’elemento della figura soprastante otterremo questo:

relative2

Position: absolute

Il posizionamento assoluto è completamente diverso da ciò che abbiamo visto fin’ora.
La più grande differenza è che l’elemento non fa più parte del “flusso”. Ciò significa che non interagirerà in alcun modo con gli altri elementi.
Gli elementi circostanti si limitano a far finta che l’elemento posizionato in questo modo “non esista”.

Le proprietà top, right, bottom e left hanno lo scopo di gestire l’offset rispetto al primo elemento padre che risulta essere posizionato in relative o absolute.
A meno che non siano presenti elementi posizionati con position:relative, position:fixed o position:absolute l’elemento radice è <html>.
Nelle specifiche ciò è chiamato “initial containing block” (ndt: “Blocco contenitore iniziale”).

Un elemento posizionato in modo assoluto con top:20px e left:20px all’interno di un elemento posizionato relativamente verrà mostrato così:

absolute

Si possono avere alcuni problemi con il posizionamento assoluto: l’articolo di paul’OB li descrive molto bene.

Position: fixed

Fixed a causa del mancato supporto con Internet Explorer 6 risulta essere poco conosciuto.
Fixed fa esattamente la stessa cosa di position: absolute con una sola importante differenza: l’offset non prende come riferimento l’elemento genitore bensì il viewport della finestra del browser.
Ciò significa che l’elemento, mentre scrolliamo, rimane visibile e non si muove con il resto della pagina.

z-index

Un’altra proprietà che entra in gioco con il posizionamento è lo z-index.
Questa proprietà permette il controllo del livello di profondità degli elementi posizionati in absolute, fixed e relative.
Lo z-index applicato ad altri posizionamenti diversi da absolute, fixed e relative non porta ad alcun risultato.

Per capire lo z-index, è giusto dare rilevanza alle specifiche:

Nel CSS 2.1 ciascun box ha una posizione composta da 3 dimensioni. Oltre al posizionamento verticale ed orizzontale, gli elementi sono disposti lungo un’asse z uno davanti l’altro.

Ciò è chiamato “stacking” (ndt: pila) e l’insieme degli elementi impilati è chiamato “stacking context”.
C’è da notare come ogni volta si dichiara uno z-index si crea un nuovo stacking context: ciò significa che ogni elemento contenuto nell’elemento corrente userà lo z-index del genitore come punto di partenza.
Spieghiamo meglio il concetto con del codice CSS:

  1. .relativeblock1 {
  2.     position:relative;
  3.     width:200px;
  4.     height:80px;
  5.     z-index:51;
  6. }
  7. .absoluteblock1 {
  8.     position:absolute;
  9.     left:10px;
  10.     top:90px;
  11.     width:40px;
  12.     height:40px;
  13.     z-index:1;
  14. }
  15. .relativeblock2 {
  16.     position:relative;
  17.     width:200px;
  18.     height:80px;
  19.     z-index:50;
  20. }

e HTML:

  1. <div class="relativeblock1">
  2.     <div class="absoluteblock1"></div>
  3. </div>
  4. <div class="relativeblock2"></div>

Tutto ciò verrà visualizzato in questo modo:

zindex

Si può notare come nonostante .relativeblock2 abbia un valore di z-index elevato (50), stia comunque sotto a .absoluteblock2 che ha z-index 1: questo perchè .relativeblock1, con z-index 51, crea un nuovo stacking context dove lo z-index di .absoluteblock1 può essere visto come “51.1”.
Per approfondimenti si consiglia di leggere l’articolo di Tim Kadlec oppure i test di Krijn Hoetmer.

Organizziamoci al meglio per progettare un foglio di stile CSS

Requisiti

  • Sapere cos’è un CSS
  • Aver già creato un file CSS

Introduzione

L’organizzazione è un aspetto molto importante che risulta essere rilevante in ogni progetto (grande o piccolo che sia) che si ha intenzione di portare a termine.
Naturalmente l’esperienza aiuta moltissimo nella creazione di un “metodo” che permetta allo sviluppatore di ridurre al minimo i tempi di sviluppo, facilitare la lettura dei risultati e soprattutto rendere le successive modifiche il meno invasive possibili.
Questo tutorial ha lo scopo di dare la giusta enfasi ad alcuni aspetti organizzativi che interessano la creazione di un foglio di stile CSS.

I commenti

I commenti hanno sempre giocato un ruolo secondario nella scrittura di codice appunto perchè non rientrano in quest’ultima definizione.
Durante lo sviluppo di un foglio di stile sappiamo benissimo la funzione di ciascuna riga ma se ci ritorniamo dopo alcune settimane molto probabilmente ci verrà l’istinto di sbattere la testa contro il monitor.
Inoltre non è da escludere il fatto che chi modificherà un file CSS non necessariamente ne è l’autore.
Un esempio di commento molto utile è il seguente:

  1. /* Sfrutto un'anomalia di Explorer per risolverne un'altra (Fix IE min-height) */
  2. #div {
  3.     min-height:25px;
  4.     height:auto !important;
  5.     height:25px;
  6. }

Un utilizzo alternativo dei commenti è quello di marcare il CSS indicandone la versione, licenza ed altri aspetti di contorno.

  1. /* ---------------------
  2.  
  3. Life is a Flash
  4.  
  5. Versione: 0.9a
  6. Ultima modifica: 2 Ottobre 2006
  7. Autore: Daniele Simonin
  8. Licenza: Creative Commons
  9.  
  10. --------------------- */

Ciò risulta molto utile nel caso in cui si voglia specificare la possibilità di modifica, diffusione da parte di altre persone.

L’importanza di scegliere i nomi degli stili

Come già sappiamo possiamo far riferimento ad una classe (usando “.”) o ad un ID (usando “#”) e assegnargli un determinato stile di formattazione.
Che regole possiamo seguire per decidere il nome delle classi o degli ID?

  • Utilizzare nomi che rispecchino lo scopo e non l’apparenza dello stile: evitare quindi di utilizzare classi (o ID) come .titoloVerde, .testoCorsivo che facciano riferimento al tipo di formattazione.
    Si consiglia invece di mettere in evidenza lo scopo dello stile e quindi privilegiare nomi come .titolo, .notaImportante, .commento, ecc… Perchè? Per il motivo che in un futuro non sarà sempre garantita la corrispondenza apparenza-nome, ad esempio cambiando i titoli in rosso e non più in verde.
  • Non usare nomi che facciano riferimento a posizioni: in un certo senso è molto simile al primo punto; in questo caso si sconsigliano nomi come .barraSinistra, .immagineTop, ecc… consigliando invece nomi come .banner, .menu, ecc…
  • Evitare nomi insignificanti: A discapito della dimensione finale del file è utile utilizzare nomi che abbiano un significato evitando quindi nomi come .z7, .tr1, ecc…

Utilizzare classi multiple

L’utilizzo di classi multiple facilita di molto la gestione e la creazione dei CSS.
Immaginiamo di avere un form dove alcuni campi sono obbligatori ed altri no:

  1. <div class="campo">...</div>
  2. <div class="campoRichiesto"> ... </div>
  3. <div class="campoErrore"> ... </div>

Questo spezzone di codice XHTML obbliga la creazione di 3 stili che hanno in comune alcune righe di formattazione (e quindi c’è ridondanza):

  1. .campo {...}
  2. .campoRichiesto {...}
  3. .campoErrore {...}

La ridondanza, in qualsiasi codice sia presente, è sempre una zavorra di negatività visto che porta lo sviluppatore a dover modificare allo stesso modo più righe, gestire le incongruenze e molti altri fastidi.
L’utilizzo multiplo delle classi ci viene in aiuto:

  1. <div class="campo">...</div>
  2. <div class="campo richiesto"> ... </div>
  3. <div class="campo errore"> ... </div>

Come potete notare a 2 DIV ho associato 2 classi (non c’è un limite) che mi rendono la composizione del CSS molto più efficiente:

  1. .campo {...}
  2. .richiesto {...}
  3. .errore {...}

In questo caso non esiste alcuna ridondanza (se non voluta) e quindi se vogliamo modificare l’aspetto di tutti i campi basta fare una singola modifica e non perderci tra le centinaia di righe del CSS.

Sfruttare l’ereditarietà

Il titoletto dice tutto: un modo per rendere il codice molto più leggibile e leggero è quello di sfruttare a pieno l’ereditarietà degli stili.
Evitare situazioni del genere:

  1. <div class="prodottoTitolo">...</div>
  2. <div class="prodottoDescrizione">...</div>

A favore di:

  1. <div class="prodotto">
  2.  <div class="titolo">...</div>
  3.  <div class="descrizione">...</div>
  4. </div>

Questa è pura organizzazione che rende il codice molto più facile da vedere e quindi da gestire (portando con se molti vantaggi pratici).

Conclusioni

Naturalmente questa mini-guida non ha la presunzione di definirsi completa ma quella di dare la giusta importanza all’ordine e alle metodiche di sviluppo di un foglio di stile CSS (da notare comunque come alcuni consigli valgono per qualsiasi codice).
La vita sarà facile se ce la rendiamo facile…