From de6a111b5e7ec37c4965111a580217d0b1fd2736 Mon Sep 17 00:00:00 2001 From: Florian Merz <me@fiji-flo.de> Date: Thu, 11 Feb 2021 14:47:40 +0100 Subject: unslug id: move --- .../media_queries/using_media_queries/index.html | 630 +++++++++++++++++++++ files/id/web/css/reference/index.html | 185 ++++++ files/id/web/css/referensi/index.html | 185 ------ 3 files changed, 815 insertions(+), 185 deletions(-) create mode 100644 files/id/web/css/media_queries/using_media_queries/index.html create mode 100644 files/id/web/css/reference/index.html delete mode 100644 files/id/web/css/referensi/index.html (limited to 'files/id/web/css') diff --git a/files/id/web/css/media_queries/using_media_queries/index.html b/files/id/web/css/media_queries/using_media_queries/index.html new file mode 100644 index 0000000000..3fe883c5f6 --- /dev/null +++ b/files/id/web/css/media_queries/using_media_queries/index.html @@ -0,0 +1,630 @@ +--- +title: Media query CSS +slug: Web/Guide/CSS/Media_queries +translation_of: Web/CSS/Media_Queries/Using_media_queries +--- +<p><span class="seoSummary">M<strong>edia query</strong> terdiri dari jenis media dan paling sedikit satu ekspresi yang membatasi lingkup style sheets dengan menggunakan fitur media, seperti lebar, tinggi, dan warna. Media query, ditambahkan di <a href="/en-US/docs/CSS/CSS3" title="/en-US/docs/CSS/CSS3">CSS3</a>, memungkinkan tampilan konten disesuaikan dengan alat penampil tertentu tanpa harus mengubah konten itu sendiri.</span></p> + +<h2 id="Sintaks">Sintaks</h2> + +<p>Media query terdiri dari jenis media (<a class="internal" href="/en-US/docs/CSS/@media" title="/en-US/docs/CSS/@media">media type</a>) dan dapat, sesuai dengan spesifikasi CSS3, mengandung satu atau lebih ekspresi, diekspresikan sebagai fitur media, baik benar (true) atau salah (false). Hasil query adalah benar jika jenis media yang disebutkan dalam media query cocok dengan jenis alat yang digunakan untuk menampilkan dokumen <strong>dan</strong> semua ekspresi di dalam media query adalah benar.</p> + +<pre class="brush: html"><code class="brush: html"><!-- Media query CSS pada elemen link --> +</code><link rel="stylesheet" media="(max-width: 800px)" href="example.css" /> + +<code class="brush: html"><!-- Media query CSS di dalam style sheet --> +<style> +@media (max-width: 600px) { + .facet_sidebar { + display: none; + } +} +</style></code></pre> + +<p>Ketika sebuah media query adalah benar, style sheet atau aturan style yang bersangkutan diterapkan, sesuai dengan aturan cascading normal. Style sheet dengan media query yang menempel pada tag <code><link></code> <a href="http://scottjehl.github.com/CSS-Download-Tests/" title="http://scottjehl.github.com/CSS-Download-Tests/">masih akan diunduh</a> bahkan jika media query tersebut adalah salah (false) (namun tidak akan diterapkan).</p> + +<p>Kecuali jika Anda menggunakan operator <code>not</code> atau <code>only</code>, jenis media adalah opsional dan jenis <code>all</code><span style="line-height: 1.572;"> akan diterapkan</span><span style="font-family: courier new,andale mono,monospace; line-height: normal;">.</span></p> + +<h3 id="Operator_logika">Operator logika</h3> + +<p>Anda dapat merancang media query kompleks menggunakan operator logika, termasuk <code>not</code>, <code>and</code>, dan <code>only</code>. Operator <code>and</code> digunakan untuk menggabungkan banyak fitur media (<a href="#Media_features" title="#Media_features">media features</a>) ke dalam satu media query tunggal, setiap fitur terkait harus benar (true) agar query benar (true). Operator <code>not</code> digunakan untuk menegasikan keseluruhan media query. Operator <code>only</code> digunakan untuk menerapkan suatu style hanya jika keseluruhan query cocok, berguna untuk mencegah browser lama menerapkan style-style tertentu. Jika Anda menggunakan operator-operator <code>not</code> atau <code>only</code>, Anda <em>harus</em> menyebutkan jenis media secara eksplisit.</p> + +<p>Anda juga dapat menggabungkan banyak media query dalam sebuah daftar terpisah koma; jika ada media query di dalam daftar yang benar (true), keseluruhan pernyataan media adalah benar (true). Hal ini setara dengan operator <code>or</code>.</p> + +<h4 id="and">and</h4> + +<p>Kata kunci <code>and</code> digunakan untuk menggabungkan banyak fitur media menjadi satu, seperti menggabungkan fitur media dengan jenis media. Media query dasar, sebuah fitur media tunggal dengan jenis media <code>all</code> secara implisit, dapat terlihat seperti ini:</p> + +<pre class="brush: css">@media (min-width: 700px) { ... }</pre> + +<p>Namun, jika, Anda menginginkan hal ini diterapkan hanya untuk tampilan lanskap, Anda dapat menggunakan operator <code>and</code> untuk menggabungkan fitur-fitur media tersebut.</p> + +<pre class="brush: css">@media (min-width: 700px) and (orientation: landscape) { ... }</pre> + +<p>Sekarang media query di atas hanya akan benar jika lebar viewport adalah 700px atau lebih dan dalam tampilan lanskap. Namun, jika, Anda hanya menginginkan hal ini untuk diterapkan jika jenis media tampilan adalah TV, Anda dapat menggabungkan fitur-fitur ini dengan jenis media menggunakan operator <code>and</code>.</p> + +<pre class="brush: css">@media tv and (min-width: 700px) and (orientation: landscape) { ... }</pre> + +<p>Sekarang, media query di atas hanya akan diterapkan jika jenis media adalah TV, lebar viewport adalah 700px atau lebih, dan tampilan adalah lanskap.</p> + +<h4 id="daftar_terpisah_koma">daftar terpisah koma</h4> + +<p>Daftar terpisah koma adalah seperti operator logika <code>or</code> ketika digunakan dalam media query. Ketika menggunakan daftar media query terpisah koma, jika ada media query yang benar (true), style or style sheet akan diterapkan. Setiap media query di dalam daftar terpisah koma diperlakukan sebagai query individual, dan setiap operator yang diterapkan pada satu media query tidak mempengaruhi yang lainnya. Ini berarti daftar media query terpisah koma dapat ditujukan untuk fitur, jenis, dan kondisi media yang berbeda.</p> + +<p>Sebagai contoh, seandainya Anda ingin menerapkan seperangkat style jika alat penampil memiliki lebar minimum 700px atau alat genggam dalam moda lanskap, Anda dapat menulis sebagai berikut:</p> + +<pre class="brush: css">@media (min-width: 700px), handheld and (orientation: landscape) { ... }</pre> + +<p>Pada contoh di atas, jika saya menggunakan perangkat <code>screen</code> dengan lebar viewport 800px, pernyataan media akan benar (true) karena bagian pertama, yang diinterpetasikan sebagai <code>@media all and (min-width: 700px)</code> akan berlaku pada perangkat saya dan oleh karena itu benar (true), terlepas dari fakta bahwa perangkat <code>screen</code> saya akan gagal dalam pengecekan jenis media <code>handheld</code> di media query kedua. Demikian pula, jika saya menggunakan perangkat genggam <code>handheld</code> dalam moda lanskap dengan lebar viewport 500px, walaupun media query pertama gagal karena lebar viewport tidak sesuai, media query kedua akan berhasil dan oleh karena itu pernyataan media akan menghasilkan nilai benar (true).</p> + +<h4 id="not">not</h4> + +<p>Kata kunci <code>not</code> berlaku pada keseluruhan media query dan memberikan nilai benar (true) jika media query akan sebaliknya memberikan nilai salah (false) (seperti fitur query <code>monochrome</code> pada warna tampilan atau lebar layar 600px dengan <code>min-width: 700px</code>). Sebuah <code>not</code> hanya akan menegasikan media query yang ditetapkan dan bukan setiap media query jika ada dalam daftar media query terpisah koma. Kata kunci <code>not</code> tidak dapat digunakan untuk menegasikan sebuah fitur query individual, hanya untuk media query secara keseluruhan. Sebagai contoh<span style="line-height: 1.572;">, </span><code style="font-size: 14px;">not</code><span style="line-height: 1.572;"> dievaluasi paling akhir dalam query berikut ini:</span></p> + +<pre class="brush: css" style="font-size: 14px;">@media not all and (monochrome) { ... } +</pre> + +<p>Ini berarti bahwa query tersebut dievaluasi seperti ini:</p> + +<pre class="brush: css" style="font-size: 14px;">@media not (all and (monochrome)) { ... } +</pre> + +<p>... bukan seperti ini:</p> + +<pre class="brush: css" style="font-size: 14px;">@media (not all) and (monochrome) { ... }</pre> + +<p>Sebagai contoh lain, lihat media query berikut ini:</p> + +<pre class="brush: css" style="font-size: 14px;">@media not screen and (color), print and (color) +</pre> + +<p>Yang dievaluasi seperti ini:</p> + +<pre class="brush: css" style="font-size: 14px;">@media (not (screen and (color))), print and (color)</pre> + +<h4 id="only">only</h4> + +<p><span style="line-height: 21px;">Kata kunci </span><code style="font-size: 14px;">only</code><span style="line-height: 21px;"> mencegah browser lama yang tidak mendukung media query dengan fitur media menerapkan style yang disediakan:</span></p> + +<pre class="brush: html"><link rel="stylesheet" media="only screen and (color)" href="example.css" /> +</pre> + +<h3 id="Pseudo-BNF_(untuk_Anda_yang_gemar_hal_seperti_ini)">Pseudo-BNF (untuk Anda yang gemar hal seperti ini)</h3> + +<pre>media_query_list: <media_query> [, <media_query> ]* +media_query: [[only | not]? <media_type> [ and <expression> ]*] + | <expression> [ and <expression> ]* +expression: ( <media_feature> [: <value>]? ) +media_type: all | aural | braille | handheld | print | + projection | screen | tty | tv | embossed +media_feature: width | min-width | max-width + | height | min-height | max-height + | device-width | min-device-width | max-device-width + | device-height | min-device-height | max-device-height + | aspect-ratio | min-aspect-ratio | max-aspect-ratio + | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio + | color | min-color | max-color + | color-index | min-color-index | max-color-index + | monochrome | min-monochrome | max-monochrome + | resolution | min-resolution | max-resolution + | scan | grid</pre> + +<p>Media query adalah case insensitive. Media query yang melibatkan jenis media yang tidak diketahui selalu salah (false).</p> + +<div class="note"><strong>Catatan:</strong> Tanda kurung wajib digunakan di sekitar ekspresi; jika tidak digunakan akan mengakibatkan kesalahan.</div> + +<h2 id="Fitur_media">Fitur media</h2> + +<p>Sebagian besar fitur media dapat diawali dengan "min-" atau "max-" untuk mengekspresikan batasan "lebih dari atau sama dengan" atau "kurang dari atau sama dengan". Hal ini menghindari penggunaan simbol "<" dan ">", yang mungkin akan menyebabkan konflik dengan HTML dan XML. Jika Anda menggunakan fitur media tanpa nilai tertentu, ekspresi tersebut akan bernilai benar (true) jika nilai fitur adalah bukan-nol.</p> + +<div class="note"><strong>Catatan:</strong> Jika sebuah fitur media tidak sesuai untuk alat di mana browser dijalankan, ekspresi yang melibatkan fitur media tersebut adalah selalu salah (false). Sebagai contoh, meng-query rasio aspek dari suatu alat aural selalu bernilai salah (false).</div> + +<h3 id="color">color</h3> + +<p><strong>Nilai:</strong> {{cssxref("<color>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Menerima prefiks min/max prefixes:</strong> ya</p> + +<p>Menunjukkan jumlah per komponen warna dari alat penampil. Jika alat tersebut bukan alat yang memiliki warna, nilai ini adalah nol.</p> + +<div class="note"><strong>Catatan:</strong> Jika komponen warna memiliki jumlah bit yang berbeda per komponen warna, angka yang paling kecillah yang digunakan. Sebagai contoh, jika sebuat layar menggunakan 5 bit untuk biru dan merah dan 6 bit untuk hijau, maka alat tersebut dianggap menggunakan 5 bit per komponen warna. Jika suat alat menggunakan warna terindeks, jumlah bit minimum per komponen warna dalam tabel warna yang digunakan.</div> + +<h4 id="Contoh">Contoh</h4> + +<p>Untuk menerapkan style sheet pada semua alat berwarna:</p> + +<pre class="brush: css">@media all and (color) { ... } +</pre> + +<p>Untuk menerapkan style sheet pada alat yang memiliki paling sedikit 4 bit per komponen warna:</p> + +<pre class="brush: css">@media all and (min-color: 4) { ... } +</pre> + +<h3 id="color-index">color-index</h3> + +<p><strong>Nila:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Menerima prefiks min/max:</strong> ya</p> + +<p>Menunjukkan jumlah entri dalam tabel pencarian warna untuk alat penampil.</p> + +<h4 id="Contoh_2">Contoh</h4> + +<p>Untuk menunjukkan bahwa suatu style sheet harus diterapkan pada semua alat yang menggunakan warna terindeks, Anda dapat melakukan:</p> + +<pre class="brush: css">@media all and (color-index) { ... } +</pre> + +<p>Untuk menerapkan style sheet pada alat berwarna terindeks dengan paling sedikit 256 warna:</p> + +<pre class="brush: html"><link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" /> +</pre> + +<h3 id="aspect-ratio">aspect-ratio</h3> + +<p><strong>Nilai:</strong> {{cssxref("<ratio>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br> + <strong>Menerima prefiks min/max:</strong> ya</p> + +<p>Menggambarkan rasio aspek daerah tampilan dari alat penampil. Nilai ini terdiri dari dua integer positif dipisahkan oleh karakter garis miring ("/"). Ini menunjukkan rasio piksel horisontal (angka pertama) terhadap piksel vertikal (angka kedua).</p> + +<h4 id="Contoh_3">Contoh</h4> + +<p>Berikut ini memilih style sheet khusus untuk digunakan ketika daerah tampilan paling tidak selebar tingginya.</p> + +<pre class="brush: css">@media screen and (min-aspect-ratio: 1/1) { ... }</pre> + +<p>Ini memilih style ketika rasio aspek adalah 1:1 atau lebih. Dengan kata lain, style-style ini hanya akan diterapkan ketika area penampil adalah bujursangkar atau lanskap.</p> + +<h3 id="device-aspect-ratio">device-aspect-ratio</h3> + +<p><strong>Nilai:</strong> {{cssxref("<ratio>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br> + <strong>Menerima prefiks min/max:</strong> ya</p> + +<p>Menggambarkan rasio aspek dari alat penampil. Nilai ini terdiri dari dua integer positif dipisahkan oleh karakter garis miring ("/"). Hal ini menunjukkan rasio piksel horisontal (yang pertama) terhadap piksel vertikal (yang kedua).</p> + +<h4 id="Contoh_4">Contoh</h4> + +<p>Berikut ini memilih style sheet khusus yang digunakan untuk tampilan layar lebar.</p> + +<pre class="brush: css">@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }</pre> + +<p>Ini memilih style ketika rasio aspek adalah 16:9 atau 16:10.</p> + +<h3 id="device-height">device-height</h3> + +<p><strong>Nilai:</strong> {{cssxref("<length>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br> + <strong>Menerima prefiks min/max:</strong> ya</p> + +<p>Menggambarkan tinggi alat penampil (berarti keseluruhan layar atau halaman, bukan hanya area render, seperti jendela dokumen).</p> + +<h4 id="Contoh_5">Contoh</h4> + +<p>Untuk menerapkan style sheet pada sebuah dokument ketika ditampilkan pada layar yang memiliki panjang kurang dari 800 piksel, Anda dapat menggunakan ini:</p> + +<pre class="brush: html"><link rel="stylesheet" media="screen and (max-device-height: 799px)" /> +</pre> + +<h3 id="device-width">device-width</h3> + +<p><strong>Nilai:</strong> {{cssxref("<length>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br> + <strong>Menerima prefiks min/max:</strong> ya</p> + +<p>Menggambarkan lebar alat penampil (berarti keseluruhan layar atau halaman, bukan hanya area render, seperti jendela dokumen).</p> + +<h4 id="Contoh_6">Contoh</h4> + +<p>Untuk menerapkan style sheet pada sebuah dokumen ketika ditampilkan pada layar yang memiliki lebar kurang dari 800 piksel wide, Anda dapat menggunakan ini:</p> + +<pre class="brush: html" style="font-size: 14px;"><link rel="stylesheet" media="screen and (max-device-width: 799px)" /></pre> + +<h3 id="grid">grid</h3> + +<p><strong>Nilai:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> all<br> + <strong>Menerima prefiks min/max:</strong> tidak</p> + +<p>Menentukan apakah alat penampil adalah sebuah alat grid atau bitmap. Jika alat tersebut berbasis grid (seperti terminal TTY atau layar telepon dengan hanya satu font), nilai adalah 1. Jika tidak, nilai adalah nol.</p> + +<h4 id="Contoh_7">Contoh</h4> + +<p>Untuk menerapkan suatu style pada alat genggam dengan layar selebar 15-karakter atau kurang:</p> + +<pre class="brush: css">@media handheld and (grid) and (max-width: 15em) { ... } +</pre> + +<div class="note"><strong>Catatan:</strong> Unit "em" memiliki arti khusus untuk alat grid; karena lebar pasti "em" tidak dapat ditentukan, 1em diasumsikan selebar satu sel grid secara horisontal, dan tingginya satu sell secara vertikal.</div> + +<h3 id="height">height</h3> + +<p><strong>Nilai:</strong> {{cssxref("<length>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br> + <strong>Menerima prefiks min/max:</strong> ya</p> + +<p>Fitur media <code>height</code> (tinggi) menggambarkan tinggi permukaan rendering alat penampil (seperti tinggi viewport atau kotak halaman pada sebuah printer).</p> + +<div class="note"><strong>Catatan:</strong> Ketika user mengubah ukuran window, Firefox mengganti style sheets dengan yang paling sesuai berdasarkan media query menggunakan fitur media <code>width</code> dan <code>height</code>.</div> + +<h3 id="monochrome">monochrome</h3> + +<p><strong>Nilai:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Menerima prefiks min/max:</strong> ya</p> + +<p>Menunjukkan jumlah bit per piksel pada alat monokrom (keabuan). Jika alat tersebut bukan monokrom, nilai alat tersebut adalah 0.</p> + +<h4 id="Contoh_8">Contoh</h4> + +<p>Untuk menerapkan style sheet pada semua alat monokrom:</p> + +<pre class="brush: css">@media all and (monochrome) { ... } +</pre> + +<p>Untuk menerapkan style sheet pada alat monokrom dengan paling sedikit 8 bit per piksel:</p> + +<pre class="brush: css">@media all and (min-monochrome: 8) { ... } +</pre> + +<h3 id="orientation">orientation</h3> + +<p><strong>Nilai:</strong> <code>landscape</code> | <code>portrait</code><br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Menerima prefiks min/max:</strong> tidak</p> + +<p>Menunjukkan apakah viewport dalam mode lanskap (tampilan lebih lebar daripada tingginya) atau potret (tampilan lebih tinggi daripada lebarnya).</p> + +<h4 id="Contoh_9">Contoh</h4> + +<p>Untuk menerapkan style sheet hanya pada orientasi potret:</p> + +<pre class="brush: css">@media all and (orientation: portrait) { ... }</pre> + +<h3 id="resolution">resolution</h3> + +<p><strong>Nilai:</strong> {{cssxref("<resolution>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Bitmap", "bitmap")}}<br> + <strong>Menerima prefiks min/max:</strong> ya</p> + +<p>Menunjukkan resolusi (kepadatan piksel) alat penampil. Resolution mungkin disebutkan dalam dots per inch (dpi - titik per inci) atau dots per centimeter (dpcm - titik per sentimeter).</p> + +<h4 id="Contoh_10">Contoh</h4> + +<p>Untuk menerapkan style sheet pada alat dengan resolusi paling sedikit 300 dpi:</p> + +<pre class="brush: css">@media print and (min-resolution: 300dpi) { ... } +</pre> + +<p>Untuk mengganti sintaks lama <span style="font-family: courier new,andale mono,monospace; line-height: normal;">(min-device-pixel-ratio: 2)</span>:</p> + +<pre class="brush: css">@media screen and (min-resolution: 2dppx) { ... }</pre> + +<h3 id="scan">scan</h3> + +<p><strong>Nilai:</strong> <code>progressive</code> | <code>interlace</code><br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/TV")}}<br> + <strong>Menerima prefiks min/max:</strong> tidak</p> + +<p>Menggambarkan proses pemindaian alat penampil televisi.</p> + +<h4 id="Contoh_11">Contoh</h4> + +<p>Untuk menerapkan style sheet hanya pada televisi pemindai progresif:</p> + +<pre class="brush: css">@media tv and (scan: progressive) { ... } +</pre> + +<h3 id="width">width</h3> + +<p><strong>Nilai:</strong> {{cssxref("<length>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br> + <strong>Menerima prefiks min/max:</strong> ya</p> + +<p>Fitur media <code>width</code> menggambarkan lebar permukaan rendering alat penampil (seperti lebar jendela dokumen, atau lebar kotak halaman sebuah printer).</p> + +<div class="note"><strong>Catatan:</strong> Ketika user mengubah ukuran jendela, Firefox mengganti style sheets yang sesuai berdasarkan media query menggunakan fitur media <code>width</code> dan <code>height</code>.</div> + +<h4 id="Contoh_12">Contoh</h4> + +<p>Jika Anda ingin menentukan sebuah style sheet untuk perangkat genggam, atau perangkat layar dengan lebar lebih besar dari 20em, Anda dapat menggunakan query ini:</p> + +<pre class="brush: css">@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... } +</pre> + +<p>Query Media ini menentukan style sheet yang berlaku untuk media cetak lebih lebar dari 8,5 inci:</p> + +<pre class="brush: html"><link rel="stylesheet" media="print and (min-width: 8.5in)" + href="http://foo.com/mystyle.css" /> +</pre> + +<p>Query ini menentukan style sheet yang digunakan saat lebar viewport adalah antara 500 dan 800 pixel:</p> + +<pre class="brush: css">@media screen and (min-width: 500px) and (max-width: 800px) { ... } +</pre> + +<h2 id="Fitur_Media_Spesifik_Mozilla">Fitur Media Spesifik Mozilla</h2> + +<p>Mozilla menawarkan beberapa fitur media spesifik Gecko. Beberapa di antaranya mungkin diusulkan sebagai fitur media resmi.</p> + +<p>{{ h3_gecko_minversion("-moz-images-in-menus", "1.9.2") }}</p> + +<p><strong>Nilai:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Meneriman prefiks min/max:</strong> tidak</p> + +<p>Jika perangkat memungkinkan gambar untuk muncul dalam menu, ini adalah 1; jika tidak, nilainya adalah 0. Ini berhubungan dengan <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a> CSS {{ cssxref(":-moz-system-metric(images-in-menus)") }}.</p> + +<p>{{ h3_gecko_minversion("-moz-mac-graphite-theme", "1.9.2") }}</p> + +<p><strong>Nilai:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Menerima prefiks min/max:</strong> no</p> + +<p>Jika user telah mengkonfigurasi perangkat mereka untuk menggunakan tampilan "Graphite" pada Mac OS X, ini adalah 1. Jika pengguna menggunakan tampilan biru standar, atau bukan pada Mac OS X, ini adalah 0.</p> + +<p>Ini berkaitan dengan <a href="/en-US/docs/CSS/Pseudo-classes" style="line-height: 1.5;" title="Pseudo-classes">pseudo-class</a><span style="line-height: 1.5;"> CSS </span><span style="line-height: 1.5;">{{ cssxref(":-moz-system-metric(mac-graphite-theme)") }}</span><span style="line-height: 1.5;">.</span></p> + +<p>{{ h3_gecko_minversion("-moz-maemo-classic", "1.9.2") }}</p> + +<p><strong>Nilai:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Menerima prefiks min/max:</strong> tidak</p> + +<p>Jika user menggunakan Maemo dengan tema asli, ini adalah 1; jika menggunakan tema Fremantle yang lebih baru, ini adalah 0.</p> + +<p>Ini berkaitan dengan <a href="/en-US/docs/CSS/Pseudo-classes" style="line-height: 1.5;" title="Pseudo-classes">pseudo-class</a><span style="line-height: 1.5;"> CSS </span><span style="line-height: 1.5;">{{ cssxref(":-moz-system-metric(maemo-classic)") }}</span><span style="line-height: 1.5;">.</span></p> + +<p>{{ h3_gecko_minversion("-moz-device-pixel-ratio", "2.0") }} {{ deprecated_inline("gecko&16") }}</p> + +<p><strong>Nilai:</strong> {{cssxref("<number>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Menerima prefiks min/max:</strong> ya</p> + +<p>Memberikan jumlah piksel perangkat per piksel CSS.</p> + +<div class="geckoVersionNote"> +<p><strong>Jangan gunakan fitur ini. </strong></p> + +<p>Tapi gunakanlah fitur <code>resolution</code> dengan <span style="line-height: 1.5;">unit </span><code style="font-style: normal; line-height: 1.5;">dppx</code><span style="line-height: 1.5;">.</span></p> + +<p><br> + <code>-moz-device-pixel-ratio</code> mungkin digunakan sebagai kompatibilitas dengan Firefox lebih tua daripada 16 dan <code>-webkit-device-pixel-ratio</code> dengan browser-browser berbasis <span style="line-height: 1.5;">WebKit</span><span style="line-height: 1.5;"> yang tidak mendukung </span><code style="font-style: normal; line-height: 1.5;">dppx</code><span style="line-height: 1.5;">.</span></p> + +<p>Contoh:</p> + +<pre>@media (-webkit-min-device-pixel-ratio: 2), /* Browsers berbasis Webkit */ + (min--moz-device-pixel-ratio: 2), /* Browsers yang lebih tua (sebelum Firefox 16) */ + (min-resolution: 2dppx), /* Cara standar */ + (min-resolution: 192dpi) /* fallback <span style="font-size: 1rem;">dppx </span><span style="font-size: 1rem;">*/ </span></pre> + +<p>Lihat <a href="http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/" title="http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/">artikel CSSWG</a> ini untuk praktek kompatibilitas yang baik terkait <code>resolution</code> dan <code>dppx</code>.</p> +</div> + +<div class="note"><strong>Catatan</strong>: Fitur media ini juga diimplementasikan oleh Webkit sebagai <span style="font-family: courier new;">-webkit-device-pixel-ratio</span>. Prefiks min dan max seperti diimplementasikan oleh Gecko dinamakan <span style="font-family: courier new;">min--moz-device-pixel-ratio</span> dan <span style="font-family: courier new;">max--moz-device-pixel-ratio</span>; tetapi prefiks yang sama seperti yang diimplementasikan oleh Webkit dinamakan <span style="font-family: courier new;">-webkit-min-device-pixel-ratio</span> dan <span style="font-family: courier new;">-webkit-max-device-pixel-ratio</span>.</div> + +<p>{{ h3_gecko_minversion("-moz-os-version", "25.0") }}</p> + +<p><strong>Nilai:</strong> <code>windows-xp</code> | <code>windows-vista</code> | <code>windows-win7</code> | <code>windows-win8</code><br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Menerima prefiks min/max:</strong> tidak</p> + +<p>Menunjukkan versi sistem operasi mana yang sedang digunakan saat ini. Saat ini hanya diimplementasikan pada Windows. Nilai-nilai yang mungkin adalah:</p> + +<ul> + <li><code>windows-xp</code></li> + <li><code>windows-vista</code></li> + <li><code>windows-win7</code></li> + <li><code>windows-win8</code></li> +</ul> + +<p>Ini disediakan untuk aplikasi skins dan kode chrome lainnya agar dapat beradaptasi untuk bekerja dengan baik dengan versi sistem operasi saat ini.</p> + +<p>{{ h3_gecko_minversion("-moz-scrollbar-end-backward", "1.9.2") }}</p> + +<p><strong>Nilai:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Menerima prefiks min/max:</strong> no</p> + +<p>Jika user interface perangkat menampilkan tombol panah kembali di akhir scrollbar, ini adalah 1. Jika tidak, bernilai 0.</p> + +<p>Ini berkaitan dengan <a href="/en-US/docs/CSS/Pseudo-classes" style="line-height: 1.5;" title="Pseudo-classes">pseudo-class</a><span style="line-height: 1.5;"> CSS </span><span style="line-height: 1.5;">{{ cssxref(":-moz-system-metric(scrollbar-end-backward)") }}.</span></p> + +<p>{{ h3_gecko_minversion("-moz-scrollbar-end-forward", "1.9.2") }}</p> + +<p><strong>Nilai:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Menerima prefiks min/max:</strong> tidak</p> + +<p>If the device's user interface displays a forward arrow button at the end of scrollbars, this is 1. Otherwise it's 0.</p> + +<p>This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-end-forward)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> + +<p>{{ h3_gecko_minversion("-moz-scrollbar-start-backward", "1.9.2") }}</p> + +<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>If the device's user interface displays a backward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.</p> + +<p>This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-start-backward)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> + +<p>{{ h3_gecko_minversion("-moz-scrollbar-start-forward", "1.9.2") }}</p> + +<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>If the device's user interface displays a forward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.</p> + +<p>This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-start-forward)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> + +<p>{{ h3_gecko_minversion("-moz-scrollbar-thumb-proportional", "1.9.2") }}</p> + +<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>If the device's user interface displays the thumb of scrollbars proportionally (that is, sized based on the percentage of the document that is visible), this is 1. Otherwise it's 0.</p> + +<p>This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-thumb-proportional)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> + +<p>{{ h3_gecko_minversion("-moz-touch-enabled", "1.9.2") }}</p> + +<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>If the device supports touch events (for a touch screen), this is 1. Otherwise it's 0.</p> + +<p>This corresponds to the {{ cssxref(":-moz-system-metric(touch-enabled)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> + +<h4 id="Example">Example</h4> + +<p>You might use this to render your buttons slightly larger, for example, if the user is on a touch-screen device, to make them more finger-friendly.</p> + +<p>{{ h3_gecko_minversion("-moz-windows-classic", "1.9.2") }}</p> + +<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>If the user is using Windows unthemed (in classic mode instead of using uxtheme), this is 1; otherwise it's 0.</p> + +<p>This corresponds to the {{ cssxref(":-moz-system-metric(windows-classic)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> + +<p>{{ h3_gecko_minversion("-moz-windows-compositor", "1.9.2") }}</p> + +<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>If the user is using Windows with the DWM compositor, this is 1; otherwise it's 0.</p> + +<p>This corresponds to the {{ cssxref(":-moz-system-metric(windows-compositor)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> + +<p>{{ h3_gecko_minversion("-moz-windows-default-theme", "1.9.2") }}</p> + +<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>If the user is currently using one of the default Windows themes (Luna, Royale, Zune, or Aero (including Vista Basic, Vista Advanced, and Aero Glass), this is 1. Otherwise it's 0.</p> + +<p>This corresponds to the {{ cssxref(":-moz-system-metric(windows-default-theme)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> + +<p>{{ h3_gecko_minversion("-moz-windows-glass", "21.0") }}</p> + +<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>If the user is using Windows Glass theme, this is 1; otherwise it's 0. Note that this only exists for Windows 7 and earlier.</p> + +<p>{{ h3_gecko_minversion("-moz-windows-theme", "2.0") }}</p> + +<p><strong>Value:</strong> <code>aero</code> | <code>luna-blue</code> | <code>luna-olive</code> | <code>luna-silver</code> | <code>royale</code> | <code>generic</code> | <code>zune</code><br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>Indicates which Windows theme is currently being used. Only available on Windows. Possible values are:</p> + +<ul> + <li><code>aero</code></li> + <li><code>luna-blue</code></li> + <li><code>luna-olive</code></li> + <li><code>luna-silver</code></li> + <li><code>royale</code></li> + <li><code>generic</code></li> + <li><code>zune</code></li> +</ul> + +<p>This is provided for application skins and other chrome code to be able to adapt to work well with the current Windows theme.</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatChrome("21") }}</td> + <td>{{ CompatGeckoDesktop("1.9.1") }}</td> + <td>{{ CompatIE("9.0") }}</td> + <td>{{ CompatOpera("9") }}</td> + <td>{{ CompatSafari("4") }}</td> + </tr> + <tr> + <td>grid</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }} (<code>grid</code> media type is not supported)</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>resolution</td> + <td>{{ CompatChrome("29") }}</td> + <td>{{ CompatGeckoDesktop("1.9.1") }} supports {{cssxref("<integer>")}} values;<br> + {{ CompatGeckoDesktop("8.0") }} supports {{cssxref("<number>")}} values, as per the spec.</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>scan</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }} (<code>tv</code> media type is not supported)</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/css3-mediaqueries/" title="http://www.w3.org/TR/css3-mediaqueries/">CSS 3 media query specification</a></li> + <li><a class="internal" href="/en-US/docs/CSS/@media" title="En/CSS/@media">Media types</a></li> + <li><a href="/en-US/docs/CSS/Using_media_queries_from_code" title="en/CSS/Using media queries from code">Using media queries from code</a></li> + <li><a href="http://i-skool.co.uk/mobile-development/web-design-for-mobiles-and-tablets-viewport-sizes/">List of mobile and tablet viewport sizes with pixel ratios and physical sizes</a></li> + <li><a href="http://davidwalsh.name/animate-media-queries">CSS Animations Between Media Queries</a> by David Walsh</li> +</ul> diff --git a/files/id/web/css/reference/index.html b/files/id/web/css/reference/index.html new file mode 100644 index 0000000000..7609391ca5 --- /dev/null +++ b/files/id/web/css/reference/index.html @@ -0,0 +1,185 @@ +--- +title: Referensi CSS +slug: Web/CSS/referensi +translation_of: Web/CSS/Reference +--- +<div>{{CSSRef}}</div> + +<p>Gunakan <strong>referensi CSS </strong>ini untuk menelusuri indeks alfabetikal dari semua properti <a href="/id/docs/web/CSS">CSS</a> umum, <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-classes</a>, <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elements</a>, <a href="/en-US/docs/Web/CSS/CSS_Types">data types</a>, dan <a href="/en-US/docs/Web/CSS/At-rule">at-rules</a>. Anda juga dapat menulusuri <a href="/en-US/docs/Web/CSS#concepts">konsep dasar</a> and a list of <a href="/en-US/docs/Web/CSS/Reference#selectors">selektor berdasarkan jenis</a>. Juga ada <a href="#DOM-CSS_CSSOM">referensi DOM-CSS / CSSOM</a>.</p> + +<h2 id="Basic_rule_syntax">Basic rule syntax</h2> + +<h3 id="Style_rule_syntax">Style rule syntax</h3> + +<pre class="syntaxbox notranslate"><var>style-rule</var> <strong>::=</strong> + <var>selectors-list</var> <strong>{</strong> + <var>properties-list</var> + <strong>}</strong> +</pre> + +<p>... where :</p> + +<pre class="syntaxbox notranslate"><var>selectors-list</var> <strong>::=</strong> + <var>selector</var>[<strong>:</strong><var>pseudo-class</var>] [<strong>::</strong><var>pseudo-element</var>] + [<strong>,</strong> <var>selectors-list</var>] + +<var>properties-list</var> <strong>::=</strong> + [<var>property</var> <strong>:</strong> <var>value</var>] [<strong>;</strong> <var>properties-list</var>] +</pre> + +<p>See the index of <a href="#Selectors"><em>selectors</em></a>, <a href="#Pseudo"><em>pseudo-classes</em></a>, and <em><a href="#Pseudo">pseudo-elements</a></em> below. The syntax for each specified <em>value</em> depends on the data type defined for each specified <em>property</em>.</p> + +<h4 id="Style_rule_examples">Style rule examples</h4> + +<pre class="brush: css notranslate">strong { + color: red; +} + +div.menu-bar li:hover > ul { + display: block; +} +</pre> + +<p>For a beginner-level introduction to the syntax of selectors, see our <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">guide on CSS Selectors</a>. Be aware that any <a href="/en-US/docs/Web/CSS/syntax">syntax</a> error in a rule definition invalidates the entire rule. Invalid rules are ignored by the browser. Note that CSS rule definitions are entirely (ASCII) <a href="https://www.w3.org/TR/css-syntax-3/#intro">text-based</a>, whereas DOM-CSS / CSSOM (the rule management system) is <a href="https://www.w3.org/TR/cssom/#introduction">object-based</a>.</p> + +<h3 id="At-rule_syntax">At-rule syntax</h3> + +<p>As the structure of at-rules varies widely, please see <a href="/en-US/docs/Web/CSS/At-rule">At-rule</a> to find the syntax of the specific one you want.</p> + +<h2 id="Keyword_index">Keyword index</h2> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> The property names in this index do <strong>not</strong> include the <a href="/en-US/docs/Web/CSS/CSS_Properties_Reference">JavaScript names</a> where they differ from the CSS standard names.</p> +</div> + +<div>{{CSS_Ref}}</div> + +<h2 id="Selectors">Selectors</h2> + +<p>The following are the various <a href="/en-US/docs/Web/CSS/CSS_Selectors">selectors</a>, which allow styles to be conditional based on various features of elements within the DOM.</p> + +<h3 id="Basic_selectors">Basic selectors</h3> + +<p><strong>Basic selectors</strong> are fundamental selectors; these are the most basic selectors that are frequently combined to create other, more complex selectors.</p> + +<ul> + <li><a href="/en-US/docs/Web/CSS/Universal_selectors">Universal selector</a> <code>*</code>, <code>ns|*</code>, <code>*|*</code>, <code>|*</code></li> + <li><a href="/en-US/docs/Web/CSS/Type_selectors">Type selector</a> <code><var>elementname</var></code></li> + <li><a href="/en-US/docs/Web/CSS/Class_selectors">Class selector</a> <code>.<var>classname</var></code></li> + <li><a href="/en-US/docs/Web/CSS/ID_selectors">ID selector</a> <code>#<var>idname</var></code></li> + <li><a href="/en-US/docs/Web/CSS/Attribute_selectors">Attribute selector</a> <code>[<var>attr</var>=<var>value</var>]</code></li> +</ul> + +<h3 id="Grouping_selectors">Grouping selectors</h3> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/Selector_list">Selector list</a> <code><var>A</var>, <var>B</var></code></dt> + <dd>Specifies that both <code><var>A</var></code> and <code><var>B</var></code> elements are selected. This is a grouping method to select several matching elements.</dd> +</dl> + +<h3 id="Combinators">Combinators</h3> + +<p>Combinators are selectors that establish a relationship between two or more simple selectors, such as "<code><var>A</var></code> is a child of <code><var>B</var></code>" or "<code><var>A</var></code> is adjacent to <code><var>B</var></code>."</p> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/Adjacent_sibling_combinator">Adjacent sibling combinator</a> <code><var>A</var> + <var>B</var></code></dt> + <dd>Specifies that the elements selected by both <code><var>A</var></code> and <code><var>B</var></code> have the same parent and that the element selected by <code><var>B</var></code> immediately follows the element selected by <code><var>A</var></code> horizontally.</dd> + <dt><a href="/en-US/docs/Web/CSS/General_sibling_combinator">General sibling combinator</a> <code><var>A</var> ~ <var>B</var></code></dt> + <dd>Specifies that the elements selected by both <code><var>A</var></code> and <code><var>B</var></code> share the same parent and that the element selected by <code><var>A</var></code> comes before—but not necessarily immediately before—the element selected by <code><var>B</var></code>.</dd> + <dt><a href="/en-US/docs/Web/CSS/Child_combinator">Child combinator</a> <code><var>A</var> > <var>B</var></code></dt> + <dd>Specifies that the element selected by <code><var>B</var></code> is the direct child of the element selected by <code><var>A</var></code>.</dd> + <dt><a href="/en-US/docs/Web/CSS/Descendant_combinator">Descendant combinator</a> <code><var>A</var> <var>B</var></code></dt> + <dd>Specifies that the element selected by <code><var>B</var></code> is a descendant of the element selected by <code><var>A</var></code>, but is not necessarily a direct child.</dd> + <dt><a href="/en-US/docs/Web/CSS/Column_combinator">Column combinator</a> <code><var>A</var> || <var>B</var></code> {{Experimental_Inline}}</dt> + <dd>Specifies that the element selected by <code><var>B</var></code> is located within the table column specified by <code><var>A</var></code>. Elements which span multiple columns are considered to be a member of all of those columns.</dd> +</dl> + +<h3 id="Pseudo">Pseudo</h3> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/Pseudo-classes">Pseudo classes</a> <code>:</code></dt> + <dd>Specifies a special state of the selected element(s).</dd> + <dt><a href="/en-US/docs/Web/CSS/Pseudo-elements">Pseudo elements</a> <code>::</code></dt> + <dd>Represents entities that are not included in HTML.</dd> +</dl> + +<div class="blockIndicator note"> +<p><strong>See also:</strong> <a href="https://www.w3.org/TR/selectors/#overview">Selectors in the Selectors Level 4 specification</a>.</p> +</div> + +<h2 id="Concepts">Concepts</h2> + +<h3 id="Syntax_and_semantics">Syntax and semantics</h3> + +<ul> + <li><a href="/en-US/docs/Web/CSS/Syntax">CSS syntax</a></li> + <li><a href="/en-US/docs/Web/CSS/At-rule">At-rules</a></li> + <li><a href="/en-US/docs/Web/CSS/Cascade">Cascade</a></li> + <li><a href="/en-US/docs/Web/CSS/Comments">Comments</a></li> + <li><a href="/en-US/docs/Glossary/Descriptor_(CSS)">Descriptor</a></li> + <li><a href="/en-US/docs/Web/CSS/inheritance">Inheritance</a></li> + <li><a href="/en-US/docs/Web/CSS/Shorthand_properties">Shorthand properties</a></li> + <li><a href="/en-US/docs/Web/CSS/Specificity">Specificity</a></li> + <li><a href="/en-US/docs/Web/CSS/Value_definition_syntax">Value definition syntax</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Values_and_Units">CSS unit and value types</a></li> +</ul> + +<h3 id="Values">Values</h3> + +<ul> + <li><a href="/en-US/docs/Web/CSS/actual_value">Actual value</a></li> + <li><a href="/en-US/docs/Web/CSS/computed_value">Computed value</a></li> + <li><a href="/en-US/docs/Web/CSS/initial_value">Initial value</a></li> + <li><a href="/en-US/docs/Web/CSS/resolved_value">Resolved value</a></li> + <li><a href="/en-US/docs/Web/CSS/specified_value">Specified value</a></li> + <li><a href="/en-US/docs/Web/CSS/used_value">Used value</a></li> +</ul> + +<h3 id="Layout">Layout</h3> + +<ul> + <li><a href="/en-US/docs/Web/Guide/CSS/Block_formatting_context">Block formatting context</a></li> + <li><a href="/en-US/docs/Web/CSS/box_model">Box model</a></li> + <li><a href="/en-US/docs/Web/CSS/All_About_The_Containing_Block">Containing block</a></li> + <li><a href="/en-US/docs/Web/CSS/Layout_mode">Layout mode</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Margin collapsing</a></li> + <li><a href="/en-US/docs/Web/CSS/Replaced_element">Replaced elements</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">Stacking context</a></li> + <li><a href="/en-US/docs/Web/Guide/CSS/Visual_formatting_model">Visual formatting model</a></li> +</ul> + +<h2 id="DOM-CSS_CSSOM">DOM-CSS / CSSOM</h2> + +<h3 id="Major_object_types">Major object types</h3> + +<ul> + <li>{{DOMxRef("DocumentOrShadowRoot.styleSheets")}}</li> + <li><code>{{DOMxRef("StyleSheetList", "styleSheets", "", 1)}}[i].{{DOMxRef("CSSRuleList", "cssRules", "", 1)}}</code></li> + <li><code>cssRules[i].{{DOMxRef("CSSRule.cssText", "cssText", "", 1)}}</code> <span style="white-space: nowrap;">(selector & style)</span></li> + <li><code>cssRules[i].{{DOMxRef("CSSStyleRule.selectorText", "selectorText", "", 1)}}</code></li> + <li>{{DOMxRef("HTMLElement.style")}}</li> + <li><code>HTMLElement.style.{{DOMxRef("CSSStyleDeclaration.cssText", "cssText", "", 1)}}</code> (just style)</li> + <li>{{DOMxRef("Element.className")}}</li> + <li>{{DOMxRef("Element.classList")}}</li> +</ul> + +<h3 id="Important_methods">Important methods</h3> + +<ul> + <li>{{DOMxRef("CSSStyleSheet.insertRule()")}}</li> + <li>{{DOMxRef("CSSStyleSheet.deleteRule()")}}</li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/Mozilla_Extensions">Mozilla CSS extensions</a> (prefixed with <code style="white-space: nowrap;">-moz-</code>)</li> + <li><a href="/en-US/docs/Web/CSS/WebKit_Extensions">WebKit CSS extensions</a> (mostly prefixed with <code style="white-space: nowrap;">-webkit-</code>)</li> + <li><a href="/en-US/docs/Web/CSS/Microsoft_Extensions">Microsoft CSS extensions</a> (prefixed with <code style="white-space: nowrap;">-ms-</code>)</li> +</ul> + +<h2 id="External_Links">External Links</h2> + +<ul> + <li><a href="https://www.w3.org/TR/CSS/#indices">CSS Indices (w3.org)</a></li> +</ul> diff --git a/files/id/web/css/referensi/index.html b/files/id/web/css/referensi/index.html deleted file mode 100644 index 7609391ca5..0000000000 --- a/files/id/web/css/referensi/index.html +++ /dev/null @@ -1,185 +0,0 @@ ---- -title: Referensi CSS -slug: Web/CSS/referensi -translation_of: Web/CSS/Reference ---- -<div>{{CSSRef}}</div> - -<p>Gunakan <strong>referensi CSS </strong>ini untuk menelusuri indeks alfabetikal dari semua properti <a href="/id/docs/web/CSS">CSS</a> umum, <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-classes</a>, <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elements</a>, <a href="/en-US/docs/Web/CSS/CSS_Types">data types</a>, dan <a href="/en-US/docs/Web/CSS/At-rule">at-rules</a>. Anda juga dapat menulusuri <a href="/en-US/docs/Web/CSS#concepts">konsep dasar</a> and a list of <a href="/en-US/docs/Web/CSS/Reference#selectors">selektor berdasarkan jenis</a>. Juga ada <a href="#DOM-CSS_CSSOM">referensi DOM-CSS / CSSOM</a>.</p> - -<h2 id="Basic_rule_syntax">Basic rule syntax</h2> - -<h3 id="Style_rule_syntax">Style rule syntax</h3> - -<pre class="syntaxbox notranslate"><var>style-rule</var> <strong>::=</strong> - <var>selectors-list</var> <strong>{</strong> - <var>properties-list</var> - <strong>}</strong> -</pre> - -<p>... where :</p> - -<pre class="syntaxbox notranslate"><var>selectors-list</var> <strong>::=</strong> - <var>selector</var>[<strong>:</strong><var>pseudo-class</var>] [<strong>::</strong><var>pseudo-element</var>] - [<strong>,</strong> <var>selectors-list</var>] - -<var>properties-list</var> <strong>::=</strong> - [<var>property</var> <strong>:</strong> <var>value</var>] [<strong>;</strong> <var>properties-list</var>] -</pre> - -<p>See the index of <a href="#Selectors"><em>selectors</em></a>, <a href="#Pseudo"><em>pseudo-classes</em></a>, and <em><a href="#Pseudo">pseudo-elements</a></em> below. The syntax for each specified <em>value</em> depends on the data type defined for each specified <em>property</em>.</p> - -<h4 id="Style_rule_examples">Style rule examples</h4> - -<pre class="brush: css notranslate">strong { - color: red; -} - -div.menu-bar li:hover > ul { - display: block; -} -</pre> - -<p>For a beginner-level introduction to the syntax of selectors, see our <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">guide on CSS Selectors</a>. Be aware that any <a href="/en-US/docs/Web/CSS/syntax">syntax</a> error in a rule definition invalidates the entire rule. Invalid rules are ignored by the browser. Note that CSS rule definitions are entirely (ASCII) <a href="https://www.w3.org/TR/css-syntax-3/#intro">text-based</a>, whereas DOM-CSS / CSSOM (the rule management system) is <a href="https://www.w3.org/TR/cssom/#introduction">object-based</a>.</p> - -<h3 id="At-rule_syntax">At-rule syntax</h3> - -<p>As the structure of at-rules varies widely, please see <a href="/en-US/docs/Web/CSS/At-rule">At-rule</a> to find the syntax of the specific one you want.</p> - -<h2 id="Keyword_index">Keyword index</h2> - -<div class="blockIndicator note"> -<p><strong>Note:</strong> The property names in this index do <strong>not</strong> include the <a href="/en-US/docs/Web/CSS/CSS_Properties_Reference">JavaScript names</a> where they differ from the CSS standard names.</p> -</div> - -<div>{{CSS_Ref}}</div> - -<h2 id="Selectors">Selectors</h2> - -<p>The following are the various <a href="/en-US/docs/Web/CSS/CSS_Selectors">selectors</a>, which allow styles to be conditional based on various features of elements within the DOM.</p> - -<h3 id="Basic_selectors">Basic selectors</h3> - -<p><strong>Basic selectors</strong> are fundamental selectors; these are the most basic selectors that are frequently combined to create other, more complex selectors.</p> - -<ul> - <li><a href="/en-US/docs/Web/CSS/Universal_selectors">Universal selector</a> <code>*</code>, <code>ns|*</code>, <code>*|*</code>, <code>|*</code></li> - <li><a href="/en-US/docs/Web/CSS/Type_selectors">Type selector</a> <code><var>elementname</var></code></li> - <li><a href="/en-US/docs/Web/CSS/Class_selectors">Class selector</a> <code>.<var>classname</var></code></li> - <li><a href="/en-US/docs/Web/CSS/ID_selectors">ID selector</a> <code>#<var>idname</var></code></li> - <li><a href="/en-US/docs/Web/CSS/Attribute_selectors">Attribute selector</a> <code>[<var>attr</var>=<var>value</var>]</code></li> -</ul> - -<h3 id="Grouping_selectors">Grouping selectors</h3> - -<dl> - <dt><a href="/en-US/docs/Web/CSS/Selector_list">Selector list</a> <code><var>A</var>, <var>B</var></code></dt> - <dd>Specifies that both <code><var>A</var></code> and <code><var>B</var></code> elements are selected. This is a grouping method to select several matching elements.</dd> -</dl> - -<h3 id="Combinators">Combinators</h3> - -<p>Combinators are selectors that establish a relationship between two or more simple selectors, such as "<code><var>A</var></code> is a child of <code><var>B</var></code>" or "<code><var>A</var></code> is adjacent to <code><var>B</var></code>."</p> - -<dl> - <dt><a href="/en-US/docs/Web/CSS/Adjacent_sibling_combinator">Adjacent sibling combinator</a> <code><var>A</var> + <var>B</var></code></dt> - <dd>Specifies that the elements selected by both <code><var>A</var></code> and <code><var>B</var></code> have the same parent and that the element selected by <code><var>B</var></code> immediately follows the element selected by <code><var>A</var></code> horizontally.</dd> - <dt><a href="/en-US/docs/Web/CSS/General_sibling_combinator">General sibling combinator</a> <code><var>A</var> ~ <var>B</var></code></dt> - <dd>Specifies that the elements selected by both <code><var>A</var></code> and <code><var>B</var></code> share the same parent and that the element selected by <code><var>A</var></code> comes before—but not necessarily immediately before—the element selected by <code><var>B</var></code>.</dd> - <dt><a href="/en-US/docs/Web/CSS/Child_combinator">Child combinator</a> <code><var>A</var> > <var>B</var></code></dt> - <dd>Specifies that the element selected by <code><var>B</var></code> is the direct child of the element selected by <code><var>A</var></code>.</dd> - <dt><a href="/en-US/docs/Web/CSS/Descendant_combinator">Descendant combinator</a> <code><var>A</var> <var>B</var></code></dt> - <dd>Specifies that the element selected by <code><var>B</var></code> is a descendant of the element selected by <code><var>A</var></code>, but is not necessarily a direct child.</dd> - <dt><a href="/en-US/docs/Web/CSS/Column_combinator">Column combinator</a> <code><var>A</var> || <var>B</var></code> {{Experimental_Inline}}</dt> - <dd>Specifies that the element selected by <code><var>B</var></code> is located within the table column specified by <code><var>A</var></code>. Elements which span multiple columns are considered to be a member of all of those columns.</dd> -</dl> - -<h3 id="Pseudo">Pseudo</h3> - -<dl> - <dt><a href="/en-US/docs/Web/CSS/Pseudo-classes">Pseudo classes</a> <code>:</code></dt> - <dd>Specifies a special state of the selected element(s).</dd> - <dt><a href="/en-US/docs/Web/CSS/Pseudo-elements">Pseudo elements</a> <code>::</code></dt> - <dd>Represents entities that are not included in HTML.</dd> -</dl> - -<div class="blockIndicator note"> -<p><strong>See also:</strong> <a href="https://www.w3.org/TR/selectors/#overview">Selectors in the Selectors Level 4 specification</a>.</p> -</div> - -<h2 id="Concepts">Concepts</h2> - -<h3 id="Syntax_and_semantics">Syntax and semantics</h3> - -<ul> - <li><a href="/en-US/docs/Web/CSS/Syntax">CSS syntax</a></li> - <li><a href="/en-US/docs/Web/CSS/At-rule">At-rules</a></li> - <li><a href="/en-US/docs/Web/CSS/Cascade">Cascade</a></li> - <li><a href="/en-US/docs/Web/CSS/Comments">Comments</a></li> - <li><a href="/en-US/docs/Glossary/Descriptor_(CSS)">Descriptor</a></li> - <li><a href="/en-US/docs/Web/CSS/inheritance">Inheritance</a></li> - <li><a href="/en-US/docs/Web/CSS/Shorthand_properties">Shorthand properties</a></li> - <li><a href="/en-US/docs/Web/CSS/Specificity">Specificity</a></li> - <li><a href="/en-US/docs/Web/CSS/Value_definition_syntax">Value definition syntax</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Values_and_Units">CSS unit and value types</a></li> -</ul> - -<h3 id="Values">Values</h3> - -<ul> - <li><a href="/en-US/docs/Web/CSS/actual_value">Actual value</a></li> - <li><a href="/en-US/docs/Web/CSS/computed_value">Computed value</a></li> - <li><a href="/en-US/docs/Web/CSS/initial_value">Initial value</a></li> - <li><a href="/en-US/docs/Web/CSS/resolved_value">Resolved value</a></li> - <li><a href="/en-US/docs/Web/CSS/specified_value">Specified value</a></li> - <li><a href="/en-US/docs/Web/CSS/used_value">Used value</a></li> -</ul> - -<h3 id="Layout">Layout</h3> - -<ul> - <li><a href="/en-US/docs/Web/Guide/CSS/Block_formatting_context">Block formatting context</a></li> - <li><a href="/en-US/docs/Web/CSS/box_model">Box model</a></li> - <li><a href="/en-US/docs/Web/CSS/All_About_The_Containing_Block">Containing block</a></li> - <li><a href="/en-US/docs/Web/CSS/Layout_mode">Layout mode</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Margin collapsing</a></li> - <li><a href="/en-US/docs/Web/CSS/Replaced_element">Replaced elements</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">Stacking context</a></li> - <li><a href="/en-US/docs/Web/Guide/CSS/Visual_formatting_model">Visual formatting model</a></li> -</ul> - -<h2 id="DOM-CSS_CSSOM">DOM-CSS / CSSOM</h2> - -<h3 id="Major_object_types">Major object types</h3> - -<ul> - <li>{{DOMxRef("DocumentOrShadowRoot.styleSheets")}}</li> - <li><code>{{DOMxRef("StyleSheetList", "styleSheets", "", 1)}}[i].{{DOMxRef("CSSRuleList", "cssRules", "", 1)}}</code></li> - <li><code>cssRules[i].{{DOMxRef("CSSRule.cssText", "cssText", "", 1)}}</code> <span style="white-space: nowrap;">(selector & style)</span></li> - <li><code>cssRules[i].{{DOMxRef("CSSStyleRule.selectorText", "selectorText", "", 1)}}</code></li> - <li>{{DOMxRef("HTMLElement.style")}}</li> - <li><code>HTMLElement.style.{{DOMxRef("CSSStyleDeclaration.cssText", "cssText", "", 1)}}</code> (just style)</li> - <li>{{DOMxRef("Element.className")}}</li> - <li>{{DOMxRef("Element.classList")}}</li> -</ul> - -<h3 id="Important_methods">Important methods</h3> - -<ul> - <li>{{DOMxRef("CSSStyleSheet.insertRule()")}}</li> - <li>{{DOMxRef("CSSStyleSheet.deleteRule()")}}</li> -</ul> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/CSS/Mozilla_Extensions">Mozilla CSS extensions</a> (prefixed with <code style="white-space: nowrap;">-moz-</code>)</li> - <li><a href="/en-US/docs/Web/CSS/WebKit_Extensions">WebKit CSS extensions</a> (mostly prefixed with <code style="white-space: nowrap;">-webkit-</code>)</li> - <li><a href="/en-US/docs/Web/CSS/Microsoft_Extensions">Microsoft CSS extensions</a> (prefixed with <code style="white-space: nowrap;">-ms-</code>)</li> -</ul> - -<h2 id="External_Links">External Links</h2> - -<ul> - <li><a href="https://www.w3.org/TR/CSS/#indices">CSS Indices (w3.org)</a></li> -</ul> -- cgit v1.2.3-54-g00ecf