首頁 > web前端 > css教學 > @supports selector()

@supports selector()

Lisa Kudrow
發布: 2025-03-18 12:06:10
原創
415 人瀏覽過

@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()

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

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板