Polyfill pertanyaan kontena baru yang hanya berfungsi

Polyfill pertanyaan kontena yang berubah-ubah telah tiba, menawarkan keserasian lancar di seluruh pelayar. Polyfill ini, yang dibangunkan oleh Chrome, memastikan pelaksanaan yang mudah: memuatkannya untuk pelayar yang tidak mempunyai sokongan asli, tulis CSS anda menggunakan sintaks pertanyaan kontena standard, dan nikmati fungsi sempurna.

Polyfill mesra pengguna ini memudahkan pembangunan dengan ketara, berbeza dengan penyelesaian terdahulu seperti CQFILL yang memerlukan pemprosesan CSS dan PostCSS tambahan.

Inilah cara memuatkan polyfill untuk integrasi ringan:

 // ujian sokongan
const supportScontainerqueries = "container" dalam document.documenteLement.style;

// Import bersyarat
jika (! supportsContainerqueries) {
  import ("https://cdn.skypack.dev/container-query-polyfill");
}

NPM adalah satu lagi pilihan, tetapi kaedah ini menyimpan perkara yang diselaraskan.

Menggunakan pertanyaan kontena memerlukan elemen pembalut di sekitar kandungan gaya. Anda tidak boleh secara langsung menanyakan elemen yang anda gaya. Sebagai contoh, pertimbangkan widget cuaca:

<div class="weather-wrap">
  <dl>
    <div>
      <dt>Ahad</dt>
      <dd>
<b>26 °</b> 7 °</dd>
    </div>
    <div>
      <dt>Isnin</dt>
      <dd>
<b>34 °</b> 11 °</dd>
    </div>
  </dl>
</div>

Pembungkus ditakrifkan sebagai bekas:

 .weather-wrap {
  Container: saiz inline / cuaca-pembalut;
  / * atau: */
  /* jenis kontena: bersaiz inline; */
  /* Nama kontena: Weather-Wrapper; */

  / * Pilihan: saiz semula pemegang untuk ujian */
  /* saiz semula: kedua -duanya; */
  /* limpahan: tersembunyi; */
}

Gaya Global dan Container-Scoped kemudiannya digunakan:

 .weather {
  Paparan: Flex;
}
@Container Weather-Wrapper Saiz (max-width: 700px) {
  .weather {
    flex-arah: lajur;
  }
}

Demo yang lebih komprehensif yang mempamerkan polyfill dengan widget cuaca tersedia (pautan ke demo yang ditinggalkan kerana ia tidak disediakan dalam input). Blog Bramus juga mempunyai contoh kad yang berguna.

Sokongan dan pertimbangan penyemak imbas:

Polyfill menyokong Chrome/Edge 88, Firefox 78, dan Safari 14 kerana pergantungannya pada ResizeObserver , MutationObserver , dan :is() . Walaupun dokumentasi polyfill memperincikan batasan kecil, kes penggunaan teras dilindungi sepenuhnya.

Dengan status draf spec rasmi dan sokongan bendera belakang di Chrome, sokongan penyemak imbas yang meluas dijangka. Walau bagaimanapun, garis masa yang tepat masih tidak menentu.

Saiz kecil Polyfill (kira -kira 2.8kb) menjadikannya overhead prestasi yang tidak dapat dielakkan, yang berpotensi memandu peningkatan penggunaan pertanyaan kontena.

Flash of Unstyled Content (Fouc):

Sifat asynchronous polyfill memperkenalkan potensi fouc. Walaupun mengurangkan ini memerlukan penangguhan rendering (umumnya tidak diingini), Fouc ringkas lebih baik untuk kelewatan kandungan. Isu ini akan menyelesaikannya apabila sokongan penyemak imbas asli menjadi di mana -mana.

Merangkul kuasa pertanyaan kontena hari ini dengan polyfill yang mantap ini! Kongsi demo dan pengalaman anda sendiri.

Atas ialah kandungan terperinci Polyfill pertanyaan kontena baru yang hanya berfungsi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!