Když chystáme web "na slepo" a grafik nám nepřipraví dostatečně obsáhlou textovou stranu, daný problém zpravidla neřešíme. Pokud ovšem vytváříme novou grafiku již existujícího webu, který má dostatek obsahu pro kontrolu, můžeme formátování textů nachystat mnohem lépe. 

První věc, kterou musíme rozhodnout, je odsazování pomocí marginů či paddingů. Setkal jsem se s obojím, ale sám budu vždy preferovat spodní padding oproti hornímu a spodnímu marginu. Marginy mají tu výhodu, že se slijí dohromady, nicméně je to pořád neintuitivní chování, které se musíme v hlavě představit kdykoli, když skládáme libovolné elementy za sebe. 

Proto je za mě lepší vždy a jenom spodní odsazení. Pro * > :last-child pak stačí resetovat na nulu a máme hotovo. 

Jakmile si nastavníme nějaké globální odsazení základních typografických elementů, můžeme se zamyslet nad celkovou strukturou očekávaných článků. Používá klient 2 nadpisy za sebou? Používá klient nadpisy jen jako grafické zdůraznění nebo se jedná o logické celky, které je potřeba oddělit víc? Má klient rád vzdušné stránky, kde není vše namačkáno na sebe? 

Pokud je odpověď na většinu z těchto otázek kladná, stačí nám přidat opravdu jen pár definic, aby se výše uvedené věci začaly dít samy. Tady na blogu to dělám úplně stejně.

Globální definice

Začneme jednoduchou ukázkou kódu. Z ní je na první pohled jasné, že všechny seznamy a nadpisy, které budou natvrdo v šabloně musíme redefinovat. Ale ono se stačí zamyslet nad poměrem: Omezený počet elementů v šablonách vs. libovolný počet html textu, který nám do šablony dodá systém? Nutnost ručně přidávat všechny definice pokaždé, když přidám novou typovou šablonu? Ne, děkuji. Raději si těch pár prvků mimo obsahovou oblast zresetuji sám. 

h1 {padding-bottom:4rem;}

p,
h2,
h3 {padding-bottom:2rem;}

ul, 
ol, 
table {margin-bottom:2rem;}

h4,
h5 {padding-bottom:1rem;}

Mějme základní definice odsazení. 40 pixelů pro nadpis první úrovně, 20 pixelů pro zbytek. Následující kód vyřeší groupování jednotlivých sekcí tak, abychom v administraci nemuseli řešit vůbec nic navíc. (Komponenty, x různých html bloků pod sebou, oddělovače...) 

Logický blok začíná nadpisem

Každý nadpis bude odsazen o dalších 20 (10, 5) pixelů, pokud před ním není jiný nadpis stejné nebo vyšší úrovně. 

.article-detail {

	*:not(h2) + h2 {padding-top:2rem;} 
	*:not(h2):not(h3) + h3 {padding-top:1rem;} 
	*:not(h2):not(h3):not(h4) + h4 {padding-top:0.5rem;} 

}

Je to takhle jednoduché. 

Dvojité odsazení

Použití padding-bottom namísto dvojitého marginu má ještě další výhodu, kterou je automatické zvedání hodnot u prvků typu <table>. Tabulka musí být vždy odsazena marginem. Pokud chceme pro náš příklad zvednout její odsazení na dvojnásob, nemusíme se bát spojení marginu s předchozím prvkem. 

Chceme-li zdůraznit tabulku, která je přesně mezi dvěma odstavci, stačí jednoduše:

p + table {margin-top:2rem;}
p + table + p {padding-top:2rem;}

Spolu s výchozím odsazením, které prvky zdědily z prvního bloku kódu, máme krásných 40 pixelů z obou stran. 

Je to nutné zlo, které člověk musí trpět poměrně často. Ale technologie pokročily, takže se s tím dá poprat velice snadno i bez použití složitých frameworků. Ty buď máte zvládnuté a neřešíte nic, nebo vám činnost spíš zkomplikují. U formulářů to platí dvojnásob.

Základní resety

Relativní jednotky zatím řešit nebudeme. Hezky všechno v pixelech, ať v tom nedělám ještě větší zmatky. 

* {
	border:0;
	margin:0;
	padding:0;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
}
:focus {outline:none;}

button,
input,
textarea,
select {
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
	border-radius:0;
}

Appearance je nejdůležitější vlastnost, které je třeba se zbavit, ať nám to neblbne na telefonech a iOS zařízeních. A pak můžeme úplně v klidu nastavit globální styl pro základní formulářové prvky. Dřív platilo, že hvězdičkový reset na formulářové prvky ne. To už naštěští nějakou dobu nemusíme řešit, takže ušetříme spoustu zbytečností ve stylech.

Nesmíme zapomenout nastavit kompletní vlastnosti fontu. Tohle bohužel mnohé prohlížeče neumí zdědit z body. Stejně tak box-sizing: nemáme-li ho v resetu, je potřeba nastavit pro uvedené elementy. Pro textareu zvedneme výšku a omezíme resize na směr i hodnoty.

body, 
input, 
textarea, 
select, 
button {
	font:400 16px/1.5 Arial,Helvetica,sans-serif;
}

input:not([type="radio"]):not([type="checkbox"]),
select,
textarea {
	display:block;
	color:#000;
	padding:10px 15px;
	height:50px;
	width:100%;
	border:1px solid #e1e1e1;
	/*
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	*/
}

textarea {
	height:200px;
	min-height:100px;
	max-height:1000px;
	resize:vertical;
}

A to je k základním prvkům vše. Všimněte si, že základní pole nemám jako výčet hodnot, ale jako výjimku ze všech. HTML5 nám nabízí mnohem vyšší škálu typů, než jenom [text] a [password]. 

Tlačítko si pak můžeme upravit jakkoli uznáme za vhodné, já ho vykreslím jen jako šedý obdélník. Pod tag <form> ho mám vnořené cíleně, protože grafik nám často naplánuje různě vypadají buttony pro formulář a mimo něj. 

form button, 
form input[type="submit"] {
	cursor:pointer;
	background:#e1e1e1;
	transition:.25s;
	min-width:100px;
	border:0;
	height:50px;
}
form button:hover, 
form input[type="submit"]:hover {
	background:#888;
	color:white;
}

Placeholder

Než nám moderní technologie povolily atribut placeholder, museli jsme výchozí hodnoty složitě měnit JavaScriptem. Nyní je ale vše mnohem jednoduší, snad s výjimkou stylování. Tam malý zádrhel je. Vlastnosti musí být zapsané tak, jak je mám na následující ukázce. Pokud totiž vše zapíšeme za sebe s čárkou, IE Edge nás s tím pošle do háje. Takže pro každý prefix jedna ukončená definice. 

textarea::placeholder,
input::placeholder {color:#e1e1e1;} 

textarea:-ms-input-placeholder,
input:-ms-input-placeholder {color:#e1e1e1;}

input:not([readonly]):not([disabled]):focus,
textarea:not([readonly]):not([disabled]):focus {border-color:#a1a1a1;}

Grafický selecbox

Další problematický prvek je selectbox. V minulosti bylo potřeba na jeho složitější vykreslení povolat JavaScriptovou knihovnu, nyní se však obejdeme bez ní. Pokud ale potřebujeme komplexnější prvky uvnitř drop-down nabídky, čistým stylováním to bohužel nezvládneme. JS knihoven jsem vyzkoušel větší množství, ale nakonec jsem vždy došel k závěru, že je lepší, když si to prostě napíšu sám. Žádná není na 100 % dokonalá. U každé narazíme na nějaké bugy, či události, které neumí. Nejnovější knihovnička mi zabrala asi 3 hodiny, což zhruba odpovídá času, který bych strávil studiem a debugováním nějakého hotového řešení... Často je lepší, když si to člověk napíše sám.

Ale zpět ke stylování klasického selectu. Jediné omezení, které musíme překousnout, je nemožnost upravit samotný drop-down. Jediné, k čemu nás prohlížeče pustí, je velikost písma a barvy. 

Hlavní select se dá ovšem nastylovat se vším všudy, bez jakýchkoli problémů. Pokud stále řešíme IE 11, definici backgroundu je nutné rozepsat, protože IE 11 ji nepochopí, když obsahuje funkci calc(). A já raději použiju calc, než abych naschvál ukládal png obrázek s bílým místem, kvůli marginu.

form select {
	padding-right:50px;
	cursor:pointer;
	background:url(select.png) no-repeat;
	background-position:calc(100% - 15px) 50%;
	background-size:20px auto;
}
form select option {
	font-size:110%;
	color:#013be0;
}
form select option:hover {
	background:#013be0;
	color:white;
}
form select::-ms-expand {
	display:none;
}
form select:focus {
	border-color:#a1a1a1;
	color:black;
	text-shadow:0 0 0 #000;
	font-weight:400;
}

Grafický checkbox a radio

Ani zde není potřeba volat JavaScript a stylovat prvky pomocí nastrčených spanů. Valná většina moderních prohlížečů umí vykreslit základní styly pro checkbox i radio správně, výjimkou budiž jen Internet Explorer 11. Ale ani on není extra pozadu; "škaredě" vykreslí pouze puntík, respektive fajfku při stavu :checked. 

form input[type="radio"],
form input[type="checkbox"] {
	margin:0 15px 0 0;
	font-size:24px;
	width:1em;
	height:1em;
	border:2px solid #e1e1e1;
	border-radius:0;
	display:inline-block;
}
form input[type="checkbox"]:checked {
	border-color:#013be0;
	background:url(checkbox.png) no-repeat 50% 50%/80% auto;
}

form input[type="radio"] {
	border-radius:50%;
	background:url(radio.png) no-repeat -100px 50%/50% auto;
}
form input[type="radio"]:checked {
	border-color:#013be0;
	background-position:50% 50%;
}
form label.radio,
form label.checkbox {
	display:flex;
	align-items:center;
}

Není to vůbec nic složitého: nějaké barvy a obrázky, zarovnání a odsazení, a máme hotovo. Pokud chceme stejně hezké prvky i pro zmiňovaný IE 11, je potřeba přidat pomocné spany, ale i tady se úspěšně vyhneme JS obsluze. Stačí přidat pár CSS definic pro posloupné prvky. To už si ale prohlédněte na přiložené ukázce. 

Závěrem: přístupnost na prvním místě

Na závěr bych ještě rád zmínil jednu věc, kterou vídám v poslední době stále častěji. Mám na mysli různé "cool" efekty, které mají formuláře takříkajíc zkrášlit. Máme label, který je vepsaný přímo přes textové pole a supluje funkci placeholderu. Na focus popisek vyjede nahoru přes definovanou transition. Určitě už jste to někdy viděli. Funkce je to sice pěkná, ale zoufale nepraktická... Problém nastává ve chvíli, kdy nám prohlížeč automaticky jednotlivá pole vyplní. JavaScript totiž neumí univerzálně detekovat tuto událost, a tak se nám může stát, že label je překrytý přes hodnotu v poli. To sice lze vyřešit několika způsoby, ale my bychom si spíš měli položit otázku: proč bych měl tohle vůbec ladit?

Jako uživatel chci formulář přehledný a jednoduchý, jako kodér chci formulář... můžete hádat, jaký. Není formulář v příloze sympatičtější, než nějaká pekelná monstra, co vám třikrát obletí svět, než vás pustí k vyplnění? 

Ukázka: form.html

Pošlu request, dostanu výstup, vepíšu výstup: nejkratší možná cesta, nic víc. Až v závěru článku nastíním, jak by se daná funkcionalita mohla (měla) řešit lépe. Ale věřím, že pro začátek to takhle stačí. 

Co musí být hotové

Abych nemusel rozebírat úplné a naprosté základy, naopak zase předpokládám, že to hlavní už je hotové. Musíme mít výpis článků z databáze. K tomu stránkování. Jak bude vypadat a jak se bude chovat, na tom nezáleží: musí prostě jen fungovat. Také bychom měli mít aspoň minimálně oddělený kontroler od šablony, abychom mohli využít podmíněné tahání jednotlivých bloků stránky. 

Co musíme upravit

V prvé řadě šablonu tak, abychom měli jasně ohraničený cíl, kam se bude vpisovat obsah. Dále kontrolery. Pokud posílám Ajax request na výpis článků, nechci přece zbytečně načítat celé menu nebo novinky někde v pravém sloupci. Přidáme funkci na detekci Ajax requestu, abychom to nemuseli podmiňovat GET proměnnou. (Kterou sice stále využijeme, ale k jinému účelu.) Dále loadovací kolečko: můžeme přidat, nemusíme. Tedy úprava stylů. No a na závěr samozřejmě celá JavaScriptová obsluha. 

Úprava kontrolerů je přímo úměrná složitosti systému, ale tož nemusíme to osekat úplně všechno. Někdy je lepší provést pár operací navíc, než abych podmiňoval každou akci v každém layeru systému, aby pak vznikl nějaký
takovýto kód...

Detekce Ajax requestu

function isAjax() {
	return isset($_SERVER['HTTP_X_REQUESTED_WITH']) && (strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) === 'xmlhttprequest');
}

Příklad načtení obsahu

Jak vyřešit architekturu systému a routování Ajaxových a běžných requestů, o tom dnešní článek také není. Buď vyřešeno máte, nebo se s tím nebudete trápit. Právě takové řešení uvedu v následujícím příkladu. Jednoduchou podmínkou oddělíme volání funkcí respektive metod, které mají být vykonané. Třeba nějak takhle. Pokud bychom tuto úpravu neprovedli, samotný Ajax pak ztratí tak trochu smysl. 

function loadStuff(){
	
	$ajax = Server::isAjax();
	
	loadArticles();
	loadTagsForArticles();
	
	createPaging();
	getPageTitle();
	
	if(empty($ajax)){
		loadCategoryMenu();
		loadArchiveMenu();
		loadTagCloud();
		
		// ...
	}

	include_once('template.phtml');

}

Šablona

V šabloně potřebujeme vyřešit reálné zobrazení. Určitě je jednodušší dostat celý kód a někam ho fláknout, než parsovat bůhvíjaké pole a někam ho pochybně generovat. Pořád se bavíme o webu náročnosti toho mého, nikoli o komplexní JavaScriptové aplikaci. Takže z šablony vyjmeme části, které se měnit nebudou. Včetně containeru, kam se vloží výsledek requestu. 

<?php
	$ajax = isAjax();
?>
<?php if(empty($ajax)){ ?>
	
	<?php include_once('_header.phtml'); ?>
	
	<div class="article-list">
		<div class="js-ajax-main-container">

<?php } ?>
		
		<?php // foreach co vypise clanky ?>
		
		<?php // strankovani ?>
	
<?php if(empty($ajax)){ ?>	
		
		</div>
		<div class="ajax-loader js-ajax-loader hidden"><div class="circle"></div></div>
	</div>

	<?php include_once('_footer.phtml'); ?>
	
<?php } ?>

Styly

Než se podíváme na nejdůležitější část kódu, JavaScript, sfoukneme ještě styly. Přidáme si loadovací kolečko tak, aby bylo vždy vycentrované ve viditelné oblasti a zároveň překrývalo celý container. Samozřejmě je potřeba, aby náš "js-ajax-main-container" byl obalen ještě jediným divem s relativní pozicí, aby se absolutní chytila správně. Pozici kolečka pak zařídí výška relativně k viewportu a position: sticky.  (Fixní alternativa je fallback pro IE11.) 

.hidden {display:none !important;}

.article-list {position:relative;}

.ajax-loader {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:20000;
}

.ajax-loader .circle {
	position:fixed;
	position:sticky;
	top:0;
	left:0;
	width:100%;
	height:100%;
	max-height:100vh;
	background:rgba(255,255,255,0.75) url(loading.gif) no-repeat 50% 50%/150px auto;
}

JavaScriptová obsluha

A to nejdůležitější na závěr. Kontroler máme upravený, načítá jen nutná data. Šablona zobrazí přesně to, co potřebujeme. Takže teď se jenom napojíme na stránkování a namísto přechodu na cílovou URL provedeme request. Ještě připomenu, že stránkování je také potřeba přepsat po requestu, protože pokud ho například vypisujeme nějak takto: 

 1 ... 7 | 8 | 9 ... 12

samotné přehození active class nestačí. A opět je jednodušší vepsat celý HTML kód, než tuhle hrůzu generovat přes JS. Když už ji umíme vypsat přes PHP. Což také znamená, že po requestu musíme znovu namapovat akce na odkazy. 

var hookActions = function(){
	$('.paging').find('a').on('click touch', function(){
		var url = $(this).attr('href');
		contentRequest(url, false);
		return false;
	});
	
	// plus vse ostatni, co se nejak napojuje na elementy ve vypisu clanku
};

hookActions();

Samotná funkce contentRequest je mega easy. Pošle request, dostane html výstup, přepíše innerHTML a konec. Ale abychom si to udělali víc cool a sexy, provedeme i změnu URL bez jejího znovunačtení. K tomu slouží metoda history.pushState. Takže pokud kliknu např. na stránku 2, stisknu F5, už na ní zůstanu. A nemusím to ohýbat přes kotvy a podmíněné volání funkce. Server prostě vrátí normální output. 

var loader = $('.js-ajax-loader');
var target = $('.js-ajax-main-container');
var currentUrl = window.location.href.split('#')[0];

var contentRequest = function(url, historyMove){
	loader.removeClass('hidden');
	
	var requestUrl = url + (url.indexOf('?')+1 ? '&' : '?') + 'ajax=1';
	
	$.ajax({
		url: requestUrl
		success: function(data){
			target.html(data);
			
			if(!historyMove){
				$('html,body').stop(true,true).animate({ scrollTop: 0 }, 0);
				history.pushState(null, null, url);
			}
			
			currentUrl = url;
			
			hookActions();
			loader.addClass('hidden');
		},
		error: function(){
			window.location.href = url;
		}
	});
};

Jenže když už jednou šáhnu na history.pushState, měl bych vyřešit i nativní funkce prohlížeče zpět a vpřed. Pokud uživatel přijde například z Googlu na druhou, třetí stránku výpisu, párkrát si dole klikne na paging, tlačítko zpět by ho vrátilo zase na Google. Protože reálně se po stránce nepohyboval. Ale to lze vyřešit přidáním jediné události: 

$(window).bind('popstate', function(e){
	var nextUrl = window.location.href.split('#')[0];
	
	if(nextUrl != currentUrl){
		contentRequest(window.location.href, true, true);	
	}
	
	currentUrl = nextUrl;
});

Tady jsem měl trochu problém s odpálením popstate při změně window.location.hash. Přes hash totiž zaměřuji jednotlivé komentáře, a on se na to popstate také chytá. Proto parsování url a jedna malá podmínka: otestuji, jestli se změnila celá adresa nebo jenom kotva. 

V tuto chvíli je vám také určitě jasné, k čemu slouží druhý parametr u funkce contentRequest: jakmile se hýbu v historii, nebudu znovu vyvolávat její změnu, nebo bych se z toho zacyklil. 

A co se vlastně stane při vypnutém JavaScriptu? No přece to samé, co před nasazením Ajaxu. Stránka se načte přes normální request. Na závěr ještě přiložím link na jednotlivé části kódu v samostatných souborech, pokud byste měli zájem si je uložit. 

Lepší řešení

JSON, samozřejmě. Pořád budu vracet celý HTML kód, ale díky poli dostanu možnost měnit třeba titulek. Nebo si do patičky zapsat čas trvání reqeustu. Pro účely vývoje. Ale to už bych nemohl článek oštítkovat jako "Základy", navíc by šlo o příliš individuální úpravy, které těžko zobecním jedním tutoriálem.  

Také bychom mohli přidat rozdílné chování pro telefon: stránkování se nahradí jenom za odkaz "Následující" a funkce obsah přidá, nepřepíše. Ale to už by pro změnu bylo na nový článek. A protože druhý díl už mám nachystaný a chci v něm ukázat funkční miniaplikaci, o mobilním stránkování třeba zase jindy.  

func.php
loadstuff.php
template.php
style.css
main.js

ZIP archív ke stažení

HTML kód

Mějme následující HTML kód. Ten může reprezentovat například výpis produktů na e-shopu, výpis novinek nebo čehokoli jiného. Container obsahuje prvky .item zakončené vyčištěním floatů.

<div class="itemlist">
	<div class="item"></div><div class="item"></div><div class="item"></div>
	<div class="item"></div><div class="item"></div><div class="item"></div>
	<div class="item"></div><div class="item"></div><div class="item"></div>
	<div class="cleaner"></div>
</div>

Nth-child: základ

Pro ty z nás, kteří si v životě nezapamatují, jestli odd nebo even je lichá nebo sudá, existuje velice jednoduchý vzorec. Každý druhý prvek je samozřejmě sudý, při odečtení jedničky od sudého čísla vyjde číslo liché.

.itemlist .item:nth-child(2n) {background:red;}  
.itemlist .item:nth-child(2n-1) {background:blue;}

Rozsah: od začátku po N-tý

Často potřebujeme pár prvních elementů odlišit od těch ostatních. Takto zvýrazníme první 3.

.itemlist .item:nth-child(-n+3) {background:blue;}

Rozsah: od N-tého dál

Pokud potřebujeme opak výše uvedeného, učiníme tak následovně.

.itemlist .item:nth-child(n+4) {background:blue;}

Rozsah: průnik definic

.itemlist .item:nth-child(-n+6):nth-child(n+4) {background:blue;}

Nth-child: kdy to nefunguje

Při použití n-tého potomka je důležité myslet na jednu věc: pseudo-selektor se nevztahuje k CSS třídě, u které je napsán. Takže pokud někam mezi divy vložíme například nějaké <br>, celý princip pořadí prvků se rozbije.

Následující zápisy jsou ekvivalentní:

.itemlist .item:nth-child(2n) {background:blue;}  
.itemlist :nth-child(2n) {background:blue;}

Proč se tedy mnohem častěji setkáme s podobou zápisu na prvním řádku než na druhém? Odpověď je jednoduchá: přece aby bylo jasné, co tím autor myslel. K čemu přesně je definice myšlena. Druhý řádek proto považuji za monstrózní prasárnu.

Nth-of-type

Nth-of-type částečně supluje chování, kterého většinou chceme u podobných výpisů dosáhnout. Na rozdíl od nth-child, která referuje na N-tý prvek DOMu nezávisle na tom, o jaký prvek se jedná, nth-of-type se vztahuje na tagName. Takže když si rozšíříme první příklad o nějaké další prázdné prvky, fungovat to bude.

<div class="itemlist">
	<div class="item"></div><div class="item"></div><div class="item"></div><span></span>
	<div class="item"></div><div class="item"></div><div class="item"></div><span></span>
	<div class="item"></div><div class="item"></div><div class="item"></div><span></span>
	<span class="cleaner"></span>
</div>

Pokud selektor napojíme na .item, zacílí právě divy. Ostatní tagy stejného rodiče ignoruje. Samozřejmě v takovém případě nechceme čistící prvek jako div, nýbrž jako span.

.itemlist .item:nth-of-type(2n) {background:blue;}

Nth-last-of-type

Má stejný princip jako u předchozího selektoru, akorát prvky bereme odzadu. Tady je opravdu nutné dbát na jména tagů, protože zobrazení se pak může různě přeskakovat či neaplikovat vůbec. Jako příklad uvedu HTML kód se spoustou parazitních tagů, kterým zobrazení definovat nechceme.

<div class="itemlist itemlist_6">
	<div class="item"></div><div class="item"></div><div class="item"></div><br>
	<div class="item"></div><div class="item"></div><div class="item"></div><br>
	<div class="item"></div><div class="item"></div><div class="item"></div><br>	
	<span class="cleaner"></span>
</div>

.itemlist .item:nth-of-type(3n+1) {background:blue;}
.itemlist .item:nth-last-of-type(1) {background:red;}
.itemlist .item:nth-last-of-type(2n) {background:green;}

První, čtvrtý a sedmý prvek bude modrý. Poslední bude červený. A každý sudý odzadu zase zelený, což samozřejmě přebije modré pozadí prvku čtvrtého :-)

N-tý prvek v závislosti na rozlišení

Na závěr si dáme trochu responzivity. Produktové výpisy s různým počtem prvků podle rozlišení dnes najdeme na každém druhém webu. Možností nastylování je spousta a já bych na závěr představil jednu z nich, samozřejmě za využití nth-of-type. Abychom nemuseli vše 10x redefinovat, omezíme definice rozlišením.

Nejdřív budou na stránce 4 prvky vedle sebe, pak 3 a na závěr 2. A jako malý bonus obarvíme každý druhý řádek jinou barvou. (Tedy skupinu záznamů na daném řádku.) HTML kód bude opět stejný, jako v první ukázce, akorát tam toho bude trochu víc.

<div class="itemlist">
	<div class="item"></div><div class="item"></div><div class="item"></div>
	<div class="item"></div><div class="item"></div><div class="item"></div>
	<div class="item"></div><div class="item"></div><div class="item"></div>
	<span class="cleaner"></span>
</div>

Každý 4. element bude mít zresetovaný pravý margin, každý 4+1. zresetuje float. Každý 5., 6., 7. a 8. prvek bude zvýrazněný. Skrz omezení na plus a mínus bohužel komplexnější funkci nenapíšeme, a tak je potřeba to takhle vylistovat za sebou.

.itemlist {max-width:900px;margin:0 auto;}
.itemlist .cleaner {clear:both;}
.itemlist .item {width:24.25%;margin:0 1% 10px 0;float:left;height:50px;background:grey;}

@media all and (min-width: 1201px){
	.itemlist .item:nth-of-type(4n) {margin-right:0%;}
	.itemlist .item:nth-of-type(4n+1) {clear:both;}
	
	.itemlist .item:nth-of-type(8n),
	.itemlist .item:nth-of-type(8n-1),
	.itemlist .item:nth-of-type(8n-2),
	.itemlist .item:nth-of-type(8n-3) {
		background:blue;
	}
}

@media all and (min-width: 601px) and (max-width: 1200px){
	.itemlist .item {width:32.666%;}
	.itemlist .item:nth-of-type(3n) {margin-right:0%;}
	.itemlist .item:nth-of-type(3n+1) {clear:both;}
	
	.itemlist .item:nth-of-type(6n),
	.itemlist .item:nth-of-type(6n-1),
	.itemlist .item:nth-of-type(6n-2) {
		background:blue;
	}
}

@media all and (max-width: 600px){
	.itemlist .item {width:49.5%;}
	.itemlist .item:nth-of-type(2n) {margin-right:0%;}
	.itemlist .item:nth-of-type(2n+1) {clear:both;}
	
	.itemlist .item:nth-of-type(4n),
	.itemlist .item:nth-of-type(4n-1) {
		background:blue;
	}
}

Pokud jsme nuceni jednotlivé prvky cílit nějakým šíleným kaskádovým zápisem, lze stejnou definici zapsat i negací bez nutnosti opakovat 4x pod sebou ".itemlist .item". Ale to už trochu zavání výstižným "WTF" (kde počet WTF za minutu je neoficiální ukazatel kvality kódu).

Odkazy na ukázky najdete na konci článku.

html.project-237 body.default-article.has-productlist 
 .container.dark-bg .central-area .itemlist 
 .item:not(:nth-of-type(8n+1)):not(:nth-of-type(8n+2)):not(:nth-of-type(8n+3)):not(:nth-of-type(8n+4)){
	background:blue;
}

Ukázky uvedených řešení

Vše, co jsme v dnešním článku vyzkoušeli, si můžete prohlédnout na následujících odkazech. Druhý příklad pak reaguje na resize okna prohlížeče.

:nth-child, :nth-of-type 1. - 6. příklad
:nth-of-type responzivní ukázka

Pokud se vám metoda fade in/fade out nelíbí, v druhé části článku se můžete podívat, jak slider upravit na posuv ze strany na stranu. Jak potom dostat obě metody do jediné funkce, to si můžete zkusit sami; funkce to budou opravdu jednoduché a jejich úprava nebude nijak složitá. JavaScript zde bude ještě jednodušší než styly; takže asi taková bude náročnost. Ale i tak si všechno krok po kroku projedeme. Se vším nám pomůže knihovna jQuery.

První slider

1. HTML

Začneme jak jinak, než od HTML kódu. Jak vidíte, opravdu ho není hodně. První důležitá věc je resizovací obrázek: díky němu bude celý objekt pěkně responzivní, díky němu můžeme použít všude absolutní pozice. Je to jenom průhledné png v rozměrech 300x200 pixelů, takže celé to bude vždy v poměru 3:2. Šipky jsou pak samozřejmě ovládací prvky. Prvnímu elementu rovnou nastavíme třídu active, která bude mít důležitou úlohu nejen ve stylech, ale také v samotné obsluze. Toť vše. Jednotlivých prvků ".item" tam může být, kolik jen budeme potřebovat.

<div class="slider">
	<img src="slider_resizer.png" class="resizer" alt="" />
	<a class="shipka shipka-left" href="javascript:;"></a>
	<a class="shipka shipka-right" href="javascript:;"></a>
	<div class="inner">
		<div class="item active" style="background-image:url(obrazek_1.jpg);">
			<h3><a href="" title=""><span>Nadpis 1</span></a></h3>						
		</div>
		<div class="item" style="background-image:url(obrazek_2.jpg);">
			<h3><a href="" title=""><span>Nadpis 2</span></a></h3>						
		</div>
		<div class="item" style="background-image:url(obrazek_3.jpg);">
			<h3><a href="" title=""><span>Nadpis 3</span></a></h3>						
		</div>
	</div>
</div>

2. CSS

Styly zde samozřejmě nebudu uvádět úplně všechny, ale jenom ty nejdůležitější, sloužící ke správnému zobrazení a funkcionalitě. A přijde řeč i na transition. Právě tato vlastnost nám bude celou mašinu pohánět, navíc se postará i o pěkný hover efekt.

.slider {position:relative;}
.slider .resizer {display:block;margin:0;width:100%;}

.slider .inner {position:absolute;width:100%;height:100%;top:0;left:0;overflow:hidden;}
.slider .inner .item {
	position:absolute;top:0;left:0;padding:0;margin:0;width:100%;height:100%;
	z-index:0;opacity:0;transition:300ms; -webkit-transition:300ms;
	background-position:50% 66.6%;background-size:100% auto;
}
.slider .inner .item.active {z-index:10;opacity:1;}
.slider .inner .item:hover {background-size:105% auto;}

Zde už by od pohledu mělo být jasné, jak to celé dopadne. Hlavnímu divu dáme relativní pozici, čímž můžeme vše uvnitř roztáhnout na 100% šířky i výšky, takže každý jeden slide bude přizpůsobený našemu resizovacímu obrázku. Když se podíváte na definice prvku ".item:hover", uvidíte, že background-size, tedy velikost pozadí se také bude měnit. A právě díky transition to bude plynule. Přidáním třídy ".active" se pak změní průhlednost z 0 na 1 a z-index, což bude změna viditelného slidu. Další vlastnosti zde popisovat už nebudu, jedná se o totiž pouze o doplňkové designové prvky, o kterých tento článek není.

3. JavaScript

Ani JavaScriptu nebude mnoho. K čemu zbytečně stahovat megové knihovny na carousely, které si stejně nedokážeme přizpůsobit, protože k tomu chybí dokumentace? K čemu používat monstrózní řešení, když tohle je otázkou 15 minut?

Máme:

• 2 parametry
• 1 kontrolu
• 2 funkce na posun doleva a doprava
• 2 napojení těchto funkcí
• 1 automatické spuštění

function MiniSlider(slider_element,auto_time){
	var autoInt = null;
	
	if(!slider_element.find('.inner').size()){
		return false;  
	}
	
	var parent = slider_element.find('.inner');
	parent.find('.item:first-child').addClass('active');
			
	var moveItRight=function(){
		var nxt = parent.find('.item.active').next();
		if(!nxt.size()){
			nxt = parent.find('.item:first-child');
		}
		parent.find('.item.active').removeClass('active');
		nxt.addClass('active');
	};
	
	var moveItLeft=function(){
		var prv = parent.find('.item.active').prev();
		if(!prv.size()){
			prv = parent.find('.item:last-child');
		}
		parent.find('.item.active').removeClass('active');
		prv.addClass('active');
	};
	
	slider_element.find('.shipka.shipka-right').click(function(){
		clearInterval(autoInt);
		moveItRight();
		return false;
	});
	
	slider_element.find('.shipka.shipka-left').click(function(){
		clearInterval(autoInt);
		moveItLeft();
		return false;
	});
	
	autoInt = setInterval(function(){
		moveItRight();
	},auto_time);
}
	
new MiniSlider($('.slider'), 5000);

Jak to tedy celé funguje?

Úplně snadno. Funkce najde prvek s třídou active a hledá prvek následující (respektive předcházející). Pokud ho nenajde, vezme první (respektive poslední) element. Jednu třídu active odstraní, druhou přidá. Tím se změní průhlednost a transition nám z toho udělá plynulý efekt. Toť vše. Zde se můžete podívat na výsledek:

Ukázka: slider_sample.html
ZIP ke stažení: slider.zip

Druhý Slider

V druhé ukázce si slider trochu upravíme tak, aby objekty posouvaly ze strany na stranu. Na to mám sice hotové už poměrně komplexní řešení, to zde ale prezentovat nemohu. Navíc je to dost šílený výtvor a já raději píšu o věcech jednoduchých.

Můžeme nastavit vnitřnímu divu šířku podle počtu divů a posouvat jenom left či right vždy o jednu obrazovku. Na začátek a konec bychom pak museli zkopírovat poslední a první slide a navíc počítat, kdy je slider na konci a přehodit ho zase na začátek. Toto řešení je dobré v tom, že budeme mít slider nachystaný na větší počet různých chování, ale tím to bude pak složitější.

Jenže my to uděláme jinak, jednodušeji. Vždy jenom zaměříme další prvek co je na řadě, tento a aktuální položíme vedle sebe a pak oba posuneme. Po ukázce kódu to bude asi trochu jasnější. Toto řešení ale přinese jistá drobná úskalí, ale to si popíšeme až pod ukázkou JS kódu.

1. CSS

HTML kód zůstane, podíváme se tedy, co se změnilo ve stylech. Tam bude jiná definice prvku ".item". Transition omezíme pouze na pozadí, zbytek už bude probíhat na úrovni JavaScriptu. Prvkům nastavíme výchozí pozici o jednu obrazovku doleva, prvnímu pak left:0. Tím jsme ve stylech hotovi.

.slider .inner .item {
	position:absolute;top:0;left:-100%;padding:0;margin:0;width:100%;height:100%;
	z-index:0;transition:background 300ms; -webkit-transition:background 300ms;
	background-position:50% 66.6%;background-size:100% auto;
}
.slider .inner .item.active {}
.slider .inner .item:first-child {left:0;}
.slider .inner .item:hover {background-size:105% auto;}

2. JavaScript

Třídě přidáme další parametr, kterým bude délka animace. Už totiž není nastavená ve stylech. Dále už jenom rozšíříme funkce "moveLeft" a "moveRight". Zde už transition nebude ovládat posuv, zde využijeme klasické metody jQuery.animate(). Zjednodušeně to bude fungovat asi takto: před spuštěním posuvu seřadíme aktuální a následující vedle sebe a potom oba posuneme. Od směru se samozřejmě odvíjí souřadnice "left". Takto to zní jednoduše (a ono také je), ale jsou tu dvě věci, na které je potřeba myslet. Dřív, než budu cokoli přehazovat a posouvat, musím vše poctivě zresetovat. Nastavím správné pozice, z-indexy, stopnu animace. Tím ošetřím potenciální zběsilé klikání na šipku.

Další záludnost je pak samotný průběh dvou animací ve stejný okamžik: často se totiž stane, že se jedna z nich o pár milisekund zpozdí - výsledkem je pak takové bílé probliknutí mezi obrázky. Na řešení půjdeme od lesa: stačí prostě odjíždějící slide opozdit. Člověk to ani nepostřehne a my se zbavíme se nežádoucího efektu.

function MiniSlider(slider_element,auto_time,anim_time){
	
	var moveItRight=function(){
		var act = parent.find('.item.active');
		var nxt = parent.find('.item.active').next();
		if(!nxt.size()){
			nxt = parent.find('.item:first-child');
		}
		
		parent.find('.item').css({zIndex:0,left:'100%'}).stop(true,true);
		
		act.stop(true,true).css({zIndex:10,left:0});
		nxt.stop(true,true).css({zIndex:10});
		
		act.animate({left:'-100%'},anim_time+10).removeClass('active');
		nxt.animate({left:0},anim_time).addClass('active');
	};

	var moveItLeft=function(){
		var act = parent.find('.item.active');
		var prv = parent.find('.item.active').prev();
		if(!prv.size()){
			prv = parent.find('.item:last-child');
		}
		
		parent.find('.item').css({zIndex:0,left:'-100%'}).stop(true,true);
		
		act.stop(true,true).css({zIndex:10,left:0});
		prv.stop(true,true).css({zIndex:10});
		
		act.animate({left:'100%'},anim_time+10).removeClass('active');
		prv.animate({left:0},anim_time).addClass('active');
	};

}
	
new MiniSlider($('.slider'), 5000, 500);

A máme hotovo. Celá funkce je na pár desítek řádků, snadno pochopitelná, snadno rozšířitelná. Netřeba stahovat gigantické knihovny. Na závěr bychom ještě mohli obě třídy sloučit tak, aby další parametr určoval, jaký typ efektu bude uplatněn. To už ale nechám na vás, ať se také něco naučíte sami :-)

Ukázka: slider_sample.html
ZIP ke stažení: slider_mover.zip

Dnešní článek bude takový úvod, abyste se s vlastností mohli seznámit, pokud ji ještě neznáte. V druhém článku bych pak ukázal využití v praxi: napíšeme si jednoduchý slider (carousel), který rozhýbe pouze změna třídy. Transition má 4 různé vlastnosti, které lze zapsat pod její definici. Povinný je ale pouze čas.

transition: animovaná vlastnost, délka, efekt, zpoždění

Tento zápis je ale zbytečně krkolomný a špatně zapamatovatelný. Navíc animovanou vlastnost většinou ani uvádět nechci, protože pak by se mi animovala pouze jedna vlastnost - nikoli všechny, které redefinuji.

Podívejme se na následující ukázku. Pouhou změnou třídy docílíme plynulé změny barvy, velikosti pozadí či šířky elementu. Jediný JavaScript na ukázkové stránce je změna třídy s timeoutem jedné vteřiny:

Test animace

.color-animate {background-color:red;color:white;transition:500ms; -webkit-transition:500ms;}
.color-animate:hover {background-color:green;color:black;}

Podpora

Na tabulku podpory se můžete podívat na této stránce. Pokud ji náhodou nějaká verze prohlížeče podporovat nebude, trápit nás to nemusí... Efekt jen proběhne okamžitě. Definici s -webkit- prefixem využijeme pouze pro Safari. Chrome už je naštěstí rozumný prohlížeč a hackovat ho není třeba. Stejně tak žádné -moz- prefixy uvádět nemusíme.

Kdy transition a kdy JavaScript

Transition je vlastnost stylů, tedy je potřeba ji podle toho i používat. Všude tam, kde definuji nějaký vzhled: hovery tlačítek, boxíků, jednorázové změna vzhledu a tak dále, a tak dále. V žádném případě bych transition nepoužíval na složité operace, kde se mění několik vlastností dohromady včetně rozměrů a pozic dohromady. To už je uživatelský zásah do stránky, který by měl dle logiky věci obsloužit JavaScript. A také prohlížeč by vás neměl rád...

Už ten slider, který v pokračování článku představím je tak trochu na hraně, ale měním jenom jediný atribut. Navíc i pár řádků JS ušetřím.Takže ve zkratce? Dělejte s tím jednoduché věci. Například na tomto webu mám 100ms na hlavní navigaci (změna pozadí), když se podíváte doprava na výpis mikročlánků, tak hover šipeček i jejich samotné zobrazení také řeším animací. Takže tak.

Samotnému layoutu o dynamické šířce se věnovat nebudu; dnes budu předpokládat, že toto už umíte. Widgety v různé podobě jsou nyní vcelku populární záležitost, jenže jak se to má člověk naučit, když článků je pomálu.

Úvodní stránky s boxíky různých velikostí, které se přizpůsobují šířce prohlížeče či dokonce i zařízení jsou stále populárnější. Za tím účelem vznikla i spousta frameworků, které problematiku vyřeší za nás. Hotová řešení přináší kromě výhod i řadu nevýhod.

• Nemáme přehled, co se děje na pozadí.
• Opravy možných chyb se mohou natáhnout do hodin práce.
• Bývá těžké modifikovat výstup, pokud chcem zobrazení odlišné od autorova záměru.

Sám jsem strávil mnoho času zběžným studiem a testováním různých existujících frameworků, které jsem našel, ale právě 3 zmíněné body mě stejně přiměly napsat si to sám. K čemu složité sofistikované řešení, když můžeme použít vlastní, jednoduché, kde máme 100% kontrolu nad každám řádkem kódu. Jedno takové řešení dnes představím.

Ukázka

Takto nějak mohou být rozvržené widgety na úvodní stránce prezentace.

• Mezera mezi boxy bude v pixelech a musí být snadno nastavitelná.
• Každý box se při změně šířky okna přizpůsobí tak, aby byly zachovány poměry.

Výše uvedené bohužel žádný mnou testovaný framework neuměl, a tak mi nezbylo nic jiného, než se pustit do kódování.

Nyní se podívejte na následující odkaz: boxes_ukazka1.html

Na ukázce vidíme už připravenou mřížku, která se chová přesně tak, jak potřebujeme.

Jak toho docílit?

Využijeme jedné z chytrých vlastností obrázku, a to, že při změně jednoho rozměru se dopočítá druhý (pokud není definován). Takže ano, koukáme na čtvercové a obdélníkové obrázky, ale ne, nejsou to jenom obrázky. Každý z boxů má šířku 20% rodiče, tedy dynamickou. V něm je vložený jeden průhledný png obrázek, který se stará o resize. Div pro vlastní obsah se absolutně napozicovaný s šířkou i výškou 100%, takže vyplní celý prostor.

Abychom ale mohli naspat height:100%; width:100%; padding:10px;, musíme využít CSS vlasnosti box-sizing: border-box;. Ta říká, že rámeček i padding nebudou přičteny k šířce, ale budou počítány tzv. dovnitř. 

HTML

<div class="box size2x2">
	<img class="resizer" src="box-2-2.png" alt="" />
	<div class="inbox">
		<div class="data">
		
		</div>
	</div>
</div>

CSS

.box {float:left;position:relative;overflow:hidden;}
.box.size1x1 {width:20%;}
.box.size2x1,
.box.size2x2 {width:40%;}
.box .resizer {width:100%;height:auto;margin:0;display:block;}
.box .inbox {width:100%;height:100%;box-sizing:border-box;padding:10px;position:absolute;top:0;left:0;overflow:hidden;}
.box .inbox .data {position:relative;width:100%;height:100%;background:green;}

První div určuje vnější obal boxu. Průhledný obrázek zajistí správné chování na resize. První vnořený div je container pro odsazení mezi boxy: padding 10 pixelů ze všech stran nám vytvoří 20px mřížku. A nakonec poslední vnořený div je samotný obsah - to, co vidíte zeleně vybarvené.

Responzivita

Responzivita nedefinuje pouze dynamickou šiřku sloupců, ale také změnu zobrazení na předem určených zlomových bodech. Takže při menším rozlišení zobrazíme pouze 4 boxy vedle sebe (namísto pěti) a pro rozlišení nejnižší třeba jenom 2.

Prohlédněte si druhou ukázku a zkuste zužovat okno prohlížeče: boxes_ukazka2.html

K tomu využijeme CSS media query, které upraví vlastnosti pro všechna rozlišení nižší než definovaná hodnota.

@media all and (max-width: 840px){
	.box.size1x1 {width:25%;}
	.box.size2x1,
	.box.size2x2 {width:50%;}
}

@media all and (max-width: 640px){
	.box.size1x1 {width:50%;}
	.box.size2x1,
	.box.size2x2 {width:50%;}
	.box .inbox {padding:5px;}
}

Při rozlišení 840 pixelů nebo menším bude malý box čtvrtina a velký box polovina obsahu. Při rozlišení 640 pixelů nebo měnším už budou vždy maximálně 2 vedle sebe, větší box bude roztažený na celou šířku. Zde také můžeme zmenšit rozestupy na 10 pixelů.

Vlastní obsah boxů

Na závěr se podívejte na třetí ukázku: boxes_ukazka3.html

Zelenou jsem vyměnil za trochu příjemnější barvu, přidal základní styly na formátování textu a hurá, už to začíná vypadat jako web.

Zobrazení na mobilních zařízeních: meta name=viewport

Abychom docílili správného zobrazení na mobilních telefonech a tabletech, je potřeba přidat do hlavičky ještě následující meta tag:

<meta name="viewport" content="width=device-width, user-scalable=yes" />

Co přesně dělá, jaké jsou způsoby jeho využití zde ale uvádět nebudu, protože to by bylo na další celý článek. Ve zkratce: díky němu to bude fungovat tak, jak má :-) Pokud si chcete o využítí meta tagu viewport přečíst něco více v češtině, mohu doporučit například tento článek na ječas.cz.

Šipky pomocí kaskádových stylů

Šipky různých barev a velikostí najdeme dnes téměř na každém webu. Zvyšují přehlednost a obecně se těší oblibě grafiků. Jako nejsnazší řešení ve smyslu "hlavně ať už to mám hotové" se nabízí jednoduše uložit šipku do obrázku a nastavit na background-image odkazu. Jenže takový postup se nám dříve nebo později vymstí. Pamatuji si projekt, kde bylo navrženo asi pět různých barevných modifikací šipky, každá ve dvou velikostech. Nebyl čas ani prostor na experimentování, a tak jsem si vše uložil do png. Web byl hotový a začlo ladění pro mobilní zařízení. A můj domeček z šipek se rozbil. Mít tehdy trochu více času, vyřešil bych zvýraznění odkazů jako nyní, pouze přes styly.

Nejdříve se podíváme na ukázku: sipky.html

Na první pohled se může zdát, že je tam toho kódu trochu hodně, jenže tady se díváme na řešení, které je nachystané pro copy+paste na další projekt.

Při stylování využijeme pseudo-třídu *:before a *:after, díky které nebudeme muset zanořovat žádné další spany či podobný nepořádek; HTML kód bude čistý. Samotnou šipku pak vytvoříme rámečkem, a to kombinací border-color a border-width. Při správné definici barvy respektive šírky pro rámeček horní / pravý / spodní / levý pak vznikne trojúhelník.

Jednoduchá šipka

a.shipka-next {display:inline-block;color:#007bff;}
a.shipka-next:after {width:0;height:0;content:' ';display:inline-block;margin-left:5px;
	border-style:solid;
	border-width:5px 0 5px 5px;
	border-color:transparent transparent transparent #007bff;
}

Úplná šipka

Pro celou šipku využijeme oba pseudo-elementy, z nichž jeden bude trojúhelník přes rámečky a druhý pouze vybarvený obdélník.

a.shipka-next-adv {display:inline-block;position:relative;color:#ff0022;margin-right:18px;}
a.shipka-next-adv:before {content:' ';position:absolute;top:50%;right:-12px;margin:-2px 0 0 0;height:4px;width:7px;background:#ff0022;}
a.shipka-next-adv:after {content:' ';position:absolute;top:50%;right:-16px;margin:-5px 0 0 0;width:0;height:0;
	border-style:solid;
	border-width:5px 0 5px 5px;
	border-color:transparent transparent transparent #ff0022;
}

Hover

Změna barvy na hover je pak velice jednoduchá. Jenom změníme color, border-color a background-color. U border-color pak samozřejmě pouze ten směr, který je nadefinovaný pro danou šipku. (Pořadí je horní - pravý - spodní - levý, stejně jako u marginu či paddingu).

a.shipka-next:hover {color:#0000b3;}
a.shipka-next:hover:after {border-left-color:#0000b3;}

a.shipka-next-adv:hover {color:black;}
a.shipka-next-adv:hover:before {background:black;}
a.shipka-next-adv:hover:after {border-left-color:black;}

Generátor CSS tvarů

Na chvíli se ještě vrátím k šipkám. Pamatovat si, jak přesně nastavit border-color a border-width abychom docílili patřičného tvaru není úplně v lidských silách, ale naštěstí existuje chytrý generátor, který styly vytvoří za nás. Stačí zazáložkovat a ušetříme si spoustu času při kódování grafiky.

CSS triangle generator

Pokud by nám trojúhelníky nestačily, můžeme použít některý z příkladů na stránkách "The Shapes of CSS". Space Invader sice není něco, co bychom chtěli mít na firemním webu, ale vědět, že i takového zobrazení lze docílit se někdy může hodit :-)

The Shapes of CSS

Font Awesome

Font Awesome je písmo vektorových ikon, díky kterému můžeme mít stránky zase o něco lepší. Opět nám ušetří hromady obrázků, kde za použití CSS a knihovny piktogramů dostaneme přístup k rozumnému množství ikonek. Takové ty jako email (obálka vedle odkazu), telefon (ikonka vedle telefonu), uživatel (človíček vedle odkazu na profil) a spoustu dalších.

Na této url si můžeme stáhnout celý balík včetně předdefinovaných tříd pro CSS a samotného fontu: fortawesome.github.io/Font-Awesome/. Výchozí použití je poměrně jednoduché, podíváme se na seznam dostupných ikonek a danému elementu nastavíme tu správnou třídu: astronautweb.co/snippet/font-awesome/.

Font Awesome @ GitHub
Font Awesome icon list

Doporučené použití

Na výše uvedených odkazech najdeme vše, co je potřeba pro nasazení Font Awesome. Balík také obsahuje i poměrné velké CSS se všemi třídami a zde začínají problémy. Sám nerad používám hotová řešení, kde nemám jistotu, že se mi někde něco nerozbije... Přeci jen pokud se nejedná o jQuery, na kterou se lze spolehnout, nikdy nemáme jistotu, že se nějaké definice nezačnou hádat. Proto doporučuji zjednodušenou implementaci.

Nejdříve nadefinujeme font:

@font-face{
	font-family:'FontAwesome';
	src:url(fonts/fontawesome-webfont.eot);
	src:url(fonts/fontawesome-webfont.eot?#iefix) format('eot'),
		url(fonts/fontawesome-webfont.woff) format('woff'),
		url(fonts/fontawesome-webfont.ttf) format('truetype'),
		url(fonts/fontawesome-webfont.svg#fontawesome-webfont) format('svg');
	font-weight:normal;
	font-style:normal;
}

A následně si nastavíme pouze ty třídy, které reálně využijeme:

.awesome-ico:before {display:inline-block;font:15px/15px FontAwesome;padding-right:10px;color:#000;vertical-align:middle;}
.awesome-ico.email:before {content:'\f0e0';}
.awesome-ico.phone:before {content:'\f098';}
.awesome-ico.user:before {content:'\f007';}

Jelikož obrázky byly stylama zmenšené a navíc měly jednopixelovou mezeru přímo v sobě, první, co mě napadlo, bylo samozřejmě vše přeuložit. Zkusil jsem mezeru v obrázku, mezeru mimo obrázek, dvoupixelovou mezeru vně i uvnitř obrázku, no prostě všechno... Nic.

Když se podíváte na náhled, tak opravdu ten YouTube posunutý je. Když si stránku pořádně zazoomujete, tak není.

Po vyloučení stylové chyby mi začalo být jasné, že tady něco nehraje. Prohodit pořadí ikonek mě samozřejmě napadlo také, ale stále žádná změna. Nakonec jsem vše prokonzultoval s chytrým kolegou a hned jsem měl jasno. Opravdu tomu vadí červená vedle modré. Když jsem totiž zkoušel změnit pořadí, dal jsem akorát Google na druhou pozici, takže stále byla červená vedle modré. Ať už to byl Facebook nebo Google.

A řešení? Jedině dát ikonku až úplně nakonec. Následující screenshot už je v pořádku.

Tak musíte znovu otevřít email, napsat mu, aby zmáčknul ctrl+F5 nebo ctrl+R a pak bude to v pořádku. Jenže po jisté době to samozřejmě začne být otravné... Jak tedy donutit prohlížeč aby smazal původní soubor v cache a nahradil ho novým?

Řešení je velice jednoduché. Využijeme GET parametrů tam, kde zdánlivě nic nedělají. Proměnná za otazníkem zpravidla slouží pro skriptovací jazyky a podmíněné zobrazení čehokoli, co v danou chvíli potřebujeme. Co se ale stane, když uvedeme parametr u obrázku či stylu? Prohlížeč takovýto zápis pochopí jako nový soubor, takže nezobrazí jeho starší verzi z cache ale načte ho pěkně znovu.

<link rel="stylesheet" href="css/style.css?v=2" type="text/css" media="screen" />

Styly samozřejmě GET proměnné neumí, takže na pozadí se nic nestane. Stane jenom to, co potřebujeme. Klient uvidí aktualizovanou verzi stylů. Stejnou fintu můžeme použít i u obrázků na pozadí: s nimi bývají největší problémy. Musíme samozřejmě zvýšit verzi i u linku na styly, v nichž pak obrázek na pozadí zapíšeme úplně stejně:

body {background:url(../img/body-bg.png?v=2) repeat-y 50% 0;}

JavaScript jako jediný umí teoreticky zpracovat GET proměnné se kterými je volán, takže pokud už něco takového používáme, prostě přidáme parametr druhý.

<script type="text/javascript" src="js/utils.js?load=forms&v=2"></script>