Youtube Phasing out support for IE6

In a bold move by Google/Youtube, IE6 support is being phased out.

As of this morning, visit Youtube using IE6 and you'll see the message "We will be phasing out support for your browser soon. Please upgrade to one of these more modern browsers", with links to Google Chrome, Firefox 3.5, and Internet Explorer 8.


The links appear in random order, so nobody can accuse Google of promoting their own browser over another. Looks like they're thinking the same thing as the rest of us - we don't care what browser you use at this point, as long as it's not IE6!

With HTML5 well on the way and Google Chrome OS reputed to hit shelves in the second half of next year, this is a clear sign that the web is about to change - for the better.

Controversially, the message might not be entirely accurate - "soon" may well mean "now", as we've found that since the message appeared we can't watch videos using IE6.

We know that the majority of IE6 users are stuck on corporate networks, unable to upgrade because of security restrictions or because they're using internal web apps designed for IE6 that would be too costly to upgrade.

Will we see these users switching to the likes of Chrome and Firefox as their primary browser? Either of these browsers now stands to snap up IE6's 15% market share.

Self Clearing Floats [CSS]

If you're working with floats, you've probably at one point or another had to use an extra div with a "clear: both;" style to ensure the container's dimensions stretch to match the dimensions of its content.

Everybody hates unnecessary markup, and sometimes it's not practical or possible to add those extra divs anyway - usually when we're dealing with menus.

As usual, Quirksmode to the rescue! This article explains how to achieve self clearing floats, with only two lines of CSS.

... adding an HTML element for presentation's sake is something we've learned to avoid. Unfortunately the problem could not be solved in any other way, until now.

Read the article at http://www.quirksmode.org/css/clearing.html.

:hover on any element in IE6 [CSS]

Everyone knows IE6 doesn't support :hover on any elements except links. We work around this by nesting elements inside links, applying styles to the links in our menus instead of their container list elements, and so on. While it's a pain that we have to do this, I think most of the time we end up with cleaner code as a result - the links in your menus should be the elements with most of the styling.

However, sometimes we come across a problem that we simply can't work around. More often than not, this means a rewriting a lot of code and even cutting features from the design.

Whatever:hover, and a few dozen similar but not-quite-as-good scripts, aim to solve this problem by adding :hover support to any element in IE6.

They do it by using a proprietary IE feature, introduced in IE 5.5, called DHTML Behaviors. DHTML Behaviors allow custom elements to be defined, and make it possible to modify and override the default behavior of standard HTML elements. The code for these behaviors is stored in HTC files and referenced using a non-standard CSS rule "behavior".
These days DHTML behaviours, like most proprietary IE features, are pretty much obsolete, but they do allow you to do some clever things to work around IE6's shortcomings.

Whatever:hover works by searching your stylesheet for :hover rules and adding mouseover and mouseout events to matching elements, emulating native :hover behavior. Weighing in at a mere 2.5k, the extra payload is so small as to be inconsequential.

In December 2008, version 3 was released and addressed one of the most critical weaknesses of the script; previously, :hover support could only be added to elements present in the HTML - elements added dynamically were stuck with the default IE limitations.

Since that's no longer an issue, and filesize isn't a problem, there only remains one concern - performance.
Adding mouseover and mouseout events to hundreds of elements is going to cause problems in any browser, so to ensure your users don't see a performance hit (remember, chances are if a machine is running IE6 the hardware's pretty dated too), I suggest the workaround be used sparingly. Continue using :hover on links where possible, but if you absolutely can't, these days you don't need to change your design or reduce functionality.

Incidentally, so far I've only found one occassion where this funcionality absolutely has to be used - the IE6 PNG fix doesn't support :hover, so if you need a rollover on a transparent image, this is the only way to accomplish it.

Visit the Whatever:hover website to read the fine details and download.

Update 2009-06-05: Version 2.0 Alpha 3 of the TwinHelix IE6 PNG Fix doesn't appear to support Whatever:hover at present, so if you need to combine the two stick with the stable Version 1.0.

14 Good-to-Know CSS Solutions [CSS]

Smashing Magazine twittered "What has been your most difficult CSS challenge?". Out of the responses, they've published 14 elegant solutions to problems we've all encountered (or will!) at one point or another.

Among other things, this post covers the sticky footer issues, positioning elements at bottom of a div, on having layout, aligning labels and inputs, auto top and bottom padding, z-index and more

Check out the full article at www.smashingmagazine.com/2009/05/25/ask-sm-css-quick-question-edition/

@import is evil [CSS]

Steve Souders analyses how browsers treat @import compared to the more comment <link> method of including style sheets.

In Chapter 5 of High Performance Web Sites, I briefly mention that @import has a negative impact on web page performance. I dug into this deeper for my talk at Web 2.0 Expo, creating several test pages and HTTP waterfall charts, all shown below. The bottomline is: use LINK instead of @import if you want stylesheets to download in parallel resulting in a faster page.

Personally, I've always disliked @import, so I'm happy to have some solid metrics proving that using it is a bad idea.

Read the full article at www.stevesouders.com/blog/2009/04/09/dont-use-import/.