@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中文網其他相關文章!