Stjerne-hacket

Stjerne-hacket kan ikke bruges i Internet Explorer 7.

 

Kassen herover vil være gul i de fleste browsere, og blå i de browsere, der er flest af.

Med "de fleste browsere" mener jeg alle de forskellige browsere, som ikke fremstilles af Microsoft. Men der er ingen tvivl om, at der er flest af netop Microsoft Internet Explorer.

Grunden til, at kassens baggrundsfarve er anderledes i Internet Explorer, er at den blå farve er sat ved hjælp af en selektor, som kun IE læser:

div#boks {
float:left;
border:1px solid black;
width:150px;
height:90px;
background:#ffcc00;
margin-bottom:1em;
}
* html div#boks {
background:#66cccc;
}

I dette stylesheet sættes kassens baggrundsfarve til først at være gul, og dernæst, i en ny formdeklaration, til at være blå.

Tricket ligger i universalselektoren, der i klart sprog kan beskrives som "udvælg alle elementer i et element div#boks, der er barn af html-elementet".

Lovligt, men ukorrekt.

Med undtagelse af body-elementet er alle andre html-elementer nødvendigvis i det mindste børnebørn af html-elementet. Der findes ikke noget barn af html-elementet med navnet (id'en) div#boks. Derfor har den nederste formdeklaration ingen virkning i en browser, der fortolker formregler i henhold til W3C's standard.

Men det gør IE ikke. Denne browser læser selektoren som om den var gyldig og giver div#boks de egenskaber, der er defineret i denne formregel.

Internet Explorer 7

Vurderet på beta-versionen af Internet Explorer 7, som jeg har kigget en smule på i dette forår, er denne fejlagtige fortolkning af stjerne-hacket rettet i Internet Explorer 7.

Det er jo lidt uheldigt for os, der har brugt netop dette hack til at passere formregler til IE, der skulle få denne browser til at fortolke vore stylesheets på samme måde som mere standardkompatible browsere. (Men vi ligger vel som vi har redt...)

Men vi kan jo heller ikke blot gennemgå vore stylesheets og fjerne alle de stjernehacks, der findes i dem. Det varer jo en rum tid, før alle har erstattet deres tidligere versioner af Internet Explorer med en nyere version.

Det, jeg i skrivende stund har fundet på, er at indsætte en Microsoft betinget kommentar (Conditional Comment) lige efter mit stylesheet, på denne side således:

<!--[if lt IE 7]>
<style type="text/css" media="screen">
  div#boks {background:#ffcc00;}
</style>
<![endif]-->

I mere produktionsorienterede miljøer ville jeg nok lave ét stylesheet, og importere det til alle sider efter alle andre stylesheets, sålunde:

<!--[if lt IE 7]>
<style type="text/css" media="screen">
  @import url(iestyles.css);
</style>
<![endif]-->

Denne side er senest opdateret: 13. January, 2007