IE 8 Render Mode Bookmarklet

Here’s the link:

IE 8 Render Mode
(updated Feb 28,2011 with Quirks/Standards test)

IE 8 render mode result on google (IE8, html5 doctype, no X-UA meta tag found)

IE 8 Render Mode Test in action

(right-click in IE and Add to Favorites > Put in Links or FavoritesBar folder for easiest access!)

Here’s the story:

You might have heard that Internet Explorer 8 has multiple sets of rules for rendering HTML markup, so if you’ve got good clean efficient standards based content then IE 8 should cruise through in high gear (IE 8 Mode) and display approximately the same thing the other browsers show (I said approximately!).

I was naively assuming the improper render mode issues wouldn’t be anything I’d have to deal with because, after all, I do things RIGHT! Right? I’m all about W3C Standards… avoid deprecated HTML and browser hacks, close all empty elements, try to keep markup semantic, etc etc. I’m working on this latest masterpiece, a hefty municipal website built in the DotNetNuke Framework, sporting some slick 3rd party modules and lots of customised CSS. My inbox alert lights up from time to time with a complaint from a poor city employee who is still forced to browse from Internet Explorer 6. No, the site doesn’t look right in IE6 but it functions and we either move forward to embrace the future or we linger behind to rescue the past, amiright? From Firefox or Chrome the site looks pretty good.

But then someone points out content is mysteriously missing even in IE 8!? I come to find out that IE 8 as great as it is, will shift down (to IE 7 or 6 or 5 mode) to handle rougher stuff if it thinks that’s necessary. In other words, if it thinks your site isn’t up to par with latest standards then it decides that it’s probably hacked together with older browsers in mind and so will probably break with the new IE 8. For me however, I discovered I need the IE 8 mode to get this content to show up properly. Why? I don’t know yet! This will require some more sluething but I wasn’t even sure how to tell exactly what mode Internet Explorer had selected. The IE Developer Tools let’s you pick from 3 modes but what is it by default? Then I read about some javascript to get this “document mode.” I just need to paste this in the URL and IE will pop up an alert box with the info. I looked for this in a nicer bookmarklet package (javascript you can add to your favorites/bookmarks). I couldn’t find it so, side project!

Here’s the script:

(except I use if-then conditionals here for readability and ternary conditionals in actual link)

javascript:(function(){
var cr='\r\n';//return-newline chars
var cm=document.compatMode;//test for quirks-standards mode
var ezmode;//readable set as 'quirks' or 'standards' based on cm
var dt='DOCTYPE: '+document.all[0].text;//first line in document(doctype?)
var cmode='';//for content mode meta tag
if (cm) //document.compatMode value is found
{
if (cm=='BackCompat')//aka quirks
{ezmode = 'Quirks';} 
else if (cm=='CSS1Compat')//aka standards 
{ezmode = 'Standards';} 
else {ezmode = 'Almost Standards';}
} else //document.compatMode value not found
{ezmode = 'document.compatMode not detected'}
metas=document.getElementsByTagName('meta');//gather meta tags
for(var i in metas){
if (metas[i].httpEquiv=='X-UA-Compatible')  //if key meta tag is found
{cmode='X-UA-Compatible value found set to: '+metas[i].content} //add
else
{cmode='X-UA-Compatible NOT FOUND'} //add 'not found' announcement
}//close for loop
alert(  //building alert content
if (document.documentMode) //documentMode exists in IE
{'Internet Explorer Mode: '+ document.documentMode + cr+dt+cr+cmode+
cr+cr+ezmode+' (Standards/Quirks-based on compatMode: '+cm+')'}
else
{'Internet Explorer Mode: This only works in Internet Explorer.'+cr+dt+
cr+cmode+cr+ezmode+' based on compatMode: '+cm}
); //close alert
void(0);
}//close function
)//close this javascript statement
();

It shows the Internet Explorer Compatibility Mode (render mode) along with the DOCTYPE and  the X-UA-Compatible meta content value which if found should match the render mode since the meta value is supposed to force the render mode.

This is for Internet Explorer but it should show the DOCTYPE and any X-UA-Compatibile meta values on the page in other browsers (still having some issues with other browsers). And I’d love to add a keyboard short-cut to this but there’s an issue assigning keyboard shortcuts to invalid files apparently, bummer!  Anyone know how to do this?

An awesome collection of other helpful bookmarklets and…
the mother of all bookmarklets (DOM Monster-wasn’t working in IE 8 though when I tried it)

Thanks to someone at J&C Group for digging the key reference to the DOCTYPE in Internet Explorer (document.all[0].text) out of another older thread.

Posted in JavaScript, Web Development | Tagged , , , , , , , | Leave a comment