Costruire layout complessi e flessibili non è mai stato facile, ma CSS3 ha sicuramente tolto un sacco di grattacapi.
Funzionalità CSS3 come Flexbox e colonne hanno reso possibili alcune configurazioni complesse e ora vengono aggiunte a una delle novità più recenti nella cassetta degli attrezzi del web designer: le regioni CSS.
Le regioni CSS consentono di trasferire il contenuto in una serie di contenitori su una singola pagina. È l'equivalente del collegamento di caselle di testo in un'applicazione come InDesign. Rende possibili alcuni layout che in precedenza erano possibili solo sfocando la linea tra i dati e gli stili.
Come sempre, il supporto del browser è tutt'altro che perfetto.
Le regioni CSS sono ancora una bozza, il che significa che è sperimentale. Inizialmente l'unico browser a supportarlo effettivamente era Internet Explorer 10 (no, non sto scherzando); sebbene IE10 utilizzi un iframe come origine dei contenuti.
Safari afferma di offrire supporto con un prefisso.
In Chrome puoi testare la funzionalità aprendo il browser, digitando "about: flags" e attivando "enable-experimental-webkit-features", quindi riavviando il browser.
Fortunatamente c'è anche un Polyfill JavaScript creato da Adobe che porta la funzionalità di CSS Regions ai browser che attualmente non lo supportano, puoi trovarlo su github.
Dato che lo scopo delle regioni CSS è quello di permettere al nostro testo di fluire attraverso diversi contenitori, la prima cosa di cui hai bisogno è un testo:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc cursus imperdiet purus ac eleifend. Vivamus posuere pellentesque nibh vel laoreet. Donec et sem odio. Donec sit amet lorem hendrerit, faucibus libero et, mattis lacus. Suspendisse dapibus rutrum felis quis interdum. Integer tincidunt, orci at condimentum placerat, est nulla sollicitudin velit, vitae gravida nisi odio ac ligula. Sed hendrerit ac massa vel ultricies. Vestibulum commodo, orci et tincidunt laoreet, enim tellus aliquet orci, quis dapibus sapien tellus eu felis. Etiam non arcu at eros luctus consectetur vitae eget nunc. In felis ipsum, vehicula ac mauris vel, porttitor gravida neque.Quisque orci turpis, aliquam vel tortor convallis, ullamcorper molestie nisl. Sed aliquet dignissim lorem non fringilla. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi congue erat ac hendrerit ullamcorper. Morbi facilisis urna nunc, eget pretium lectus congue vitae.E poi alcuni contenitori:
Ora abbiamo impostato il contenuto di base, possiamo collegare i contenitori usando flow-in e flow-from, noterete nell'esempio che ho aggiunto il prefisso -webkit- .
.text {-webkit-flow-into: text-flow;padding: 0;margin: 0;color: #F2F2F2;font-family: helvetica, arial;font-size: 16px;line-height: 22px;}.containers{-webkit-flow-from: text-flow;background: #333333;padding: 5px;margin-top: 100px;width: 200px;height: 300px;float: left;margin-right: 20px;}Se lo controlli in un browser, vedrai che il testo scorrerà da una casella all'altra. Se ora posizioni quei contenitori, il testo continuerà a scorrere correttamente.
-webkit-flow-into: text-flow;Questa proprietà accetta un identificatore come valore. Quando si passa un valore a questa proprietà, diventa parte di un flusso denominato e interromperà il rendering come parte del flusso di pagine. Puoi annullarlo impostando la proprietà su none.
Il nome del flusso che usi è arbitrario, ma assicurati di essere coerente. Possiamo anche avere più elementi con lo stesso flusso denominato nel nostro esempio sopra.
Questo non è limitato al testo, possiamo anche far scorrere immagini, elenchi e molti altri tipi di contenuto HTML.
-webkit-flow-from: text-flow;Usiamo questa proprietà per specificare quale elemento (i) dovrebbe ricevere il flusso specificato.
Il valore è il nome del flusso che abbiamo specificato per la proprietà flow-in .
Ricordare che qualsiasi stile di contenuto applicato al testo originale verrà mantenuto attraverso il flusso. Quindi, se colorerai il testo in blu, rimarrà blu su tutti i contenitori.
Per vedere un esempio di regioni CSS in azione, dai un'occhiata questa penna Ho creato.
Il supporto del browser per le regioni CSS è attualmente debole e c'è ancora molta strada da fare prima di poter fare affidamento su di esso quotidianamente. Ma la flessibilità che offre è fantastica, e una volta che il supporto completo sarà a posto, penso che le Regioni CSS saranno la tecnica giusta per gli anni a venire.
Sei eccitato dalle regioni CSS? Quanto pensi che saremo in grado di usarli? Fateci sapere nei commenti.
Immagine in primo piano / miniatura, immagine cascata via cuatrok77.