Problém příliš úzkých tlačítek [příspěvek v archivu]
Když dgx napsal výtečný a zajímavý příspěvek o problémech s příliš širokými tlačítky, hned jsem si vzpomněl na problém přesně opačný, s nímž se setkávám až nepříjemně často. To když se někdo snaží udělat tlačítka úzká úplně na doraz a zapomíná přitom, že operační systém či prohlížeč mohou používat téma/skin, vykreslující standardní formulářové prvky úplně jinak, než si nebohý autor představuje. U tlačítek tak třeba může být po stranách textu potřeba výrazně větší prostor kvůli jejich zaoblení.
Ukázky jsou
z webů kava.cz a alza.cz v prohlížečích Safari a Firefox na
Mac OS X. Standardní oblá tlačítka pocházející z grafického rozhraní
(GUI) Aqua v Mac OS X používá kromě Safari i mnoho dalších
prohlížečů (např. Camino, prohlížeč na jádře Gecko). Běžný Firefox
ovšem systémové GUI nepoužívá, všechny formulářové prvky vykresluje
sám (proto také působí na macu poněkud cize a nepatřičně) a tlačítka
zobrazuje vždy hranatá. Kdyby byl v těchto případech použit prvek
<button>, vypadala by tlačítka na všech ukázkách stejně
a byla by použitelná ve všech prohlížečích.
Řešení je tedy očekávaně jednoduché: nedefinujte prvkům
<input type="submit"> šířku, nechejte to na prohlížeči.
Pokud je opravdu životně nezbytné šířku nějak omezit, definujte ji
rozhodně v em a počítejte s dostatečnou rezervou (přičtěte
1–2em). A na tlačítkové specialitky, jako netypické tvary, tlačítka
s obrázkem, velmi úzká tlačítka či vyžadované exaktní rozměry,
používejte prvek <button> – přesně kvůli tomu v HTML
existuje.
Standardní formulářové tlačítko <input>
může prohlížeč vykreslovat i velmi netypicky a nemusí ani umožnit jeho
stylování, ale tlačítko <button> se musí vykreslit jako
obdélník a k jakémukoli stylování je vždy ochotno.
Petr Staníček, 21. 5. 2007 000 16.04 • Rubrika: Webdesign • 22 komentářů u textu s názvem Problém příliš úzkých tlačítek
22 komentářů k článku »Problém příliš úzkých tlačítek«
[1] Vložil(a): Martin Hassman 21. 5. 2007 v 17.10
Firefoxu 3 uz tak hranaty nebude. Zrovna nedavno jsem JasnePace delal srovnavaci screenshoty http://jasnapaka.bloguje.cz/…mac-os-x.php
[2] Vložil(a): Pavel Kout 21. 5. 2007 v 20.10
[1] Hezký. Ještě kdyby doplnili podporu Keychains Access a dalo by se to používat.
[3] Vložil(a): dgx 21. 5. 2007 v 23.53
Tlačítka
<button>bohužel trpí zase jinými nedostatky. V některých prohlížečích se neodešle jméno tlačítka, takže nelze identifikovat, které tlačítko bylo stisknuto, v jiných je zase nedosažitelné prostřednictvím klávesnice.Fakt je, že už je to pár let, co jsem experimentoval (a zavrhl) tento element, možná už je situace lepší.
Co se mi naopak na
<button>líbí, že se obvykle chová jako skutečné tlačítko včetně efektu „zamáčknutí“. Takže i když jeho obsah tvoří pouze bitmapa, je výsledek efektnější, než<input type="image">.Ale každopádně dobrý tip, nedávat tlačítkům šířku.
[4] Vložil(a): Pavel Kout 22. 5. 2007 v 12.48
[3] Já zase, Davide, tenhle element nepoužíval, protože ho kdysi jeden důležitý browser neuměl (jasně, že to bylo ještě v době, kdy byly Hradčany ze dřeva) a nějak mi to zůstalo
[5] Vložil(a): marek 22. 5. 2007 v 16.45
na druhou stranu to je docela hezký, mít kulaté tlačítko a v něm napsáno jenom O :)
[6] Vložil(a): dgx 22. 5. 2007 v 17.33
[5] přesně do chvíle, než předpokládané „OK“ případně „ODESLAT“ se vybarví jako „ODSTRANIT“
[7] Vložil(a): Vilém Málek 22. 5. 2007 v 23.29
Dokud nebude GUI formulářů plně definovatelné prostřednictvím CSS, do té doby bude ve webdesignu, bordel. Bez prominutí.
Kdo přišel na tak neskutečně nereálný požadavek shody GUI formulářů webové stránky s GUI operačního systému? Jak může být osoba, která má každý program v počítači naskinován jinak, zmatena odlišným GUI webových stránek? Nota bene když každá ta webová stránka je úplně, ale úplně jiná?
Já bych to celý zakázal, tyhlencty weby. A vůbec.
[8] Vložil(a): Pixy 23. 5. 2007 v 0.22
[7] > Jak „každý program naskinován jinak“? Jediné dva programy, co znám, které mají na macu formulářové prvky naskinovány odlišně, jsou pouze a právě Firefox a Opera, jejichž autoři se prostě rozhodli všechno si udělat nestandardně a po svém. A jestliže jsem odevšad zvyklý, jak vypadá tlačítko, jak vypadá selectbox, checkbox, radio, tak ty prvky v podobě prezentované FF/Operou nemusím ani poznat, notabene že mě ruší…
[9] Vložil(a): Pavel Kout 23. 5. 2007 v 1.07
[8] Jenže to se holt špatně vysvětluje tomu, kdo na to není zvyklý.
[10] Vložil(a): dgx 23. 5. 2007 v 2.32
[9] pod Windows je to stejné. Snad až na ten Firefox, který naštěstí použivá systémové GUI. Liší se ještě některé z programů psaných v Javě, z čehož pramení i mé předsudky vůči Javovým aplikacím a nechuť je používat.
[11] Vložil(a): Roj 23. 5. 2007 v 17.23
Uprimne receno, nez ty formulare me tedy fascinuje jina vec, kterou povazuju za zazrak.
Jak dosahnes prizpusobeni toho mensiho divu z dvojice (positiv/negativ), aby byl stejne dlouhy jako ten vetsi… nic mi nerikej, jdu se na to vrhnout…
[12] Vložil(a): Vilém Málek 23. 5. 2007 v 19.25
[8][10] Nevím, jestli jste si toho, přátelé, všimli, ona je to už stará věc – před několika léty bylo v módě umožnit uživatelům programu měnit jeho „skin“, tedy upravovat si jeho vzhled podle svého. Dnes už to není tahák, ale i tak má většina programů tuto možnost v sobě zabudovánu. Prakticky jakýkoli program může mít GUI odlišné od toho systémového, proto jsou tyhle výkřiky a nesystémovém GUI v prohlížečích nesmyslné.
(Například já používám jako prohlížeč Maxthon na jádře MSIE ve skynu Mac OS – pohodlí, funkce a přátelský vzhled pěkně pohromadě
[13] Vložil(a): dgx 23. 5. 2007 v 21.36
[12] „prakticky jakýkoliv“ = Opera a Winamp? Nebo možná jen nepoužívám prakticky žádné programy
[14] Vložil(a): Roj 23. 5. 2007 v 22.52
[13] Mozilla taky, ovsem jediny opravdu pouzitelny je default classic „skin“. Nikoliv uz „default modern“!
[15] Vložil(a): Pavel Kout 24. 5. 2007 v 20.23
[14] Tak to prr, Roji — ten moderní skin ve mně vyvolává nostalgické vzpomínky a téměř slzu v oku. Asi stárnu, ale z toho samého důvodu se těším na Netscape 9 — prý bude i pro Mac OS X a Linux, nejen pro Win32 jako Netscape 8.
[16] Vložil(a): Roj 24. 5. 2007 v 22.51
[15] Pokud mas systemove barvy defaultni, nemas problem. Ja ano.
[17] Vložil(a): CC 25. 5. 2007 v 8.29
V tuto chvili tato stranka pouziva pouze input. Jak funguje button a input pri vypnutem JS?
[18] Vložil(a): Pixy 25. 5. 2007 v 9.34
[17] JS nemá na nic vliv, jak
<input>, tak<button>jsou standardní prvky HTML a jsou plně funkční i bez jakéhokli skriptování. Jestliže místo<input type="submit">použijete<button type="submit">, bude chování úplně stejné, lišit se bude jen formátování. Aneb jak píše specifikace HTML 4:[19] Vložil(a): Jarda 25. 5. 2007 v 22.07
Moc tomu nerozumím, u nějakého formuláře na komentáře to beru, že stylování prvků zbytečné, ale u aplikací (resp. web aplikací), potřebuji mít pod kontrolou vizuální stránku věci už z pohledu uživatele. Dobře tak třeba červené tlačítko smazat je možná pro puristu zhýralost, ale už ušetřilo mnoho dat od zkázy :o)
Na druhou stranu, proč by mělo být třeba tlačítko shodné se systémovým, nevidím jediný důvod, je to prvek stránky jako každý jiný a chci ho mít pod kontrolou vzhledem k jeho „polymorfismu“.
Rad bych pouzival jen „button“, ale vzhledem k nejednoznacnemu chovani to casto nejde, skoda. :o(
[20] Vložil(a): Pixy 25. 5. 2007 v 23.29
[19] Whoa! Nejednoznačné chování
<button>? A jaképak? Něco závažnějšího než to, že tlačítko coby<input>se vám někde červeně nezobrazí vůbec, ani kdybyste se na hlavu stavěl (viz třeba Safari či Camino), zatímco coby<button>spolehlivě? Opravdu se snažíte tvrdit, že mezi formátováním<button>jsou podle vás větší rozdíly než v zobrazování<input>?A jestli nechápete, proč by měly být formulářové prvky shodné se systémovými, tak to je trochu smutné. Víte, uživatel musí především poznat, co který prvek dělá, že a jak s ním může manipulovat. Když to přeženu, tak pokud je uživatel odjakživa, co dělá s počítačem, zvyklý, že třeba tlačítka vypadají jako průhledné skleněné koule, tak ho nemusí ani napadnout, že ten modrý trojúhelník je taky tlačítko a že by na něj měl kliknout. Pokud jste zvyklý dělat s Windows, tak cokoli, co se podobá tlačítku z Windows vám přijde dobré. Ale jsou jiná GUI, na které jsou lidi zvyklí, a tam už to mnohým tak dobré připadat nemusí – nejmarkantnější je to vždycky se select boxy, ty jsou na macu ve windows tak odlišné, že už jsem byl svědkem mnoha nepochopení a tápání. A jsou GUI a témata mnohem divočejší a při stylování formulářových pak můžete narazit na lecjaké podivnosti (Roj by mohl vyprávět)…
Považovat formulářové prvky za vlastnictví stránky má stejnou logiku jako si chtít dělat vlastní/odlišné GUI v každé aplikaci. Může se to zdát děsně cool, ale uživatele to ve skutečnosti příšerně prudí. Jednotné aplikační GUI má svůj zásadní smysl a nevěřil byste, co všechno s ním stojí a padá… Ale to je na dlouhou debatu a spory o kontrole designerů nad ovládacími prvky GUI (nejen ve webstránkách) jsou staré a asi věčné.
[21] Vložil(a): Jarda 26. 5. 2007 v 9.27
Pěkné ráno,
, ale přijde mi to analogické.
nechtěl jsem vyvolat nějaký „flame“. Ohledně chování, jsem myslel rozdíly na téma input vs. button a odesílání hodnot (jemné odskočení od grafiky k funkcionalitě). Tak mě napadá, že button vlastně vzniknul i proto, aby do něj šlo vkládat html a tedy i formátovat. Čili je to jediný formulářový prvek, který máme povoleno stylovat?!
Jinak ke stylování form prvků, souhlasím, že stylovat je je bohužel cesta do pekel a za těch cca 10 let co „se snažím psát weby“ jsem se o tom mockrát přesvědčil, ale stejně jsem nucen (většinou objednatelem) nějak graficky upravit aspoň label, button, fieldset. Řekl bych, že je to podobné jako se stylováním odkazů, možnosti nějaké jsou a jen někdo je využije až tak, že nepoznáte odkaz.
Nevím, téma mi přijde, jako bavit se jestli stylovat stránku nebo ne, vždyť CSS se chová také v různých implementacích různě a není nejlepší tedy pure web, abych nemátl uživatele? No to jsem trochu vyhrotil
Myslíte, že neformátovat by se mělo i u intranetových aplikací, kde je zajištěno používání omezeného množství typů prohlížecích zařízení? (dotaz do pléna).
Pěkný prosluněný víkend bez mráčků všem!
[22] Vložil(a): zLOST 22. 6. 2007 v 15.58
[20] a ceho jsou formularovy prvky vlastnictvim, kdyz ne stranky na ktere se zobrazuji? tim padem se z GUI muzou prebirat fonty, barvicky, pozadi na desktopu a CSS muzem rovnou zrusit, ne?
Kdyz chci/potrebuju/musim mit s nejakyma vlastnostma, tak je trosku na houby, kdyz mi to rozhodi aktualni skin u uzivatele, ne?
Takze bych mel krom testovani webu v ruznych prohlizecich a na ruznych platformach, jeste mel uvazovat o tom jak se to bude chovat u ruznych temat? To uz mi prijde malicko postaveny na hlavu.
Uznavam, ze jablickovsky default modry soupatka a dropdowny jsou pekny, ale vseho s mirou..
just my two cents..
Váš komentář
Upozornění: Pokud vás téma tohoto příspěvku nezajímá, nebaví, dotýká se vás či vás dokonce uráží, tak prosím odejděte a pokud možno se nadále ve vlastním zájmu dalším podobným vyhýbejte. Hlavně se to prosím nesnažte autorovi sdělovat v komentářích, takové příspěvky nikoho nezajímají a budou nejspíš vymazány. Totéž platí pro vaše názory na osobu autora, na jiné přispěvatele, mluvení z cesty, ze spaní či pod vlivem omamných látek a další podobné výlevy nesouvisející s tématem článku. Jinými slovy, toto je prostor soukromého blogu určený pro komentování příspěvku publikovaného výše, nikoli k chatování a volné diskusi. Děkuji za pochopení.
Abyste mohli komentovat, musíte se přihlásit.