From 258ba7b4be62d8640477a3bd3146d08b00cb70ec Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:59:20 +0200 Subject: convert content to md --- files/fr/web/css/resize/index.md | 165 ++++++++++++++++++--------------------- 1 file changed, 74 insertions(+), 91 deletions(-) (limited to 'files/fr/web/css/resize') diff --git a/files/fr/web/css/resize/index.md b/files/fr/web/css/resize/index.md index e2cde42faa..4a28c415f3 100644 --- a/files/fr/web/css/resize/index.md +++ b/files/fr/web/css/resize/index.md @@ -7,15 +7,16 @@ tags: - Reference translation_of: Web/CSS/resize --- -
{{CSSRef}}
+{{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é.

+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")}}
+{{EmbedInteractiveExample("pages/css/resize.html")}} -

Syntaxe

+## Syntaxe -
/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 resize: none;
 resize: both;
 resize: horizontal;
@@ -27,63 +28,63 @@ resize: inline;
 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.

-
+``` + +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. -

Syntaxe formelle

+> **Note :** `resize` ne s'applique pas aux blocs dont la propriété {{cssxref("overflow")}} vaut `visible`. + +### Syntaxe formelle {{csssyntax}} -

Exemples

+## Exemples -

Désactiver le redimensionnement des éléments textarea

+### Désactiver le redimensionnement des éléments `textarea` -

CSS

+#### CSS -

Par défaut, les éléments {{HTMLElement("textarea")}} peuvent être redimensionnés. Ce comportement peut être modifié grâce à ce fragment 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 {
+```css
+textarea.exemple {
   resize: none;
 }
-
+``` -

HTML

+#### HTML -
<textarea class="exemple">Saisir du texte ici.</textarea>
+```html + +``` -

Résultat

+#### Résultat -

{{EmbedLiveSample("Désactiver_le_redimensionnement_des_éléments_textarea","200","100")}}

+{{EmbedLiveSample("Désactiver_le_redimensionnement_des_éléments_textarea","200","100")}} -

Utiliser resize sur des éléments quelconques

+### 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) :

+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 {
+```css
+.redimensionnable {
   resize: both;
   overflow: scroll;
   border: 1px solid black;
@@ -98,54 +99,36 @@ p {
   height: 200px;
   width: 200px;
 }
-
+``` -

HTML

+#### HTML -
<div class="redimensionnable">
-  <p class="redimensionnable">
+```html
+

+  

     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

- - +  

+ +``` + +#### Résultat + +{{EmbedLiveSample("Utiliser_resize_sur_des_éléments_quelconques","450","450")}} + +## Spécifications + +| Spécification | Statut | Commentaires | +| -------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------------------------- | +| {{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 + +- {{HTMLElement("textarea")}} -- cgit v1.2.3-54-g00ecf