Nuove scorciatoie per le proprietà logiche e nuove proprietà integrate per Chromium.
Da Chromium 69 (3 settembre 2018), le proprietà logiche e i valori logici hanno aiutato gli sviluppatori a mantenere il controllo dei loro layout internazionali tramite stili logici, anziché fisici, di direzione e dimensioni. In Chromium 87, sono stati inviati comandi abbreviati e offset per semplificare la scrittura di queste proprietà e valori logici. In questo modo Chromium fino a Firefox, che supportava le scorciatoie dal 66. Safari le ha pronte nell'anteprima tecnologica.
Flusso di documenti
Se hai già familiarità con le proprietà logiche, gli assi in linea e a blocchi e non ti serve un ripasso, puoi saltare. In caso contrario, ecco un breve riepilogo.
In inglese, lettere e parole scorrono da sinistra a destra, mentre i paragrafi sono impilati dall'alto verso il basso. Nel cinese tradizionale, le lettere e le parole sono posizionate dall'alto verso il basso, mentre i paragrafi sono impilati da destra a sinistra. In questi 2 casi, se scriviamo CSS che inserisce "margin top" in un paragrafo, interponiamo correttamente una sola lingua in uno stile. Se la pagina viene tradotta dall'inglese in cinese tradizionale, il margine potrebbe non avere senso con la nuova modalità di scrittura verticale.
Di conseguenza, il lato fisico della scatola non è molto utile a livello internazionale. Inizia così il processo di supporto di più lingue, scoprendo i lati fisici e logici del modello box.
Hai mai controllato l'elemento p in Chrome DevTools? Se è così, potresti aver notato che gli stili predefiniti dello user agent non sono fisici, ma logici.
p {
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
CSS del foglio di stile user agent di Chromium
Il margine non è in alto o in basso come potrebbe credere un lettore inglese.
Sono block-start e block-end! Queste proprietà logiche sono simili alla parte superiore
e inferiore di un lettore inglese, ma anche al lettore giapponese, a destra e a sinistra. Scritto una volta, funziona ovunque.
Il flusso normale si verifica quando la pagina web fa parte di questa multidirezionale intenzionalmente. Quando i contenuti della pagina vengono aggiornati in base alle modifiche di direzione del documento, il layout e i relativi elementi sono considerati come flusso. Scopri di più su "in entrata" e "uscita" dal flusso su MDN o nelle specifiche del modulo display CSS. Sebbene non sia necessario mantenere le proprietà logiche, svolgono gran parte del lavoro pesante in quanto cambia la direzionalità. Il flusso implica la direzione, ovvero le lettere, le parole e i contenuti che devono percorrere. Questo ci porta a bloccare e incorporare le direzioni logiche.
La direzione di un blocco è la direzione in cui seguono i nuovi blocchi di contenuti, ad esempio chiedendoti
"dove posizionare il paragrafo successivo?". Potresti pensare a un "blocco di contenuti" o a un "blocco di testo".
Ogni lingua organizza i propri blocchi e li ordina insieme al rispettivo block-axis. block-start è il lato in cui viene posizionato per primo un paragrafo,
mentre block-end è il lato verso cui scorre i nuovi paragrafi.
Nella scrittura a mano libera tradizionale giapponese, ad esempio, la direzione di blocco scorre da destra a sinistra:
La direzione in linea è la direzione in cui si muovono le lettere e le parole. Considera la direzione
di spostamento del braccio e della mano quando scrivi, poiché si spostano lungo il inline-axis.
inline-start è il lato in cui inizi a scrivere, mentre inline-end è il lato
in cui la scrittura finisce o va a capo. Nel video qui sopra, il inline-axis è dall'alto verso il basso,
ma nel prossimo video il inline-axis è mostrato da destra a sinistra.
Il valore flow-relative
significa che gli stili scritti per una lingua saranno contestuali e
applicati correttamente in altre lingue. Il flusso dei contenuti avverrà in base alla lingua di destinazione.
Nuovi comandi rapidi
Alcune delle seguenti scorciatoie non sono nuove funzionalità per il browser, ma piuttosto modi più semplici per scrivere stili grazie alla possibilità di impostare valori contemporaneamente su entrambi i bordi dei blocchi o in linea. Le proprietà logiche inset-* offrono nuove funzionalità,
poiché non esistevano modi lunghi per specificare posizioni assolute con proprietà logiche
prima dell'origine. Tuttavia, gli insiemi e le scorciatoie scorrono così bene insieme,
ma ti parlerò contemporaneamente di tutte le nuove funzionalità delle proprietà logiche disponibili in Chromium 87.
Margini abbreviati
Non sono state inviate nuove funzionalità, ma è stato possibile usare alcune scorciatoie utilissime:
margin-block e
margin-inline.
margin-block-start: 2ch; margin-block-end: 2ch;
margin-block: 2ch; /* or */ margin-block: 2ch 2ch;
Non esiste una scorciatoia per "superiore e inferiore" o "sinistra e destra"... finora!
Probabilmente farai riferimento a tutti e quattro i lati usando l'abbreviazione di margin: 10px; e ora
puoi facilmente fare riferimento a due lati complementari utilizzando l'abbreviazione della proprietà logica.
margin-inline-start: 4ch; margin-inline-end: 2ch;
margin-inline: 4ch 2ch;
Semplicità di spaziatura
Non sono state fornite nuove funzionalità, ma sono state trovate altre scorciatoie super utili:
padding-block e
padding-inline.
padding-block-start: 2ch; padding-block-end: 2ch;
padding-block: 2ch; /* or */ padding-block: 2ch 2ch;
E il set di comandi rapidi inclusi in inline:
padding-inline-start: 4ch; padding-inline-end: 2ch;
padding-inline: 4ch 2ch;
Inset e Short
Le proprietà fisiche top, right, bottom e left possono essere scritte
come valori per la proprietà inset. Qualsiasi valore di position può trarre vantaggio dall'impostazione dei lati con un riquadro.
.cover {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
inset: 0;
}
position: absolute; top: 1px; right: 2px; bottom: 3px; left: 4px;
position: absolute; inset: 1px 2px 3px 4px;
Dovrebbe risultare immediatamente pratico. "Inset" è un'abbreviazione per i lati fisici e funziona come margine e spaziatura interna.
Nuove funzionalità
Per quanto entusiasmante per quanto riguarda l'aspetto fisico, c'è ancora di più nelle
caratteristiche logiche offerte da ulteriori scorciatoie di inset. Queste scorciatoie offrono agli sviluppatori maggiore praticità (sono più brevi da digitare), ma aumentano anche la potenziale copertura del layout in quanto sono relativi al flusso.
position: absolute; top: 10px; bottom: 10px;
position: absolute; inset-block: 10px;
position: absolute; left: 10px; right: 20px;
position: absolute; inset-inline: 10px 20px;
Su MDN sono disponibili ulteriori letture e un elenco completo dei testi in versione abbreviata e lunga.
Scorciatoie da tastiera per i bordi
Anche il bordo e le relative proprietà nidificate color, style e width hanno nuove scorciatoie logiche.
border-top-color: hotpink; border-bottom-color: hotpink;
border-block-color: hotpink; /* or */ border-block-color: hotpink hotpink;
border-left-style: dashed; border-right-style: dashed;
border-inline-style: dashed; /* or */ border-inline-style: dashed dashed;
border-left-width: 1px; border-right-width: 1px;
border-inline-width: 1px; /* or */ border-inline-width: 1px 1px;
Su MDN sono disponibili ulteriori letture e un elenco completo dei caratteri stenografici e a mano libera delle frontiere.
Esempio di proprietà logica <figure>
Facciamo un piccolo esempio. Le proprietà logiche possono modificare il layout di un'immagine con una didascalia per gestirla.
Oppure prova!
Non devi fare molto per rendere una scheda adattabile a livello internazionale con <figure> e alcune proprietà logiche. Se vuoi sapere come tutti questi CSS
considerati a livello internazionale funzionano in sintonia, spero che questa sia una piccola introduzione importante.
Polyfilling e supporto cross-browser
Gli strumenti Cascade o di creazione sono opzioni valide per avere browser vecchi e nuovi allo stesso modo, correttamente distanziati con le proprietà logiche aggiornate. Per i fallback di Cascade, segui una proprietà fisica con una proprietà logica e il browser utilizzerà l'"ultima" proprietà trovata durante la risoluzione dello stile.
p {
/* for unsupporting browsers */
margin-top: 1ch;
margin-bottom: 2ch;
/* for supporting browsers to use */
/* and unsupporting browsers to ignore and go 🤷♂️ */
margin-block: 1ch 2ch;
}
Tuttavia, non è una soluzione del tutto completa per tutti. Ecco un fallback scritto a mano che sfrutta lo pseudo-selettore :lang() per scegliere come target lingue specifiche, regola la spaziatura fisica in modo appropriato e, alla fine, offre la spaziatura logica per il supporto dei browser:
/* physical side styles */
p {
margin-top: 1ch;
margin-bottom: 2ch;
}
/* adjusted physical side styles per language */
:lang(ja) {
p {
/* zero out styles not useful for traditional Japanese */
margin-top: 0;
margin-bottom: 0;
/* add appropriate styles for traditional Japanese */
margin-right: 1ch;
margin-left: 2ch;
}
}
/* add selectors and adjust for languages all supported */
:lang(he) {…}
:lang(mn) {…}
/* Logical Sides */
/* Then, for supporting browsers to use */
/* and unsupporting browsers to ignore #TheCascade */
p {
/* remove any potential physical cruft.. */
margin: 0;
/* explicitly set logical value */
margin-block: 1ch 2ch;
}
Puoi anche utilizzare @supports per determinare se fornire o meno i fallback delle proprietà fisiche:
p {
margin-top: 1ch;
margin-bottom: 2ch;
}
@supports (margin-block: 0) {
p {
margin-block: 1ch 2ch;
}
}
Sass, PostCSS, Emotion e altri offrono bundler automatici e/o offerte di tempo di creazione con un'ampia gamma di soluzioni o soluzioni di riserva. Dai un'occhiata a ciascuno di questi per vedere quello che corrisponde alla tua toolchain e alla strategia complessiva del sito.
Passaggi successivi
Un maggior numero di CSS offrirà proprietà logiche, ma non è ancora possibile. Manca un grande insieme di comandi rapidi, ma c'è ancora una soluzione per questo problema di GitHub. Esiste una soluzione temporanea in bozza. E se volessi assegnare uno stile a tutti i lati logici di una scatola?
margin: 1px 2px 3px 4px; margin: 1px 2px; margin: 2px;
margin: logical 1px 2px 3px 4px; margin: logical 1px 2px; margin: logical 2px;
L'attuale bozza di proposta significherebbe che devi scrivere logical in ogni
abbreviazione per applicare l'equivalente logico, che per alcuni non suona
molto DRY.
Esistono altre proposte per cambiarla a livello di blocco o di pagina, ma ciò potrebbe far trapelare utilizzi logici in stili che assumono ancora lati fisici.
html {
flow-mode: physical;
/* or */
flow-mode: logical;
/* now all margin/padding/etc references are logical */
}
/* hopefully no 3rd/1st party code is hard coded to top/left/etc ..? */
È difficile! Vota e esprimi la tua opinione, vogliamo conoscere la tua opinione.
Vuoi imparare o studiare le proprietà logiche di più? Ecco un riferimento dettagliato, insieme a guide ed esempi, su MDN 🤓
Feedback
- Per proporre modifiche alla sintassi CSS degli comandi abbreviati relativi al flusso, controlla prima i problemi esistenti nel repository csswg-Drafts. Se nessuno dei problemi esistenti corrisponde alla tua proposta, crea un nuovo problema.
- Per segnalare bug sull'implementazione di comandi rapidi relativi al flusso in Chromium, prima controlla i problemi esistenti su Chromium Bug Tracker. Se nessuno dei problemi esistenti corrisponde al tuo bug, crea un nuovo problema.