Zmena veľkosti vlastnosť CSS3

Medzi mnohých inovácií, ktoré sú zavedené CSS3, nové - a zatiaľ nie je finálna - verzia kaskádových štýlov, majetok je zvlášť zaujímavé, je veľkosť. Vďaka tejto vlastnosti, je ľahké vidieť, môžete vytvoriť, tak jednoduché, zmeniť veľkosť prvkov v rámci našich webových stránok pomocou jedného riadku kódu CSS (až do príchodu CSS3 vytvoriť meniť veľkosť prvkov, vyžaduje použitie komplexných funkcií JavaScript).

V súčasnej dobe túto vlastnosť, rovnako ako mnoho ďalších z CSS3 nie je všeobecne podporovaný všetkými prehliadačmi, ale iba tie rodiny WebKit (Safari a Chrome) a Firefox 4.

Poznamenať, že niektoré z týchto prvkov prehliadača stránku, ako je tag <textarea>, sú veľkosti v predvolenom nastavení ako výšky a šírky.

Správa veľkosti

Zmena veľkosti objektu môže mať rôzne hodnoty:

• none = element nie je veľkosť;
• Horizontálne = element môže byť zväčšená iba vodorovne;
• = Vertikálne prvok môže byť zväčšená len vo zvislom smere;
• i = element môže byť zväčšená vertikálne aj horizontálne;

Tu je niekoľko, napríklad:

 / *







 Zabraňuje zmena veľkosti textového poľa







 * /







 textarea {veľkosť: none;}









 / *







 Aj vytvoriť meniť veľkosť prvku vo zvislom smere







 * /







 div.vert {veľkosť: vertikálne;}

Správa veľkosti viazaná

Užívanie nehnuteľnosti veľkosti veľmi často je sprevádzaný - z dôvodov design - s obmedzením, ktorá stanovuje minimálne a / alebo maximálne možné predpokladať, že element veľkosti. K tomu sme použili nasledujúce CSS vlastnosti:

• max-width a max-výšky
• min-width a min-height

Pozrime sa na príklad zmeniť veľkosť div vodorovne s pevnou maximálna šírka:

 {Div.horiz



  



 výška: 200px;



  



 šírka: 300px;



  



 max-width: 600px;



  



 pozadia: # EEEEEE;



  



 ohraničenie: 3px solid # dddddd;



  



 overflow: auto;



  



 veľkosť: horizontálne;







 }

Na tejto stránke môžete vidieť pracovnej demo (samozrejme vidieť vlastnosť veľkosť práce, ktorú treba použiť prehliadač, ktorý podporuje).