Microsoft betingede kommentarer

Microsoft har selv fabrikeret nogle udveje for os, der ønsker i vore stylesheets at kunne skelne mellem forskellige versioner af Internet Explorer.

Du ser kun dette, hvis du ikke bruger Internet Explorer.

Du ser herover en kasse med en blå rammekant. Indholdet af kassen er er en kort tekst.

Det interessante ved denne side er det, du ikke ser, nemlig at der er forskel på kassens indhold alt efter om den browser, du bruger, er Internet Explorer eller en hvilkensomhelst anden browser.

Da 90 procent af dem, der læser mine websider, bruger Internet Explorer, går jeg ud fra som næsten givet, at du ser en grøn tekst, der bekræfter, at du rent faktisk bruger Internet Explorer.

Jeg går imidlertid også ud fra, at dem, der læser min websider, er så tilpas interesserede i websidekonstruktion, at de som en selvfølge har mindst én alternativ browser installeret. Hvis du læser denne webside med denne alternative browser, vil du se en dybrød tekst, der bekræfter, at du netop ikke bruger Internet Explorer.

Hvad skal de kunster nu til for? kunne du spørge.

Svaret på det er, at vi i websidekonstruktion konstant må kæmpe med, at Internet Explorer på en række nøgleområder opfører sig markant anderledes end alle andre browsere. Der var (næsten) til at bære – folk kan da f.f. bare anskaffe sig en ordentlig browser! – hvis det ikke lige var fordi Internet Explorer ikke er en ordentlig browser. Faktisk er Windows-udgaven en skod browser, hvis vi vurderer den i forhold til overholdelse af webstandarderne.

Den mening kan hverken du eller jeg imidlertid bruge til ret meget, i betragtning af, at det store flertal af dem, vi laver websider for rent faktisk bruger en eller anden version af denne browser.

Derfor bruger vi "hacks" til at indrette vore sider således, at de ser ordentlige ud i både standardkompatible browsere og i Internet Explorers forskellige versioner.

Det har jeg tidligere skrevet et par artikler om, især i relation til problemerne med CSS-boksmodellen. Jf. Internet Explorer og CSS boksmodellen.

Microsofts egne hacks

Jeg kom for nogle år siden (2003) undervejrs med, at Microsoft selv har publiceret en slags "hack", der umiddelbart forekommer mere generelt anvendelig end de mange øvrige forslag, der suser rundt på nettet, se f.eks. http://css-discuss.incutio.com.

Det er Microsofts egne såkaldt betingede kommentar-markører (Conditional Comments), der er anvendt til den lille demo øverst på denne side. Hele sagen er udmærket beskrevet på Microsofts egen side om det: http:msdn.microsoft.com/author/dhtml/overview. Jeg beskriver hovedpunkterne i det efterfølgende, inkl. nogle konkrete anvisninger på, hvorledes du kan anvende denne metode til at at sikre ensartet visning af CSS-formaterede elementer i henholdsvis Internet Explorer for Windows og standardkompatible browsere. (Konceptet virker altså ikke i IE5/Mac).

Konceptet hedder "Conditional Comments", hvilket kan oversættes til "betingede kommentarer". Idéen er baseret på tolkningen af noget indhold i HTML-kommentarmarkøren, der i dette koncept kan antage 3 forskellige former:

Standard HTML-kommentar<!-- Skjult indhold -->
Vis HTML<!--[if betingelse]>HTML-kode<![endif]-->
Skjul HTML<![if betingelse]>HTML-kode<![endif]>

Der er to slags betingede kommentarer, nemlig

  1. den betingede kommentar, der viser det markerede i Internet Explorer 5, 5.5 og 6 (og formodentlig i fremtidige Microsoft browsere) og skjuler det for alle andre browsere; og den komplementære
  2. betingede kommentar, der skjuler det markerede i Internet Explorer 5, 5.5 og 6 (og formodentlig i fremtidige Microsoft browsere) og viser det i alle andre browsere.

Det er disse komplementære kommentar-markører, jeg har brugt i eksemplet her på siden. Kildekoden til dette eksempel er følgende:

<!--[if IE]>
<p class="ie">Du ser kun dette ... </p>
<![endif]-->

<![if !IE]>
<p class="notie">Du ser kun dette ...</p>
<![endif]>

Vis i IE, skjul i andre browsere

De øverste tre linier i eksemplet gengiver syntaksen for en kommentarmarkør, der viser indholdet af kommentaren i Internet Explorer, men skjuler det for alle andre. Det sidste kan ikke komme som nogen overraskelse, for alle kendte browsere vil tolke <!-- ... --> som noget, der skal skjules. Internet Explorer derimod, analyserer betingelsen, og hvis den er opfyldt, vises indholdet af kommentarmarkøren.

Betingelsen er i eksemplet givet som bogstaverne IE. Der er ikke andre muligheder. Derimod kan du knytte versionsnumre til IE, således at betingelserne IE 5 og IE 6 kun er opfyldt, hvis også versionsnummeret er korrekt. I Microsofts dokumentation på ovennævnte url er der en del mere forklaring om dette, idet du kan pinde versionsnummeret helt ud i decimalerne. Ligeledes er det forklaret, hvorledes du kan anvende logiske operatorer for at skelne forskellige IE-versioner fra hinanden. Min interesse i det her er imidlertid primært at udskille IE fra andre browsere i relation til stylesheet formregler, samt at passere forskellige formregler til Internet Explorers to nyere versioner IE5 og IE6.

Skjul i IE, vis i andre browsere

De nederste tre linier i eksemplet gengiver syntaksen for en kommentarmarkør, der skjuler indholdet af kommentaren for Internet Explorer, men viser indholdet i alle andre browsere. Det sidste kan heller ikke komme som nogen overaskelse, for det vi har her er et par u-almindelige HTML-makører, det vil sige markører med et indhold som ingen browsere uden for Internet Explorer familien forstår en dyt af. Og alle kendte browsere springer let og elegant hen over en markør, som de ikke kender. Internet Explorer derimod, er åbenbart programmeret til at genkende dette markørpar og reagerer på det ved ikke at vise markørparrets indhold, som i dette eksempel er tekst, men udmærket kunne have været et stylesheet eller et script.

Validering

At alle andre browsere end IE kan genkende HTML, der er skjult for IE, skyldes, at IE er programmeret til at skjule indholdet, mens andre browsere ikke er således programmerede. Det, en anden brower ser, er en stump kode, browseren ikke forstå, og i overensstemmelse med standarden skal browseren vise den ukendte markørs indhold, og fortsætte læsningen af siden.

Det samme ville ske, hvis du lavede noget kode, der så således ud:

<anders>Anders</anders>

Her vil alle browsere vise navnet Anders.

Der er imidlertid tale om ugyldig (invalid) kode, og derfor vil en webside med et sådan indhold ikke kunne validere som 100 procent korrekt i en HTML validator.

Praktisk anvendelse

Eksempelkasse

Kassen set i IE5 uden hack

Kassen her til venstre er den sædvanlige CSS-boks. Den skal have en bredde på 150 pixel og en højde på 150 pixel. Den er forsynet med en border på 20 pixel på alle sider og padding-egenskaben er også sat til 20 pixel på alle sider. Ifølge CSS-standarden skal boksen derfor fylde 230 pixel i bredden og 230 pixel i højden. For at du kan vurdere det, har jeg indsat en lille rød grafik under figurerne. Den er 230 pixel bred.

Sandsynligheden taler for, at du ser det ønskede resultat, fordi sandsynligheden taler for, at du bruger en browser, der overholder standarden. Det gælder også Internet Explorer 6, der overholder standarden på websider med en validerende dokumenttypeerklæring, hvad denne side har.

Internet Explorer 5 og Internet Explorer 6 i såkaldt "quirks" modus vil imidlertid vise noget andet, nemlig det, du ser i figuren nederst. Det er en grafik, et snapshot af en del af denne side vist i Internet Explorer 5.

Der er to årsager til, at du kunne ønske at gøre noget ved dette: Den ene er, at der fortsat er en hel del mennesker, der bruger Internet Explorer 5 - omkring 15 procent af de besøgende på dette websted bruger denne browser i december 2003. Den anden er, at Internet Explorer opfører sig ligedan, medmindre du forsyner dine websider med en standardsættende dokumenttypeerklæring. Og det er jo ikke sikkert, du er parat til det.

<style type="text/css">
[ Andre formregelblokke vedr. denne side ]
div#box {
  width:150px;
  height:150px;
  float:left;
  background:#33cccc;
  border:20px solid #369;
  padding:20px;
  margin-right:10px;
}
</style>

<!--[if IE 5]>
<style type="text/css" media="screen">  
div#blok {
  width:230px;
  height:230px;
}
</style>
<![endif]-->

Det, jeg konkret foreslår, er at lave et stylesheet specielt for Internet Explorer 5, og skjule den for alle andre browsere. Stylesheet-koden til venstre viser øverst det stylesheet, jeg har lavet for den blå kasse.

Under dette ser du den betingede kommentar, der læses af Internet Explorer 5 – og kun af denne browser – og hvor betingelsen sørger for, at der indlæses endnu et stylesheet, hvorigennem der passeres en anden højde og en anden bredde til denne browser, der viser højde og bredde som summen af height+padding+border, hhv. width+padding+border.

Hvis du laver en webside med med en ikke-validerende dokumenttypeerklæring, sætter du Internet Explorer 6 i såkaldt "quirks" modus, hvor den tolker stylesheet formreglerne som om det var en IE5-browser. Så er du nødt til at passere den "forkerte" højde og bredde til begge versioner. Det kan du nemt gøre ved hjælp af følgende betingede kommentar:

<!--[if IE]>
<style type="text/css" media="screen">  
div#blok {
  width:230px;
  height:230px;
}
</style>
<![endif]-->

Jeg har simpelt hen pillet versionsnummeret ud.

Noget om float marginer

Float-boks

Alle IE-versioner har det vældig skidt med float'ede elementer, der er forsynet med en højre og/eller venstre margin. Disse browsere fordobler simpelthen marginens bredde. Til venstre ser du en kasse, der blandt andet har egenskaberne float:left og en venstre margin på 40 pixel. Kigger du på denne side med en version af Internet Explorer, vil kassens venstre margin helt indlysende være 80 pixel.

Jeg kan iagttage – i de online diskussionslister jeg abonnerer på – at virkelig mange simpelt hen ikke tror deres egne øjne, når de oplever dette, og i stedet tror der er et eller andet galt med deres stylesheet i øvrigt.

Remediet imod dette er ikke at halvere marginerne, så det ser rigtigt ud i Internet Explorer. Så ser det jo forkert ud i alle de andre browsere, som der heldigvis bliver flere og flere af (omend langsomt).

Du kan bekæmpe dette uvæsen ved at lave et stylesheet, der serverer de rigtige marginbredder til ordentlige browsere og de forkerte marginbredder (det vil sige, den halve værdi) til skodbrowerserne – det vil sige IE (Også IE6 har denne fejl, også på websider, der har en standardsættende dokumenttypeerklæring.)

Float-boks

Du kan sagtens bruge en af de "hacks" jeg har beskrevet i mine artikler om Internet Explorer og CSS-boksen til at sætte to forskellige marginer for hhv. Internet Explorer og for alle andre browsere. Det forekommer mig imidlertid, at der er en vis retfærdighed i at bruge den metode, som Microsoft selv på en måde anbefaler. (Det er jo ikke sådan, at MS indrømmer, at der er fejl i deres browsere. De bringer blot en artikel om betingede kommentarer. Vi andre må så regne ud, at de kan bruges til at rette op på de mange "bugs", MS-browserne er behæftede med.)

<!--[if IE]>
<style type="text/css" media="screen">  
div#floatbox2 {
  margin-left:20px;
}
</style>
<![endif]-->

Det særlige stylesheet, jeg har brugt til at sætte marginen på den anden og nederste udgave af den blå float-boks ser du herover.

Forbehold

Nu, hvor jeg har fundet ud af det, er jeg lidt glad for denne metode. Den er for en umiddelbar betragtning noget lettere at have med at gøre end de efterhånden mange forskellige andre hacks, der flyder rundt på nettet, og hvoraf en del er ret så esoteriske og vanskelige at huske.

Skade kun, at den kun virker i IE/Windows, og altså ikke på den noget udbredte IE5/Mac.

For websmeden er der det yderligere irritationsmoment, at vi ikke kan teste vore sider, hvis vi har mere end én udgave af Internet Explorer på vores system.

Kan man da det, kunne du spørge. Og ja – hvad alle havde troet umuligt indtil for få måneder siden, blev pludseligt muligt gennem et begavet stykke pionerarbejde, som jeg kort refererede i mit mit nyhedsbrev for november 2003).

Den gode nyhed i den forbindelse er, at dersom du har installeret en ekstra version af Internet Explorer, kan du flytte alle filerne vedrørende denne til en zip-fil. Så er den ude af systemet. Du behøver ikke engang at reboote for at konstatere virkningen.

En sidste indvending mod brugen af denne teknik kan være, at dersom du bruger en betinget kommentar, der skjuler, <![if !IE]>...<![endif]>, får du en fejlmelding i W3C's validator. Denne sider validerer som ok xhtml 1.0 – hvis det ikke lige var for mit lille indledende eksperiment.

Nu skal man ikke betragte W3C's validator som Moses, der stiger ned fra bjerget med de ti bud. Det er godt, hvis en side validerer, og vi bør alle stræbe efter det. Men det er næsten lige så godt, når en webside validerer med kun en enkelt fejlmelding, især når den som her kan dokumenteres ikke at have nogen effekt på præsentationen i øvrigt i nogen kendt browser.

Denne side er senest opdateret: 14. July, 2009