Dokonalé stylování formulářů

Vytvořit dokonalý vzorový CSS styl pro formulářové prvky, to je výzva.

Co se od něj očekává? Tak především, že formuláře učiní co nejhezčí. Zejména v majoritních prohlížečích a operačních systémem. Ale zároveň plně použitelné i v těch minoritních. Nebo při zobrazení bez CSS stylů.

Přehledné, přístupné, kontrastní, čitelné, ať už uživatel používá jakýkoliv vizuální styl, jakékoliv systémové barvy.

Napsat takový mustr není žádná legrace. Ale myslím, že se mi to nakonec, po dlouhých hodinách ladění, podařilo.

Stáhněte si jej

Vzor můžete používat zcela volně a dále jej upravovat. Nicméně doporučuji zasahovat pouze do CSS vlastnosti font-size a font-family. Jinou modifikací pravděpodobně znehodnotíte křehkou funkčnost stylu.

Stáhněte si: CSS vzor pro formulářové prvky

A vyzkoušejte si, jak jej váš prohlížeč zobrazí na jednoduchém příkladu.

---

Související:

• La Trine: Ještě dokonalejší stylování formulářů
• La Trine: Problém širokých tlačítek v IE

Čas optimalizovat pro zdravý rozum

Odborníci na webdesign nejsou schopni elementární logické úvahy. A to jaksi celosvětově.

Martin Snížek píše o optimalizaci pro rozlišení 1024×768. Že podle průzkumů přestává mít smysl brát ohled na rozlišení 800×600. Takové průzkumy jsou dobré leda do výročních zpráv výrobců monitorů. S webdesignem nesouvisí.

Webdesignéra absolutně nezajímá rozlišení monitoru. Hlavní panel dole, proměnlivá velikost okna prohlížeče, tloušťka jeho rámečku, záhlaví, menu, další pomocné lišty, posuvníky, případně záložky – to všechno zabírá na monitoru místo. Ale ze statistiky rozlišení nevíme jaké. Webdesignéra proto zajímají rozměry plochy, která zbývá pro webovou stránku (tzv. viewport). Nic jiného.

Zdá se vám to samozřejmé? Mně taky. Proč se ale neustále vyvozují závěry ze statistik rozlišení monitorů, namísto viewportů? Že by za tím byla touha si potvrdit, že lze weby dělat širší? I když to není pravda?

Měření vše prozradí

Při návrhu webů se držím rozměrů 770×420 pixelů. Jak jsem k těmto číslům přišel? Je to čistě odhad. Rád bych vycházel z odborných studií, jenže ony neexistují.

Kdysi viewport měřil Yuhů. Jeho výsledky prozrazují, že cca 30% uživatelů s rozlišením monitoru 1024×768 má viewport užší než 991px. Tedy nemá maximalizované okno, nebo používá nějakou postranní lištu.

Ale pozor, čísla se mohou výrazně lišit dle zaměření webu. Odhaduji, že u technických blogů bude viewport ještě menší, protože je lidé často čtou přes RSS čtečky. Naopak u netechnických blogů bych čtečky tolik nepředpokládal, nicméně situace se může změnit s masovým nástupem Internet Explorer 7.

Jak viewport změřit? Google Analytics vám nepomůže, jeho tvůrci holt nejsou schopni té zmíněné elementární logické úvahy. Umí to ve svém placeném tarifu Navrcholu.cz, ale výsledky promítá do intervalů s nepříjemně velkým rozpětím. Proto doporučuji vytvořit si vlastní měřící bod, nebo upravit kód pro Analytics.

Související:

• Honza Hučín: Široký layout se rozmohl
• Rony: Varíme na skutočnej ploche
• Rony: Zisťovanie veľkosti viewportu

Proč mít validní web

Zdá se, že Timy na to kápl:

Nakonec mít stránky validní je dobrá obrana proti bláznům, kteří projíždějí validátorem všechny stránky a rozzuří se pokaždé, když narazí na nějakou nevalidní konstrukci a mají tendenci to sdělit autorovi webu .

A já si říkám, jestli třeba už nenastala ta doba, kdy bych sem mohl pustit sérii článků o tom, proč není XHTML žádná výhra, kde všude udělali autoři XML chybu a podobně. Jestli bych nebyl ukamenován. Nebo zaživa sněden. Bez chleba!

The magic with conditional comments

This articles is actually an answer to e-mail by Honza Bien, who was asking me about the manipulations I was doing with conditional coments. Say, generally accepted idea is, that one kind of a comments (downlevel-hidden) is valid and the other (downlevel-revealed) is not. I tried to adapt those invalid comments the way that they would be valid. I'll explain the whole sequence.

…pokračování

Kouzlo s podmíněným komentářem

Tento článkem je vlastně odpovědí na e-mail Honzy Biena, který se ptal na čachry, které jsem tuhle prováděl s podmíněnými komentáři. Totiž, obecně panuje představa, že jeden druh komentářů (downlevel-hidden) je validní a druhý (downlevel-revealed) nikoliv. A já se právě pokusil ty nevalidní upravit tak, aby validní byly. ;)

Nejprve se podívejme na oficiální dokumentaci (nebo článek v češtině).

Máme tu tzv. „downlevel-hidden“ nebo chcete-li „skrývající“ komentář:

<!--[if IE 5]>
Tohle vidí jen IE verze 5
<![endif]-->

A také „downlevel-revealed“ aneb „odhalující“ komentář:

<![if !IE 5]>
Tohle vidí všichni kromě IE verze 5
<![endif]>

Nenechte se zmást tím, co se nachází mezi hranatýma závorkama, a zobecněme, že pro otevření komentáře existují dva oficiální zápisy <!--[if ???]> a <![if ???]>, a dále pro uzavření opět dva <![endif]--> a <![endif]>. To je důležitý výchozí bod.

Tedy ten podmíněný komentář s negací lze bezpochyby zapsat i takto:

<!--[if !IE]>
Tohle vidí všichni kromě IE
<![endif]-->

Perfektní službu nám nyní prokazuje zvýrazňovač syntaxe FSHL, díky kterému jasně vidíme zádrhel zmíněného zápisu. Totiž větu „Tohle vidí všichni kromě IE“ sice ostatní prohlížeče vidí, ale bohužel jako součást velkého komentáře. Což je nám vcelku houby platné, že?

Dobře, proč tedy ten načatý komentář nepřerušit?

<!--[if !IE]>
komentář --> tohle už ne <!-- opět komentář
<![endif]-->

Odsud už je jen krůček k optimalizaci:

<!--[if !IE]> -->
Tohle vidí všichni kromě IE
<!-- <![endif]-->

Jak prozrazuje FSHL, syntaxi jsme učinili za dost a výsledkem je plně validní a funkční podmíněný komentář, kterým lze vložit kód, jenž IE nevidí, ať se snaží sebevíc.

Můžete si to vyzkoušet.

Děkuji za pozornost.