Peretasan CSS adalah solusi yang digunakan ketika CSS standar tidak kompatibel dengan efek tampilan berbagai browser. Sampai produsen browser mencapai kesepakatan tentang cara mengurai CSS, kami hanya dapat menggunakan metode ini untuk menyelesaikan tugas tersebut. Anda mungkin dapat mencari banyak CSS Hacks di Internet, tetapi Anda mungkin tidak memahami semua yang saya rilis hari ini, karena ini adalah CSS Hacks yang hanya menargetkan satu browser.
Untuk menunjukkan kepada Anda bahwa peretasan CSS ini berhasil, saya membuat enam tag P baru dan memberi setiap tag P sebuah id unik. Ini akan menunjukkan kepada Anda cara kerja Peretasan CSS.
| <p id="opera">Saya dari Opera 7.2 - 9.5</p> <p id="safari">Akulah Safari yang ajaib</p> <p id="firefox">Saya dari Firefox</p> <p id="firefox12">Saya senior FF Firefox 1 - 2 </p> <p id="ie7">Saya 囧IE7</p> <p id="ie6">Saya IE 6 yang rusak</p> |
Lalu saya biarkan tag P ini tidak ditampilkan secara default
| <gaya tipe="teks/css"> badan p{tampilan: tidak ada;} </gaya> |
Gunakan komentar bersyarat IE CSS untuk membedakan browser IE
Cara termudah untuk membedakan browser IE adalah dengan menggunakan komentar kondisionalnya. Microsoft telah menciptakan sintaksis yang kuat yang memungkinkan kita mencapai fungsi ini. Saya tidak ingin memperkenalkan komentar bersyarat IE secara detail. Saya rasa Anda dapat mencari puluhan ribu istilah pencarian di mesin pencari. Saya hanya memerlukan dua ini di sini:
| <!--[jika IE 7]> <gaya tipe="teks/css"> </gaya> <![endif]--> <!--[jika IE 6]> <gaya tipe="teks/css"> </gaya> <![endif]--> |
Gunakan Hacks parser CSS untuk membedakan IE
Meskipun komentar kondisional IE sangat sederhana dan mudah digunakan, jika Anda ingin meletakkan semua CSS dalam satu file, maka Anda harus menggunakan metode lain. Perhatikan bahwa Peretasan IE 7 di sini hanya akan berfungsi di IE7, karena IE6 tidak mengetahui pemilih > sama sekali. Pada saat yang sama, Anda harus memperhatikan bahwa pemilih > juga tidak valid untuk browser lain.
| /* YAITU 7 */ html > badan #ie7 {*tampilan: blok;} /* YAITU 6 */ tubuh #ie6 {_display: blok;} |
Hack CSS untuk membedakan Firefox
Yang pertama menggunakan body:empty untuk membedakan antara Firefox 1 dan 2. Peretasan kedua menggunakan ekstensi kepemilikan untuk semua browser Firefox - moz. -moz hanya berlaku untuk Firefox. Anda tidak perlu khawatir tentang dampak browser lain saat menggunakan Hack ini.
| /* Firefox 1 - 2 */ badan:kosong #firefox12 {tampilan: blok;} /* Firefox */ @-moz-awalan url dokumen() {#firefox { tampilan: blok }} |
Peretasan CSS membedakan Safari
Peretasan CSS Safari terlihat sangat mirip dengan peretasan Firefox. Peretasan ini menggunakan ekstensi milik browser Safari - webkit dan hanya efektif untuk browser Safari.
| /* Safari */ @layar media dan (-webkit-min-device-pixel-ratio:0) {#safari { tampilan: blok }} |
Peretasan CSS membedakan Opera
| /* Opera */ @media semua dan (-webkit-min-device-pixel-ratio:10000), tidak semua dan (-webkit-min-device-pixel-ratio:0) {kepala~tubuh #opera { tampilan: blok }} |
Kemudian, gabungkan semuanya dan jadilah
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <htmllang="id"> <kepala> <meta http-equiv="Jenis Konten" content="teks/html; charset=utf-8"> <title>Peretasan Peramban CSS</title> <gaya tipe="teks/css"> tubuh hal { tampilan: tidak ada; } /* Opera */ html:anak pertama #opera { tampilan: blok; } /* YAITU 7 */ html > badan #ie7 { *tampilan: blok; } /* YAITU 6 */ tubuh #ie6 { _tampilan: blok; } /* Firefox 1 - 2 */ badan:kosong #firefox12 { tampilan: blok; } /* Firefox */ @-moz-awalan url dokumen() { #firefox { tampilan: blok; } } /* Safari */ @layar media dan (-webkit-min-device-pixel-ratio:0) { #safari { tampilan: blok } } /* Opera */ @media semua dan (-webkit-min-device-pixel-ratio:10000), tidak semua dan (-webkit-min-device-pixel-ratio:0) { kepala~tubuh #opera { tampilan: blok } } </gaya> </kepala> <tubuh> <p id="opera">Saya dari Opera 7.2 - 9.5</p> <p id="safari">Akulah Safari yang ajaib</p> <p id="firefox">Saya dari Firefox</p> <p id="firefox12">Saya senior FF Firefox 1 - 2 </p> <p id="ie7">Saya 囧IE7</p> <p id="ie6">Saya IE 6 yang rusak</p></body> </html> |
Meskipun CSS Hack bagus dan kompatibel dengan berbagai browser, ia tidak dapat lolos verifikasi W3C, jadi Anda harus mempertimbangkan apakah perlu menggunakannya.