A pedant that hangs out in the dark corner-cases of the web.

Wednesday, June 13, 2007

Media Queries: Opera and Safari

For about a year now, both Opera and Safari have supported CSS3 Media Queries, which allow separate CSS rules based on screen or window (viewport) size, color/grayscale depth, aspect ratio, resolution, tv progressive/interlaced, or grid devices (like dumb terminals or other tty-style devices).

This allows a number of capabilities:

  • More layout columns for the growing audience of 30-inch monitors and widescreen laptops.
  • Single-column layout when only a small or narrow view of the page is available (maybe due to a handheld device, a cheap video card, or an older computer).
  • Less graphically intense layout for "grid" devices (such as telnet sessions or e-book devices).
  • Different backgrounds for browsers with serious color limitations, or black and white displays (maybe for color-blind or low-vision users).
  • Different layout for pivoted monitors or other displays that are taller than they are wide.

Firefox and Internet Explorer need to get on board before this is widely useful, but now that Safari is available for Windows, it may add just a little bit more pressure.