Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

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
Valeurs prédéfinies
none | both | vertical | horizontal | block | inline
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)
 🡇  
 🡅  
Statut du document:: WD (document de travail)

Statut du document:: REC (recommandation)

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     Cursor pour un redimensionnement vertical     Cursor pour un redimensionnement dans les deux directions

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 none both both horizontal horizontal vertical vertical block block inline inline
;
  • resize: none;
    Exemple pour resize:none

    Valeur par défaut. L'utilisateur ne peut pas redimensionner l'élément.

  • resize: horizontal;
    Exemple pour resize:horizontal

    L'utilisateur peut modifier la largeur de l'élément.

  • resize: vertical;
    Exemple pour resize:vertical

    L'utilisateur peut modifier la hauteur de l'élément.

  • resize: both;
    Exemple pour resize:both

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

  • resize: inline;
    Exemple pour resize:both

    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;
    Exemple pour 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; resize: inherit; resize: revert; resize: revert-layer; resize: unset;

    La valeur initiale est : none.

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.

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 :

resize :

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

Prise en charge par les navigateurs (compatibilité).

La compatibilité est bonne : à part l'ancien navigateur Internet Explorer, tous les autres navigateurs reconnaissent bien la propriété resize. Chrome cependant ne traite pas les valeurs block et inline (test en 2022).

1
resize
Estimation de la prise en charge en pourcentage du parc actuel.
82%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Baidu Browser

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

KaiOS Browser

Opéra

Opéra Mobile

QQ Browser

Safari

Safari sur IOS

Samsung Internet

Oméra mini

Voir aussi, dans le même module de standardisation que resize.

Les spécifications CSS éditées par le W3C sont organisées en modules. resize fait partie du Module CSS - Interface utilisateur de base (CSS Basic User Interface Module ). Les définitions suivantes sont également décrites dans ce même module.

Propriétés.

Définit la couleur des élément actifs, cochés.
Définit toutes les propriétés nécessaires pour qu'un élément soit affiché comme un bouton, un menu, etc.
Définit la couleur et la forme du marqueur de texte.
Choisit la couleur du marqueur de texte (curseur clignotant).
Définit la forme du curseur de texte.
Définit la forme du curseur de la souris.
Définit l'accessibilité d'une zone de saisie.
Résumé des caractéristiques d'encadrement.
Définit la couleur de l'encadrement (outline).
Définit l'espacement entre le contour et l'élément.
Définit le type de trait des contours (simple, double, pointillé...).
Définit l'épaisseur du trait d'encadrement.
Définit si le contenu d'un élément est sélectionnable par l'utilisateur ou non.