Il Blog di INSTANT WEBSITES

CSS3

Introduzione a flexbox

Introduzione a flexbox

La proprietà flexbox, introdotta con CSS3, costituisce uno strumento molto interessante per gestire lo spazio all’interno di un contenitore anche quando non si conoscano a priori le dimensioni dei box in esso contenuti.

L’aspetto più interessante che differenzia questa soluzione tecnica da quelle alternative (l’uso della proprietà float e della dichiarazione display: table-cell) è che tramite flexbox è possibile riordinare i box cambiandone la disposizione.

Per esaminare ad un primo livello di approfondimento flexbox, procederemo con una serie di esempi.

Inseriamo nella pagina un contenitore largo 450px con (inizialmente) tre box larghi 150px ciascuno, identificati dai numeri 1, 2 e 3 al loro interno.
Al contenitore è stata assegnata la classe .wrapper ed ai tre box al suo interno le classi: .primo, .secondo e .terzo.

Nel primo esempio, così come in quelli che seguono, il contenitore .wrapper ha tra le sue proprietà css la dichiarazione: display: flex; ed i box in esso contenuti assumono il comportamento di default, vale a dire si dispongono uno di fianco all’altro.

E’ possibile cambiare questa disposizione tramite la proprietà flex-direction che assume questi possibili valori: row (default), column, row-reverse e column-reverse.
Nel secondo esempio è stata usata la dichiarazione flex-direction: row-reverse; e nel terzo esempio la dichiarazione flex-direction: column-reverse; facendo sì che i box si dispongano rispettivamente su una riga partendo dall’ultimo e su una colonna, sempre partendo dall’ultimo.

Continua a leggere

Box reattivo centrato orizzontalmente e verticalmente nella viewport

Prima dell’avvento del web responsive (o reattivo che dir si voglia), per centrare un box orizzontalmente e verticalmente nella viewport era innanzitutto necessario definirne le dimensioni (larghezza ed altezza), indi posizionarlo in modo assoluto come segue:

#box { width:600px; height:400px; position:absolute; top:50%; left:50%; margin-top:-200px; margin-left:-300px;}

Dopo avere dunque impostato una posizione top e left pari al 50%, è indispensabile correggerla applicando dei margini negativi superiore e sinistro pari ciascuno a metà della corrispondente dimensione del box.
In questo modo a risultare centrato nella viewport non è il punto superiore sinistro del box bensì il suo punto centrale, ottenendo l’effetto desiderato.

Per visualizzare un esempio di questa tecnica, clicca qui.

Se non conosciamo a priori larghezza ed altezza del contenitore, possiamo utilizzare la proprietà CSS3 transform con la funzione translate() che, come noto, riposiziona l’elemento spostandolo gli assi orizzontale e verticale.

Continua a leggere

Il box-model e la proprietà box-sizing

Principio generale

Il c.d. box-model indica il modo in cui, nei CSS o Cascading Style Sheets, vengono interpretate le principali proprietà dimensionali assegnate ad un certo box contenitore in larghezza e/o altezza, tenendo presente che quasi sempre le problematicità si presentano con riferimento alla larghezza (essendo lo scrolling operazione comune nella fruizione dei siti web).

Facendo dunque riferimento alla larghezza, in sintesi il box-model è il seguente:

LARGHEZZA EFFETTIVA DI UN BOX = width + padding orizzontale + bordi sui lati sx e dx

quindi un box definito dalle seguenti dichiarazioni:

#box { width:600px; padding-right:20px; padding-left:20px; border: 2px solid #333; … }

avrà larghezza effettiva pari a 600 +20 + 20 + 2 + 2 = 644px

In maniera analoga, con riferimento all’altezza, avremo invece:

ALTEZZA EFFETTIVA DI UN BOX = height + padding verticale + bordi sui lati superiore ed inferiore

Perché abbiamo detto che il problema si presenta di solito con riferimento alla larghezza?
Per il semplice motivo che segue: se l’altezza di un contenitore si rivela maggiore del previsto, si tratterà per l’utente di effettuare uno scrolling maggiore verso il basso senza altre conseguenze problematiche; se invece è la larghezza ad essere maggiore, può accadere che la disposizione degli elementi ne risenta negativamente come ad esempio nel caso di due colonne flottanti affiancate (la seconda, non trovando sufficiente spazio, si posiziona sotto alla prima invece che di fianco determinando la “rottura” del layout).

Il problema nelle vecchie versioni di Internet Explorer

Tutto facile dunque? Macchè! Nelle vecchie – vecchissime … diciamo pure preistoriche – versioni di Internet Explorer, la 5.5 e precedenti, l’interpretazione del box-model era completamente invertita giacché la larghezza dichiarata con la proprietà width era quella effettiva, comprensiva di padding e bordi (nell’esempio di cui sopra: 600px).

Il fatto che IE fosse praticamente l’unico browser presente sul mercato, eccezion fatta per Netscape Navigator – che avrebbe a sua volta inciampato nella famigerata versione 4 così difettosa da comprometterne un futuro stabile e duraturo – pose agli sviluppatori di fronte a due scelte:

  1. interpretare il box-model così come definito in Internet Explorer,
  2. aggirare il problema in questo modo: assegnare la sola proprietà width al box contenitore e crearne un altro al suo interno a cui attribuire il padding.

La soluzione 2. comportava un appesantimento – peraltro modesto – del markup nel senso che là dove sarebbe stato possibile avere solo un elemento, ce n’erano in definitiva due ma appariva un prezzo da pagare più che ragionevole per applicare correttamente le regole del box-model ed ottenere un risultato appropriato anche in IE.

La fase di transizione

Con l’arrivo della versione 6 di IE (comunque disastrosa a causa dei numerosi e rilevanti bug), l’interpretazione del box-model divenne corretta e allineata agli altri browser che si stavano sviluppando, in particolare Firefox cioè il dichiarato erede di Netscape Navigator.

Il problema non era però sparito perché le versioni precedenti di IE continuavano a girare su numerose macchine.
Non dimentichiamo che eravamo ancora nell’era dei modem analogici quindi gli aggiornamenti non erano così facili, inoltre in molti li vedevano come pericolosi per via dei primi virus mascherati e il passaggio ad altri browser non era frequente per la sfiducia istintiva nei confronti di tutto ciò che non fosse firmato Microsoft (quanto sono cambiate le cose da allora!).

Per potere creare layout idonei a tutti i browser, quindi, diventava indispensabile adottare la soluzione 2. esplicitata nel paragrafo precedente oppure ricorrere ai cosiddetti commenti condizionali che portassero alla lettura ed esecuzione di regole CSS sostitutive e/o aggiuntive qualora venisse impiegato un browser caratterizzato da bug.

Ecco un esempio di commento condizionale inserito nella sezione <head> del file HTML, dopo il collegamento al foglio di stile di base:

<link href=”css/miosito.css” rel=”stylesheet” type=”text/css” />
<!–[if lt IE 6]>
    <link href=”css/miosito-ie.css” rel=”stylesheet” type=”text/css” />
<![endif]–>

dove la prima riga carica lo stylesheet di base e il commento condizionale successivo carica il foglio speciale con le regole sostitutive qualora il browser sia una versione precedente a IE6.

Gli operatori dei commenti condizionali erano:

[if IE] … I.E. qualsiasi versione
[if IE 6] … I.E. versione 6
[if lte IE 6] … I.E. versione 6 o inferiore
[if lt IE 6] … I.E. versione inferiore a 6 (esclusa quest’ultima)

Questa soluzione era evidentemente piuttosto noiosa ma sarebbe stata applicata anche dopo l’arrivo di IE6 e IE7, per rettificare alcuni bachi tanto stupidi quanto fastidiosi.

C’era un altro approccio possibile, inaccettabile nell’ottica di chi scrive: rinunciare del tutto a garantire compatibilità con le versioni via via superate di IE dando per scontato che chi non avesse proceduto ad aggiornamenti e non utilizzasse gli altri browser disponibili (il già citato Firefox, sempre più forte nel tempo fino all’avvento di Chrome) non meritasse di fruire di un sito correttamente visualizzato.
Approccio impossibile da condividere, come si diceva, perché l’obiettivo di uno sviluppatore professionista è quello di assicurare la visibilità del sito ad una platea più ampia possibile di fruitori, non di “educare” gli stessi ad abbandonare IE.
Ovviamente, restando nei limiti del ragionevole: se ancora qualcuno là fuori impiega Windows XP con IE7, beh … a questo punto, peggio per lui!

Continua a leggere

Categorie
Archivi