-
Notifications
You must be signed in to change notification settings - Fork 8k
/
index.md
129 lines (90 loc) · 3.22 KB
/
index.md
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
---
title: resize
slug: Web/CSS/resize
---
{{CSSRef}}
La propriété **`resize`** permet de contrôler le caractère redimensionnable d'un élément et notamment la direction dans laquelle celui-ci peut être redimensionné.
{{EmbedInteractiveExample("pages/css/resize.html")}}
## Syntaxe
```css
/* Valeurs avec un mot-clé */
resize: none;
resize: both;
resize: horizontal;
resize: vertical;
resize: block;
resize: inline;
/* Valeurs globales */
resize: inherit;
resize: initial;
resize: unset;
```
La propriété `resize` peut être définie avec l'un des mots-clés suivants.
### Valeurs
- `none`
- : L'élément n'offre aucune méthode à l'utilisateur pour que celui-ci le redimensionne.
- `both`
- : L'élément affiche un mécanisme afin que l'utilisateur puisse le redimensionner, horizontalement et verticalement.
- `horizontal`
- : L'élément affiche un mécanisme afin que l'utilisateur puisse le redimensionner horizontalement (pas de redimensionnement vertical).
- `vertical`
- : L'élément affiche un mécanisme afin que l'utilisateur puisse le redimensionner verticalement (pas de redimensionnement horizontal).
- `block` {{experimental_inline}}
- : Selon les valeurs de {{cssxref("writing-mode")}} et {{cssxref("direction")}}, l'élément affiche un mécanisme pour que l'utilisateur puisse le redimensionner, horizontalement ou verticalement, dans la direction du bloc.
- `inline` {{experimental_inline}}
- : Selon les valeurs de {{cssxref("writing-mode")}} et {{cssxref("direction")}}, l'élément affiche un mécanisme pour que l'utilisateur puisse le redimensionner, horizontalement ou verticalement, dans la direction du flux en ligne.
> **Note :** `resize` ne s'applique pas aux blocs dont la propriété {{cssxref("overflow")}} vaut `visible`.
## Définition formelle
{{CSSInfo}}
## Syntaxe formelle
{{CSSSyntax}}
## Exemples
### Désactiver le redimensionnement des éléments `textarea`
#### CSS
Par défaut, les éléments {{HTMLElement("textarea")}} peuvent être redimensionnés. Ce comportement peut être modifié grâce à ce fragment CSS :
```css
textarea.exemple {
resize: none;
}
```
#### HTML
```html
<textarea class="exemple">Saisir du texte ici.</textarea>
```
#### Résultat
{{EmbedLiveSample("Désactiver_le_redimensionnement_des_éléments_textarea","200","100")}}
### Utiliser `resize` sur des éléments quelconques
La propriété `resize` peut être utilisée afin de pouvoir redimensionner n'importe quel élément. Dans l'exemple qui suit, on a une boîte {{HTMLElement("div")}} redimensionnable qui contient un paragraphe (({{HTMLElement("p")}}) lui-même redimensionnable) :
#### CSS
```css
.redimensionnable {
resize: both;
overflow: scroll;
border: 1px solid black;
}
div {
height: 300px;
width: 300px;
}
p {
height: 200px;
width: 200px;
}
```
#### HTML
```html
<div class="redimensionnable">
<p class="redimensionnable">
Ce paragraphe peut être redimensionné car la propriété CSS resize vaut
'both' sur cet élément.
</p>
</div>
```
#### Résultat
{{EmbedLiveSample("Utiliser_resize_sur_des_éléments_quelconques","450","450")}}
## Spécifications
{{Specifications}}
## Compatibilité des navigateurs
{{Compat}}
## Voir aussi
- {{HTMLElement("textarea")}}