Skip navigation.

Confessions of a Web Developer

Posts tagged with "design"

Yahoo expands support for Opera 9

, , ,

Yahoo! just announced an update to their system of Graded Browser Support. This is the scheme where they classify browsers according to capabilities, age, user base.

  • A-Grade browsers get full support. Yahoo does extensive testing, and tries to make services work well in them.
  • C-Grade browsers are known to have problems, and get sent "lowest-common denominator" code. When last checked, the only C-Grade browser was IE 5.0.
  • X-Grade browsers are everything else. They get the same code as A-Grade browsers, but Yahoo doesn't do any testing on them.

A few months ago, they added Opera 9 on Windows XP to their A-Grade list (replacing Opera 8).

This time around, they've made several interesting changes:

  • Expanded A-list support for Opera 9 across all operating systems they support, including Mac OS and older Windows releases.
  • Added IE7 and Firefox 2 to the A-list.
  • Dropped IE 5.5 and Firefox 1.0 from A-list to X-list.
  • Dropped Netscape from A-list to X-list.

The first item is most significant for Opera users, because it brings Yahoo's official policy on Opera support up to the same level as their support for Firefox.

The new chart only shows A-grade browsers, so it's not clear whether IE 5.0 is still supported at C-grade level or dropped to X-grade like IE 5.5. This may reflect support at Microsoft, which maintains support for IE 5.0 on Windows 2000, but not IE 5.5. You can't even download IE 5.5 from Microsoft anymore. You can get IE 5.0 by installing Windows 2000, and you can update to IE6 or download the installer, but you can't update to or download IE 5.5.

The fact that they've dropped Netscape is interesting, and represents another nail in the coffin of the web's former dominant player. Of course, the real action moved from Netscape to Mozilla years ago.

Browser Discrimination hits IE7

, ,

I just read an interesting post from Microsoft's Internet Explorer team on The IE7 User-Agent String. This statement in particular illustrates a problem not unfamiliar to Opera users:

There are a few remaining sites which fail to recognize IE7 because they are performing exact string matches to look for specific IE version strings. Those checks will need to be removed or updated to accommodate IE7.


Yes, you read that correctly: there are websites out there using bad browser sniffing code which will send the wrong code to Internet Explorer 7. In fact, they go on to say that they've released a tool which will let IE7 pretend to be IE6!

To enable you to workaround any remaining sites that block access to Internet Explorer 7, we developed the User Agent String Utility. The utility comes in the form of a small executable that opens an IE7 instance that sends the IE6 user agent string. It also provides a mechanism for you to report problem web sites to Microsoft so that we can follow up with the affected site owners.


I'll admit to a certain amount of schadenfreude, but it also points up just how bad a strategy browser sniffing can be when done thoughtlessly: It effectively builds an expiration date into your website after which even the browser you designed it for will run into problems.

Yahoo! ♥ Opera 9?

, ,

Yahoo! has just promoted Opera 9 an A-grade browser -- one that they test on and aim for full support. At the same time, they've dropped Opera 8 from the list.

Graded browser support basically means that instead of "yes" or "no," they have several levels of support. A-grade browsers are those that they develop for and do full testing on. C-grade browsers are known to have problems, and are given stripped-down code. Everything else is X-grade, which is assumed to be just as capable as an A-grade browser, but they don't do any testing on it.

As an example, Firefox is A-Grade, while SeaMonkey and Camino are X-grade. The browsers should be functionally identical as far as displaying web pages is concerned (well, mostly), so testing in Firefox results in pages that also work in other Gecko browsers.

Since Opera 9 has added quite a bit of scripting and DOM support, as well as features like rich text editing, perhaps we'll soon see full support for Opera on some of the more elaborate Yahoo! services.

The one drawback is that services built for and tested on Opera 9 may not always work on older versions, which they aren't testing. But hey, Opera 9 is a free upgrade, and the system requirements haven't increased as far as I've noticed.

Conditional Opera Banners Using JavaScript

, , , ...

Posting an Opera button on your website or blog is a great way to encourage people to try out the browser -- but what if the visitor already uses Opera? It shows solidarity, but what if you could show them something else, something that is new to them?

You might want to replace your regular Opera banner with an ad for Opera Mini. Or show them another graphic of your own design. Or maybe not even a graphic, maybe post some sort of message, like "Opera spoken here!" or "Welcome, Opera visitors!"

It's relatively simple to do this in PHP, or ASP, or some other server-side script...but sometimes you have to stick with static HTML. Well, client-side JavaScript can replace chunks of your page, and here's how to do it.

1. Put the following script in a file called operalinks.js:

function replaceOperaLink(linkID) {
if(linkNode=document.getElementById(linkID)) {
if ( 0 <= navigator.userAgent.indexOf('Opera') ) {
var newButton=document.createElement('span');
newButton.innerHTML = '<a href="http://www.opera.com/">Glad to see you\'re using Opera!</a>';
var parentNode=linkNode.parentNode;
parentNode.replaceChild(newButton,linkNode);
}
}
}


For the innerHTML section, you can plug in a new link and banner, or a special message, or anything you want. (Just make sure that you put a backslash (\) in front of any apostrophes you use.)

2. Put a unique ID in the tag for your regular Opera button. Use the outermost tag that you want to replace. For example, let's start it off with this:
<a id="OpLink" href="http://www.opera.com">Download Opera!</a>


3. Load the script in your document's <head> section:
&lt;script type="text/javascript" src="operalinks.js">


4. Call the function in the body onload event using the ID you chose in step 2:
&lt;body onload="replaceOperaLink('OpLink')">


When the page loads, the script will check the visitor's browser. If it's Opera, it'll replace the banner with whatever message you chose in step 1. It's compatible with both HTML and XHTML, and you don't need to worry about using <noscript> tags to make sure the banner still shows up for people with JavaScript disabled.