Lekce 16 - Rozměry prvků v CSS3

V předchozím kvízu, Kvíz - Okraje a rámečky v CSS3, jsme si ověřili nabyté zkušenosti z předchozích lekcí.

V této lekci se budeme zabývat nastavováním rozměrů prvků v CSS3. Správně nastavená velikost jakéhokoliv elementu na naší webové stránce je zásadní z několika různých důvodů. Zejména však ovlivňuje srozumitelnost, rozpoznatelnost a čitelnost obsahu (příliš malé písmo nebo obrázky můžou návštěvníka webu rychle odradit), ale také úhlednost, přehlednost a vyváženost (příliš velké elementy můžou odradit zrovna tak).

Platí pravidlo, že místem na internetové stránce nemusíme (třeba na rozdíl od papíru) šetřit. Není nutné se dnes bát velkoformátových obrázků (zejména, mají-li kvalitní rozlišení), velkých grafických prvků (např. motiv v designu stránky) či třeba opravdu nápadných nadpisů. Na druhou stranu, méně je někdy více. Někdy může velké písmo působit křiklavě, velké obrázky můžou být na úkor jiného obsahu (který chceme návštěvníkovi také ukázat) a neustále scrollování či přepínání může uživatele znechutit. Jako ve všem je to otázka zkušenosti se správnou mírou. Jaké nejdůležitější vlastnosti se nicméně v oblasti rozměrů dají skrze kaskádové styly nastavovat si ukážeme právě teď.

První zmíněnou vlastností bude box-sizing. Posléze se podíváme na šířku (width), výšku (height) a nastavování jejich minimálních (min-width, min-height) či maximálních (max-width, max-height) hodnot.

Box-sizing

Pomocí CSS3 vlastnosti box-sizing nastavujeme co bude šířka a výška elementu zahrnovat. Vlastnost se dědí.

Hodnoty

• content-box (výchozí) - Výška a šířka elementu zahrnuje pouze obsah. Vlastnosti padding, border nebo margin nejsou zahrnuty.
• border-box - Výška a šířka elementu zahrnuje obsah a vlastnosti padding a border. Vlastnost margin není zahrnuta do těchto rozměrů.
• initial - Nastaví vlastnost na výchozí hodnotu (tedy na content-box).
• inherit - Hodnota se zdědí z rodičovského elementu.

Ukázka

Vytvořme si dva divy o rozměrech 300px×100px s modrým, úzkým a plným rámečkem a s výplní 50px. Oba elementy budou mít okraj velký 10px (vlastnost margin). První div nebude nastavovat vlastnost box-sizing a druhý <div> bude mít u ní 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ýsledek:

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

Pomocí CSS3 vlastnosti width nastavujeme šířku HTML elementu, můžeme tak měnit jeho velikost/rozměry.

S nastavením výšky se pracuje úplně stejně jako s šířkou. U výšky se ovšem nemusíme tolik hlídat (zejména s ohledem na responzivní webdesign), jako u šířky. Pokud totiž bude element vyšší než rozlišení zobrazovací plochy, nic zásadně špatného se většinou neděje. Scrollování vertikálním směrem je kupř. na mobilu zcela běžnou záležitostí. Horizontální scrollování bude návštěvník nejspíše považovat za nepříjemnost, proto by šířka přetékat, pokud možno, neměla.

Výškou či šířkou elementu se myslí výška nebo šířka bez jakýchkoli rámečků nebo okrajů (bez vlastnosti border, padding i margin). Ty budou k výsledné výšce neb šířce ještě navíc přičteny. Vlastnosti width a height se dědí.

Hodnoty

• auto (výchozí) - Šířku či výšku spočítá prohlížeč.
• délka - Šířka či výška specifikovaná v libovolných délkových jednotkách, např. px, pt, cm...
• % - Šířka či výška vyjádřená jako část šířky nebo výšky rodičovského elementu. Toto může být matoucí, když nastavíme obrázku výšku na 50 %, nebude poloviční, ale bude přes polovinu stránky nebo elementu, ve kterém je vložený.
• inherit - Zdědí vlastnost height nebo width z rodičovského elementu.

Ukázka

Nastavme rozměry jednoduchého divu s textem:

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

Kontejner bude mít vlastnosti:

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

Výsledek:

Pokud nastavíme pouze šířku nebo výšku obrázku, druhý rozměr prohlížeč dopočítá tak, aby zůstal zachován poměr stran:

.nahled
{
   width: 400px;
}

HTML je pouze obrázek:

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

Výsledek:

Maximální šířka a výška (max-width a max-height)

Pomocí CSS3 vlastnosti max-width či max-height nastavujeme maximální šířku nebo maximální výšku HTML elementu. Nastavit např. maximální šířku je výhodné zejména u obrázků, když je zobrazujeme vedle sebe a mají různé rozměry. Šířkou či výškou elementu se myslí opět šířka nebo výška bez jakýchkoli rámečků nebo okrajů (bez border, padding i margin). Ty budou k výslednému rozměru ještě navíc přičteny.

Hodnoty

• none (výchozí) - Šířka či výška elementu není ničím omezena.
• délka - Maximální šířka či výška specifikovaná v libovolných délkových jednotkách, např. px, pt, cm...
• % - Maximální šířka nebo výška vyjádřená jako část šířky rodičovského elementu.
• inherit - Zdědí vlastnost max-width nebo max-height z rodičovského elementu.

Ukázka

Zkusme si vlastnost aplikovat na obrázek. Omezíme jeho výšku a šířku na maximálně 200px. Tím se obrázek vždy vejde do náhledu této velikosti a prohlížeč nám zároveň bude zachovávat poměr stran:

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

HTML je stejné jak minule:

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

Výsledek:

Minimální šířka a výška (min-width a min-height)

Pomocí CSS3 vlastnosti min-width či min-height nastavujeme minimální šířku nebo výšku HTML elementu. Vlastnost se nám může hodit u obrázků nebo např. v layoutu, kdy chceme omezit minimální šířku nebo výšku stránky, když uživatel zmenší okno prohlížeče. Opět zde samozřejmě mluvíme o šířce nebo výšce bez jakýchkoli rámečků nebo okrajů (bez border, padding i margin). Ty budou k výsledné šířce nebo délce ještě navíc přičteny.

Hodnoty

• délka - Minimální šířka či výška specifikovaná v libovolných délkových jednotkách, např. px, pt, cm...
• % - Minimální šířka či výška vyjádřená jako část šířky rodičovského elementu. Toto může být matoucí, když nastavíme obrázku šířku na 50 %, nebude poloviční, ale bude přes polovinu stránky nebo elementu, ve kterém je vložený.
• inherit - Zdědí vlastnost min-width nebo min-height z rodičovského elementu.

Ukázka

Zkusme si vlastnosti aplikovat na obrázek. Nastavíme jeho minimální velikost na 200×200px. Tím obrázek bude vždy minimálně takto velký a prohlížeč nám zároveň bude zachovávat poměr stran:

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

HTML zůstává zase při starém , výsledek:

V následující lekci, Vykreslování, překrývání a svislé zarovnání prvků v CSS3, se podíváme na vlastnosti upravující způsob vykreslování, překrývání a svislé zarovnání elementů.