Formuláře, písmo a hvězdička
Je tomu ovšem jen pár týdnů, co jsem byl donucen sjednocovat písma uvnitř formulářových prvků.
Již tomu bude rok, co jsem začal na začátku každého stylu používat sadu deklarací, které postupně smáznou některé stylopisné rozdíly mezi jednotlivými prohlížeči a podstatně zjednodušší další stylování webu. Nejdůležitější z nich je samozřejmě již mnohokrát zmiňovaný hvězdičkový selektor.
Je tomu ovšem jen pár týdnů, co jsem byl donucen ± sjednocovat písma uvnitř formulářových prvků. Na jednu stranu je pro uživatele dobré nechat formulářové prvky žít vlastním životem – jsou na ně zvyklí z ostatních webů. Navíc má kodér nad formulářovými prvky webu prakticky nulovou kontrolu.
Ale na stranu druhou – proč mít v selectech Verdanu, když je zbytek webu Arialem? Nebo nejlépe web Timesem, selecty a inputy Verdanou, tlačítko defautní daného prohlížeče a textarea Courierem? Písmový megamaglajz.
Řešení? select, input, textarea {font-family: Arial,
sans-serif;font-size: 1em;}
Další čtení o formulářích
Komentáře
Ještě bych do toho seznamu selektorů doplnil „button“. Stylování formulářů je vůbec kapitola sama pro sebe – grafik si natahá obdélníčky, udělá krásné buttonky, ale kdo se s tím má potom stylovat!
[1] Spíš takhle:
font-family: „Arial CE“, „Helvetica CE“, Arial, Helvetica,
sans-serif;
no osobně to řeším nějak takhle
- {
font-family: arial;
}
ušetří se spousta práce s vyjmenováváním každého jednotlivého prvku.
Spolu s podobným jednoduchým „hackem“ na sjednocení všech velikostí
písem ve všech prohlížečích, vynulování padding, margin a border, to
bývá záčátek každého stylopisu. Opravdu už jsem dost starý na to, abych
odlaďoval takovéto nesmysly ex-post per-browser per-tag
Další možnost je uvádět vlastnosti písma rovnout u té „inicializační hveždičkové deklarace“; to by také mělo formulářům, tabulkám a podobným odlišným prvkům vnutit jenotný font.
Mimochodem, s těmi formuláři: zaznamenali jste někdy potměšilé renderovnání hidden inputů Internet Expolorerem?
Hvězdičové paddingování nefunguje přesně tak jak by mělo! Například selecty se pak při některých skinech ve všech prohlížečích chovají podivně a hlavně nejdou pak paddingem ani marginem napravit! Nebo mi někdo poradíte jak na to?
- {padding:0%;}
select{padding: 5px;}
http://sweb.cz/…padding2.png
Firefox 2.0/win xp.
[6] musíš ten padding nastavit ne pro SELECT, ale pro OPTION, pak není problém
a tohle nefunguje?
form * {blabla bla}
jinak já jsem začal kvůli lepšímu zobrazování formů v textových
prohlížečích a zařízeních „prokládat“ dvojici label a input (či
jiný prvek) vodorovnou čárou hr, ale nějak nemůžu dokopat MSIE aby ji
udělal jednopixlovou s minimálním prostorem (margin) nahoře a dole, nevíte
jak tohle pořešit?
Plaváčku tisíceré díky!
[8] Co to má za smysl prokládat label a input HRkem? Label a input patří logicky k sobě, tak nevím proč je oddělovat. Pokud potřebuji formulář nějak sofistikovaněji nastylovat obalím ho do definičního seznamu (label do dt, inputy do dd) a je to.
Možná trochu dokonaleji to písmo?
font-family: „Arial CE“, Arial, „Helvetica CE“, Helvetica, sans-serif;
nebo alespon
font-family: Arial, Helvetica, sans-serif;