Atribut <style> media

Tanda HTML <style>

Definisi dan penggunaan

media Atribut digunakan untuk menentukan media atau perangkat yang diarahkan (optimalisir) gaya CSS.

Atribut ini digunakan untuk menentukan gaya yang berlaku untuk perangkat tertentu (seperti iPhone), media suara, atau media cetak.

Petunjuk:Atribut ini dapat menerima beberapa nilai.

Contoh

Contoh 1

Aturan gaya yang digunakan untuk cetak:

<style media="print">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}
</style>

Coba sendiri

Contoh 2

Penggunaan fitur width dari atribut media untuk membedakan dua kelompok gaya:

<style media="screen AND (max-width:500px)" type="text/css">
a {
  background-color: grey;
  color: white;
  padding: 15px;
}
</style>
<style media="screen AND (min-width:500px)" type="text/css">
a {
  color: red;
  font-weight: 400;
}
</style>

Coba sendiri

Keterangan:Penggunaan gaya pertama digunakan saat lebar jendela peramban kurang dari 500 piksel, sedangkan gaya kedua digunakan saat lebar jendela lebih besar dari 500 piksel.

Syntax

<style media="value>

Operator yang mungkin

Operator Deskripsi
and Operator aturan AND.
not Operator aturan NOT.
, Operator aturan OR.

Kondisi penggunaan gaya dapat dirancang dengan sangat rinci. Yang pertama yang harus dijelaskan adalah tipe perangkat yang ditujuh. Tabel di bawah ini menyimpulkan semua nilai yang memenuhi aturan:

Perangkat

Perangkat Deskripsi
all Default. cocok untuk semua perangkat.
aural Peramal suara.
braille Perangkat umpan balik braille.
handheld Perangkat tangkap (layar kecil, bandwidth terbatas).
projection Proyektor.
print Mode pratinjau cetak/halaman cetak.
screen Layar komputer.
tty Teleprinter yang menggunakan grid karakter jarak tetap dan media yang mirip.
tv Perangkat kategori TV (resolusi rendah, kemampuan gerakan yang terbatas).

Peramban bertanggung jawab untuk memerangkatkan perangkat. Beberapa tipe perangkat (seperti screen dan print) memiliki interpretasi yang cukup serupa di berbagai peramban, tetapi beberapa perangkat lain (seperti handheld) dapat berbeda-beda. Oleh karena itu, memastikan bahwa interpretasi peramban yang ditujuh untuk perangkat tertentu sama dengan yang anda inginkan sangat penting.

Karakteristik

Karakteristik Deskripsi
width

Menentukan lebar area layar tuju.

Dapat digunakan prefiks "min-" dan "max-".

Contoh: media="screen and (min-width:500px)"
height

Menentukan tinggi area layar tuju.

Dapat digunakan prefiks "min-" dan "max-".

Contoh: media="screen and (max-height:700px)"
device-width

Menentukan lebar layar tuju/ kertas.

Dapat digunakan prefiks "min-" dan "max-".

Contoh: media="screen and (device-width:500px)"
device-height

Menentukan tinggi layar tuju/ kertas.

Dapat digunakan prefiks "min-" dan "max-".

Contoh: media="screen and (device-height:500px)"
orientation

Menentukan arah layar tuju/ kertas.

Nilai yang didukung: portrait atau landscape.

Fitur ini tidak memiliki penentu.

Contoh: media="all and (orientation: landscape)"
aspect-ratio

Menentukan rasio lebar/ tinggi area layar tuju.

Dapat digunakan prefiks "min-" dan "max-".

Contoh: media="screen and (aspect-ratio:16/9)"
device-aspect-ratio

Menentukan rasio lebar/ tinggi peralatan layar tuju/ kertas.

Dapat digunakan prefiks "min-" dan "max-".

Contoh: media="screen and (aspect-ratio:16/9)"
color

Menentukan bit per warna di layar tuju.

Dapat digunakan prefiks "min-" dan "max-".

Contoh: media="screen and (color:3)"
color-index

Menentukan jumlah warna yang dapat ditangani layar tuju.

Dapat digunakan prefiks "min-" dan "max-".

Contoh: media="screen and (min-color-index:256)"
monochrome

Menentukan bit per piksel dalam buffer warna monokrom.

Dapat digunakan prefiks "min-" dan "max-".

Contoh: media="screen and (monochrome:2)"
resolution

Menentukan kepadatan piksel layar tuju/ kertas (dpi atau dpcm).

Dapat digunakan prefiks "min-" dan "max-".

Contoh: media="print and (resolution:300dpi)"
scan

Menentukan mode skaning televisi.

Nilai yang didukung adalah progressive dan interlace.

Fitur ini tidak memiliki penentu.

Contoh: media="tv and (scan:interlace)"
grid

Tentukan perangkat output adalah grid atau bitmap.

Perangkat grid menggunakan grid tetap untuk menampilkan konten, seperti terminal berdasarkan karakter dan ponsel yang menampilkan baris tunggal.

Nilai yang didukung adalah 0 dan 1 (1 untuk perangkat grid).

Fitur ini tidak memiliki penentu.

Contoh: media="handheld and (grid:1)"

Fitur seperti width biasanya digunakan dengan penentu min dan max. Tidak menggunakan penentu ini, gaya penggunaannya dapat bergantung pada ukuran jendela yang sangat tepat juga, tetapi penentu ini akan membuat kondisi menjadi lebih fleksibel.

Tabel di atas mencantumkan dan memperkenalkan berbagai fitur yang tersedia. Keunggulan ini dapat digunakan dengan min- dan max- sebagai batas, bukan nilai yang pasti.

Dengan konteks yang serupa seperti perangkat yang ditentukan, fitur ini juga dijawab oleh peramban. Kondisi khusus tentang fitur yang dikenali peramban serta pengakuan fitur kapan ada dan dapat digunakan sangat beragam. Jika untuk menerapkan gaya berdasarkan fitur ini, silakan lakukan pengujian yang mendalam dan siapkan gaya cadangan untuk saat fitur yang diharapkan tidak tersedia.

Dukungan Peramban

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Dukungan Dukungan Dukungan Dukungan Dukungan

Tanda HTML <style>