Redimensionner - Astuces CSS

Anonim

La resizepropriété contrôle si et comment un élément peut être redimensionné par l'utilisateur en cliquant et en faisant glisser le coin inférieur droit de l'élément.

.module ( resize: both; )

Très important à savoir: resize ne fait rien à moins que la overflowpropriété ne soit définie sur autre chose que visible, qui est sa valeur initiale pour la plupart des éléments.

Il est également intéressant de savoir que Firefox vous permettra de redimensionner un élément plus petit que sa taille d'origine. Les navigateurs Webkit ne vous permettront pas de redimensionner un élément pour le rendre plus petit, mais seulement plus grand (dans les deux dimensions).

Valeurs

  • none: l'élément n'est pas redimensionnable. Il s'agit de la valeur initiale de la plupart des éléments. L' textareaélément est l'exception la plus courante dans de nombreux navigateurs, sa resizevaleur par défaut est both.
  • both: l'utilisateur peut redimensionner la hauteur et / ou la largeur de l'élément.
  • horizontal: l'utilisateur peut redimensionner l'élément horizontalement (en augmentant la largeur).
  • vertical: l'utilisateur peut redimensionner l'élément verticalement (en augmentant la hauteur).
  • inherit: l'élément hérite de la valeur de redimensionnement de son parent.

Lorsqu'un élément est redimensionnable, il a une petite poignée d'interface utilisateur dans un coin inférieur. La poignée apparaît à droite sur les éléments de page lorsque celle-ci directionest définie sur ltr(de gauche à droite) et à gauche sur les rtlpages (de droite à gauche).

Un élément sans la poignée (avant) et avec la poignée (arrière)

Démo

L'élément redimensionnable de cette démo est un paragraphe. Cliquez sur les boutons pour essayer les différentes resizevaleurs.

Voir la démonstration de redimensionnement du stylo par CSS-Tricks (@ css-tricks) sur CodePen.

En rapport

  • overflow
  • direction

Plus d'information

  • Le Spec
  • Documents Mozilla
  • L'article de David Walsh
  • Astuces Textarea

Prise en charge du navigateur

Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.

Bureau

Chrome Firefox C'EST À DIRE Bord Safari
4 4 * Non 79 4

Mobile / tablette

Chrome Android Android Firefox Android Safari sur iOS
88 85 81 Non