Není nad defaultní nebo chybné implementace
Občas člověk může jen zuřit. Kouká hodinu do monitoru a nechápe. Mezitím stihne obvinit všechny a všechno kolem sebe, zajistit si několik modřin na ruce nebo vytvořit pár kusů rozbitého nádobí, nábytku a podobně. Na vině jsou však lidé, které není možné seřvat na tři doby, stěžovat si na ně u šéfa a o to ještě hůř vysvětlit klientovi, proč taková úprava trvala takovou dobu, když jde jen o ptákovinu.
Případ první: Firefox – default line-height pro tlačítka
Kdosi měl ve vývojovém týmu jádra gecko výborný nápad. CSS atribut „line-height“ bude mít nastavenou hodnotu tak, že u ní nebude možné použít žádný z legálních css override způsobů. Možná to ušetřilo jemu několik hodin při implementaci, ale většině kodérů a webařů to naopak čas přidělalo, a pokud uděláme jejich Sum, tak čas toho jednoho lenocha u gecka je ničím proti všem, kteří se s tímto problémem museli popasovat, znásilňovat google a vývojářské weby.
Obviněný:
- řádek 483: line-height: normal !important;
- zdroj: resource://gre/res/forms.css
Deklarace jádra gecko, kterou není možné přepsat, zajistí, že zatímco jiné prohlížeče (dokonce i IE) zobrazí tlačítko podle předvolených parametrů, firefox ho zobrazí s line-height vypočtenou relativně k aktuálně nastavené velikosti font-size.
Řešení:
Na první pohled jednoduchý workaround je ponechat pro tlačítka line-height na „normal“ a potřebné odsazení zajistit pomocí atributů height a padding. Podle ohlasů na webu se ale liší implementace v jednotlivých prohlížečích, takže pokud na pozadí budete používat obrázek, nebude jeho pozicovaní a „pěknost“ 100% crossbrowser kompatibilní.
Případ druhý: Firefox, Webkit – border-radius a <img> element
Tento problém je hodně palčivý. Zejména protože pro něj není řešení, tak prozatím prakticky znemožuje použití border-radius v reálné praxi.
Situace:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
div {margin: 100px; -moz-border-radius: 30px; -webkit-border-radius: 30px; border: 3px solid #f00; float: left}
img {display: block}
</style>
</head>
<body>
<div>
<img src="image.jpg" alt="image" />
</div>
</body>
</html>
Obviněný:
Východisko:
Případ třetí: Webkit – background overflow pro border-radius
Tohle bylo poměrně nepříjemné překvapení, vzhledem k tomu, jak si webkit zakládá na své pokrokovosti s ohledem na css3.
Situace:
Vytvořte si jednoduchý DIV a dejme mu tyto css vlastnosti:
- margin: 100px;
- -moz-border-radius: 30px;
- -webkit-border-radius: 30px;
- border: 3px solid #ddd;
- float: left;
- width: 100px;
- height: 100px;
- background: #cc0000;
- -webkit-background-clip: padding-box !important;
Výsledek zápisu se projeví ve Firefoxu a Chrome/Safari:
firefox
webkit
Změny chování podle jiného nastavení:
Tento nepříjemný jakoby matte GIF efekt se vyskytuje u gecko based prohlížečů. Safari, Chrome, Win a Mac verze.
Trošku jsem špekuloval a výsledek je, že velikost border nehraje roli.
Chybné zobrazení se ale neprojeví, pokud border-radius nepřesáhne velikost 10px.
Co k tomu dodat?
Svět by byl o mnoho jednodušší, kdyby tyto drobnosti byly vyřešeny. Vypadá to ale, že to ještě několik night buildů bude trvat, než geckové a webkiťáci tyto problémy vyřeší, no a taky ještě nesmíme zapomenout na IE, které určitě rádo pár svých vychytávek a špeků pro webaře připraví.
[...] This post was mentioned on Twitter by summon group, oMicrone. oMicrone said: Není nad defaultní nebo chybné implementace http://bit.ly/c6enFb [...]