22. diel - Rozmery prvkov v CSS

V minulej lekcii, Pokročilejšie okraje a rámčeky v CSS 3 , sme si ukázali, ako pracovať s tvarom okrajov rámčekov a pokročilým nastavením farebného vzhľadu.

V tejto lekcii sa budeme zaoberať nastavovaním rozmerov prvkov v CSS3. Správne nastavená veľkosť akéhokoľvek elementu na našej webovej stránke je zásadný z niekoľkých rôznych dôvodov. Najmä však ovplyvňuje zrozumiteľnosť, rozpoznateľnosť a čitateľnosť obsahu (príliš malé písmo alebo obrázky môžu návštevníka webe rýchlo odradiť), ale aj úhľadnosť, prehľadnosť a vyváženosť (príliš veľké elementy môžu odradiť zrovna tak).

Platí pravidlo, že miestom na internetovej stránke nemusíme (napríklad na rozdiel od papiera) šetriť. Nie je nutné sa dnes báť veľkoformátových obrázkov (najmä, ak majú kvalitné rozlíšenie), veľkých grafických prvkov (napr. Motív v dizajne stránky) či treba naozaj nápadných nadpisov. Na druhú stranu, menej je niekedy viac. Niekedy môže veľké písmo pôsobiť krikľavo, veľké obrázky môžu byť na úkor iného obsahu (ktorý chceme návštevníkovi tiež ukázať) a neustále scrollovanie či prepínanie môže používateľa znechutiť. Ako vo všetkom je to otázka skúsenosti so správnou mierou. Aké najdôležitejšie vlastnosti sa však v oblasti rozmerov dajú skrze kaskádové štýly nastavovať si ukážeme práve teraz.

Prvý zmienenú vlastností bude box-sizing. Neskôr sa pozrieme na šírku (width), výšku (height) a nastavovanie ich minimálnych (min-width, min-height) či maximálnych (max-width, max-height) hodnôt.

Box-sizing

Pomocou CSS 3 vlastnosti box-sizing nastavujeme čo bude šírka a výška elementu zahŕňať. Vlastnosť sa dedia.

Hodnoty

• content-box (predvolené) - Výška a šírka elementu zahŕňa iba obsah. Vlastnosti padding, border alebo margin nie sú zahrnuté.
• border-box - Výška a šírka elementu zahŕňa obsah a vlastnosti padding a border. Vlastnosť margin nie je zahrnutá do týchto rozmerov.
• initial - Nastaví vlastnosť na predvolenú hodnotu (teda na content-box).
• inherit - Hodnota sa zdedí z rodičovského elementu.

Ukážka

Vytvorme si dva divy s rozmermi 300px × 100px s modrým, úzkym a plným rámčekom as výplňou 50px. Oba elementy budú mať okraj veľký 10px (vlastnosť margin). Prvý div nebude nastavovať vlastnosť box-sizing a druhý <div> bude mať u nej hodnotu border-box:

div {
   width: 300px;
   height: 100px;
   padding: 50px;
   border: #3B94E0 1px solid;
   margin: 10px;
}

.box-sizing {
   box-sizing: border-box;
}

HTML:

<div>
Div bez vlastnosti box-sizing.</div>
<div class="box-sizing">Div s vlastností box-sizing.</div>

výsledok:

Šírka a výška (width a height)

Pomocou CSS 3 vlastnosti width nastavujeme šírku HTML elementu, môžeme tak meniť jeho veľkosť / rozmery.

S nastavením výšky sa pracuje úplne rovnako ako s šírkou. U výšky sa však nemusíme toľko strážiť (najmä s ohľadom na responzívne webdesign), ako u šírky. Ak totiž bude element vyššia ako rozlíšenie zobrazovacej plochy, nič zásadne zlé sa väčšinou nedeje. Scrollovanie vertikálnym smerom je napr. na mobile úplne bežnou záležitosťou. Horizontálne scrollovanie bude návštevník pravdepodobne považovať za nepríjemnosť, preto by šírka pretekať, pokiaľ možno, nemala.

Výškou či šírkou elementu sa myslí výška alebo šírka bez akýchkoľvek rámčekov alebo okrajov (bez vlastnosti border, padding i margin). Tie budú k výslednej výške neb šírke ešte navyše pripočítané. Vlastnosti width a height sa dedí.

Hodnoty

• auto (predvolené) - Šírku či výšku spočíta prehliadač.
• dĺžka - Šírka či výška špecifikovaná v ľubovoľných dĺžkových jednotkách, napr. px, pt, cm ...
• % - Šírka či výška vyjadrená ako časť šírky alebo výšky rodičovského elementu. Toto môže byť mätúce, keď nastavíme obrázku výšku na 50%, nebude polovičná, ale bude cez polovicu stránky alebo elementu, v ktorom je vložený.
• inherit - Zdedí vlastnosť height alebo width z rodičovského elementu.

Ukážka

Nastavme rozmery jednoduchého divu s textom:

<div id="kontejner">Tento kontejner je nastaven na rozměry 300x100px.</div>

Kontajner bude mať vlastnosti:

#kontejner
{
   width: 300px;
   height: 100px;
   border: 1px solid blue;
}

výsledok:

Ak nastavíme iba šírku alebo výšku obrázku, druhý rozmer prehliadač dopočíta tak, aby zostal zachovaný pomer strán:

.nahled
{
   width: 400px;
}

HTML je len obrázok:

<img src="ptaci.png" alt="Ptáci" class="nahled" />

výsledok:

Maximálna šírka a výška (max-width a max-height)

Pomocou CSS 3 vlastnosti max-width či max-height nastavujeme maximálnu šírku alebo maximálnu výšku HTML elementu. Nastaviť napr. Maximálnu šírku je výhodné najmä u obrázkov, keď je zobrazujeme vedľa seba a majú rôzne rozmery. Šírkou či výškou elementu sa myslí opäť šírka alebo výška bez akýchkoľvek rámčekov alebo okrajov (bez border, padding i margin). Tie budú k výslednému rozmeru ešte navyše pripočítané.

Hodnoty

• none (predvolené) - Šírka či výška elementu nie je ničím obmedzená.
• dĺžka - Maximálna šírka či výška špecifikovaná v ľubovoľných dĺžkových jednotkách, napr. px, pt, cm ...
• % - Maximálna šírka alebo výška vyjadrená ako časť šírky rodičovského elementu.
• inherit - Zdedí vlastnosť max-width alebo max-height z rodičovského elementu.

Ukážka

Skúsme si vlastnosť aplikovať na obrázok. Obmedzíme jeho výšku a šírku na maximálne 200px. Tým sa obrázok vždy zmestí do náhľadu tejto veľkosti a prehliadač nám zároveň bude zachovávať pomer strán:

.nahled
{
   max-width: 200px;
   max-height: 200px;
   border: 1px solid blue;
}

HTML je rovnaké ako minule:

<img src="ptaci.png" alt="Ptáci" class="nahled" />

výsledok:

Minimálna šírka a výška (min-width a min-height)

Pomocou CSS3 vlastnosti min-width či min-height nastavujeme minimálnu šírku alebo výšku HTML elementu. Vlastnosť sa nám môže hodiť u obrázkov alebo napr. V layoutu, kedy chceme obmedziť minimálnu šírku alebo výšku stránky, keď používateľ zmenší okno prehliadača. Opäť tu samozrejme hovoríme o šírke a dĺžke bez akýchkoľvek rámčekov alebo okrajov (bez border, padding i margin). Tie budú k výslednej šírke alebo dĺžke ešte navyše pripočítané.

Hodnoty

• dĺžka - Minimálna šírka či výška špecifikovaná v ľubovoľných dĺžkových jednotkách, napr. px, pt, cm...
• % - Minimálna šírka či výška vyjadrená ako časť šírky rodičovského elementu. Toto môže byť mätúce, keď nastavíme obrázku šírku na 50%, nebude polovičná, ale bude cez polovicu stránky alebo elementu, v ktorom je vložený.
• inherit - Zdedí vlastnosť min-width alebo min-height z rodičovského elementu.

Ukážka

Skúsme si vlastnosti aplikovať na obrázok. Nastavíme jeho minimálna veľkosť na 200×200px. Tým obrázok bude vždy minimálne takto veľký a prehliadač nám zároveň bude zachovávať pomer strán:

.nahled
{
   min-width: 200px;
   min-height: 200px;
   border: 1px solid blue;
}

HTML zostáva zase pri starom:) , Výsledok:

V budúcej lekcii, Plávajúce obsah v CSS 3 , sa pozrieme na nastavenie plávajúceho obsahu, teda takého, ktorý je vynechaný iným obsahom, a na to, ako urobiť oblasť, v ktorej je obtekanie obmedzené.