Obrázek na pozadí horizontální čáry (HR) bez obalového prvku v IE
Rád bořím mýty a hraju si s kaskádovými styly. Dnes jsem si při čtení dávno zaprášených záložek přečetl u Marka Prokopa a Petra Václavka, že se jim v IE nepodařilo zbavit se otravného borderu kolem prvku <hr> tak, aby mohli na pozadí umístit obrázek nějakého jiného, elegantnějšího oddělovače. Já řešení znám.
Chci hezkou čáru, chci ji sémanticky a prakticky
- Pokusit se nastylovat prvek <hr> tak, aby měl patřičnou výšku a na pozadí zobrazoval žádaný ornament. Toto je samozřejmě to nejsémantičtější i nejpraktičtější řešení.
- Ornament zobrazit pomocí background-image na spodek odstavce, kterému nastavíte větší padding-bottom. Vodorovnou čáru, tedy prvek <hr>, skryjete pomocí display: none.
- Vzhledem k tomu, že se vám nepovede realizovat bod jedna, obalíte <hr> prvkem <div>, kterému nastavíte ornament na pozadí, a prvek <hr> skryjete pomocí display: none.
Jak na to půjdou jednotliví kodéři?
- Začínající kodér či kodér ignorující sémantiku dokumentu použije prvek <div> a na nějaké <hr> se vykašle.
- Pokročilejší kodér, který už jednu či dvě stránky vytvořil, se pravděpodobně pokusí o bod 2.
- Kodér-hračička, který chápe kodéřinu jako tvůrčí činnost a ne jako pouhé řemeslo, se bude trápit a pokoušet se o bod 1.
- Kodér-mazák, profík, stroj na layout, se pravděpodobně uchýlí rovnou k řešení 3, protože ví, že trápení se s bodem 1 už mu kdysi v minulosti přidalo pár vrásek.
Kde je problém?
Můžete se ptát, co je tak obtížného na splnění bodu jedna. V tom případě se podívejte na ukázku.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<title>Obrázek na pozadí prvku HR</title>
<style type="text/css">
hr {
border: none;
background: url('obrazek.gif') center center no-repeat;
height: 15px;
}
</style>
<p>Lorem ipsum...</p>
<hr>
<p>Lorem ipsum...</p>
<hr>
<p>Lorem ipsum...</p>Pokud jste ukázku otevřeli v nějakém moderním prohlížeči, například Firefoxu, Opeře či Safari, vidíte zamýšlený výsledek. Odstavce jsou odděleny třemi čtyřlísky, které jsem si vypůjčil od Marka Prokopa. Pokud jste však použili libovolnou verzi Internet Exploreru (ano, včetně IE7!), vidíte kolem ornamentu okraje čáry i přes to, že pro prvek <hr> jsem ve stylopisu nastavil border: none;
V tomto okamžiku svorně krčí rameny jak Marek Prokop, tak Petr Václavek. Prý řešení neexistuje.
A just existuje…
… byť maličko krkolomné. Ne však pro někoho, kdo si potrpí na čisťounkém a snadno použitelném markupu a kdo nechává veškerou „špinavou“ práci na kaskádových stylech. Po chvilce zkoušení zjistíte, že když nastavíte vlastnost color tak, aby se rovnala barvě pozadí, rámeček zmizne. S ním však i obrázek na pozadí – tudy tedy cesta nevede, ale zato víte, že to, co se zdálo být rámečkem, je ve skutečnosti obsahem (!) prvku <hr>. Napadne vás tedy prubnout záporný text-indent a tento obsah vysunout pryč z obrazovky. To se povede, bohužel obsah s sebou „záhadně“ (vysvětlení je složitější) vezme i obrázek na pozadí. Další slepá ulička, připadáte si jako Jára Cimrman a naštvaně mažete celý zdroják.Takhle nějak si představuji, že skončily veškeré předchozí pokusy. Možná se ještě někdo porozhlédl po internetu a zjistil, že existují nepraktická řešení využívající CSS vlastnosti clip (čára musí být absolutně pozicovaná) nebo filtrů (obsah redukován na 1×1 pixel, nelze tedy na čáru například aplikovat border, background-color nebo opakovat vzorek na pozadí). Možná tato řešení použil a dosáhl tak nejvýš pyrrhova vítězství, které však postrádalo eleganci či praktičnost. Co jsem tedy vymyslel já?
Využití nestandardní vlastnosti zoom
Stačí pomocí vlastnosti zoom zmenšit čáru na méně než polovinu (v praxi je nejvyšší funkční hodnota 40% původní velikosti) a šířka rámečku kolem obsahu se zaokrouhlí na nulu. Nebudu vás napínat – funguje to. <hr> má navíc jednu příhodnou vlastnost – ať už ji zoomnete jakkoliv, vždy zachovává nastavenou šířku!
Co je pro to v praxi třeba udělat?
- Vzít původní obrázek na pozadí, zvětšit jej na čtyřnásobek (doporučuji pracovat se zoom: 25%) a uložit ho pod jiným názvem.
- Přidat do dokumentu podmíněný komentář, kterým přilinkujete speciální stylopis pouze pro Internet Explorery. Vlastnost zoom je samozřejmě nevalidní, nehyzděte jí svůj hlavní stylopis.
- V tomto speciálním stylopisu nadefinovat nový styl pro čáru, který se od toho původního bude lišit už zmíněnou vlastností zoom, čtyřnásobě velkým obrázkem na pozadí, dále nastavenou čtyřnásobnou výškou (height) a pokud používáte nějaké ohraničení čáry, tak i jeho čtyřnásobnou šířkou.
Výsledek by mohl vypadat nějak takto:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<title>Obrázek na pozadí prvku HR</title>
<style type="text/css">
hr {
border: none;
background: url('obrazek.gif') center center no-repeat;
height: 15px;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
hr {
background-image: url('ctyrnasobne-velky-obrazek.gif');
height: 60px;
zoom: 25%;
}
</style>
<![endif]-->
<p>Lorem ipsum...</p>
<hr>
<p>Lorem ipsum...</p>
<hr>
<p>Lorem ipsum...</p>Druhý odkaz ukazuje, že moje řešení dává kodérovi možnost s takto nastylovanou čárou dále pracovat a upravovat ji.
Závěrem…
Není to úplně ideální způsob, ale osobně jej pokládám za první opravdu použitelný – ten jeden obrázek navíc mně osobně za ten efekt stojí. Nejsem si vědom toho, že by na něco podobného přišel někdo přede mnou, ale pokud tomu tak opravdu je – nebo pokud znáte lepší a čistější řešení – prosím, odkažte na ně v komentářích. Příště vám možná ukážu, jak se v IE zbavit toho otravného marginu-nemarginu nad a pod čárou a jak tedy clearovat bez zbytečného vertikálního rozestupu.
Komentáře k tématu vítány.