Questa traduzione è incompleta. Collabora alla traduzione di questo articolo dall’originale in lingua inglese.

La proprietà CSS min-width imposta la larghezza minima di un elemento.  Questo evita che lo used value della proprietà width diventi più piccolo del valore specificato per min-width.

/* <length> value */
min-width: 3.5em;

/* <percentage> value */
min-width: 10%;

/* Keyword values */
min-width: max-content;
min-width: min-content;
min-width: fit-content;
min-width: fill-available;

/* Global values */
min-width: inherit;
min-width: initial;
min-width: unset;

La larghezza dell'elemento viene impostata al valore di min-width ogni volta che min-width risulta essere maggiore di max-width or width.

Initial value0
Applies toall elements but non-replaced inline elements, table rows, and row groups
Inheritedno
Percentagesrefer to the width of the containing block
Mediavisual
Computed valuethe percentage as specified or the absolute length
Animation typea length, percentage or calc();
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Sintassi

Valori

<length>
La larghezza minima espressa come <length>. Valori negativi rendono la dichiarazione non valida.
 
<percentage>
La larghezza minima espressa come <percentage> della larghezza del contenitore. Valori negativi rendono la dichiarazione non valida.

Parole chiave

auto
La larghezza di default per oggetti di tipo flex, assegna un valore di default più ragionevole di 0 per gli altri layout.
max-content
La larghezza massima preferita (intrinsic).
min-content
La larghezza minima preferita (intrinsic).
fill-available
La larghezza del blocco contenitore sottratto de: il margine orizzontale, il bordo ed il padding. (Alcuni browsers usano un nome diverso per questa parola chiave, available.)
fit-content
Definito come min(max-content, max(min-content, fill-available)).

Sintassi formale

<length> | <percentage> | auto | max-content | min-content | fit-content | fill-available

Esempi

table { min-width: 75%; }

form { min-width: 0; }

Specifiche

Specification Status Comment
CSS Intrinsic & Extrinsic Sizing Module Level 3
The definition of 'min-width' in that specification.
Working Draft Vengono aggiunte le parole chiave max-content, min-content, fit-content e fill-available. (I draft Box CSS3 e CSS3 Writing Modes definiscono queste keyword, ma vengono sostituiti da questa specifica.)
CSS Flexible Box Layout Module
The definition of 'min-width' in that specification.
Candidate Recommendation Viene aggiunta la keyword auto e viene utilizzata come valore iniziale.
CSS Transitions
The definition of 'min-width' in that specification.
Working Draft Definisce min-width come animabile.
CSS Level 2 (Revision 1)
The definition of 'min-width' in that specification.
Recommendation Definizione iniziale.

Compatibilità dei browser

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 (Yes) 1.0 (1.0) 7.0 4.0 2.0.2 (416), buggy before
si applica a <table> [1] No support No support (Yes) No support (Yes) No support
max-content, min-content, fit-content, efill-available 24.0 -webkit [3] No support 3.0 (1.9) -moz [2] No support No support No support [3]
auto 21.0 [4] ? 16.0 (16.0) [4]
Removed in 22.0 (22.0)
Reintroduced in 34.0 (34.0) with the new behavior defined by the spec.
No support 12.10 [6] No support
auto as initial value 21.0 (Yes) 18.0 (18.0)
Removed in 22.0 (22.0)
No support 12.10 No support
Feature Android Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? ? (Yes) ? ? ? ?[5]
applies to <table>[1] ? ? No support ? ? ? ?
max-content, min-content, fit-content, e fill-available ? ? No support ? ? ? ?
auto ? ? ? ? ? ? ?
auto come valore iniziale ? ? ? ? ? ? ?

[1] CSS 2.1 descrive esplicitamente il comportamento di min-width con <table> come indefinito. Quindi qualsiasi tipo di comportamento rispetta CSS2.1; le nuove specifiche CSS potrebbero definire questo comportamento, per cui al momento gli sviluppatori Web non dovrebbero fare affidamento su una specifica implementazione.

[2] Gecko implementa in via sperimentale le definizioni date in CSS3 Basic Box. Questa definisce la keyword available ma non fill-available. Inoltre la definizione di fit-content è più lasca di quella data da CSS3 Intrinsic.

[3] WebKit implementa una proposta precedente, la parola chiave intrinsic.

[4] Queste implementazioni realizzavano un comportamento leggermente più semplice per questa parola chiave: veniva impostata a min-content per gli oggetti di tipo flex, e 0 per qualsiasi altro elemento.

[5] In alcuni browsers in iOS, un elemento di tipo <button> nella sua configurazione nativa (default) non reagirà all'impostazione del valore min-width. Questo problema dipende dai pulsanti di tipo nativo. Uno <span> collocato dentro ad un pulsante nativo, mostrerà lo stesso problerma, nonostante venga impostato "display:inline-block". Quando altri parametri di stile vengono impostati ed il browser è costretto ad abbandonare il pulsante nativo, l'impostazione di min-width ha effetto.  

See also

Tag del documento e collaboratori

 Hanno collaborato alla realizzazione di questa pagina: sedetiam
 Ultima modifica di: sedetiam,