Showing posts with label compatibility. Show all posts
Showing posts with label compatibility. Show all posts

Wednesday, 21 October 2009

Window.Event support cross browser

Accessing window.event in Chrome, Safari and Opera


Something that I found out today, which you may or may not know related to events and browser support, is that the global event object used by Internet Explorer:

window.event

Is also supported in Chrome, Safari and Opera. I presumed Opera would support it as it also supports IE's event model as well as the DOM 2 model. By this I mean you can attach events using attachEvent or addEventListener as well of course using inline events e.g element.onclick=function(){}.

As addEventListener is the superior method this is why any custom addEvent function should always check for the standard option first before then checking for attachEvent and then reverting to DOM0 (if you require IE4 or NN4 support :) )

For Firefox when using inline Javascript event handlers you need to pass in the Event object as a parameter to any function you are calling. This is how I presumed the other standards compliant browsers would also work but it seems they support both methods. E.g in IE, Opera, Chrome and Safari both these methods work:

<input type="button" id="txtA" value="Click" onclick="Run();" />
<input type="button" id="txtA" value="Click" onclick="Run(event);" />


But in Firefox only the second method will work. The function called does a test for the window.event object to capture the event.type but in Firefox it uses the event parameter. On my example test you will notice the undefined messages when a test for window.event is carried out. 

For example you may have seen many a function like the following that handles both the window.event and event parameter:
function test(e){
// use the event parameter if passed otherwise
// use the global window.event object
e = e || window.event;
}
This may be old knowledge but it was new to me so I thought I would post it in case others didn't realise this event support. Also most developers have moved on from using inline event handlers to using unobtrusive Javascript and attaching events to the DOM after the HTML has loaded.

You can test this out here by running the following two test functions which will output some messages to a DIV container. This test should be carried out in multiple browsers especially Internet Explorer (IE), Chrome or Safari, Opera and Firefox. I haven't checked version support apart from IE 7,8, Chrome 3, Safari 4, Opera 10 and Firefox 3.5.









Saturday, 21 March 2009

IE 8 Document and Browser modes

Controlling IE 8 Browser and Document Modes

In Internet Explorer 8 the developer toolbar can control the following settings and will override any other settings that have been set e.g META tags or the Compatibility View options. On changing a setting the browser will refresh and load the appropriate new configuration.

I will list out the various document and browser modes with the basic differences but if you are in a hurry and just require a Javascript function that you can use to determine the clients current IE8 settings then that link will sort that for you. For an explanation on browser compatibility mode testing then this link will give you an article explaining the combination of agent sniffing and object detection that is required for identifying a clients IE8 browser settings.




Browser Modes:

Internet Explorer 8 Mode

The browser will run as IE 8.0 and the user-agent will appear as an IE 8.0 user-agent e.g

Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; GTB5; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30; .NET CLR 1.1.4322; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022)

Notice the mention of Trident/4.0 which is the name and version of the rendering engine.

A new Javascript engine is used in IE 8.0 so there will be numerous differences for example using getElementById to return an element by name will not work anymore which is the correct way of doing things however if you didn't know this and did use it in IE to access elements you will experience errors when running in full IE 8 mode.

Internet Explorer 7 Mode

The browser will run as if it were actually IE 7.0 and the user-agent will appear as an IE 7.0 user-agent e.g:

Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; GTB5; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30; .NET CLR 1.1.4322; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022)

Javascript will run as it does in IE 7.0 for example using getElementById to return an element by name will work.

Internet Explorer 8 Compatibility Mode

This mode means that, and I quote from ieblog

"In a nutshell, Compatibility View allows content designed for older web browsers to still work well in Internet Explorer 8."

So in all respects the browser is still running as IE 8.0 but allows sites that worked perfectly well in IE 7.0 to continue to work correctly without having to revert to IE 7.0 mode.

By default IE will set all publicly accessible Internet sites to run in IE 8 mode and all Intranet sites to IE 8 compat mode.

For Internet sites it comes across which it feels should run in compatibility mode such as those with strict doctypes then it will display a button to the user to allow them to change to compatibility mode. For sites that are using quirks mode it will not offer this option so do not expect the button to appear all the time.

The user-agent in IE 8 Compatibility Mode is displayed similarly to IE 8 but with a 7 e.g

Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Trident/4.0; GTB5; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30; .NET CLR 1.1.4322; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022)

Javascript should run as it did in IE 7 for example using getElementById to return an element by name will work.



Document Modes:

Quirks Mode (e.g IE 5)

This document mode setting will render pages as if there was no doctype specified. This will be the same as if you were using older IE versions such as IE 5.0.

Internet Explorer 7 Standards Mode

This document mode will render pages as they would be displayed in IE 7.0 when a strict doctype was specified.

Internet Explorer 8 Standards Mode (Page Default)

This document mode will render pages in the new IE 8 standards compliant manner. IE 8 apparently adheres to the CSS 2.1 specification and there are numerous changes to be aware of. For instance there is no longer any support for CSS expressions.

For a list of the various changes and potential problems that IE 8 will bring to your development view the following article: http://blogs.msdn.com/ie/archive/2009/03/12/site-compatibility-and-ie8.aspx


How to detect which settings are enabled

If for whatever reason you need to detect client side which of these various settings the user currently has enabled in their browser then you can use a combination of user-agent sniffing and object detection to work out the true browser version and rendering engine. See the following article about how to detect the settings using Javascript.


The new META UA-Compatible tag

Another new feature in IE 8 is the ability to quickly fix any potential problems that all these new document and browser modes may bring by adding a META tag to your existing sites. To force a page to run in IE 8 standards mode we can add the following META tag to pages:

<meta http-equiv="X-UA-Compatible" content="IE=8">

Or if you find that your sites do not currently work in IE 8.0 standards mode you can force them to work as they did in IE 7.0 with the following META tag:

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

Once you get your site up to scratch you can remove the tags.

Thursday, 18 September 2008

What browser support do you offer your users.

Graceful degradation

In an ideal world you would want any website you develop to have the largest audience as possible. Sites these days can rely on multiple technologies to work (Javascript, Flash, Java, ActiveX, CSS) most of which the user can disable through choice even when their browser supports it. This means that when it comes to developing a site you have the decision between drawing a line in the sand and saying you must use this browser above this version and have JavaScript, Flash and ActiveX enabled for it to work which will mean a small and very annoyed audience. Or the better way which is to build the site from bottom up starting with a good HTML core structure that should work in all browsers and then add layers of functionality on top.

This means making sure all links have href tags that point to URIs and not Javascript: , images have alt tags, client side validation is duplicated on the server (which is good practise anyway to prevent hackers avoiding it by disabling javascript) and that the core navigation is not reliant on Javascript to work. This is called graceful degradation and ensures that your sites core functionality is available to as many users as possible.

For example if you were displaying flash banners you would start with an image that had alt tags defined so that if the user has a text based browser they read the content within the alt tags. If they have image support they would see the image but if they had Flash enabled they would view the movie.

The site I am currently working on divides browser support up into 3 levels and to help the user we include a browser compatibility page that lets the user see what level of support their browser settings are providing them along with links to let them download the latest version of their browser if they are using an old version. As well as showing the browser support level (see below) the page lists a number of key settings and features that the site makes use of with an indicator of whether this feature is enabled or not. Settings displayed include Flash, JavaScript, AJAX, Java, Cookies etc. Having one or more items on this feature list unavailable does not mean the site will not function only that certain parts of the site use this technology and therefore to get the richest experience from the site and enjoy all the functionality they should enable those missing features. Obviously there are some items that have to be available for the site to work such as forms and session cookies and we let the user know whether their browser and settings are compatible with the site by showing them crosses or ticks next to each item and an overall compatibility rating.

Browser support levels

The browser support grades are defined in the following way.

Leval 1 Support
This means that the site should be fully functional and display correctly. We will test the site fully in level 1 browsers to make sure any bugs are fixed as soon as possible. Currently our level 1 browsers are IE 7,6, Firefox 2 (3 still buggy), Safari 3, Opera 9.

Level 2 Support
This means browsers that should work without any problem with our software but as we cannot test every single available browser we cannot guarantee that everything will work. For example if the browser is the latest version of SeaMonkey or Firebird which is based on the same Gecko rendering engine that Firefox is (which is a level 1 browser) then the system should work perfectly depending on your browser settings. However as we do not fully test
the system with this browser we do not guarantee it will work 100%. Current level 2 browsers would be Firefox 3, Opera 8, Sea Monkey, Konqueror.

Level 3 Support
This means older or niche browsers such as PDA/Mobile phones that we do not test the system on. This is not to say the system won't work as it might do depending on your browser settings. However we are not going to test our system on Netscape Navigator 4 or every mobile phone to ensure it works.

A fully functional site means no Javascript errors however the Javascript is not really a problem as most code that works in IE 7 is going to work in IE 5 and we all try to write cross browser code nowadays which is made easier with all the libraries available. The issue is more to do with CSS and all the quirks between IE/Mozilla and the various versions. IE 6 for instance has a number of major differences which means special stylesheets or hacks have to be implemented. As much as we would like to downgrade IE 6 to a level 2 browser we cannot due to the simple fact that a number of our largest clients still use IE 6 as their browser. We have enquired about the possibility of them upgrading but were actually told that their technical support team would not allow them to which is understandable if you consider how much support time would be taken up by requests of help because of the new browser layout. I can imagine don't want to suffer the hundreds of phone calls asking "where has the history menu disapeared to."

I also have Firefox 3 in level 2 due to the fact that there are still a number of outstanding issues with the site which need resolving before we would make it level 1. Some of these issues are definitely a problem with the browser such as the well known problem of playing Flash videos which an upgrade to version 10 is the only workaround I have found. There is also an issue with the execCommand function which I am not sure about as the code worked fine in Firefox 2 and other browsers but has suddenly started giving me Component returned failure code: 0x80004003 (NS_ERROR_INVALID_POINTER) [nsIDOMNSHTMLDocument.execCommand]" errors in an iframe based wysiwyg editor the site uses.

Current browser usage

I like to occasionally look at the traffic statistics to see whether our grading of browsers over 3 levels is in keeping with actual Internet use.

The system I am logging against is recording on average 350,000 page loads a day at the moment roughly 50-60% of which are from crawlers which is nothing out of the ordinary. So looking at the traffic from those site members who have logged into the website as opposed to just visitors the browser breakdown for this month so far is:

Browser %
IE 7.0 61.56
IE 6.0 27.21
Firefox 3.0 5.44
Firefox 2.0 3.06
Safari 3.1 2.72

Which is no great surprise and shows how much of a market share IE 6 still has even after 2 years of IE 7 being around.

As for obscure and old browser versions would you be surprised or not to know that for today only the following browsers appeared in the stats for all non-crawler traffic:

  • 62 different people used IE 5.0 and 1 came along in IE 4!
  • 5 visited on various versions of Netscape Navigator 4.
  • Overall users to the site Yandex the Russian search engine came third after IE 7 and 6.
  • There were over 100 different types of browser/version recorded today alone.

Although not earth shatteringly exciting it does show the breadth of browser types available and also that a large majority of the users out there do not seem upgrade very often, some not at all by the looks of things. With new versions of browsers rolling out all the time it would be physically impossible to test a site in each one but if your site works in the major 4 rendering engines (IE/trident, Firefox/Gecko, Safari/Webkit, Opera/Presto) then you will be covering the majority of those users who do keep up to date with browser revisions.