【總結(jié)】2060- 檢測 CSS 中的 JavaScript 支持
共 2167字，需瀏覽 5分鐘
·
2024-05-28 10:20
最近，我驚喜地發(fā)現(xiàn)了一個CSS媒體特性——scripting，它能夠在所有現(xiàn)代瀏覽器中使用。這意味著，我們可以根據(jù)用戶瀏覽器是否支持JavaScript來提供不同的CSS規(guī)則，從而減少未樣式化內(nèi)容的閃爍或不受歡迎的布局偏移。
使用方法
使用這個特性，我們可以按以下方式漸進式增強樣式：
@media (scripting: enabled) {
.my-element {
/* 如果JS可用，增強樣式 */
}
}
或者，我們可以優(yōu)雅地回退到一些備選樣式：
@media (scripting: none) {
.my-element {
/* 如果JS不支持，使用備選樣式 */
}
}
還有一個initial-only值，適用于在頁面加載期間啟用腳本但在之后不啟用的情況。CSS媒體查詢第5級W3C工作草案[1]中提到了一些它可能有用的場景。
?例如，打印頁面，或者在服務器上渲染頁面并發(fā)送給用戶的預渲染網(wǎng)絡代理。
我個人不太能想象自己會經(jīng)常使用initial-only，盡管我很想找到更多實際應用中的具體例子。
特性出現(xiàn)之前
在這項特性出現(xiàn)之前，檢測JavaScript支持的一種方法是通過在html標簽上設置一個自定義選擇器——常見的做法是添加一個no-js類名。如果JavaScript得到支持并啟用，它會在渲染頁面內(nèi)容之前移除該選擇器。當JavaScript被禁用時，我們可以提供適應體驗的備選樣式。
<html class="no-js">
<!-- 頁面內(nèi)容 -->
</html>
.no-js .my-element {
/* 當JS被禁用時的樣式 */
}
組合查詢
下面是一個示例，注意到媒體查詢被結(jié)合起來檢查腳本和減少運動的條件。
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
/* JS可用且運動OK */
}
@media (scripting: none), (prefers-reduced-motion) {
/* JS已禁用或減少運動已啟用 */
}
每個條件當然可以有獨家樣式，如果預期的結(jié)果需要的話，但在規(guī)則集有重疊的地方，將它們結(jié)合起來也很好。
問題
更新于2024年4月21日 - 在發(fā)布這篇文章后，一些反饋浮現(xiàn)出來，解釋了這個媒體特性在哪些方面意外地失敗了。
-
當使用像NoScript或uBlock Origin這樣的瀏覽器擴展來禁用頁面腳本時，它的表現(xiàn)并不像預期的那樣。即使擴展將JavaScript關閉了， scripting: enabled仍然匹配。 -
如果腳本被阻止或無法加載，需要通過JavaScript來處理回退。在上面的演示中，回退需要接入演示的 scripting: none媒體查詢規(guī)則集。
小心那些陷阱
盡管scripting媒體特性非常有用，但上述問題提醒我們，在依賴它時需要謹慎。例如，如果一個腳本由于某種原因沒有加載，你可能需要一個備用計劃來確保內(nèi)容的可訪問性和頁面的可用性。
現(xiàn)實世界的應用
在現(xiàn)實世界的網(wǎng)頁設計中，這意味著我們需要為那些可能由于技術(shù)或個人偏好而禁用JavaScript的用戶考慮。通過使用scripting媒體查詢，我們可以確保所有用戶都能獲得清晰、優(yōu)雅的體驗，無論他們是否選擇使用JavaScript。
結(jié)語
總的來說，scripting媒體查詢是一個強大的工具，可以幫助我們?yōu)橹С諮avaScript和不支持JavaScript的環(huán)境提供適當?shù)臉邮?。它讓我們能夠更好地控制頁面加載時的樣式應用，減少布局偏移，并且提供更加平滑和可預測的用戶體驗。
本文譯自：https://ryanmulligan.dev/blog/detect-js-support-in-css/
CSS媒體查詢第5級W3C工作草案: https://www.w3.org/TR/mediaqueries-5/#scripting