Taille-max-en-ligne - Astuces CSS

max-inline-sizeest une propriété logique en CSS qui définit la largeur maximale d'un élément lorsque le writing-modeest horizontal ou la hauteur maximale de l'élément lorsque le writing-modeest vertical.

.element ( max-inline-size: 500px; writing-mode: vertical-lr; )

Comme vous l'avez peut-être deviné par l'exemple ci-dessus, la writing-modepropriété modifie l'orientation du texte et le flux de mise en page de 90 degrés.

La principale raison de changer d'orientation, en dehors de la création de designs sophistiqués, est de s'adapter à l'internationalisation sur un site. De nombreux scripts d'Asie de l'Est tels que le chinois, le japonais et le coréen peuvent être écrits horizontalement ou verticalement. En utilisant des propriétés logiques, nous pouvons fournir la direction de dimensionnement correcte des éléments en fonction du mode d'écriture de l'utilisateur.

Jen Simmons a un article et une présentation qui approfondissent les modes d'écriture CSS.

Ne pouvons-nous pas simplement utiliser la `max-width`propriété?

Oui! Mais si vous ne supportez pas Internet Explorer, il n'y a aucune raison de ne pas l'utiliser à la max-inline-sizeplace. max-widthest une dimension physique, donc lorsque le mode d'écriture change, un élément conserve sa taille de largeur horizontale, cassant une mise en page lorsqu'il est configuré pour être vertical. Les propriétés logiques, comme max-inline-size, peuvent répondre à ces changements et appliquer la taille dans la bonne orientation.

Syntaxe

max-inline-size: ;

Initiale: auto
S'applique à: identique à heightetwidth
Héritée: non
Pourcentages: comme pour la propriété physique correspondante
Valeur calculée: identique à heightetwidth
Type d'animation: par type de valeur calculée

Valeurs

/* 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;

Démo

Lorsque le writing-modeest défini sur vertical-rl, le contenu pivote, modifiant la mise en page. La largeur de la max-widthboîte tournera avec le contenu. Mais max-inline-sizec'est intelligent! Il laisse sa largeur intacte, quelle que soit la writing-modevaleur. Activez le writing-modedans la démo suivante pour voir la différence entre les deux.