1.Garis Besar
Saat men-debug masalah CSS, saya sering menambahkan batas ke elemen tertentu untuk melihat secara pasti apa yang terjadi pada elemen tersebut dan membantu menentukan sumber masalahnya. Ini sering kali berhasil karena memberi saya visibilitas yang lebih spesifik pada tata letak. Namun jika itu adalah elemen tingkat blok, mungkin ada yang tidak beres - menambahkan batas 1 piksel ke elemen tingkat blok apa pun kemungkinan akan memengaruhi tata letak dengan membuat elemen lebih lebar 2 piksel.
Properti outline adalah pengganti yang sempurna karena merender objek tanpa mempengaruhi alur dokumen. Namun IE6 dan IE7 tidak mendukung atribut outline, sehingga tidak dapat digunakan untuk debugging di kedua browser tersebut.
2. Mewarisi (nilai)
Ada banyak contoh mengenai hal ini dalam pengembangan CSS: dengan menetapkan gaya tertentu pada elemen tertentu untuk memberi tahu elemen tersebut untuk "mewarisi" semua properti tambahan dari elemen induknya, Anda dapat menghindari sejumlah besar input keyboard.
Hal ini dapat dengan mudah dicapai dengan mengatur warisan. Ini mungkin berguna. Misalnya, saat mengganti atribut latar belakang, sering kali terdapat banyak teks di atribut tersebut (warna, URL gambar, lokasi, dll.). Jadi, daripada menulis ulang nilai-nilai ini, Anda mungkin hanya ingin elemen tersebut memiliki properti background yang sama dengan induknya, dan nilai yang diwarisi akan membantu - jelas menghemat banyak pengetikan keyboard.
Sayangnya, nilai bawaan tidak didukung di IE6 dan IE7 (kecuali untuk properti arah (arah teks) dan visibilitas).
3. Sel Kosong
Atribut ini hanya digunakan untuk tabel atau elemen yang atribut "display"-nya disetel ke "table-cell". Jika Anda menambahkan konten ke tabel secara dinamis, Anda mungkin menghadapi situasi di mana konten sel tertentu kosong, dan Anda tidak ingin batas, warna latar belakang, gambar latar belakang, dll. dari sel kosong ini disembunyikan.
Menggunakan "sel kosong: sembunyikan" dapat menyelesaikan masalah ini, yang akan menyembunyikan sel sepenuhnya di mana situasi ini mungkin terjadi.
Internet Explorer tidak mendukung atribut sel kosong.
4.Sisi Keterangan
Berbicara tentang atribut tabel, atribut ini digunakan untuk menyatakan judul tabel yang ditampilkan pada kolom samping tabel. Ia menerima empat nilai: atas, bawah, kiri dan kanan. Internet Exporer tidak mendukung atribut ini, judul tabel akan selalu muncul di bagian atas tabel di IE6 dan IE7.
5. Counter-Inkrement/Counter-Reset
Daftar yang diurutkan (<ol>) sangat mudah karena Anda tidak perlu repot menambahkan angka secara manual, dan memungkinkan Anda mengubah urutan daftar tanpa mengubah angkanya.
CSS memiliki properti counter-increase dan counter-reset, yang memungkinkan Anda secara otomatis menghasilkan angka pertambahan pada hampir semua elemen HTML, mirip dengan daftar yang diurutkan.
Namun IE6, IE7 dan bahkan Safari (sampai versi 3.x) tidak mendukung properti ini. Tentu saja, IE6 juga tidak mendukung elemen semu :before.
6.Min-Tinggi
Terkadang desain atau struktur tata letak situs web memerlukan area konten dengan ketinggian tetap, jika tidak, efek visual tertentu akan hilang. Ini mungkin karena latar belakang gradien, daftar drop-down yang unik, atau mungkin karena efek cahaya keren yang keluar dari Photoshop. Namun terkadang, terdapat banyak konten di dalam halaman, namun halaman tersebut tidak dapat diperluas seperti yang diharapkan.
Saat ini, Anda perlu menggunakan atribut min-height, karena atribut ini dapat memberi tahu browser untuk merender tinggi minimum pada elemen tingkat blok tertentu, terlepas dari apakah tinggi sebenarnya konten mencapai tinggi minimum ini. Kemudian, jika isinya melebihi tinggi minimum, elemen tersebut akan mengembang dengan tepat.
Satu-satunya hal yang perlu diperhatikan tentang penggunaan min-height adalah bahwa ini tidak didukung di IE6. Kita semua tahu bahwa IE6 (perlahan-lahan) sedang sekarat, namun beberapa pelanggan mungkin masih menuntut agar situs mereka mendukung browser terkutuk itu.
Kabar baiknya adalah IE6 merender nilai ketinggian persis sama dengan cara browser lain merender "min-height", jadi yang Anda perlukan hanyalah peretasan khusus IE6 atau stylesheet mandiri untuk menambahkan height tertentu, masalahnya terpecahkan.
IE6 juga mengabaikan min-width, max-height dan max-width, namun metode di atas juga layak untuk properti ini.
7. : melayang
Secara teknis, :hover hanyalah kelas semu, tetapi tidak didukung di IE6 (IE7 dan IE8 mendukungnya). Kelas semu :hover memungkinkan Anda menambahkan gaya gerakan mouse apa pun ke suatu elemen. Ini sangat berguna dan menghindari (setidaknya sampai batas tertentu) penggunaan JavaScript.
Namun jika situs web Anda harus sepenuhnya mendukung IE6, terutama di Tiongkok di mana IE6 mendominasi dunia, maka Anda harus mempertimbangkan untuk membatalkan penggunaan kelas semu ini, kecuali tag yang relevan memiliki atribut "href", seperti tag <a> . Dan jika Anda ingin mencapai efek ini, Anda mungkin harus menggunakan javascript dan gaya tambahan.
8.Tampilan
Tampilan biasanya diatur ke salah satu dari tiga nilai berikut: blok, sebaris, dan tidak ada. "Terima kasih" kepada IE, nilai Tampilan lainnya jarang digunakan. Nilai-nilai ini termasuk inline-block, table, inline-table dan table-cell, dll. Atribut ini sangat berguna untuk memecahkan beberapa masalah tata letak khusus.
Oleh karena itu, meskipun IE mendukung ketiga properti dasar Tampilan ini, pada dasarnya IE tidak mendukung properti lainnya.
Faktanya, dukungan atribut tampilan IE8 cukup lengkap. Namun, untuk atribut inline-block, IE6/7 hanya mendukung elemen yang inline sendiri.
Untuk mempelajari lebih lanjut tentang dukungan Tampilan di berbagai browser, silakan periksa di sini - Shenfei Note
9. Klip
Ini adalah properti CSS menarik yang berguna dalam situasi khusus. Ini mungkin dikombinasikan dengan konten yang tidak dapat diprediksi dan dihasilkan secara dinamis. Sederhananya, atribut ini memungkinkan Anda menentukan area tersembunyi pada elemen tertentu - ini juga dapat dipahami sebagai, dalam elemen yang diposisikan secara absolut, area tampilan elemen dipotong sesuai dengan pengaturan tertentu, dan konten di luar area ini akan disembunyikan.
Secara teknis, atribut clip didukung oleh IE, tetapi hanya mendukung sintaksis bebas koma, seperti
div.terpotong {
bantalan: 20 piksel;
lebar: 400 piksel;
tinggi: 400 piksel;
klip: persegi(20px 300px 200px 100px);
posisi: mutlak;
}
Gaya di atas (atribut dalam tanda kurung setelah rect tidak dipisahkan dengan koma) dapat dijalankan di sebagian besar browser, namun mungkin tidak lolos validasi CSS karena pernyataannya tidak dipisahkan dengan koma.
10. :fokus
Ini adalah kelas semu lain yang perlu disebutkan di sini, karena semua browser non-IE mendukung atribut ini. Kelas semu :focus memungkinkan Anda mendeklarasikan gaya khusus yang diterapkan secara dinamis ke elemen halaman saat elemen tersebut menjadi fokus keyboard (mouse). Ini berguna pada elemen formulir karena Anda bisa menambahkan batas ke kolom input saat dipilih.