Bagaimana Anda Boleh Menentukan Sokongan Penyemak Imbas untuk Sifat dan Nilai CSS Tertentu?

Menggunakan Pertanyaan CSS untuk Menentukan Sokongan Penyemak Imbas

Keperluan untuk memastikan sokongan penyemak imbas untuk sifat atau nilai CSS tertentu adalah penting untuk memastikan keserasian halaman web merentas peranti dan penyemak imbas yang berbeza. Salah satu kaedah paling komprehensif untuk melakukan ini ialah melalui API CSS.supports, disokong oleh semua penyemak imbas utama kecuali Internet Explorer.

Menyemak Sifat CSS melalui CSS.supports()

Untuk mengesahkan sama ada sesuatu sifat CSS disokong oleh penyemak imbas, anda boleh menggunakan kaedah CSS.supports():

<code class="javascript">console.log(CSS.supports('display', 'flex')); // true (if flexbox is supported)</code>

Utiliti ini menilai sama ada sifat yang dinyatakan itu diiktiraf oleh penyemak imbas. Jika disokong, ia kembali benar; jika tidak, ia mengembalikan palsu.

Menyemak Nilai CSS melalui CSS.supports()

API CSS.supports() juga membenarkan anda menyemak sokongan tertentu Nilai CSS untuk harta tertentu:

<code class="javascript">console.log(CSS.supports('text-decoration-style', 'blink')); // false (if 'blink' is not supported)</code>

Penyemak imbas akan membandingkan nilai yang disediakan dengan nilai yang mungkin bagi harta itu dan melaporkan benar jika ia disokong, atau palsu jika ia tidak dikenali.

Kaedah Alternatif untuk Semakan Nilai

Untuk situasi di mana CSS.supports() tidak disokong atau apabila anda perlu menetapkan nilai secara dinamik dalam JavaScript, anda boleh memilih kaedah alternatif:

Tetapkan dan Semak:

• Tetapkan sifat CSS yang diingini kepada nilai tertentu (cth., div.style.fontSize = '2rem')
• Sahkan jika penyemak imbas telah mengekalkan nilai yang ditetapkan dengan membacanya kembali (cth., div.style.fontSize)
• Jika nilai yang dikembalikan sepadan dengan nilai yang anda berikan, ia menandakan sokongan penyemak imbas

Pernyataan Bersyarat JavaScript:

<code class="javascript">if (typeof document.body.style.transition === 'string') {
  // transition is supported
}</code>

Nota: Kaedah ini mungkin memperkenalkan pengubahsuaian gaya yang tidak perlu pada halaman.

Atas ialah kandungan terperinci Bagaimana Anda Boleh Menentukan Sokongan Penyemak Imbas untuk Sifat dan Nilai CSS Tertentu?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!