From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/fr/web/css/resize/index.html | 153 +++++++++++++++++++++++++++++++++++++ 1 file changed, 153 insertions(+) create mode 100644 files/fr/web/css/resize/index.html (limited to 'files/fr/web/css/resize') diff --git a/files/fr/web/css/resize/index.html b/files/fr/web/css/resize/index.html new file mode 100644 index 0000000000..3b215af7ef --- /dev/null +++ b/files/fr/web/css/resize/index.html @@ -0,0 +1,153 @@ +--- +title: resize +slug: Web/CSS/resize +tags: + - CSS + - Propriété + - Reference +translation_of: 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

+ +
/* 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.
+ +

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 :

+ +
textarea.exemple {
+  resize: none;
+}
+
+ +

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

+ +
.redimensionnable {
+  resize: both;
+  overflow: scroll;
+  border: 1px solid black;
+}
+
+div {
+  height: 300px;
+  width: 300px;
+}
+
+p {
+  height: 200px;
+  width: 200px;
+}
+
+ +

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

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('CSS Logical Properties', '#resize', 'resize')}}{{Spec2('CSS Logical Properties')}}Ajout des valeurs block et inline.
{{SpecName('CSS3 Basic UI', '#resize', 'resize')}}{{Spec2('CSS3 Basic UI')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.resize")}}

+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf