Cepat menguji CSS sandaran balik

Trik ujian CSS berguna!

Keserasian penyemak imbas tidak selalu dijamin. Katakan anda memerlukan sandaran untuk penyemak imbas yang tidak mempunyai sokongan grid CSS (kurang biasa sekarang, tetapi berguna untuk ilustrasi).

Anda boleh menggunakan blok @supports :

 @Supports (paparan: grid) {
  .blocks {
    paparan: grid;
    Grid-template-lajur: Ulang (auto-fill, Minmax (min (100px, 100%), 1FR));
    Gap: 1rem;
  }
}

Untuk dengan cepat menguji sandaran, buat sementara modifikasi @supports (display: grid) ke sesuatu yang tidak sah, seperti @supports (display: gridx) . Ini menyediakan suis ON/OFF mudah untuk ujian.

Contoh di atas tidak mempunyai kejahatan yang mantap. Pendekatan yang lebih baik mungkin melibatkan Flexbox (untuk penyemak imbas yang menyokong Flexbox tetapi tidak grid). Sebagai alternatif, sandaran berasaskan lajur yang lebih mudah dapat memastikan persembahan yang munasabah.

Jika anda yakin penyemak imbas menyokong @supports pertanyaan (sedikit ironis, saya tahu!), Anda boleh menggunakan ini:

 @Supports (paparan: grid) {
  / * gaya grid */
}

@Supports tidak (paparan: grid) {
  / * jarak sandaran asas */
  .block {margin: 10px}
}

Anggapan ini menjadi semakin sah kerana pelayar yang lebih tua dihentikan (terutamanya jika anda telah menurunkan sokongan IE).

Ini menonjolkan keinginan sintaks @when sintaks:

 @When menyokong (paparan: grid) {
  / * gaya grid */
} @else {
  / * Gaya Fallback */
}

Sintaks bersih ini akan meningkatkan kebolehbacaan dan kebolehkerjaan.

Atas ialah kandungan terperinci Cepat menguji CSS sandaran balik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!