CSS inline-size
La proprietà CSS3 inline-size imposta la dimensione logica orizzontale
La proprietà inline-size è la versione logica della classica width. Varia in base al flusso di scrittura del documento, rendendo il layout più adattabile in contesti multilingua e internazionali, soprattutto con scritture verticali o da destra a sinistra.
Sintassi
Significato dei valori principali:
auto: Il browser determina automaticamente la larghezza in base al contenuto e al contesto.
lunghezza fissa: Valore in
px,em,rem, ecc. (es.inline-size: 300px;).percentuale: Riferita alla dimensione del contenitore padre (es.
inline-size: 80%;).min-content / max-content / fit-content: Valori speciali per layout fluidi e contenuto adattivo.
Esempio proprietà: inline-size
Codice Esempio: inline-size
.logical-box {
inline-size: 300px;
block-size: auto;
writing-mode: horizontal-tb;
border: 2px solid #4f46e5;
padding: 16px;
background-color: #eef2ff;
}
Contenuto Esempio: inline-size
Esempio di utilizzo della proprietà inline-size
In questo esempio, l'elemento ha una larghezza logica definita con inline-size, che si adatta alla direzione del testo:
CSS e HTML per l'esempio con inline-size:
<style>
.logical-box {
inline-size: 300px;
block-size: auto;
writing-mode: horizontal-tb;
border: 2px solid #4f46e5;
padding: 16px;
background-color: #eef2ff;
}
</style>
<div class="logical-box">
Questo box ha una larghezza logica di 300px...
</div>
⚠️ Note compatibilità:
inline-size è supportata nella maggior parte dei browser moderni. Per garantire compatibilità con browser legacy, è consigliabile usare anche width come fallback.
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 216.73.216.108
