Asi každý zná, a bohužel i používá, IE voice-family hack pro jeho chybný box model, který původně navrhl Tantek Celik. Nicméně, problém tohoto hacku je v jeho nevaliditě, nepřehlednosti, a rozsahu nutného psaní CSS kódu.
Původní Tantek Celik hack je následující:
.content {
width:400px; /* pro Mozillu, Opera 6.x, 7.x */
border:20px solid;
padding:30px;
voice-family: ""}"";
voice-family:inherit;
width:300px; } /* pro IE */
html>body .content { width:300px;} /* pro Operu 5.x, se stejnou chybou jako IE */
Toto řešení ovšem zjevně není moc elegantní.
Jiné řešení je pochopitelně "matrjoška", tedy obalit daný "content" do dalšího boxu. To sice je pro změnu v CSS validní, ale zase to má nevýhodu ve zbytečných DIVech v XHTML kódu navíc.
Příklad:
.matrjoska{ width:400px; }
.content {
border:20px solid;
padding:30px;}
A v XHTML kódu:
<div class='matrjoska'>
<div class='content'>
</div>
</div>
Je to sice elegantnější řešení, ale… zase markup v CSS i XHTML navíc.
Nejlepší řešení je zřejmě následující, které je validní, a vyžaduje jen minimální CSS markup a žádný v XHTML! Toto řešení využívá jiné chyby ve všech verzích IE (kterou jiné browsery nemají), a to sice v selektoru * html, popřípadě * html body (tomu by neměl odpovídat žádný prvek, protože html element je úplně první, nic nemůže být před ním, nicméně IE selektor * ignoruje a chápe to jako html, popřípadě html body).
Jak toto využít? Takto:
.content { width:400px;
border:20px solid;
padding: 30px;}
* html body .content {width:300px} /* toto vezme pouze IE! */
Je to skutečně mimořádně elegantní řešení, vyžaduje minimální markup v CSS a žádné změny v XHTML!
A co hack typu: _width: 400px /* toto IE nevezme */
Znám a používám, psal jsem o tom tady:
http://www.zpravy.net/weblo...
[1] rozhodně není doporučeno v CSS používat podtržítka, preferuji tu posledně uvedenou variantu s *html body
Proč to není doporučeno? Specifikace CSS to prý nezakazuje (sám jsem jí nestudoval).[3]
[4] protože IE5+ sice ignoruje hodnoty s _abcd, ale to se může změnit.. předchozí řešení, když je Microsoft někdy opraví, nebude mít žádné následky, nebudou nutné úpravy CSS souborů..
IE6 má dva různé renderovací módy - chová se tento hack v obou z nich korektně?
Dobrá, ale tyto hacky používáme ke kompenzaci chybných "box-modelů" u IE5 a IE5.5, kde metoda _abcd funguje. Novější IE už počítá šířky správně, a tak nám může být celkem jedno, jestli vlastnost s podtržítkem rozpozná.
[6] zkoušel jsem jen XHTML 1.0 STRICT, a tam se tento hack chová tak, jak potřebuji
více info: http://www.info.com.ph/~eta...
💡 Nejlepším řešením je matrjoška - neodporuje sttandardům a nevyužívá žádných chyb v prohlížečích!
[9] není tomu tak, matrjošku nelze použít vždy, navíc, tímto prezentovaných * html body trikem, validním, i v budoucnu fnukčním, můžete dělat i jiné věci než jen width:...
Problém matrjošky spočívá v dalším zbytečném divu v (X)HTML dokumentu, čímž zvětšujeme datový objem dokumentu a zdrojový kód se stává méně přehledným.
"Hackovat" CSS pridavanim zbytecneho kodu do HTML? To je mi pripada jako ta nejhorsi varianta - toliko k Matrojsce. Ano, neni to spatna vec, ale pouzivam na zcela jine veci.
Na box model se mi osvedcilo nasledujici reseni:
div {
padding: 10px;
width: 100px;
width: 80px;
}
je to zcela cisty, validni kod. Moderni browsery (Opera, Mozilla, IE 6 v CSSCompat rezimu), ktere pouzivaji standardni box-mod, zaroven akceptuji width, starsi IE si width neberou. Funguje to naprosto bezvadne, je to jednoduche, ne?
(pro IE6 je treba CSSCompat rezimu, ale to by melo byt samozrejmosti).
Jinak pouziti _width je zcela v souladu se standardem CSS. Validator na to ale upozornuje. To je ovsem jeho problem.
[12] width není špatné. Pokud je to v souladu se specifikací a validator na to navíc neupozorňuje, tak se zdá, že se jedná zatím o nejlepší a nejjednodušší řešení. Díky za tip. Jedná se o Váš vlastní vynález nebo je to již všeobecně známé?
[13] Viz třeba u Pixyho:
http://www.pixy.cz/blog-blo...
je pěkné řešení:
width: 80px; /*nie-IE browsers*/
_width: 100px; /*IE 5.x*/
_width: 80px; /*IE 6*/
[12] zbytečný html kód... hm to je fakt, ale co ten zbytečný CSS?
[10] Kdy nejde použít?
[13] pokud dnes nazvete nejaky postup vlastnim vynalezem, musim zvolat ono zname "TED TU BYL...." Takze ano, jde o vlastni vynalez, ktery uz napadl jiste celou radu kouzelniku predemnou, aniz bych to tusil 🙂
Viz napriklad veleslavne Pixyho rollovery bez preloadu z roku 2003, a zcela totozne reseni z roku 1998 http://www.webreference.com...
[14] Ano, jde temer o totez s tim rozdilem, ze ma o radek vic a je nevalidni 🙂