[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 設定 */
}

好像了無新意（呵欠