1. Garis besar Gaya di atas (properti dalam tanda kurung setelah Rect tidak dipisahkan oleh koma) dapat dijalankan di sebagian besar browser, tetapi mungkin tidak melewati verifikasi CSS karena pernyataan tidak dipisahkan oleh koma.
Saat men -debug masalah CSS, saya sering menambahkan batas ke elemen yang ditentukan untuk secara akurat melihat apa yang terjadi pada elemen dan membantu menentukan sumber masalah. Ini sering efektif karena memberi saya visibilitas yang lebih spesifik dalam tata letak. Tetapi jika itu adalah elemen tingkat blok, ini dapat menyebabkan beberapa kesalahan-menambahkan batas 1px ke elemen tingkat blok kemungkinan besar akan mempengaruhi tata letak, yang akan menambahkan 2px tambahan ke lebar elemen ini.
Properti garis besar adalah alternatif yang sempurna karena membuat objek tanpa mempengaruhi aliran dokumen. Namun, IE6 dan IE7 tidak mendukung atribut garis besar, sehingga tidak dapat digunakan untuk men -debug di kedua browser.
2. Warisan (nilai)
Ada banyak contoh dalam pengembangan CSS: "mewarisi" semua sifat tambahan dari elemen induknya dengan mengatur gaya tertentu pada elemen tertentu, sehingga Anda dapat menghindari cukup banyak input keyboard.
Ini dapat dengan mudah dicapai dengan mengatur warisan. Ini bisa berguna. Misalnya, saat menulis ulang atribut latar belakang, sering ada banyak teks dalam atribut (warna, alamat URL, lokasi, dll.). Jadi, alih -alih menulis ulang nilai -nilai ini, Anda mungkin hanya ingin mempertimbangkan bahwa elemen -elemen dalam proses memiliki properti latar belakang yang sama dengan elemen induknya, nilai waris dapat melakukan segalanya - yang jelas -jelas menyimpan input keyboard banyak.
Sayangnya, nilai warisan tidak didukung dalam IE6 dan IE7 (kecuali untuk arah (orientasi teks) dan sifat visibilitas).
3. Sel kosong
Properti ini hanya digunakan untuk elemen-elemen yang tabel atau properti "display" diatur ke "sel meja". Jika Anda secara dinamis menambahkan konten ke tabel, Anda dapat menemukan konten kosong sel, dan kemudian Anda tidak ingin sel kosong disembunyikan.
Menggunakan "Sel Kosong: Sembunyikan" dapat menyelesaikan masalah ini, yang sepenuhnya akan menyembunyikan sel yang mungkin terjadi.
Internet Explorer tidak mendukung atribut sel kosong.
4. Sisi Caption
Berbicara tentang atribut tabel, atribut ini digunakan untuk mendeklarasikan judul tabel yang ditampilkan di bilah sisi tabel. Ia menerima empat nilai: atas, bawah, kiri dan kanan. Internet Exporer tidak mendukung properti ini, judul meja akan selalu muncul di bagian atas tabel di IE6 dan IE7.
5. Penjelasan Counter / Counter-Reset
Daftar yang dipesan (<Ol>) sangat nyaman karena mereka menyimpan kerumitan menambahkan nomor tambahan secara manual, dan memungkinkan Anda untuk mengubah urutan daftar tanpa mengubah angka.
CSS memiliki countercrement dan counter-reset properti, yang memungkinkan Anda untuk secara otomatis menghasilkan nomor tambahan ke hampir semua elemen HTML, seperti efek dari daftar yang dipesan.
Tapi IE6, IE7 dan bahkan Safari (sampai versi 3.x) tidak mendukung properti ini. Tentu saja, IE6 tidak mendukung: sebelum elemen semu.
6. Min-tinggi
Terkadang, desain atau tata letak situs web membutuhkan area konten dengan ketinggian tetap, jika tidak efek visual spesifik akan hilang. Ini bisa disebabkan oleh latar belakang gradien, daftar drop-down yang unik, atau bisa disebabkan oleh efek cahaya keren dari PS. Tetapi kadang -kadang, ada banyak konten di halaman, tetapi halaman tidak dapat diperluas seperti yang diharapkan.
Pada saat ini, atribut tinggi min perlu digunakan, karena dapat memberi tahu browser untuk membuat ketinggian minimum pada elemen tingkat blok tertentu, terlepas dari apakah ketinggian konten yang sebenarnya mencapai ketinggian minimum ini. Kemudian, jika konten melebihi ketinggian minimum, elemen akan meluas secara moderat.
Satu-satunya hal yang perlu diperhatikan dengan ketinggian min adalah tidak didukung di IE6. Kita semua tahu bahwa IE6 keluar dari tahap sejarah (perlahan), tetapi beberapa pelanggan mungkin masih meminta situs web mereka untuk mendukung browser ini.
Tapi itu bagus bahwa IE6 membuat nilai tinggi dengan cara yang sama seperti browser lain membuat "tinggi min", jadi Anda hanya perlu peretasan atau stylesheet independen untuk IE6 untuk menambahkan stylesheet spesifik ke elemen itu.
IE6 juga mengabaikan Min-Width, Max-Height, dan Max-Width, tetapi metode di atas juga layak di properti ini.
7.: Arahkan
Secara teknis ,: Hover hanyalah kelas semu, tetapi tidak didukung di IE6 (didukung oleh IE7 dan IE8). : Mengarahkan kelas semu memungkinkan Anda untuk menambahkan gaya mouse ke elemen. Ini sangat berguna dan dapat menghindari (setidaknya sampai batas tertentu) menggunakan JavaScript.
Namun, jika situs web Anda perlu sepenuhnya mendukung IE6, terutama di Cina di mana IE6 penuh dengan kekuatan, maka Anda harus mempertimbangkan untuk membatalkan penggunaan kelas semu ini kecuali tag yang relevan memiliki atribut "HREF", seperti tag <a> . Dan jika efek ini harus dicapai, mungkin perlu menggunakan JavaScript dan gaya tambahan.
8. Tampilan
Tampilan biasanya diatur ke salah satu dari tiga nilai ini: blok, inline, dan tidak ada. "Berkat IE, nilai -nilai tampilan lainnya jarang digunakan. Nilai-nilai ini termasuk blok inline, tabel, tabel inline, dan sel meja.
Jadi, meskipun IE mendukung tiga sifat dasar tampilan ini, pada dasarnya tidak mendukung properti lain.
Bahkan, dukungan properti IE8 untuk tampilan cukup lengkap. Namun, untuk atribut blok-inline, IE6/7 hanya mendukung elemen-elemen yang sebaris itu sendiri.
Untuk mempelajari lebih lanjut tentang dukungan tampilan di berbagai browser, silakan merujuk ini - Shenfei Note
9. Klip
Ini adalah atribut CSS yang menarik yang berguna dalam kasus khusus. Ini dapat dikombinasikan dengan konten yang tidak dapat diprediksi, yang dihasilkan secara dinamis. Sederhananya, properti ini memungkinkan Anda untuk menentukan area tersembunyi pada elemen tertentu - itu juga dapat dipahami seperti pada elemen yang benar -benar diposisikan, area tampilan elemen dipotong sesuai dengan pengaturan tertentu, dan konten di luar area itu akan akan disembunyikan.
Secara teknis, atribut klip didukung oleh IE, tetapi hanya mendukung sintaks bebas koma, seperti
Div.Clipped {
padding: 20px;
Lebar: 400px;
Tinggi: 400px;
Klip: Rect (20px 300px 200px 100px);
Posisi: Absolute;
}
10 .: Fokus
Ini adalah kelas semu lain yang perlu disebutkan di sini, karena semua browser non -e mendukung properti ini. : Fokus kelas semu memungkinkan Anda untuk mendeklarasikan gaya khusus. Ini sangat berguna pada elemen formulir, karena Anda dapat menambahkan perbatasan ke kotak input saat dipilih.