Boxmodelhack och starHTML
Förord
Ett boxmodelhack använder man sig av för att tvinga IE att läsa en css-kod som ignoreras av andra webbläsare.Innehåll
»»
Relaterade artiklar
När man då 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 browsers bara för att den validerar en webstandard. Då kan det vara bra att veta varför. IE (IE5/Windows och IE5.5/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!
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. Som du säkert upptäckte så "bakar" IE in dessa värden i det ursprungliga värdet 200px medan FF och andra browser "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!
Ett sätt att komma undan detta problem är att skapa två stycken selectorer där den ena skapar boxens värde för IE medan den andra ger information om boxen till de andra webbläsarna.
Vad säger då detta oss?
Granskar vi den översta nya selectoren så har vi bara angett vårt värde width:200px. Denna selector 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. Selector 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. 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 selector. 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.
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.
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.
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.
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:
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äsarna 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.
mvh/Lillan
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. Som du säkert upptäckte så "bakar" IE in dessa värden i det ursprungliga värdet 200px medan FF och andra browser "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!
Selectorer
Ett sätt att komma undan detta problem är att skapa två stycken selectorer 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 selectoren så har vi bara angett vårt värde width:200px. Denna selector 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. Selector 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. 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 selector. 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.
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; } 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äsarna 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.
mvh/Lillan
Pelle Johansson
Tackar för artikeln, klart intressant läsning och bra skrivet!