kaxigt.com

Lästid: 4 minuter

Boxmodelhack star-html starfloatcommando används för att tvinga IE att läsa en css-kod som ignoreras av andra webbläsare.

Boxmodelhack

När man vill skapa en en css styrd layout, koda i xhtml och sedan validera denna, kan man ändå inte vara säker på att den visas i ett helt kompatibelt läge för andra webbläsare bara för att den validerar en webbstandard.

Då kan det vara bra att veta varför.

IE (IE5/Windows IE5.5/Windows IE6/Windows) har problem med att hantera padding och border för att den lägger värdet inuti boxen istället för att läsa av boxens bredd och sedan lägga till värdena.

Låt oss kika på detta fenomen!

div box1{
width: 200px;
padding: 10px;
border: #fff 10px solid;
}

Först skapade vi oss en box på 200px bredd. Till denna box knöt vi en padding på 10px samt en border på 10px.

Vad som händer är att enligt IE är boxen fortfarande 200px bred men att innehållet i denna box har minskat med 40 pixlar varför det endast återstår 160pixlar att arbeta med.

Valida webbläsare läser istället av värdet så här:
200px (boxens bredd) + 10px + 10px (paddingen 10px gånger 2 = 20px) + 10px + 10px (bordern 10px gånger 2 = 20px) = 240px bredd.

IE:s tolkning

Som du säkert upptäckte så ”bakar” IE in dessa värden i det ursprungliga värdet 200px medan FireFox och andra webbläsare ”plussar” på det värdet som ett tillägg till det ursprungliga, utanför boxen.

Konsekvensen blir givetvis att om du inte använder dig av ett hack så kommer dina boxar att uppträda som de själva vill beroende på om det är IE eller någon annan webbläsare som läser av din css.

Och det vill vi ju inte – eller hur!

Selektorer

Ett sätt att komma undan detta problem är att skapa två stycken selektorer där den ena skapar boxens värde för IE medan den andra ger information om boxen till de andra webbläsarna.

div box1{
width: 200px;
}
div box1{
\width: 240px;
w\idth: 200px;
}

Vad säger då detta oss?

Granskar vi den översta nya selektoren så har vi bara angett vårt värde width:200px. Denna selektor riktar sig därför till de webbläsare som klarar av att rendera koden på ett riktigt sätt. Typ Mozilla, Firefox, Opera osv.

Selektor nummer två med värdet \width:240px; är till för att Opera eller andra valida webbläsare inte ska komma i konflikt med värdet 240px eftersom dessa webbläsare redan från början tolkar padding och border som ett tillägg utanför det ursprungliga värdet.

Bakåtslashen

På ett enkelt sätt kan man alltså säga att slashen är ett redskap för att få dessa webbläsare att ignorera värdet i denna selektor. Värdet riktar sig nämligen till IE 5 och 6 i quirks mode.

Värdet w\idth: 200px; vänder sig slutligen till de webbläsare som inte hamnar i konflikt med slashen samt IE 6.0 i ett non-quirks mode. Värdet återställs i denna kod till sitt rätta värde, 200px.

Men – det finns fortfarande en webbläsare som inte klarar av att läsa in hack med slashen utan crashar på grund av detta. Netscape 4.0.

StarHTMLHack by Tantek

För att tillgodose en rendering för IE ska vi använda oss av något som kallas för Tanteks starHTMLhack.

Tanteks starHTMLhack utgår från IE:s (5 och 6 quirks mode) oförmåga att rendera koderna på ett rätt sätt eftersom denna webbläsare inte verkar för att HTML-taggen är rotelementet i ett dokument.

Genom att då använda ett starfloatcommando kan man lura IE att läsa in din css på ett korrekt sätt utan att de andra webbläsarna påverkas. Vi ska här kika på ett exempel och vi börjar med vår ursprungliga kod.

div box1{
width: 200px;
padding: 10px;
border: #fff 10px solid;
}

Ett starfloatcommando kan användas olika.

Ibland kanske man vill ge ett globalt värde i dokumentet så samtliga webbläsare ska tolka koderna som man vill. Då infogar man starfloat + värdet man vill ha högst upp i cssdokumentet, för att sedan mer ingående för varje div definiera respektive värde.

Star-HTML

Här ska vi infoga den lilla stjärnan tillsammans med attributet html och således tvinga IE att läsa in koden från roten. Minns också vad jag skrev ovan – IE tror inte att html utgår från roten i ett dokument. Men det gör det ju.

Lägger vi då till stjärnan i css-koden så talar den om för webbläsaren att den ska utgå ifrån roten.

För att ytterligare undaröja missförstånd så lägger vi till attributet html.

* html div box1 {
width: 240px;
w\idth: 200px;
}

Granskar vi sedan själva koden så känner vi igen dem – width: 240px; och w\idth: 200px;. I detta fall riktar vi oss direkt till Internet Explorer varför märkningen av värdet innebär detta:

width: 240px; omfattar IE5 och IE6 i quirks mode
w\idth: 200px; är till för IE6 i standard mode

Utifrån den ursprungliga css-koden hade vi också kunnat skriva om koden så här enligt Tanteks hack:

div.box1 { width:240px;
voice-family: "\"}\"";
voice-family:inherit;
width:200px; }
html>body .box1 {
width:200px; }

Starfloatcommando

Detta första starfloathack inkluderar både border och padding. Vi ser det i värdet width:240px; kontra width:200px;. Det andra html-hacket måste omedelbart följa det första och är ett hack så att Opera kan tolka slasharna utan att crasha.

Tantek kallar det för ”Be nice to Opera 5 rule” och eftersom Opera är en valid webbläsare anger vi vidden 200px.

Med andra ord har du angett värdet width:200px för alla valida webbläsare, sedan styr du in andra webbläsare som Opera att ignorera slasharna för att till sist tvinga IE att läsa av koden på rätt sätt.

Tnx to You Tantek!