特征檢測的最佳方法：focus-within 偽類

Question

我找不到任何使用 @supports 的語法與偽類一起使用，除了not非常特定於該偽類的語法。

檢測瀏覽器是否支持焦點內的最佳方法是什么，因為我不想編寫很多會在幾個版本中改變的瀏覽器黑客？ 我正在使用 Node 和 npm，但不想為它導入整個 package（通常不是處理事情的最佳方式）。

嘗試讀取瀏覽器版本字符串或使用當今的瀏覽器解析黑客不是一個好主意，因為當瀏覽器開始支持某個功能時將很難維護，因此我正在尋找除@supports 之外的功能檢測方法。 有沒有辦法在 javascript 中確定這一點？

Answer 1

由於它是一個偽 class 並且因此是選擇器的一部分，因此您需要在此處使用@supports selector (…)語法 - 但瀏覽器對此的具體支持還不是很好。 （到目前為止，基本上只有 Firefox。）

通過一些快速研究，我發現了https://github.com/Modernizr/Modernizr/issues/2270 - 這是關於在 Modernizr 庫中實施測試的討論的一部分。 用戶 patrickkettner 建議以下 JavaScript 解決方案：

實際上。 有一個更簡單的方法。

document.querySelector拋出無效的選擇器。 您可以在 try-catch 中調用document.querySelector(':focus-within') ，如果它不拋出它應該得到支持。 我們可能會找到一個給出錯誤結果的瀏覽器，在這種情況下，我們需要實際測試樣式。 然而，與此同時，由於它是一個現代功能，我們現在應該很好地進行嗅探測試

由於這個基本測試似乎仍然是 Modernizer 目前在這方面所做的一切（ https://github.com/Modernizr/Modernizr/blob/master/feature-detects/css/focuswithin.js ），我想這應該是安全的使用。