itu @supports Aturan ini telah diperpanjang beberapa kali sejak pertama kali dirilis. Dulu dia hanya dapat memeriksa dukungan untuk pasangan properti/nilai, sekarang dia dapat memeriksa keberadaan pemilih menggunakan metode ini selector() Fungsionalitas assembler, berbagai format font dan teknik yang digunakan font-format() Dan font-tech()masing-masing. Namun, salah satu fitur yang masih dibutuhkan komunitas adalah menguji dukungan terhadap aturan lain.
@supports at-rule(@new-rule) {
/* @new-rule is supported */
}Pada tahun 2022, CSSWG memutuskan untuk menambahkan hal di atas at-rule() Fungsi perakit. Meskipun ini merupakan kabar baik dan baik, kami sudah berada di sini dua tahun kemudian dan kami belum mendapatkan banyak pembaruan mengenai kapan fitur ini akan ditambahkan ke browser. Jadi, bagaimana kami dapat memeriksa dukungan untuk sementara waktu?
Kebetulan yang lucu: baru kemarin tim Chrome mengubah status dari “Baru” menjadi “Ditugaskan” seolah-olah mereka <>kebiasaan Saya sedang memikirkan hal itu.
Saat mencari jawaban, saya menemukan posting ini oleh Bramus yang menawarkan solusi: Meskipun kami tidak dapat memeriksa aturan CSS di @supports Secara aturan, kami dapat menguji fitur yang dikirimkan dengan aturan tertentu sebagai alternatif, dengan keyakinan bahwa jika fitur terkait dirilis maka kami akan melakukannya. <>Dia bisa diuji dan didukung, fitur yang tidak dapat kami uji kemungkinan besar akan didukung juga… dan sebaliknya. Bramus memberikan contoh yang memverifikasi dukungan animation-timeline Properti untuk memeriksa apakah @scroll-timeline Basis (yang dihentikan) didukung karena keduanya dikirimkan bersama.
@supports (animation-timeline: works) {
/* @scroll-timeline is supported*/
}
/* Note: @scroll-timeline doesn't exist anymore */Bramus menyebut properti ini sebagai “prekursor”, yang merupakan cara menarik untuk memikirkan hal ini karena ini seperti teka-teki deduksi, yang mengharuskan kita menemukan properti yang relevan untuk memeriksa apakah aturannya didukung.
Saya ingin melihat berapa banyak teka-teki yang dapat saya pecahkan, dan dalam prosesnya, mencari tahu aturan mana yang dapat kami uji dengan andal saat ini. Jadi, saya telah memilih daftar lengkapnya <>Dapat didukung Dalam aturan yang dapat saya temukan.
Saya telah mengecualikan aturan yang tidak memberikan dukungan browser apa pun, mis @color-profile, @whenDan @else,Selain aturan yang tidak berlaku lagi, 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 itu lebih jelas.
@container Kueri volume (dukungan dasar)
Menguji dukungan untuk kueri volume cukup mudah karena unit ini menawarkan beberapa properti berbeda, khususnya container-type, container-name Dan container. Pilih favorit Anda karena semuanya harus memberi peringkat yang sama. Jika fitur ini didukung, maka @container Mereka juga harus didukung, karena mereka diperkenalkan pada waktu yang bersamaan.
@supports (container-type: size) {
/* Size queries are supported! */
}Anda dapat menggabungkannya dengan tumpang tindih @supports Kueri dalam a @container sebaliknya.
@supports (container-type: size) {
@container (width > 800px) {
/* Styles */
}
}@container Kueri pola (dukungan parsial)
Kueri ukuran memberi kita banyak keistimewaan untuk dikerjakan, namun hal yang sama tidak berlaku untuk kueri pola. Karena setiap elemen memiliki gaya secara default, tidak ada properti atau nilainya sendiri. Kita bisa mengatasinya dengan melupakan @supports Dan tulis pola di dalam kueri pola sebagai gantinya. Kueri pola berfungsi dalam dukungan browser tetapi sebaliknya diabaikan, sehingga kita dapat menulis beberapa pola 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 (dukungan parsial)
itu @counter-style at-rule memungkinkan kita membuat penghitung khusus untuk daftar. Pola didefinisikan dalam a @counter-style Dengan nama khusus.
@counter-style triangle {
system: cyclic;
symbols: ‣;
suffix: " ";
}
ul {
list-style: triangle;
}Kami tidak memiliki fitur yang dapat membantu kami memecahkan teka-teki ini, melainkan jam alarm <>nilai. itu list-style-type Properti dulunya menerima beberapa nilai kata kunci yang telah ditentukan sebelumnya, namun kini mendukung nilai tambahan sejak saat itu @counter-style Itu telah diserahkan. Artinya kita harus bisa memeriksa apakah browser mendukungnya <custom-ident> Nilai untuk list-style-type.
@supports (list-style: custom-ident) {
/* @counter-style is supported! */
}@font-feature-values (dukungan dasar)
Beberapa font menyertakan mesin terbang alternatif dalam file font yang dapat dikustomisasi menggunakan @font-feature-values Di pangkalan. Mesin terbang khusus ini dapat ditampilkan menggunakan font-variant-alternatesl, ini adalah atribut untuk memeriksa dukungan di properti 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 Properti yang bisa kita gunakan sebagai properti penunjuk.
@supports (font-palette: normal) {
/* @font-palette-values is supported! */
}@position-try (dukungan parsial)
itu @position-try Basis digunakan untuk membuat posisi cadangan khusus untuk jangkar di posisi jangkar. Ini mungkin satu-satunya aturan dalam daftar ini yang memerlukan lebih banyak dukungan karena ini adalah fitur baru. Untungnya, ada banyak fitur berbeda di unit yang sama yang bisa kita akses. Namun hati-hati, karena beberapa fitur telah diganti namanya sejak pertama kali dirilis. Saya merekomendasikan pengujian dukungan untuk @position-try Menggunakan anchor-name atau position-try Sebagai sifat merangsang.
@supports (position-try: flip-block) {
/* @position-try is supported! */
}@scope (dukungan parsial)
itu @scope Pengujian sesuai aturan mungkin tampak sulit pada awalnya, namun tampaknya strategi yang sama yang kami terapkan dengan kueri pola dapat diterapkan. Buat gaya dasar untuk browser yang tidak mendukungnya @scope Kemudian timpa gaya tersebut di dalam file @scope Pemblokiran hanya akan berlaku di browser yang mendukung. Strategi penguatan tambahan jika memang ada!
.foo .element {
/* Base style */
}
@scope (.foo) to (.bar) {
:scope .element {
/* @scope is supported, override base style */
}
}@view-transition (dukungan parsial)
Aturan terakhir dalam daftar ini adalah @view-transition. Ini adalah fitur lain yang membuat kemajuan pesat dalam aplikasi browser, namun masih agak jauh dari dianggap sebagai dukungan inti.
Cara termudah adalah dengan menggunakan terkait view-transition-name Properti sejak mereka dilepasliarkan berdekatan:
@supports (view-transition-name: custom-ident) {
/* @view-transition is supported! */
}Tapi kita juga bisa menggunakan selector() Berfungsi untuk memeriksa dukungan untuk salah satu dari beberapa elemen semu:
@supports selector(::view-transition-group(transition-name)) {
/* @view-transition is supported! */
}Sedikit sumber daya
Saya telah memasukkan daftar ini ke dalam demo menggunakan @supports Untuk merancang aturan berbeda berdasarkan resep pengujian yang telah kami bahas:
Yang tidak terselesaikan
Meskipun saya merasa telah menyusun daftar yang solid, ada tiga aturan internal yang belum dapat saya pahami cara mengujinya: @layer, @propertyDan @starting-style.
Untungnya, masing-masing dari mereka didukung dengan baik di browser modern. Tapi itu tidak berarti kita seperti itu <>Seharusnya tidak Uji dukungan. Firasatku adalah kita bisa mengirim pesan teks @layer Dukungan serupa dengan dukungan metode pengujian untuk style() Pertanyaan dengan @container Kami menetapkan pola dasar dan menggunakan peningkatan bertahap jika dukungan tersedia.
Dua lainnya? Saya tidak tahu. Tapi tolong beri tahu saya cara memeriksa dukungan @property Dan @starting-style – Atau cara memeriksa dukungan untuk fitur lain yang berbeda dari yang saya miliki di sini. Ini adalah teka-teki yang sulit!
Resep untuk Menemukan Dukungan untuk CSS At-Rules awalnya diterbitkan di CSS-Tricks, yang merupakan bagian dari keluarga DigitalOcean. Anda harus mendapatkan buletin.
