De grootte van de eigendom van CSS3

Onder de vele vernieuwingen geïntroduceerd door CSS3, de nieuwe - en nog niet definitief - release van de Cascading Style Sheets, een eigenschap is bijzonder interessant is te wijzigen. Dankzij deze eigenschap, is het gemakkelijk te zien, je kunt maken, zo simpel, resizable elementen binnen onze webpagina's met behulp van een regel van de CSS-code (tot de komst van CSS3 het creëren van elementen die nodig zijn het gebruik van schaalbare complexe JavaScript-functies).

Op dit moment deze eigenschap, evenals vele andere van CSS3 is niet algemeen ondersteund door alle browsers, maar alleen die van de familie WebKit (Safari en Chrome) en Firefox 4.

Te worden opgemerkt dat sommige van deze browsers pagina-elementen, zoals de tag <textarea>, zijn resizable standaard in hoogte en breedte.

Het beheren van resize

De grootte van de woning kan verschillende waarden hebben:

• none = element is niet veranderbaar;
• Horizontaal = het element kan alleen horizontaal worden aangepast;
• = Verticale element kan alleen verticaal worden aangepast;
• zowel = de element kan zowel verticaal als horizontaal worden aangepast;

Hier zijn enkele bijvoorbeeld:

 / *







 Voorkomt het formaat van de textarea







 * /







 textarea {resize: none;}









 / *







 Ik creëer een resizable element verticaal







 * /







 div.vert {resize: verticaal;}

Het beheer van de grootte met gebonden

Het gebruik van het pand resize zeer vaak gepaard gaat - omwille van het ontwerp - om de beperkingen die de minimum-en / of maximum vast te stellen kan aannemen dat het element resizable. Om dit te doen gebruiken we de volgende CSS-eigenschappen:

• max-width en max-height
• min-width en min-height

Laten we eens een voorbeeld zien van een resizable div horizontaal met vaste maximale breedte:

 {Div.horiz



  



 height: 200px;



  



 width: 300px;



  



 max-width: 600px;



  



 background: # eeeeee;



  



 rand: 3px solid # dddddd;



  



 overflow: auto;



  



 resize: horizontaal;







 }

Op deze pagina zie je een werkende demo (natuurlijk, om te zien het onroerend goed de grootte van de werken, moet u een browser die het ondersteunt het gebruik).