Bagaimana untuk Menyemak Kedua-dua Harta CSS dan Sokongan Nilai dalam Pelayar?

Mengesan Sokongan Penyemak Imbas untuk Sifat dan Nilai CSS

Masalah:

Menentukan sama ada sifat atau nilai CSS disokong oleh penyemak imbas tertentu adalah penting untuk memastikan keserasian merentas pelayar. Walau bagaimanapun, penyelesaian sedia ada selalunya tertumpu semata-mata pada sokongan hartanah. Bagaimanakah kita boleh menyemak sokongan harta dan nilai dalam CSS atau JavaScript?

Penyelesaian:

CSS.supports

Moden penyemak imbas menyokong API CSS.supports, yang membenarkan pengesahan harta dan nilai. Sintaksnya adalah seperti berikut:

<code class="css">CSS.supports(property, value);</code>

Contoh:

Kod JavaScript berikut menunjukkan penggunaan CSS.supports:

<code class="javascript">console.log(
  // CSS.supports(property, value)
  1, CSS.supports("text-decoration-style", "blink"),
  2, CSS.supports("display", "flex"),
  3, CSS.supports('--foo', 'red'),
  4, CSS.supports('(--foo: red)'),

  // CSS.supports(DOMstring)
  5, CSS.supports("( transform-origin: 5% 5% )"),
  6, CSS.supports("( transform-style: preserve ) or ( -moz-transform-style: preserve ) or "
  + "( -o-transform-style: preserve ) or ( -webkit-transform-style: preserve )")
);</code>

API CSS.supports mengembalikan benar jika sifat dan/atau nilai yang ditentukan disokong, dan palsu sebaliknya. Ini membolehkan ujian sokongan merentas penyemak imbas yang komprehensif.

Atas ialah kandungan terperinci Bagaimana untuk Menyemak Kedua-dua Harta CSS dan Sokongan Nilai dalam Pelayar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!