Ještě dokonalejší stylování formulářů

Před nějakou dobou jsem naznačoval, jak dokonale nastylovat webový formulář. Pointou bylo, že formuláře je nejlépe nestylovat vůbec. Nechat je vykreslit prohlížečem v přirozené podobě.

Nijak jsem tehdy své tvrzení nepodložil. A to dnes napravím.

Je důležité si uvědomit, jak je ona výchozí podoba ve skutečnosti křehká. Třeba takové tlačítko. Ve výchozí podobě ve Windows XP vypadá pro každého uživatele maximálně srozumitelně, esteticky je na úrovni a hezky reaguje na události myšky:

Nicméně stačí jen velmi drobný zásah do stylu a celé kouzlo se rozpadne jako domeček z karet. Například nastavíme barvu pozadí (v podstatě na výchozí hodnotu).

input { background: ButtonFace }

A výsledkem je tento skok do grafického pravěku:

Co z toho plyne? Barvu pozadí nenastavovat. Ale pozor, pokud explicitně neurčíme barvu pozadí, tak o ní nic nevíme – může být šedá, bílá nebo třeba černá. Z toho důvodu nemůžeme nastavit ani barvu písma. Jen ta výchozí bude správná.

Stejné dílo zkázy způsobí i hrátky s border, nebo celou řadou dalších vlastností. Ale pozor. Netýká se to jen tlačítek, nýbrž všech prvků formuláře!

Margin a jeho přítel padding

Zdaleka nejde pouze o barvičky. Takto hezky vypadají obyčejné nestylované zaškrtávací políčka ve Firefoxu pod Windows XP:

No uznejte, co jim chybí? Stačí však drobný zásah do jejich křehké symbiózy, například zkur nastavení vlastnosti margin…

input { margin: 0 }

…a to dokonalé horizontální zarovnání ovládacích prvků s popisky je minulostí:

A není cesty zpět. Ztracenou rovnováhu už žádným CSS nezachráníte. Srovnáte účaří v jednom prohlížeči, rozbité bude v jiném. Můžete nad tím spekulovat celé hodiny. Já vám radím – užijte ten čas nějak lépe a prostě formuláře nestylujte.

Resetování CSS

S tímto velmi úzce souvisí takzvané hvězdičkové resetování kaskádových stylů. Jde o kód, který se přidá na začátek každého stylu…

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

…čímž se formuláře domrví nejen snadno a rychle, ale také nenávratně. Chytří už vědí. Chytří neresetují 

---

Související:

• Styling even more form controls – přehlídka vlivu stylování formulářů na různé browsery
• La Trine: Dokonalé stylování formulářů
• La Trine: Problém širokých tlačítek v IE

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

Hádanka - znáte mod_rewrite?

Tak schválně. Dokážete vyřešit pomocí pravidel mod_rewrite v .htaccess následující úkol? A rozhodně nejde o nic vykonstruovaného, nýbrž o běžný požadavek, pro mod_rewrite jako šitý.

Cílem je přistupovat ke skriptům bez použití jejich skutečné přípony .php. Tedy místo http://example.com/contact.php se bude používat http://example.com/contact. Samozřejmě by bylo chybou, aby stejná stránka byla dosažitelná i na adrese contact.php – proto ještě přístupy ke stránkám *.php hlavičkou 301 přesměrujeme na verze bez přípon.

Je zadání jasné? Tak hodně štěstí

Řešení je v tomto komentáři.

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!