Introduzione alle regioni CSS

Articolo originale scritto da Chris Mills e accessibile qui.
Traduzione di Nicolas Chevallier, pubblicata il 24 febbraio 2014.
Licenza: Questa traduzione è resa disponibile sotto una Licenza Creative Commons Creative Commons License

Introduzione

CSS3 aggiunge molte caratteristiche per aiutarci a costruire layout complessi e flessibili in modo più semplice e logico, senza dover ricorrere a JavaScript e dolorosi hack. Una di queste caratteristiche è descritta nel modulo CSS Regions level 3 – l’idea di base qui è che tu scrivi il tuo contenuto all’interno dei buoni vecchi elementi HTML semantici, poi definisci anche un insieme separato di contenitori (non semantici) che serviranno come base su cui ancorare i tuoi template che definiscono il layout, ecc. Questo è perfetto, perché significa che potete mantenere il vostro contenuto completamente separato dai vostri problemi di layout, senza duplicare la semantica o i dati e senza influenzare l’accessibilità. E come bonus, offrire alternative intelligenti usando Modernizr è molto semplice. Vediamo come implementare questo!

Regioni è attualmente in fase di bozza, quindi potrebbe cambiare un po’ prima del suo rilascio finale. Al momento di scrivere questo articolo, funziona solo in Chrome Canary, IE10 (in un modo diverso, coinvolgendo IFrame ) e Opera 16, ma vale sempre la pena di giocare con queste tecnologie all’inizio, in modo da poterle imparare prima del tempo e fornire suggerimenti preziosi per chi scrive le citazioni. In Chrome/Opera, è necessario abilitare l’opzione “experimental WebKit features” (digitare about:flags in una nuova scheda e cercare questa opzione, o eseguire il browser a riga di comando Terminal con l’opzione --enable-experimental-webkit-features) perché questo funzioni.

Per dare un feedback su Regions, contattare il gruppo di lavoro CSS tramite la loro mailing list.

Esempio di regioni

Per mostrare come funzionano le regioni, facciamo un esempio. Potete testare l’esempio delle regioni dal vivo, o vedere come appare nella figura 1.

esempio di regioni CSS che mostra un layout complesso con contenuto gettato in diverse caselle

Figura 1: Un layout complesso fatto usando le regioni CSS.

Abbiamo effettivamente separato completamente il nostro contenuto da qualsiasi tipo di layout, il che ci riporta all’intento originale dei CSS. Il contenuto può essere disposto nei tuoi contenitori di layout, indipendentemente da come sono dimensionati e posizionati, e riorganizzare il contenuto quando questi contenitori cambiano dimensione. Prova a visualizzare la pagina di esempio cambiando le dimensioni della finestra del browser. Qualsiasi contenuto che non si adatta alle prime tre regioni finirà nella quarta casella in basso, che sto usando come una sorta di casella di trabocco (altrimenti il contenuto traboccherebbe fuori dalla terza area e giù per lo schermo). Il contenuto si dispone nelle regioni nell’ordine in cui appaiono nel sorgente originale.

La prima cosa da notare nel codice HTML del mio esempio è la struttura non semantica del layout in cui disporrò il contenuto. Quindi ecco le nostre regioni:

<div class="layout"> <div class="text-container"><!-- --></div> <div class="text-container"><!-- --></div> <div class="image-container"> <img src="../base-styles/grim-north.jpg" alt="A map of the North of England"> </div> <div class="text-container"><!-- --></div></div><div class="text-overflow"><!-- --></div>

Nota: abbiamo aggiunto commenti vuoti per sbarazzarci di un bug di layout particolarmente strano, dove IE6 inserisce linee vuote quando incontra <div> vuoti.

In CSS, possiamo creare un modello di layout complesso quanto vogliamo – puoi essere creativo quanto vuoi! Ho fatto così:

/* positioning and styling for fancy containers */.layout { height: 600px; position: relative;}.text-container, .text-overflow { background: -webkit-repeating-linear-gradient(top, rgba(150,150,150,0.3) 0px, rgba(150,150,150,0.3) 1px, transparent 2px, transparent 40px), -webkit-linear-gradient(top left, rgba(255,255,255,1), rgba(200,200,200,1)); background: -moz-repeating-linear-gradient(top, rgba(150,150,150,0.3) 0px, rgba(150,150,150,0.3) 1px, transparent 2px, transparent 40px), -moz-linear-gradient(top left, rgba(255,255,255,1), rgba(200,200,200,1)); background: -ms-repeating-linear-gradient(top, rgba(150,150,150,0.3) 0px, rgba(150,150,150,0.3) 1px, transparent 2px, transparent 40px), -ms-linear-gradient(top left, rgba(255,255,255,1), rgba(200,200,200,1)); background: repeating-linear-gradient(to bottom, rgba(150,150,150,0.3) 0px, rgba(150,150,150,0.3) 1px, transparent 2px, transparent 40px), linear-gradient(to bottom right, rgba(255,255,255,1), rgba(200,200,200,1)); padding: 2rem; box-shadow: 0.5rem 0.5rem 20px black;}.layout .text-container { position: absolute; width: 25%; height: 300px; z-index: 2;}.layout .image-container { position: absolute;}.layout div:nth-of-type(1) { top: 0; left: 0; -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -ms-transform: rotate(-5deg); transform: rotate(-5deg);}.layout div:nth-of-type(2) { top: 2rem; left: 30%; -webkit-transform: rotate(1deg); -moz-transform: rotate(1deg); -ms-transform: rotate(1deg); transform: rotate(1deg);}.layout div:nth-of-type(3) { display: block; top: 15rem; left: 50%; border: 1px solid black; -webkit-transform: rotate(4deg); -moz-transform: rotate(4deg); -ms-transform: rotate(4deg); transform: rotate(4deg);}.layout div:nth-of-type(4) { top: 25rem; left: 67.5%; -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -ms-transform: rotate(10deg); transform: rotate(10deg);}.text-overflow { height: auto;}

In seguito, notate che il contenuto effettivo della pagina è contenuto in un insieme di elementi semantici, come dovrebbe essere:

<article class="content"><h2>Introduction</h2><p>Hello, dear readers…</p></article><article class="content"> …</article>

Creazione di regioni

Ora guardiamo il codice per le regioni: è davvero semplice rispetto a quello che ho mostrato sopra! Per definire che un elemento, o una serie di elementi contengono il contenuto che volete far passare nelle vostre regioni, dovete usare la proprietà flow-into:

.content { -webkit-flow-into: article; -moz-flow-into: article; -ms-flow-into: article; flow-into: article;}

In seguito, specificherò i contenitori in cui disporre il contenuto, usando la proprietà flow-from, che assume lo stesso id mostrato sopra.

.text-container { -webkit-flow-from: article; -moz-flow-from: article; -ms-flow-from: article; flow-from: article;}.text-overflow { -webkit-flow-from: article; -moz-flow-from: article; -ms-flow-from: article; flow-from: article; }

Nota: “item” può essere qualsiasi cosa tu voglia – è un identificatore che definisci, per un passo intermedio chiamato “named flow” – disponi il tuo contenuto nel named flow usando flow-into, e il flusso nei tuoi contenitori usando flow-from .

È così semplice – ora vedrai il contenuto disposto nei contenitori del layout.

Nota: il supporto attuale del browser non è ancora perfetto – potresti trovare alcune cose che non funzionano usando le regioni. Per esempio, non sono riuscito a far funzionare il multi-col in una regione, anche se è esplicitamente menzionato nelle specifiche.

Visualizzazione alternativa

Creare alternative per i browser non supportati è abbastanza facile per quanto riguarda le regioni. È possibile rilevare il supporto delle regioni utilizzando Modernizr (2.6 e successivi), poi nei browser che non lo supportano, fornire un po’ di stile per il contenuto semantico stesso, non per i contenitori del layout. Vediamo come questo è stato fatto nel nostro esempio.

Prima abbiamo bisogno di creare una versione di Modernizr che gestisca il rilevamento delle caratteristiche regionali. Per farlo, dobbiamo visitare la pagina di download di Modernizr, cliccare su “non-core detects” per espandere la lista delle opzioni disponibili, e spuntare “css-regions”, poi cliccare “Generate!”, quindi “Download”.

Per aggiungere il rilevamento delle regioni al nostro esempio, basta aggiungere:

<script src="Modernizr.css-regions.js"></script>

In seguito, posso aggiungere alcuni stili alternativi per fornire un layout semplificato per i browser che non supportano le regioni. Lo farò usando un selettore verso il basso da .feature-no-regions, poiché Modernizr aggiunge la classe feature-no-regions al tag <html>, quando il sito viene reso in browser che non supportano le regioni:

.feature-no-regions .layout, .feature-no-regions .text-overflow { display: none;}.feature-no-regions .content { float: left; width: 48%; padding: 1%;}

Qui, ho semplicemente nascosto i contenitori del layout usando display: none; , poi ho impostato come floating box i due elementi con una larghezza e un padding, in modo che i browser non supportati visualizzino qualcosa di utilizzabile che non sia troppo orribile (vedi Figura 2). Siete, ovviamente, invitati a produrre qualcosa di molto più interessante!

un semplice layout a due colonne inteso come fallback per i browser che non supportano le regioni CSS.

Figura 2: un semplice layout a due colonne, visualizzato dai browser che non supportano le regioni CSS, tramite Modernizr.

Summario

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *