CSS - Propriété min-inline-size : Un Guide Pour Les Débutants

Bonjour à tous, futurs maîtres du CSS ! Aujourd'hui, nous allons entreprendre un voyage passionnant dans le monde du CSS, en explorant spécifiquement la propriété min-inline-size. Ne vous inquiétez pas si vous êtes nouveau dans ce domaine ; je serai votre guide amical, et nous aborderons ce sujet pas à pas. À la fin de ce tutoriel, vous mestrez cette propriété comme un pro !

Qu'est-ce que min-inline-size ?

Avant de plonger dedans, comprenons ce que signifie min-inline-size. Imaginez que vous préparez vos valises pour un voyage, et que vous avez une valise qui peut s'agrandir. La min-inline-size est comme fixer la taille minimum de cette valise dans sa dimension principale. En termes de conception web, elle détermine la taille minimum d'un élément dans sa direction inline.

Vous vous demandez peut-être : "Qu'est-ce qu'une direction inline ?" Eh bien, dans la plupart des cas pour l'anglais et des langues similaires, c'est la direction horizontale. Mais ne vous inquiétez pas, nous explorerons cela plus en détail plus tard !

Valeurs Possibles

Voyons les différentes valeurs que nous pouvons utiliser avec min-inline-size :

Valeur	Description
<longueur>	Une longueur fixe, comme 100px ou 2em
<pourcentage>	Un pourcentage de la taille du conteneur parent
max-content	La taille intrinsèque préférée
min-content	La taille intrinsèque minimum
auto	Le navigateur décide de la taille minimum

Ne vous inquiétez pas si cela semble confus maintenant. Nous explorerons chacun de ces avec des exemples !

Applications

La propriété min-inline-size peut être appliquée à tous les éléments sauf :

• Les éléments inline non remplacés
• Les lignes de table
• Les groupes de lignes

Syntaxe

La syntaxe de base pour min-inline-size est assez simple :

min-inline-size: <valeur>;

Plongeons dans quelques exemples pour voir comment cela fonctionne en pratique !

CSS min-inline-size - Valeur

Commençons avec un exemple simple en utilisant une longueur fixe :

<div class="box">Ceci est une boîte avec min-inline-size définie à 200px.</div>

.box {
min-inline-size: 200px;
background-color: lightblue;
padding: 10px;
}

Dans cet exemple, nous disons au navigateur : "Hey, peu importe ce que tu fais, ne laisse pas cette boîte être plus étroite que 200 pixels." Si vous redimensionnez votre fenêtre de navigateur, vous verrez que la boîte maintient sa largeur minimum de 200px, même si vous essayez de la rendre plus petite.

CSS min-inline-size - Valeur

Maintenant, essayons d'utiliser une valeur en pourcentage :

<div class="container">
<div class="box">Cette boîte a min-inline-size définie à 50%.</div>
</div>

.container {
width: 400px;
background-color: lightyellow;
padding: 10px;
}

.box {
min-inline-size: 50%;
background-color: lightgreen;
padding: 10px;
}

Dans ce cas, nous disons : "Assurez-vous que cette boîte est toujours d'au moins la moitié de la largeur de son conteneur parent." La boîte sera d'au moins 200px de large (50% de 400px), mais elle peut grandir si nécessaire.

CSS min-inline-size - Valeur max-content

La valeur max-content est particulièrement intéressante. Elle fixe la taille minimum à la taille préférée du contenu. Voyons cela en action :

<div class="box max-content">Cette boîte s'étendra pour s'adapter à son contenu.</div>
<div class="box fixed">Cette boîte a une largeur fixe de 150px.</div>

.box {
background-color: lightpink;
padding: 10px;
margin-bottom: 10px;
}

.max-content {
min-inline-size: max-content;
}

.fixed {
width: 150px;
}

La boîte max-content s'étendra pour s'adapter à tout son contenu sur une seule ligne, tandis que la boîte de largeur fixe pourrait faire que le texte se coupe.

CSS min-inline-size - Avec un Texte Vertical

Maintenant, c'est là que les choses deviennent vraiment intéressantes ! souvenez-vous que j'ai dit que la direction inline est généralement horizontale ? Eh bien, ce n'est pas toujours le cas. Regardons un exemple avec un texte vertical :

<div class="vertical-text">Ce texte est vertical !</div>

.vertical-text {
writing-mode: vertical-rl;
min-inline-size: 100px;
background-color: lavender;
padding: 10px;
}

Dans ce cas, car nous avons changé le writing-mode en vertical, la min-inline-size contrôle la hauteur minimum de la boîte, pas la largeur !

Conclusion

Et voilà, les amis ! Nous avons exploré la propriété min-inline-size de haut en bas (ou devrais-je dire, de gauche à droite ?). Souvenez-vous, le CSS est tout à fait expérimental. N'ayez pas peur de jouer avec ces propriétés et de voir ce qui se passe. C'est ainsi que nous avons tous appris !

Avant de conclure, voici un conseil rapide de mes années d'enseignement : toujours pensez à la réaction de votre design sur différents tailles d'écran. La propriété min-inline-size peut être un outil puissant pour créer des designs réactifs qui ont l'air géniaux sur tout, des smartphones aux écrans large.

Continuez à pratiquer, continuez à explorer, et surtout, amusez-vous avec le CSS ! Qui sait ? Le prochain design de site web incroyable pourrait provenir de vos expériences avec min-inline-size !

Credits: Image by storyset