Na navigaci | Klávesové zkratky

Translate to English… Ins Deutsche übersetzen…

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í:

Komentáře

  1. matah #1

    avatar

    Ahoj, tak pokial viem, tak ten „grafický pravěk“ netreba stylovat, ale staci sa pohrat v System Properties->Advanced (performance settings) a tam zaskrtnut / odskrtnut Use visual styles on windows and buttons (v EN verzii).

    před 10 lety
  2. habendorf #2

    „Srovnáte účaří v jednom prohlížeči, rozbité bude v jiném. Můžete nad tím spekulovat celé hodiny. “

    form * {vertical-align:middle;}, třeba

    Jinak svatá pravda, ale vysvětluj to klientům :o)

    před 10 lety | reagoval [4] David Grudl
  3. Roj http://roj.bloguje.cz #3

    avatar

    Opet se prokazuje, a to zcela nezvratne, ze my lenosi jsme zakladnim stavebnim kamenem inteligence. Nikdy jsem to nestyloval :-)

    před 10 lety | reagoval [4] David Grudl
  4. David Grudl http://davidgrudl.com #4

    avatar

    #2 habendorfe, vertical-align:middle bohužel není dokonalé řešení. Možná ještě víc než u checkbox je to patrné u radiobutton.

    #3 Roji, je strašně důležité umět si svou lenost hezky argumentačně obhájit. Viz tento článek :-)

    před 10 lety | reagoval [5] habendorf
  5. habendorf #5

    #4 Davide Grudle, Jenže ty to máš blbě.

    Místo

    #b input {
    vertical-align: middle;
    }

    dej

    #b * {
    vertical-align: middle;
    }

    před 10 lety | reagoval [6] David Grudl
  6. David Grudl http://davidgrudl.com #6

    avatar

    #5 habendorfe, to na věci nic nemění. Leda že bych popisky uzavřel do labelů, což uznávám, by bylo záhodno, ale minul bych se záměrem.

    A mimojiné, smyslem článku bylo i varovat před používáním hvezdiček ;-)

    před 10 lety
  7. pixy http://www.pixy.cz #7

    Děkuju ti, náčelníku. To resetování v CSS, které jacísi chytráci začali nedávno hromadně doporučovat, je skutečně pekelná krávovina. Já bych ty internety a céceska zrušil!

    před 10 lety
  8. David Grudl http://davidgrudl.com #8

    avatar

    Trošku jsem si zkoušel ve Firefoxu hrát se zvětšováním písma a ono to rozhodí účaří i při výchozím stylování. Ach jo. To by asi zasloužilo bugreport (nebo za uši).

    Za těchto okolností bych „vertical-align: middle;“ dokonce doporučil. Popisky musí přijít do labelů:

    <input type="radio" /> <label>One</label>
    <input type="radio" /> <label>Two</label>
    <input type="radio" /> <label>Three</label>

    A styl prosím výčtem, bez hvězdiček.

    input, label {
        vertical-align: middle;
    }

    O tuto variantu jsem rozšířil i příklad. Můžete prosím vyzkoušet, jestli se i na ostatních platformách a prohlížečích, za zvětšování a zmenšování písma, ta třetí varianta chová nejlépe?

    před 10 lety | reagoval [15] Roman
  9. VfB http://waffen-microsoft.com #9

    avatar

    jenže je tu ještě jeden zádrhel, ne keždý má (i když beru jen XP) nastaven výchozí vzhled (modrá hrůza), nejméně třetina má oldskool vzhled (bez omalovánek) a nezanedbatelná část může mít nějaký ne MS theme (aka Mac je velmi oblíbený) a pak můžou formuláře vypadat hodně tragicky, ono šedá tlačítka jako z minulého století mezi pěknou moderní grafikou můžou působit jako pěst na oko

    před 10 lety | reagoval [11] David Grudl
  10. MartinH #10

    Díky za další příspěvek!
    (Přestože bylo oznámeno ukončení publikování na tomto portále, často sem chodím, jen tak, abych mrkl, zda se náááhodou přece jen něco nového neobjeví…)

    *Škoda jen, že jste se zařadil do kategorie „nemocných“ :-)
    Není tato úchylka oznamovat „své“ konce a pak se třeba pod jiným či dokonce svým jménem zjevovat úplně jinde? (u Vás to až tak neplatí, vy jste speciální případ, protože prostě pokračujete jen ve zmírněném tempu. :-)

    Nesouvisí toto chování s touhou po dalších a dalších čtenářích, nových komentářích (které sice naoko nenávídíme, ale vždy se do naprosto kontraproduktivních diskuzí pustíme zas a zas…)..? :-)

    Asi je to tím, že celý internet je jeden velký paradox. A množství nových „techno-soci“-úchylek se bude jen zvyšovat.*

    před 10 lety | reagoval [13] David Grudl
  11. David Grudl http://davidgrudl.com #11

    avatar

    #9 VfBe, nepouštějme se do odvážných odhadů, kolik procent uživatelů má jaký vzhled, ono na tom totiž nezáleží. Pokud si nějaký vzhled vědomě zvolím, ať už na úrovni operačního systému nebo prohlížeče (případ Opery), tak je v tu chvíli mou volbou a tedy tím, co mi nejvíce vyhovuje. A pokud si zvolím šedá oldschool tlačítka, tak mi tragická nepřipadají.

    A samozřejmě, pokud používám Mac theme, je fajn ho vidět i ve webové stránce.

    před 10 lety
  12. Filosof http://blog.filosof.biz #12

    avatar

    Nu.. vzhledem k tomu, že přestylovávám většinu prvků, krom formulářových polí, tak resetuju. A neskutečně to zjednodušuje práci :-)

    před 10 lety | reagoval [14] David Grudl
  13. David Grudl http://davidgrudl.com #13

    avatar

    #10 MartinHu, ukončení blogu je velmi důležitou vývojovou etapou v jeho životě.

    Je-li ukončení provedeno dostatečně teatrálně, má výborné očistné účinky. Sníží návštěvnost na úroveň, která je pro blog nejprospěšnější. Autorovi a čtenářům dá prostor vydechnout.

    Prostě samá pozitiva. Tedy… až na jednu maličkost – na ty neustálé komentáře týkající se onoho konce-nekonce :-D

    před 10 lety
  14. David Grudl http://davidgrudl.com #14

    avatar

    #12 Filosofe, resetování je v pořádku, pokud víš co resetovat, a to také zresetuješ:

    xyz, klm, abc { margin: 0 }

    Průser je to tehdy, pokud absolutně netušíš, co všechno jsi vyresetoval:

    * { margin: 0 }

    A když se do stránek vkládá uživatelský obsah, tedy případ všech CMS, tak teprve za běhu zjišťuješ, co všechno nefunguje, klienti se ptají, proč se jim nezobrazuje horizontální linka, definiční seznam, to či ono…

  15. Roman http://www.clon.cz #15

    #8 Davide Grudle, V Opeře 9.2 na Widlích vypadají všechny tři formuláře stejně, ale máš chybu v odkazu místo .cz je tam .l

    před 10 lety
  16. honza http://www.idioti.cz #16

    Já bych jen upozornil na chybu ve spojení: „zarovnání ovládacích prvků s popiskami“

    Správně je „s popisky“

    před 10 lety | reagoval [17] Multimotyl
  17. Multimotyl http://sonykbel.com #17

    avatar

    #16 honzo, Pletu se, nebo může být i „popiska“ a v tom případě to je v pořádku?

    #14 Davide Grudle, Smím se zeptat, z jakého důvodu resetovat DIV? Mám za to, že jsem nikde neviděl, že by byl někde s nějakým origósz nastaveným marginem.

    před 10 lety
  18. Non_E http://radekdvorak.eu #18

    Demo3 vypadá na linuxu v opeře i konqueroru všude stejně. Ve firefoxu-2 vypadají při zvětšování druhý a třetí příklad pořád centrovaně, první má checkboxy „proklatě nízko“.

    před 10 lety
  19. Roman http://www.c64.sk #19

    avatar

    #14 Davide Grudle, uzivatelsky obsah treba dosledne nastylovat a vsetky anomalie absolutne a nekompromisne posielat potierať. ;-)

    před 10 lety
  20. Zdeněk Košťál http://zdenekkostal.cz #20

    avatar

    Já také resetuju. Potom vím že co nenastavím, tak bude nulové. Vím o tom, že to může a asi bude dělat problémy, ale pokud člověk dostane design a nemůže jej ovlinit, nemá na výběr. Pak má resetování smysl, ale musí se nastavit co nejvíce věcí, jinak nevíte, co vám pod rukama vyroste…

    #14 Davide Grudle, Margin u divu jsi resetoval pro jistotu? :-) Právě kvůli ní to dělám všude. Jinak pokud musíš inputu nastavit nějakou šířku, mrkni se, co z toho vyleze za hnus.

    před 10 lety
  21. Dero http://dero.name/ #21

    avatar

    #14 Davide Grudle, To je špatný příklad. Například ten DIV nemá žádné výchozí stylování, je to základní blok. Taky jsi opomněl minimálně prvek OL. O odstavcích a nadpisech nemluvě, ale tam se dá na výchozí nastavení jakž takž spolehnout.

    Ale především, seznamy (UL, OL, MENU, DIR, DL) mají v různých prohlížečích různá odsazení. V jednom je to odsazení realizováno marginem, ve druhém paddingem.

    Nuluju taky en-block, nikdy mi to problémy nedělalo. Jak už psal habendorf, stačí používat LABELy a pak není nic jednoduššího než:

    form * { vertical-align: middle; }

    Existují i jiné lepší finty, pravda, ale o tom se zase někdy rozepíšu já.

    P.S: Taky bys mohl do toho minihelpu nad textareou komentáře hodit link na syntaxi Texy! Já si ji třeba nepamatuju, a proto jsem ten zdroják neostyloval, jak by bylo záhodno.

    před 10 lety | reagoval [22] David Grudl [29] Andrew
  22. David Grudl http://davidgrudl.com #22

    avatar

    Ten div jsem tam napsal, protože mi přišel pod klávesnici, jen jako příklad použití konkrétní značky. Neřešte to prosím. Změním to na xyz

    #21 Dero, Vidíš, zrovné tvé en-block nulování mi jednou problémy způsobilo.

    Zopakuji to: Všechno vynulovat a nastavit prvky, které používá šablona, je nedostatečné. Šablona sice funguje, ale co obsah do ní vkládaný? Ten může obsahovat elementy, na jejichž vhodné nastavení kodér nepomyslel, ale zato je iniciativně vynuloval. No a pak se tyto elementy chovají nevhodně.

    Tedy pokud vynuluju všechno, tak jsem také za všechno zodpovědný a musím všechno opět rozumně nastylovat. V opačném případě jsem to nastyloval na nulu, což je pro běžný obsah mnohem horší varianta, než výchozí hodnoty prohlížeče.

    ad texy: díky za upozornění, doplním to.

    před 10 lety | reagoval [24] Timy
  23. tiso http://tiso.wz.cz #23

    avatar
    před 10 lety
  24. Timy http://atd.havrlant.net #24

    #22 Davide Grudle,

    Změním to na xyz

    Ale no táák… co tam přidat nějaké upozornění? Já si při čtení komentářů připadal jako naprostý debil, když jsem v komentáři viděl abc a všichni mluví o nějakém divu :-). Co třeba použít –del–?

    před 10 lety
  25. myf #25

    avatar

    FF2.0.0.3, winXPsp2 „bez omalovánek“ :

    Možná-ani-ne-takový-offtopic: Eric Meyer o:

    před 10 lety
  26. pixy http://www.pixy.cz #26

    Plošné resetování (tj. např. to * { margin:0 }) je obrazem touhy autora mít pod kontrolou veškeré formátování všeho na stránce. Je to v zásadě totéž jako trvání exaktní velikosti písma v px, přesném fontu atd. Jenže jsou věci, které někteří uživatelé z principu musí mít jinak a někteří jiní to chtějí mít jinak. Lepší řešení je najít si kompromis, co nechám na prohlížeči (a tedy výchozích hodnotách) a co budu dirigovat sám. A s tímhle je plošný reset na úvod v ostrém protikladu. Proto se mi nelíbí.

    před 10 lety | reagoval [28] Andrew [30] kelvin
  27. Andrew #27

    Já tedy nevím, ale já mám (Windows, Firefox) první a třetí případ rozhozený a druhý je správně (a to i při změně písma).
    A ještě ke stylování. Formuláře styluji a to dost často. Minimálně velikost písma – je hloupé mít text 80% a formulář ve 100% (nezdědí to). A mnohdy styluji i to pozadí, border atd. Například na svém BSD mám pod Gnomem hezké černé téma, ale na Tvé bílé stránce jsou ty černé inputy opravdu jako pěst na oko. :-) V jiném mém layoutu jsou zase ty kulatá windowsovská tláčítka krásně odporná a bílý rámeček Tě upoutá víc, než flashová reklama. Takže stylovat, stylovat, ale správě a důsledně. A ono to jde, jen se musí člověk trochu snažit. :-)

    před 10 lety
  28. Andrew #28

    #26 pixy, Plošné resetování je hloupost a hvězdičku nejvíce používají Ti, kdo pak nejméně tuší, co jim to s kódem udělá. Ve svých začátcích jsem také rád vše dopředu nastavil hvězdičkou, ale nyní, kdy ji téměř nepoužívám a plošné resetování nedělám, mám vzhled pod kontrolou mnohem víc.
    Člověk lehce dosáhne opaku toho, co zamýšlel – tedy mít vše pod kontrolou.

    před 10 lety
  29. Andrew #29

    #21 Dero, Resetovat margin a padding u seznamů je ten správný příklad cesty do pekel. Zkuste to udělat a pak se koukněte, jak to vypadá v IE a ve Firefoxu

    před 10 lety
  30. kelvin http://milichovsky.com #30

    avatar

    #26 pixy, -
    Vynulujte odsazení
    Používejte důsledně již zmiňovaný zápis * {margin: 0; padding: 0}, prohlížeče se ve svých interních stylopisech v tomto ohledu dost významně liší.
    To je citace z knihy CSS Hotová řešení od Petr Staníček (Pixy) a kolektiv.
    Teď zas píšete, že se Vám to nelíbí, tak jak tedy?

    před 10 lety | reagoval [31] zirafka [32] Plaváček
  31. zirafka http://blog.zirafka.cz #31

    #30 kelvine, jestli to treba neni prave ten kolektiv. Zkus se podivat, kdo konkretne je kolektiv, jaky maji na netu nicky a jestli tu treba taky neco neutrousili a hned vis jak to je (((-;

    před 10 lety
  32. Plaváček http://www.blabolnik.cz #32

    #30 kelvine, Za tuto větu Pixy nemůže, některé kapitoly mám na svědomí a já Dero. A já si vesele nuluju a resetuju, samozřejmě při vědomí možných důsledků. Ale někdy nenuluju a to také při vědomí všech možných důsledků. Je to otázka volby kodéra a okolností při tvorbě webové prezentace.

    před 10 lety | reagoval [34] pixy
  33. pepa http://swatelier.info/at/clanky/form0.htm #33

    avatar

    Když „znulovaný“ input prvek, tak včetně border a uzavřený do nějakého konteineru (div, td) a stylovat ten konteiner. Takto to používám léta na intranetu. Tam je ale situace dost odlišná od běžného webu.

    Nějaké ukázky můžete vidět na mých stránkách.

    před 10 lety
  34. pixy http://www.pixy.cz #34

    #32 Plaváčku, Ano ano, přesně tak. Kdybych tu knihu nepředal k dokončení v polovině a pak už ji v životě neviděl, kdybych měl čas/chuť/sílu dělat nějaké korektury a dohadovat se o tom, co tam kdo přidal, tak tohle bude nejspíš jedna z věcí, o kterou bych usilovně bojoval, aby tam nebyla. ;-)

    Ano, nulování všeho má smysl v určitých případech a ppři specialních řešeních, ale taky to chce opravdu dobrého odborníka, aby to pak všechno ustál, uhlídal a důkladně protestoval ve všech typických browserech a situacích. Což pohříchu většinový průměr kodérů není.

    před 10 lety
  35. Ola #35

    Za hvězdičkový resetování bych střílel …

    před 9 lety
  36. Mem http://playfulturtle.com #36

    OT: Sakra lidi to vám nerve oči? „…vypadají obyčejnÉ nestylovanÉ zaškrtávací políčkA“

    před 9 lety

Tento článek byl uzavřen. Už není možné k němu přidávat komentáře.