@mendukung pemilih()

Saya tidak menyadari dukungan untuk @supports yang menentukan dukungan pemilih sangat bagus! Saya biasanya menganggap @supports sebagai cara untuk menguji properti: dukungan pasangan nilai. Tetapi dengan fungsi selector(), kita juga dapat menguji dukungan selector. Ini terlihat seperti ini:

@supports selector(:nth-child(1 of .foo)) {

}

Anda cukup menjatuhkan pemilih tepat di antara parens dan untuk itulah ia menguji.

Pemilih di atas sebenarnya adalah tes yang cukup bagus. Ini adalah “argumen daftar pemilih” yang berfungsi untuk penyeleksi teman :nth-child ‘n’. Saat saya menulis, itu hanya didukung di Safari.

Jadi katakanlah situasi ideal Anda adalah browser mendukung pemilih ini. Berikut adalah contoh. Anda tahu bahwa dengan

    dan

      satu-satunya elemen anak yang valid adalah

    • . Tetapi katakan juga daftar ini membutuhkan pemisah, jadi Anda (dan saya tidak mengatakan ini adalah ide yang bagus) melakukan hal semacam ini:

      <ul>
        <li >List item</li>
        <li >List item</li>
        <li ></li>
        /* ... */
      </ul>
      

      Kemudian Anda juga ingin membuat garis-garis pada daftar. Dan, jika Anda ingin garis zebra, Anda harus memilih setiap item .list lainnya, mengabaikan .separator. Jadi…

      li:nth-child(odd of .list-item) {
        background: lightgoldenrodyellow;
      }
      

      Tetapi hanya Safari yang mendukungnya… sehingga Anda dapat melakukan:

      @supports selector(:nth-child(1 of .foo)) {
        li:nth-child(odd of .list-item) {
          background: lightgoldenrodyellow;
        }
      }
      

      Jika Anda tidak peduli apa fallbacknya, Anda bahkan tidak perlu repot dengan @supports sama sekali. Tapi katakan Anda peduli dengan fallback. Mungkin dalam situasi yang didukung, garis zebra melakukan pengangkatan berat UX yang Anda bidik, jadi yang Anda butuhkan untuk pemisah hanyalah sedikit ruang. Tetapi untuk browser yang tidak mendukung, Anda memerlukan sesuatu yang lebih kuat karena Anda tidak memiliki garis zebra.

      Jadi sekarang Anda dapat menata kedua situasi:

      @supports selector(:nth-child(1 of .foo)) {
        li {
          padding: 0.25em;
        }
        li:nth-child(odd of .list-item) {
          background: lightgoldenrodyellow;
        }
        li.separator {
          list-style: none;
          margin: 0.25em 0;
        }
      }
      @supports not selector(:nth-child(1 of .foo)) {
        li.separator {
          height: 1px;
          list-style: none;
          border-top: 1px dashed purple;
          margin: 0.25em 0;
        }
      }
      

      Jika kita mendapatkan sintaks @when, maka kita dapat menulisnya sedikit lebih bersih:

      /* Maybe? */
      @when supports(selector(:nth-child(1 of .foo))) {
      
      } @else {
      
      }
      

      Bagaimanapun. Hasil akhirnya adalah…

      Didukung
      Tidak didukung

      Ada API JavaScript untuk menguji dukungan juga. Saya tidak yakin apakah ini benar-benar akan berhasil, tetapi tampaknya! Ini gagal di Chrome dan lolos di Safari saat saya menulis:

      CSS.supports("selector(:nth-child(1 of .foo))")
      

      Saat saya menyusun ini, saya berpikir… hmmmmmmm — pemilih CSS apa di luar sana yang memiliki dukungan lintas-browser yang aneh? Ini benar-benar tidak banyak. Dan bahkan dari mereka yang memiliki dukungan lintas-browser yang aneh, memikirkan jumlah kasus penggunaan di mana Anda benar-benar ingin membungkusnya dengan @supports (bukan membiarkannya gagal) cukup sedikit.

      Pseudo-element ::marker akan sangat bagus, tetapi sekarang sudah cukup didukung. Saya sedang memikirkan pemilih atribut case-insensitive, seperti [href$=”pdf” i], pasti bagus, tapi tidak, juga didukung dengan baik. Kesepakatan yang sama dengan yang dipisahkan koma :not(a, .b, [c]). Mungkin sesuatu seperti :fullscreen / :-webkit-full-screen akan menarik dan berguna karena secara unik tidak didukung di iOS Safari?

      Postingan @supports selector() muncul pertama kali di CSS-Tricks. Anda dapat mendukung Trik-CSS dengan menjadi Pendukung MVP.