Endre størrelse på eiendom CSS3

Blant de mange nyvinninger blir introdusert av CSS3, den nye - og ennå ikke endelig - utgivelsen av Cascading Style Sheets, er en egenskap spesielt interessant er størrelsen. Takket være denne egenskapen, er det lett å se, du kan lage, så enkelt skaleres elementer innen våre websider ved hjelp av en linje av CSS-kode (inntil ankomsten av CSS3 skape elementene som kreves bruk av skalerbare komplekse JavaScript-funksjoner).

Foreløpig denne eiendommen, samt mange andre av CSS3 er ikke universelt støttes av alle nettlesere, men bare de av familien WebKit (Safari og Chrome) og Firefox 4.

Bemerkes at noen av disse nettleserne sideelementer, som tag <textarea>, er resizable som standard i både høyde og bredde.

Administrerende endre størrelse

Endre størrelse på eiendom kan ha ulike verdier:

• none = elementet er ikke justerbar;
• Horisontal = elementet kan bare endres vannrett;
• = Vertikalt element kan endre størrelsen vertikalt bare;
• begge = elementet kan bli endret både vertikalt og horisontalt;

Her er noen eksempel:

 / *







 Hindrer nedskalering av tekstfelt







 * /







 textarea {resize: none;}









 / *







 Jeg lage en skalerbar element vertikalt







 * /







 div.vert {resize: vertikal;}

Administrere størrelsen med bundne

Bruken av eiendommen størrelsen svært ofte er ledsaget - på grunn av design - til begrensningene som bestemmer minimum og / eller maksimum kan anta at elementet justerbare. For å gjøre dette har vi brukt følgende CSS egenskaper:

• max-bredde og maks høyde
• min-bredde og min høyde

La oss se et eksempel på en skalerbar div horisontalt med fast maksimal bredde:

 {Div.horiz



  



 Høyde: 200px;



  



 bredde: 300px;



  



 max-width: 600px;



  



 bakgrunn: # EEEEEE;



  



 kant: 3px solid # dddddd;



  



 overflow: auto;



  



 resize: horisontal;







 }

På denne siden kan du se en fungerende demo (selvfølgelig, for å se eiendommen endrer størrelsen på arbeidet du må bruke en nettleser som støtter det).