`Resize` - Propriété CSS

resize

Résumé des caractéristiques de la propriété `resize`

Description rapide

Autorise ou empêche le dimensionnement de l'élément. par l'utilisateur.

Statut

Standard

S'applique à

Éléments dont la propriété overflow est à autre chose que visible et optionnellement éléments remplacés.

Utilisable sur

HTML

Valeurs prédéfinies

Pourcentages

Ne s'appliquent pas.

Valeur initiale

none

Héritée par défaut

Non.

Type d'animation

Discrète : lors d'une animation, la propriété resize passe d'une valeur à l'autre sans transition.

Module W3C

Module CSS - Interface utilisateur de base

Références (W3C)

🡇

🡅

CSS Basic User Interface Module Level 4

Statut du document: WD (document de travail)

CSS Basic User Interface Module Level 3

Statut du document: REC (recommandation)

Schéma syntaxique de `resize`.

Schéma syntaxique de la propriété resize.
Les liens du schéma donnent accès à plus de détails.

Description de la propriété `resize`.

resize autorise ou non le dimensionnement d'un élément par l'utilisateur.

Remarque : pour que resize soit pris en compte, la propriété overflow doit avoir la valeur auto, scroll ou hidden.

La possibilité pour l'utilisateur de redimensionner un élément est matérialisée par un symbole graphique, en bas à droite de l'élément, et par un curseur de souris suggérant dans quelle direction peut se faire le dimensionnement.

Élément redimensionnable Cursor pour un redimensionnement horizontal

Lorsque l'utilisateur modifie les dimensions de l'élément, les propriétés width et height sont mises à jour avec une valeur exprimée en pixels. Si initialement ces propriétés avaient une valeur relative, en pourcentages par exemple, le calcul en relatif ne se fera plus.

Cas particulier : le mot clé `!important`.

Si la largeur et/ou la hauteur de l'élément sont définies avec le mot clé !important, la propriété resize ne pourra pas autoriser le dimensionnement suivant ces directions. Sur l'exemple ci-dessous, la propriété resize n'aura aucun effet.


	width:200px !important;
	height:100px !important;
	overflow:hidden;
	resize:both;

Limitation du redimensionnement.

Les quatre propriétés min-width, max-width, min-height et max-height permettent de limiter le dimensionnement de l'élément.

Les flex-box.

Remarque : le dimensionnement d'un élément inscrit dans un flexbox ne peut être modifiée par l'utilisateur dans la direction inline que si la propriété flex-basis est fixée à auto. Dans le cas contraire, la dimension inline est définie par la propriété flex-basis, et non pas par la propriété width.

Les éléments positionnés.

Pour les éléments positionnés en absolu ou en fixe, et dont la position est définie par la droite ou par le bas, le changement de dimension se fera par le coin en haut à gauche de l'élément, ce qui peut paraître contre-intuitif, d'autant plus que le symbole de redimensionnement est toujours affiché en bas à droite.

Cet élément est positionné en absolu et sa position est définie par la propriété right.

Valeurs pour `resize`.

resize: none;

Valeur par défaut. L'utilisateur ne peut pas redimensionner l'élément.
resize: horizontal;

L'utilisateur peut modifier la largeur de l'élément.
resize: vertical;

L'utilisateur peut modifier la hauteur de l'élément.
resize: both;

L'utilisateur peut modifier aussi bien la largeur que la hauteur de l'élément.
resize: inline;

L'utilisateur peut modifier la dimension de l'élément, suivant l'axe inline Cette valeur est équivalente à horizontal pour les langues latines.
resize: block;

L'utilisateur peut modifier la dimension de l'élément, suivant l'axe block Cette valeur est équivalente à vertical pour les langues latines.
resize: initial; (none) resize: inherit; resize: revert; resize: revertLayer; resize: unset;

Ces valeurs sont décrites plus en détail sur leur page respective : initial, inherit, revert, revert-layer, unset.

Animation de la propriété `resize`.

L'animation de la propriété resize est possible, mais ne présente vraiment pas beaucoup d'intérêt, si ce n'est de compliquer la vie du lecteur, qui devra saisir la poignée de dimensionnement au bon moment.

Simulateur avec la propriété `resize`.

Le simulateur vous permet de choisir bien sûr une valeur pur la propriété resize mais également la direction d'écriture (en fonction de la langue). Cela va influencer la position du symbole indiquant que le dimensionnement est possible, et la langue a également de l'importance pour les valeurs block et inline.

Mode d'écriture :

Ce cadre peut être redimensionné, ou pas, suivant la valeur choisie pour resize.

Prise en charge de `resize` par les navigateurs.

La compatibilité est bonne : à part l'ancien navigateur Internet Explorer, tous les autres navigateurs reconnaissent bien la propriété resize.

Colonne 1

Prise en charge par les navigateurs de la propriété resize qui autorise ou non le dimensionnement d'un élément par l'utilisateur.

Propriété
resize

Estimation de la prise en charge globale.

84%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Chrome

Edge

Opéra

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Firefox

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Historique de la propriété `resize`.

Module CSS - Interface utilisateur de base - Niveau 3

Concernant resize. Introduction de la propriété resize autorisant ou non l'utilisateur à redimensionner un élément.

02 Août 2002
Document de travail.
07 Juillet 2015
Candidat à la recommandation.
14 Décembre 2017
Proposé à la recommandation.
21 Juin 2018
Recommandation.
Module CSS - Interface utilisateur de base - Niveau 4

Concernant resize. Ajout des valeurs logiques block et inline pour la propriété resize.

22 Septembre 2015
Document de travail.

Voir aussi, au sujet de l'interface utilisateur.

Les spécifications CSS éditées par le W3C sont organisées en modules. La propriété resize fait partie du module CSS - Interface utilisateur de base (module CSS - Interface utilisateur de base). D'autres propriétés concernent la personnalisation de l'interface utilisateur :