Accentsconagua
CSS3
- Media Queries
- Ombre di testo
- Trasformazioni 3D
Share
Questo tutorial tratterà le basi delle regioni CSS, che ci permettono di scorrere il contenuto all'interno di varie sezioni della pagina. Confuso? Probabilmente lo sei; continuare a leggere!
Al momento della stesura di questo documento, la specifica delle regioni CSS è una bozza di lavoro e le cose potrebbero cambiare! Le tecniche menzionate in questo tutorial potrebbero cambiare in fase di implementazione. Lo scopo di questo tutorial è fornire una conoscenza di base delle regioni CSS e di ciò che potrebbe accadere a un browser vicino a te.
Dai un'occhiata a caniuse.com per un elenco di browser che hanno un certo supporto per le regioni CSS. Questo tutorial userà solo esempi prefissati per webkit / non-vendor per motivi di semplicità.
Se trovi che la demo non funziona per te, potrebbe essere perché le regioni CSS devono essere abilitate, ecco le istruzioni per Chrome (dovrebbe funzionare per Chrome, Chrome Canary & Chromium)
Dimostrare le regioni CSS in un modo semplice richiede in realtà molto poco codice!
Per entrare nel flusso di cose lascia passare un rapido esempio di come usare le regioni CSS.
Per prima cosa, abbiamo bisogno di un testo fittizio contenuto nel tag del paragrafo, di seguito si noteranno due div vuote ciascuna con una classe di "regioni". Usando le regioni CSS consentiremo al nostro "testo di esempio" di flusso nella regione div.
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed fa eiusmod tempor incididunt ut labore et dolore magna aliqua."
.example-text -webkit-flow-into: example-text-flow; padding: 0; margine: 0; .regions -webkit-flow-from: example-text-flow; bordo: 1px solido nero; imbottitura: 2px; margine: 5px; larghezza: 200 px; altezza: 50 px;
Se provi a visualizzare il codice sopra in un browser Webkit che supporta le regioni CSS, dovresti vedere qualcosa del tipo:
Tutti gli stili (a parte -webkit-flow-from) che sono stati applicati alla classe "regions" sono lì solo per rendere evidente dove sono le regioni, le due linee di CSS che ci interessano sono:
-webkit-flow-into: example-text-flow; -webkit-flow-from: example-text-flow;
Questi saranno discussi in maggior dettaglio di seguito
confluire Proprietà e flussi nominatiLa proprietà flow-in accetta un identificatore come valore, una volta applicato il flusso in una proprietà su un elemento e passato un identificatore, quell'elemento diventa parte di un "flusso denominato". Non appena un elemento diventa parte di un flusso con nome, viene rimosso dal suo flusso normale - questo significa essenzialmente che l'elemento non verrà reso sulla pagina, ad esempio:
Non verrò reso sulla pagina
.example-text -webkit-flow-into: example-text-flow;
Ci sono alcune eccezioni a questo però, se la proprietà flow-in è data il valore 'none' l'elemento non farà parte di un flusso denominato e sarà quindi soggetto al solito rendering sulla pagina. Come avrete intuito, un altro caso in cui verrà visualizzato un elemento che fa parte del flusso denominato è quando è associato ad una regione valida.
Più elementi possono essere inseriti nello stesso flusso denominato:
# example-1 -webkit-flow-into: my-named-flow; # example-2 -webkit-flow-into: my-named-flow;
Se esiste una regione associata per "my-named-flow", verrà effettuato un tentativo di far scorrere i due elementi (#Esempio 1 & # Esempio-2) nella corrispondente catena di regioni.
Non sono solo semplici pezzetti di testo che possono essere inseriti in un flusso chiamato, possiamo anche inserire immagini! Avere la possibilità di inserire tutti i tipi di elementi HTML in flussi nominati è una cosa potente. Ad esempio, diciamo che avevamo due elenchi individuali ma dal punto di vista della presentazione volevamo mostrarli insieme. Un modo per procedere è utilizzare i selettori CSS per indirizzare solo le parti di cui abbiamo bisogno e inserirle in un flusso denominato, esempio (estratto di codice):
CSS3
- Media Queries
- Ombre di testo
- Trasformazioni 3D
HTML5
- Tela
- Trascinare e rilasciare
- Archiviazione Web
/ * Inserisci l'elenco all'interno dell'articolo in un flusso denominato * / # css3> ul -webkit-flow-into: buzzwords-flow; # html5> ul -webkit-flow-into: buzzwords-flow; # buzzwords-region -webkit-flow-from: buzzwords-flow; bordo: 1px verde fisso;
(Dimostrazione di quanto sopra.) Se osservi il codice sorgente, noterai che i nostri elenchi HTML5 e CSS3 sono stati uniti in un nuovo elenco. Prendi nota di come le intestazioni di tali elenchi non erano mirate nei selettori CSS e quindi non fanno parte di alcun flusso denominato, pertanto vengono comunque visualizzate sulla pagina e non sono contenute in una regione.
flusso-da ProprietàLa proprietà flow-from è in grado di prendere un contenitore, ad esempio un div vuoto e trasformarlo in una regione. Affinché diventi una regione valida, deve avere un flusso con nome associato. Come discusso, i flussi denominati vengono creati utilizzando la proprietà flow-in e quindi utilizzando un identificatore come valore.
.region -webkit-flow-from: my-named-flow;
Simile alla proprietà flow-in, possiamo assegnare il valore di "none" alla proprietà flow-from, ciò rende l'elemento corrispondente nient'altro che un contenitore, ad es. non agirà come una regione.
Quando si applica la proprietà flow-from su un elemento, non avrà un'altezza o una larghezza, motivo per cui è necessario impostarli per visualizzare i contenuti della regione. Le regioni possono agire solo come catene di regioni per un singolo flusso denominato, in modo che più elementi possano fluire - in un singolo flusso denominato, ma una regione può fluire solo da un singolo flusso denominato. Una regione manterrà gli stili del suo elemento sorgente; questo significa che se l'elemento sorgente ha il valore del colore di rosso, il testo continuerà ad apparire rosso quando sottoposto a rendering come parte di una regione.
Le specifiche CSS Region hanno preso in considerazione l'utilizzo delle regole @region per lo stile di una regione specifica.
"Un
@regionela regola contiene dichiarazioni di stile specifiche per regioni particolari. "
Questo potrebbe consentire la sintassi CSS (simile a quella delle query multimediali) come:
/ * Uno stile regolare su tutti i tag di paragrafo * / p font-weight: normal; @region # my-region / * Quando il testo dall'elemento p scorre in # mia-region, usa lo stile sotto * / p font-weight: bold;
Essere in grado di farlo consentirebbe lo styling di regioni specifiche da applicare alla sorgente, al momento, impostando ad esempio "font-weight: bold" su una regione non si farà in grassetto il contenuto visualizzato al suo interno - lo styling deve essere applicato sul elemento sorgente.
Al momento della stesura di questo documento, esiste un supporto nei browser basati su Webkit per accedere alle informazioni della regione CSS tramite JavaScript. Usando JavaScript, possiamo selezionare un flusso in base al suo identificatore e scoprire quali regioni sono associate ad esso. Possiamo persino scoprire lo stato di una particolare regione, potrebbe esserci un caso d'uso in cui le regioni vuote necessitano di una gestione specifica, utilizzando JavaScript possiamo realizzare questo.
È possibile accedere a un flusso denominato in JavaScript utilizzando document.getFlowByName ('identificatore') (puoi provare questi nella console per sviluppatori nella demo.)
var flow = document.webkitGetFlowByName ('example-1-text'); 
L'oggetto restituito è qualcosa chiamato WebkitNamedFlow. flow.contentNodes conterrà una serie di elementi HTML che vengono utilizzati come origine per il flusso a cui si accede.
La capacità di rilevare quale contenuto appartiene a quali regioni possono rivelarsi utili in varie situazioni.
var flow = document.webkitGetFlowByName ('example-4-text'); var main_content = document.querySelector ('# example-4 .main_content'); flow.getRegionsByContentNode (main_content); Nel codice qui sopra, per prima cosa troviamo il flusso sulla pagina usando il nome del flusso, quindi usando l'API dei selettori accediamo a un pezzo di contenuto sulla pagina e lo passiamo come argomento a getRegionsByContentNode (), questo restituisce un elenco di elementi che vengono utilizzati come regioni per quel particolare contenuto.
Possiamo determinare molto rapidamente lo stato di una regione per quanto riguarda il modo in cui il contenuto al suo interno si adatta.
// Questo non è un selettore molto efficiente, consultare https://developers.google.com/speed/docs/best-practices/rendering#UseEfficientCSSSelectors var region7 = document.querySelector ('# esempio-4 .regioni> div: nth -child (7) '); region7.webkitRegionOverflow // "adatto" element.regionOverflow restituirà valori diversi a seconda di come sta gestendo il contenuto sorgente. Esistono quattro valori possibili: "overflow", "fit", "empty" e "undefined"
Puoi provarlo utilizzando gli strumenti per sviluppatori in Chrome, nella pagina demo, fai clic con il tasto destro su una delle caselle blu (una regione) e seleziona "Ispeziona elemento". Puoi trovare che l'elemento sorgente è selezionato piuttosto che il div regione. Prova a trovare il div più vicino con la classe di "regioni" e seleziona una delle div child (dovrebbero apparire vuote). A questo punto puoi premere il tasto Esc sulla tastiera che dovrebbe far apparire la console; ora come una comoda scorciatoia puoi digitare $ 0 nella console per accedere all'elemento selezionato. Ora prova a digitare:
$ 0.webkitRegionOverflow // 'overflow', 'fit', 'empty' o'undefined '
Ciao! Grazie per aver letto questo tutorial, ecco alcune informazioni aggiuntive che potrebbero interessarti.
