Thursday, June 19, 2014

HTML head - Meta:Charset and Meta:X-UA-Compatible

Meta:Charset

Always place it as the first line inside <head>

Example:
<head>
    <meta charset="utf-8" />
    ...

Reasons: 
 Ensure everything after this declaration being decoded correctly. Ensure this declaration falls in the first 1024 bytes of the document.

Read more:
http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#charset1024

Meta:X-UA-Compatible

IE8, IE9, IE10 allows you to control document compatibility modes, so you can instruct the browser to render webpages in the same way as older browser versions.

The X-UA-Compatible header isn't case sensitive.

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.

A web server can also be configured to specify the X-UA-Compatible header. If a web server specifies the header and the header also appears within the content of a webpage, the header in the webpage takes precedence over the one specified by the server.

Read more:
http://msdn.microsoft.com/en-us/library/cc288325(v=vs.85).aspx 

<meta http-equiv="x-ua-compatible" content="IE=9" />
<meta http-equiv="x-ua-compatible" content="IE=8" />
<meta http-equiv="x-ua-compatible" content="IE=7" />

By using one of these values above, you're restricting the webpage to the standards mode of the corresponding version of Internet Explorer. (Always standard mode, despite !DOCTYPE value)

In many cases, this means you're limiting Internet Explorer to the features supported by that version.

<meta http-equiv="x-ua-compatible" content="IE=EmulateIE9" />
<meta http-equiv="x-ua-compatible" content="IE=EmulateIE8" />
<meta http-equiv="x-ua-compatible" content="IE=EmulateIE7" />

With these settings above, the page is displayed either in the standards mode corresponding to the version you specified or it's displayed in IE5 (Quirks) mode. (Standard or quirks mode, depends on !DOCTYPE value)

<meta http-equiv="x-ua-compatible" content="IE=edge" />

This is functionally equivalent to using the . It places Internet Explorer into the highest supported document mode. Why use this again?

  • Prevents incorrect header information from the server breaks the pages.
  • It hides the compatibility view button from IE, reduce the chance that a user add the site into the list of compatibility view accidentally.

No comments:

Post a Comment