Canviar la mida de la propietat de CSS3

Entre les moltes innovacions que està introduint CSS3, el nou - i encara no és final - l'alliberament dels fulls d'estil en cascada, una propietat és particularment interessant és la mida. Gràcies a aquesta propietat, és fàcil de veure, pot crear, de manera simple, els elements de mida variable dins de les nostres pàgines web en una línia de codi CSS (fins a l'arribada de CSS3 elements de la creació Cal escalabilitat complexes funcions de JavaScript).

Actualment aquesta propietat, així com molts altres de CSS3 no és universalment suportat per tots els navegadors, però només els de la família WebKit (Safari i Chrome) i Firefox 4.

Es va observar que alguns d'aquests elements de la pàgina navegadors, com ara la <textarea> etiqueta, es pot canviar la mida per defecte en alçada i amplada.

Canviar la mida de la gestió

Canviar la mida de la propietat poden tenir diferents valors:

• element no = no es pot canviar la mida;
• Horitzontal = l'element pot ser redimensionat només horitzontalment;
• = Element vertical, pot canviar la mida vertical només;
• = Tant l'element pot ser redimensionat, tant vertical com horitzontal;

Aquí hi ha alguns exemple:

 / *







 Impedeix el canvi de mida d'àrea de text







 * /







 textarea {mida: none;}









 / *







 Puc crear un element pot canviar la mida vertical







 * /







 div.vert {mida: vertical;}

Administrar la mida d'obligat

L'ús de la propietat de canviar la mida sovint s'acompanya - per raons de disseny - a les limitacions que determini el mínim i / o màxim es pot suposar que l'element de grandària variable. Per a això hem utilitzat les següents propietats CSS:

• max-width i max-alçada
• min-width i min-alçada

Anem a veure un exemple d'un div horitzontal de mida variable amb un ample màxim fixat:

 {Div.horiz



  



 height: 200px;



  



 width: 300px;



  



 max-width: 600px;



  



 fons: # EEEEEE;



  



 frontera: 3px sòlid # dddddd;



  



 overflow: auto;



  



 canviar la mida: horitzontal;







 }

En aquesta pàgina es pot veure una demostració de treball (per descomptat, per veure la mida de la propietat del treball que ha d'utilitzar un navegador que ho suporta).