大 CSS 媒體查詢錯誤

已發表: 2017-05-15

當您周圍的每個人都在做您通常認為是錯誤的事情（或至少不是很理想）時，您是否會感到奇怪，但不知何故，似乎沒有人出於某種原因想說什麼？看到每個人都對倒霉的觀察者表現出最好的印象，這是一種非常奇怪的感覺。這讓我想起了那句古老的寓言“皇帝的新裝”。

我一直對 CSS 媒體查詢有這種感覺。為什麼每個人都如此接受一項似乎無法完成工作的技術？為什麼我們作為一個社區沒有團結起來，以一種真正有意義的方式改進它？為什麼我們還沒有想出更好的東西？

今天，CSS 媒體查詢恰好是響應式網頁設計的功能基石。但是，它從來都不是為今天每個人都使用它而設計的，並且證明是在實踐中。當我使用平板設備時，我仍然經常偶然發現網站，這些設備起初看起來設計精良，但當你按照他們的步伐進行操作時，它們的外觀和感覺卻完全不同。

這種響應式網頁設計方法存在根本性的問題，我們還沒有正確解決，我想成為少數幾個聲音之一，因為他在這個問題上的赤裸裸而大聲疾呼。不過值得慶幸的是，在這個時代，我很高興因為有這種不同的觀點而被燒死的可能性幾乎為零。

CSS 媒體查詢有什麼問題

CSS 媒體查詢是為某些東西而設計的，但那不是響應式網頁設計。根據我的經驗，以下是我在嘗試使用它們處理網站時遇到的七 (7) 個大問題：

1.不直觀：

“CSS 媒體查詢很直觀”，從來沒有一個網頁設計師說過。定義媒體查詢的方式非常簡單，但並不總是很清楚事情將如何在真實瀏覽器、真實設備和無數場景中發揮作用。

 @media only screen and (min-width: 320px) and (max-width: 480px) {
    /** CSS 規則放在這裡 **/
}

上面的代碼適用於 320 到 480 像素之間的視口。但是，當您想要做一些更具體的事情時，它並不完全確定[或直觀]，例如當設備是橫向操作的平板電腦時應用樣式規則。設置一個媒體查詢來做到這一點並非不可能，但它絕對不是直觀的——或確定的。

2. 限制條件：

CSS 媒體查詢是動態的，使您能夠在 CSS 中定義條件語句。例如，如果視口在這個和那個之間，那麼做另一個。但是，您主要限於考慮視口，並且在現代網頁設計中還有更多的條件場景。

標籤欄的移動設計指南

假設您正在構建一個漸進式網絡應用程序。有時根據操作系統對某些 UI 元素進行不同的樣式設置會很有用。例如，iOS 設備通常將標籤欄放在底部，而 Android 設備則相反。那麼，你究竟如何讓它與 CSS 媒體查詢一起工作呢？

你不能，因為 CSS 媒體查詢沒有構建任何可以讓你使用的功能。除此之外，您可能需要通過 CSS 進行許多其他自定義，但是當您需要不同程度的簡單到高級條件時，媒體查詢不是一個選項。

3. 本機不可擴展：

CSS 媒體查詢是嵌入到瀏覽器中的功能。這意味著它本身不可擴展。換句話說，您不能通過 CSS 接口原生地向 CSS 媒體查詢添加額外和增強的功能。

即使新的 CSS 媒體查詢功能被 [長期受苦的] 網絡標準流程批准，由於無處不在，這些功能仍然需要一段時間才能使用。此外，並非添加的每個功能都可能對您有用，因此如果您沒有得到想要的東西，您需要找出其他方法來解決您的特定挑戰。

當然，有一種擴展 CSS 的方法，但你必須非常非常了解 JavaScript，而且對於大多數網頁設計師來說，這不是一個實用的過程。

4.不適合改裝：

有些人可能會覺得這難以置信，但在移動設備出現之前，實際上已經有很多網站，而且沒有一個適合移動設備。因此，這些桌面時代的網站需要升級。

不幸的是，CSS 媒體查詢對於這項任務來說並不是一個很好的選擇。由於這些網站是在移動設備相關之前構建的，因此其中許多網站的設計元素不適合響應式網頁設計，例如側邊欄、基於表格的佈局、選項卡式內容等。此外，這些網站中有相當一部分是建立在 WordPress、Drupal、Magento 等內容管理系統 (CMS) 之上，並且從後端有效地集成 CSS 媒體查詢 [前端] 非常難以協調，幾乎不可能協調。

我不得不改造由 Magento Enterprise、WordPress 和使用基於 Coldfusion 的自定義 CMS 提供支持的網站，並且所有項目都完全不可能使用 CSS 媒體查詢 [這是我所有客戶在使用我們的替代方案之前嘗試過的方法]。

5. 代碼效率不高：

使用 CSS 媒體查詢使網頁具有響應性需要大量的代碼乘法。由於這些指令的工作方式[與您的斷點一起]，您必須在每個媒體查詢塊中定義單獨的樣式規則。

 部分{寬度：960px;}

/* 肖像 */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
    部分{寬度：100%}
}
/* 景觀 */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: Landscape) {
    部分{寬度：100%;}
}

在編寫上面的代碼時，我的初衷是讓我的頁面上的<section>元素在所有移動設備中都流暢[寬度為 100%]。但是，由於我沒有本機設備檢測功能，我必須在每個面向移動設備的 CSS 媒體查詢塊中妥協並定義樣式規則，以確保新屬性適用於所有相關場景。

這意味著樣式表級聯的功能效率和Do-not-Repeat-Yourself的良好開發原則必須退居二線。

6. 增加工作流程的複雜性：

CSS 媒體查詢只處理響應式網頁設計的一個非常具體的方面，幾乎完全專注於佈局調整大小。因此，要做更多的事情，你必須依靠 JavaScript 來彌補差異。這引入了對代碼和工具的額外學習要求。

此外，它 [媒體查詢] 處理斷點的非確定方式意味著您必須花費更多時間 [和金錢] 在眾多虛擬和/或物理設備中測試您的網頁，以確保事情按照您最初的預期方式工作. 而且，當您對佈局進行任何重大更改時，您需要再次重新測試所有內容。

通過使用 CSS 媒體查詢的簡單而有目的的操作，您可以顯著增加構建現代網頁所需的步驟數量。

7. 性能惡化：

由於 CSS 媒體查詢的工作方式，您最終將需要比其他方式更多的 CSS 代碼來使您的網站響應/移動友好。根據 HTTPArchive.org 的數據，CSS 文件大小在過去五年中增加了 114%。 HTML 文件大小的增長在同一時期達到了大約 53% 的峰值。

這種特殊情況對您的網站有性能影響，因為在實施 CSS 媒體查詢 [在響應式網頁設計環境中] 後它肯定會比以往任何時候都慢，尤其是對於使用不太理想的移動寬帶網絡的移動設備。

而且，除了文件大小增加的問題之外，CSS 媒體查詢中沒有任何內部機制可以實際提高網頁的性能。為此，您將不得不利用高級 JavaScript 技術來啟用這些增強功能。

為什麼我們還在使用這個？

如果我問你有多少百分比的網站在使用 CSS 媒體查詢，你的答案是什麼？多年來，網頁設計師不得不承受所有壓力，你會認為我們現在可能已經克服了採用的困難，但你錯了。

在整個網絡中使用 CSS 媒體查詢的網站的百分比約為 0.2%。相比之下，使用 jQuery 的網站比例為 18%。這意味著您遇到由 jQuery 提供支持的網站的可能性是響應式網站的 90 倍[不包括那些碰巧兩者兼有的網站]。

為什麼基於某些人認為複雜且多餘的核心技術 [JavaScript] 的工具包會遠遠領先於看似不那麼複雜 [CSS] 並且旨在解決可以說更重要的問題 [移動友好性] 的工具包? 顯然，這裡有一些嚴重的錯誤阻礙了採用，需要解決。

CSS 媒體查詢發現它可以進入 Web 瀏覽器來處理特定的挑戰，但後來它被起草為將響應式 Web 設計的全部重量都扛在肩上。這有點像為三年級的錄音機獨奏會練習，只是被神奇地運送到皇家阿爾伯特音樂廳，以演奏亨德爾的彌賽亞的長號獨奏；不公平！

面對現代網頁設計的所有挑戰，我們仍然從事媒體查詢業務是非常令人驚訝的。除了一些新領域的新問題（如漸進式 Web 應用程序設計）之外，它還不足以處理一些重要的遺留問題。因此，我認為是時候想出一個替代方案了。但是，那究竟是什麼？

解決辦法是什麼？

這一切的解決方案非常簡單：JavaScript。現在，在你拿起那個乾草叉之前，給我一個解釋的機會。

JavaScript 是 HTML5 三位一體的唯一組件，其中可擴展性不是髒話。你不能用更多的 HTML 來擴展 HTML 標記，而且你肯定不能用 CSS 原生地擴展 CSS。但是，您可以使用 JavaScript 在本地擴展 JavaScript，甚至可以對 CSS 做同樣的事情。

W3C 的 Web 標準課程中廣泛討論了使用 JavaScript 操作 CSS。 document.stylesheets DOM 接口使我們能夠訪問應用於網頁的樣式表，包括使用 HTML 的<link>標記引用的所有外部樣式表。這不是一件容易的事，但它是可能的。

所以我應該擴展最初的答案：它不僅僅是 JavaScript，它是JavaScript 輔助的 CSS 。 JavaScript 是一個很棒的平台，其功能令人難以置信，但 CSS 是大多數網頁設計師工作的地方。如果我們能以某種方式在這兩者之間建立某種功能橋樑，讓網頁設計師可以編寫 CSS 規則集來利用 JavaScript 功能，那將在某種程度上改變網頁設計的遊戲規則。

給我看一些代碼

在過去兩年左右的時間裡，我一直在研究一種新的 JavaScript 輔助 CSS 工具包，稱為 rKit。整個想法是構建一個對設計師友好的工具，不僅可以取代 CSS 媒體查詢以進行響應式網頁設計，還可以解決網頁設計師/開發人員在構建現代網站和 Web 應用程序時面臨的一些已知 [和未知] 挑戰。

這個概念有很多，但這裡有一個快速的 CSS 代碼片段來解釋：

 #my-element[rk="if @viewport.width 在 320 和 480 之間"]{背景顏色：#0000ff;}

使用 rKit，CSS 規則看起來像修改後的屬性值選擇器。然後，您可以在 value 部分中定義表達式。此表達式的語法設計得簡單直觀。

注意： rk是一個常量屬性標識符。

上面的代碼在功能上等同於下面的 CSS 媒體查詢：

 @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    #my-element {背景顏色：#0000ff;}
}

但是，您可以使用 rKit 做更多事情。這是另一個簡單的例子：

 #my-element[rk="if @self.width 在 320 和 480 之間"]{background-color: #00ff00;}

通過簡單地將實體引用從@viewport為@self ，我們基本上設置了通常稱為元素查詢的內容。所以現在發生的情況是，當#my-element的寬度在 320 到 480 像素之間時，將應用給定的聲明 [ background-color: #00ff00 ]。

您還可以使用類而不是純聲明：

 #my-element[rk="if @self.width 介於 320 和 480 之間，則 addClass(c_mobile_320)"]{}
.c_mobile_320 {背景顏色：#00ff00;}

不過，這只是冰山一角。使用 rKit，你可以做一些非常棒的事情，比如事件管理、變異觀察、數量查詢、路由、數據綁定 [最多 7 路] 和許多其他很酷的東西，所有這些都使用純 CSS 代碼，而無需編寫一行 JavaScript。

rKit 在發佈時將是免費和開源的。而且，它還將運行一個特殊的性能包，您可以以保證零渲染阻塞的方式安裝它，因此網頁加載就像軌道上的火箭一樣。

把它放在一起花了很長時間，但它很快就會出現[肯定在 Godot 之前]，我真的很想看看網頁設計師 [和開發人員] 能夠用它做什麼。

結論

我希望你不會因為這篇文章而認為我在抨擊 CSS 媒體查詢。我不是。這就像在水果沙拉中抨擊番茄一樣。就像我之前說的，CSS 媒體查詢從來都不是為響應式網頁設計而設計的。它是出於權宜之計而被選中的，我們都犯了一個錯誤，試圖用它來解決所有問題。

可悲的是，作為一個網絡社區，我們從來沒有真正通過重大改進來糾正最初的錯誤，或者提出更好的替代方案。但唉，表演必須繼續，網站必須建立，進步必須佔上風。是時候做出改變了。

rKit 只是一種選擇和一種答案。這不是第一個，也絕對不會是最後一個。但是，至少這是朝著正確方向邁出的正確一步。有機會解決過去的一些問題，然後迭代解決現在和未來的問題。看看它如何與現狀相匹配會很有趣。

總而言之，犯錯本身並不是目的；這應該是一次學習經歷。運氣好的話，我們下次將學習如何使用正確的工具完成正確的工作。我的意思是，僅僅因為您可以在鋪好的道路上騎自行車並不意味著您應該將自行車帶到紐伯格林。帶上保時捷！