@supports selector（）

@supports規則檢查選擇器支持的能力令人驚訝地強大！雖然經常用於測試property: value對兼容性，但selector()函數擴展了評估選擇器支持的功能。這是通過簡單地將選擇器放置在括號中來完成的：

 @supports選擇器（：nth-​​child（.foo）1）{
  / *如果支持選擇器，則應用樣式 */
}

:nth-child(n of .foo)選擇器，“選擇器列表參數”與:nth-child家族選擇器兼容，是一個很好的例子。當前，只有Safari支持此特定選擇器。

考慮一個場景，您需要在其中設置帶有分離器和斑馬條紋的列表。理想情況下，您將使用這樣的選擇來實現斑馬條紋，同時忽略分離器：

 li：nth-​​child（.list-item的奇數）{
  背景：Lightgoldenrodolow；
}

但是，由於瀏覽器的支持有限，您可以使用@supports來有條件地應用這種樣式：

 @supports選擇器（：nth-​​child（.foo）1）{
  li {
    填充：0.25EM；
  }
  li：nth-​​child（.list-item的奇數）{
    背景：Lightgoldenrodolow；
  }
  li.Separator {
    列表風格：無；
    保證金：0.25EM 0;
  }
}
@supports不是selector（：nth-​​child（.foo））{
  li.Separator {
    身高：1px;
    列表風格：無；
    邊界：1px虛擬紫色；
    保證金：0.25EM 0;
  }
}

這為缺乏支持高級選擇器的瀏覽器提供了後備樣式。改進的語法可能會使用@when @else時，可以簡化這一點：

 / *假設的未來語法 */
@when supports（selector（：nth-​​child（.foo）1））{
  / *用於支撐瀏覽器的樣式 */
} @別的 {
  / *後備樣式 */
}

還存在用於測試選擇器支持的JavaScript API：

 css.supports（“選擇器（：nth-​​child（.foo）1）”）

此方法在Safari中true ，在Chrome中（在撰寫false時）。

儘管@supports規則具有強大的功能，但具有不一致的跨瀏覽器支持的CSS選擇器的數量，並且需要@Supports的用例@supports的數量相對較小。現在，許多以前有問題的選擇器，例如::marker和對案例不敏感的屬性選擇器，現在都可以享有廣泛的支持。選擇器如:fullscreen或:-webkit-full-screen可能會提供有趣且有用的應用程序，因為它們在iOS Safari中缺乏支持。

以上是@supports selector（）的詳細內容。更多資訊請關注PHP中文網其他相關文章！