Topic “css”

So here’s what may be a crazy new IE8 CSS bug that can be triggered under the right circumstances. At MothersClick we started to get a few bug reports about “my browser crashing” when viewing the site. As hard as we could try, we couldn’t get the site to crash any of the browsers we tried. Then with a brand new, clean install of IE8, Nick Robillard was able to get the site to crash and we finally had a reproducible crash on our hands.

When the new myLifetime community launched we wanted to focus on performance, and one trick was to minimize HTTP requests by using the CSS sprites technique. For a great run down of this technique and examples of other major sites using this, check out this resource on Smashing Magazine.

Double checking this implementation with YSlow! everything was working great.

Well almost. Then we tried IE6. I hate IE6.

Then I discovered this excellent post detailing IE6 and its BackgroundImageCache usage.

After trying that JS trick, we noticed the page was significantly faster & smoother in IE6. With heavy CSS sprite usage this was a necessary fix. And with future sites in the works with this same technique, seems like a reoccurring fix.

To Drupal-ize & jQuery-ize this fix for resuability, I wrote this simple behavior below that works with Drupal 6. You can see in action on the myLifetime community.

May this code save you a few hours/days of head banging!

Whoohoo! My JS aggregation patch has finally made it into core to join my other CSS preprocessor patch :-)

With both of those in, is there anything else we can do to still improve the speed and loading time of CSS and JS in Drupal?

You betcha! The next and final phase is to now gzip these aggregated files and the issue is ready, just needs an actual patch for core now.

With 4 more weeks, I hope we can get this final phase in.