Technology : The Vision of Future: July 2009

Wednesday, July 29, 2009

Emulate IE8 as IE7

IE8 has come up with many updates that might affect your existing application/website design. So if you really running out of time and need to fix these issues as soon as possible then what you could do is actually inserting a meta tag in head section and asking your IE8 to render the page as IE7 or any other IE version.

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

There are two ways of using this meta tag:

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

IE=7 : Display in IE7 Standards mode; Already supported in the IE8 Beta 1 release

IE=EmulateIE7 : Display standards DOCTYPEs in IE7 Standards mode; Display quirks DOCTYPEs in Quirks mode;

There are two ways to implement this tag:

On a per-site basis, add a custom HTTP header

X-UA-Compatible: IE=EmulateIE7

On a per-page basis, add a special HTML tag to each document, right after the tag

Implementing the HTTP header is beneficial if a site owner wants most of their site to render as it did in IE7 or if there are no plans to update site content. Inclusion of this header honors any Quirks mode pages that belong to the site.

Using the meta-tag on a per-page basis is beneficial when the publisher wants to opt-in specific pages to render as they did in IE7.

NOTE: The X-UA-Compatible tag and header override any existing DOCTYPE. Also, the mode specified by the page takes precedent over the HTTP header. For example, you could add the EmulateIE7 HTTP header to a site, and set specific pages to display in IE8 mode (by using the meta-tag with content=”IE8”).

Using the IE=EmulateIE7 compatibility tag is a simple way for users to continue their current experience when browsing your site until you can update with more standards-compliant content.

Useful resources:

http://blogs.msdn.com/ie/archive/2008/06/10/introducing-ie-emulateie7.aspx

http://www.microsoft.com/windows/internet-explorer/readiness/developers-new.aspx#versioning

http://stackoverflow.com/questions/1105381/why-is-internet-explorer-8-messing-up-my-website-look-and-feel

http://www.programmerfish.com/how-to-make-your-web-site-ie-8-compatible/

http://msdn.microsoft.com/en-us/library/cc288472%28VS.85%29.aspx

Friday, July 24, 2009

<!DOCTYPE>

What is Doctype:

In HTML and XHTML, the DocType is a special tag that goes right at the top of the page above <HTML> and warns the browser what's coming.

e.g. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

It should be written exactly as specified with respect to spellings and case. i.e. doctype in capital letters, exact url for dtd etc.

It informs browser using which html standards it should render the coming html page.

It switches the browser from ‘Quirk’ to ‘Standard’ mode which is known as ‘Doctype switching.’

Quirk mode: The way the old browsers would have rendered your page, using old standards.

For e.g. IE Quirks Mode is IE5.5. IE6, 7 and 8 all switch back to 5.5 when they encounter a Quirks Mode page.

Quirks mode is generated when you either use the HTML 4.01 Transitional Doctype, you don't define a Doctype, or you use a doctype without a URL DTD defined. For example, Internet Explorer changes how the pages are displayed if you remove the DTD from the Transitional Doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Standard mode: Browser would render the page using the new standard way.

Difference Between DOCTYPE and dtd:

The document type declaration is said to communicate HTML version information

DOCTYPE switches the browser from standard to quirk mode and dtd tells browser to use which standards.

What if I remove DTD and only put DOCTYPE:

On removing the dtd the browser is suspected to remain to quirk mode. Because browser cannot detect the standards to render the web page/app without dtd url.

IE remains in quirk mode if you do not put dtd.

Some of the problems that can be encountered:

You will not be able to use a HTML (HyperText Markup Language) Validator to check the page coding. HTML validation requires the DOCTYPE declaration.
The browser rending the web page will process the coding in Quirks Mode.
The stylesheet may not be implemented as planned.

Some of the commonly used DOCTYPES:

HTML 4.01 Transitional - Safe for Most Browsers

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

The HTML 4.01 Transitional DOCTYPE is probably the most popular DTD out there. It gives you the older tags like fonts that are no longer part of the strict specification. It tells browsers that you are using the most up-to-date HTML, but need some backwards compatibility.

HTML 4.01 Strict DOCTYPE is Harder to Implement

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Strict removes all the deprecated tags from the specification. Be careful whenever you use strict DTDs to validate your HTML ensure that it's correct. Strict DTDs are great for being absolutely correct against the standard, but not all browsers handle the alternatives to tags that are missing.

Useful Resources for DOCTYPE:

http://www.alistapart.com/articles/doctype/
http://www.htmlbasictutor.ca/doctype-declaration.htm
http://www.evotech.net/blog/2007/04/dtd-the-document-type-declaration/
http://www.wpdfd.com/issues/67/doctype_amp_dtd/
http://webdesign.about.com/od/dtds/qt/tipdoctypelist.htm
http://www.quirksmode.org/css/quirksmode.html#t10