CSS3 kokoa omaisuus

Useiden innovaatiot otetaan käyttöön vuoteen CSS3, uusi - ja vielä lopullinen - vapauttaa Cascading Style Sheets, omaisuus on erityisen kiinnostavaa kokoa. Kiitos tämän ominaisuuden, se on helppo nähdä, voit luoda, niin yksinkertainen, skaalautuvia elementit www-sivujen rivi CSS koodia (kunnes kynnyksellä CSS3 luoda elementtejä resizable edellyttää käytön monimutkaisia ​​JavaScriptiä).

Tällä hetkellä tätä ominaisuutta, samoin kuin monet CSS3 ei ole yleisesti tue kaikkia selaimia, mutta vain perheen WebKit (Safari ja Chrome) ja Firefox 4.

Huomattava, että eräät näistä selaimista sivun elementit, kuten Tunnisteet <textarea>, ovat skaalautuvia oletuksena sekä korkeus-ja leveyssuunnassa.

Kokoa kahva

Resize omaisuus voi olla erilaisia ​​arvoja:

• none = kohde ei ole resizable;
• vaakasuora = elementin kokoa voi muuttaa vaaka vain;
• = Pystysuora elementti kokoa voi muuttaa vain pystysuunnassa;
• molemmat = elementin kokoa voidaan muuttaa pysty-ja vaakasuunnassa;

Tässä muutamia esimerkiksi:

 / *







 Estää kokoa textarea







 * /







 textarea {kokoa: none;}









 / *







 Luon elementti resizable pystysuunnassa







 * /







 div.vert {kokoa: korkeus;}

Hallitse koko on sidottu

Kiinteistön käyttöön kokoa hyvin usein mukana - syistä muotoilu - rajoitteet, jotka määrittävät vähimmäis-ja / tai maksimi voidaan olettaa, että osa resizable. Voit tehdä tämän käytimme seuraavat CSS-ominaisuuksia:

• max-width ja max-height
• min-width ja min-height

Katsotaanpa esimerkki resizable div vaakasuoraan kiinteä maksimileveys:

 {Div.horiz



  



 korkeus: 200px;



  



 leveys: 300px;



  



 max-width: 600px;



  



 background: # EEEEEE;



  



 raja: 3px solid # dddddd;



  



 overflow: auto;



  



 kokoa: vaakasuora;







 }

Päällä Tällä sivulla näet työ demo (tietenkin nähdä ominaisuudet kokoa työtä sinun on käytettävä selaimen, joka tukee sitä).