(Flexbox) min-width: 0 is the new zoom: 1

raphael

Je suis tombé en début d’année sur cette citation de Dan Auclair sur Twitter :

min-width: 0 is the new zoom: 1 #flexbox

min-width-0

À la première lecture, je n’avais pas réellement saisi la portée de cette formule (d’autant plus que je me suis longtemps confronté au fameux zoom: 1 et Haslayout d’Internet Explorer au cours d’une époque révolue).

Aujourd’hui je crois que cet homme résume parfaitement les nombreuses bizarreries de Flexbox et que sa citation est pour le moins visionnaire. (et pourtant, au vu du nombre de like et de retweet – la capture a été prise aujourd’hui -, sa formule aurait bien pu passer inaperçue).

Ce que disent les specs

Les spécifications Flexbox modifient radicalement le comportement de certains éléments à travers une combinaison de trois nouveautés notables :
– une nouvelle valeur de min-width et min-height pour les flex-items
– une nouvelle limitation de flex-shrink
– une préservation du ratio implicite des « éléments remplacés »

Nouvelle valeur de min-width et min-height

Les propriétés min-width et min-height héritent d’une valeur inédite jusqu’alors : auto. De plus, cette valeur est appliquée par défaut aux élément flex-items.

To provide a more reasonable default minimum size for flex items, this specification introduces a new auto value as the initial value of the min-width and min-height

Source : https://www.w3.org/TR/css-flexbox-1/#min-size-auto

Nouvelle limitation de flex-shrink

Par défaut, les flex-items ne peuvent pas se réduire en deça de leur taille minimale de contenu. C’est la suite logique de la règle précédente.

By default, flex items won’t shrink below their minimum content size (the length of the longest word or fixed-size element). To change this, set the min-width or min-height property. (See §4.5 Implied Minimum Size of Flex Items.)

Source : https://www.w3.org/TR/css-flexbox-1/#flex-common

Préservation du ratio implicite des « éléments remplacés »

Le ratio d’affichage des éléments devient une donnée intrinsèque à l’élément, tout comme ses largeurs et hauteurs implicites. Et il doit être préservé quand l’une des dimension varie (même si des dimensions fixes sont définie dans le code HTML).

The term intrinsic dimensions refers to the set of the intrinsic height, intrinsic width, and intrinsic aspect ratio (the ratio between the width and height), each of which may or may not exist for a given object. These intrinsic dimensions represent a preferred or natural size of the object itself.

Source : https://drafts.csswg.org/css-images/#sizing-terms

Pourquoi et quelles conséquences?

Les flex-items dont la particularité est de posséder des dimensions implicites (les images notamment) bénéficient dorénavant d’une protection particulière dans un environnement où la flexibilité est omniprésente (trop ?) : leur taille intrinsèque ainsi que leur ratio d’affichage doivent être conservés par défaut.

L’idée est louable, mais parfois déconcertante pour au-moins trois raisons :

  1. seuls les flex-items se voient affublés de cette valeur par défaut de min-width: auto. C’est perturbant. D’autant plus que ce n’est pas forcément écrit sur leur front (n’importe quel élément HTML est potentiellement un flex-item en puissance),
  2. cette « protection » casse la fluidité de certains gabarits (c’est un comble), ou empêche certaines opérations (césure de mots par exemple); On retrouve le comportement très particulier des cellules de tableaux où le contenu est roi,
  3. les navigateurs, sans surprise, présentent des résultats visuels différents. Par exemple, à l’heure où cet article est rédigé, seul Firefox récent respecte correctement l’ensemble de ces trois préceptes.

Exemples pratiques

Les cas de bizarreries relatives à ces spécifications sont légion. Je peux vous assurer que vous y serez confronté un jour ou l’autre… et que vous ne comprendrez pas forcément immédiatement ce qui vous arrive.

Voici quelques exemples décortiqués et dénichés sur le Web :

La solution ?

La solution est simple : rétablir la valeur habituelle de min-width: 0 pour chaque flex-item problématique.

La façon la plus efficace de procéder est d’ajouter au sein de votre reset CSS :

* {
  min-width: 0;
}

Qui est concerné ?

Les éléments dits « remplacés », ceux qui possèdent une dimension implicite :

  • <img>
  • <object>
  • <video>
  • <input>
  • <textarea>

Mais aussi :
– les éléments <audio> et <canvas>
– les mot longs, sans espace ni trait d’union (URL par exemple)

3 réflexions au sujet de « (Flexbox) min-width: 0 is the new zoom: 1 »

  1. Merci pour ce billet Raphaël 🙂
    Un petit HMTLM spotted dans ton écrit.
    Bientôt un
    * { min-width: 0; }

    😀

  2. Hello Raphaël,
    Merci pour l’article. Juste un petit point sur l’article de Fantasai que tu évoques, il n’est vraiment pas récent (il date de juillet 2013), et j’ai plutôt l’impression que c’est justement depuis cette réflexion que la valeur auto fonctionne telle que tu le décris.
    Donc cela ne va pas changer, ou alors tu évoquais un autre article ?

Les commentaires sont fermés.