Tuesday, 28 July 2015

Menggunakan Media Query di CSS

Sekarang bahwa Anda telah menjelajahi sintaks dengan penulisan media queries, Ini saatnya melihat pada bagaimana Anda dapat menerapkannya ke halaman. Ketiga metode tersebut adalah :
  1. Memisahkan style sheets untuk setiap media query
  2. Menggunakan @import dalam file CSS utama untuk memuat file CSS secara kondisional.
  3. Menggunakan media queries dalam file CSS.
Style Sheets Terpisah
 Biasanya saat menggunakan screen atau print style sheet di masa lalu, ada sebuah style sheet  untuk masing-masing dengan rule-rule yang diterapkan untuk setiap media type. Demikian pula Anda dapat melakukan ini dengan media queries untuk mengaktifkan atau menonaktifkan style sheet  secara kondisional. Untuk melakukan ini Anda dapat menggunakan media attribute pada link tag yang digunakan untuk memasukkan style sheet. Ini adalah attribut yang sama yang Anda mungkin sebelumya gunakan untuk menambahkan media type rule ke style sheet Anda. Ketika menambahkan rule, cukup drop  nya ke dalam media attribute, seperti ditampilkan dalam contoh ini :

<link rel="stylesheet" media="screen and (min-width: 768px) and (max-width: 1023px)" href="tablet.css" />

Dalam contoh ini  media query  diambil untuk memeriksa apakah pengguna pada small device dan ini cukup ditambahkan ke media attribute.

Kentungan menggunakan Style Sheet terpisah adalah bahwa itu memungkinkan Anda untuk memilah kode secara lebih mudah. Harap diingat bahwa semua  style sheet di media query  di download ke perangkat pengguna dan cukup tidak mengaktifkannya jika tidak dibutuhkan. Ini berarti bahwa dengan menggunakan style sheets yang terpisah, Anda meningkatkan jumlah permintaan HTTP yang dibuat untuk server.

Menggunakan @import
Jika Anda ingin untuk style sheet yang terpisah untuk setiap media query tetapi tidak ingin untuk mendefinisikannya di dalam html, Anda dapat menggunakan sintaks CSS @import dengan media query yang diterapkan. Sintaks @import dapat dipecah menjadi tiga bagian:
  1. Deklarasi @import
  2. URL ke CSS untuk include
  3. Satu atau lebih media queries
Menempatkan ini bersama-sama, akan seperti berikut :

 @import url("tablet.css") screen and (min-width: 768px) and (max-width: 1023px);

 Dalam contoh ini Anda telah mengambil media query untuk mengecheck apakah pengguna pada small device dan cukup menambahkannya sintaks @import yang digunakan untuk memuat  tablet.css .

Sama dengan menggunakan style sheet terpisah me-link-kan ke halaman dalam tag <head> . Style sheet dimuat melalui @import meningkatkan jumlah permintaan HTTP, Namun sebagai tambahan untuk ini, @import dapat mencegah style sheet dari didownload secara bersamaan.

Menggunakan Media Query di CSS Daripada memisahkan CSS kedalam style sheet yang terpisah, Anda dapat mendefinisikan media queries dalam style sheet situs. Ini memungkinkan Anda untuk mendefinisikan style baru dan menerapkan overrides untuk styles  yang ada ketika kondisi true, mengambil keuntungan dari sifat Cascading CSS alami.

Untuk menulis sebuah media query dalam dokumen CSS, Anda dapat menggunakan sintaks @media . Rincian bagaimana  menggunakan sintaks ini adalah :
  1.  Mendeklasikan @media
  2. Satu atau lebih media expressions
 Contoh dari sintaks  @media itu akan menjadi :

@media only screen and (min-width: 768px) and (max-width: 1023px){
/* Your styles. */
}


 Meskipun ini hanya sebuah contoh sederhana, Ini memperlihatkan kepada Anda bagaimana mudahnya memasukkan media query ke dalam file CSS. Tidak seperti baik @import  dan file terpisah ditambahkan ke dalam tag <head>,  Menggunakan media queries dalam dokumen  CSS utama sama untungnya seperti memasukkan media types Anda ke dalam dokumen CSS utama, ini mengurangi permintaan HTTP dan mengurangi blocking.

No comments:

Post a Comment