Redimensionnez la propriété de CSS3

Parmi les nombreuses innovations introduites par CSS3, la nouvelle - et pas encore définitif - Communiqué de l'Cascading Style Sheets, une propriété est particulièrement intéressante est redimensionner. Merci à cette propriété, il est facile de voir, vous pouvez créer, si simple, les éléments redimensionnables dans nos pages web en utilisant une seule ligne de code CSS (jusqu'à l'avènement de CSS3 éléments créant nécessitait l'utilisation de solutions évolutives complexes des fonctions JavaScript).

Actuellement cette propriété, ainsi que plusieurs autres de CSS3 n'est pas soutenu par tous les navigateurs, mais seulement ceux de la famille (Safari et Chrome) WebKit et Firefox 4.

Est à noter que certains de ces éléments navigateurs page, tels que l'<textarea> étiquette, sont redimensionnables par défaut, en hauteur et en largeur.

Redimensionner Gestion

Redimensionnez la propriété peut avoir des valeurs différentes:

• élément = none n'est pas redimensionnable;
• Horizontale = l'élément peut être redimensionné horizontalement uniquement;
• = Élément vertical peut être redimensionnée à la verticale seulement;
• deux = l'élément peut être redimensionné à la fois verticalement et horizontalement;

Voici quelques exemple:

 / *







 Empêche le redimensionnement des textarea







 * /







 textarea {redimensionner: none;}









 / *







 Je crée un élément redimensionnable verticalement







 * /







 div.vert {redimensionner: verticale;}

Gérer la taille avec liés

L'utilisation de la redimensionner la propriété est très souvent accompagnés - pour des raisons de conception - les contraintes qui déterminent le minimum et / ou maximum peut supposer que le redimensionnable élément. Pour ce faire, nous avons utilisé les propriétés CSS suivantes:

• max-width et max-height
• min-width et min-height

Voyons un exemple d'un div redimensionnable horizontalement avec une largeur maximale fixée:

 {Div.horiz



  



 hauteur: 200px;



  



 width: 300px;



  



 max-width: 600px;



  



 background: # EEEEEE;



  



 marge: 3px solid # dddddd;



  



 overflow: auto;



  



 redimensionner: horizontal;







 }

Sur cette page vous pouvez voir une démo de travail (bien sûr, de voir la propriété redimensionner le travail que vous devez utiliser un navigateur qui le supporte).