HOWTO: Bulletproof CSS3 media queries

From the blog:

Carrer Blog: Bulletproof CSS3 media queries

If you are part of the CSS community you probably know that CSS3 media queries will change the way how we write CSS.

Why is that?

CSS3 media queries are very handy to target various devices with various monitor (screen) size. With the help of the CSS3 media queries we can have site optimized for iPhone and other mobile devices, with the same solution we can have site optimized for iPad and all other tablets . This CSS solution will be much more cheaper than building new mobile web site something like http://m.somewebsite.com or http://ipad.somewebsite.com .

Can we start using the CSS3 media queries today?

Yes we can!

The main problem of the CSS3 media queries is they will not work in the older browsers .

CSS3 media queries will not work in IE8 (and lower) also browsers lower then Firefox 3.5, Safari 3, and Opera 7. Basically the main problem is IE and the older version of Firefox.

For the mobile web browsers this solution should work for the modern webkit and opera browsers that support CSS3 media queries.

I tried to resolve this problem by providing pure CSS solution for 95% of market share PC browsers and JavaScript solution for the rest of the browsers.

Advertisements

~ by WPA Staff on May 18, 2012.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: