CSS - Test Kemampuan Perambaan

Pada kesempatan kali ini, kita akan membahas materi yang agak beda dari biasanya, hari ini kita akan bicara tentang kemampuan browser dan apa yang dapat Anda lakukan untuk memastikan bahwa situs anda sudah memiliki tampilan yang konsisten dan sehat, terlepas dari mana orang mengaksesnya. Karena setiap waktu, teknologi semakin maju membuat pengembang browser meningkatkan pembaruan dan perubahan pada browser dimana anda harus ingat bahwa tidak semua orang mencari laman Anda dengan cara yang sama seperti Anda lakukan. Maka anda harus memastikan laman Anda berfungsi untuk khalayak luas dan sehat disetiap browser. Anda harus paham bahwa browser yang berbeda atau versi yang berbeda dari browser yang sama pastinya punya fitur yang berbeda pula. Dalam aplikasi Anda, harus dipastikan jenis browser apa yang dilihat oleh pengguna, dan mungkin menentukan apakah browser mendukung fitur-fitur tertentu yang terdapat pada website anda.

Tentu banya cara aksesibilitas atau cara-cara berbeda untuk mengakses web maka agar hasil website konsisten disetiap browser, anda harus mengujinya. Ya, anda harus benar-benar memastikan tampilan web yang sangat konsisten, karena jika tidak akses kehalaman Anda akan terlihat benar-benar buruk dimata pengunjung. Hasilnya, bias ditebak, mereka tak akan dating lagi ke laman anda. Itulah harga yang akan anda bayarkan sehingga ketika dalam menulis aturan styling, ada yang keliru dalam pembentukan style web anda. Dsini saya sarankan anda harus mempunyai style sheet default, sebagai lembaran default ketika ada kesalah penulisan kode. Anda bisa mengingat kekeliruan kode atau kode yang mana yang membuat struktur web anda nampak buruk ketika dibuka di berbagai browser. Bakka Anda bisa tahu dan memeriksanya dari setiap elemen yang Anda gunakan.

Seperti misalnya kebanyakan desainer web melakukan tes terhadap HTML5, ya bisa saja anda menggunakan program HTML5 Test. Anda bisa melakukan test pada setiap fitur HTML5 yang dijalankan setiap browser. Namun permasalahannya kita tahu tidak semua browser mendukung semua tag HTML5. Bahkan dengan cara test yang sama, tidak semua browser mendukung semua properti CSS3. Ada beberapa properti yang terlihat sangat keren di beberapa browser, tetapi tidak dapat ditampilkan bagus di browser lain. Performa browser sendiri dapat dilihat pada kondisinya saat digunakan. Lihat perilaku browser ketika proses startup, penggunaan memori saat menggunakan browser, waktu saat mematikannya, semuanya akan beda.

Maka kemampuan perambaan (browser) dinilai sangat penting, karena akan terlihat sejauh mana bagusnya deskripsi tampilan web anda di browser pengunjung. Ketika anda menggunakan berbagai property dalam style, tentunya sangat berharap browser akan bekerja dan memberikan hasil sesuai harapan anda. Tapi diberbagai browser, seperti opera, moz, ms mungkin memberikan hasil yang tidak sesuai harapan, maka kuncinya, browser akan memberikan petunjuk pada anda, inilah yang harus dilakukan untuk mendapatkannya tampilan yang diinginkan oleh perancang. Bisa dikatakan kegunaan CSS sangat dibutuhkan disini, untuk membuat laman anda responsive. Lain waktu akan kita bahas tentang CSS Responsive ini.

Jadi ada beberapa CSS property yang dikatakan tidak disupport oleh sebagian browser, misalnya column-count, cara menambahkan kedalam paragraph atau div. Mestinya harus dibuat responsive seperti jika seorang pengunjung mengubah ukuran halaman, paragraph seharusnya berubah. Di CSS anda yang disebut border-radius, gunanya menambahkan lengkungan pada tiap sudut elemen, sehingga kita tidak perlu lagi menggunakan gambar lengkungan untuk membuat box dengan lengkungan disudutnya.

Contohnya:

  • border-top-left-radius: 20px;
  • border-top-right-radius: 20px;
  • border-bottom-left-radius: 20px;
  • border-bottom-right-radius: 20px;

Jadi sebenarnya tidak ada cara bagi Anda untuk mengetahui sebenarnya properti mana didukung dan mana yang tidak oleh sebagian browser, dan disinilah pentingnya anda pelajari Browser Capabilities atau kemampuan peramban. Namun ada satu sumber situs berbahasa inggris yang bisa anda gunakan sebeai referensi, untuk mengetahui property mana yang didukung oleh sebagian browser mana tidak. Anda bisa mengunjungi caniuse.com. Ini akan membantu pengembangan website anda.

Simplenya seperti ini, saat mengembangkan laman web, anda mengujinya lewat browser di Chrome dan di Safari. Namun hasil menunjukkan ada ruang kecil di mana font mungkin tidak sama persis, atau beberapa spasi mungkin tidak sama persis. Jadi jika saya ingin membereskan perbedaan itu, saya harus memastikan bahwa halaman terlihat persis sama,dengan menambahkan property yang sekiranya bisa menangani masalah tersebut. Silahkan merujuk ke website tadi, anda bisa saja mendapatkan property yang mendukung keduanya. Jadi itulah idenya, kenapa materi ini perlu dibahas. Bisa saja anda sudah sangat jauh melakukan desain pada web, tapi akan membuat sangat stress ketika tampilan diberbagai browser nampak jauh dari harapan. Ketika Anda menjadi lebih berpengalaman dan mungkin Anda ingin mencoba hal yang berbeda tentu saja akan membuat anda semakin ahli dalam merancang web.