Frontend Web : kode-kode css ini bisa mengatasi masalah crossbrowsermu tanpa bantuan javascript.
Crossbrowser issue adalah masalah yang timbul ketika tampilan website berubah atau tidak seperti yang kita lihat di browser lain. misal template web yang kita buat sudah sangat bagus di browser mozila dan crome tapi muncul masalah di browser safari atau muncul masalah pada safari di leptop macbook dmana ada bagian-bagian template tsb menjadi rusak, hilang, tidak bekerja semesti, dan issue lainnya. Rusaknya template website pada browser-browser tertentu ini biasanya karena css di browser tersebut tidak bekerja semestinya, sedangkan hal yang membuat css tsb tidak bekerja dengan baik biasanya karena struktur html dan css yang kita buat tidak semantic atau tidak sesuai standar , tidak teratur, asal asalan, sangat dipaksakan dan tidak rapi .
Ada bnyak cara untuk mengatasinya, biasanya untuk mengatasi masalah ini kita bisa menggunakan javascript , cara kerja javascript tsb adalah dengan mendeteksi browser yang digunakan oleh user. Setelah js tsb mendeteksi browser si user script tsb akan menambah class tertentu di tag <body> dan kita membuat class-class khusus untuk setiap browser , misal si user menggunakan browser safari untuk mengakses webnya maka kita harus membuat class yang akan dibuat oleh js disafari contohnya dengan nama class "safari" setelah script tersbut mendetksi bahwa situs tsb diakses dengan safari maka otomatis di tag body akan muncul class safari seperti berikut <body class="safari">
Langkah selanjutnya adalah membuat style css khusus untuk safari. misal bagian yang rusak di safari ada dibagian tag header maka kita harus membuat style khusus untuk header dengan menambahkan class induknya tadi yang ada di tag body yaitu class "safari" jadi code yang harus kita tulis di css haruslah diawali dengan klas safari seperti berikut
.safari header { isi style cssnya }
style tsb hanya akan bekerja di browser safari saja karena dibrowser lain style dengan class safari tidak akan terdeteksi.
Kekurangan mengunakan cara javascript seperti ini biasa adalah dari tampilan header yang rusak tadi menjadi bagus akan ada delay sekian detik atau sekian milidetik karena style css safari tadi harus menunggu script js pendeteksi browser tadi ke load oleh browser terlebih dahulu, jika koneksi internet kita sangat cepat delay ini tidak akan terlihat.
Cara paling mudah dan cepat kita cukup menggunaka css yang lain darpada biasany.. yakni code css yang memang di khususkan untuk browser broser terntentu jadi kita tidak perlu menggunakan javascript apapun karena css ini sudah dapat mendeteksi browser yang digunakan tanpa bantuan js dan tanpa delay untul meload js karena memang tidak menggunakan js (javascript)
Dan seperti inilah css khusus browser browser terntentu tsb, dengan properti class misal width 100px dan height 80px..
/*mozilla*/
@-moz-document url-prefix() {
.classnya {width: 100px; height: 80px }
}
/* chrome*/
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
.classnya {width: 100px; height: 80px}
}
/* ie>9 */
@media screen and (min-width:0\0) {
.classnya {width: 100px; height: 80px}
}
/* ie8 */
@media \0screen {
.classnya {width: 100px; height: 80px}
}
/**safari**/
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari 5+ ONLY */
::i-block-chrome, .classnya {
width: 100px; height: 80px
}
}
Sumber Klik disini
Tidak ada komentar