Media Queries

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.

Basically, this means you can change stylesheets based on for instance the width and height of the viewport. In a broader sense, this means as the spec puts it: “by using Media Queries, presentations can be tailored to a specific range of output devices without changing the content itself.”

Below are two tests, for min-width and max-width, currently only functional (and thus green) in Safari 3, Opera, and Firefox 3.1 (Alpha). This is however the future of web development, and could make building pages that are usable in both the mobile as the normal web a lot easier.

min-width 640px
max-width 1100px


The CSS which should color the two divs above is as follows:

@media all and (min-width: 640px) {
	#media-queries-1 { background-color: #0f0; }
}	

@media screen and (max-width: 2000px) {
	#media-queries-2 { background-color: #0f0; }
}

Hosting by: