var newBGString = $(this).css('background-image');

…it does, but not in firefox. Say the background property was set to “url(someimage.png) top left no-repeat”, making the background-image property “url(someimage.png)” right? In every browser except firefox, yes, not for firefox. Firefox would set the var as “url(“someimage.png”)” and THEN complain that the var is not realistic when you go on to use it elsewhere.

Anyway ridiculous bug, almost as annoying is how simple, hacky and rough the fix is:

var newBGString = $(this).css('background-image').replace('"',''); 

So if your firefox doesn’t like background image swapping via js, try it, I guess…

The post Firefox, why you mutate my css? first appeared on Woody Hayday | Blog.

You could throw browser compatibility out of the window as an issue and provide a “recommended use” policy, for example specify one browser/version and stick to it. Fine if you have a small clientèle who don’t mind this but as the world gets into the internet groove people are picking new browsers to experiment with and want functionality across the board, despite the blood sweat and ie hacks developers need to use to provide this.

Once you get into the swing of it you start to realise the pitfalls of certain CSS selectors, Javascript and other embeddable’s and how they affect different browsers. But even the smallest things such as mouseovers can be simple to do in one browser but fail elsewhere through silly mode’s or browser build errors. I have developed a quick Browser Compatibility Matrix which gives you an achieveable testing list, taking into account a variety of Widescreen and standard 4:3 format resolutions and with and without javascript functionality (there are good reasons people turn off js.)

The document should be an ever evolving thing as browsers develop as tools, realistically it will probably apply for the next 8-12 months, after which we will likely be full-flung into CSS3 capable browsers with a whole bunch of new scenarios to work around, perhaps less irratating ones though as the browsers sort out their age old lack of css, alpha and other processing.

There is a few services offering browser compatibility testing for your website, spitting out screenshots of the site at different screen resolutions in different working environments and ultimately the major browsers. Although a nice system I think its a bit lazy to pay someone to do this, when you can get all versions of all browsers on your system given a few hours scouting around. Here is my list of standalone browsers, multiple versions of ie on one box etc links.

Universally Epic Web environments are the produce of professionals, browser compatibility is not an issue its a hurdle. Ensuring your outputted html complies with such things as w3c strict xhtml and the css validates without error’s is great but still you should always focus on the user experience over the bot’s.

The post Browser Compatibility first appeared on Woody Hayday | Blog.

Browser Compatability Matrix PDF

Browser Compatibility Matrix PNG

The post Browser Compatibility Matrix Files first appeared on Woody Hayday | Blog.