CSS 3 Media Queries
Sunday, 11. January 2009, 12:21:21
Today I tried my hand at CSS 3 Media Queries.
Media Query Support in Opera/Presto 2.1.1
Media Query Specification at W3.org
These can adjust CSS settings depending on the properties of the media. For instance, one can make sections narrower or wider, or choose not to display some sections, depending on the window width and device type.
For the homepage of my web site, I added CSS Media Queries like the following:
This means that the regular 3 column layout on that page is reduced to a single-column layout when the width of the window drops beneath 45em, and that the images (tlt etc.) in the top table are hidden.
Browser comparison:
Other browsers will be tested when available.
Media Query Support in Opera/Presto 2.1.1
Media Query Specification at W3.org
These can adjust CSS settings depending on the properties of the media. For instance, one can make sections narrower or wider, or choose not to display some sections, depending on the window width and device type.
For the homepage of my web site, I added CSS Media Queries like the following:
@media all and (max-width:45em){
/* html,body{background-color:#ccffcc} */
dl{max-width:40em;min-width:5em;padding:0;float:none;position:static}
.watermark{padding-top:0}
.tlt,.trt,.tlb,.trb{display:none}
.tlt a span,.trt a span,.tlb a span,.trb a span{display:none}
#frmGoogleSearch input#q{max-width:37em;min-width:3em}
}
This means that the regular 3 column layout on that page is reduced to a single-column layout when the width of the window drops beneath 45em, and that the images (tlt etc.) in the top table are hidden.
Browser comparison:
- Opera Mini 4.2 reacts to these queries mostly. (It seems to ignore a specific query for handheld devices. I have to look into that.)
- Opera 9.6 and Firefox 3.1 (Shiretoko) react to these queries on the fly: resize the window and you will notice the changes immediately.
- Firefox 3 and Internet Explorer 6 ignore them. (Internet Explorer 6 does not understand "max-width" and "min-width".) (Firefox 3 does not understand CSS sent in the UTF-8 charset when generated by PHP: it assumes the page is sent as text/html instead of text/css. The file has to be saved and identified as using the iso-8859-1 charset to solve. The other browsers tested do not have this problem.)
- Google Chrome reacts to the Media Queries after reloading the page.
Other browsers will be tested when available.
WIDGETIZE