Idag släpptes då äntligen Internet Explorer 9 i skarp version.
http://windows.microsoft.com/sv-SE/internet-explorer/products/ie/home
Som webbproducent har jag sett fram mot detta eftersom den enligt en massa olika tester och artiklar om den nya webbläsaren ska vara mycket snabbare med att ladda sidor än tidigare versioner (Javascriptmotorn är mycket snabbare än i IE8), snyggare design etc.
Det som är viktigast för oss som designar webbplatser är dock att webbläsaren följer de av W3C uppsatta webbstandarderna för hur en webbsida ska renderas (visas). Tidigare versioner av Internet Explorer följer inte dessa standarder utan vi är alltid tvungna att göra hacks för dem i form av t ex specifika CSS-filer för IE6, IE7 och IE8, använda speciella skript som IE-CSS3 eller använda andra lösningar för att kunna få CSS3-effekter och för att få sidor att se likadana ut som i andra webbläsare som Google Chrome, Mozilla Firefox, Opera och Safari.
Det här kommer vi att få fortsätta med så länge folk använder IE8 och nedåt men tanken var att när de som har Windows Vista och Windows 7 uppgraderar sina Internet Explorer till version 9 skulle i alla fall dessa få en modern webbläsare som visar sidan som den är kodad att visas och det utan hacks.
Nu när jag hade uppgraderat till Internet Explorer 9 gav jag mig i kast att testa den på en av de sajter jag har producerat. Jag startade upp IE9 och gick till webbplatsen www.spearonline.se som är en företagssida jag har gjort i Joomla!, en av de tre stora Open Source CMS:en tillsammans med WordPress och Drupal. Skulle sidan visas som den visas i Chrome, Firefox, Opera och Safari som alla renderar sidorna som de är kodade att visas och det utan några webbläsarspecifika hacks?
Så här ser sidan ut i Chrome och Firefox:
Google Chrome
Firefox 3.6
Safari använder samma renderingsmotor, Webkit, som Google Chrome så i den visas sidan på exakt samma sätt som i Chrome. Även Opera visar sidan på samma sätt även om jag inte har den installerad just nu så att jag kan visa en skärmdump. Hur ser då sidan ut i IE9?
Internet Explorer 9
Det mesta visas som det ska och som i de andra webbläsarna men toppen stämmer inte:
Överkanten på bilden ligger för långt ner gentemot toppen på ramen, wrappern, där sidans innehåll är placerat. Jag trycker då på F12 för att få upp Explorers utvecklarverktyg och då ser jag att sidan är inställd att visas i kompabilitetsvy för IE9 och att använda IE7-standarder:
Sidan ska naturligtvis visas för IE9 och använda IE9-standarder. Om den nu inte gör det av någon anledning kan man följa de instruktioner som finns på Microsofts sidor för webbutvecklare, MSDN, och då specifikt på sidan Defining Document Compatibility.
http://msdn.microsoft.com/en-us/library/cc288325(v=VS.85).aspx
Där i avsnittet Specifying Document Compatibility Modes står det så här:
“Document compatibility modes allow you to control the way Internet Explorer interprets and displays your webpage. To specify a specific document mode for your webpage, use the meta element to include an X-UA-Compatible header in your webpage”-
Lite längre ner står det så här:
“The content attribute specifies the mode for the page; to mimic the behavior of Internet Explorer 7, specify IE=EmulateIE7. Specify IE=5, IE=7, IE=8 or IE=9 to select one of those compatibility modes. You can also specify IE=edge to tell Internet Explorer to use the highest mode available. “.
För att få Internet Explorer att visa en webbsida för en viss version av IE kan man alltså lägga in en metatagg där man specificerar vilken version av IE som ska emuleras, alltså användas. Vill man att IE ska visa sidan i högsta möjliga version kan man använda ordet edge istället för versionsnumret.
Var ska man då placera den här metataggen?
“The X-UA-Compatible header is not case sensitive; however, it must appear in the header of the webpage (the HEAD section) before all other elements except for the title element and other meta elements.”
Metataggen ska alltså placeras så högt upp som möjligt i sidans <head>. I fallet med webbplatsen jag tittade på är den byggd i Joomla! där designen ligger i en template som oftast är uppdelad i delfiler som head.php, header.php, main.php, footer.php etc. Jag går alltså in i webbplatsens template och in i filen head.php där jag alldeles i början av filen lägger in metataggen:
<meta http-equiv="X-UA-Compatible" content="IE=edge" > säger alltså åt Internet Explorer att visa sidan i högsta möjliga IE-version och det är ju IE9 nu när den har kommit och det är den jag använder. Jag sparar filen och laddar upp den till servern och går sen tillbaka till sidan och uppdaterar den. Hur ser sidan ut nu då?
När jag har laddat om sidan trycker jag F12 för att först se att sidan visas för IE9 och med IE9-standarder:
Ja, metataggen jag lade in gör att sidan nu visas för rätt version av IE9. Då var det klart. Visas sidan på annat sätt nu då när den visas för rätt version?
Nej, den ser fortfarande likadan ut i fallet med den här webbplatsen. Detta innebär inte att jobbet med att lägga in metataggen ovan var i onödan. Ni bör ändå när ni jobbar med en webbsida och tittar på den i IE använda F12 för att se om den är inställd att visas för senast möjliga version av webbläsaren. För att garantera att den gör det så lägg in metataggen ovan i <head> på sajten.
Jaha, jag måste alltså ändå lägga in ett hack för att få bort den där kanten som inte ska finnas där och som skiljer sig åt mot hur den ska visas, och visas, i de andra webbläsarna. Här kan jag lägga in denna hack antingen i en för webbläsaren specifik css-fil eller i anslutning till det kodavsnitt där toppbilden ligger. Eftersom det är bättre att lägga så mycket designspecifik kod som möjligt i css-filer väljer jag att lägga hacket i en ie9.css-fil.
Jag börjar med att i head.php (filen där jag lade in metataggen jag har skrivit om tidigare) länka in den IE9-specifika css-filen ie9.css in i templaten på det här sättet (längst ner i skärmdumpen nedan):
Jag använder alltså så kallade conditional statements (if ==> then) som för IE9 ser ut så här:
<!–[if IE 9.0]>
<link rel="stylesheet" href="<?php echo $this->templateurl(); ?>/css/ie9.css" type="text/css" />
<![endif]—>
Alltså, om Internet Explorer 9 används ska filen ie9.css laddas in och användas.
Jag skapar sen filen ie9.css och lägger i den filen in den CSS-ID som styr toppbilden och som alltså måste ändras i förhållande till hur den ser ut i template.css (templatens huvud-css-fil) och vars kod fungerar för de andra webbläsarna men inte för IE9:
Så här ser #ja-header ut i template.css:
/* HEADER
——————————————————— */
#ja-header { width:1000px; height:148px; background: #d5e3c3 url(../images/header/header.jpg) no-repeat 0px 0px; clear:both; }
Eftersom toppbilden i IE9 verkar hamna för långt ner flyttar jag upp den genom att i #ja-header i ie9.css lägga in margin-top:-5px;: Koden i ie9.css ser nu ut så här:
/* HEADER
——————————————————— */
#ja-header { width:1000px; height:148px; margin-top:-5px; background: #d5e3c3 url(../images/header/header.jpg) no-repeat 0px 0px; clear:both; }
Jag laddar upp både head.php och ie9.css till servern, rensar cachen både i sajtens admindel och i IE9 och uppdaterar sedan sidan. Resultatet blir det här:
Nu ser det rätt ut och allt är klart. Jag behövde alltså flytta upp bilden 5 pixlar för att få den på rätt ställe i IE9.
Sammanfattningsvis: på många webbplatser kan utvecklaren vara tvungen att lägga in en metatagg i <head> för att få Internet Explorer att visa sidan i rätt version av webbläsaren. Ett tips är att använda IE=edge för att få IE att visa sidan i senaste möjliga version, alltså <meta http-equiv="X-UA-Compatible" content="IE=edge" >. Han eller hon kan också räkna med att även fortsättningsvis behöva göra hacks för att få även IE9 att visa sidan rätt, t ex placerade i en ie9.css-fil.