Tantek Celik IE box model hack lépe

MyEgo.cz

home foto blogy mywindows.cz kontakt

Tantek Celik IE box model hack lépe

Technologie 17.04.04

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!

Komentáře

  1. 1 jm 16.04.04, 10:04:40
    FB

    A co hack typu: _width: 400px /* toto IE nevezme */

  2. 2 Petr Weida 16.04.04, 10:04:44
    FB

    Znám a používám, psal jsem o tom tady:

    http://www.zpravy.net/weblo...

  3. 3 Radek Hulán 16.04.04, 10:04:49
    FB

    [1] rozhodně není doporučeno v CSS používat podtržítka, preferuji tu posledně uvedenou variantu s *html body

  4. 4 jm 16.04.04, 11:04:23
    FB

    Proč to není doporučeno? Specifikace CSS to prý nezakazuje (sám jsem jí nestudoval).[3]

  5. 5 Radek Hulán 16.04.04, 11:04:34
    FB

    [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ů..

  6. 6 Pavel Kout 16.04.04, 11:04:40
    FB

    IE6 má dva různé renderovací módy - chová se tento hack v obou z nich korektně?

  7. 7 jm 17.04.04, 12:04:02
    FB

    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á.

  8. 8 Radek Hulán 17.04.04, 12:04:17
    FB

    [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...

  9. 9 pepi 17.04.04, 12:04:28
    FB

    :idea: Nejlepším řešením je matrjoška - neodporuje sttandardům a nevyužívá žádných chyb v prohlížečích!

  10. 10 Radek Hulán 17.04.04, 12:04:35
    FB

    [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:...

  11. 11 jm 17.04.04, 02:04:31
    FB

    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.

  12. 12 dgx 17.04.04, 02:04:35
    FB

    "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.

  13. 13 jm 17.04.04, 03:04:03
    FB

    [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é?

  14. 14 Petr Weida 17.04.04, 03:04:38
    FB

    [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*/

  15. 15 hurvajs 17.04.04, 10:04:03
    FB

    [12] zbytečný html kód... hm to je fakt, ale co ten zbytečný CSS?

    [10] Kdy nejde použít?

  16. 16 dgx 17.04.04, 11:04:49
    FB

    [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 :-)