Advertisement
Web Design

Mendeteksi Dukungan CSS Browser dengan @Supports

Setiap browser memiliki kemputusan sendiri tentang fitur apa yang akan mereka masukan kedalam sistem mereka, kita sebagai pengembang web kadang harus serung kali mengidentifikasi apakah browser tersebut mendukung fitur tertentu yang ingin kita tanamkan pada website yang sedang kita kerjakan maka dari itu kita kadang mengisi kesenjangan dengan menggunakan polyfills (jika diperlukan). cara yang lebih populer untuk menangani situasi seperti ini adalah dengan menggunakan Modernizr, tetapi apakah kamu tahu bahwa kita juga dapat Mendeteksi Dukungan CSS Browser dengan @Supports hanya dengan menggunakan CSS?

Ada aturan baru yang tertuang dalam Draft W3C, yang disebut @support, mari langsung kita praktekan :

Menggunakan aturan @Support

Berbeda seperti Modernizr, aturan @supports membutuhkan properti dan nilai yang ditentukan. Katakanlah kita ingin menerapkan CSS3 grid hanya untuk browser yang mendukungnya. Kita bisa menulis dengan cara ini.

@support (display: grid;) {
	.selector {
		display: grid;
		grid-column: 3;
		grid-row: 1;
		grid-row-span: 2;
	}
}

Aturan CSS di bawah @support hanya akan diterapkan jika kondisi nilai returns true. Mengingat contoh di atas, maka akan diterapkan jika browser mendukung display: grid. Atau yang lain, browser akan menerapkan aturan lain yang setara di luar @support.

Kondisi Campuran

Selain itu, kita diizinkan untuk menggabungkan kondisi ganda menggunakan operator andor, dan not. Sebagai contoh, katakanlah kita ingin menerapkan aturan hanya jika browser memenuhi kondisi berikut:

  • Ini mendukung baik CSS3 Grid atau  CSS3 Flexbox.
  • Ini mendukung CSS3 Columns.

Dalam hal ini, kita dapat menulis aturan kondisional, sebagai berikut.

</pre>
</div>
<div dir="ltr">
@support
 ((display: grid;) or (display:flexbox;))
 and (column-count:3;) {
 /*
 Your CSS rules here
 */
}</div>
<div dir="ltr">
Jangan menulis dengan cara berikut yaitu cara yang tidak valid, dan akan membingungkan browser.
</pre>
</div>
<div dir="ltr">
@support
 (display: grid;) or (display:flexbox;) and (column-count:3;) {
 /*
 Your CSS rules here
 */
}

</div>
<div dir="ltr">

Fitur ini sangat bagus dan akan sangat berguna pada beberapa kesempatan.

Dalam rangka untuk tes, bagaimanapun, browser harus mendukung aturan ini, sebaliknya metode ini akan gagal. Dan pada saat menulis ini, Opera tampaknya menjadi satu-satunya browser yang telah menerapkan fitur ini. Jadi, sampai spec stabil dan telah ditutupi oleh semua browser lainnya, menunda menggunakan metode ini untuk menguji selama tahap produksi. Untuk melakukan percobaan, lakukan sekarang juga.

Selalu menganggap diri seorang pemula. Seorang Website Designer yang lagi suka nulis, juga editing video, dan memperhatikan tren desain. Entrepreneur. Founder & Marketing Palawakia Studio

Related Stories

Leave a Reply

Your email address will not be published. Required fields are marked *