inline-sizeest une propriété logique qui définit la largeur d'un élément lorsque le mode d'écriture est horizontal, ou la hauteur de l'élément lorsque le writing-modeest vertical.
.element ( inline-size: 700px; 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. Il y a deux raisons principales pour lesquelles vous voudriez faire cela.
Tout d'abord, en tant que choix de conception, vous souhaiterez peut-être afficher du texte vertical sur un élément, par exemple un en-tête:
La deuxième raison - et probablement la plus importante - pour laquelle vous voudrez peut-être utiliser une propriété logique telle que la taille en ligne est de prendre en charge 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.
Pourquoi ne pouvons-nous pas simplement utiliser la widthpropriété «ol trusty» ?
Tu peux! Cependant, vous souhaiterez peut-être atteindre à la inline-sizeplace si vous êtes préoccupé par le changement de contexte de votre contenu en fonction de la langue d'un utilisateur. 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 inline-size, peuvent répondre à ces changements et appliquer la largeur dans la bonne direction.
Par exemple, si un élément de paragraphe a une largeur de 400 px en utilisant la largeur, lorsque le mode d'écriture est défini sur vertical-lr, le contenu pivote, en modifiant la mise en page, mais ce paragraphe conserve une largeur de 400 px au lieu de 400 px de haut.
Regarde ça? Eh bien, inline-sizec'est intelligent! Il change de largeur en hauteur, en fonction de la writing-modevaleur.
Syntaxe
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 */ inline-size: 250px; inline-size: 5rem;
/* Percentage values */ inline-size: 75%;
/* Keyword values */ inline-size: auto; inline-size: fit-content(5rem); inline-size: max-content; inline-size: min-content;
/* Global values */ inline-size: inherit; inline-size: initial; inline-size: unset; auto: La taille en ligne de l'élément respectera la taille de son élément parent.fit-content(): Cette fonction permet à un conteneur de s'agrandir jusqu'à atteindre la taille souhaitée, puis de créer un habillage de texte, en serrant efficacement le contenu à la valeur de taille fournie. Il peut être utilisé sur les conteneurs Grid, ainsi que sur le dimensionnement des boîtes, et bien que caniuse montre un soutien solide pour la fonction avec la taille en ligne, nos tests ont été moins concluants. Cela pourrait être dû au statut de brouillon de travail du module de dimensionnement de boîte niveau 3.max-content: La largeur intrinsèque préférée, ce qui signifie que l'élément étire le texte aussi longtemps que possible et rendra la boîte aussi longue que le texte.min-content: La largeur minimale intrinsèque, ce qui signifie que la boîte de l'élément se réduit à la taille minimale de son contenu. La boîte aura la taille de la plus grande chaîne de texte.
Démo
Prise en charge du navigateur
| C'EST À DIRE | Bord | Firefox | Chrome | Safari | Opéra |
|---|---|---|---|---|---|
| Non | 79+ | 41+ | 57 | 12.1+ | 44+ |
| Chrome Android | Android Firefox | Navigateur Android | Safari sur iOS | Opera Mobile |
|---|---|---|---|---|
| 85+ | 79+ | 81+ | 12.2+ | 59+ |
Notez que la prise en charge de l'utilisation des fonctions suivantes peut différer de la prise en charge de la propriété:
fit-content()max-content()min-content()
Plus d'information
- Spécification des propriétés logiques et valeurs CSS niveau 1 (version préliminaire de l'éditeur)
- Documentation MDN
- Propriétés logiques CSS` (CSS-Tricks)
- Comprendre les propriétés et les valeurs logiques (Smashing Magazine)
- Propriétés logiques CSS (Adrian Roselli)
- Dimensionnement du contenu min et max dans la grille CSS (Jen Simmons, vidéo)
- Règles horizontales bidirectionnelles en CSS (Hussein Al Hammad)