2011年2月10日 星期四

[CSS3 Minefield] Media Queries

延續上回的CSS3火星系列，這次颯爽登場^的是Media Queries!

[前言]
當今世上的顯示平面實在太多－不同大小的手機、不同大小的顯示器、以至不同的媒介(media)，尺寸兩極，一個CSS難以滿足全部平台，於是讓特定的顯示平面+螢幕尺寸來切換CSS的media query應需要而生，在smartphone/iPad+CSS3橫行的年代獲廣泛應用。

Media Queries有兩個組成部分: 媒介種類(Media Type) & 特性(Media Feature)，以下逐一說明。


[開始之前: 何謂Media Type?]
所謂媒介(Media)是指網頁的輸出器材(device): 螢幕、列印在紙上、投影機、PDA等，w3c稱之為media type，於CSS2加入支援。
w3c定義的media type一覽
  • all: 全部，wildcard
  • aural: 朗讀式裝置，如screen readers或可發聲瀏覽器，已被speech取代 [deprecated]
  • braille: 盲人點字器 (Braille tactile feedback device)
  • embossed: 盲人點字打印機 (paged Braille printers)
  • handheld: 手機或PDA
  • print: 列印輸出
  • projection: 全螢幕投影或kiosks
  • screen: 一般電腦螢幕、iPhone和iPad的media type
  • speech: 朗讀式，同aural
  • tty: Terminal等由文字長度決定顯示大小的裝置
  • tv: 電視
[w3c spec][browser支援]
一般而言常用的就是all、screen、print這幾個。使用方法有數種: media attribute (< style > or < link > ), @import, 及最常見的 @media

media attribute [可用於<link>或<style>
<link>
<LINK REL="stylesheet" TYPE="text/css" MEDIA="print, handheld" HREF="foo.css">
<style>
<style type="text/css" media="print">
body { font-size: 13px }
</style>
*link有註明media 那麼CSS檔案就不用@media

@import : 在url後加入media type selector 做filter
@import url("fancyfonts.css") screen,projection;

@media: 用@-rule的語法去包住用於該media type的css rules
@media print {
body { font-size: 10pt }
}
@media screen {
body { font-size: 13px }
}
@media screen, print {
body { line-height: 1.2 }
}

基本上@media就是用一個rule block去包一大堆用於該media的css rules:
@media media-type selector {
/* CSS Rules for this media type */
}
media-type selector就是上面的w3c media type，可多於一個media type，多於一個時用逗號分隔。如
screen, projection
all
print, handheld

而media type的引入順序在該media/all時為順序，所以可以做到共用一個基礎css再做特足修正:
screen,print <- 螢幕及打印的共用style
print <-打印的style，把logo和sidebar移走，只留下正文和comment

這樣其實充其量只能解決在特定平台的style (製作列印的style)，螢幕太大或太小是光用media type不能解決的事，本文的主角來了。

[同媒介(media)但不同尺寸(dimension)的解決方法: Media Feature]
之前說過Media Queries有兩個組成部分: Media Type & Media Feature。Media Type就是輸出平台的話那麼Media Feature就是條件(constraint)。在Media Query中Feature的指定方式為
沒有value: (media-feature)
有value: (media-feature: value)
media-feature見下表:

可用Media Feature 一覽
  • width^!,height^!: 泛指browser windows的dimension(可用的顯示區域大小)，最常用的feature
  • device-width^!, device-height^!: 泛指device screen dimension(針對可用的顯示區域大小)
*如果是紙類(e.g. print)這兩組意義和screen不一樣
  • orientation: [portrait | landscape] device的方向，desktop browser及其他不支援的device是landscape，而iPad/iPhone是兩個值都支援 (如果沒有開方向鎖)
  • aspect-ratio^, device-aspect-ratio^: [x/y] 和width/height相似，一個是browser，一個是device，寫法是將x:y改為x/y
  • color*^:每種顏色的bit數
  • color-index*^:索引色專用，指定color lookup table內色彩數量，如果device不用索引色則為0
  • monochrome*^: 火星文..."number of bits per pixel in a monochrome frame buffer"，如果不是monochrome device則為0 (應該沒有吐true的device存在吧-_-)
  • resolution^:[x dpi/ x dpcm] 字面解釋...
  • scan: [progressive | interlace] tv專用，掃瞄的種類....
  • grid*:和media group有關 - 分辦該裝置為 grid 還是 bitmap......print, screen, projection, speech會吐false，其他是1
[w3c spec]
*: 可以沒有value或是整數
^:可以加min/max prefix，e.g. min-width, max-height
!: value要有css長度單位，如px, cm, ...
實際feature的應用範圍Spec寫的十分麻煩 (因為要對media group－是的，一種media type可以對應數個group)
而range會用兩個min/max來限制

材料齊備，主角來了

[主角: Media Queries]
Media Queries使用上是作為media-type selector的一種，更詳細的定義css應用的media:
@media handheld and (min-width: 20em),
screen and (min-width: 20em) { … }
syntax
media-type and media-feature
可以一直用'and'接feature (這次不用逗號以免混淆)
例
<link rel="stylesheet" media="screen and (color) and (min-width:300px), projection and (color), print" href="example.css" />

@import url(example.css) screen and (color) and (min-width:300px), projection and (color),print;

@media screen and (color) and (min-width:300px), projection and (color),print { … }

另外可加not去做negation或是only把css file在舊瀏覽中隱藏
<link rel="stylesheet" media="not screen and (color)" href="example.css" />
<link rel="stylesheet" media="only screen and (color)" href="example.css" />
至於Browser Support...因為是CSS3才加入+W3C CR，是很完整支援也不錯的Module，會找碴的就IE 6 -8而已...[source]

[應用]
Showcase: http://mediaqueri.es/
Case Study/理論: Responsive Web Design, CSS Media Queries & Using Available Space
iPhone與media queries: The practicalities of CSS Media Queries, lessons learned., The orientation media query

[小結]
大家的focus都是在網站Mobile < - > Desktop Design自動調整這方面上 (頂多加個iPad或是別家tablet)，不過光是這個設計方向已經不一樣了－或是說，更多的傳統印刷元素會加入?
期待看到更多的網站應用。

^筆者沒有看銀河美少年，別吐糟
✍ ◷
Tag ❖

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)