重新打磨我的CSS排版功力-2－中意悾間

續上一篇，翻譯CSS-TRICKS中的Media Queries好文章，A Complete Guide to CSS Media Queries 「CSS 媒體查詢完全指引」(第一次刊登時間2020年10月2日，最新更新日2021年5月26日，由Andrés Galante https://css-tricks.com/author/agalante/ 撰寫)，繼續來摸索吧！

本篇是有關CSS的media query 正式篇幅

@media(at-規則/@規則)：
@media [media-type] ([media-feature]) {
/* Styles! */
}
開頭第一個就是media quiries的規則宣告本身，是眾多@規則的其中之一，
為何@media會吸引所有注意(相較於其他@規則)？
因為它驅動網頁所在的媒體類型，該媒體類型支援什麼樣的樣式，且可組合混用運算子(operator)，來設定簡單或複雜的條件。

MEDIA TYPE (媒體樣式)：
@media screen {
/* Styles! */
}
要設定哪種媒體目標？在許多(不是所有)狀況，都會是screen，
合情也合理，畢竟大多數我們要針對的媒體樣式，都是有螢幕的；
但screen不是唯一的目標，還有其他如下：
．all：符合所有裝置
．print：在列印或列印預覽狀態，或任何媒體為了列印而分割畫面的
．screen：符合有螢幕的裝置
．speech：符合媒體有聲音導讀功能，例如螢幕閱讀器；目前這功能由Media Queries 等級四的aural 取代 (@規則是Media Queries等級三發佈的)
題外話：在主要的瀏覽器中，預覽列印styles可以用DevTools模擬預覽樣式。
其他媒體樣式，如tty(文字電話)、tv(電視)、projection(投影機)、braille(盲文)、embossed(點字)、aural(語音)，都已經被棄用，同時官方文件持續建議各家瀏覽器仍要可以辨識這些設定，但必然會被忽略，如仍有在使用被棄用的選項，可考慮換成現代一些的方法。

MEDIA FEATURE (媒體特徵)：
一旦我們設定目標媒體樣式，就可以開始定義需求的媒體特徵；
我們看到許多範例是找到相符合的螢幕寬度(screen width)，screen是樣式，min-width與max-width是特徵

但是還有很多、很多(很多)樣式(features)可以套用，Media Queries等級四有5個類別，共18個媒體樣式。
----下列項目的內容翻譯，會在另一篇文章呈現，敬請期待----
Viewport/Page Characteristics (視埠/頁面特徵)
Display Quality (顯示品質)
Color (顏色)
Interaction (互動)
Deprecated(已棄用)

另有Video Prefixed (影片前綴)、Scripting (腳本)、User Preference (使用者偏好)等三項都是在Media querier等級五時才有可能發布。

OPERATOR (運算子)：
Media queries跟其他程式語言一樣，支援邏輯運算，所以可以設定特定條件來符合想要的媒體樣式。
@media本身也是一個邏輯運算，就像是 ”如果(if)下列樣式與特徵符合，然後執行下列的東西”

and
可以運用and來設定多個都要符合才可以的條件
/* Matches screen between 320px AND 768px */
@media screen (min-width: 320px) and (max-width: 768px) {
.element {
/* Styles! */
}
}

or (或是逗號分隔)
我們也可以用or或是以逗號分隔來表達只要滿足其一就可以的條件
/*
Matches screens where either the user prefers dark mode or the screen is at least 1200px wide */
@media screen (prefers-color-scheme: dark), (min-width 1200px) {
.element {
/* Styles! */
}
}

not(非)
或許我們也需要知道裝置不支援或不符合的條件，
下列範例當裝置是印表機，且是一台僅能列印單一顏色的印表機時，移除body的顏色設定
@media print and ( not(color) ) {
body {
background-color: none;
}
}

真的需要media queries嗎?

Media queries是CSS中強而有力的工具，深藏許多寶藏於其中，但如果果你設計精細到每種狀況都要納入，最終會變成一篇劇大篇幅的複雜程式碼，複雜的難以維護(或再修改)，要深知，CSS像是幼年的熊：可愛且無攻擊性，但當牠長大將會活生生吃下你。

作者建議追隨Ranald Mace的通用設計概念(concept of Universal Design)，
意旨 “設計給所有人都可使用的產品，並盡可能延伸可能性，避免僅為適用於特別案例而設計”。

在Laura Kalbag 的“Accessibility for Everyone(人人都可以)” 書中解釋了無障礙(accessible)與通用(universal)設計的微妙差異，差異小卻很重要。
無障礙設計者(accessible designer)會建造一個較大的門，專為輪椅使用者通行考量，
不過，通用設計者(universal designer)會築出一道所有人都可以走的門，不論他們身體的差異性。

聽起來，在網頁上討論通用設計似乎很難，也幾乎像是烏托邦式想法(意指理想完美的境界)；
但仔細探討，有大約150個不同的瀏覽器，約有50個瀏覽器偏好設定選項，還有超過24,000不同且獨特的安卓(Android)裝置，
這意味著製作出來的網頁，至少會在1千8百萬種組合設定中使用，
如同Miriam Suzanne在推特的發文 ”CSS正嘗試在無限的、未知的畫面，且涵蓋不同作業系統、介面、與語言，來設計未知的內容。我們沒有任何一個人，有機會知道我們正在做甚麼。”

所以”假設”是相當危險的，
因此當我們設計、開發、發想產品時，將”假設”移除腦海中，
使用media queries來確保內容，在所有使用者觸及之前就要正確呈現。

使用min- 與max- 來符合範圍
許多媒體樣式都可加上min- 與max- 的前綴，包含width、height、color、與color-index，都可用min- 或max- 來限制使用的最大最小限制；
前篇已有不少範例，這裡要討論的重點是，可以用在整體範圍的限制，而非一個一個樣式的宣告，
例如body background-color是#fff，在@media範圍30em-8-em更改為purple：
body {
background-color: #fff;
}
@media (min-width: 30em) and (max-width: 80em) {
body {
background-color: purple;
}
}
Media Queries等級四官方文件中闡述，可以使用大於(>)、小於(<)、與等於(=)運算子來簡化，但目前僅有FireFox支援這方式。

巢狀與複雜的判斷
CSS也可以使用巢狀，或以括號(())來組合判斷是，可以發展更深層的複雜判斷模式：
@media (min-width: 20em), not all and (min-height: 40em) {
@media not all and (pointer: none) { ... }
@media screen and ( (min-width: 50em) and (orientation: landscape) ), print and ( not (color) ) { ... }
}
小心：雖然這可以寫出強大複雜的表達，但最終可能會太困難維護，
如同Brad Frost 所寫 “越複雜的設計，越需要考慮維護的適切性”

易用性(Accrssibility)
許多Media Queries等級四加入的樣式，已加入許多易用性考量。

prefers-reduced-motion (使用者偏好設定-減少動畫)
prefers-reduced-motion偵測使用者是否開啟”減少動畫”的選項，其最小化了移動與動畫，prefers-reduced-motion有兩個可能：
．no-preference：意旨使用者沒有系統特定偏好
．reduve：意旨使用者提醒系統，他們偏好最小化移動與動畫於介面中，最好是所有非必要移動都移除。

偏好一般用於易頭暈或暈眩的使用者，當有移動出現會導致失去平衡、偏頭痛、噁心、喪失聽覺等，
如果你有試過身體快速旋轉後的暈眩，就會知道這個感覺。

在Eric Bailey寫的” fantastic article (絢麗的畫面)” 他建議以下列方式停用所有動畫：
@media screen and (prefers-reduced-motion: reduce) {
* {
    /* Very short durations means JavaScript that relies on events still works */
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
}
}
熱門的框架，例如Bootstrap就有這個初始設定(default) ，
沒有理由不使用這個prefers-reduced-motion設定，使用它吧(上面那段@media)！

prefers-contrast(使用者偏好設定-對比色調)
prefers-contrast在系統編號或是瀏覽器設定中，告知使用者是否選擇增強、減少色彩對比度，有三個可能：
．no-preference：意旨使用者沒有特別偏好，如果取其變數為boolean值，會顯示false
．high：當使用者選擇這個選項，會以較高的對比度顯示
．low：當使用者選擇這個選項，會以較低的對比度顯示

撰寫本篇文章時，這個偏好設定樣式沒有任何瀏覽器支援，
微軟曾經有-ms-high-contrast樣式可以設定，但僅限於Microsoft Edge v18以前的版本(非Chromium-based版本)：
.button {
background-color: #0958d8;
color: #fff;
}
@media (prefers-contrast: high) {
.button {
background-color: #0a0db7;
}
}
這個範例增加了button class的對比度，從AA到AAA(當使用者有設定高對比度時)。

inverted-colors(使用者偏好設定-反向顏色)
inverted-colors在系統偏好或瀏覽器設定中，告知使用者是否選擇反向顯示顏色(類似用滑鼠反白選取網頁內容，或向X光機般地，呈現顏色)，
有時這設定是高對比(prefers-contrast)的替代方案，它有三個可能：(但原文只列出兩個)
．none：顏色正常顯示
．inverted：使用者選擇反向顯示色彩

這有個問題，反向色彩也會使影片與圖片色彩反轉，造成畫面看起來像x光影片，
可使用CSS反向過濾器(invert filter)，即可選取影片與照片轉回原本顏色：
@media (inverted-colors) {
img, video {
filter: invert(100%);
}
}
撰寫文章時，這個樣式僅有Safari瀏覽器支援。

prefers-color-scheme(使用者偏好設定-色彩主題)
“深色主題模式(dark mode)” 近來已是相當常見的設定，有了prefers-color-scheme樣式，我們就可以獲得使用者系統或瀏覽器偏好設定，來決定是否以 ”深色(dark)” 或 “淺色(light)” 來呈現使用者偏好的網頁畫面，它有兩個可能：
．light：意旨使用者偏好淺色主題，或是使用者沒有特別偏好時的設定
．dark：意旨使用者偏好深色主題

body {
--bg-color: white;
--text-color: black;
background-color: var(--bg-color);
color: var(--text-color);
}
@media screen and (prefers-color-scheme: light) {
body {
--bg-color: black;
--text-color:white;
}
}
如同Adhuham在”complete guide to Dark Mode” 文章中所說明
“深色主題不僅是將背景顏色改變，還有許多設定需要更動；在你準備鑽研深色主題之前，
記住，如果你沒有相當聰明地撰寫CSS策略，將會使得程式碼變得極為難以維護。”
CSS變數(variables)可以為你做到你想到的，但這是另一個文章主題。