CSS3 media queries
CSS is improving with the introduction of CSS3.
Contrary to the previous version, CSS3 supports selections that are very advanced, offering capabilities close to what you could write in JavaScript.
Today I wanted to talk about the Media Queries because that can be used to very much optimize the list of links used to load your CSS data.
In HTML, you can use a <link ...> to add a CSS file to your page.
<link rel="stylesheet" type="text/css" href="style.css" />
In this case, the file style.css will always be loaded, whatever the media being used.
At times, however, you may want to introduce specific style sheets for specific media types. The most well known media types are screen and print. The screen media type is used when rendering on your computer screen. The print media type is used to render your page for a printer, in which case you may use a smaller font or different margins for your paragraphs.
This was supported in older browsers with the addition of the media attribute:
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
This is already very good to create style sheets that vary widely depending on a specific media. However, even within one media, you may get a wide variety of sub-media types.
The most obvious is the screen resolution with the introduction of small screens on cell phones and other portable computers and very large screens with the use of multiple wide monitors on a single computer.
CSS3 introduces a query feature that can be used to specify CSS files for a very specific query. The queries are not limited, but to test the resolution, you can use the min-width and max-width parameters to clamp the sizes. This query works in the media attribute.
... media="screen and (min-width: 150px) and (max-width: 299px)" ...
This will load the specified style sheet only if the size of the output is between 150 and 299 pixels.
Parameters you can query:
- Screen width and height
- Color: full, indexed, or black & white
- Orientation (portrait/landscape)
- Device aspect ratio (i.e. standard TV is 4/3, widescreen is 16/9)
- Scan and Grid
The query expressions support parenthesis, the not and only operators and the data being checked is a JavaScript like expression, meaning that you can include mathematical expressions such as resolution < 90dpi (although there are limits and the < and > are always tricky to use in HTML...)
