Max-inline-size - Trucchi CSS

max-inline-sizeè una proprietà logica in CSS che definisce la larghezza massima di un elemento quando writing-modeè orizzontale o l'altezza massima dell'elemento quando writing-modeè verticale.

.element ( max-inline-size: 500px; 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.

Il motivo principale per cambiare l'orientamento, oltre a creare design fantasiosi, è quello di accogliere 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.

Non possiamo semplicemente usare la `max-width`proprietà?

Sì! Ma se non stai supportando Internet Explorer, non c'è motivo di non utilizzarlo max-inline-size. max-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 max-inline-size, possono rispondere a tali modifiche e applicare le dimensioni con l'orientamento corretto.

Sintassi

max-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 */ max-inline-size: 250px; max-inline-size: 5rem;   /* Percentage values */ max-inline-size: 75%;   /* Keyword values */ max-inline-size: auto; max-inline-size: fit-content(5rem); max-inline-size: max-content; max-inline-size: min-content;   /* Global values */ max-inline-size: inherit; max-inline-size: initial; max-inline-size: unset;

Demo

Quando writing-modeè impostato su vertical-rl, il contenuto ruoterà, cambiando il layout. La larghezza della max-widthcasella ruoterà con il contenuto. Ma max-inline-sizeè intelligente! Lascia intatta la sua larghezza, indipendentemente dal writing-modevalore. Attiva o disattiva writing-modenella demo seguente per vedere la differenza tra i due.