Comprensione delle proprietà e dei valori logici

In passato, i CSS si sono legati a dimensioni e direzioni fisiche, mappando fisicamente il posizionamento degli elementi a sinistra, a destra e in alto e in basso. float un elemento a left oa right , utilizziamo le proprietà di offset di posizionamento in top , a left , in bottom ea right . Impostiamo margini, riempimento e bordi come margin-top e padding-left . Queste proprietà e valori fisici hanno senso se si lavora in modalità e direzione di scrittura orizzontali, dall'alto verso il basso, da sinistra a destra.

Hanno meno senso se utilizzi una modalità di scrittura verticale, sia per l'intero layout che per alcuni elementi. In questo articolo, spiegherò come stanno cambiando i CSS per supportare le modalità di scrittura e, così facendo, chiarirò alcune delle cose che potrebbero confonderti su Flexbox e Grid.

Quando ho iniziato a lavorare con CSS Grid e a spiegare la nuova specifica alle persone, ho notato che la proprietà grid-area potrebbe essere utilizzata come scorciatoia di una riga per impostare tutte e quattro le righe. Pertanto, i tre esempi seguenti risulteranno nello stesso posizionamento dell'elemento. Il primo utilizza le proprietà longhand, il secondo specifica le linee di inizio e fine per ciascuna quota e il terzo utilizza grid-area .

 .item { grid-row-start: 1; grid-column-start: 2; grid-row-end: 3; grid-column-end: 4; }

 .item { grid-row: 1 / 3; grid-column: 2 / 4; }

 .item { grid-area: 1 / 2 / 3 / 4; }

L'ordine delle linee quando utilizziamo grid-area è il seguente:

• griglia-riga-inizio
• griglia-colonna-inizio
• fine riga della griglia
• griglia-colonna-fine

La prima domanda che mi sono posto (e molte persone nel mio pubblico) è stata: "perché questi non seguono l'ordine in alto, a destra, in basso, a sinistra a cui siamo abituati da tutto il resto nei CSS ?" In realtà vanno nell'ordine inverso a quei valori: in alto, a sinistra, in basso, a destra! Il CSS Working Group sta cercando attivamente di rendere le cose difficili?

La risposta è che questi valori si sono allontanati dal presupposto di base che il contenuto sul Web corrisponda alle dimensioni fisiche dello schermo, con la prima parola di una frase in alto a sinistra della casella in cui si trova. L'ordine delle righe nella grid-area ha perfettamente senso se non hai mai incontrato il modo esistente in cui impostiamo questi valori in una scorciatoia. Impostiamo prima le due linee di inizio, poi le due linee di fine.

Ciò significa che se cambiamo la modalità di scrittura del nostro documento in verticale, la posizione di un blocco rimane relativa alla modalità di scrittura del documento, piuttosto che alle proprietà fisiche dello schermo. Puoi provarlo nell'esempio seguente, cambiare il valore della modalità di scrittura per il nostro layout e vedere l'intera griglia ruotare.

Conoscere questo fatto sulle modalità di scrittura spiega anche perché CSS Grid e Flexbox si riferiscono a linee di start e end piuttosto che mappare la griglia alle dimensioni fisiche di alto, destra, basso e sinistra come useremmo con il posizionamento assoluto. Nell'esempio precedente, il primo elemento viene posizionato utilizzando grid-area e il posizionamento basato sulla linea.

 grid-area: 1 / 2 / 3 / 4;

Se dovessimo usare la mano lunga questo sarebbe simile a questo:

 grid-row-start: 1; grid-column-start: 2; grid-row-end: 3; grid-column-end: 4;

Impostiamo entrambe le linee di partenza, prima l'asse del blocco, poi l'asse in linea, quindi seguiamo lo stesso schema per le linee finali in ciascuna dimensione. In qualunque modo sia disposta la griglia, le linee di inizio e fine rimangono relative alla griglia e alla modalità di scrittura del documento.

Blocco e dimensioni in linea

Ho già accennato a qualcosa che è fondamentale per comprendere il nuovo layout, il concetto delle dimensioni Block e Inline. Questi termini continueranno a venire fuori mentre lavori con il nuovo CSS. Le due dimensioni sono ragionevolmente facili da capire nel contesto di Grid Layout poiché lavoriamo sempre con un blocco e un asse in linea quando lavoriamo in Grid Layout, quindi userò una demo Grid per spiegare.

La dimensione Blocco corrisponde all'ordine in cui i blocchi sono disposti nella pagina. Se pensi a un paragrafo di testo in inglese. Ogni paragrafo è disposto uno sotto l'altro, la direzione in cui sono disposti è la dimensione del blocco, quindi in Grid Layout, questo è l'asse del blocco.

In CSS Grid Layout, Block Axis viene anche chiamato Row Axis, motivo per cui le proprietà Block Axis sono grid-row-start e grid-row-end .

L'asse in linea, quindi, corre attraverso l'asse del blocco, nella direzione in cui le parole si dispongono in una frase. In inglese, quell'asse va da sinistra a destra. In Grid Layout, l'asse in linea è l'asse della colonna con le proprietà grid-column-start e grid-column-end .

Se cambiamo la modalità di scrittura del nostro esempio in vertical-lr la modalità di scrittura è ora verticale, il che significa che l'asse del blocco corre verticalmente e l'asse in linea lungo le linee (dall'alto in basso).

Quindi, se parliamo della dimensione Blocco, stiamo descrivendo la direzione in cui i paragrafi di testo verrebbero disposti nel normale flusso del documento, essendo la dimensione Inline la direzione in cui scorre una frase.

Proprietà logiche

Una volta che ti sei abituato a lavorare con le dimensioni Block e Inline, le righe di inizio e fine, il collegamento alle dimensioni fisiche nel resto del CSS inizia a sembrare imbarazzante. Esiste, tuttavia, una specifica che definisce le versioni logiche di tutte le proprietà fisiche esistenti: la specifica CSS per le proprietà ei valori logici, che è una prima bozza di lavoro pubblica. Attualmente l'unico browser con un buon supporto per queste proprietà è Firefox, tuttavia capire come funzionano può essere un buon modo per pensare ai nuovi CSS, quindi diamo un'occhiata.

Ho illustrato ogni sezione con esempi di CodePen, per vederli funzionare dovrai usare Firefox!

Dimensioni logiche

Le proprietà logiche definiscono una proprietà iniziale e finale per il blocco e la quota in linea. Per le proprietà di altezza e larghezza, utilizziamo invece block-size e inline-size . Possiamo anche impostare max-block-size , min-block-size , max-inline-size e min-inline-size . Se lavori in inglese, una lingua orizzontale dall'alto verso il basso block-size si riferisce height fisica del blocco sullo schermo, la inline-size la width fisica dell'elemento. Se stai lavorando in una lingua in cui i blocchi corrono verticalmente, quando guardi lo schermo apparirà la block-size per controllare la width e la inline-size l'altezza.

Puoi vederlo in azione nella demo qui sotto. Il mio blocco ha una block-size di 150 pixel e una inline-size di 250 pixel. Modificare la proprietà della writing-mode per vedere come si adatta il layout.

Confini logici

Abbiamo quindi proprietà per controllare i bordi che funzionano allo stesso modo. Le proprietà fisiche dei bordi sono:

• border-top
• border-top-width
• border-top-style
• border-top-color
• border-right
• border-right-width
• border-right-style
• border-right-color
• border-bottom
• border-bottom-width
• border-bottom-style
• border-bottom-color
• border-left
• border-left-width
• border-left-style
• border-left-color

Questi poi hanno mappature logiche che diventano un po' prolisse come mani lunghe, ma sono:

• border-block-start
• border-block-start-width
• border-block-start-style
• border-block-start-color
• border-inline-start
• border-inline-start-width
• border-inline-start-style
• border-inline-start-color
• border-block-end
• border-block-end-width
• border-block-end-style
• border-block-end-color
• border-inline-end
• border-inline-end-width
• border-inline-end-style
• border-inline-end-color

Nell'esempio seguente, sono presenti due blocchi, il primo che utilizza le proprietà logiche per impostare un border-block-start-color verde e uno border-inline-end-style punteggiato. Il secondo blocco utilizza le proprietà fisiche di border-top-color e border-right . Cambia la modalità di scrittura per vedere come si comportano.

Margini e imbottitura

I margini e il riempimento hanno una mano lunga simile alle nostre proprietà del bordo, con le proprietà fisiche che sono:

• margin-top
• margin-left
• margin-bottom
• margin-right
• padding-top
• padding-right
• padding-bottom
• padding-left

Questi hanno proprietà logiche come segue:

• margin-block-start
• margin-inline-start
• margin-inline-start
• margin-inline-end
• padding-block-start
• padding-inline-start
• padding-inline-start
• padding-inline-end

In questo prossimo esempio, ho impostato padding-block-start sul primo blocco e padding-top sul secondo, ho cambiato la modalità di scrittura per vedere la differenza quando gli assi Block e Inline vengono scambiati.

Spostamenti di posizionamento

Un altro luogo in cui vengono utilizzate le proprietà fisiche è quando si posizionano le cose utilizzando la proprietà position . Dopo aver impostato position: absolute o un altro valore di position diverso da quello predefinito di static , possiamo quindi posizionare un elemento utilizzando gli offset, dalla finestra o da un genitore che ha creato un nuovo contesto di posizionamento.

Le proprietà fisiche dell'offset sono:

• top
• right
• bottom
• left

Seguendo lo schema delle altre nostre proprietà logiche abbiamo quindi:

• offset-block-start
• offset-inline-start
• offset-block-end
• offset-inline-end

Provali nell'esempio qui sotto. La casella con un bordo ha position: relative e il quadratino viola position: absolute . Nell'esempio fisico il quadrato è posizionato in top: 50px ea right: 20px . La versione logica ha offset-block-start: 50px e offset-inline-end: 20px .

Valori logici

Un altro luogo in cui siamo abituati a usare le dimensioni fisiche è quando galleggiamo o schiariamo le cose. Per float , clear abbiamo alcune versioni logiche dei valori left e right .

• inline-start
• inline-end

Nella demo, sto fluttuando il blocco viola nella versione logica inline-start . Sto anche usando le proprietà logiche per il margine; questo assicura che il margine venga sempre dopo il blocco e prima del contenuto che lo avvolge. Selezionando il valore vertical-rl nell'elenco a discesa, puoi vedere come nell'esempio fisico il margine finisce a destra del blocco, anziché essere applicato nella direzione -end .

Esistono anche valori di start e end per text-align . Allineare qualcosa all'inizio lo allineerà all'inizio dell'asse in linea, alla end alla fine dell'asse in linea, indipendentemente dal fatto che la modalità di scrittura sia orizzontale o verticale.

Utilizzo di proprietà e valori logici oggi

Come già accennato, al momento c'è poco supporto del browser per proprietà e valori logici. Tuttavia, se vuoi iniziare a lavorare con loro ora, un'opzione sarebbe quella di scrivere il tuo CSS usandoli e quindi utilizzare un plug-in PostCSS per convertire le proprietà e i valori logici nelle loro controparti fisiche. Questo plugin di Jonathan Neal copre tutte le proprietà e i valori che ho descritto in questo articolo.

Puoi anche aiutare a incoraggiare l'adozione da parte dei fornitori di browser di queste proprietà contrassegnando il bug di Chrome e votandoli sul sito Edge Developer Feedback.

Anche se decidi di non utilizzare queste proprietà ora, capire come funzionano è un elemento chiave per la comprensione per lavorare con un nuovo layout. Descrivendo il tuo layout Grid o Flex come avente linee di inizio e fine, pensando alle dimensioni del blocco e in linea, queste cose renderanno molto più facile capire come funziona il layout.

Ulteriori letture

• I documenti Web MDN hanno tutte le proprietà logiche e i valori elencati con esempi aggiuntivi.
• Griglia CSS, valori logici e modalità di scrittura, MDN
• Modalità di scrittura CSS, Jen Simmons, 24 modi