1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
|
---
title: max-block-size
slug: Web/CSS/max-block-size
tags:
- CSS
- Experimental
- Propriété
- Reference
translation_of: Web/CSS/max-block-size
---
<div>{{CSSRef}}{{SeeCompatTable}}</div>
<p>La propriété <strong><code>max-block-size</code></strong> définit la taille maximale horizontale ou verticale d'un élément selon l'axe perpendiculaire (l'axe de bloc) au sens d'écriture indiqué par {{cssxref("writing-mode")}}. Elle correspond à la propriété {{cssxref("max-width")}} ou {{cssxref("max-height")}} selon la valeur utilisée pour {{cssxref("writing-mode")}}. Si le mode d'écriture est orienté verticalement, <code>max-block-size</code> fait référence à la hauteur maximale de l'élément, sinon elle fait référence à la largeur maximale de l'élément.</p>
<p>La propriété {{cssxref("max-inline-size")}} peut être utilisée pour l'effet analogue selon l'axe en ligne (c'est-à-dire l'axe qui suit le sens d'écriture).</p>
<p>Cette propriété est une propriété <em>logique</em> qui doit remplacer les propriétés <em>physiques</em> correspondantes (<code>max-height</code> ou <code>max-width</code>) si on souhaite que la disposition tienne compte du mode d'écriture de la page (que celui-ci soit horizontal ou vertical). Vous pouvez consulter <a href="/fr/docs/Web/CSS/writing-mode#Exemple">ces exemples</a> pour en savoir plus.</p>
<div>{{EmbedInteractiveExample("pages/css/max-block-size.html")}}</div>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
/* Type <length> */
max-block-size: 300px;
max-block-size: 25em;
/* Valeurs proportionnelles */
/* Type <percentage> */
max-block-size: 75%;
/* Valeurs avec un mot-clé */
max-block-size: none;
max-block-size: max-content;
max-block-size: min-content;
max-block-size: fit-content;
max-block-size: fill-available;
/* Valeurs globales */
max-block-size: inherit;
max-block-size: initial;
max-block-size: unset;
</pre>
<h3 id="Valeurs">Valeurs</h3>
<p>La propriété <code>max-block-size</code> peut prendre les mêmes valeurs que les propriétés {{cssxref("max-width")}} ou {{cssxref("max-height")}}.</p>
<p>{{page("/fr/docs/Web/CSS/max-width", "Valeurs")}}</p>
<h3 id="Relation_avec_les_propriétés_physiques">Relation avec les propriétés physiques</h3>
<p>La valeur de <code>writing-mode</code> détermine la propriété physique correspondant à <code>max-block-size</code> :</p>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Valeur pour <code>writing-mode</code></th>
<th scope="col">Propriété physique équivalente à <code>max-block-size</code></th>
</tr>
</thead>
<tbody>
<tr>
<td><code>horizontal-tb</code>, <code>lr</code> {{deprecated_inline}}, <code>lr-tb</code> {{deprecated_inline}}, <code>rl</code> {{deprecated_inline}}, <code>rb</code> {{deprecated_inline}}, <code>rb-rl</code> {{deprecated_inline}}</td>
<td>{{cssxref("max-height")}}</td>
</tr>
<tr>
<td><code>vertical-rl</code>, <code>vertical-lr</code>, <code>sideways-rl</code> {{experimental_inline}}, <code>sideways-lr</code> {{experimental_inline}}, <code>tb</code> {{deprecated_inline}}, <code>tb-rl</code> {{deprecated_inline}}</td>
<td>{{cssxref("max-width")}}</td>
</tr>
</tbody>
</table>
<div class="note">
<p><strong>Note :</strong> Les valeurs <code>sideways-lr</code> et <code>sideways-rl</code> pour <code>writing-mode</code> ont été retirées de la spécification CSS Writing Modes Level 3 en fin de processus et pourraient être réintroduites dans la spécification Level 4.</p>
</div>
<div class="note">
<p><strong>Note :</strong> Les modes d'écriture <code>lr</code>, <code>lr-tb</code>, <code>rl</code>, <code>rb</code> et <code>rb-tl</code> ne sont plus autorisés pour les contextes {{Glossary("HTML")}} et peuvent uniquement être utilisés dans des contextes {{Glossary("SVG")}} 1.x.</p>
</div>
<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
{{csssyntax}}
<h2 id="Exemple">Exemple</h2>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">.exemple {
writing-mode: vertical-rl;
background-color: yellow;
block-size: 100%;
max-block-size: 200px;
}</pre>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><p class="exemple">Texte d'exemple</p>
</pre>
<h3 id="Résultat">Résultat</h3>
<p>{{EmbedLiveSample("Exemple")}}</p>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spécifications</th>
<th scope="col">État</th>
<th scope="col">Commentaires</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("CSS Logical Properties", "#propdef-max-block-size", "max-block-size")}}</td>
<td>{{Spec2("CSS Logical Properties")}}</td>
<td>Définition initiale</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<p>{{Compat("css.properties.max-block-size")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li>Les propriétés physiques correspondantes : {{cssxref("max-width")}} et {{cssxref("max-height")}}</li>
<li>{{cssxref("writing-mode")}}</li>
</ul>
|
