Monday, 27 July 2015

Sintaks dari Media Query

Sekarang Anda telah terbiasa dengan media types dan  media queries dan penggunaannya, mari menjelajahi metodologi untuk penulisannya :

Sebuah  media query terdiri dari setidaknya media type dan tambahan satu atau lebih media expressions, yang mengembalikan true atau false. Untuk CSS yang akan diterapkan, media type harus sesuai dengan perangkat semua halaman dimuat dan semua  media expressions harus return true. media queries dapat menjadi spesifik atau ambigu seperti yang Anda inginkan, yang memungkinkan Anda untuk memastikan CSS Anda di aplikasikan secara tepat dengan cara yang Anda harapkan. Cara terbaik adalah dengan melihat pada sintaks atau penulisan media queries untuk menyelam ke dalam beberapa contoh.

Contoh pertama lihat pada bagaimana Anda dapat menambah CSS ke perangkat dengan small viewport; khususnya sebuah mobile phone. Jika Anda ingin untuk hanya memungkinkan CSS Anda pada sebuah small viewport, Anda membutuhkan untuk menambahkan sebuah rule yang mendefinisikan sebuah upper limit  untuk lebar dari viewport  CSS yang akan diterapkannya. Dalam kasus ini, Anda akan menambahkan max-width rule dan mengeset nilainya ke 767px. Contoh sederhana ini akan menjadi  :



Dalam contoh ini,  media type di set untuk all, yang berarti bahwa itu di aplikasikan untuk semua media types. Kemudian ada media expression dengan max-width di set 767px, karena Anda ingin menargetkan ke perangkat extra small (misalnya mobile phones) yang dalam ini mendefinisikan kurang dari 767px. Sebab disini bahwa banyak perangkat yang mungkin di klasifikasikan sebagai small device, seperti iPad, mempunyai lebar minimum 768px. Logika di balik media query ini mengatakan bahwa untuk semua perangkat, jika lebar dari viewport  kurang dari atau sama dengan 767px, maka CSS styles akan diaplikasikan.

Jika Anda hanya ingin mengaplikasikan CSS untuk screen devices, Anda dapat mengubah media type yang digunakan di media query untuk screen, perubahan ini tercermin dalam contoh yang telah diperbarui berikut :


Logic untuk  media query ini mirip dengan contoh sebelumnya, namun perbedaan utama adalah bahwa Anda dapat menubah media type ke screen. Logikanya, adalah bahwa untuk semua perangkat yang ber type screen, jika lebar viewport kurang dari atau sama dengan 767px, maka CSS diaktifkan.

The “Not” Logical Operator
Jika Anda ingin untuk menerapkan CSS untuk semua media types selain daripada screen, Anda dapat mengambil keuntungan dari not logical operator. not logical operator dalam media queries menceritakan browser untuk membalikkan hasil dari expression. Dengan contoh screen, Anda hanya cukup menambahkan not logical operator ke awal dari expression.


Jadi untuk contoh ini, Logikanya adalah bahwa jika browser tidak perangkat screen  dengan lebar kurang dari atau sama dengan 767px, maka style sheet akan diaktifkan.

The “Only” Logical Operator
only logical operator digunakan untuk mencegah browser yang lebih tua yang tidak mendukung media expressions dari mencoba untuk memproses media query. Tanpa  only operator, browser yang lebih tua akan membaca media type, bagaimanapun tidak akan memahami media expressions; Oleh karena itu, media expressions diabaikan style yang akan diterapkan.



Logika untuk media query dari dalam contoh ini adalah persis sama seperti sebelumnya, Namun sekarang Anda menambahkan only logical operator, yang akan mencegah styles  wrapped dalam media query ini dari yang diterapkan secara tidak benar di browser lama.

Using Multiple Expressions
Salah satu hal yang membuat benar-benar powerfull adalah kemampuan menggunakan multiple media expressions  secara berasama. Apakah ini berarti jika Anda ingin untuk menargetkan small devices, seperti tablet misalnya, tanpa mempengaruhi extra small devices, Anda dapat melakukannya juga, menggunakan dua media expressions daripada satu.

Untuk merangkai expressions, Anda perlu untuk menggunakan keyword  diantara media expressions. Contoh ini menggunakan min-width dari 768px  dan max-width dari 1023px  untuk menentukan apakah perangkat adalah  small device:


Logikanya untuk media query ini adalah bahwa jika media type adalah screen, viewport sama atau lebih besar daripada 768px, dan lebih kecil atau sama dengan 1023px, maka style sheet akan diaktifkan.

Chaining Media Queries
 Sejauh ini contoh hanya menggunakan  individual media queries, namun oleh chaining media queries dan memungkinkan CSS untuk diterapkan dalam beberapa situasi, Anda membuat keuntungan dari CSS yang diterapkan ketika salah satu query return true. Setiap media query dapat memiliki media type  sendiri dan media expressions sendiri, yang berarti bahwa media queries yang terpisah dapat menargetkan media features, types, and states yang berbeda. Untuk menggunakan multiple media queries cukup memisahkannya dengan menambahkan koma diantara setiap query dan kemudian masing-masing queries  akan dinilai secara individual untuk melihat jika mereka true, seperti yang ditampilkan dalam contoh ini:



Dalam contoh ini , ada dua media queries, media query pertama akan menjadi true jika lebar dari browser sama atau lebih besar daripada 768px, dan kurang dari atau sama dengan 1023px.  media query kedua akan true jika orientasi dari perangkat adalah portrait. Sekarang jika salah satu dari dua media queries ini true, maka styles  akan diaktifkan.

Contoh umum dimana Anda mungkin ingin untuk menggunakan multiple media queries untuk menargetkan fitur yang diterapkan secara berbeda dalam browser yang berbeda. Sebagai contoh dari ini ketika Anda menggunakan min-resolution expression, seperti yang ditampilkan dalam kode berikut :

@media only screen and ( -webkit-min-device-pixel-ratio: 2 ),
only screen and ( -o-min-device-pixel-ratio: 2/1 ),
only screen and ( min--moz-device-pixel-ratio: 2 ),
only screen and ( min-device-pixel-ratio: 2 ),
only screen and ( min-resolution: 192dpi ),
only screen and ( min-resolution: 2dppx ) {
/* High resolution styles here */
}


 Pada hari-hari awal media queries CSS3, ada kebutuhan untuk menerapkan sebuah cara untuk menargetkan kerapatan tinggi piksel perangkat, yang menyebabkan WebKit  menerapkan device-pixel-ratio expression  dibawah prefix vendor mereka. Spesifikasi telah matang, penerapan  yang benar adalah dengan menggunakan sebuah  “resolution” expression;  Namun, untuk mendukung browser lama ini, Anda perlu untuk menggunakan multiple media queries.

No comments:

Post a Comment