Karena dunia pengembangan web yang besar dan buruk terus berkembang dan berubah dengan sangat cepat, terutama dalam hal kompatibilitas dengan beragam browser (secara harfiah sekitar 7-8 di mana rata-rata semua pengguna menggunakan!), sangat penting bagi situs web yang dikelola oleh sumber apa pun untuk terlihat sangat mirip (jika tidak SAMA) terlepas dari browser apa yang Anda pilih. Standar web modern datang dengan janji kompatibilitas lintas browser yang lebih baik, tetapi, ada beberapa perbedaan format header yang akan menyebabkan perbedaan beberapa CSS (Cascading Style Sheets) pada beberapa browser. Untuk mencapai desain yang terpadu dan mulus bagi pengguna di platform apa pun dan untuk menguasai kompatibilitas browser, pengembang perlu menggunakan beberapa teknik & strategi.
Mengetahui Mengapa Kompatibilitas Peramban Sangat Penting
Kompatibilitas peramban berarti bahwa sebuah situs web sesuai dengan cara peramban merender kontennya dan memenuhi spesifikasi yang terkait dengan peramban, perangkat, atau ukuran layar. Browser web utama yang berbeda - Google Chrome, Mozilla Firefox, Microsot Edge, Apple Safari dan Opera - hadir dengan mesin rendering yang unik (Webkit, Blink, Gecko, dll) untuk menginterpretasikan aturan lebar css yang sedikit berbeda. Perbedaan ini dapat menyebabkan perubahan pada ukuran teks, posisi elemen, atau jeda pada tata letak. Namun jika Anda ingin mendapatkan pengalaman pengguna yang terbaik, segala sesuatu yang berhubungan dengan pengguna harus konsisten di semua platform termasuk salinan situs web.
Membangun di atas sebuah Fondasi: HTML dan CSS terstruktur
Langkah pertama untuk menulis CSS yang kompatibel dengan peramban adalah memvalidasi HTML Anda dan menandai standar web yang benar. Kode yang sesuai dengan standar akan mengurangi kemungkinan masalah peramban. Layanan seperti Layanan Validasi Markup W3C memungkinkan untuk memverifikasi kepatuhan kode HTML dan CSS dengan rekomendasi industri. Masalah dengan perlakuan yang berbeda untuk setiap peramban dapat dikurangi, bahkan dihilangkan dengan membersihkan dan mengatur kode dasar.
Sumber: puskomedia.id
Penyetelan Ulang dan Normalisasi CSS
Setiap browser memiliki gaya default sendiri untuk elemen HTML, dan mereka tidak 100% sama satu sama lain. Dalam demo ini, kita akan membahas gaya default dasar seperti tampilan judul, margin, padding, dan lain-lain; yang mana gaya default dapat membuat semua bagian menjadi tidak konsisten. Para pengembang biasanya menggunakan pengaturan ulang atau normalisasi CSS untuk mengatasi hal ini.
- Penyetelan Ulang CSS: Reset CSS atau bahkan lembar istirahat Eric Meyer adalah salah satu cara untuk menghapus gaya browser default dan pengembang sekarang harus mulai menata dari dasar untuk setiap elemet. Hal ini dilakukan untuk menjaga kanvas tetap kosong sehingga memiliki hasil yang sama di browser yang berbeda.
- Normalisasi CSS: Normalisasi css adalah sebuah css yang memiliki lebih banyak nuansa yang dapat Anda gunakan. Sebaliknya, normalisasi secara selektif hanya mengubah gaya yang perlu dinormalisasi atau diatur ulang untuk mengakomodasi perbedaan browser (seperti padding pada daftar), dan mempertahankan sebagian besar gaya default.
Pengaturan ulang CSS, atau normalizer membantu Anda menjaga konsistensi gaya yang diinginkan oleh setiap perancang web sejak awal.
Menargetkan Browser Tertentu Dengan Awalan Vendor
Tidak semua properti CSS, terutama yang baru di sini, akan bekerja dengan sempurna di berbagai browser. Menanggapi hal tersebut, para pengembang mengandalkan vendor prefixes agar dapat secara praktis mengimplementasikan CSS yang bersifat eksperimental atau proto-CSS di browser. Vendor prefixes (Kode pendek yang ditambahkan sebelum properti CSS untuk menargetkan mesin browser tertentu)
Berikut ini adalah awalan yang paling umum:
- -webkit- (untuk Chrome, Safari, dan Opera versi terbaru)
- -moz- (untuk Mozilla Firefox)
- -ms- (untuk Internet Explorer dan Edge)
- -o- (untuk Opera versi lama)
Sebagai contoh, jika Anda ingin memastikan dukungan lintas peramban untuk transisi CSS, kode Anda mungkin terlihat seperti ini:
.example {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
Graceful Degradation vs Progressive Enhancement.
- Untuk Degradasi yang Anggun: di mana Anda membangun situs dengan fitur lengkap menggunakan properti dan teknologi CSS terbaru, tetapi kembali dan pastikan hasil kerja Anda berfungsi pada peramban yang kurang canggih meskipun itu berarti kehilangan beberapa fitur canggih. Idenya adalah bahwa situs web Anda akan tetap berfungsi, meskipun tampilannya tidak akan sama persis di setiap peramban.
- Peningkatan Progresif: Sebuah teknik di mana pengembang memulai dengan versi dasar situs web yang berfungsi di semua peramban, kemudian secara selektif menambahkan fitur dan gaya yang lebih canggih. Itu berarti situs ini akan selalu berfungsi, meskipun mungkin terlihat sedikit miring.
Ketika berbicara tentang Pengujian (= Anda mengembangkan beberapa sumber) vs Debugging (yang dikodekan dalam bahasa browser/interpreter, meskipun pada satu titik mungkin ramah terhadap manusia).
Salah satu alasan utamanya adalah agar CSS Anda dapat bekerja dengan baik di berbagai browser dan perangkat ketika Anda mengujinya di banyak tempat. Pengembang dapat menggunakan alat seperti BrowserStack dan CrossBrowserTesting (dan juga LambdaTest) untuk menguji tampilan elemen web di berbagai browser/platform sesuai kebutuhan, tanpa harus membeli banyak perangkat. Sebagian besar peramban memiliki alat pengembang yang dapat Anda gunakan untuk memeriksa dan men-debug CSS secara langsung.
Penutup: Tempat duduk di Meja
Mengatasi masalah kompatibilitas lintas peramban merupakan tantangan yang terus berlanjut, dan pengembang harus selalu mengikuti perubahan standar web dan juga pembaruan peramban terbaru. Menulis kode yang bersih dan valid - ini sudah membuat semuanya jauh lebih baikPengaturan ulang / normalisasi CSSAwalan dari vendorPeningkatan degradasi / peningkatan progresifIni seharusnya memungkinkan pengembang untuk mengirimkan pengalaman yang konsisten di seluruh browser. Selain itu, pengujian yang berkelanjutan dan tetap mengikuti perkembangan CSS kontemporer juga diperlukan untuk menjaga kompatibilitas jangka panjang. Dengan mengikuti prinsip-prinsip ini, pengembang dapat mengurangi jumlah masalah lintas browser dan membangun desain web yang lebih ramah pengguna yang dapat diakses oleh sebanyak mungkin orang.
Kembali ke>> Menguasai CSS: Menata Situs Web Anda Seperti Seorang Profesional