inline-sizeè una proprietà logica che definisce la larghezza di un elemento quando la modalità di scrittura è orizzontale o l'altezza dell'elemento quando writing-modeè verticale.
.element ( inline-size: 700px; writing-mode: vertical-lr; )Come avrai intuito dall'esempio sopra, la writing-modeproprietà cambia l'orientamento del testo e il flusso del layout di 90 gradi. Ci sono due ragioni principali per cui vorresti farlo.
Innanzitutto, come scelta di design, potresti voler visualizzare il testo verticale su un elemento, ad esempio un'intestazione:
La seconda ragione, e probabilmente la più significativa, per cui potresti voler utilizzare una proprietà logica come inline-size è per consentire l'internazionalizzazione su un sito. Molti script dell'Asia orientale come il cinese, il giapponese e il coreano possono essere scritti orizzontalmente o verticalmente. Utilizzando le proprietà logiche, possiamo fornire la corretta direzione di dimensionamento degli elementi in base alla modalità di scrittura dell'utente.
Jen Simmons ha un articolo e una presentazione che approfondiscono le modalità di scrittura CSS.
Perché non possiamo semplicemente usare la vecchia widthproprietà fidata ?
Puoi! Tuttavia, potresti voler raggiungere inline-sizeinvece se sei preoccupato per il contesto del tuo contenuto che cambia in base alla lingua di un utente. widthè una dimensione fisica, quindi quando la modalità di scrittura cambia, un elemento mantiene la sua dimensione di larghezza orizzontale, interrompendo un layout quando è impostato per essere verticale. Le proprietà logiche, come inline-size, possono rispondere a tali modifiche e applicare la larghezza nella direzione corretta.
Ad esempio, se un elemento di paragrafo è largo 400 px utilizzando la larghezza, quando la modalità di scrittura è impostata su vertical-lr, il contenuto ruoterà, cambiando il layout, ma quel paragrafo rimarrà largo 400 px anziché 400 px di altezza.
Guarda quello? Bene, inline-sizeè intelligente! Cambia da larghezza ad altezza, a seconda del writing-modevalore.
Sintassi
inline-size: - Iniziale:
auto - Si applica a: come
heightewidth - Ereditato: no
- Percentuali: come per la proprietà fisica corrispondente
- Valore calcolato: uguale a
heightewidth - Tipo di animazione: per tipo di valore calcolato
Valori
/* Length values */ inline-size: 250px; inline-size: 5rem;
/* Percentage values */ inline-size: 75%;
/* Keyword values */ inline-size: auto; inline-size: fit-content(5rem); inline-size: max-content; inline-size: min-content;
/* Global values */ inline-size: inherit; inline-size: initial; inline-size: unset; auto: La dimensione in linea dell'elemento aderirà alla dimensione del suo elemento genitore.fit-content(): Questa funzione consente a un contenitore di crescere fino a una dimensione desiderata, quindi avvolgere il testo, bloccando efficacemente il contenuto al valore di dimensione fornito. Può essere utilizzato sui contenitori Grid, così come sul dimensionamento della scatola, e mentre caniuse mostra un forte supporto per la funzione con dimensioni in linea, i nostri test sono stati meno conclusivi. Ciò potrebbe essere dovuto allo stato di bozza di lavoro delle specifiche del Box Sizing Module Level 3.max-content: La larghezza preferita intrinseca, il che significa che l'elemento allunga il testo il più a lungo possibile e renderà la casella lunga quanto il testo.min-content: La larghezza minima intrinseca, ovvero la scatola dell'elemento si riduce alla dimensione minima del suo contenuto. La casella avrà le dimensioni della stringa di testo più grande.
Demo
Supporto del browser
| IE | Bordo | Firefox | Cromo | Safari | musica lirica |
|---|---|---|---|---|---|
| No | 79+ | 41+ | 57 | 12.1+ | 44+ |
| Android Chrome | Android Firefox | Browser Android | iOS Safari | Opera Mobile |
|---|---|---|---|---|
| 85+ | 79+ | 81+ | 12.2+ | 59+ |
Si noti che il supporto per l'utilizzo delle seguenti funzioni potrebbe differire dal supporto della proprietà:
fit-content()max-content()min-content()
Maggiori informazioni
- Proprietà e valori logici CSS Specifica di livello 1 (bozza dell'editore)
- Documentazione MDN
- Proprietà logiche CSS` (CSS-Tricks)
- Comprensione delle proprietà e dei valori logici (Smashing Magazine)
- Proprietà logiche CSS (Adrian Roselli)
- Dimensionamento del contenuto minimo e massimo nella griglia CSS (Jen Simmons, video)
- Regole orizzontali bidirezionali nei CSS (Hussein Al Hammad)