Comments
Description
Transcript
X-UA-Compatible: IE=EmulateIE7
Internet Explorer 8
Compatibilità e standard
Pietro Brambati
Developer Evangelist, Microsoft
Blogs.msdn.com/pietrobr
Agenda
Approcci alla compatibilità
Document compatibility
Concetti e Tecniche
Meta Tag, Header
Come determinare la Versione del browser
Version Vector
User Agent
Determinare la document compatibility da codice
Approcci alla compatibilità
Cos’è la document compatibility
Internet Explorer 6:
Quirk Mode: (default), visualizzava come le versioni precedenti
Standard Mode: segue gli standard
<!DOCTYPE> per la scelta della modalità
Internet Explorer 7:
Supporta due modalità
Necessaria una migrazione da un sito pensato per IE 6
Internet Explorer 8: introduce la document compatibility
Controllo in IE8 quale motore di layout usare in base a come è
fatto il sito
Quirk
IE 7 Standard
IE 8 Standard (nuova)
Approcci alla compatibilità
User Experience migliorata
Maggior impegno
1. sviluppare
per IE8
Standards
2. Implementare
il tag X-UACompatible
User Experience limitata
Minor sforzo per il sito
3. Visualizzare siti
Intranet
Compatibility
Mode
4. Affidarsi alla
Compat. List
5. Affidarsi
all’utente:
Compat. Button
1. Sviluppare per IE8 Standard Mode
CSS 2.1
HTML
ACID 2
CSS 2.1 compliance
DOM: miglioramenti
HTML: miglioramenti
Acid2 Test compliance
2. Usare X-UA-Compatible Tag
Gli sviluppatori di siti web possono dire a IE8 per quale
versione di IE il sito è stato sviluppato. Impostabile a
livello di sito, a livello di pagina, includendo un tag
Consigliato
Valore Tag
Significato
IE=5
IE=7
“Quirks” mode
Usare sempre IE7 Standard mode
In IE7 Standard mode a meno che il
sito abbia “Quirks” DOCTYPE
IE=EmulateIE7
IE=8
IE=EmulateIE8
IE=Edge
Usare sempre IE8 mode
Usare questo tag per sovrascrivere
quanto impostato dall’utente e forzare
IE8 mode
Visualizzare nella modalità più avanzata;
Al rilascio di IE8 è equivalente a IE=8
3. Visualizzare i siti della Intranet in
Compatibility Mode
Per default, IE8 visualizza
i siti della “Intranet” in
IE7 mode
L’utente la può disabilitare
IT Pro può usare una
Group Policy per
visualizzare un sito
della intranet in IE8
mode
4. La “Compatibility View List"
Se uno tra i siti più grandi ha
riportato dei problemi di
compatibiltità a Microsoft
IE8 visualizzerà il sito in
compatibility mode
5. L’utente può premere il
Compatibility Button
Vicino al bottone di refresh
Simile a X-UA-Compatible tag (IE=EmulateIE7), ma la
User-Agent String visualizza come browser IE7
Compatibility View
Sito aggiunto alla lista di compatibilità
Per rimuove il sito dalla lista
Content=“IE=EmulateIE8”
UA String Detection
Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0;
Trident/4.0; SLCC1; .NET CLR 3.5.21022)
Concetti e tecniche per la
compatibilità
Passi verso la compatibilità
Nel breve: usare il tag IE=EmulateIE7
Testare il vostro sito con IE8
Virtual Machine
IE8 Developer Toolbar
Identificare gli elementi del vostro sito che non
funzionano in IE8, anche con il tag di compatibilità
XSS Filter– Impedisce al JScript di essere eseguito
DEP/NX impedisce al codice di non essere eseguito in aree di
memoria non-executable
Il tool ACT (vedere link utili) traccia alcuni problemi
A lungo termine: sviluppare per IE8 in modalità Standard
X-UA-Compatible
IIS 7: Windows Vista, Windows Server 2008
X-UA-Compatible
A livello di sito, aggiungere un HTTP Header:
X-UA-Compatible: IE=EmulateIE7
<?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>
X-UA-Compatible
A livello di pagina, aggiungere un tag subito dopo <head>:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
<html>
<head>
<title>My Web Page</title>
<meta http-equiv="X-UA-Compatible" content="IE=Emulate7“ />
</head>
<body>
<p>Content goes here.</p>
</body>
</html>
Esempi di DocType
Quirks
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01
Frameset//EN>
• (o nessun DOCTYPE)
Standards
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0
Strict//EN>
Version Vector
Funzionalità specifica di Internet Explorer
Chiave di registry
Usato per elaborare commenti condizionali in base alle
versioni del browser
<!—[if gte IE 5.5002]>
<p>you are using IE 5 or higher</p>
<![endif]-->
Version Vector
<!—[if IE 6]>
<linkrel=“stylesheet” type=“text/css”
href=“/stylesheets/ie6.css”/>
<![endif]-->
<!—[if IE 7]>
<linkrel=“stylesheet” type=“text/css”
href=“/stylesheets/ie7.css”/>
<![endif]-->
<!—[if gte IE 8]>
<linkrel=“stylesheet” type=“text/css”
href=“/stylesheets/standards.css”/>
<![endif]-->
La User Agent String
Rappresenta l’identità del Browser
Mandata al web server via HTTP header
Disponibile client-side via script
javascript:alert(navigator.userAgent)
Parsing della User Agent String
function getInternetExplorerVersion()
// Returns the version of Windows Internet Explorer or a -1
// (indicating the use of another browser).
{
var rv = -1; // Return value assumes failure.
if (navigator.appName == 'Microsoft Internet Explorer')
{
var ua = navigator.userAgent;
var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
if (re.exec(ua) != null)
rv = parseFloat( RegExp.$1 );
}
return rv;
}
Controllare la versione del browser
function checkVersion()
{
var msg = "You're not using IE.";
var ver = getInternetExplorerVersion();
if ( ver> -1 )
{
if ( ver>= 8.0 )
msg = "You're using a recent copy of IE."
else
msg = "You should upgrade your copy of IE";
}
alert( msg );
}
http://msdn.microsoft.com/en-us/library/cc817582.aspx
UA String vs. Version Vector
La User Agent String può essere usata per
qualsiasi browser
Il Version vector per emettere codice di markup
in modo condizionale con IE
La User Agent String è usata per differenziare la
logica di business
Come Determinare la Document
Compatibility Mode
document.compatMode
Values
CSS1Compat – Standards Mode
BackCompat– Quirks Mode
da IE6: deprecato , usare ora documentMode
document.documentMode
Values
5 – Quirks
7 – Strict
8 – Internet Explorer 8 Standards Mode
In IE8 influenzata solo da X-UA-Compatible tag
Non dal DOCTYPE
Determiare la Document Compatibility
engine = null;
if (window.navigator.appName == "Microsoft Internet Explorer")
{
// This is an IE browser.
if (document.documentMode) // IE8
engine = document.documentMode;
else // IE 5-7
{
engine = 5; // Assume quirks mode unless
if (document.compatMode)
{
if (document.compatMode == "CSS1Compat")
engine = 7; // standards mode
}}}
Link utili
Defining Document Compatibility: Step-by-step instructions for
meta tag placement
http://msdn.microsoft.com/en-us/library/cc288325(VS.85).aspx
Internet Explorer 8 Compatibility Test Guide
http://msdn.microsoft.com/en-us/library/cc848857(VS.85).aspx
IE8 Compatibility – Meta tags, HTTP headers, User Agent
Strings on from Mike Ormond's (DPE) Blog
http://blogs.msdn.com/mikeormond/archive/2008/09/25/ie-8compatibility-meta-tags-http-headers-user-agent-strings-etcetc.aspx
Application Compatibility Toolkit 5.0 with the IE Compatibility
Test Tool
http://www.microsoft.com/downloads/details.aspx?familyid=24DA8
9E9-B581-47B0-B45E-492DD6DA2971&displaylang=en
Link Utili
Internet Explorer Compatibility Center
http://msdn.com/iecompat
Internet Explorer Developer Center
http://msdn2.microsoft.com/en-us/ie/default.aspx
Internet Explorer 8 Readiness Toolkit
http://www.microsoft.com/windows/internetexplorer/beta/readiness/
Internet Explorer 8 Home Page
http://www.microsoft.com/ie/ie8
© 2009 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only.
MICROSOFT MAKES NO WARRANTIES, EXPRESS OR IMPLIED, IN THIS SUMMARY.