Forsiden » Stylesheets » IE 7 oversigt

Parent>child-selektoren

Det er antagelig velkendt, at parent-child-selektoren (forældre-barn-selektoren) ikke tolkes af Internet Explorer. I hvert fald har det faktum været flittigt anvendt i årevis til at passere rigtige værdier til standard-kompatible browsere efter først at have sendt nogle forkerte værdier til alle browsere. Resultatet er så, at de rigtige værdier læses af de standard-kompatible browsere, mens Internet Explorer arbejder videre med de værdier, denne browser skal have.

IE 7 understøtter også forældre-barn-selektoren, der vælger et førstegenerationsafkom af forældre elementet. Syntaksen for denne er
forældreelement>barnelement {formregelblok}.

Stylesheet

#indhold>ul.test {color:green;}

Hovsa! Vil brugen af IE 7 så ikke invalidere mine eksisterende stylesheets, der er fyldt med hacks, der netop bygger på denne selektor?

Sandsynligvis ikke. De allerfleste af manglerne ved Internet Explorers håndtering af CSS-egenskaberne er udbedret, når IE 7 indlæses, så denne browsere ter sig som de allerfleste andre browsere, uanset om det gælder Internet Explorer 5 eller Internet Explorer 6 i quirks eller standard modus. Som et antageligt meget typisk eksempel vil jeg nævne boksmodellen.

div#box {
  background:#ddd;
  width:200px;
  height:200px;
  padding:20px;
  border:10px solid gray;}
body>div#box {
  width:140px;
  height:140px;}

Internet Explorer og CSS-boksmodellen

Stylesheet'et herover skal tegne en boks, der er 200 pixel bred og 200 pixel høj. Denne højde og bredde fremkommer som summen af kassens højde og bredde på 140 pixel tillagt bredden af padding og border.

Internet Explorer 5 og Internet Explorer 6 i quirks modus indregner imidlertid padding og border i width. Den første formdeklaration tager hensyn til dette, idet kassens samlede synlige bredde sættes til 200 pixel.

Det vil imidlertid betyde, at alle andre moderne browsere vil tegne en kasse, der er alt for stor. Derfor passerer vi de rigtige mål i den nederste formdeklaration. Denne læses af alle andre browsere end lige netop Internet Explorer.

Nu har vi så det problem, at Internet Explorer 6 i standardmodus – det vil sige med en validerende dokumenttypeerklæring – faktisk følger reglerne for beregningen af en CSS-kasses bredde og højde. Der vil en sådan kasse på en webside med en validerende dokumenttypeerklæring også blive alt for stor.

I nogle år vi så gjort det, at vi brugte en ikke-validerende dokumenttypeerklæring på vore websider, således at Internet Explorer kommer i quirks modus og beregner boksmodellen forkert. Så virker ovenstående fortsat.

Nu har Internet Explorer 6 imidlertid været på markedet så længe, at andelen af Internet Explorer 5 brugere er ganske ringe, måske 10 procent Internet Explorer brugere.

Så ganske uanset IE 7, som det her jo handler om, mener jeg at tiden forlængst er kommet, hvor websider bør laves med en validerende dokumenttypeerklæring, og hvor vi må finde andre CSS-filtre for at tilgodese de restreende IE 5 brugere.

Konklusionen på denne lille diskurs er, at du bør ophøre med at bruge forældre-barn-selektoren som CSS-filter. Du bør gennemgå dine stylesheets og finde de steder, den forekommer, og enten erstatte den med f.eks. Tantek Çeliks berømte IE5 filter (se evt. websiden Tantek Çelik's Escape-sekvenser) eller ...

... bruge IE 7

Som det fremgår af artiklen om box-sizing i denne sektion fixer IE 7 også CSS boksmodellen i såvel IE5 som IE6, uanset hvilken modus denne browser er i. Så du behøver for så vidt ikke bekymre dig om noget, hvis du har brugt forældre-barn CSSS-filtret i dine stylesheets. Internet Explorer får de rigtige mål.

Februar 2005

Understøttede CSS2 selektorer

Understøttede CSS2 egenskaber

Understøttede html-elementer