Media Query: Compatibility with older browsers

A few months ago, Creative Sharepoint decided it was time to give the current website a facelift, and this gave us the opportunity to make the website responsive.

 

What is a responsive website?

 

In short, a responsive website design adapts the layout of the website to the viewing environment to give the user a better experience.

11-300x90

 

CSS2 added support for the media=”screen” way of defining which stylesheet to use for which representation of the data. CSS3 adds a new feature to this functionality, by adding media queries.

Rather than looking for the type of device they’re looking at and use it to conditionally apply CSS styles, you can use it to gather sorts of information of the user to check for all kinds of things.

For example:

  • width and height (of the browser window)
  • device width and height
  • orientation – for example is a phone in landscape or portrait mode?
  • resolution

If the user has a browser that supports media queries, then we can write CSS specifically for certain situations. For example, detecting that the user has a small device like a smart phone of some description, and giving them a specific layout (css).

The new CSS3 Media Queries works only with newer phones and browsers such as Internet Explorer 9, Google Chrome, Apple Safari, Mozilla Firefox etc. In order to make it backward compatible, there are several solutions. But the way I choose to go forward is to use a jQuery plugin (from CSS 3 Media Queries for all Browser (jQuery Plugin)).

Go to Creative Sharepoint and check it out yourself. Try to resize the browser and see how the layout responses to the size of your browser.

That’s it from me, I hope gave you a little insight of CSS3 Media Queries.

Over and out,

Mohammed Abbas