X-UA metamarkøren

Du kan "låse" udseendet af din webside til en bestemt version af Internet Explorer. En standardsættende DOCTYPE og meta-markøren <meta http-equiv="X-UA-Compatible" content="IE=7" /> og sikrer, at det design, du har lavet til IE7, ser ligedan ud i IE8 og alle efterfølgende versioner af IE.

"Motoren" – Rendering Engine – i Internet Explorer 8 er markant forskellig fra tidligere versioner af denne browser. Microsoft har virkelig bestræbt sig på at lave en browser, der

  • Gengiver HTML-elementers CSS-egenskaber i overensstemmelse med W3C's standard.
  • Ikke smadrer websider, lavet af folk, der aldrig har hørt om webstandarder, doctyper og validering.

Det kan synes som to uforenelige mål, når man betænker hvor forskelligt en side kan tegnes i forskellige browsere eller browserversioner, også i forhold til hvilken dokumenttypeerklæring der er anvendt, om overhovedet nogen.

Det er to uforenelige mål. Så det, man har gjort, er at introducere en ny slags DOCTYPE-lignende switch – User Agent Compatibility switchen.

Kompatibilitetsknappen i Internet Explorer 8

Det er synligt for de fleste i form af en “kompatibilitetsknap” umiddelbart til højre for URI-feltet i browserens navigationsbjælke, se illustrationen herover. Hensigten med denne er at sætte læseren i stand til at vælge en visningsmodel, der tilgodeser sider, der er designet af folk, der har haft øjnene stift rettet mod Internet Explorer 6.

Nederst ser du et udsnit af den samme side, hvor kompatibilitetsknappen ikke er synlig. Den forsvinder nemlig, når du ved hjælp af den her beskrevne markør “låser“ visningen af siden til en bestemt version af IE. IE8 og efterfølgende versioner af denne browser vil nu vise websidens elementer i henhold til den fortolkning af CSS2.1 standarden, som er nedlagt i den pågældende version af Internet Explorer.

Mulige meta-markører

X-UA-Compatible metamarkøren kan have forskellige udforminger, således

<meta http-equiv="X-UA-Compatible" content="IE=6" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

De tre første af disse er næsten selvforklarende. Hver for sig (og forudsat en standardsættende dokumenttypeerklæring) medfører de at den aktuelle webside fortolkes i henhold til den pågældende IE-versions fortolkning af CSS-standarden. Hvis du har formateret din side sådan at den ser godt ud i Internet Explorer 7, kan du sikre dig at den ikke går i stykker i IE8 ved at bruge IE=7 som værdi af content-attributten.

Hvad betyder dette for vore eksisterende websider?

Hvis vi bekymrer os uden om og ikke bruger en af de nedennævnte meta-markører, vil IE8 håndtere vore sider på følgende måder:

A) Forkert, mangelfuld eller manglende dokumenttypeerklæring (DOCTYPE) vil sætte en side i såkaldt "Quirks modus", der i IE viser siden i henhold til Internet Explorer 5's visningsmodel. Det betyder, at dit indhold fortsat vises på samme måde som det vises i ældre versioner af Internet Explorer. (I teorien. Ingen af de skribenter jeg har læst om dette forhold gider beskæftige sig med IE's opførsel i forhold til sider, der ikke bruger en standardsættende dokumenttypeerklæring.) Jeg kan helt tilslutte mig den almindelige opfattelse som er: Lad være med det!

B) En standardsættende dokumenttypeerklæring vil sørge for, at siden vises i standardmodus, det vil sige i henhold til W3C's HTML og CSS standarder. Eftersom understøttelsen af HTML og CSS på en række punkter IE8 er forbedrede i forhold til IE7 og tidligere vil du – også uden X-UA Compatible metamarkøren – kunne anvende elementer og egenskaber, som IE ikke understøtter i tidligere versioner.

Humlen ved dét er selvfølgelig, at det er en betænkelig sag at bruge pseudoklasser, pseudoelementer og egenskaber, der godt nok fungerer i IE8, men ikke i tidligere versioner af IE.

C) Gør du det alligevel, er du bedre tjent med ikke at bruge X-UA kompatibilitetsswitch'en. Lad mig illustrere med et eksempel:

Denne side indeholder ikke nogen kompatibilitets switch. Bruger du derfor IE8 (eller en hvilkensomhelst anden moderne browser undtagen IE7), vil du i nedenstående link kunne se websidens URI efter linkteksten:

Jørgen Farum Jensens hjemmeside.

Effekten er fremkaldt ved ved hjælp af følgende formdeklaration:

  a.ex[href]:after { 
  color:black;
  content:" ("attr(href)")"; 
  font-style:italic;
  display:inline;}

IE8 understøtter i modsætning til IE7 såvel :after pseudoelementet som content-egenskaben. Hvis du derfor bruger kompatibilitetsknappen i browserens adresselinje, vil du se at IE8 går i IE7 kompatibilitetsmodus og URI'en forsvinder.

Et andet eksempel finder du i min artikel om CSS-table layout modeller, hvor jeg anvender CSS display-værdierne display:table og display:table-cell til at skabe layout på siderne. Af særlig interesse i denne sammenhæng er CSS table layout eksempel 2, der til forskel fra de øvrige eksempler ikke er forsynet med X-UA Compatible switchen, og csstable_2xuatest.html, der er en kopi af eksempel 2, men uden nogen X-UA Compatible switch og også uden det IE<8 fallback stylesheet, der ellers er anvendt i eksemplerne til artiklen.

Konklusion

De grunde, du kan have for at anvende X-UA Compatible switch'en er så vidt jeg kan se, følgende:

  • Du har en webside, der vises ok i en bestemt version af IE, for eksempel Internet Explorer 6, 7 eller 8, men er usikker på, hvordan den vil blive vist i en fremtidig IE-version. I så fald kan du låse disse fremtidige Microsoft browsere til at vise din side på samme måde som den browserversion, du rent faktisk har testet din side i.
  • Du ønsker at fjerne kompatibilitetsknappen fra IE8 (og formodentlig fremtidige IE versioner).

Bemærk at låsningen af visningsmodellen – har større vægt end dokumenttypeerklæringen og at din side som følge deraf heller ikke kan udnytte eventuelle selektorer, pseudoklasser, pseudoelementer eller egenskaber, der ikke understøttes af den browser, du har låst din side til.

(Sådan er det i hvert fald tænkt. Jeg kan dog konstatere, at visse CSS2.1 og CSS3 attributselektorer (Til eksempel Element[attribut*værdi]) vises korrekt i IE8 med en IE7 kompatibilitetsswitch). Jeg håber i løbet af sommeren 2009 at blive færdig med en artikel om dette emne).

IE8's visningsmodel

Ønsker du at anvende den forbedrede CSS understøttelse i IE8 er det ikke nødvendigt at anvende X-UA-Compatible kompatibilitetsswitchen.

CSS2.1 selektorer, pseudoklasser og pseudoelementer som IE7 notorisk ikke understøtter, understøttes af IE8 også uden X-UA-Compatible switch'en. Forskellen på en side med og uden, hvis du for eksempel bruger :before og :after pseudoelementerne er kun, at browserens kompatibilitetsknap ikke vises, når switch'en er indsat på siden.

  • Som standard vil IE8 tegne en webside i henhold til IE8 Standards Mode
  • Hvis en side fra et domæne, der optræder på MS's kompatibilitetsliste indlæses, vil IE8 bruge IE7 kompatibilitets visningsmodel.

Description of the Compatibility View list in Windows Internet Explorer 8.

When users install Windows Internet Explorer 8, they have a choice about opting in to a list of sites that will be displayed in Compatibility View. Compatibility View helps make Web sites that are designed for older browsers look better in Internet Explorer 8.

Luk denne boks igen

Gennemtving IE7 visning i alle tilfælde

  • Hvis en bruger klikker på kompatibilitetsknappen i IE8, og den aktuelle side ikke er på ovennævnte liste, vil denne browser bruge IE7 kompatibilitets visningsmodellen.
  • Hvis websiden indeholder meta-markøren
    <meta http-equiv="X-UA-Compatible" 
      content="IE=IE7" />
    
    vil websiden blive vist i hendhold til IE7 i standardmodus (Standardsættende DOCTYPE).
    Hvis Hvis websiden indeholder meta-markøren
    <meta http-equiv="X-UA-Compatible" 
      content="IE=EmulateIE7" />
    
    vil websiden blive vist i henhold til IE7 i standardmodus, hvis DOCTYPE'n er standardsættende, og i IE7 Quirks modus hvis DOCTYPE'n sæter websiden i Quirks modus (IE5's visningsmodel).

Brugen af meta-markøren er én måde at kontrollere kompatibilitets-switch'en på, en anden metode er at indføje en streng i serverens http-header. Det er ikke noget jeg har forstand på, så det vil jeg ikke skrive om her.

Hvis der er et script-element i head-delen før denne meta-markør, vil IE8 bruge IE7's standard visningsmodel (samme som content="IE=7").

Kode til kanten

Hvis du har en clairvoyant ved hånden og hun kan fortælle dig at IE version 27 vil understøtte Element:nth-of-type(3) CSS3 pseudoelementet, kan du for eksempel bruge meta-markøren <meta http-equiv="X-UA-Compatible" content="IE=27" />.

Hvis ikke du har en clairvoyant eller anden troværdig kilde til hvad version 9, 10, 11 osv. af Microsofts browser vil understøtte, kan du bruge den autoriserede

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Denne syntaks til medfører, at du altid målretter din side til den seneste version af Internet Explorer.

Det er lidt svært ved at se nytten. Så længe alle nu eksisterende versioner af IE ikke understøtter selv de mest fastlåste CSS3 egenskaber, pseudoklasser og pseudoelementer, kan de jo kun bruges “for sjov”, uanset hvor god understøttelsen er i alle andre browsere.

20. juli 2009.