CSS - Propriété max-block-size : Un Guide Amical Pour Les Débutants

Salut à toi, futur(e) magicien(ne) de CSS ! Aujourd'hui, nous allons entreprendre un voyage passionnant dans le monde du CSS, en explorant spécifiquement la propriété max-block-size. Ne t'inquiète pas si tu es nouveau(e) dans ce domaine ; je serai ton guide amical, et nous allons aborder ce sujet pas à pas. Alors, prends ta boisson favorite, installe-toi confortablement, et plongeons dedans !

Qu'est-ce que max-block-size ?

Avant de rentrer dans les détails, comprendre ce qu'est la propriété max-block-size. Imagine que tu construis une tour avec des blocs. La propriété max-block-size est comme fixer une limite à la hauteur que peut atteindre ta tour. En termes de CSS, elle définit la taille maximale d'un élément dans la direction du bloc.

"Attends," pourrais-tu demander, "qu'est-ce que la direction du bloc ?" Excellent !*** La direction du bloc est généralement la direction verticale dans les langues écrites horizontalement (comme l'anglais), et la direction horizontale dans les langues écrites verticalement (comme le japonais traditionnel).

Syntaxe et Valeurs Possibles

Voyons comment nous pouvons utiliser max-block-size dans notre CSS :

.mon-element {
max-block-size: valeur;
}

Maintenant, que pouvons-nous mettre à la place de "valeur" ? Voici un tableau pratique avec toutes les valeurs possibles :

Valeur	Description
<longueur>	Une longueur fixe, comme 300px ou 20em
<pourcentage>	Un pourcentage de la taille du bloc conteneur
none	Aucune limite (c'est la valeur par défaut)
max-content	La taille maximale intrinsèque préférée
min-content	La taille minimale intrinsèque
fit-content	Similaire à auto, mais avec quelques différences
auto	Le navigateur décide de la taille maximale

Applications

toutes les propriétés CSS ne s'appliquent pas à chaque élément HTML. La propriété max-block-size s'applique à tous les éléments sauf :

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

Ne t'inquiète pas si tu ne connais pas encore ces termes. Au fur et à mesure de ton progression dans ton voyage CSS, tu les rencontreras et comprendras pourquoi ils sont des exceptions.

Effets de writing-mode sur max-block-size

Maintenant, c'est là que les choses deviennent intéressantes ! La propriété max-block-size change son comportement en fonction du writing-mode du texte. Jetons un œil à quelques exemples :

Exemple 1 : Mode d'Écriture Horizontal

.box {
writing-mode: horizontal-tb;
max-block-size: 200px;
background-color: lightblue;
padding: 10px;
}

<div class="box">
This is a box with horizontal writing mode and max-block-size set to 200px.
</div>

Dans cet exemple, max-block-size limitera la hauteur de la boîte à 200 pixels car la direction du bloc est verticale en mode d'écriture horizontal.

Exemple 2 : Mode d'Écriture Vertical

.box {
writing-mode: vertical-rl;
max-block-size: 200px;
background-color: lightgreen;
padding: 10px;
}

<div class="box">
This is a box with vertical writing mode and max-block-size set to 200px.
</div>

Dans ce cas, max-block-size limitera la largeur de la boîte à 200 pixels car la direction du bloc est horizontale en mode d'écriture vertical.

Valeur <longueur> de max-block-size

Lorsque nous utilisons une valeur de longueur, nous fixons une taille maximale. Voici comment elle fonctionne :

.taille-fixe {
max-block-size: 150px;
background-color: lightyellow;
padding: 10px;
}

<div class="taille-fixe">
This box has a max-block-size of 150px. If the content exceeds this height, it will overflow.
</div>

Dans cet exemple, peu importe la quantité de contenu que nous mettons dans le div, il ne dépassera pas 150 pixels de hauteur.

Valeur <pourcentage> de max-block-size

Les pourcentages sont relatifs à la taille du bloc conteneur. Voici comment cela fonctionne :

.parent {
height: 300px;
background-color: lightgray;
}

.child {
max-block-size: 50%;
background-color: lightpink;
padding: 10px;
}

<div class="parent">
<div class="child">
This child div has a max-block-size of 50% of its parent's height.
</div>
</div>

Dans ce cas, le div enfant ne sera jamais plus haut que la moitié de la hauteur de son parent.

Valeur <max-content> de max-block-size

La valeur max-content est particulièrement utile lorsque tu veux que ton élément soit aussi grand que son contenu le nécessite, mais pas plus grand. Voici un exemple :

.box-max-content {
max-block-size: max-content;
background-color: lightcoral;
padding: 10px;
}

<div class="box-max-content">
This box will expand to fit its content, but no more than that.
</div>

Cette boîte grandira pour accommoder son contenu, mais ne s'étendra pas au-delà.

max-block-size avec du Texte Horizontal et Vertical

Terminons avec un exemple qui combine du texte horizontal et vertical :

.texte-mixed {
max-block-size: 200px;
background-color: lavender;
padding: 10px;
}

.texte-vertical {
writing-mode: vertical-rl;
max-block-size: 100px;
background-color: lightsalmon;
margin-top: 10px;
}

<div class="texte-mixed">
This is horizontal text with max-block-size of 200px.
<div class="texte-vertical">
This is vertical text with max-block-size of 100px.
</div>
</div>

Dans cet exemple, nous avons un conteneur avec du texte horizontal et une hauteur maximale de 200px. À l'intérieur, nous avons un autre div avec du texte vertical et une largeur maximale de 100px.

Et voilà ! Nous avons exploré la propriété max-block-size sous divers angles. Souviens-toi, la clé pour maîtriser le CSS est la pratique. Alors, n'ayez pas peur d'expérimenter avec ces exemples, de les modifier et de voir ce qui se passe. Bon codage, et puissent tes blocs être toujours de la taille parfaite !

Credits: Image by storyset