Boxmodelhack och starHTMLhack

Ett boxmodelhack använder man sig av för att tvinga IE att läsa en css-kod som ignoreras av andra webbläsare. 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. Vi kan se ett exempel om det här:

  1. div box1{
  2. width: 200px;
  3. padding: 10px;
  4. border: #fff 10px solid;
  5. }

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.

  1. div box1{
  2. width: 200px;
  3. }
  4. div box1{
  5. \width: 240px;
  6. w\idth: 200px;
  7. }

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.

  1. div box1{
  2. width: 200px;
  3. padding: 10px;
  4. border: #fff 10px solid;
  5. }

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.

  1. * html div box1 {
  2. width: 240px;
  3. w\idth: 200px;
  4. }

Granskar 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:

  1. width: 240px; omfattar IE5 och IE6 i quirks mode
  2. 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:

  1. div.box1 { width:240px;
  2. voice-family: "\"}\"";
  3. voice-family:inherit;
  4. width:200px; }
  1. html>body .box1 {
  2. 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. Men vad betyder då alla stjärnor och slashar i koden?

Vi ska ta det långsamt. En webbläsare söker ju sig alltid mot roten i ett dokument. Det innebär att när du t ex ska länka bakåt i ett dokument kan du ange dessa tecken:

  1. ../

Detta hack fungerar på samma sätt. Denna css-kod “\” är denna: w\idth. Ge akt på “dubbelfnuttarna”. Dessa motsvarar bokstäverna i koden och dess lägen mellan slashen. Följdaktligen motsvarar således \”” denna kod:\width.

Inherit är inget annat än att det ska “ärva” defintionerna som är angivna.

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. Ett mycket bra hack.

Tnx to You Tantek!

Liknande poster:

Leave a Reply

Your email address will not be published. Required fields are marked *