The cutting edge of web development is going through a rough patch of late. After a long fight under the tyranny of Microsoft Internet Explorer everyone seems bent on elevating webkit to the position of de-facto browser. Tech demos often enough only include prefixes for webkit even when firefox’s prefixes are equally expressive.
The counter to this is the mantra of cross browser testing. Which oddly enough only means
- IE
- Chrome
- Firefox
- iOS
- Android
Which is clearly not all of the platforms right?
- Windows Phone
- Opera
- Safari
- Bada
- Symbian
To be honest I do not think any web developer can test against this many devices while staying on schedule. The only practical method to hit everything is with a safe set of css techniques.
My personal list goes
- Avoid position rules
- Avoid images for backgrounds
- Use pre-existing code at all costs
So for fun lets look at Party Poker France in a bunch of marginal browsers and see what breaks.
Just kidding, this is firefox. Notice that nothing is broken.
I bet most people did not even remember that the PSP has a browser. It does quite well yet notice that it chokes on the layout because someone got clever and wrapped the floated elements. The wrappers do nothing but pollute the DOM and complicate the layout engine’s job.
This is an edge case of the ‘using pre-existing code’ rule. The site uses something called sIFR which in turn uses Flash to provide custom fonts. What happened is sIFR mis-identified the capabilities of the Android tablet and tried to use flash when it shouldn’t have.
A simple mistake with a simple fix, do not use obsolete libraries. sIFR and Cufon have both been outdated by wide browser support for @font-face css, take advantage of it.
Finally we have the most pathological browser ever, your printer, for which the only solution is print specific css.
Gravatar, you’ve seen anon@anon.com.