Dnes jsem to jak na potvoru nemohl najít. Prohlížečů používám víc, než bych chtěl a v každém mám uložené nějaké záložky (oblíbené stránky) a popravdě v tom mám takový zmatek, že pokud to tam někde je, tak to stejně nemám šanci najít. Takže jsem se snažil potrápit google, ale výsledky byly na nic.

Takže pokud chcete používat na webu nová Windows písma, mrkněte se na definice písem pro CSS. A nebo bez okecávání a ukázek použijte:

font-family: Calibri, sans-serif;

font-family: Cambria, Georgia, 'New York CE', utopia, serif;

font-family: Candara, 'Trebuchet MS', 'Geneva CE', lucida, sans-serif;

font-family: Consolas, 'Lucida Console', 'Monaco CE', fixed, monospace;

font-family: Constantia, Palatino, 'palatino linotype', serif;

font-family: Corbel, Verdana, 'Geneva CE', lucida, sans-serif;

font-family: 'Segoe UI', 'Trebuchet MS', 'Geneva CE', lucida, sans-serif;

font-family: 'Segoe Print', sans-serif;

font-family: 'Segoe Script', sans-serif;

font-family: Nyala, serif;

Sám si pamatuji doby, kdy se stránky optimalizovaly pro rozlišení 640×480 pixelů, což se po dlouhé době podařilo překonat a do dnes platí o stupeň vyšší rozlišení – 800×600. Samotná optimalizace se dělá z toho důvodu, aby se i při nižších rozlišeních stránky zobrazily použitelně a aby uživatel nemusel při hledání informací skrolovat do stran.

Pořád se však najdou na internetu stránky, na kterých se tvrdí, že musíte mít stránky zobrazitelné i na 800×600. Nebo jedinci, kteří toto rozlišení propagují jako jeden z nosných pilířů přístupnosti webu. Opak je však pravdou. Dle google analytics ani na jeden z webů, které sleduji nepřistoupil uživatel s rozlišením nižším než 1024×768!

Samozřejmě se nedá striktně říct, dělejte weby pro toto a toto rozlišení. Vždy záleží na cílové skupině uživatelů. Budete dělat web pro firmu, která má monitory s 800×600? Udělejte to v 800×600. Pro běžné stránky však nemá smysl toto rozlišení uvažovat, maximálně se snažte, aby i při 800×600 nebylo nutné moc skrolovat do stran, respektive aby díky velikosti monitoru byly skryté jen nepodstatné informace a grafika.

Ale!

Dnes začíná nástup smartphone, pda a dalších mobilních zařízení (třeba i minilaptopů typu Asus EEE). Všechna tato zařízení mají malý displej a nižší rozlišení a webový prohlížeč! Rozlišení těchto zařízení se dostávají k hranici 640×480, ty větší potom 800×600. A jsem zpět kde jsme byli. Pokud máte jen trochu ambice umožnit těmto mobilním zařízením vidět vaše stránky, budete muset opět optimalizovat pro menší rozlišení nebo udělat zvláštní styly.

Tvorba webových stránek je holt boj. Vždy je však nutné správně zanalyzovat cílovou skupinu a podle ní optimalizovat stránky. Obchod s motorkami pravděpodobně nebude potřebovat optimalizaci pro zrakově postižené, ale stránky veřejné správy budou muset být přístupné všem (nehledě na legislativu). Při tvorbě stránek prostě myslete a nepřebírejte nesmyslná pravidla nalezená někde na webu.

Ztrátová komprese

Je to převážně jpeg (jpg), formát používaný převážně pro fotografie. Výhodou je značně malá velikost (závisí na míře komprese). S vyšší kompresí však přichází výrazně zhoršená kvalita a proto se nehodí pro prvky layoutu webu, ale doopravdy snad jen pro fotografie a případně nějaké velké části hlavičky (které se vlastně většinou sestávají z nějaké fotografie. Komprese je doprovázená tzv. artefakty, kterých si snadno povšimnete na velkých plochách vyplněných jednou barvou, případně kolem textu.

Bezztrátová komprese

Zde se vyplatí používat buď formát PNG nebo GIF. PNG je perfektní formát podporující průhlednost, bohužel ji ne moc dobře podporuje IE, takže průhlednost raději nepoužívejte. V těchto formátech vytvářejte všechny položky menu, tlačítka a jiné drobné grafické prvky, u kterých záleží na hezkém a přesném vzhledu. U malých grafikcých prvků je i malá velikost těchto souborů a použitím ztrátové komprese neušetříme nějak hodně KiB.

Pokud vyresetujeme styly pomocí hvězdičky (tzn. určíme všem prvkům margin, padding i border), můžeme si připravit i spoustu problémů.

Zátěž počítače

Není to nějak drastický problém, ale u větších dokumentů si můžete povšimnout jisté časové prodlevy při zobrazování stránky s použitím resetování pomocí hvězdičky. Je těch nastavení pro PC prostě moc. Prvně všechno vyresetovat a poté znovu přestylovat.

Zbytečná práce navíc

U některých tagů reset stylu znamená akorát zbytečnou práci navíc. Budete muset odsazovat seznamy, formátovat paragrafy.

Hnusné formuláře

U formulářů je jeden problém. Pokud se jih dotkneme stylem, změní se z docela hezkých (stínovaných) tlačítek, checkboxů a políček na docela škaredé prvky, které by jako z oka vypadly prvkům z Windows 98. A to se přesně při resetu stane. Pokud nechceme přijít o docela pěkný vzhled formulářů, vůbec je nestylujme! Pokud chcete několik hodin věnovat stylování formulářů, klidně si vyresetujte celé CSS.

Řešení

Řešení je velmi jednoduché. Vyresetujte tagy výčtem a jenom ty, které vyresetovat chcete. Praxí zjistíte, kdy se vám reset hodí a u kterých prvků vás naopak štve. Zjistíte, že třeba vždy nastavujete obrázkům border: 0;, zahrňte to do svých pravidel. Ušetří to hodně času.

O obsah se tedy má starat HTML (tagy pouze označují o jaký typ obsahu se jedná – např. tag <p> označuje text jako odstavec) a o vzhled se stará CSS. Pomocí CSS tedy řeknete prohlížeči, že má v odstavci definoveném pomocí HTML použít určitý druh písma. CSS lze do html dokumentu vložit víceméně třemi způsoby.

Přímé nastylování prvku v HTML

Méně používaný způsob, který ale má své použití. Hodí se o něm vědět například v souvislosti s akcemi poháněnými javascriptem. Možná najdete i jiné případy, kdy je vhodné ho použít.

Do HTML kódu přímo do tagu, který chceme ostylovat připíšeme style=“" a do něj můžeme vložit celou definici vzhledu.

...

<p style="font-size: 90%;">Tento text bude menší.</p>

...

CSS zapsané v HTML dokumentu

Celý soubor stylů lze mimojiné také zapsat na počátku HTML souboru. Do hlavičky dokumentu umístíme tagy <style></style> a mezi ně opět zapíšeme definici stylů. Obdobným příklad tímto způsobem s nastylováním barvy nadpisu první úrovně navíc následuje.

...

<head>

	<title>stylovaný dokument</title>

	<style>

 		p {

			text-size: 90%;

		}

		h1 {

			color: green;

		}

	</style>

</head>

<body>

	<h1>zelený nadpis</h1>

	<p>a zase menší text</p>

...

Externí soubor se styly

Asi nejpoužívanějším řešením je externí soubor se styly. Oproti předchozímu řešení je výsledek přehlednější. Styl v externím souboru se navíc většinou ukládá do cache prohlížečů, takže se nenačítá opakovaně. Je také snazší (nebo spíš přehlednější) stejný stylem nastylovat více HTML souborů. A jak na to? Nejprve si vytvoříme zvláštní textový soubor, který pojmenujeme například style.css. Do něj zapíšeme víceméne to samé co v minulém příkladu:

p {

	text-size: 90%;

}

h1 {

	color: green;

}

Nyní si vytvoříme HTML soubor a v hlavičce externí soubor načteme pomocí tagu <link>.

...

<head>

	<title>dokument nastylovaný externím souborem</title>

	<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

	<h1>Opět zelený nadpis</h1>

	<p>A zase jeden zmenšený text</p>

...

Uvedený příklad předpokládá, že soubor se styly i HTML soubor se nacházejí v jedné složce. Pokud soubor se styly umístíte jinam, je nutné adekvátně upravit cestu v tagu <link>. Pokud píšete stránky v XHTML, pozor na validitu! Tag <link> není párový, zapište jej tedy:

 <link rel="stylesheet" type="text/css" href="style.css" />

Takže situace je následující, máme jeden <div>, který chceme mít horizontálně vycentrován. Samozřejmě chceme použít CSS a dalším požadavkem je, aby vše bylo validní.
V html kódu máme tedy něco takového :

...

<body>

	<div id="stranka">

	...

	</div>

</body>

Nyní už budeme pracovat pouze se styly – doporučuji používat externí soubor se styly jako nejpřehlednější řešení nastylování html dokumentu. Do stylů tedy zapíšeme jednoduché:

body {

	text-align: center;

}

Tato úprava nám vycentruje text ve všech prvcích vnořených do těla dokumentu. Díky podivné implementaci v Internet Exploreru se v právě zmíněném prohlížečí vycentruje mimo textu i třeba zmíněný<div>. V IE tedy vycentrováno máme (nejlépe když pro <div> nastavím fixní velikost, při použití width: 100%; bychom si asi vycentrování nevšimli), ale co s ostatními prohlížeči?

Je to snadné. Prvku, který chceme vycentrovat přiřadíme jednodušše:

#stranka {

 	margin-left: auto;

	margin-right: auto;

}

Světe div se, ono to funguje. Není to nic světoborného, ale krásně to ukazuje strasti a slasti CSS. Na jednu stranu logicky funguje nastavení margin na auto, na stranu druhou je nutné vylaborovat, že IE chybně interpretuje text-align a počítat s tím ve vašich CSS souborech.

Oddělení obsahu od vzhledu se určitě všem webdesignerům nezamlouvalo. Ony už třeba výše zmíněné tabulky – z logiky věci by se nemělo rozložení stránky nahrnout do několika vnořených tabulek. Tabulky slouží k přehlednému zobrazení dat a k tomu by se také měly používat. Jenže ono to bylo tak bezproblémové všechno nastrkat do tabulek – sice to nebylo moc přehledné, ale zase to bylo víceméně bez větších problémů. A proto i spoustu dnes vytvořených webů tvoří spousta různých tabulek – někteří kodéři jsou holt líní učit se nové věci.

Abych uvedl i jeden praktický nedostatek tabulkových layoutů, tak musím říct, že je velmi problematické to, že se tabulka zobrazí až po celém načtení. To může být problém u rozsáhlých stránek, kdy potencionální návštěvník musí dlouho čekat na zobrazení stránky.

Když tedy stylujete nějakou webovou stránku, jistě vás dokáře naštvat, když vám někde nějaké menu o 2 pixely uhýbá do prava a nebo se nechce přilepit k horní části okna browseru. A z toho důvodu je velmi chytré si hned na začátek každého stylu (případně pouze toho, který tvoří layout) dát:

* {
     margin: 0;
     padding: 0;
}

Případně ještě doplnit:

border: none;

protože ony i okraje dost často zlobí. Celkově tedy:

* {
    border: none;
    margin: 0;
    padding: 0;
}

O resetování stylů CSS je podrobněji napsán tento článek.