memperkenalkan
Tidak ada keraguan bahwa perancang atau pengembang web mana pun yang mencoba menggunakan CSS akan menemukan bahwa browser yang berbeda memerlukan deklarasi gaya yang berbeda. Gangguan ini disebabkan oleh tingkat integritas penerapan CSS yang berbeda-beda di seluruh browser dan versinya. CSS bersyarat adalah solusi untuk masalah ini, mengambil ide sintaksis komentar bersyarat Internet Explorer dan memasukkannya ke dalam deklarasi CSS.
Penggunaan dasar
CSS bersyarat terutama digunakan untuk menunjukkan apakah pernyataan CSS tertentu harus digunakan di browser tertentu. Tentu saja Anda tidak ingin melakukan ini terlalu sering, namun ini bisa sangat berguna saat Anda perlu menargetkan browser. Anda dapat melihat di daftar dukungan U4EA bahwa sebagian besar browser mendukung metode ini.
Setiap deklarasi atau blok CSS dapat diawali dengan deklarasi bersyarat. Ada tiga tipe dasar awalan:
[jika {!} peramban]
[jika {!} versi browser]
[jika {!} mengkondisikan versi browser]
! - negasi dari pernyataan (misalnya TIDAK) - opsional
browser - browser tempat deklarasi dibuat
'YAITU' - Internet Explorer
'Gecko' - Browser berbasis Gecko (Firefox, Camino, dll.)
'Webkit' - Browser berbasis Webkit (Safari, Shiira, dll.)
'SafMob' - Safari Seluler (iPhone / iPod Touch)
'Opera' - peramban Opera
'IEMac' - Internet Explorer versi Mac
'Konq' - Penakluk
'IEmob' - IE untuk seluler
'PSP' - Playstation Portabel
'NetF' - Net Front (Maaf atas ketidaktahuan tentang Gula dan Tomat, saya tidak tahu apa ini)
version - versi browser yang akan ditargetkan
kondisi - operator aritmatika
lt - kurang dari
lte - kurang dari atau sama dengan
persamaan - sama dengan
gte - lebih besar dari atau sama dengan
gt - lebih besar dari
Beberapa contoh pernyataan kondisional:
// Contoh sintaksis CSS bersyarat
[jika IE] - jika browsernya IE
[jika ! Opera] - jika browsernya bukan Opera
[jika IE 5] - jika browsernya IE 5
[jika lte IE 6] - Jika browsernya IE 6 atau lebih rendah (IE 5, IE 4, dll.)
[if !gt IE 6] - setara dengan pernyataan di atas, jika versi browser tidak lebih tinggi dari IE 6
Karena banyak yang mengira div adalah kelas kotak dengan lebar dan bantalan. Jadi seharusnya juga berfungsi dengan baik di IE 5 (Saya melihat banyak orang telah menghentikan dukungan untuk IE 5, tapi ini adalah contoh klasik). Model kotak IE 5 tidak standar, jadi ini cara mengatasinya menggunakan CSS bersyarat:
// Contoh model kotak CSS bersyarat
div.kotak {
lebar: 400 piksel;
[jika IE 5] lebar: 600 piksel;
bantalan: 0 100 piksel;
}
Seperti yang Anda lihat, CSS bersyarat memungkinkan Anda untuk memelihara hanya satu file CSS, bukan beberapa file yang memerlukan penggunaan komentar bersyarat IE. Ini membantu menyederhanakan pemeliharaan dan membuat kode lebih jelas.
Selangkah lebih maju, fitur penting dari CSS bersyarat adalah ketika ia menemukan deklarasi @import CSS, ia secara otomatis membuka dan menyisipkan file yang perlu diimpor. Hal ini mengurangi waktu buka halaman karena browser hanya perlu membuat satu permintaan HTTP untuk file CSS.
Meskipun CSS bersyarat sebagian besar digunakan untuk berbagai versi browser IE, CSS bersyarat juga cukup berguna ketika Anda menemukan bug di browser lain yang sulit diperbaiki (terutama menggunakan Javascript untuk memperbaikinya). Contohnya termasuk bug gambar latar belakang di Firefox 2 dan Safari 2 yang tidak memiliki dukungan 'display: inline-block'. Bug ini telah diperbaiki pada versi terbaru browser ini, tetapi ketika browser ini menempati pangsa pasar tertentu, kompatibilitas ke belakang menjadi sangat penting.