Podcast su CSS - 012: Proprietà logiche
Un pattern molto comune dell'interfaccia utente è un'etichetta di testo con un'icona incorporata che la supporta.
L'icona si trova a sinistra del testo con un piccolo spazio tra le due,
fornito da margin-right nell'icona.
Tuttavia, c'è un problema,
perché funziona solo quando la direzione del testo è da sinistra a destra.
Se la direzione del testo viene cambiata da destra a sinistra, ovvero come viene letta da lingue come l'arabo, l'icona si posiziona contro il testo.
Come tiene conto di questo aspetto nel CSS? Le proprietà logiche consentono di risolvere queste situazioni. Oltre ad altri vantaggi, offrono un supporto senza costi e automatico per l'internazionalizzazione. Ti aiutano a creare un front-end più resiliente e inclusivo.
Terminologia
Le proprietà fisiche di in alto, a destra, in basso e a sinistra si riferiscono alle dimensioni fisiche dell'area visibile. È una sorta di rosa dei venti su una mappa. Le proprietà logiche, invece, fanno riferimento ai bordi di una casella in relazione al flusso di contenuti. Di conseguenza, possono cambiare anche se la direzione del testo o la modalità di scrittura cambiano. Si tratta di un grande cambiamento rispetto agli stili direzionali e ci offre molta più flessibilità per quanto riguarda lo stile delle interfacce.
Blocca flusso
Il flusso dei blocchi è la direzione in cui sono posizionati i blocchi di contenuti. Ad esempio, se ci sono due paragrafi, il flusso del blocco è quello in cui andrà il secondo paragrafo. In un documento in inglese, il flusso del blocco è dall'alto verso il basso. Immaginala nel contesto di paragrafi di testo che si seguono l'uno all'altro, dall'alto verso il basso.
Flusso in linea
Il flusso incorporato è il modo in cui il testo scorre in una frase.
In un documento in inglese, il flusso incorporato è da sinistra a destra.
Se modifichi la lingua del documento della tua pagina web impostandola sull'arabo (<html lang="ar">),
il flusso in linea sarebbe da destra a sinistra.
Il testo scorre nella direzione determinata dalla modalità di scrittura del documento.
Puoi modificare la direzione in cui viene disposto il testo con la proprietà writing-mode.
Questa opzione può essere applicata all'intero documento o a singoli elementi.
Relativo flusso
Storicamente in CSS,
potevamo applicare solo proprietà come il margine rispetto alla direzione dei lati.
Ad esempio, margin-top viene applicato alla parte superiore fisica dell'elemento.
Con le proprietà logiche, margin-top diventa margin-block-start.
Ciò significa che, indipendentemente dalla lingua e dalla direzione del testo, il flusso dei blocchi ha regole sui margini appropriate.
Taglie
Per evitare che un elemento superi una determinata larghezza o altezza, scrivi una regola come la seguente:
.my-element {
max-width: 150px;
max-height: 100px;
}
Gli equivalenti relativi al flusso sono max-inline-size e max-block-size.
Puoi anche usare min-block-size e min-inline-size anziché min-height e min-width.
Con le proprietà logiche, la regola di altezza e larghezza massima avrebbe il seguente aspetto:
.my-element {
max-inline-size: 150px;
max-block-size: 100px;
}
Inizio e fine
Invece di utilizzare indicazioni come in alto, a destra, in basso e a sinistra, utilizza inizio e fine. Questo ti fornisce block-start, inline-end, block-end e inline-start. che ti consentono di applicare proprietà CSS in grado di rispondere alle modifiche alla modalità di scrittura.
Ad esempio, per allineare il testo a destra puoi utilizzare questo CSS:
p {
text-align: right;
}
Se il tuo obiettivo non è quello di allinearti al diritto fisico,
ma piuttosto all'inizio della direzione di lettura,
questo non è utile.
Con i valori logici, ci sono valori start e end più utili che vengono mappati alla direzione del testo.
Ora la regola di allineamento del testo ha il seguente aspetto:
p {
text-align: end;
}
Spaziatura e posizionamento
Le proprietà logiche di margin, padding e inset rendono più semplici ed efficienti gli elementi di posizionamento e determinano in che modo interagiscono tra loro nelle modalità di scrittura.
Le proprietà relative a margine e spaziatura interna sono ancora mappature dirette alle direzioni, ma la differenza principale è che quando una modalità di scrittura cambia, queste cambiano insieme.
.my-element {
padding-top: 2em;
padding-bottom: 2em;
margin-left: 2em;
position: relative;
top: 0.2em;
}
In questo modo viene aggiunto uno spazio verticale interno con padding e lo si spinge fuori da sinistra con margin.
Anche la proprietà top la sposta verso il basso.
Con gli equivalenti di proprietà logiche, il risultato sarebbe invece questo:
.my-element {
padding-block-start: 2em;
padding-block-end: 2em;
margin-inline-start: 2em;
position: relative;
inset-block-start: 0.2em;
}
Questa azione aggiunge uno spazio incorporato all'interno di padding e lo sposta dall'inizio incorporato con margin.
La proprietà inset-block la sposta verso l'interno rispetto all'inizio del blocco.
La proprietà inset-block non è l'unica opzione in forma abbreviata con proprietà logiche.
Questa regola può essere ulteriormente ridotta
utilizzando versioni abbreviate delle proprietà di margine e spaziatura.
.my-element {
padding-block: 2em;
margin-inline: 2em 0;
position: relative;
inset-block: 0.2em 0;
}
Bordi
L'aggiunta di border e border-radius può anche essere eseguita con proprietà logiche.
Per aggiungere un bordo in basso e a destra, con un raggio a destra, potresti scrivere una regola come questa:
.my-element {
border-bottom: 1px solid red;
border-right: 1px solid red;
border-bottom-right-radius: 1em;
}
In alternativa, potresti utilizzare proprietà logiche come la seguente:
.my-element {
border-block-end: 1px solid red;
border-inline-end: 1px solid red;
border-end-end-radius: 1em;
}
end-end in border-end-end-radius è la fine del blocco e la fine in linea.
Unità
Le proprietà logiche introducono due nuove unità: vi e vb.
Un'unità vi corrisponde all'1% delle dimensioni dell'area visibile nella direzione in linea.
L'equivalente della proprietà non logica è vw.
L'unità vb corrisponde all'1% dell'area visibile nella direzione del blocco.
L'equivalente della proprietà non logica è vh.
Queste unità saranno sempre mappate alla direzione di lettura.
Ad esempio, se vuoi che un elemento occupi l'80% dello spazio in linea disponibile di un'area visibile,
con l'unità vi la dimensione verrà impostata automaticamente dall'alto verso il basso se la modalità di scrittura è verticale.
Utilizzo pragmatico delle proprietà logiche
Le proprietà logiche e le modalità di scrittura non servono solo a fini di internazionalizzazione. Puoi utilizzarli per creare un'interfaccia utente più versatile.
Se un grafico contiene etichette sull'asse X e sull'asse Y, è consigliabile che il testo sull'etichetta Y venga letto verticalmente.
Poiché l'etichetta dell'asse Y nella demo ha un valore writing-mode pari a vertical-rl,
puoi utilizzare gli stessi valori margin in entrambe le etichette.
Il valore margin-block-start si applica a entrambe le etichette
perché l'inizio del blocco si trova a destra per l'asse Y e in alto per l'asse X.
I lati del blocco-inizio hanno un bordo rosso, così puoi vederli.
Risoluzione del problema dell'icona
Ora che abbiamo esaminato le proprietà logiche, questa conoscenza può essere applicata al problema di progettazione con cui abbiamo iniziato.
p {
display: inline-flex;
align-items: center;
}
p svg {
width: 1.2em;
height: 1.2em;
margin-right: 0.5em;
flex: none;
}
Il margine è stato applicato a destra dell'elemento icona.
Affinché la spaziatura tra l'icona e il testo supporti tutte le direzioni di lettura,
è necessario utilizzare la proprietà margin-inline-end.
p {
display: inline-flex;
align-items: center;
}
p svg {
width: 1.2em;
height: 1.2em;
margin-inline-end: 0.5em;
flex: none;
}
Indipendentemente dalla direzione di lettura, l'icona si posizionerà e si collocherà in modo appropriato.
Verifica la tua comprensione
Verifica le tue conoscenze delle proprietà logiche
Mentre scrivi con la mano, il polso si muove lungo quale asse logico?
inlineblockSeleziona tutte le opzioni che possono trarre vantaggio dalle proprietà logiche
flex-start, block-end e inline-startblock-start e inline.inline-size e max-block-size.border-end-end-radius.Quale lato logico di una parola viene sottolineato?