用於檢測CSS ATRULES支持的食譜

@supports AT-RULE，最初僅限於屬性/價值對檢查，現在使用selector()>和字體格式/技術檢查使用font-format()>和font-tech()來支持選擇器檢查。 但是，直接測試其他設備支撐仍然是一個挑戰。 計劃中的包裝器功能雖然有前途，但缺乏廣泛的瀏覽器實現。 at-rule()

>本文探討了以Bramus的“ Telltale”財產方法為基礎的檢測設備支撐的解決方法。 該方法利用與特定的在規則一起運送的相關特性來推斷支持。 如果支持相關的可測試屬性，則可能也支持無法測試的設有規則。

>檢查了幾個在瀏覽器的瀏覽器支持級別：>

基線支持（可靠檢測）：

>

> size查詢：
• 使用，@container或之類的屬性輕鬆測試。 如果支持這些中的任何一個，則很可能會支持。 container-type> container-name container @container 態

@supports (container-type: size) {
  /* Size queries are supported! */
}

態

• @font-feature-values部分支持（需要解決方案）：> font-variant-alternates

@supports (font-variant-alternates: swash(custom-ident)) {
  /* @font-feature-values is supported! */
}

樣式查詢：

缺乏特定的Telltale屬性，使用了漸進的增強方法。定義了基本樣式，然後在支持瀏覽器的A
• 塊中覆蓋。 @font-palette-values font-palette

：

@supports (font-palette: normal) {
  /* @font-palette-values is supported! */
}

>

>> 的支持。

• @container ：@container>

>>>>可以用於檢測。

.container {
  --supports-style-queries: true;
}

.container .child {
  /* Base styles */
}

@container style(--supports-style-queries: true) {
  /* Container queries are supported! */
  .child {
    /* Override base styles */
  }
}

>

• @counter-style<custom-ident></custom-ident>：list-style-type>類似於樣式查詢，採用了漸進式增強策略，其基礎樣式在@counter-style> block中被覆蓋。 。

@supports (list-style: custom-ident) {
  /* @counter-style is supported! */
}

• ：@position-try>可以使用> anchor-name position-try

可以使用。

@supports (position-try: flip-block) {
  /* @position-try is supported! */
}

>

• @scope>未解決的挑戰：

  @layer文章將@property，@starting-style和識別為儘管合理的瀏覽器支持，但可靠的檢測方法仍然難以捉摸。 鼓勵進一步調查。 作者建議一種漸進式增強方法可能適用於@layer>。

  >本綜合指南提供了用於檢測CSS的設備支撐的實用食譜，為各種瀏覽器兼容性提供了解決方案。 “ Telltale”財產方法被證明是有價值的，但某些在插曲仍然需要創新的測試策略。

以上是用於檢測CSS ATRULES支持的食譜的詳細內容。更多資訊請關注PHP中文網其他相關文章！