resize

par 2 contributeurs :

Résumé

La propriété CSS resize permet de maîtriser le redimensionnement d'un élément.

  • Valeur initiale none
  • S'applique à elements with overflow other than visible
  • Héritée non
  • Pourcentages
  • Média visual
  • Valeur calculée comme spécifié
  • Animable non
  • Ordre canonique l'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

resize: none | both | horizontal | vertical | inherit

Valeurs

none
L'élément ne propose pas de méthode de redimensionnement pour l'utilisateur.
both
L'élément affiche un dispositif permettant de redimensionner l'élément horizontalement et verticalement.
horizontal
L'élément affiche un dispositif qui permet de redimensionner l'élément horizontalement.
vertical
L'élément affiche un dispositif qui permet de redimensionner l'élément verticalement.
Note : resize ne s'applique pas aux éléments blocs dont la propriété overflow vaut visible.

Exemples

Désactivation du redimensionnement des zones de texte

Par défaut, les éléments <textarea> peuvent être redimensionnés dans Gecko 2.0 (Firefox 4). Il est possible de changer ce comportement avec le code CSS suivant :

textarea.exemple {
  resize: none; /* désactive le redimensionnement */
}

Utiliser le redimensionnement sur des éléments divers

Vous pouvez utiliser la propriété resize pour permettre à l'utilisateur de le redimensionner. Dans l'exemple ci-dessous, un élément <div> qui peut être redimensionné contient un élément (<p> qui peut lui aussi être redimensionné :

<div style="resize:both; overflow:scroll; width:300px; height:300px; border:1px solid black">
  <p style="resize:both; overflow:scroll; width:200px; height:200px; border:1px solid black">
    Ce paragraphe peut être redimensionné parce que la propriété CSS resize vaut 'both' sur cet élément.
  </p>
</div>

resize_fr.jpg

Voir l'exemple sur une page

Spécifications

Spécification Statut Commentaire
CSS Basic User Interface Module Level 3 Working Draft  

Compatibilité des navigateurs

Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support de base 1.0 4.0 (2.0) Pas de support Pas de support 3.0 (522)
S'applique à  <textarea> éléments blocs et remplacés, cellules de tableau et blocs en-ligne (sauf si overflow vaut visible)     <textarea>
Fonction Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support de base ? ? ? ? ?

Voir également

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : teoli, FredB
Dernière mise à jour par : teoli,
Masquer la barre latérale