提案：使用 CSS 媒體查詢的腳本檢測
最近我一直在思考 CSS 媒體查詢。我是媒體查詢的忠實粉絲，因為我認為它們為特徵檢測帶來了理智感。這也是我研究 JavaScript 中的 CSS 媒體查詢的一個重要原因 1 並將繼續這樣做。我認為我們只是在了解網絡上的媒體查詢可以做什麼。作為我對假期的思考的一部分，我草草記下了一些我想使用媒體查詢的方式。我剛剛向 CSS 工作組提出了第一個。
提案
昨天，我發了一封郵件 2 向 CSS 工作組提出我的建議。基本思想是允許您使用媒體查詢來確定瀏覽器中是否啟用了腳本。該提案可以用幾個例子來概括：
@media screen and (script) {
/* styles to apply only when scripting is enabled */
}
@media screen and not (script) {
/* styles to apply only when scripting is disabled */
}
所以，就像你現在使用 device-width , orientation ，等等來檢測設備的功能，你也可以使用 script 以同樣的方式。
基本原理
在漸進增強領域，您不想顯示無法使用的頁面元素。這可能就像鏈接旁邊的箭頭一樣簡單，指示下拉菜單可用。如果 JavaScript 被禁用，您希望鏈接像常規鏈接一樣運行，並且不會因為沒有任何意義的箭頭而使人們感到困惑。因此，您希望僅在啟用 JavaScript 時應用顯示箭頭的樣式。
解決這個問題最常見的方法是在 <html> 中添加一個類 通過 JavaScript 元素。所以在頁面的某個地方，你輸入：
<script>
document.documentElement.className += " js-enabled";
</script>
這將添加類 js-enabled 通過 JavaScript。當然，這只有在啟用 JavaScript 時才會執行。然後您可以定義 CSS 規則，例如：
.arrow {
/* empty */
}
.js-enabled .arrow {
background: url(image.png) no-repeat;
}
這有點駭人聽聞，但這種基本技術已被 Twitter 和 Yahoo! 等大型網站使用。主頁，以及由 Modernizr 和 YUI 自動完成。
雖然這種技術有效，但它有兩個缺點。首先，您需要包含那個小的 JavaScript 片段（或支持庫）以確保最終添加該類。其次，它會改變規則的特殊性，從而對級聯產生不利影響。
澄清
我堅信應該對通用模式進行編碼和標準化，以便開發社區能夠繼續應對更有趣的挑戰 3 .因此，似乎社區已經說過我們希望在啟用 JavaScript 時定義不同的樣式，而 CSS 媒體查詢似乎是正確的方法。
CSS 媒體查詢規範 4 狀態：
術語媒體功能 是關鍵。當我第一次爭論腳本支持是否適合 CSS 媒體查詢時，我去閱讀了規範。腳本支持與顏色深度和方向一樣是一種媒體功能。這是加載頁面時該特定設備的功能。鑑於此，我很樂意提議包含 script 作為另一個要測試的媒體功能。
需要明確的是，我的建議的目標是輕鬆指示瀏覽器中是否啟用了腳本。將其視為 <noscript> 的親戚 元素。所以不要做這樣的事情：
<noscript>
<style>
.foo {
color: red;
}
</style>
</noscript>
你可以這樣做：
@media screen and not (script) {
.foo {
color: red;
}
}
當然，通過省略 not ，您也可以在啟用腳本時應用更改。
該提案的一些非目標是：
- 替換 JavaScript 功能檢測。 您仍將在 JavaScript 中檢查某些功能是否可用。簡而言之：我不打算為所有可能的 JavaScript API 實現媒體查詢功能。如果你願意，你應該使用 Modernizr。
- 在 CSS 中啟用 JavaScript。 我不希望以任何方式、形狀或形式在 CSS 中使用 JavaScript。
- 在檢測中以 JavaScript 為中心。 實際上，目的是表明 scripting 已啟用，而不僅僅是 JavaScript。擴展語法可能很容易，例如
(script:"text/javascript")，但目前我不確定這是否有必要。
而且我總是想提醒人們：如果實現了這個功能，沒有人會強迫你使用它。如果你不喜歡它，你可以把它留給喜歡它的人。
結論
我認為 CSS 媒體查詢是網絡上發生的最好的事情之一，我期待以新的和有趣的方式使用它們。為腳本添加功能檢測似乎是標準化相當普遍的做法的邏輯步驟。好消息是，CSS 媒體查詢 的編輯之一 Florian Rivoal 規範已同意 5 把它寫成一個包含在 CSS Level 4 Media Queries 中的提案 .希望提案能夠快速推進。
參考
- JavaScript 中的 CSS 媒體查詢，我的第 1 部分
- 提案：我用媒體查詢檢測 JavaScript
- 當網絡標準因我而失敗時
- CSS 3 級媒體查詢
- Re：提案：通過 Florian Rivoal 使用媒體查詢檢測 JavaScript
