CSS Nesting 的相容性

教育部的「國字標準字體筆順學習網」在2025年1月發布了第五版，網站說明中的版次有註記了「與行動版網結合，改為響應式網頁設計」。不過，我的舊電腦跟舊 iPad 都因為瀏覽器太舊被嫌棄了！

▋不支援舊瀏覽器

我桌機的 Chrome 因為是在 Windows 7 上，最後只能更新到版本 109.0.5414.120，而 iPad Air 2 的 iOS 版次為 15.8,3 ，它們看到的筆順學習網長這樣：

[圖1] 在舊瀏覽器中的筆順網第五版

右側工具欄的圖示走位，筆順的區塊現出原形(播放跟練習的區塊本應疊在一起)，而且如果螢幕解析度較小，筆順練習的區塊(白色的吉)就會擠到下方去，最下方的功能鈕也變得很陽春。

網頁版面亂掉，多半是網站的樣式表，瀏覽器不支援，有方法讓新舊版本都能正常使用嗎？

▋CSS Nesting 適用的版本

看了一下筆順網的樣式表，出錯的地方看起來都是因為裡面使用了巢狀的語法，而我的電腦和載具都不支援。

到底 Chrome 和 Safari 什麼時候開始支援巢狀 CSS 的？

在 Chrome 的文件中找到了這一篇：

• https://developer.chrome.com/docs/css-ui/css-nesting

裡面的這一句有答案：

Nesting is available from Chrome 112 and also available to try in Safari Technical Preview 162.

哈！我的 Chrome 109 < 112，所以版面就 NG 了！

▋修正測試

要有實驗精神，將筆順網有問題的 CSS 語法改為傳統的語法試試看吧！

• 筆順網 CSS 舊語法測試檔

[圖2] 加入測試的 CSS

▋測試結果

底下的 [圖3] 是加過測試語法後的畫面

[圖3] 加過測試語法後的畫面

看來是找到問題了，不過大概也只能玩一玩而已，改變不了不支援舊瀏覽器的現實。是否支援舊版本有時是需要決擇，畢竟用新的語法，開發起來會較有效率；如果是我，還是會選擇自己費事但較符合「平權」的方式，畢竟不是每個人都使用最新的系統或是載具。

▋相關連結

• 雄:國字標準字體筆順學習網改版的影響