Resipi untuk mengesan sokongan untuk CSS at-rules

aturan

, pada mulanya terhad kepada pemeriksaan pasangan/nilai pasangan, kini menyokong pemeriksaan pemilih melalui @supports dan format format/cek teknologi menggunakan selector() dan font-format(). Walau bagaimanapun, secara langsung menguji sokongan AT-peraturan yang lain tetap menjadi cabaran. Fungsi pembungkus font-tech() yang dirancang, sambil menjanjikan, tidak mempunyai pelaksanaan pelayar yang meluas. at-rule()

Artikel ini meneroka penyelesaian untuk mengesan sokongan aturan, membina pendekatan harta "Telltale" Bramus. Kaedah ini memanfaatkan kehadiran sifat berkaitan yang dihantar bersama-sama dengan peraturan AT untuk membuat sokongan. Sekiranya harta yang berkaitan, yang boleh diuji disokong, aturan yang tidak dapat dijelaskan mungkin disokong juga.

Beberapa peraturan di diperiksa, dikategorikan oleh tahap sokongan penyemak imbas mereka:

Sokongan asas (pengesanan yang boleh dipercayai):

• Pertanyaan saiz: @container Mudah diuji menggunakan sifat seperti , container-type, atau container-name. Jika mana -mana daripada ini disokong, container mungkin disokong. @container

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

• : @font-feature-values Hartanah berfungsi sebagai penunjuk telltale. font-variant-alternates

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

• : @font-palette-values Hartanah menyediakan ujian yang boleh dipercayai. font-palette

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

Sokongan separa (workarounds diperlukan):

• Pertanyaan gaya: @container Kurangnya harta benda tertentu, pendekatan peningkatan progresif digunakan. Gaya asas ditakrifkan, kemudian ditindih dalam blok untuk penyemak imbas yang menyokong. @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 Sokongan untuk nilai dalam <custom-ident></custom-ident> menunjukkan list-style-type sokongan. @counter-style

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

• : @position-try sifat seperti atau anchor-name boleh digunakan untuk pengesanan. position-try

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

• : @scope Sama seperti pertanyaan gaya, strategi peningkatan progresif digunakan dengan gaya asas yang diatasi dalam blok . @scope

.foo .element {
  /* Base style */
}

@scope (.foo) to (.bar) {
  :scope .element {
    /* @scope is supported, override base style */
  }
}

• : harta @view-transition atau fungsi dengan view-transition-name boleh digunakan. selector() ::view-transition-group

@supports (view-transition-name: custom-ident) {
  /* @view-transition is supported! */
}

cabaran yang tidak diselesaikan:

Artikel mengenal pasti @layer, @property, dan @starting-style sebagai at-rules yang mana kaedah pengesanan yang boleh dipercayai tetap sukar difahami, walaupun sokongan penyemak imbas yang munasabah. Siasatan lanjut digalakkan. Penulis mencadangkan pendekatan peningkatan progresif mungkin berfungsi untuk @layer.

Panduan Komprehensif ini menyediakan resipi praktikal untuk mengesan sokongan AT-peraturan dalam CSS, menawarkan penyelesaian untuk pelbagai tahap keserasian penyemak imbas. Pendekatan harta "Telltale" membuktikan berharga, tetapi beberapa peraturan masih memerlukan strategi ujian inovatif.

Atas ialah kandungan terperinci Resipi untuk mengesan sokongan untuk CSS at-rules. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!