Miglioramenti del layout logico con scorciatoie relative ai flussi

Nuove abbreviazioni per le proprietà logiche e nuove proprietà dei riquadri per Chromium.

Adam Argyle

Oriol Brufau

Da Chromium 69 (3 settembre 2018), proprietà logiche e valori hanno contribuito gli sviluppatori mantengono il controllo dei propri layout internazionali tramite rispetto agli stili fisici, di direzione e di dimensione. In Chromium 87, brevi e gli offset sono stati spediti per semplificare la scrittura di queste proprietà e valori logici. Chromium passa a Firefox, che supporta le abbreviazioni dal 66. Safari li ha pronti nella sua anteprima tecnologica.

Flusso di documenti

Se hai già familiarità con le proprietà logiche, gli assi in linea e a blocchi e non se hai bisogno di un ripasso, puoi andare avanti. In caso contrario, ti inviamo un breve promemoria.

In inglese, lettere e parole scorrono da sinistra a destra, mentre i paragrafi sono impilati dall'alto verso il basso. In cinese tradizionale, lettere e parole sono posizionate dall'alto verso il basso, mentre i paragrafi sono impilati da destra a sinistra. Solo in questi 2 casi, se scriviamo il codice CSS che inserisce "margin top" in un paragrafo, spaziamo in modo appropriato solo uno stile linguistico. Se la pagina viene tradotta in Cinese dall'inglese, il margine potrebbe non avere senso nella nuova modalità di scrittura verticale.

Di conseguenza, la parte fisica della scatola non è molto utile a livello internazionale. Inizia così la procedura per supportare più lingue; scoprire i lati fisici e logici del modello box.

Hai mai ispezionato l'elemento p in Chrome DevTools? In tal caso, è possibile che 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 dello user agent di Chromium

Il margine non si trova nella parte superiore o inferiore come potrebbe credere un lettore inglese. Sono le ore block-start e block-end. Queste proprietà logiche sono simili a quelle di un in alto e in basso, ma anche come un lettore giapponese di destra e sinistra. Se scritto una volta, funziona ovunque.

Un flusso normale si verifica quando la pagina web fa intenzionalmente parte di questa multidirezionale. Quando i contenuti della pagina vengono aggiornati in base ai cambiamenti di direzione del documento, il layout e i relativi sono considerati in flusso. Scopri di più su "in" e "fuori" del flusso su MDN o nel Specifiche del modulo display CSS. Mentre le proprietà logiche non devono necessariamente essere in flusso, svolgono gran parte del lavoro pesante per te man mano che la direzione cambia. Il flusso implica la direzione, ovvero le lettere, le parole e i contenuti che devono spostarsi. Questo ci porta a bloccare e incorporare direzioni logiche.

La direzione del blocco è la direzione che seguono i nuovi blocchi di contenuti, ad esempio chiediti: "dove posizionare il paragrafo successivo?". Si potrebbe considerare un "blocco di contenuti" o un "blocco di testo". Ogni lingua organizza i propri blocchi e li ordina i rispettivi block-axis. block-start è il lato in cui un paragrafo viene posizionato per primo, mentre block-end è la parte verso cui scorrono i nuovi paragrafi.

Nella scrittura a mano libera tradizionale giapponese, ad esempio, la direzione del blocco scorre da destra a sinistra:

La direzione in linea è la direzione in cui vanno le lettere e le parole. Prendi in considerazione la direzione il braccio e la mano viaggiano quando scrivi; stanno viaggiando lungo il inline-axis. inline-start è il lato in cui inizi a scrivere, mentre inline-end è il lato al termine della scrittura. Nel video sopra, inline-axis è dall'alto verso il basso, ma nel prossimo video lo inline-axis scorre da destra a sinistra.

Essere flow-relative gli stili scritti per una lingua saranno contestuali e in modo appropriato applicati in altre lingue. I contenuti verranno trasmessi in base alla lingua di pubblicazione.

Nuove scorciatoie

Alcune delle seguenti sintetiche brevi non sono nuove funzionalità per il browser, ma più semplici scrivere stili, sfruttando la possibilità di impostare valori su entrambi i blocchi o in linea contemporaneamente. Le proprietà logiche di inset-* offrono nuove funzionalità, poiché non esistevano modi lunghi per specificare posizioni assolute con proprietà logiche prima. Però, gli inserti e le abbreviazioni si intrecciano molto bene. illustrarti tutte le nuove funzionalità delle proprietà logiche disponibili contemporaneamente su Chromium 87.

Abbreviazioni dei margini

Non ci sono nuove funzionalità disponibili, ma hai trovato delle scorciatoie molto utili:
margin-block e margin-inline.

margin-block-start: 2ch;
margin-block-end: 2ch;

margin-block: 2ch;
/* or */
margin-block: 2ch 2ch;

Non esiste una forma abbreviata per "top and bottom" o "destro e sinistro"... fino ad ora! Probabilmente farai riferimento a tutti e quattro i lati utilizzando la forma abbreviata di margin: 10px; e ora può 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;

Abbreviazioni spaziatura interna

Non sono disponibili nuove funzionalità, ma hai trovato delle scorciatoie molto più pratiche:
padding-block e padding-inline.

padding-block-start: 2ch;
padding-block-end: 2ch;

padding-block: 2ch;
/* or */
padding-block: 2ch 2ch;

E la serie di scorciatoie senza costi di inline:

padding-inline-start: 4ch;
padding-inline-end: 2ch;

padding-inline: 4ch 2ch;

Intaglio e sigle

Le proprietà fisiche top, right, bottom e left possono essere scritte come valori per la proprietà inset. Qualsiasi valore di position può trarre vantaggio da posiziona i 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 essere immediatamente pratico. Il riquadro è un modo breve per indicare i lati fisici, e funziona come margine e spaziatura interna.

Nuove funzionalità

Per quanto sia entusiasmante sia l'abbreviazione delle parti fisiche, c'è ancora di più dalla caratteristiche logiche aggiunte da ulteriori abbreviazioni di inset. Queste scorciatoie portano la praticità degli sviluppatori (sono più brevi da digitare), ma aumentano anche la copertura potenziale del layout, in quanto sono relative 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;

Per approfondire e consultare un elenco completo di riquadri in forma breve e lunga è disponibile su MDN.

Simboli dei bordi

Il bordo e le relative proprietà nidificate color, style e width hanno tutte 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;

Per approfondire l'argomento e un elenco completo di etichette per i bordi a mano e a mano lunga è disponibile su MDN.

Esempio di proprietà logica <figure>

Riepiloghiamo il tutto con un breve esempio. Le proprietà logiche possono un'immagine con una didascalia per gestire diverse direzioni di scrittura e documenti.

Oppure prova!

Non è necessario fare molto per rendere una carta reattiva a livello internazionale con una <figure> e alcune proprietà logiche. Se vuoi sapere come funziona tutto questo a livello internazionale, CSS premuroso funziona insieme, spero che questa sia una piccola introduzione significativa.

Polyfilling e supporto tra browser

Gli strumenti Cascade o di creazione sono opzioni attuabili per avere browser vecchi e nuovi, spaziate correttamente con proprietà logiche aggiornate. Per i fallback Cascade, segui una proprietà fisica con una logica e il browser utilizzerà l'"ultimo" che ha trovato durante lo stile risoluzione del problema.

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;
}

Non si tratta di una soluzione completa per tutti, però. Ecco un video di riserva scritto a mano che sfrutta lo pseudo-selettore :lang() per scegliere come target lingue specifiche, regola la distanza fisica appropriata, poi alla fine si pone la logica per i browser supportati:

/* 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 utilizzare @supports anche per determinare se fornire o meno materiali proprietà di riserva:

p {
  margin-top: 1ch;
  margin-bottom: 2ch;
}

@supports (margin-block: 0) {
  p {
    margin-block: 1ch 2ch;
  }
}

Sass, PostCSS, Emotion e altri utilizzano il bundler e/o build automatici nel tempo che hanno una vasta gamma di fallback o soluzioni. Dai un'occhiata a tutti per vedere quale corrisponde alla tua catena di strumenti e alla strategia complessiva del sito.

Passaggi successivi

Ancora più CSS offrirà proprietà logiche, ma non è ancora tutto fatto. Manca un grosso problema una serie di abbreviazioni e non è ancora possibile trovare una soluzione per questo problema di GitHub. C'è una soluzione temporanea in una bozza. E se volessi applicare uno stile a tutto lati logici di un riquadro con una forma breve?

margin: 1px 2px 3px 4px;
margin: 1px 2px;
margin: 2px;

margin: logical 1px 2px 3px 4px;
margin: logical 1px 2px;
margin: logical 2px;

La bozza di proposta attuale significherebbe che scriverai logical in ogni si tratta di una forma breve per ottenere l'applicazione dell'equivalente logico, che non suona molto DRY ad alcuni.

Esistono altre proposte di modifica a livello di blocco o di pagina ma che potrebbe tradursi in usi logici in stili che comunque assumevano 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 ..? */

È tosta! Vota, esprimi la tua opinione, vorremmo conoscere la tua opinione.

Vuoi apprendere o studiare meglio le proprietà logiche? Ecco un riferimento dettagliato, insieme a guide ed esempi, su MDN 🤓

Feedback

• Per proporre modifiche alla sintassi CSS delle abbreviazioni relative al flusso, verifica innanzitutto i problemi esistenti nel repository csswg-Drafts. Se nessuno dei problemi esistenti corrisponde alla tua proposta, crea un nuovo problema.
• Per segnalare bug relativi all'implementazione di scorciatoie relative al flusso in Chromium, Innanzitutto, controlla i problemi esistenti su Chromium Bug Tracker. Se nessuno dei problemi esistenti corrisponde al bug, crea un nuovo problema.