Tips untuk mendeteksi CSS Pada dukungan aturan – Beragampengetahuan

ini @supports Aturan ini telah diperluas beberapa kali sejak pertama kali dirilis. Jika dulu hanya mungkin untuk memeriksa dukungan untuk pasangan atribut/nilai, kini Anda dapat memeriksa penyeleksi menggunakan selector() Fungsi pembungkus dan berbagai format font serta teknik yang digunakan font-format() Dan font-tech()masing-masing. Namun, satu fitur yang masih diinginkan komunitas adalah menguji dukungan aturan tambahan.

@supports at-rule(@new-rule) {
  /* @new-rule is supported */
}

CSSWG memutuskan untuk menambahkan yang sebelumnya at-rule() fungsi pembungkus. Meskipun ini merupakan kabar baik, dua tahun kemudian kami tidak mendapatkan banyak pembaruan mengenai kapan fitur tersebut akan ditambahkan ke browser. Jadi, bagaimana cara kami memeriksa dukungan pada saat yang bersamaan?

Kebetulan yang menarik: baru kemarin tim Chrome mengubah status dari “Baru” menjadi “Ditugaskan” seolah-olah mereka Tahu saya sedang berpikir.

Saat mencari jawaban, saya menemukan artikel Bramus yang memberikan solusi: Meskipun kita tidak bisa @supports at-rule, kita dapat menguji properti yang disediakan dengan at-rule tertentu sebagai penggantinya, idenya adalah jika fitur yang relevan dirilis, kita mampu diuji dan didukung, maka fitur yang tidak dapat kami uji mungkin juga didukung… dan sebaliknya. Bramus memberikan contoh untuk diperiksa animation-timeline properti untuk memeriksa apakah @scroll-timeline at-rule (dihentikan) didukung karena keduanya dikirimkan bersamaan.

@supports (animation-timeline: works) {
  /* @scroll-timeline is supported*/
}

/* Note: @scroll-timeline doesn't exist anymore */

Bramus menyebut properti ini properti “bocor”, yang merupakan cara menarik untuk memikirkannya karena mirip dengan teka-teki deduktif di mana kita harus menemukan properti yang relevan untuk memeriksa apakah aturan atnya didukung.

Saya ingin melihat berapa banyak teka-teki yang bisa saya pecahkan, dan dalam prosesnya mempelajari aturan mana yang dapat kami uji dengan andal hari ini. Jadi, saya telah mengidentifikasi daftar lengkapnya Dapat didukung pada aturan yang dapat saya temukan.

Saya mengecualikan aturan yang tidak menyediakan dukungan browser, mis. @color-profile, @whenDan @elseserta tidak digunakan lagi pada aturan seperti @document. Demikian pula, saya mengecualikan aturan lama yang telah menikmati dukungan browser luas selama bertahun-tahun – misalnya. @page, @import, @media, @font-face, @namespace Dan @keyframes – Karena ini lebih jelas.

@container Kueri ukuran (dukungan dasar)

Menguji dukungan untuk kueri besar dan kecil cukup mudah, karena modul ini memperkenalkan beberapa properti yang jelas khususnya container-type, container-name Dan container. Pilih favorit Anda, karena semuanya harus diberi peringkat yang sama. Jika atribut ini didukung, maka @container Hal ini juga harus didukung karena diluncurkan pada waktu yang bersamaan.

@supports (container-type: size) {
  /* Size queries are supported! */
}

Anda dapat menggabungkannya dengan membuat sarang @supports Kueri di dalam a @container sebaliknya.

@supports (container-type: size) {
  @container (width > 800px) {
    /* Styles */
  }
}

@container Kueri gaya (didukung sebagian)

Kueri ukuran memberi kita banyak properti jelas yang dapat kita gunakan, namun hal yang sama tidak berlaku untuk kueri gaya. Karena setiap elemen memiliki gaya yang disertakan secara default, tidak ada properti atau nilai khusus untuk elemen tersebut. Kita bisa mengatasi masalah ini dengan melupakan @supports Dan tulis gayanya ke dalam kueri gaya. Kueri gaya berfungsi di browser yang didukung tetapi sebaliknya diabaikan, sehingga memungkinkan kami menulis beberapa gaya dasar untuk browser lama yang akan ditimpa oleh browser modern.

.container {
  --supports-style-queries: true;
}

.container .child {
  /* Base styles */
}

@container style(--supports-style-queries: true) {
  /* Container queries are supported! */
  .child {
    /* We can override the base styles here */
  }
}

@counter-style (didukung sebagian)

ini @counter-style at-rule memungkinkan kita membuat penghitung khusus untuk daftar. Gaya didefinisikan dalam a @counter-style Memiliki nama khusus.

@counter-style triangle {
  system: cyclic;
  symbols: ‣;
  suffix: " ";
}

ul {
  list-style: triangle;
}

Kita tidak mempunyai cara jitu untuk membantu kita memecahkan teka-teki ini, namun ada cara yang jitu nilai. ini list-style-type Properti dulu menerima beberapa nilai kata kunci yang telah ditentukan sebelumnya, tetapi sekarang mendukung nilai lain karena @counter-style diperkenalkan. Artinya kita harus bisa memeriksa apakah browser mendukung <custom-ident> nilai list-style-type.

@supports (list-style: custom-ident) {
  /* @counter-style is supported! */
}

@font-feature-values (dukungan dasar)

Beberapa font berisi mesin terbang alternatif dalam file font yang dapat digunakan @font-feature-values di aturan. Mesin terbang khusus ini dapat ditampilkan menggunakan font-variant-alternatesl, ini adalah properti jelas yang kami gunakan untuk memeriksa dukungan untuk ini:

@supports (font-variant-alternates: swash(custom-ident)) {
  /* @font-feature-values is supported! */
}

@font-palette-values (dukungan dasar)

Konsep yang sama dapat diterapkan @font-palette-values at-rule, yang memungkinkan kita memodifikasi font multi-warna menggunakan font-palette Kita bisa menggunakan ini sebagai properti kebocorannya.

@supports (font-palette: normal) {
  /* @font-palette-values is supported! */
}

@position-try (didukung sebagian)

ini @position-try at-rule digunakan untuk membuat posisi fallback jangkar khusus dalam posisi jangkar. Mungkin aturan dalam daftar ini memerlukan lebih banyak dukungan karena ini adalah fitur baru. Untungnya, kita dapat menemukan banyak properti yang jelas dalam modul yang sama. Namun berhati-hatilah, karena beberapa properti telah diganti namanya sejak pertama kali diperkenalkan. Saya merekomendasikan pengujian dukungan @position-try menggunakan anchor-name atau position-try sebagai atribut yang jelas.

@supports (position-try: flip-block) {
  /* @position-try is supported! */
}

@scope (didukung sebagian)

ini @scope Aturan tersebut tampaknya sulit untuk diuji pada awalnya, namun ternyata strategi yang sama dapat diterapkan dengan kueri gaya. Buat gaya dasar untuk browser yang tidak didukung @scope Kemudian timpa gaya-gaya itu di dalamnya @scope Blokir hanya valid di browser yang didukung. Ini adalah strategi penguatan progresif jika memang ada!

.foo .element {
  /* Base style */
}

@scope (.foo) to (.bar) {
  :scope .element {
    /* @scope is supported, override base style */
  }
}

@view-transition (didukung sebagian)

Aturan terakhir dalam daftar ini adalah @view-transition. Ini adalah fitur lain yang dengan cepat diterapkan pada implementasi browser, namun masih belum dianggap sebagai dukungan dasar.

Cara paling sederhana adalah dengan menggunakan yang terkait view-transition-name Properti sejak dirilis bersama:

@supports (view-transition-name: custom-ident) {
  /* @view-transition is supported! */
}

Tapi kita juga bisa menggunakan selector() berfungsi untuk memeriksa dukungan untuk salah satu dari banyak elemen semunya:

@supports selector(::view-transition-group(transition-name)) {
  /* @view-transition is supported! */
}

sedikit sumber daya

Saya memasukkan daftar ini ke dalam demo menggunakan @supports Rancang aturan yang berbeda berdasarkan resep pengujian yang kami perkenalkan:

yang belum terselesaikan

Meskipun saya merasa telah membuat daftar yang solid, saya tidak tahu cara menguji ketiga aturan tersebut: @layer, @propertyDan @starting-style.

Untungnya, browser modern menawarkan dukungan yang cukup baik untuk masing-masing browser. Tapi itu tidak berarti kita tidak seharusnya Dukungan tes. Firasatku adalah kita bisa mengirim pesan teks @layer Metode dukungan mirip dengan dukungan pengujian style() Pertanyaan @container Kami menetapkan gaya dasar dan menggunakan peningkatan progresif jika didukung.

Bagaimana dengan dua lainnya? Saya tidak tahu. Tapi tolong beri tahu saya cara Anda memeriksa dukungan @property Dan @starting-style – Atau cara Anda memeriksa dukungan untuk fitur lain berbeda dengan yang saya miliki di sini. Ini adalah teka-teki yang rumit!

Metode untuk mendeteksi dukungan CSS At-Rules awalnya diterbitkan di beragampengetahuan, bagian dari keluarga DigitalOcean. Anda harus menerima buletin.