Monday, 27 July 2015

Berkenalan dengan Media Queries

Media queries membentuk dasar dari desain responsif, memungkinkan Anda untuk mengubah tampilan dan nuansa situs web berdasarkan pada query yang telah Anda tentukan. Sebuah media query dapat dibagi menjadi dua jensi komponen :  media types and media expressions.

Untuk mulai perkenalan ini untuk media queries, mari lihat pada media types, yang diperkenalkan sebagai bagian dari spesifikasi CSS2.1

Media Types
Sebelum ke spesifikasi draft CSS3 yang baru, CSS2.1 memperkenalkan media types, yang memungkinkan para developer untuk menambah media-dependent type style sheets yang ditargetkan untuk perangkat. Ada totalnya sepuluh media types yang berbeda. Tiga diantaranya yang paling sering Anda temui: all, screen, and print.

Jika Anda menjumpai media types di masa lalu, kemungkinan Anda telah melihat mereka digunakan untuk mengaktifkan atau menonaktifkan style sheets berdasar pada jenis perangkat. Sebagi contoh dari ini adalah :

<link rel="stylesheet" type="text/css" href="all.css" media="all" />
<link rel="stylesheet" type="text/css" href="screen.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />


Selain style sheets untuk screen dan printer, ada banyak media types lainnya yang memungkinkan dukungan untuk berbagai perangkat lain :
  1. all : semua perangkat
  2. aural : speech synthesizers
  3. braille : perangkat braille tactile feedbac
  4. embossed : paged braille printers
  5. handheld : small or handheld devices
  6. print: printers
  7. projection: projected presentations, like projectors and projected slides
  8. screen: computer screens
  9. tty: media using a fixed-pitch character grid, like teletypes and terminals
  10. tv: television-type devices
Selain mampu untuk menentukan style sheet yang berbeda untuk  setiap media type, juga memungkinkan untuk menyertakan styles ini pada style sheet Anda dengan menggunakan syntax berikut :

 @media print {
/* print styles go here */
}


Ada beberapa keuntungan dari memasukkan media type queries yang berbeda dengan style sheet utama Anda :
  1. Hal i ni mengurangi jumlah permintaan HTTP , Peningkatan jumlah permintaan HTTP dapat menyebabkan kinerja berkurang untuk memuat situs.
  2. Permisahan style sheets dapat meningkatkan waktu yang halaman diblokir dari render, karena kebanyakan browser akan menunggu sampai semua masing-masing style sheets di download sebelum mreka akan di render dengan konten.
Sebuah percobaan oleh Stoyan Stefanov menemukan bahwa tidak hanya browser men-download  print style sheet sebagian browser juga menunggunya untuk download sebelum di render (meskipun tidak benar-benar perlu untuk ditampilkan pada halaman pengguna). Ini termasuk mobile browser dimana para pengguna tidak mungkin untuk melakukan print. Oleh karena itu, manfaat disini adalah bahwa Anda mengurangi pemblokiran ini dengan mengurangi jumlah style sheets yang harus dimuat oleh browser.

Ketika menerapkan media types, tentukan bahwa browser hanya akan mendeklarasikan satu media type pada waktu tertentu. Ini berarti bahwa jika browser menerapkan handheld media type, maka styles Anda untuk screen media type akan tidak diterapkan meskipun diasumsikan bahwa perangkat handheld  memiliki layar.

Dengan media types, Anda tergantung pada browser untuk menerapkan media type yang Anda harapkan untuk perangkat, Sebuah contoh yang bagus dimana vendor browser  tidak selalu menerapkan media types seperti yang diharapkan dalam kasus browser pada televisi. Meskipun ada beberapa browser yang benar mendukung media type televisi (termasuk opera), beberapa browser televisi tiak benar berlaku baik tv dan screen media type secara bersamaan. Ini berarti bahwa jika Anda telah menargetkan styles tertentu untuk pengalaman desktop Anda menggunakan screen media type, mreka bisa tiba-tiba diterapkan pada televisi, yang akan benar sesuai untuk spesifikasi yang menyatakan :

User agent hanya dapat mendukung satu media type ketika merender sebuah dokumen

Media Queries
Media queries ditambahkan pada CSS3  sebagai extension dari media types dengan tujuan memberikan para pengembang kontrol lebih atas bagaimana situs web mereka ditampilkan pada browser dan perangkat yang berbeda. Idenya adalah bahwa daripada harus membangun dan memelihara versi dari setiap halaman untuk perangkat yang berbeda, malah Anda dapat mengadaptasi sebuah single web site berdasar CSS Anda, pada  attributes, properties, atau karakteristik dari perangkat.

Tidak seperti media types yang hanya memberitahu Anda tipe dari perangkat, media queries menambahkan level logic ke CSS yang mengatakan jika sebuah kondisi terpenuhi, maka style dapat diapplikasikan, jika tidak maka mereka diabaikan. Ini berarti bahwa bukan hanya menargetkan perangkat dengan type, Anda sekarang dapat menargetkan individual characteristics dari perangkat.

Apa yang Bisa Media Query uji?
 Ada berbagai macam type query yang berbeda, yang media query dapat test, Ini dibahas dalam bagian berikut :

width | min-width | max-width
width query memungkinkan Anda untuk menguji terhadap lebar viewport browser, ini memungkinkan Anda untuk target style pada lebar browser tertentu, Tidak hanya Anda mampu untuk menguji terhadap set lebar, tetapi Anda juga dapat menargetkan baik lebar minimum atau lebar maksimal dari vieport browser. Ini berarti Anda dapat menggunakan query ini untuk mencocokkan berbagai lebar perangkat yang berbeda. width media expression merupakah salah satu dari sebagian besar media expressions yang digunakan untuk mengadaptasi situs menjadi responsif.

height | min-height | max-height
height query memungkinkan Anda untuk menguji terhadap tinggi dari vieport browser, Sama dengan width query, Anda dapat menargetkan tinggi dengan tepat, tinggi minimal, atau tinggi maksimal. Meskipun height query digunakan lebih sering daripada width query, height query dapat sangat berguna dimana Anda ingin untuk memastikan konten terntentu viewable (atau not viewable) untuk pengguna Anda ketika alaman pertama kali loading, seperti Anda dapat menggunakannya untuk mengatur tinggi dari konten Anda untuk tinggi dari viewport yang sesuai.

device-width | min-device-width | max-device-width
device-width query memungkinkan Anda untuk menguji terhadap lebar dari perangkat, Anda akan mampu menargetkan apakah lebar yang tepat, lebar minimum, atau lebar maksimum. Perbedaan antara width and device-width adalah bahwa width  berhubungan dengan lebar dari browser, sedangkan device-width berhubungan dengan lebar dari layar perangkat. Meskipun ada beberapa kasus penggunaan untuk penggunaan device-width, masalahnya adalah jika pengguna resize browser pada desktop, situs tidak akan mengubah ukuran agar sesuai. Selain itu jika Anda menggunakan viewport meta tag dan setting width  sama dengan device-width, Anda harus hanya menggunakan width query..

device-height | min-device-height | max-device-height
device-height query memungkinkan Anda untuk menguji terhadap tinggi dari perangkat, Anda mampu untuk menargetkan tinggi secara tepat, tinggi minimum, ataupun tinggi maksimum. Perbedaan antara device-height dan height adalah  bahwa device-height berhubungan dengan tinggi dari layar perangkat, sedangkan height  berkaitan dengan tinggi dari viewport. Perbedaan ini penting pada perangkat dimana Anda akan mampu untuk mengubah ukuran jendela browser.

aspect-ratio | min-aspect-ratio | max-aspect-ratio
aspect-ratio query memungkinkan Anda untuk menguji terhadap aspek rasio dari viewport perangkat. aspect ratio dari perangkat adalah rasio antara panjang sisi dari perangkat dengan pangjang sisi yang lebih pendek dari perangkat. aspect-ratio query dapat sangat berguna ketika Anda ingin menargetkan aset untuk mencocokkan aspek rasio perangkat, termasuk menampilkan video, yang dioptimalkan dengan baik untuk para pengguna perangkat.

device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
device-aspect-ratio query memungkinkan Anda untuk menguji terhadap aspect ratio dari perangkat. Perbedaan antara device-aspect-ratio dengan aspect-ratio adalah bahwa device-aspect-ratio  berhubungan dengan aspect ratio dari layar perangkat. sedangkan aspect-ratio berhubungan dengan aspect ratio dari viewport. Perbedaan ini penting pada perangkat dimana Anda mampu untuk mengubah ukuran jendela browser, seperti aspect-ratio menyesuaikan dari ukuran viewport. sedangkan nilai device-aspect-ratio akan tidak berubah.
color | min-color | max-color
color query  memungkinkan Anda untuk menguji terhadap kemampuan warna dari perangkat berdasar jumlah bit komponen per warna.

color-index | min-color-index | max-color-index
color-index query memungkinkan Anda untuk menguji terhadap jumlah dari warna yang didukung perangkat, dan nilai harus integer dan tidak dapat negatif.

monochrome | min-monochrome | max-monochrome
monochrome query memungkina Anda untuk menguji terhadap bit per piksel pada sebuah perangkat monochrome , yang menggunakan 1 untuk benar dan 0 untuk salah.

resolution | min-resolution | max-resolution
 resolution query memungkinkan Anda untuk menguji terhadap kepadatan piksel dari perangkat. resolution query menerima tiga tipe berbeda dari nilai : dpi (dots per CSS inch), dpcm (dots per CSS centimeter), dan dppx (dots per pixel). Pilihan yang lebih disukai untuk digunakan adalah dppx, yang merupakan tambahan yang lebih baru dengan spesifikasi dari kedua dpcm dan dpi. Keuntungan dari dppx  atas pendahulunya adalah bahwa hal itu berhubungan langsung dengan kerapatan piksel dari layar sehingga hal itu lebih mudah untuk para pengembangan untuk mengerti.

scan
 scan query memungkinkan Anda untuk menguji terhadap proses scanning  dari perangkat. Hal ini sangat spesifik untuk televisi, yang dapat memiliki scanning progressive  atau interlace. Perbedaan antara ini adalah bahwa tampilan progressive menarik semua baris dalam layar sekaligus, dan tampilan interlace menarik semua baris ganjil, kemudian menari semua garis genap, untuk mengelabui mata ke dalam pemikiran mereka melihat semua baris sekaligus.

grid
grid query memungkinkan Anda untuk menguji apakah perangkat adalah grid device atau bitmap device, dengan dua kemungkinan nilai. Jika nilai di set ke 1, query akan memungkinkan CSS jika display perangkat adalah grid based. sebagai contoh menjadi sebuah phone display dengan hanya satu fixed font. Atau Anda dapat mengecheck untuk semua perangkat lainnya dengan mengeset nilai menjadi 0.

orientation
orientation query memungkinkan Anda untuk menguji apakah perangkat landscape atau portrait dan menerapkan CSS Anda dengan tepat. Sebuah kasus untuk penggunaan orientation query dimana Anda mungkin ingin untuk beralih antara single colom dalam portrait  dengan dua colom dalam landscape.
Catatan : types dari queries yang dapat Anda gunakan tergantung pada media type dari perangkat. Alasan bahwa tidak semua media types mendukung semua queries  adalah bahwa hal itu tidak selalu masuk akal, sebagai contoh, jika pengguna menggunakan sebuah perangkat aural , queries yang mengacu ke viewport atau layar seperti width dan device width tidak akan membuat masuk akal.

No comments:

Post a Comment