CSS3 Media Query

Dulu, testing yang dilakukan untuk menguji tampilan website : cross browser. Saat ini testing lain yang harus dilakukan : cross device. Karena media untuk mengakses website sudah bukan hanya komputer/laptop, tetapi semakin banyak jenis ragamnya, mulai dari feature phone, smart phone, tablet, netbook, laptop, dan desktop komputer. Masing-masing datang dengan spesifikasi luas layar dan kemampuan yang berbeda-beda.

Muncul metode untuk mengantisipasi hal tersebut. Misal seperti pembuatan website dalam 2 versi, desktop version dan mobile version. Hal ini adalah hal paling ideal, karena selain tampilan web disesuaikan dengan lingkungan dimana website tersebut dimuat, resource yang akan dimuat oleh website pun sudah disesaikan dengan kemampuan masing-masing lingkungan. Gambar berukuran besar hanya dimuat via desktop, sedangkan untuk versi mobile pengunjung mendapatkan versi gambar yang sudah terkopres dan berukuran lebih kecil.

Teknologi terus berkembang. Saat ini ada satu metode yang menjadi trend baru ketika mendesain website, untuk mengatasi keragaman browser maupun keragaman device. Metode tersebut berbasis pada fitur baru CSS3 yang bernama media query. Dulu cikal bakal media query sudah pernah digunakan untuk membedakan file CSS mana yang harus dimuat ketika file HTML akan ditampilkan di media layar(screen) atau cetak(print).  Media Query versi CSS3 ini memungkinan file HTML dapat memuat file-file CSS yang berbeda berdasarkan lebar layar. Ide ini pertama kali dikemukakan oleh Ethan Marcotte di artikel ini

Silahkan cek mediaqueri.es, untuk melihat website-website yang sudah menerapkan fitur media query. Silahkan resize halaman browser, maka tampilan tiap-tiap website yang dimuat di mediaqueri.es akan, menyesuaikan dengan lebar layar. Media query ini bukan tidak memiliki kekurangan, karena ketika kita menggunakan media query, resource website yang dimuat tetap sama dimanapun kita memuatnya. Atau cek screenshot website brad sawicki berikut :

Atau lebih mudahnya, silahkan resize ukuran browser Anda ketika membaca artikel ini. Maka layout tampilan website akan menyesuakan dengan lebar layar. Menarik bukan?