The stretched buttons problem in IE

As you might know, web forms have to by styled with care, since their native look often is the best you can achieve.

That said, sometimes even default look has its bugs. A truly flagrant mistake concerns buttons in Internet Explorer (including version 7) in Windows XP. If the button's caption is too long, the browser produces such a nasty thing:

…pokračování

Problém širokých tlačítek v IE

Jak již víte, webové formuláře je potřeba stylovat opatrně, protože už jejich nativní podoba bývá často tím nejlepším, čeho lze dosáhnout.

Někdy má ale i výchozí podoba své mouchy. V komentářích k předchozímu článku se jako problematické ukázalo zarovnání checkboxů s popisky ve Firefoxu. Skutečně hrubá chyba se však týká tlačítek v Internet Exploreru (včetně verze 7) pod Windows XP. Je-li popisek na tlačítku dlouhý, vyčaruje prohlížeč takový zlý, nepěkná věc:

(vyzkoušejte si)

Jde o kombinaci hned dvou chyb:

• tlačítka jsou zbytečně moc široká
• velká tlačítka se vykreslí zubatě a divně

S druhou chybou asi nic udělat nepůjde. To je prostě chyba ve vykreslovacím jádře prohlížeče a lze ji leda reportovat vývojářům a doufat, že třeba někdy…

Zajímavé je, že čím je tlačítko širší, tím ošklivěji se vykreslí. Takže vyřešením první chyby, tj. donucením Exploreru, aby tlačítka zúžil na odpovídající šířku, by se měl zmírnit či dokonce odstranit i efekt zubatého vykreslení. Uvidíme.

Zužujeme tlačítko

Pokusy nastavit různé hodnoty pro width nebo padding k ničemu nevedly. V takové chvíli se webdesigner uchýlí ke střelbě naslepo v podobě experimentování s CSS vlastnostmi jako display, overflow, position atd. Ukázalo se, že nápravu sjedná overflow: visible. Pak ale tlačítko těsně obepíná popisek, takže je záhodno ještě doplnit padding.

input.button {
    padding: 0 .3em;
    overflow: visible;
}

A vidíte? Zúžení tlačítek zcela eliminovalo vykreslovací vadu u druhého z nich, v případě třetího ji alespoň zmírnilo.

Pocit vítězství nad digitálním nepřítelem jsem si vychutnával přesně do chvíle, než jsem formulář s dlouhým tlačítkem naformátoval do tabulky a ejhle:

Ačkoliv se tlačítka vykreslují se správnou šířkou, v tabulce zabírají své původní místo. Problém vyřeší width:0. Jenže lepší prohlížeče (Opera, Firefox) nulovou šířku skutečně respektují, je tedy nutné použit IE-only hack. A to už je známá pohádka. Buď dát za vděk vylepšenému „podtržítkovému hacku“, tedy =width:0 (pro IE7 je nutné podtržítko zaměnit například za rovnítko), nebo oddělit styl pro IE pomocí podmíněných komentářů.

Zabrousil jsem na Google a pokusil se najít jiná řešení. Stejný zápas absolvoval jistý Jehiah Czebotar a po třech kolech s pomocí čtenářů došel k velmi podobnému výsledku, ale s jednou elegantní fintou navíc!

Zde je řešení:

/* chyba roztazenych tlacitek v IE pod WinXP */

input.button {
    padding: 0 .25em;
    width: 0; /* pouze pro IE */
    overflow: visible;
}

input.button[class] { /* IE ignoruje [class] */
    width: auto;
}

Finta spočívá v odlišení lepších prohlížečů od IE7 validní cestou. Díky tomu není potřeba „rovnítkový hack“ ani extra soubor se stylem. Kód tedy můžete použít pro všechny prohlížeče. Enjoy!

---

Související:

• La Trine: Dokonalé stylování formulářů
• La Trine: Ještě dokonalejší stylování formulářů

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

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í