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
|
---
title: Propriétés logiques pour le dimensionnement
slug: Web/CSS/CSS_Logical_Properties/Sizing
tags:
- CSS
- Guide
- Propriété logique
translation_of: Web/CSS/CSS_Logical_Properties/Sizing
original_slug: Web/CSS/CSS_Logical_Properties/Dimensionnement
---
<div>{{CSSRef}}</div>
<p class="summary">Dans ce guide, nous verrons les correspondances entre les propriétés physiques et les propriétés logiques qui peuvent être utilisées afin de dimensionner des éléments au sein d'un document.</p>
<p>Lorsqu'on définit la taille d'un objet, <a href="https://drafts.csswg.org/css-logical/">la spécification sur les propriétés et les valeurs logiques</a> permet de définir le dimensionnement en fonction du flux du texte (le mode d'écriture et son orientation) plutôt que relativement aux dimensions physiques du support (haut / bas / gauche / droite). Bien que ce premier fonctionnement, utilisant des propriétés et des valeurs <em>logiques</em>, puisse devenir la méthode par défaut à l'avenir, on peut tout à fait avoir besoin d'utiliser des propriétés et des valeurs <em>physiques</em> en combinaison avec ces propriétés et ces valeurs logiques.</p>
<h2 id="Correspondances_pour_les_dimensions">Correspondances pour les dimensions</h2>
<p>Le tableau qui suit fournit les correspondances entre les propriétés logiques et les propriétés physiques lorsqu'on utilise un mode d'écriture horizontal progressant de haut en bas (<code>horizontal-tb</code>) comme c'est le cas avec le français ou l'arabe. Dans ce cas, la propriété physique {{CSSxRef("width")}} serait équivalente à la propriété logique {{CSSxRef("inline-size")}}.</p>
<p>Si on utilisait un mode d'écriture vertical, {{CSSxRef("inline-size")}} aurait correspondu à {{CSSxRef("height")}}.</p>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Propriété logique</th>
<th scope="col">Propriété physique</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{CSSxRef("inline-size")}}</td>
<td>{{CSSxRef("width")}}</td>
</tr>
<tr>
<td>{{CSSxRef("block-size")}}</td>
<td>{{CSSxRef("height")}}</td>
</tr>
<tr>
<td>{{CSSxRef("min-inline-size")}}</td>
<td>{{CSSxRef("min-width")}}</td>
</tr>
<tr>
<td>{{CSSxRef("min-block-size")}}</td>
<td>{{CSSxRef("min-height")}}</td>
</tr>
<tr>
<td>{{CSSxRef("max-inline-size")}}</td>
<td>{{CSSxRef("max-width")}}</td>
</tr>
<tr>
<td>{{CSSxRef("max-block-size")}}</td>
<td>{{CSSxRef("max-height")}}</td>
</tr>
</tbody>
</table>
<h2 id="Exemple_pour_width_et_height">Exemple pour <code>width</code> et <code>height</code></h2>
<p>Les propriétés logiques correspondant à {{CSSxRef("width")}} et {{CSSxRef("height")}} sont : {{CSSxRef("inline-size")}} pour la taille sur la dimension en ligne et {{CSSxRef("block-size")}}, pour la taille selon la dimension de bloc. Si on travaille sur un document en français, on pourra remplacer <code>width</code> par <code>inline-size</code> et <code>height</code> par <code>block-size</code> et on obtiendra le même résultat.</p>
<p>Dans l'exemple interactif suivant, le mode d'écriture est explicitement définit avec <code>horizontal-tb</code>. En modifiant cette valeur pour la passer à <code>vertical-rl</code>, on verra que le premier exemple, qui utilise <code>width</code> et <code>height</code>, conserve le même dimensionnement, même si le texte s'affiche verticalement. Pour le second exemple qui utilise <code>inline-size</code> et <code>block-size</code>, on voit que le texte et le dimensionnement suivent l'orientation du flux et que le bloc est ainsi tourné dans son intégralité.</p>
<p>{{EmbedGHLiveSample("css-examples/logical/size-inline-block.html", '100%', 500)}}</p>
<h2 id="Exemple_pour_min-width_et_min-height">Exemple pour <code>min-width</code> et <code>min-height</code></h2>
<p>Il existe également des propriétés logiques correspondantes pour {{CSSxRef("min-width")}} et {{CSSxRef("min-height")}} : {{CSSxRef("min-inline-size")}} et {{CSSxRef("min-block-size")}}. Celles-ci fonctionnent de la même façon que <code>inline-size</code> et <code>block-size</code> mais paramètrent une taille minimale plutôt qu'une taille fixe.</p>
<p>Dans l'exemple suivant, vous pouvez passer le mode d'écriture en <code>vertical-rl</code> et observer l'effet obtenu. Là encore, on utilise la propriété physique (<code>min-height</code>) sur le premier exemple et la propriété logique (<code>min-block-size</code>) sur le second.</p>
<p>{{EmbedGHLiveSample("css-examples/logical/size-min.html", "100%", 500)}}</p>
<h2 id="Exemple_pour_max-width_et_max-height">Exemple pour <code>max-width</code> et <code>max-height</code></h2>
<p>Enfin, on peut utiliser {{CSSxRef("max-inline-size")}} et {{CSSxRef("max-block-size")}} afin de remplacer les propriétés physiques {{CSSxRef("max-width")}} et {{CSSxRef("max-height")}}. Là encore, vous pouvez modifier l'exemple qui suit pour observer les conséquences de ce changement.</p>
<p>{{EmbedGHLiveSample("css-examples/logical/size-max.html", "100%", 500)}}</p>
<h2 id="Mots-clés_logiques_pour_resize">Mots-clés logiques pour <code>resize</code></h2>
<p>La propriété {{CSSxRef("resize")}} définit si un objet peut être redimensionné. Cette propriété s'utilise avec les valeurs physiques <code>horizontal</code> et <code>vertical</code>. La propriété <code>resize</code> peut désormais s'utiliser également avec des valeurs logiques : <code>resize: inline</code> permettra de redimensionner un objet sur l'axe en ligne et <code>resize: block</code> permettra de le redimensionner sur l'axe en bloc.</p>
<p>La valeur <code>both</code> peut être utilisée dans un contexte physique ou dans un contexte logique : elle permet le redimensionnement sur les deux axes. Vous pouvez manipuler cette propriété et ces valeurs dans l'exemple interactif suivant.</p>
<p>{{EmbedGHLiveSample("css-examples/logical/size-resize.html", "100%", 700)}}</p>
<div class="blockIndicator warning">
<p><strong>Attention !</strong> À l'heure actuelle (décembre 2018), seul Firefox prend en charge les valeurs logiques pour <code>resize</code>.</p>
</div>
|
