Panduan Untuk Dukungan CSS Di Peramban

Kita tidak akan pernah hidup di dunia di mana setiap orang yang melihat situs kita memiliki browser dan versi browser yang sama, sama seperti kita tidak akan pernah hidup di dunia di mana setiap orang memiliki ukuran layar dan resolusi yang sama. Ini berarti bahwa berurusan dengan browser lama — atau browser yang tidak mendukung sesuatu yang ingin kita gunakan — adalah bagian dari tugas pengembang web. Meskipun demikian, sekarang semuanya jauh lebih baik daripada di masa lalu, dan dalam artikel ini, saya akan melihat berbagai jenis masalah dukungan browser yang mungkin kita hadapi. Saya akan menunjukkan kepada Anda beberapa cara untuk menghadapinya, dan juga melihat hal-hal yang mungkin akan segera hadir yang dapat membantu.

Mengapa Kita Memiliki Perbedaan Ini?

Bahkan di dunia di mana sebagian besar browser berbasis Chromium, browser tersebut tidak semuanya menjalankan versi Chromium yang sama dengan Google Chrome. Ini berarti bahwa browser berbasis Chromium seperti Vivaldi, mungkin beberapa versi di belakang Google Chrome.

Dan, tentu saja, pengguna tidak selalu memperbarui peramban mereka dengan cepat, meskipun situasi itu telah membaik dalam beberapa tahun terakhir dengan sebagian besar peramban memutakhirkan diri mereka sendiri secara diam-diam.

Ada juga cara fitur baru masuk ke browser. Ini bukanlah kasus bahwa fitur baru untuk CSS dirancang oleh Kelompok Kerja CSS, dan spesifikasi lengkap diberikan kepada vendor browser dengan instruksi untuk mengimplementasikannya. Cukup sering hanya ketika implementasi eksperimental terjadi, semua detail spesifikasi yang lebih baik dapat diselesaikan. Oleh karena itu, pengembangan fitur merupakan proses berulang dan mengharuskan browser menerapkan spesifikasi ini dalam pengembangan. Meskipun implementasi terjadi akhir-akhir ini paling sering di belakang bendera di browser atau hanya tersedia dalam versi Nightly atau pratinjau, setelah browser memiliki fitur lengkap, kemungkinan besar akan mengaktifkannya untuk semua orang meskipun belum ada browser lain yang memiliki dukungan.

Semua ini berarti bahwa — sebanyak yang kita suka — kita tidak akan pernah ada di dunia di mana fitur-fitur tersedia secara ajaib di setiap desktop dan telepon secara bersamaan. Jika Anda seorang pengembang web profesional maka tugas Anda adalah menangani fakta itu.

Bug vs. Kurangnya Dukungan

Ada tiga masalah yang kami hadapi terkait dengan dukungan browser:

1. Tidak Ada Dukungan Fitur
   Masalah pertama (dan paling mudah untuk ditangani) adalah ketika browser tidak mendukung fitur sama sekali.
2. Berurusan Dengan "Bugs" Peramban
   Yang kedua adalah ketika browser mengklaim mendukung fitur tersebut, tetapi melakukannya dengan cara yang berbeda dengan cara browser lain mendukung fitur tersebut. Masalah seperti itu yang cenderung kita sebut sebagai "bug browser" karena hasil akhirnya adalah perilaku yang tidak konsisten.
3. Dukungan Sebagian Dari Properti CSS
   Yang ini menjadi lebih umum; situasi di mana browser mendukung fitur — tetapi hanya dalam satu konteks.

Sangat membantu untuk memahami apa yang Anda hadapi ketika Anda melihat perbedaan antara browser, jadi mari kita lihat masing-masing masalah ini secara bergantian.

1. Tidak Ada Dukungan Fitur

Jika Anda menggunakan properti atau nilai CSS yang tidak dipahami browser, browser akan mengabaikannya. Ini sama apakah Anda menggunakan fitur yang tidak didukung, atau membuat fitur dan mencoba menggunakannya. Jika browser tidak memahami baris CSS tersebut, browser akan melewatkannya dan melanjutkan ke hal berikutnya yang dipahaminya.

Prinsip desain CSS ini berarti Anda dapat dengan senang hati menggunakan fitur-fitur baru, dengan pengetahuan bahwa tidak ada hal buruk yang akan terjadi pada browser yang tidak memiliki dukungan. Untuk beberapa CSS, hanya digunakan sebagai perangkat tambahan, hanya itu yang perlu Anda lakukan. Gunakan fitur tersebut, pastikan ketika fitur itu tidak tersedia pengalamannya masih bagus, dan hanya itu. Pendekatan ini adalah ide dasar di balik peningkatan progresif, menggunakan fitur platform ini yang memungkinkan penggunaan yang aman dari hal-hal baru di browser yang tidak memahaminya.

Jika Anda ingin memeriksa apakah fitur yang Anda gunakan didukung oleh browser, Anda dapat melihat situs web Can I Use. Tempat lain yang bagus untuk mencari informasi dukungan terperinci adalah halaman untuk setiap properti CSS di MDN. Data dukungan browser di sana cenderung sangat detail.

CSS Baru Memahami CSS Lama

Saat fitur CSS baru dikembangkan, perhatian diberikan dalam hal bagaimana fitur tersebut berinteraksi dengan CSS yang ada. Misalnya, dalam spesifikasi Grid dan Flexbox, ini dirinci dalam hal bagaimana display: grid dan display: flex berurusan dengan skenario seperti ketika item melayang menjadi item grid, atau wadah multikol diubah menjadi grid. Ini berarti bahwa perilaku tertentu diabaikan, membantu Anda hanya menimpa CSS untuk browser yang tidak mendukung. Penggantian ini dirinci di halaman untuk peningkatan Progresif dan Tata Letak Kotak di MDN.

Mendeteksi Dukungan Dengan Pertanyaan Fitur

Metode di atas hanya berfungsi jika CSS yang perlu Anda gunakan tidak memerlukan properti lain untuk mengikutinya. Anda mungkin perlu menambahkan properti tambahan ke CSS Anda untuk browser lama yang kemudian juga akan ditafsirkan oleh browser yang juga mendukung fitur tersebut.

Contoh bagus dari ini dapat ditemukan saat menggunakan Tata Letak Kotak. Sementara item melayang yang menjadi item kisi kehilangan semua perilaku mengambang, kemungkinan jika Anda mencoba membuat fallback untuk tata letak kotak dengan float, Anda akan menambahkan lebar persentase dan mungkin margin ke item.

 .grid > .item { width: 23%; margin: 0 1%; } 

Lebar dan margin ini kemudian akan tetap berlaku saat item yang melayang adalah item kisi. Lebar menjadi persentase dari trek grid daripada lebar penuh wadah; margin apa pun kemudian akan diterapkan serta celah yang mungkin telah Anda tentukan.

 .grid > .item { width: 23%; margin: 0 1%; } .grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; column-gap: 1%; } 

Untungnya, ada fitur yang dibangun ke dalam CSS dan diimplementasikan ke dalam browser modern yang membantu kita mengatasi situasi ini. Kueri Fitur memungkinkan kami untuk langsung menanyakan browser apa yang mereka dukung dan kemudian bertindak berdasarkan responsnya. Sama seperti Media Query — yang menguji beberapa properti perangkat atau layar — Feature Query menguji dukungan properti dan nilai CSS.

Tes Untuk Dukungan

Menguji dukungan adalah kasus paling sederhana, kami menggunakan @supports dan kemudian menguji properti dan nilai CSS. Konten di dalam Feature Query hanya akan berjalan jika browser merespons dengan benar, yaitu mendukung fitur tersebut.

Uji Tanpa Dukungan

Anda dapat menanyakan browser apakah itu tidak mendukung fitur. Dalam hal ini, kode di dalam Feature Query hanya akan berjalan jika browser menunjukkan tidak ada dukungan.

 @supports not (display: grid) { .item { /* CSS from browsers which do not support grid layout */ } }

Tes Untuk Banyak Hal

Jika Anda membutuhkan lebih dari satu properti untuk didukung, gunakan and .

 @supports (display: grid) and (shape-outside: circle()){ .item { /* CSS from browsers which support grid and CSS shapes */ } }

Jika Anda memerlukan dukungan dari satu properti atau lainnya, gunakan or .

 @supports (display: grid) or (display: flex){ .item { /* CSS from browsers which support grid or flexbox */ } }

Memilih Properti Dan Nilai Untuk Diuji

Anda tidak perlu menguji setiap properti yang ingin Anda gunakan — hanya sesuatu yang akan menunjukkan dukungan untuk fitur yang Anda rencanakan untuk digunakan. Oleh karena itu, jika Anda ingin menggunakan Tata Letak Kotak, Anda dapat menguji display: grid . Di masa mendatang (dan setelah dukungan subgrid masuk ke browser), Anda mungkin perlu lebih spesifik dan menguji fungsionalitas subgrid. Dalam hal ini, Anda akan menguji grid-template-columns: subgrid untuk mendapatkan respons yang benar hanya dari browser yang telah menerapkan dukungan subgrid.

Jika sekarang kita kembali ke contoh fallback mengambang, kita dapat melihat bagaimana kueri fitur akan menyelesaikannya untuk kita. Yang perlu kita lakukan adalah menanyakan browser untuk mengetahui apakah itu mendukung tata letak kotak. Jika ya, kita dapat mengatur lebar item kembali ke auto dan margin ke 0 .

 .grid > .item { width: 23%; margin: 0 1%; } @supports(display: grid) { .grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; column-gap: 1%; } .grid > .item { width: auto; margin: 0; } } 

Perhatikan bahwa meskipun saya telah memasukkan semua kode kisi di dalam kueri fitur saya, saya tidak perlu melakukannya. Jika browser tidak memahami properti kisi, itu akan mengabaikannya sehingga mereka dapat dengan aman berada di luar kueri fitur. Hal-hal yang harus ada di dalam kueri fitur dalam contoh ini adalah properti margin dan lebar, karena ini diperlukan untuk kode browser lama tetapi juga akan diterapkan oleh browser pendukung.

Rangkul The Cascade

Cara yang sangat sederhana untuk menawarkan fallback adalah dengan memanfaatkan fakta bahwa browser mengabaikan CSS yang tidak mereka pahami, dan fakta bahwa di mana segala sesuatu yang lain memiliki kekhususan yang sama, urutan sumber diperhitungkan dalam hal CSS diterapkan ke suatu elemen .

Anda pertama-tama menulis CSS Anda untuk browser yang tidak mendukung fitur tersebut. Kemudian uji dukungan properti yang ingin Anda gunakan, jika browser mengonfirmasi bahwa ia memiliki dukungan, timpa kode fallback dengan kode baru Anda.

Ini hampir sama dengan prosedur yang mungkin Anda gunakan saat menggunakan kueri media untuk desain responsif, mengikuti pendekatan yang mengutamakan seluler. Dalam pendekatan itu, Anda mulai dengan tata letak Anda untuk layar yang lebih kecil, lalu menambahkan atau menimpa hal-hal untuk yang lebih besar saat Anda bergerak ke atas melalui breakpoints Anda.

Bisakah Saya Menggunakan Kueri Fitur CSS? Data tentang dukungan untuk Kueri Fitur CSS di seluruh browser utama dari caniuse.com.

Cara kerja di atas berarti Anda tidak perlu khawatir dengan browser yang tidak mendukung Feature Query. Seperti yang Anda lihat dari Can I Use , Feature Query memiliki dukungan yang sangat bagus. Peramban menonjol yang tidak mendukungnya adalah versi Internet Explorer apa pun.

Namun, kemungkinan fitur baru yang ingin Anda gunakan juga tidak didukung di IE. Jadi, saat ini Anda hampir selalu memulai dengan menulis CSS untuk browser tanpa dukungan, kemudian Anda mengujinya dengan Feature Query. Kueri Fitur ini harus menguji dukungan .

1. Peramban yang mendukung Kueri Fitur akan mengembalikan true jika mereka memiliki dukungan sehingga kode di dalam kueri akan digunakan, menimpa kode untuk peramban lama.
2. Jika browser mendukung Feature Query tetapi bukan fitur yang sedang diuji, itu akan mengembalikan false. Kode di dalam kueri fitur akan diabaikan.
3. Jika browser tidak mendukung Feature Query maka semua yang ada di dalam blok Feature Query akan diabaikan, yang berarti bahwa browser seperti IE11 akan menggunakan kode browser lama Anda, yang kemungkinan besar persis seperti yang Anda inginkan!

2. Berurusan Dengan "Bugs" Peramban

Masalah dukungan browser kedua untungnya menjadi kurang umum. Jika Anda membaca "What We Wished For" (diterbitkan pada akhir tahun lalu), Anda bisa mendapatkan sedikit tur ke beberapa bug browser yang lebih membingungkan di masa lalu. Yang mengatakan, perangkat lunak apa pun bertanggung jawab untuk memiliki bug, tidak terkecuali browser. Dan, jika kita menambahkan fakta bahwa karena sifat melingkar dari implementasi spesifikasi, terkadang browser mengimplementasikan sesuatu dan kemudian spesifikasinya berubah sehingga mereka sekarang perlu mengeluarkan pembaruan. Sampai pembaruan itu dikirimkan, kita mungkin berada dalam situasi di mana browser melakukan sesuatu yang berbeda satu sama lain.

Kueri Fitur tidak dapat membantu kami jika browser melaporkan dukungan terhadap sesuatu yang sangat mendukungnya. Tidak ada mode yang dapat digunakan browser untuk mengatakan, “ Ya, tetapi Anda mungkin tidak akan menyukainya .” Ketika bug interoperabilitas yang sebenarnya muncul, dalam situasi inilah Anda mungkin perlu sedikit lebih kreatif.

Jika Anda merasa melihat bug maka hal pertama yang harus dilakukan adalah mengonfirmasinya. Terkadang ketika kita berpikir kita melihat perilaku buggy, dan browser melakukan hal yang berbeda, kesalahan ada pada kita. Mungkin kita telah menggunakan beberapa sintaks yang tidak valid, atau mencoba untuk menata gaya HTML yang salah. Dalam kasus tersebut, browser akan mencoba melakukan sesuatu; namun, karena Anda tidak menggunakan bahasa seperti yang dirancang, setiap browser mungkin mengatasinya dengan cara yang berbeda. Pemeriksaan cepat bahwa HTML dan CSS Anda valid adalah langkah pertama yang sangat baik.

Pada saat itu, saya mungkin akan melakukan pencarian cepat dan melihat apakah masalah saya sudah dipahami secara luas. Ada beberapa repo masalah yang diketahui, misalnya Flexbugs dan Gridbugs. Namun, bahkan hanya beberapa kata kunci yang dipilih dengan baik dapat memunculkan posting atau artikel Stack Overflow yang mencakup subjek dan mungkin memberi Anda solusi.

Tapi katakanlah Anda tidak benar-benar tahu apa yang menyebabkan bug, yang membuatnya cukup sulit untuk mencari solusi. Jadi, langkah selanjutnya adalah membuat kasus uji tereduksi dari masalah Anda, yaitu menghapus apa pun yang tidak relevan untuk membantu Anda mengidentifikasi dengan tepat apa yang memicu bug. Jika Anda merasa memiliki bug CSS, dapatkah Anda menghapus JavaScript apa pun, atau membuat ulang gaya yang sama di luar kerangka kerja? Saya sering menggunakan CodePen untuk mengumpulkan test case yang dikurangi dari sesuatu yang saya lihat; ini memiliki keuntungan tambahan memberi saya kode dengan cara yang dapat dengan mudah saya bagikan dengan orang lain jika saya perlu menanyakannya.

Sebagian besar waktu, setelah Anda mengisolasi masalah, adalah mungkin untuk memikirkan cara alternatif untuk mencapai hasil yang Anda inginkan. Anda akan menemukan bahwa orang lain telah menemukan solusi yang licik, atau Anda dapat memposting di suatu tempat untuk meminta saran.

Dengan demikian, jika Anda merasa memiliki bug browser dan tidak dapat menemukan orang lain berbicara tentang masalah yang sama, sangat mungkin Anda telah menemukan sesuatu yang baru yang harus dilaporkan. Dengan semua CSS baru yang muncul baru-baru ini, masalah terkadang muncul saat orang mulai menggunakan berbagai hal dalam kombinasi dengan bagian CSS lainnya.

Lihat posting ini dari Lea Verou tentang melaporkan masalah seperti itu, “Bantu Komunitas! Laporkan Bug Peramban!”. Artikel ini juga memiliki tip bagus untuk membuat kasus uji yang diperkecil.

3. Dukungan Sebagian Dari Properti CSS

Jenis masalah ketiga menjadi lebih umum karena cara spesifikasi CSS modern dirancang. Jika kita berpikir tentang Tata Letak Grid dan Flexbox, spesifikasi ini menggunakan properti dan nilai di Box Alignment Level 3, untuk melakukan penyelarasan. Oleh karena itu, properti seperti align-items , justify-content , dan column-gap ditentukan untuk digunakan di Grid dan Flexbox serta metode tata letak lainnya.

Namun, pada saat penulisan, properti gap berfungsi di Tata Letak Kotak di semua browser yang mendukung kotak, dan column-gap berfungsi di Multicol; namun, hanya Firefox yang menerapkan properti ini untuk Flexbox.

Jika saya menggunakan margin untuk membuat fallback untuk Flexbox, lalu menguji column-gap dan menghapus margin, kotak saya tidak akan memiliki ruang di antara keduanya di browser yang mendukung column-gap di Grid atau multicol, jadi jarak mundur saya akan menjadi DIHAPUS.

 @supports(column-gap: 20px) { .flex { margin: 0; /* almost everything supports column-gap so this will always remove the margins, even if we do not have gap support in flexbox. */ } }

Ini adalah batasan Kueri Fitur saat ini. Kami tidak memiliki cara untuk menguji dukungan fitur di fitur lain. Dalam situasi di atas, yang ingin saya tanyakan kepada browser adalah, “Apakah Anda memiliki dukungan untuk celah kolom di Flexbox?” Dengan cara ini, saya bisa mendapatkan respons negatif sehingga saya bisa menggunakan fallback saya.

Ada masalah serupa dengan properti fragmentasi CSS break-before , break-after , dan break-inside . Karena ini memiliki dukungan yang lebih baik saat halaman dicetak, browser akan sering mengklaim dukungan. Namun, jika Anda menguji dukungan dalam multikol, Anda mendapatkan apa yang tampak sebagai positif palsu. Saya telah mengangkat masalah di Kelompok Kerja CSS untuk masalah ini, namun, ini bukan masalah yang mudah untuk dipecahkan. Jika Anda memiliki pemikiran, silakan tambahkan di sana.

Pengujian Untuk Dukungan Pemilih

Saat ini, Kueri Fitur hanya dapat menguji Properti dan Nilai CSS. Hal lain yang mungkin ingin kami uji adalah dukungan selektor yang lebih baru, seperti yang ada di Level 4 spesifikasi Selektor. Ada catatan penjelasan dan juga implementasi di balik bendera di Firefox Nightly dari fitur baru untuk Feature Query yang akan mencapai ini.

Jika Anda mengunjungi about:config di Firefox dan mengaktifkan flag layout.css.supports-selector.enabled maka Anda dapat menguji untuk melihat apakah berbagai penyeleksi didukung. Sintaksnya saat ini sangat mudah, misalnya untuk menguji pemilih : :has :

 @supports selector(:has){ .item { /* CSS for support of :has */ } }

Ini adalah spesifikasi dalam pengembangan, namun, Anda dapat melihat bagaimana fitur untuk membantu kami mengelola masalah dukungan browser yang selalu ada ditambahkan saat kami berbicara.

Bacaan lebih lanjut

Ini bisa membuat frustrasi ketika Anda ingin menggunakan fitur dan menemukan bahwa itu tidak didukung oleh satu browser utama, atau jika ada sesuatu yang berperilaku dengan cara yang berbeda. Saya telah mengumpulkan beberapa bacaan lebih lanjut praktis yang mungkin bisa membantu.

• Opsi “Menggunakan CSS Grid: Mendukung Browser Tanpa Grid” untuk menangani browser lama dan CSS Grid
• Halaman referensi MDN “Kueri Fitur” untuk Kueri Fitur
• Panduan MDN "CSS Grid Dan Peningkatan Progresif" untuk peningkatan progresif Grid
• Panduan MDN “Kompatibilitas Mundur Flexbox” untuk dukungan Flexbox termasuk detail implementasi awalan yang lebih lama
• "Perpustakaan Pola Pertama" Bagaimana mengelola kode fallback menggunakan perpustakaan pola