/ Media Query

[CSS] Media Query Level 4

今年的 Draft 有更新,所以就繼續記錄一下。其實,我比較希望 CSS Selector Level 4 能趕快支援,不然我的 Level 4 筆記都已經一年多了,想起來真是讓人內牛滿面(欸


https://www.w3.org/TR/mediaqueries-4/

最新的更新是 2016/01/26 還算有在更動(看看隔壁棚的 Grid Layout(最後更新 2013 年(已哭

UPDATE: 最近有更新了(淚

千年傳統,全新感受

沒有新增太多新玩具,棄用的東西到不少。

  1. 除了 all, screen, print, speech 之外,其餘的 Media Query 的類型全部棄用。
  2. 棄用 device-width, device-height, device-aspect-ratio
  3. 加入__布林值__,主要是為了區隔 none 這個字,依據 Media Query 的規則,只要是 0 或是 none,都會被轉譯成 true 其餘則為 false
  4. or, and, only, not 不再被視為是合法的 Media Query 類型(以前也不是啊?特別強調的用意不知為何?

寫法上的變化,

  1. 可以指定 區間 (range)
  2. 更新頻率,update-frequency
  3. 區塊溢出,overflow-block
  4. 行內溢出,overflow-inline
  5. 反轉色,inverted-colors
  6. 指向裝置,pointer, any-pointer
  7. 指向裝置覆蓋元件狀態,hover, any-hover
  8. 環境,light-level
  9. 腳本,scripting

比較讓人興奮的,大概就是可以自訂 Media Query 這件事情。

寫法上的變化

@media (600px < width < 1200px) {
  /* 可以指定一個區間給 width */
}
@media (update-frequency: slow) {
  /* 輸出設備或裝置的更新頻率 */
  /* 3 種設定值可用 */
  /* none, slow, normal */
}
@media (overflow-block: scroll) {
  /* 區塊溢出顯示區域時的設定 */
  /* 4 種設定值可用 */
  /* none, scroll, optional-paged, paged */
}

@media (overflow-inline: scroll) {
  /* 區塊溢出顯示區域時的設定 */
  /* 2 種設定值可用 */
  /* none, scroll */
}
@media (inverted-colors: none) {
  /* 顯示反轉色 */
  /* 2 種設定值可用 */
  /* none, inverted */
}
@media (pointer: none) {
  /* 針對不同指向裝置給予不同設定 */
  /* 3 種設定值可用 */
  /* none, coarse, fine */
}

@media (hover: none) {
  /* 針對不同指向裝置給予不同覆蓋元件狀態設定 */
  /* 3 種設定值可用 */
  /* none, on-demand, hover */
}
@media (light-level: dim) {
  /* 針對不同環境光源的設定 */
  /* 3 種設定值可用 */
  /* dim, normal, washed */
}

@media (scripting: enable) {
  /* 畫面載入動態腳本時啟用 */
  /* 3 種設定值可用 */
  /* none, initial-only, enabled */
}

自訂 Media Query

說穿了是類似自己定義一個名字,讓之後可以少寫一些判斷,主要的規則是這樣,

@custom-media = @custom-media <extension-name> { <media-query-list> | true | false };

@custom-media --uccu-window (max-width: 30cm);

@media (--uccu-window) {
  /* 直接套用 --uccu-window 設定 */
}

好像了無新意(呵欠