Vendar pa se lahko s to privzeto nastavitvijo vsebina, napisana za prejšnje različice brskalnika Internet Explorer, prikaže drugače, kot je bilo zamišljeno. Lastniki spletnih strani morajo zato zagotoviti, da bodo njihove vsebine tudi z novo različico Internet Explorer 8 pravilno prikazane. Zato smo priskrbeli meta-oznako (meta-tag), ki jo je mogoče uporabiti na ravni posamezne strani ali celotnega spletnega mesta za zagotavljanje združljivosti s prejšnjo različico brskalnika Internet Explorer 7. Ta oznaka Internet Explorerju 8 naroči, naj prikaže vsebino na enak način, kot bi jo Internet Explorer 7, pri čemer ni potrebno vnašati dodatnih sprememb.

Kako pripraviti strani za brskalnik Microsoft Internet Explorer 8?

Strani lahko pripravite na več načinov:

• Uporaba oznake meta, v kolikor ugotovite, da se vam stran ne izriše pravilno kot v prejšnjih različicah brskalnika
• Uporaba pogojnih komentarjev in prirejanje stilskega dokumenta
• Če se strani ne prikažejo pravilno, lahko izkoristite podana testna orodja za testiranje delovanja vaših spletnih strani

Uporaba oznake meta
Meta oznaka je način, kako ukažete brskalniku, da stran izrisuje v načinu, kot bi jo Microsoft Internet Explorer 7 (nadalje IE7).

Oznaka meta: <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/ >

Uporabite ga lahko na več načinov (odvisno od tehnologije, ki jo uporabljate):
• Oznako meta vključite na vsako stran v element HEAD
• Nastavite spletni strežnik, ki ga uporabljate, da pošlje oznako meta na strežnike

Če uporabljate tehnologijo ASP.NET 2.0, lahko oznako vključite tudi v predloge strani (master pages), v kolikor jih imate.
Primer vključitve oznake meta v HTML stran:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
<html>
...<head>
.......<title>Test Page</title>
.......<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
...</head>
</html>

Nastavitev oznake meta na strežniku IIS

Oznako meta lahko dodate v spletni strežnik Internet Information Server (verzija 6.0, 7.0 ter kasnejše verzije) v nastavitveno datoteko web.config v razdelek system.webServer.

<?xml version="1.0" encoding="utf-8"?>
<configuration>
...<system.webServer>
......<httpProtocol>
.........<customHeaders>
............<clear />
............<add name="X-UA-Compatible" value="IE=EmulateIE7" />
.........</customHeaders>
......</httpProtocol>
...</system.webServer>
</configuration>

Za IIS 7.0 je postopek sledeč:
1. Kliknete Start, potem Administrative Tools in izberete Internet Information Services Manager (IIS)
2. Izberete spletno stran (web site), ki jo želite opremiti
3. Izbere Application Settings in na desni izbere povezavo Actions
4. Dodate v polje Name X-UA-Compatible
5. Dodate v polje Value IE=EmulateIE7
6. Potrdite izbiro z klikom na gumb OK
7. Preverite delovanje strani

Za spletni strežnik IIS 6.0 (ali mlajši) je postopek podoben z manjšimi razlikami:
1. Kliknete Start, nato Run, vtipkate inetmgr.exe in pritisnete OK (ali pritisnete ENTER)
2. Izberete spletno stran
3. Izberete z desno miškino tipko na strani menijski izbor Properties
4. Izberete zavihek Http Headers
5. Pod opcijo Custom http headers izberete možnost Add
6. V polje Custom Header Name vtipkate X-UA-Compatible
7. V polje Custom Header Value vtipkate IE=EmulateIE7
8. Potrdite vnos (2x pritisnite OK)

Nastavitev oznake v spletnem strežniku Apache

Če uporabljate strežnik Apache verzije 2.2, lahko izkoristite direktivo Headers, ki vam jo omogoča modul mod_headers. Ta modul mora biti naložen pri inicializaciji spletnega strežnika.

Oznaka: X-UA-Compatible: IE=EmulateIE7

Direktivo Headers lahko uporabite kjerkoli v nastavitvenih datotekah. Dodatne zahteve (ali potrebe) lahko zagotovite s sekcijami, kot npr. Location, VirtualHost, Files, Directories.

Recimo, da imamo strani, ki se na strežniku nahajajo v imeniku primeri (npr. http://www.vasastran.si/primeri/ ). V glavnem imeniku vasastran (kjer se nahajajo splošne spletne strani) smo že zagotovili podporo brskalniku IE8, v imeniku primeri pa še ne. Zato želimo, da bi samo stranem v imeniku primeri dodale oznake meta za izrisovanje strani v IE7.

<Location /primeri>
...Header set X-UA-Compatible “IE=EmulateIE7”
</Location>

Če se omejimo samo na direktorij, lahko uporabimo tudi sekcijo sledeči način:

1. Odprite httpd.config (glavno nastavitveno datoteko) v urejevalniku besedila
2. Za imenik (recimo ie8test – http://www.vasastran.si/ie8test ) nastavite sledeče:

<Directory "C:/Program Files/Apache Software Foundation/Apache2.2/htdocs/ie8test">
...Options Indexes FollowSymLinks
...AllowOverride All
...Order allow,deny
...Allow from all
</Directory>
(Opomba: AllowOverride All bo rekel strežniku, da prebere .htaccess dokument v imeniku)

3. Ustvarite .htaccess dokument v imeniku
4. Odprite .htaccess dokument v urejevalniku in dodajte

<IfModule headers_module>
Header set X-UA-Compatible: IE=8
</IfModule>

5. Ponovno zaženite strežnik Apache
6. Pojdite ponovno na spletno stran

Za izrisovanje vseh strani v IE7 načinu, je priporočljivo, da dodate oznako v datoteko httpd.conf.

Postopek:
1. Odstranite # pred vrstico LoadModule (če modula nimate, nadaljujte s korakom 2).
2. Dodajte headers module LoadModule headers_module modules/mod_headers.so
3. Takoj za LoadModule vrstico dodajte Header set X-UA-Compatible “IE=EmulateIE7”
4. Shranite datoteko.
5. Zaženite stran v brskalniku (v kolikor imate že odprto stran, jo osvežite). Ponovno zaženite strežnik.

Uporaba pogojnega komentarja in prirejanje stilskega dokumenta

Če smo uporabili začasno rešitev z oznako meta, lahko začnemo prirejati svoje strani, da se bodo izrisovale v standardnem načinu.

Za preverjanje načina (lahko uporabimo tudi preverjanje preko User Agent string-a), v katerem se trenutno nahaja brskalnik, lahko uporabimo delček javascript funkcije, ki jo obesimo na izbrani html element:

javascript:alert(document.documentMode);

documentMode vrne številko glede na trenutni način izrisovanja, ki ga podpira. Če bi podpiral IE8 standardni način, bi vrnil številko 8.

Če bi želeli preveriti izrisovanje tudi za kasnejše brskalnike, potem lahko uporabimo spodnjo kodo (povzeto iz strani http://msdn.microsoft.com/en-us/library/cc288325(VS.85).aspx ):

engine = null;
if (window.navigator.appName == "Microsoft.Internet.Explorer")
{
...// This is an IE browser What mode is the engine in?
...if (document.documentMode) // IE8
......engine = document.documentMode;
...else // IE.5-7
...{
......engine = 5; // Assume quirks mode unless proven otherwise
......if .(document compatMode )
......{
.........if (document compatMode == "CSS1Compat")
............engine = 7; // standards mode
......}
...}
...// the engine variable now contains the document compatibility mode.
}

Za razumevanje pogojnih komentarjev si poglejmo, kaj je Version Vector. Gre za interni identifikacijski element, ki se nahaja v Windows Registry za brskalnik Microsoft Internet Explorer.

V brskalniku imamo tri verzije izrisovanja:
1. Quirks: kompatibilnost z kasnejšimi brskalniki
2. Internet Explorer 7 Standard: kompatibilnost z brskalnikom IE7
3. Internet Explorer 8 Standard: spremembe DOM/HTML, podpora CSS 2.1

Če bi recimo uporabili oznako meta <meta http-equiv="X-UA-Compatible" content="IE=100">, bo Version Vector javil številko brskalnika, ki je najbližje rezultatu. V tem primeru IE8. Če bi recimo uporabili IE=7.4, bi javil IE7 itd.

Primer uporabe Version Vector funkcionalnosti je sekcija Help-> About, kjer se vsebina prireja glede na izbrani brskalnik.

Version Vector za brskalnik Internet Explorer 8 je IE8 (User Agent: MSIE 8.0). Izkoriščamo lahko tudi predstavitve polnih verzij kot npr. IE 5.5002. Lahko se zgodi, da vam pri uporabi identifikacije z javascript-om javlja drugo verzijo, kot jo v resnici imate. Enostavna rešitev za ta primer je Version Vector.
Kot vidite, se razlikuje od identifikacijskega elementa, ki ga pošilja brskalnik, in se pogosto uporablja v pogojnih komentarjih .

Primer pogojnega komentarja: <!--[if gte IE8]>Uporabljate IE 8<![endif]> –>

Recimo, da želimo uporabiti stran tako za IE7 in za IE8. Z pogojnimi komentarji lahko na enostaven način dosežemo prirejanje stilskega dokumenta, ki se uporabi glede na strankin brskalnik.

Primer (povzeto iz strani MSDN):
<head>
....<title>Test Page</title>
....<!--[if gte IE.7]>
......<link rel="stylesheet" type="text/css" href="stylesheets/ie.css" />
......<p>Both Internet Explorer 8 and Internet Explorer 7 will receive this style sheet.</p>
....<![endif]-->
....</style>
..</head>

Če želimo recimo podpirati IE8 ali IE7 način, lahko to storimo z uporabo pogojnih stavkov.

Primer:
<head>
....<title>Test.Page</title>
....<meta http-equiv="X-UA-Compatible" content="IE=8" />
....<!--[if gte IE.8]>
......<link rel="stylesheet" type="text/css" href="stylesheets/standards.css" />
......<p>Internet Explorer 8 and greater will receive this style sheet </p>
....<![endif]-->
....<!--[if IE 7]>
......<link.rel="stylesheet" type="text/css" href="stylesheets/ie.css" />
......<p>Internet Explorer 7 will receive this style sheet</p>
....<![endif]-->
....</style>
..</head>

Lahko pa tudi uporabljamo zaženemo stran v standardnem načinu IE8 in popravimo CSS na mestih, ki je problematičen.

Primer :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
<html>
...<head>
......<title>Test.Page</title>
......<meta http-equiv="X-UA-Compatible" content="IE=8"/>
......<!--[if gte IE 8]>
......<style type="text/css">
......body {
.......color: #0000ff;
.......background-color: #000000;
......}
......</style>
......<![endif]-->
......<!--[if lt IE 8]>
......<style type="text/css">
......body {
.......color: #000000;
.......background-color: #ffffff;
......}
......</style>
......<![endif]-->
...</head>
...<body>
......<h1>
......<!--[if gte IE.8]>
......Chapter 1
......<![endif]-->
......First Chapter
......</h1>
......<h1>
......<!--[if gte IE 8]>
......Chapter 2
......<![endif]-->
......Second Chapter
......</h1>
......Text any version will see
...</body>
</html>

Uporaba pogojnih komentarjev je uporabna iz dveh razlogov:
1. Ni potrebe po vključitvi jezika javascript
2. Izrisovanje poteka na strežniku, zato se uporabniku na lokalni računalnik prenese manj dodatnih podatkov

Za dodatne izboljšave v HTML/DOM si poglejte sledečo povezavo (http://msdn.microsoft.com/sl-si/library/cc817571(en-us).aspx ) za prirejanje svojih stilskih dokumentov.
Izkoriščanje dodatnih testnih orodij za preverjanje izrisovanja strani

V kolikor zgornji načini ne delujejo in se vaše strani ne prikažejo pravilno v brskalniku, izkoristite brezplačna testna orodja za vaše strani. Dobro je prej preveriti podporne strani Microsoft-a (http://support.microsoft.com/kb/949787/ ), če gre za napako iz strani brskalnika.

Internet Explorer Developer Toolbar

Z brskalnikom IE8 je prišla tudi nova orodna vrstica, ki vsebuje ogromno novih funkcionalnosti, ki jih lahko izkoristite za delo z brskalnikom.

Orodno vrstico najdete pod menijskim izborom Tools - &gt Developers Tools ali pa bližnjično tipko F12.

V grobem se razdeli funkcionalnost na 4 področja:
1. Predogled HTML
....a. Izbira elementov
....b. Izbira stilov
....c. Vizualni pregled stilov
....d. Možnost urejanja stilov
....e. Možnost pregleda atributov elementov
2. Predogled stilov
....a. Izbira stilov
....b. Možnost shranjevanja stilov
3. Predogled skriptnih jezikov
....a. Predogled skript
....b. Možnost razhroščevanja
....c. Možnost pregled stack-a
....d. Možnost izvajanja skripte in izpisa na zaslon oziroma ukazno vrstico
4. Preizkušanje izvajanja skriptnih jezikov s pomočjo orodja Profiler
....a. Možnost izvajanja profilacije strani
....b. Možnost shranjevanja rezultatov
....c. Možnost pregleda dodatnih parametrov pri izvajanju
....d. Z dvokratnim klikom dostop do izvorne kode
....e. Možnost shranjevanja in pošiljanja poročil o izvajanju

Poleg naštetih elementov imate tudi možnost pregleda strani v različnih načinih izrisovanja ter izvajanju strani brez sličic, z čistim pomnilnikom, lahko preverite veljavnost strani s standardi ter imate vpogled v informacije o piškotkih, elementih, stilih, itd.

Fiddler

Fiddler je orodje, ki deluje kot http vmesnik za zajemanje prometa HTTP med vašim brskalnikom in svetovnim spletom.

Po namestitvi ga najdete pod menijskim izborom Tools - &gt Fiddler2. Odpre se kot zunanja aplikacija, skozi katero lahko preverjate delovanje odzivnosti spletnih strani z različnimi parametri in načine prenosa preko svetovnega spleta oziroma do strežnika, kamor pošiljate zahteve.

Kot zanimivost lahko preverite, kako se stran odziva v primeru modemske povezave.

Dodatna orodja

Priporočam tudi naslednja orodja:
• Microsoft Application Compatibility Kit 5.0
• Process Explorer
• CSS testne strani v IE8 testnem centru
• Validator RSS W3

Dodatne povezave

Dodatne povezave za preverjanje kompatibilnosti:
• Internet Explorer Developer Center ( http://msdn.microsoft.com/en-us/ie/default.aspx )
• Internet Explorer Compatibility Center ( http://msdn.microsoft.com/sl-si/ie/cc405106(en-us).aspx )
• Podpora HTML & CSS ( http://msdn.microsoft.com/sl-si/library/cc817571(en-us).aspx )
• Strani za razvijalce ( http://www.microsoft.com/windows/internet-explorer/beta/readiness/testin... )
• Pomoč in podpora (http://support.microsoft.com/kb/949787/ )
• Testne stilske strani ( http://samples.msdn.microsoft.com/csstestpages/default.htm )
• Microsoftovi tehnični strokovnjaki ( http://www.msblogs.si )
• Fiddler ( http://www.fiddlertool.com/Fiddler )
• Spletomanija ( http://www.spletomanija.si )

Bojan Vrhovnik, Microsoft |