Podcast CSS - 012: Proprietà logiche .
Un pattern dell'interfaccia utente molto comune è un'etichetta di testo con un'icona incorporata di supporto.
L'icona si trova a sinistra del testo, con un piccolo spazio tra le due,
fornita da margin-right sull'icona.
Ma c'è un problema,
perché funziona solo se la direzione del testo è da sinistra a destra.
Se la direzione del testo cambiasse da destra a sinistra, che è il modo in cui vengono lette lingue come l'arabo, l'icona verrà posizionata sopra il testo.
Come ne tenga conto in CSS? Le proprietà logiche consentono di risolvere queste situazioni. Tra gli altri vantaggi, offre un supporto senza costi e automatico per l'internazionalizzazione. Ti aiutano a creare un front-end più resiliente e inclusivo.
Terminologia
Le proprietà fisiche dell'area in alto, a destra, in basso e a sinistra si riferiscono alle dimensioni fisiche dell'area visibile. Puoi immaginarli come una rosa dei venti su una mappa. Le proprietà logiche, invece, fanno riferimento ai bordi di un riquadro in relazione al flusso di contenuti. Pertanto, possono cambiare 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 lo stile delle interfacce.
Blocca flusso
Il flusso a blocchi è la direzione in cui vengono posizionati i blocchi di contenuti. Ad esempio, se ci sono due paragrafi, il flusso a blocchi è il punto in cui verrà inserito il secondo paragrafo. In un documento in inglese, il flusso a blocchi va dall'alto verso il basso. Pensa a ciò nel contesto dei paragrafi di testo che si susseguono, dall'alto verso il basso.
Flusso in linea
Il flusso in linea è il flusso di testo in una frase.
In un documento in inglese, il flusso in linea è da sinistra a destra,
Se vuoi cambiare la lingua del documento della pagina web impostandola sull'arabo (<html lang="ar">),
il flusso in linea sarà da destra a sinistra.
Il testo scorre nella direzione determinata dalla modalità di scrittura del documento.
Puoi modificare la direzione del layout del testo con la proprietà writing-mode.
Questa impostazione può essere applicata all'intero documento o a singoli elementi.
Relativo al flusso
Storicamente in CSS,
siamo stati in grado di applicare solo proprietà come il margine rispetto alla direzione dei loro 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, a prescindere dalla lingua e dalla direzione del testo,
Il flusso di blocco ha regole per i margini appropriate.
Taglie
Per evitare che un elemento superi una certa larghezza o altezza, scrivi una regola come questa:
.my-element {
max-width: 150px;
max-height: 100px;
}
Gli equivalenti relativi al flusso sono max-inline-size e max-block-size.
Puoi anche utilizzare min-block-size e min-inline-size anziché min-height e min-width.
Con le proprietà logiche, la regola per la larghezza e l'altezza massima avrà il seguente aspetto:
.my-element {
max-inline-size: 150px;
max-block-size: 100px;
}
Inizio e fine
Invece di utilizzare direzioni come in alto, a destra, in basso e a sinistra, utilizza inizio e fine. Questo fornisce block-start, inline-end, block-end e inline-start. che ti consentono di applicare proprietà CSS che rispondono alle modifiche della modalità di scrittura.
Ad esempio, per allineare il testo a destra, potresti utilizzare questo CSS:
p {
text-align: right;
}
Se il tuo obiettivo non è
allinearti al diritto fisico,
ma piuttosto all'inizio della direzione di lettura,
non è utile.
Con i valori logici, ci sono valori start e end più utili che corrispondono alla direzione del testo.
La regola di allineamento del testo ora ha il seguente aspetto:
p {
text-align: end;
}
Spaziatura e posizionamento
Proprietà logiche per margin, padding e inset
rendono più semplice ed efficiente il posizionamento degli elementi e la determinazione
in che modo interagiscono tra loro nelle varie modalità di scrittura.
Le proprietà relative a margine e spaziatura interna sono comunque mappature dirette alle direzioni,
ma la differenza fondamentale è che quando una modalità di scrittura
cambia, la modalità di scrittura cambia insieme.
.my-element {
padding-top: 2em;
padding-bottom: 2em;
margin-left: 2em;
position: relative;
top: 0.2em;
}
Questo aggiunge un po' di spazio interno verticale con padding e lo spinge da sinistra con margin.
La proprietà top la sposta anche verso il basso.
Con le proprietà logiche equivalenti, avrebbe invece questo aspetto:
.my-element {
padding-block-start: 2em;
padding-block-end: 2em;
margin-inline-start: 2em;
position: relative;
inset-block-start: 0.2em;
}
Questa operazione aggiunge parte dello spazio interno in linea con padding e ne spinge in uscita dall'inizio in linea con margin.
La proprietà inset-block lo sposta verso l'interno dall'inizio del blocco.
La proprietà inset-block non è l'unica opzione abbreviata con proprietà logiche.
Questa regola può essere ulteriormente ridotta
utilizzando versioni abbreviate delle proprietà di margine e spaziatura interna.
.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ò essere effettuata anche con le proprietà logiche.
Per aggiungere un bordo in basso e a destra, con un raggio a destra, puoi scrivere una regola come la seguente:
.my-element {
border-bottom: 1px solid red;
border-right: 1px solid red;
border-bottom-right-radius: 1em;
}
In alternativa, potresti utilizzare proprietà logiche come questa:
.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 portano due nuove unità: vi e vb.
Un'unità vi corrisponde all'1% delle dimensioni dell'area visibile nella direzione in linea.
La proprietà non logica equivalente è vw.
L'unità vb è l'1% dell'area visibile nella direzione del blocco.
La proprietà non logica equivalente è 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,
l'unità vi modificherà automaticamente la dimensione dall'alto verso il basso se la modalità di scrittura è verticale.
Utilizzare le proprietà logiche in modo pragmatico
Le proprietà logiche e le modalità di scrittura non sono destinate solo all'internazionalizzazione. Puoi utilizzarle per creare un'interfaccia utente più versatile.
Se hai un grafico con etichette sugli assi X e Y, potresti volere che il testo sull'etichetta Y si legga verticalmente.
Poiché l'etichetta dell'asse Y nella demo ha un valore writing-mode pari a vertical-rl,
puoi utilizzare gli stessi valori margin su entrambe le etichette.
Il valore margin-block-start si applica a entrambe le etichette
perché l'inizio del blocco è a destra per l'asse Y e in alto per l'asse X.
I lati della parte iniziale del blocco hanno un bordo rosso, così puoi vederli.
Risoluzione del problema dell'icona
Ora che abbiamo esaminato le proprietà logiche, queste conoscenze possono essere applicate 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.
Per fare in modo che la spaziatura tra l'icona e il testo supporti tutte le direzioni di lettura,
al suo posto deve essere usata 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;
}
A prescindere dalla direzione di lettura, l'icona si posizionerà e si posiziona in modo appropriato.
Verifica le tue conoscenze
Verifica le tue conoscenze delle proprietà logiche
Mentre scrivi con la mano, il polso si muove lungo quale asse logico?
inlineblockSeleziona tutto ciò che può 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 è sottolineato?