Data URI pattern effect & jQuery Mobile UI

Data URI’s are a powerful way of adding content in-line and saving the need for a http request as each one slows down your page load. They have an even greater advantage of allowing you to forgot about creating sprites for small images or background tiles and simply include them in your CSS instead.

In this case I was asked to add a mottled effect to the standard jQuery Mobile theme. It instantly adds a softer feel to the UI and looks especially good on high resolution mobile phone screens.

It’s worth noting here that I deliberately target just the “background-image” attribute as that doesn’t affect the rest of the UI as that uses CSS gradients and box shadows.

Support for Data URI

Sadly only the newest browsers support it just yet but the majority of mobile phones do. Therefore it makes a great addition to your mobile build whether it be a web app or a phonegap style hybrid app.

Leave a Reply