Archiv autora: Nothrem

Zarovnání na střed v kontejneru

Zarovnání textu na střed není (doufám) problém; stačí použít:

.center { text-align: center; }

Problém ale nastane, pokud chceme zarovnat kontejner uvnitř jiného kontejneru. S tím nám pomůže automatický margin:

.parent {
    display: block;
    width: 300px;
}
.child {
    display: block;
    width: 200px;
    margin: 0 auto;
}

Nastavením marginu na auto říkáme prohlížeči, že chceme, aby obě protilehlá odsazení měla stejnou velikost. Tím logicky vznikne efekt zarovnání na střed.

Automatický margin platí pouze na element typu block; naopak zarovnání textu platí na inline elementy.

Vertikální zarovnání

Horizontální (zleva doprava) je jednoduché, ale se zarovnáním zhora dolu se trochu zapotíte – tedy pokud vám nestačí podpora jen v novějších prohlížečích (IE11+, Firefox 28+, Chrome 21+, Safari 9+):

.parent { 
    display: flex;
    flex-flow: column;
    align-content: center;
    width: 300px; 
} 
.child { 
    display: block; 
    width: 200px; 
    flex: 0 0 200px;
} 

Flexbox je nový nástroj na vytváření layoutu a jednou z jeho vlastností je to, že dokáže zarovnávat prvky uvnitř kontejneru.

Pokud chcete flexbox využít i v IE10, musíte použít speciální zápis (tzv. Tweener):

.parent { 
    display: -ms-flexbox;
    -ms-flex-flow: column;
    -ms-flex-align: center;
    width: 300px; 
} 

Ještě existuje jedna stará verze flexboxu pro Safari 3.1+ a Firefox 4+:

 
.parent { 
    display: -webkit-box;
    display: -moz-box;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-box-align: center;
    -moz-box-align: center;
    width: 300px; 
} 

Zarovnání více prvků

Výše uvedené kódy ale platí jen v případě, že uvnitř kontejneru je jen jeden prvek. Pokud jich máte více a chcete je vedle sebe zarovnané na střed (nebo nahoru či dolu), můžete flexbox použít jen v novějších prohlížečích:

.parent { 
    display: flex;
    flex-flow: row;
    align-content: center;
    justify-content: center;
    width: 300px; 
} 
.child1, .child2 { 
    display: block; 
    width: 100px; 
    flex: 0 0 100px;
} 

Pomocí align-content a justify-content pak můžete řídit, kam se prvky zarovnají. Více viz popis Flexboxu.

Zarovnání jako text

Pro starší prohlížeče můžete zarovnat pouze text pomocí vlastnosti vertical-align. Aby tato vlastnosti fungovala i na blokové prvky, musíte na prvky použít display: inline-block:

 
.parent { 
    display: block;
    width: 300px; 
} 
.child1, .child2 {
    display: inline-block;
    text-align: center;
    vertical-align: center;
    width: 100px;

Hodnota inline-block je podporována od IE8 a Firefox 3, což by dnes už neměl být problém. Firefox 2 podporuje -moz-inline-block.

Pokud byste potřebovali podporu i ve starších prohlížečích (IE7) nebo vertikální zarovnání z nějakého důvodu nefungovalo, budete muset použít tabulkový layout:

 
.parent { 
    display: table;
    width: 300px; 
} 
.child1, .child2 {
    display: table-cell;
    text-align: center;
    vertical-align: center;
    width: 100px; /* bude mít 150px!!! */

Pozor ale na to, že zatímco u flexbox a inline-block je možné zarovnat prvky na střed při zachování dané velikosti, tak u tabulky musí sloupce vyplnit celý prostor. Výše uvedená tabulka tedy bude mít sloupce 150px široké. Pokud byste chtěli zachovat sloupce 100px široké, museli byste šířku tabulky snížit na 200px a přidat jí margin: 0 auto. V tabulce se též prvky nemohou automaticky zalomit na další řádek.

Absolutní zarovnání

Pokud máte kontejner s pevnou velikostí a v něm jen jeden prvek, můžete ho zarovnat pomocí absolutního pozicování:

 
.parent() {
    position: relative;
    width: 300px;
    height: 200px;
}
.child {
    position: absolute;
    width: 200px;
    height: 100px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Pozici nahoře nebo vlevo nastavíte tím, že top nebo left nastavíte na nulu a dáte nulovou odpovídající hodnotu translate. Pozici dole nebo vpravo pak nastavíte tak, že top nebo left nastavíte na auto a přidáte bottom: 0 nebo right: 0.

Co nedělat při návrhu webu ve Photoshopu

Navrhovat web ve Photoshopu je špatný nápad, ale když váš grafik s ničím jiným neumí dělat, nemáte na výběr. V takovém případě ale existuje řada věcí, kterým by se měl grafik vyhnout nebo je naopak vzít v úvahu, aby bylo možné jeho práci použít pro vytvoření webové stránky.

Pokračování textu Co nedělat při návrhu webu ve Photoshopu

Jak určit kvalitu a kompresi JPG obrázků?

Pokud připravujete obrázky JPG pro váš web, pravděpodobně jste již narazili na problém, v jaké kvalitě (resp. kompresi) obrázek uložit, aby byl co nejmenší a zároveň stále bylo vidět, co na něm je místo aby byly vidět chyby (artefakty).

Já vám ukážu jednoduchý matematický výpočet, kterým určíte nejvhodnější kompresi.

Pokračování textu Jak určit kvalitu a kompresi JPG obrázků?

Detekce polohovacích zařízení

Pomocí @media můžete vytvořit responzivní layout v závislosti na šířce obrazovky, čímž můžete celkem dobře poznat, jestli uživatel pracuje na mobilu, tabletu nebo desktopu a podle toho uzpůsobit další prvky (např. větší ikony na mobilu).

V posledních letech ale narážíme na zařízení, která se této definici vymykají. Např. Note zařízení, která mají mobilní displej (320px), ale jdou ovládat hodně přesným perem. Nebo naopak dotykové monitory, které mají 4k rozlišení, ale ovládají se pouze prstem (takže na 16x16px ikonu se prakticky nedá kliknout). Navíc některá zařízení jsou již schopna detekovat ukázání prstem (hover) nebo sílu stisku (3D touch).

Pokračování textu Detekce polohovacích zařízení

Přehled CSS hacků

Moderní poučky o CSS tvrdí, že hackům už odzvonilo a místo nich by se měla používat feature detect a fallbacky. To je sice pravda v okamžiku, kdy chcete stylovat vzhled stránky, ale pokud potřebujete vyřešit nějaký bug, který se projevuje jen v konkrétním prohlížeči (hádáte správně, mluvím o Internet Exploreru), je CSS hack tou nejlepší cestou.

Pokračování textu Přehled CSS hacků

Latte jako od baristky

Latte je šablonovací (templating) systém z českého frameworku Nette (dá se ale použít i samostatně). Jeho nejsilnější vlastností je možnost rozložit celou stránku na sadu menších šablon, ze kterých se pak zpětně stránka poskládá.

Důvodem pro rozdělení stránky na menší části je to, že danou část můžete použít na více místech a změnou jedné šablony pak upravíte několik stránek najednou. Ale i když určitou část nepotřebujete znovu-použít, můžete ji oddělit čistě pro přehlednost.

Pokračování textu Latte jako od baristky

Grid, aneb revoluce tabulkového layoutu

Jak přišel Grid na svět? Když se před pár lety (mezi 2009 – 2012) objevil ve W3C specifikaci CSS Flexbox layout, byl to první náznak toho, že dlouho používaným tabulkovým a plovoucím layoutům odzvonilo. Přesto ale flexbox nedokáže všechno vzhledem k tomu, že je založen na plovoucím uspořádání prvků. Složitější layouty se tak museli řešit vkládáním několika flexboxů do sebe a responzivita na tom byla dost špatně.

Proto se velice záhy rozhodlo W3C pro další nový layout, který by byl přímo zaměřen na vytváření responzivního layoutu – CSS Grid Layout. Bylo to opravdu záhy, poslední working draft (návrh) flexboxu je z října 2012 a první návrh gridu se objevil v listopadu 2012 (ale stejně jako u flexboxu existují i starší návrhy z předchozích let, ze kterých ten konečný čerpá). Na návrzích Flexboxu a Gridu navíc pracovali ti samí lidé, takže se oba pěkně doplňují, místo aby spolu soupeřili.

Grid layout se samozřejmě již nějakou dobu používá, ale zatím je to vždy jen nadstavba nad nějakým tabulkovým nebo plovoucím layoutem, který je obalený sadou CSS tříd pro umístění položek. Příkladem je Bootstrap Grid, který využívá plovoucí kontejnery (float: left) různých šířek umístěné do 12 sloupců.

Do září roku 2016 byl W3C Grid vyvíjen a byl dostupný pouze pro testování ve Firefoxu (options:layout.css.grid.enabled) a Chrome/Opera (flags:experimental Web Platform). Od roku 2017 (přesněji asi od března) by měl být již dostupný pro všechny uživatele, konkrétně ve Firefox 52+, Chrome 57+, Opera 43+ a Safari 10.1.

Internet Explorer 10/11 a Edge 12+ podporují jiný návrh z roku 2011 (známý jako Grid Align) – viz konec tohoto článku. V dubnu 2017 začal Microsoft pracovat na W3C verzi, která je experimentálně dostupná od buildu 16226. Pokud půjde vše dobře, mohl by Edge podporovat W3C grid v průběhu roku 2018.

Pokračování textu Grid, aneb revoluce tabulkového layoutu