diff options
| author | Ryan Johnson <rjohnson@mozilla.com> | 2021-04-29 16:16:42 -0700 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-04-29 16:16:42 -0700 |
| commit | 95aca4b4d8fa62815d4bd412fff1a364f842814a (patch) | |
| tree | 5e57661720fe9058d5c7db637e764800b50f9060 /files/id/web/css | |
| parent | ee3b1c87e3c8e72ca130943eed260ad642246581 (diff) | |
| download | translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.gz translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.bz2 translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.zip | |
remove retired locales (#699)
Diffstat (limited to 'files/id/web/css')
| -rw-r--r-- | files/id/web/css/@font-face/font-display/index.html | 101 | ||||
| -rw-r--r-- | files/id/web/css/@font-face/index.html | 199 | ||||
| -rw-r--r-- | files/id/web/css/_colon_active/index.html | 143 | ||||
| -rw-r--r-- | files/id/web/css/background-color/index.html | 149 | ||||
| -rw-r--r-- | files/id/web/css/css_box_model/index.html | 115 | ||||
| -rw-r--r-- | files/id/web/css/css_box_model/introduction_to_the_css_box_model/index.html | 73 | ||||
| -rw-r--r-- | files/id/web/css/css_selectors/index.html | 154 | ||||
| -rw-r--r-- | files/id/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html | 64 | ||||
| -rw-r--r-- | files/id/web/css/flex-direction/index.html | 155 | ||||
| -rw-r--r-- | files/id/web/css/index.html | 64 | ||||
| -rw-r--r-- | files/id/web/css/mask-border-width/index.html | 104 | ||||
| -rw-r--r-- | files/id/web/css/media_queries/using_media_queries/index.html | 631 | ||||
| -rw-r--r-- | files/id/web/css/reference/index.html | 186 | ||||
| -rw-r--r-- | files/id/web/css/text-transform/index.html | 307 | ||||
| -rw-r--r-- | files/id/web/css/type_selectors/index.html | 121 |
15 files changed, 0 insertions, 2566 deletions
diff --git a/files/id/web/css/@font-face/font-display/index.html b/files/id/web/css/@font-face/font-display/index.html deleted file mode 100644 index e7e8197792..0000000000 --- a/files/id/web/css/@font-face/font-display/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: font-display -slug: Web/CSS/@font-face/font-display -translation_of: Web/CSS/@font-face/font-display ---- -<div>{{CSSRef}}</div> - -<p>The <strong><code>font-display</code></strong> descriptor determines how a font face is displayed based on whether and when it is downloaded and ready to use.</p> - -<h2 id="The_font_display_timeline">The font display timeline</h2> - -<p>The font display timeline is based on a timer that begins the moment the user agent attempts to use a given downloaded font face. The timeline is divided into the three periods below which dictate the rendering behavior of any elements using the font face.</p> - -<dl> - <dt>Font block period</dt> - <dd>If the font face is not loaded, any element attempting to use it must render an <em>invisible</em> fallback font face. If the font face successfully loads during this period, it is used normally.</dd> - <dt>Font swap period</dt> - <dd>If the font face is not loaded, any element attempting to use it must render a fallback font face. If the font face successfully loads during this period, it is used normally.</dd> - <dt>Font failure period</dt> - <dd>If the font face is not loaded, the user agent treats it as a failed load causing normal font fallback.</dd> -</dl> - -<p>{{cssinfo}}</p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="brush: css;">/* Keyword values */ -font-display: auto; -font-display: block; -font-display: swap; -font-display: fallback; -font-display: optional;</pre> - -<h3 id="Values">Values</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>The font display strategy is defined by the user agent.</dd> - <dt><code>block</code></dt> - <dd>Gives the font face a short block period and an infinite swap period.</dd> - <dt><code>swap</code></dt> - <dd>Gives the font face an extremely small block period and an infinite swap period.</dd> - <dt><code>fallback</code></dt> - <dd>Gives the font face an extremely small block period and a short swap period.</dd> - <dt><code>optional</code></dt> - <dd>Gives the font face an extremely small block period and no swap period.</dd> -</dl> - -<h3 id="Formal_syntax">Formal syntax</h3> - -{{csssyntax}} - -<h2 id="Examples">Examples</h2> - -<pre class="brush: css; highlight[7]">@font-face { - font-family: ExampleFont; - src: url(/path/to/fonts/examplefont.woff) format('woff'), - url(/path/to/fonts/examplefont.eot) format('eot'); - font-weight: 400; - font-style: normal; - font-display: fallback; -}</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Fonts', '#font-display-desc', 'font-display')}}</td> - <td>{{Spec2('CSS4 Fonts')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("css.at-rules.font-face.font-display")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{cssxref("@font-face/font-family", "font-family")}}</li> - <li>{{cssxref("@font-face/font-stretch", "font-stretch")}}</li> - <li>{{cssxref("@font-face/font-style", "font-style")}}</li> - <li>{{cssxref("@font-face/font-weight", "font-weight")}}</li> - <li>{{cssxref("@font-face/font-variant", "font-variant")}}</li> - <li>{{cssxref("font-feature-settings", "font-feature-settings")}}</li> - <li>{{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}</li> - <li>{{cssxref("@font-face/src", "src")}}</li> - <li>{{cssxref("@font-face/unicode-range", "unicode-range")}}</li> -</ul> diff --git a/files/id/web/css/@font-face/index.html b/files/id/web/css/@font-face/index.html deleted file mode 100644 index 670ee39e20..0000000000 --- a/files/id/web/css/@font-face/index.html +++ /dev/null @@ -1,199 +0,0 @@ ---- -title: '@font-face' -slug: Web/CSS/@font-face -tags: - - '@font-face' - - At-rule - - CSS - - CSS Fonts - - Fonts - - NeedsTranslation - - Reference - - TopicStub - - typography -translation_of: Web/CSS/@font-face ---- -<div>{{CSSRef}}</div> - -<p><span class="seoSummary">The <strong><code>@font-face</code></strong> <a href="/en-US/docs/CSS">CSS</a> <a href="/en-US/docs/CSS/At-rule">at-rule</a> specifies a custom font with which to display text; the font can be loaded from either a remote server or a locally-installed font on the user's own computer.</span> If the <code>local()</code> function is provided, specifying a font name to look for on the user's computer, and the {{Glossary("user agent")}} finds a match, that local font is used. Otherwise, the font resource specified using the <code>url()</code> function is downloaded and used.</p> - -<p>By allowing authors to provide their own fonts, <code>@font-face</code> makes it possible to design content without being limited to the so-called "web-safe" fonts (that is, the fonts which are so common that they're considered to be universally available). The ability to specify the name of a locally-installed font to look for and use makes it possible to customize the font beyond the basics while making it possible to do so without relying on an Internet connection.</p> - -<p>It's common to use both <code>url()</code> and <code>local()</code> together, so that the user's installed copy of the font is used if available, falling back to downloading a copy of the font if it's not found on the user's device.</p> - -<p>The <code>@font-face</code> at-rule may be used not only at the top level of a CSS, but also inside any <a href="/en-US/docs/Web/CSS/At-rule#Conditional_group_rules">CSS conditional-group at-rule</a>.</p> - -<pre class="brush: css no-line-numbers">@font-face { - font-family: "Open Sans"; - src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"), - url("/fonts/OpenSans-Regular-webfont.woff") format("woff"); -}</pre> - -<h2 id="Syntax">Syntax</h2> - -<h3 id="Descriptors">Descriptors</h3> - -<dl> - <dt>{{cssxref("@font-face/font-display", "font-display")}}</dt> - <dd>Determines how a font face is displayed based on whether and when it is downloaded and ready to use.</dd> - <dt>{{cssxref("@font-face/font-family", "font-family")}}</dt> - <dd>Specifies a name that will be used as the font face value for font properties.</dd> - <dt>{{cssxref("@font-face/font-stretch", "font-stretch")}}</dt> - <dd>A {{cssxref("font-stretch")}} value. Since Firefox 61 (and in other modern browsers) this also accepts two values to specify a range that is supported by a font-face, for example <code>font-stretch: 50% 200%;</code></dd> - <dt>{{cssxref("@font-face/font-style", "font-style")}}</dt> - <dd>A {{cssxref("font-style")}} value. Since Firefox 61 (and in other modern browsers) this also accepts two values to specify a range that is supported by a font-face, for example <code>font-style: oblique 20deg 50deg;</code></dd> - <dt>{{cssxref("@font-face/font-weight", "font-weight")}}</dt> - <dd>A {{cssxref("font-weight")}} value. Since Firefox 61 (and in other modern browsers) this also accepts two values to specify a range that is supported by a font-face, for example <code>font-weight: 100 400;</code></dd> - <dt>{{cssxref("@font-face/font-variant", "font-variant")}}</dt> - <dd>A {{cssxref("font-variant")}} value.</dd> - <dt>{{cssxref("font-feature-settings", "font-feature-settings")}}</dt> - <dd>Allows control over advanced typographic features in OpenType fonts.</dd> - <dt>{{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}</dt> - <dd>Allows low-level control over OpenType or TrueType font variations, by specifying the four letter axis names of the features to vary, along with their variation values.</dd> - <dt>{{cssxref("@font-face/src", "src")}}</dt> - <dd> - <p>Specifies the resource containing the font data. This can be a URL to a remote font file location or the name of a font on the user's computer.</p> - - <p>To provide the browser with a hint as to what format a font resource is — so it can select a suitable one — it is possible to include a format type inside a <code>format()</code> function:</p> - - <pre class="brush: css">src: url(ideal-sans-serif.woff) <strong>format("woff")</strong>, - url(basic-sans-serif.ttf) <strong>format("truetype")</strong>;</pre> - - <p>The available types are: <code>"woff"</code>, <code>"woff2"</code>, <code>"truetype"</code>, <code>"opentype"</code>, <code>"embedded-opentype"</code>, and <code>"svg"</code>.</p> - </dd> - <dt>{{cssxref("@font-face/unicode-range", "unicode-range")}}</dt> - <dd>The range of Unicode code points to be used from the font.</dd> -</dl> - -<h3 id="Formal_syntax">Formal syntax</h3> - -{{csssyntax}} - -<h2 id="Examples">Examples</h2> - -<p>This example simply specifies a downloadable font to use, applying it to the entire body of the document:</p> - -<p><a href="https://mdn.mozillademos.org/files/7775/webfont-sample.html">View the live example</a></p> - -<pre class="brush: html"><html> -<head> - <title>Web Font Sample</title> - <style type="text/css" media="screen, print"> - @font-face { - font-family: "Bitstream Vera Serif Bold"; - src: url("https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf"); - } - - body { font-family: "Bitstream Vera Serif Bold", serif } - </style> -</head> -<body> - This is Bitstream Vera Serif Bold. -</body> -</html> -</pre> - -<p>In this example, the user's local copy of "Helvetica Neue Bold" is used; if the user does not have that font installed (two different names are tried), then the downloadable font named "MgOpenModernaBold.ttf" is used instead:</p> - -<pre class="brush: css">@font-face { - font-family: MyHelvetica; - src: local("Helvetica Neue Bold"), - local("HelveticaNeue-Bold"), - url(MgOpenModernaBold.ttf); - font-weight: bold; -} -</pre> - -<h2 id="Font_MIME_Types">Font MIME Types</h2> - -<table> - <thead> - <tr> - <th>Format</th> - <th>MIME type</th> - </tr> - </thead> - <tbody> - <tr> - <td>TrueType</td> - <td><code>font/ttf</code></td> - </tr> - <tr> - <td>OpenType</td> - <td><code>font/otf</code></td> - </tr> - <tr> - <td>Web Open Font Format</td> - <td><code>font/woff</code></td> - </tr> - <tr> - <td>Web Open Font Format 2</td> - <td><code>font/woff2</code></td> - </tr> - </tbody> -</table> - -<h2 id="Notes">Notes</h2> - -<ul> - <li>Web fonts are subject to the same domain restriction (font files must be on the same domain as the page using them), unless <a href="/en-US/docs/HTTP_access_control">HTTP access controls</a> are used to relax this restriction.</li> - <li><code>@font-face</code> cannot be declared within a CSS selector. For example, the following will not work: - <pre class="brush: css; example-bad">.className { - @font-face { - font-family: MyHelvetica; - src: local("Helvetica Neue Bold"), - local("HelveticaNeue-Bold"), - url(MgOpenModernaBold.ttf); - font-weight: bold; - } -}</pre> - </li> -</ul> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('WOFF2.0', '', 'WOFF2 font format')}}</td> - <td>{{Spec2('WOFF2.0')}}</td> - <td>Font format specification with new compression algorithm</td> - </tr> - <tr> - <td>{{SpecName('WOFF1.0', '', 'WOFF font format')}}</td> - <td>{{Spec2('WOFF1.0')}}</td> - <td>Font format specification</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Fonts', '#font-face-rule', '@font-face')}}</td> - <td>{{Spec2('CSS3 Fonts')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("css.at-rules.font-face")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/WOFF">About WOFF</a></li> - <li><a href="https://everythingfonts.com/font-face">Everythingfonts font-face generator</a></li> - <li><a class="external" href="http://www.fontsquirrel.com/fontface/generator">FontSquirrel @font-face generator</a></li> - <li><a class="external" href="http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/">Beautiful fonts with @font-face</a></li> - <li><a class="external" href="http://openfontlibrary.org/">Open Font Library</a></li> - <li><a class="external" href="http://caniuse.com/woff">When can I use WOFF?</a></li> - <li><a class="external" href="http://caniuse.com/svg-fonts">When can I use SVG Fonts?</a></li> - <li><a href="https://coolfont.org">Free Fancy Cool Fonts</a></li> -</ul> diff --git a/files/id/web/css/_colon_active/index.html b/files/id/web/css/_colon_active/index.html deleted file mode 100644 index 67d9357bef..0000000000 --- a/files/id/web/css/_colon_active/index.html +++ /dev/null @@ -1,143 +0,0 @@ ---- -title: ':active' -slug: 'Web/CSS/:active' -translation_of: 'Web/CSS/:active' ---- -<div>{{CSSRef}}</div> - -<h2 id="Rangkuman">Rangkuman</h2> - -<p><code>:active</code> CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a> menunjukkan kapan sebuah elemen telah diaktifasi oleh pengguna. Hal ini memperbolehkan halaman memberikan feedback (korelasi) sehingga aktivasi telah terdeteksi oleh browser. Ketika berinteraksi dengan mouse, hal ini secara tipikal waktu antara pengguna menekan tombol mouse dan merelasisasikannya. :<code>active</code> pseudo-class juga secara tipical ditampilkan ketika menggunakan tombol tab pada keyboard. Hal ini sering digunakan pada element HTML {{HTMLElement("a")}} dan {{HTMLElement("button")}}, tetapi boleh jadi tidak terbatas pada hal tersebut.</p> - -<p>Style ini boleh jadi digunakan lebih oleh sebuah link-related pseudo-classes (tautan-terhubung dengan pseudo kelas) lainnya, yang mana merupakan {{cssxref(":link")}}, {{cssxref(":hover")}}, and {{cssxref(":visited")}}, ditampilkan dalam aturan bagian-bagiannya. Dalam memperoleh penampilan yang teraprofiasi dengan link, kamu membutuhkan menempatkan aturan :active setelah seluruh yang lainnya terhubungan dengan aturan link (link-related-rules), seperti diuraikan oleh <em>LHVA-order</em>: <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>.</p> - -<div class="note"><strong>Cataan:</strong> Pada system dengan multi tombol mouse, CSS 3 spesifik bahwa <code>:active</code> pseudo-class harus hanya diterapkan pada tombol utama; pada klik kanan mouse, ini secara tipikal kebanyakan pada tombol kiri.</div> - -<h2 id="Example" name="Example">Contoh</h2> - -<div id="example"> -<h3 id="HTML">HTML</h3> - -<pre class="brush: html; highlight:[3]"><body> - <h1>:active CSS selector example</h1> - <p>The following link will turn lime during the time you click it and release the click: <a href="#">Mozilla Developer Network</a>.</p> -</body></pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css; highlight:[5]">body { background-color: #ffffc9 } -a:link { color: blue } /* unvisited links */ -a:visited { color: purple } /* visited links */ -a:hover { <span class="st">font-weight: bold</span> } /* user hovers */ -a:active { color: lime } /* active links */</pre> -</div> - -<div>{{EmbedLiveSample('example',600,140)}}</div> - -<h2 id="Spesifikasi"><span>Spesifikasi</span></h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Selectors', '#active-pseudo', ':active')}}</td> - <td>{{Spec2('CSS4 Selectors')}}</td> - <td>No change.</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Selectors', '#useraction-pseudos', ':active')}}</td> - <td>{{Spec2('CSS3 Selectors')}}</td> - <td>No change.</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':active')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>No change.</td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#anchor-pseudo-classes', ':active')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Dukungan_Browser">Dukungan Browser</h2> - -<div>{{CompatibilityTable}}</div> - -<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>1.0</td> - <td>{{CompatGeckoDesktop("1.0")}}</td> - <td>4.0</td> - <td>5.0</td> - <td>1.0</td> - </tr> - <tr> - <td>Support on non-<code><a></code> elements</td> - <td>1.0</td> - <td>{{CompatGeckoDesktop("1.0")}}</td> - <td>8.0</td> - <td>7.0</td> - <td>1.0</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>1.0</td> - <td>{{CompatGeckoMobile("1.0")}}</td> - <td>6.0</td> - <td>6.0</td> - <td>1.0</td> - </tr> - <tr> - <td>Support on non-<code><a></code> elements</td> - <td>1.0</td> - <td>{{CompatGeckoMobile("1.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}} [1]</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Secara menyeluruh, Safari Mobile tidak menggunakan {{cssxref(":active")}} kesatuan yang tidak ada pada sebuah <a href="/en-US/docs/Web/Reference/Events/touchstart"><code>touchstart</code></a> event handler pada elemen yang relevan atau pada {{HTMLElement("body")}}.</p> - -<h2 id="Lihat_juga">Lihat juga</h2> - -<ul> - <li>Link-related pseudo-classes: {{cssxref(":link")}}, {{cssxref(":visited")}}, and {{cssxref(":hover")}}.</li> -</ul> diff --git a/files/id/web/css/background-color/index.html b/files/id/web/css/background-color/index.html deleted file mode 100644 index f8198be9cc..0000000000 --- a/files/id/web/css/background-color/index.html +++ /dev/null @@ -1,149 +0,0 @@ ---- -title: background-color -slug: Web/CSS/background-color -translation_of: Web/CSS/background-color ---- -<div>{{CSSRef}}</div> - -<p><strong><code>Background-color</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> digunakan untuk seting warna latar belakang dari element yang di inginkan.</p> - -<div>{{EmbedInteractiveExample("pages/css/background-color.html")}}</div> - - - -<h2 id="Syntax">Syntax</h2> - -<pre class="brush: css no-line-numbers">/* Keyword values */ -background-color: red; -background-color: indigo; - -/* Hexadecimal value */ -background-color: #bbff00; /* Fully opaque */ -background-color: #11ffee00; /* Fully transparent */ -background-color: #11ffeeff; /* Fully opaque */ - -/* RGB value */ -background-color: rgb(255, 255, 128); /* Fully opaque */ -background-color: rgba(117, 190, 218, 0.5); /* 50% transparent */ - -/* HSL value */ -background-color: hsl(50, 33%, 25%); /* Fully opaque */ -background-color: hsla(50, 33%, 25%, 0.75); /* 75% transparent */ - -/* Special keyword values */ -background-color: currentcolor; -background-color: transparent; - -/* Global values */ -background-color: inherit; -background-color: initial; -background-color: unset;</pre> - -<p><code>Background-color</code> menggunakan hanya satu jenis warna <code><a href="#<color>"><color></a></code> nilai.</p> - -<h3 id="Values">Values</h3> - -<dl> - <dt><a id="<color>"></a>{{cssxref("<color>")}}</dt> - <dd>The uniform color of the background. It is rendered behind any {{cssxref("background-image")}} that is specified, although the color will still be visible through any transparency in the image.</dd> -</dl> - -<h3 id="Formal_syntax">Formal syntax</h3> - -{{csssyntax}} - -<h2 id="Contoh">Contoh</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><div class="exampleone"> - Lorem ipsum dolor sit amet, consectetuer -</div> - -<div class="exampletwo"> - Lorem ipsum dolor sit amet, consectetuer -</div> - -<div class="examplethree"> - Lorem ipsum dolor sit amet, consectetuer -</div></pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css; highlight:[2,7,12];">.exampleone { - background-color: teal; - color: white; -} - -.exampletwo { - background-color: rgb(153,102,153); - color: rgb(255,255,204); -} - -.examplethree { - background-color: #777799; - color: #FFFFFF; -} -</pre> - -<h3 id="Result">Result</h3> - -<p>{{EmbedLiveSample("Examples", 200, 150)}}</p> - -<h2 id="Accessibility_concerns">Accessibility concerns</h2> - -<p>It is important to ensure that the contrast ratio between the background color and the color of the text placed over it is high enough that people experiencing low vision conditions will be able to read the content of the page.</p> - -<p>Color contrast ratio is determined by comparing the luminosity of the text and background color values. In order to meet current <a href="https://www.w3.org/WAI/intro/wcag">Web Content Accessibility Guidelines (WCAG)</a>, a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings. Large text is defined as 18.66px and <a href="/en-US/docs/Web/CSS/font-weight">bold</a> or larger, or 24px or larger.</p> - -<ul> - <li><a href="https://webaim.org/resources/contrastchecker/">WebAIM: Color Contrast Checker</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li> - <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li> -</ul> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Backgrounds', '#background-color', 'background-color')}}</td> - <td>{{Spec2('CSS3 Backgrounds')}}</td> - <td>Though technically removing the <code>transparent</code> keyword, this doesn't change anything as it has been incorporated as a true {{cssxref("<color>")}}</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-color', 'background-color')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>No change</td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#background-color', 'background-color')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<div>{{cssinfo}}</div> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> - -<p>{{Compat("css.properties.background-color")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds">Multiple backgrounds</a></li> - <li>The {{cssxref("<color>")}} data type</li> - <li>Other color-related properties: {{cssxref("color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, and {{cssxref("column-rule-color")}}</li> - <li><a href="/en-US/docs/Web/HTML/Applying_color">Applying color to HTML elements using CSS</a></li> -</ul> diff --git a/files/id/web/css/css_box_model/index.html b/files/id/web/css/css_box_model/index.html deleted file mode 100644 index 08152c9c16..0000000000 --- a/files/id/web/css/css_box_model/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: CSS Basic Box Model -slug: Web/CSS/CSS_Box_Model -tags: - - CSS - - CSS Box Model - - NeedsTranslation - - Overview - - Reference - - TopicStub -translation_of: Web/CSS/CSS_Box_Model ---- -<div>{{CSSRef}}</div> - -<p><strong>CSS Basic Box Model</strong> is a module of CSS that defines the rectangular boxes—including their padding and margin—that are generated for elements and laid out according to the <a href="/en-US/docs/Web/CSS/Visual_formatting_model">visual formatting model</a>.</p> - -<h2 id="Reference">Reference</h2> - -<h3 id="Properties">Properties</h3> - -<h4 id="Properties_controlling_the_flow_of_content_in_a_box">Properties controlling the flow of content in a box</h4> - -<div class="index"> -<ul> - <li>{{CSSxRef("overflow")}}</li> - <li>{{CSSxRef("overflow-x")}}</li> - <li>{{CSSxRef("overflow-y")}}</li> -</ul> -</div> - -<h4 id="Properties_controlling_the_size_of_a_box">Properties controlling the size of a box</h4> - -<div class="index"> -<ul> - <li>{{CSSxRef("height")}}</li> - <li>{{CSSxRef("width")}}</li> - <li>{{CSSxRef("max-height")}}</li> - <li>{{CSSxRef("max-width")}}</li> - <li>{{CSSxRef("min-height")}}</li> - <li>{{CSSxRef("min-width")}}</li> -</ul> -</div> - -<h4 id="Properties_controlling_the_margins_of_a_box">Properties controlling the margins of a box</h4> - -<div class="index"> -<ul> - <li>{{CSSxRef("margin")}}</li> - <li>{{CSSxRef("margin-bottom")}}</li> - <li>{{CSSxRef("margin-left")}}</li> - <li>{{CSSxRef("margin-right")}}</li> - <li>{{CSSxRef("margin-top")}}</li> - <li>{{CSSxRef("margin-trim")}} {{Experimental_Inline}}</li> -</ul> -</div> - -<h4 id="Properties_controlling_the_paddings_of_a_box">Properties controlling the paddings of a box</h4> - -<div class="index"> -<ul> - <li>{{CSSxRef("padding")}}</li> - <li>{{CSSxRef("padding-bottom")}}</li> - <li>{{CSSxRef("padding-left")}}</li> - <li>{{CSSxRef("padding-right")}}</li> - <li>{{CSSxRef("padding-top")}}</li> -</ul> -</div> - -<h4 id="Other_properties">Other properties</h4> - -<div class="index"> -<ul> - <li>{{CSSxRef("visibility")}}</li> -</ul> -</div> - -<h2 id="Guides">Guides</h2> - -<dl> - <dt><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">Introduction to the CSS box model</a></dt> - <dd>Explains one of the fundamental concept of CSS: the box model. This model defines how CSS lays out elements, including their content, padding, border, and margin areas.</dd> - <dt><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Mastering margin collapsing</a></dt> - <dd>Sometimes, two adjacent margins are collapsed into one. This article describes the rules that govern when and why this happens, and how to control it.</dd> - <dt><a href="/en-US/docs/Web/CSS/Visual_formatting_model">Visual formatting model</a></dt> - <dd>Explains the visual formatting model.</dd> -</dl> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS3 Box")}}</td> - <td>{{Spec2("CSS3 Box")}}</td> - <td>Added <code style="white-space: nowrap;">margin-trim</code></td> - </tr> - <tr> - <td>{{SpecName("CSS2.1", "box.html")}}</td> - <td>{{Spec2("CSS2.1")}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("CSS1")}}</td> - <td>{{Spec2("CSS1")}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> diff --git a/files/id/web/css/css_box_model/introduction_to_the_css_box_model/index.html b/files/id/web/css/css_box_model/introduction_to_the_css_box_model/index.html deleted file mode 100644 index d81bae36e6..0000000000 --- a/files/id/web/css/css_box_model/introduction_to_the_css_box_model/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: Introduction to the CSS basic box model -slug: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model -translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model ---- -<div>{{CSSRef}}</div> - -<p>When laying out a document, the browser's rendering engine represents each element as a rectangular box according to the standard <strong>CSS basic box model</strong>. CSS determines the size, position, and properties (color, background, border size, etc.) of these boxes.</p> - -<p>Every box is composed of four parts (or <em>areas</em>), defined by their respective edges: the <em>content edge</em>, <em>padding edge</em>, <em>border edge</em>, and <em>margin edge</em>.</p> - -<p><img alt="CSS Box model" src="https://mdn.mozillademos.org/files/8685/boxmodel-(3).png" style="height: 384px; width: 548px;"></p> - -<p id="content-area">The <strong>content area</strong>, bounded by the content edge, contains the "real" content of the element, such as text, an image, or a video player. Its dimensions are the <em>content width</em> (or <em>content-box width</em>) and the <em>content height</em> (or <em>content-box height</em>). It often has a background color or background image.</p> - -<p>If the {{cssxref("box-sizing")}} property is set to <code>content-box</code> (default) and if the element is a block element, the content area's size can be explicitly defined with the {{cssxref("width")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}}, {{ cssxref("height") }}, {{cssxref("min-height")}}, and {{cssxref("max-height")}} properties.</p> - -<p id="padding-area">The <strong>padding area</strong>, bounded by the padding edge, extends the content area to include the element's padding. Its dimensions are the <em>padding-box width</em> and the <em>padding-box height</em>.</p> - -<p>The thickness of the padding is determined by the {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}, and shorthand {{cssxref("padding")}} properties.</p> - -<p id="border-area">The <strong>border area</strong>, bounded by the border edge, extends the padding area to include the element's borders. Its dimensions are the <em>border-box width</em> and the <em>border-box height</em>.</p> - -<p>The thickness of the borders are determined by the {{cssxref("border-width")}} and shorthand {{cssxref("border")}} properties. If the {{cssxref("box-sizing")}} property is set to <code>border-box</code>, the border area's size can be explicitly defined with the {{cssxref("width")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}}, {{ cssxref("height") }}, {{cssxref("min-height")}}, and {{cssxref("max-height")}} properties. When there is a background ({{cssxref("background-color")}} or {{cssxref("background-image")}}) set on a box, it extends to the outer edge of the border (i.e. extends underneath the border in z-ordering). This default behavior can be altered with the {{cssxref("background-clip")}} css property.</p> - -<p id="margin-area">The <strong>margin area</strong>, bounded by the margin edge, extends the border area to include an empty area used to separate the element from its neighbors. Its dimensions are the <em>margin-box width </em>and the <em>margin-box height</em>.</p> - -<p>The size of the margin area is determined by the {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}}, and shorthand {{cssxref("margin")}} properties. When <a href="/en/CSS/margin_collapsing" title="en/CSS/margin_collapsing">margin collapsing</a> occurs, the margin area is not clearly defined since margins are shared between boxes.</p> - -<p>Finally, note that for non-replaced inline elements, the amount of space taken up (the contribution to the height of the line) is determined by the {{cssxref('line-height')}} property, even though the borders and padding are still displayed around the content.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/CSS/Containing_block">Layout and the containing block</a></li> - <li><a href="/en-US/docs/Web/CSS/Cascade">Introducing the CSS Cascade</a></li> - <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance">Cascade and inheritance</a></li> -</ul> - -<h2 id="Specification">Specification</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Box', '#intro')}}</td> - <td>{{Spec2('CSS3 Box')}}</td> - <td></td> - </tr> - <tr> - <td>{{ SpecName("CSS2.1","box.html#box-dimensions")}}</td> - <td>{{ Spec2('CSS2.1') }}</td> - <td>Though more precisely worded, there is no practical change.</td> - </tr> - <tr> - <td>{{ SpecName("CSS1","#formatting-model")}}</td> - <td>{{ Spec2('CSS1') }}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="See_also_2">See also</h2> - -<ul> - <li>{{css_key_concepts}}</li> -</ul> diff --git a/files/id/web/css/css_selectors/index.html b/files/id/web/css/css_selectors/index.html deleted file mode 100644 index 8bf3fb0034..0000000000 --- a/files/id/web/css/css_selectors/index.html +++ /dev/null @@ -1,154 +0,0 @@ ---- -title: CSS Selectors -slug: Web/CSS/CSS_Selectors -tags: - - CSS - - CSS Selectors - - NeedsTranslation - - Overview - - Reference - - Selectors - - TopicStub -translation_of: Web/CSS/CSS_Selectors ---- -<div>{{CSSRef}}</div> - -<p><strong>Selectors</strong> define to which elements a set of CSS rules apply.</p> - -<h2 id="Dasar_Selektor">Dasar Selektor</h2> - -<dl> - <dt><a href="/en-US/docs/Web/CSS/Type_selectors">Type selectors</a> (Jenis-Jenis Seleksi)</dt> - <dd>Dasar selektor ini memilih seluruh elemen sehingga ditampilkan dengan pemberian nama.<br> - <strong>Syntax:</strong> <code><var>eltname</var></code><br> - <strong>Example:</strong> <font face="Consolas, Liberation Mono, Courier, monospace">Input akan menampilkan sebuah elemen </font> {{HTMLElement('input')}}.</dd> - <dt><a href="/en-US/docs/Web/CSS/Class_selectors">Class selectors</a> (Selektor Class)</dt> - <dd>Dasar selektor ini memilih elemen yang didasarkan pada nilai attribut classnya.<br> - <strong>Syntax:</strong> <code>.<var>classname</var></code><br> - <strong>Example:</strong> <code>.index</code> akan menampilkan sebuah elemen yang mempunyai indeks class (seperti didefenisikan oleh sebuah attribut <code>class="index"</code> atau yang serupa).</dd> - <dt><a href="/en-US/docs/Web/CSS/ID_selectors">ID selectors</a> (selektor ID)</dt> - <dd>Dasar selektor ini memilih cabangan (nodes) didasarkan pada nilai attribut idnya. Bisa jadi hanya satu elemen dengan sebuah pemberian ID dalam sebuah dokumen.<br> - <strong>Syntax:</strong> <code>#<var>idname</var></code><br> - <strong>Example:</strong> <code>#toc</code> akan menampilkan elemen yang mempunyai id toc (seperti didefenisikan dengan atrribut <code>id="toc"</code> atau yang serupa).</dd> - <dt><a href="/en-US/docs/Web/CSS/Universal_selectors">Universal selectors</a> (selektor seluruhnya)</dt> - <dd>Dasar selektor ini memilih seluruh nodes (cabangan). Ini juga ada dalam hanya sebuah satu-kumpulan nama (namespace) dan dalam seluruh kumpulan nama (all-namespace) yang juga bervariasi.<br> - <strong>Syntax:</strong> <code>* ns|* *|*</code><br> - <strong>Example:</strong> <code>*</code> akan menampilkan seluruh elemen dari dokumen.</dd> - <dt><a href="/en-US/docs/Web/CSS/Attribute_selectors">Attribute selectors</a> (selektor attribut)</dt> - <dd>Dasar selektor ini memilih nodes (cabangan) didasarkan pada sebuah nilai dari atributnya.<br> - <strong>Syntax:</strong> <code>[attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]</code><br> - <strong>Example:</strong> <code>[autoplay]</code> akan menampilkan seluruh elemen yang mempunyai attribut <code>autoplay</code> pengaturan (pada sebuah nilai).</dd> -</dl> - -<h2 id="Combinators">Combinators</h2> - -<dl> - <dt><a href="/en-US/docs/Web/CSS/Adjacent_sibling_selectors">Adjacent sibling selectors</a></dt> - <dd>The <code>'+'</code> combinator selects nodes that immediately follow the former specified element.<br> - <strong>Syntax:</strong> <code><var>A</var> + <var>B</var></code><br> - <strong>Example:</strong> <code>ul + li</code> will match any {{HTMLElement('li')}} that immediately follows a {{HTMLElement('ul')}}.</dd> - <dt><a href="/en-US/docs/Web/CSS/General_sibling_selectors">General sibling selectors</a></dt> - <dd>The <code>'~'</code> combinator selects nodes that follow (not necessarily immediately) the former specified element, if both elements shared the same parent.<br> - <strong>Syntax:</strong> <code><var>A</var> ~ <var>B</var></code><br> - <strong>Example:</strong> <code>p ~ span</code> will match all {{HTMLElement('span')}} elements that follow a {{HTMLElement('p')}} element inside the same element.</dd> - <dt><a href="/en-US/docs/Web/CSS/Child_selectors">Child selectors</a></dt> - <dd>The <code>'>'</code> combinator selects nodes that are direct children of the former specified element.<br> - <strong>Syntax:</strong> <code><var>A</var> > <var>B</var></code><br> - <strong>Example:</strong> <code>ul > li</code> will match all {{HTMLElement('li')}} elements that are inside a {{HTMLElement('ul')}} element.</dd> - <dt><a href="/en-US/docs/Web/CSS/Descendant_selectors">Descendant selectors</a></dt> - <dd>The <code>' '</code> combinator selects nodes that are children (not necessary direct children) of the former specified element.<br> - <strong>Syntax:</strong> <code>A B</code><br> - <strong>Example:</strong> <code>div span</code> will match any {{HTMLElement('span')}} element that is inside a {{HTMLElement('div')}} element.</dd> -</dl> - -<h2 id="Pseudo-elements">Pseudo-elements</h2> - -<p><a href="/en-US/docs/Web/CSS/Pseudo-elements">Pseudo-elements</a> are abstractions of the tree representing entities beyond what HTML does. For example, HTML doesn't have an element describing the first letter or line of a paragraph, or the marker of a list. Pseudo-elements represent these entities and allow CSS rules to be associated with them. that way, these entitities can be styled independently.</p> - -<h2 id="Pseudo-classes">Pseudo-classes</h2> - -<p><a href="/en-US/docs/Web/CSS/Pseudo-classes">Pseudo-classes</a> allow to select elements based on information that is not contained in the document tree like a state or that is particularly complex to extract. E.g. they match if a link has been previously visited or not.</p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Selectors')}}</td> - <td>{{Spec2('CSS4 Selectors')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('CSS3 Selectors')}}</td> - <td>{{Spec2('CSS3 Selectors')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'selector.html')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('CSS1')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<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>1</td> - <td>{{CompatGeckoDesktop("1")}}</td> - <td>3.0</td> - <td>3.5</td> - <td>1.0</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>1.5</td> - <td>{{CompatGeckoMobile("1.9.2")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>3.2</td> - </tr> - </tbody> -</table> -</div> diff --git a/files/id/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html b/files/id/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html deleted file mode 100644 index 9ec7339a95..0000000000 --- a/files/id/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: 'Using the :target pseudo-class in selectors' -slug: 'Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors' -translation_of: 'Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors' ---- -<p><span class="comment">When a URL points at a specific piece of a document, it can be difficult to ascertain. Find out how you can use some simple CSS to draw attention to the target of a URL and improve the user's experience.</span> {{CSSRef}}</p> - -<p>Membantu mengidentifikasi tujuan dari sebuah tautan yang ditujukan pada sebuan bagian khusus sebuah dokumen, <a class="external" href="http://www.w3.org/TR/css3-selectors/#target-pseudo">CSS3 Selectors</a> mengenalkan <strong>{{ Cssxref(":target") }} </strong><a href="/en/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> - -<h3 id="Picking_a_Target" name="Picking_a_Target">Penentuan Sebuah Target</h3> - -<p>pseudo-class<code> {{ Cssxref(":target") }} digunakan pada menampilkan target elemen dari sebuah URI berisikan sebuah pengidentifikasi menurut bagian bagian. Sebagai contoh, pada </code>URI <code><span class="nowiki">http://developer.mozilla.org/en/docs/Using_the_:target_selector#Example berisi bagian bagian pengidentifikasi #Example. Dalam HTML, pengidentifikasi ditemukan sebagai nilai dari masing masing id atau nama attribut, sejak keduanya membagi namespace (kelompok id atau nama) yang sama. Dengan begitu, contoh URI akan menunjukkan kop "Example" dalam dokumen ini.</span> </code></p> - -<p>Misalkan kamu berharap untuk menampilkan sebuah elemen h2 yang merupakan target sebuah URI, tetapi tidak menginginkan sesuatu jenis dari elemen lainnya untuk menemukan sebuah target tampilan. Ini cukup menyederhakan:</p> - -<pre>h2:target {font-weight: bold;} -</pre> - -<p>Ini juga memungkinkan untuk membuat tampilan yang spesifik dari sebuah bagian bagian terkecil sebuah dokumen. Ini dilakukan menggunakan identifikasi nilai yang menemukan URI didalamnya. Dengan begitu, untuk menambahkan sebuah border pada #Example terpisah, kita dapat menuliskannya dengan:</p> - -<pre>#Example:target {border: 1px solid black;}</pre> - -<h3 id="Targeting_the_Root_Element" name="Targeting_the_Root_Element">Menargetkan Seluruh Elemen</h3> - -<p>Jika intensif (berkelanjutan) untuk membuat sebuah "blanket" tampilan yang akan diterapkan pada seluruh target element, selanjutnya seleksi secara umum yang dapat diterapkan didalamnya:</p> - -<pre>:target {color: red;} -</pre> - -<h3 id="Example" name="Example">Contoh</h3> - -<p>Berikut contoh, ada lima poin tautan elemen dalam dokumen yang sama. Menyeleksi link "First", sebagai contoh, akan menyebabkan <h1 id="one"> menjadi target elemen. Catatan bahwa dokumen boleh melompat pada sebuah scroll posisi baru, selama target elemen ditempatkan pada posisi atas dari jendela browser jika memungkinkan. </p> - -<div id="example"> -<pre><h4 id="one">...</h4> <p id="two">...</p> -<div id="three">...</div> <a id="four">...</a> <em id="five">...</em> - -<a href="#one">First</a> -<a href="#two">Second</a> -<a href="#three">Third</a> -<a href="#four">Fourth</a> -<a href="#five">Fifth</a></pre> -</div> - -<h3 id="Conclusion" name="Conclusion">Kesimpulan</h3> - -<p>Dalam kasus dimana sebuah pengidentifikasi poin bagian bagian dari sebuah bagian dokumen, para pembaca bisa jadi dibingungkan tentang yang mana bagian dari dokumen yang mereka anggap untuk dapat dibaca (diseleksi). Dengan gaya target sebuah URI, kebingungan pembaca dapat dikurangi atau dihilangkan. </p> - -<h3 id="Related_Links" name="Related_Links">Related Links</h3> - -<ul> - <li><a class="external" href="http://www.w3.org/TR/css3-selectors/#target-pseudo">CSS3 Selectors #target-pseudo</a></li> - <li><a class="internal" href="/En/CSS/:target" title="En/CSS/:target">CSS Reference :target</a></li> -</ul> - -<div class="originaldocinfo"> -<h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3> - -<ul> - <li>Author(s): Eric Meyer, Standards Evangelist, Netscape Communications</li> - <li>Original Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.</li> - <li>Note: This reprinted article was originally part of the DevEdge site.</li> -</ul> -</div> diff --git a/files/id/web/css/flex-direction/index.html b/files/id/web/css/flex-direction/index.html deleted file mode 100644 index a706f2ac22..0000000000 --- a/files/id/web/css/flex-direction/index.html +++ /dev/null @@ -1,155 +0,0 @@ ---- -title: flex-direction -slug: Web/CSS/flex-direction -translation_of: Web/CSS/flex-direction ---- -<div>{{CSSRef}}</div> - -<p><br> -</p> - -<p dir="ltr"><strong id="docs-internal-guid-3c370947-7fff-bd87-9412-328b8bc6d405">flex-direction </strong>adalah properti css yang menentukan sumbu utama dan arah (normal atau terbalik ) dari flex item yang ditempatkan di flex container / wadah .</p> - -<div>{{EmbedInteractiveExample("pages/css/flex-direction.html")}}</div> - - - -<p>Note that the values <code>row</code> and <code>row-reverse</code> are affected by the directionality of the flex container. If its {{HTMLAttrxRef("dir")}} attribute is <code>ltr</code>, <code>row</code> represents the horizontal axis oriented from the left to the right, and <code>row-reverse</code> from the right to the left; if the <code>dir</code> attribute is <code>rtl</code>, <code>row</code> represents the axis oriented from the right to the left, and <code>row-reverse</code> from the left to the right.</p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="brush:css no-line-numbers notranslate">/* The direction text is laid out in a line */ -flex-direction: row; - -/* Like <row>, but reversed */ -flex-direction: row-reverse; - -/* The direction in which lines of text are stacked */ -flex-direction: column; - -/* Like <column>, but reversed */ -flex-direction: column-reverse; - -/* Global values */ -flex-direction: inherit; -flex-direction: initial; -flex-direction: unset; -</pre> - -<h3 id="Values">Values</h3> - -<p>The following values are accepted:</p> - -<dl> - <dt><code>row</code></dt> - <dd>The flex container's main-axis is defined to be the same as the text direction. The <strong>main-start</strong> and <strong>main-end</strong> points are the same as the content direction.</dd> - <dt><code>row-reverse</code></dt> - <dd>Behaves the same as <code>row</code> but the <strong>main-start</strong> and <strong>main-end</strong> points are permuted.</dd> - <dt><code>column</code></dt> - <dd>The flex container's main-axis is the same as the block-axis. The <strong>main-start</strong> and <strong>main-end</strong> points are the same as the <strong>before</strong> and <strong>after</strong> points of the writing-mode.</dd> - <dt><code>column-reverse</code></dt> - <dd>Behaves the same as <code>column</code> but the <strong>main-start</strong> and <strong>main-end</strong> are permuted.</dd> -</dl> - -<h2 id="Accessibility_concerns">Accessibility concerns</h2> - -<p>Using the <code>flex-direction</code> property with values of <code>row-reverse</code> or <code>column-reverse</code> will create a disconnect between the visual presentation of content and DOM order. This will adversely affect users experiencing low vision navigating with the aid of assistive technology such as a screen reader. If the visual (CSS) order is important, then screen reader users will not have access to the correct reading order.</p> - -<ul> - <li><a class="external external-icon" href="https://tink.uk/flexbox-the-keyboard-navigation-disconnect/" rel="noopener">Flexbox & the keyboard navigation disconnect — Tink</a></li> - <li><a class="external external-icon" href="http://adrianroselli.com/2015/09/source-order-matters.html" rel="noopener">Source Order Matters | Adrian Roselli</a></li> - <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">MDN Understanding WCAG, Guideline 1.3 explanations</a></li> - <li><a class="external external-icon" href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-sequence.html" rel="noopener">Understanding Success Criterion 1.3.2 | W3C Understanding WCAG 2.0</a></li> -</ul> - -<h2 id="Formal_definition">Formal definition</h2> - -<p>{{cssinfo}}</p> - -<h2 id="Formal_syntax">Formal syntax</h2> - -{{csssyntax}} - -<h2 id="Examples">Examples</h2> - -<h3 id="Reversing_flex_container_columns_and_rows">Reversing flex container columns and rows</h3> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html notranslate"><h4>This is a Column-Reverse</h4> -<div id="content"> - <div class="box" style="background-color:red;">A</div> - <div class="box" style="background-color:lightblue;">B</div> - <div class="box" style="background-color:yellow;">C</div> -</div> -<h4>This is a Row-Reverse</h4> -<div id="content1"> - <div class="box1" style="background-color:red;">A</div> - <div class="box1" style="background-color:lightblue;">B</div> - <div class="box1" style="background-color:yellow;">C</div> -</div> -</pre> - -<h4 id="CSS">CSS</h4> - -<pre class="brush: css notranslate">#content { - width: 200px; - height: 200px; - border: 1px solid #c3c3c3; - display: flex; - flex-direction: column-reverse; -} - -.box { - width: 50px; - height: 50px; -} - -#content1 { - width: 200px; - height: 200px; - border: 1px solid #c3c3c3; - display: flex; - flex-direction: row-reverse; -} - -.box1 { - width: 50px; - height: 50px; -}</pre> - -<h4 id="Result">Result</h4> - -<p>{{EmbedLiveSample('Reversing_flex_container_columns_and_rows', '', '550')}}</p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Flexbox', '#flex-direction-property', 'flex-direction')}}</td> - <td>{{Spec2('CSS3 Flexbox')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> - -<p>{{Compat("css.properties.flex-direction")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></em></li> - <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">Ordering flex items</a></em></li> -</ul> diff --git a/files/id/web/css/index.html b/files/id/web/css/index.html deleted file mode 100644 index c4f9c56adb..0000000000 --- a/files/id/web/css/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: CSS -slug: Web/CSS -translation_of: Web/CSS ---- -<p><span class="seoSummary"><strong>Cascading Style Sheets</strong>, dikenal juga sebagai <strong>CSS</strong>, adalah bahasa <a href="/en-US/docs/DOM/stylesheet">stylesheet</a> yang digunakan untuk merubah tampilan dokumen yang terulis dalam <a href="/en-US/docs/HTML" title="The HyperText Mark-up Language">HTML</a></span> atau <a href="/en-US/docs/XML" title="en-US/docs/XML">XML</a> (termasuk variasi bahasa XML seperti <a href="/en-US/docs/SVG" title="en-US/docs/SVG">SVG</a> atau <a href="/en-US/docs/XHTML" title="en-US/docs/XHTML">XHTML</a>). CSS menjelaskan bagaimana elemen terstruktur yang harus ditampilkan di layar, di kertas, dalam cara komunikasi, atau dalam media yang lain.</p> - -<p>CSS adalah salah satu dari bahasa inti dari <em>open web</em> (web berbasis terbuka) dan telah berstandar <a class="external" href="http://w3.org/Style/CSS/#specs">W3C specification</a>. Dibangun dalam berbagai level, CSS1 sekarang sudah kuno, CSS2.1 direkomendasi dan <a href="/en-US/docs/CSS/CSS3" title="CSS3">CSS3</a>, sekarang terbagi dalam modul kecil, bergerak dalam jalur standar.</p> - -<section id="sect1"> -<ul class="card-grid"> - <li><span>Referensi CSS</span> - - <p><a href="/en-US/docs/Web/CSS/Reference" title="en-US/docs/CSS/CSS_Reference">Referensi lengkap</a> untuk <u>pengembang Web musiman</u> menjelaskan setiap properti dan konsep CSS.</p> - </li> - <li><span>CSS Tutorial</span> - <p><a href="/en-US/docs/CSS/Getting_Started" title="en-US/docs/CSS/Getting_Started">Pengenalan langkah demi langkah</a> untuk membantu <u>para pemula</u> yang baru memulai. Di sini menyajikan semua hal yang dibutuhkan.</p> - </li> - <li><span>Demo CSS3</span> - <p><a href="/en-US/demos/tag/tech:css3" title="https://developer.mozilla.org/en-US/demos/tag/tech:css3">Kumpulan Demo</a> memperlihatkan <u>teknologi terakhir CSS</u> dalam aksinya: dorongan untuk berkreatifitas.</p> - </li> -</ul> - -<div class="row topicpage-table"> -<div class="section"> -<h2 class="Documentation" id="Documentation" name="Documentation">Dokumentasi dan tutorial</h2> - -<dl> - <dt>Kunci konsep CSS</dt> - <dd>Menjelaskan <a href="/en-US/docs/CSS/Syntax" title="/en-US/docs/CSS/Syntax">syntax dan lembar bahasa</a> dan memperkenalkan dasar-dasar seperti <a href="/en-US/docs/CSS/Specificity" title="Specificity">specificity</a> dan <a href="/en-US/docs/CSS/inheritance" title="inheritance">inheritance</a>, <a href="/en-US/docs/CSS/box_model" title="Box model">box model</a> dan <a href="/en-US/docs/CSS/margin_collapsing" title="Margin collapsing">margin collapsing</a>, <a href="/en-US/docs/CSS/Understanding_z-index/The_stacking_context" title="The stacking context">stacking</a> dan konteks <a href="/en-US/docs/CSS/block_formatting_context" title="block formatting context">block-formatting</a>, atau <a href="/en-US/docs/CSS/initial_value" title="initial value">initial</a>, <a href="/en-US/docs/CSS/computed_value" title="computed value">computed</a>, <a href="/en-US/docs/CSS/used_value" title="used value">used</a> dan nilai <a href="/en-US/docs/CSS/actual_value" title="actual value">actual</a>. Entitas seperti <a href="/en-US/docs/CSS/Shorthand_properties" title="CSS/Shorthand_properties">CSS shorthand properties</a> juga dijelaskan.</dd> - <dt><a href="/en-US/docs/Web/Guide/CSS" title="/en-US/docs/Web/Guide/CSS">Panduan Pengembang CSS</a></dt> - <dd>Artikel yang membantu mempelajari tehnik CSS untuk membuat konten anda bersinar.</dd> -</dl> - -<h2 class="Tools" id="Tools" name="Tools">Alat untuk pengembang CSS</h2> - -<ul> - <li><a class="external" href="http://jigsaw.w3.org/css-validator/">W3C CSS Validation Service</a> mengecek bila CSS yang diberikan adalah valid. Ini adalah alat debugging yang berguna.</li> - <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/1843">Firebug extension </a><span class="external">milik Firefox, extensi populer</span> yang mengizinkan untuk merubah secara langsung CSS dalam situs yang dilihat. Sangat praktis untuk beberapa perubahan, bahkan ekstensi ini berguna lebih banyak.</li> - <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/60">Web Developer extension</a> milik FireFox juga mengizinkan melihat dan merubah scara langsung CSS dalam situs yang dilihat. lebih mudah daripada Firebug, walaupun kurang berguna.</li> - <li><a class="external link-https" href="https://addons.mozilla.org/en-US/firefox/addon/179">EditCSS extension</a> milik FireFox mengizinkan mengubah CSS dalam sidebar.</li> -</ul> - -<h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Topik yang berhubungan</h2> - -<ul> - <li>Pembelajaran Mozilla <a href="/en-US/learn/css" title="https://developer.mozilla.org/en-US/learn/css">sumber CSS</a>.</li> - <li>Bahasa Web terbuka dimana CSS sering digunakan: <a href="/en-US/docs/HTML" title="en-US/docs/HTML">HTML</a>, <a href="/en-US/docs/SVG" title="SVG">SVG</a>, <a href="/en-US/docs/XHTML" title="en-US/docs/XHTML">XHTML</a>, <a href="/en-US/docs/XML" title="en-US/docs/XML">XML</a>.</li> - <li>Teknologi Mozilla dimana ada penggunaan CSS: <a href="/en-US/docs/XUL" title="en-US/docs/XUL">XUL</a>, Firefox dan Thunderbird <a href="/en-US/docs/Extensions" title="en-US/docs/Extensions">extensions</a> dan <a href="/en-US/docs/Themes" title="en-US/docs/Themes">themes</a>.</li> -</ul> -</div> - -<div class="section"> -<h2 class="Related_Topics" id="News" name="News">Berita</h2> - -<ul> - <li><a href="http://www.w3.org/TR/css-text-decor-3/" title="http://www.w3.org/TR/css-text-decor-3/">CSS Text-decoration Level 3</a> mencapai status <em>Candidate Recommandation</em>, termasuk properti <code>text-decoration-*</code> dan <code>text-emphasis-*</code>. Berikut lingk yang menjelaskan hal ini {{cssxref("text-shadow")}}. (<em>August 1st, 2013)</em></li> - <li>Gecko sekarang suport {{cssxref("background-origin")}}<code>: local</code>. Ini tersedia dari Firefox 25 (dan siap juga dalam Nightly). <em>(July 25th, 2013)</em></li> - <li><a href="http://www.w3.org/TR/pointerevents/" title="http://www.w3.org/TR/pointerevents/">Pointer Events</a> mencapai status <em>Candidate Recommandation</em>, berarti properti CSS <code>touch-action</code>, yang hanya dapat diimplementasikan pada IE10 (dengan prefiks <code>-ms-</code> ), sekarang bukan percobaan lagi. <em>(May 6th, 2013)</em></li> - <li>Gecko suport <a href="/en-US/docs/CSS/Tutorials/Using_CSS_flexible_boxes" title="/en-US/docs/CSS/Tutorials/Using_CSS_flexible_boxes"><em>flexible boxes</em></a> yang telah ditambahkan untuk menyesuaikan spesifikasi terkini tercantum: dari Firefox 23 {{cssxref("::before")}} dan {{cssxref("::after")}} bersama dengan item fleksibel, dan semacam itu, dapat dipindah menggunakan {{cssxref("order")}} dan {{cssxref("align-self")}}. <em>(May 3rd, 2013)</em></li> -</ul> -</div> -</div> -</section> diff --git a/files/id/web/css/mask-border-width/index.html b/files/id/web/css/mask-border-width/index.html deleted file mode 100644 index 75f8f6ff0f..0000000000 --- a/files/id/web/css/mask-border-width/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: mask-border-width -slug: Web/CSS/mask-border-width -translation_of: Web/CSS/mask-border-width ---- -<div>{{CSSRef}}</div> - -<p>The <strong><code>mask-border-width</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> properti mengatur lebar elemen <a href="/en-US/docs/Web/CSS/mask-border">mask border</a>.</p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="brush:css no-line-numbers notranslate">/* Keyword value */ -mask-border-width: auto; - -/* <length> value */ -mask-border-width: 1rem; - -/* <percentage> value */ -mask-border-width: 25%; - -/* <number> value */ -mask-border-width: 3; - -/* vertical | horizontal */ -mask-border-width: 2em 3em; - -/* top | horizontal | bottom */ -mask-border-width: 5% 15% 10%; - -/* top | right | bottom | left */ -mask-border-width: 5% 2em 10% auto; - -/* Global values */ -mask-border-width: inherit; -mask-border-width: initial; -mask-border-width: unset; -</pre> - -<p>The <code>mask-border-width</code> properti dapat ditentukan menggunakan satu, dua, tiga, atau empat nilai yang dipilih dari daftar nilai di bawah.</p> - -<ul> - <li>Ketika <strong>satu</strong> nilai ditentukan, ini menerapkan lebar yang sama ke <strong>keempat sisinya.</strong></li> - <li>Ketika <strong>dua</strong> nilai ditentukan, lebar pertama diterapkan ke <strong>atas dan bawah</strong>, yang kedua setelah <strong>kiri dan kanan.</strong></li> - <li>Ketika <strong>tiga</strong> nilai ditentukan, lebar pertama diterapkan ke <strong>atas</strong>, yang kedua setelah <strong>kiri dan kanan</strong>, yang kedua setelah <strong>bawah</strong>.</li> - <li>Ketika <strong>empat</strong> nilai ditentukan, lebar berlaku untuk <strong>atas</strong>, <strong>kanan</strong>, <strong>bawah</strong>, dan <strong>kiri</strong> dalam urutan itu (searah jarum jam).</li> -</ul> - -<h3 id="Values">Values</h3> - -<dl> - <dt><code><length-percentage></code></dt> - <dd>Lebar batas topeng, ditetapkan sebagai {{cssxref ("<length>")}} atau {{cssxref ("<percentage>")}}. Persentase relatif terhadap lebar area perbatasan untuk offset horizontal dan tinggi area perbatasan untuk offset vertikal. Tidak boleh negatif.</dd> - <dt><code><number></code></dt> - <dd>Lebar batas topeng, ditentukan sebagai kelipatan yang sesuai {{cssxref("border-width")}}. Tidak boleh negatif.</dd> - <dt><code>auto</code></dt> - <dd>Lebar batas topeng dibuat sama dengan lebar atau tinggi intrinsik (mana yang dapat diterapkan) yang sesuai {{cssxref("mask-border-slice")}}. Jika gambar tidak memiliki dimensi intrinsik yang diperlukan, sesuai <code>border-width</code> digunakan sebagai gantinya.</dd> -</dl> - -<h2 id="Formal_definition">Formal definition</h2> - -<p>{{cssinfo}}</p> - -<h2 id="Formal_syntax">Formal syntax</h2> - -{{csssyntax}} - -<h2 id="Examples">Examples</h2> - -<h3 id="Basic_usage">Basic usage</h3> - -<p>Properti ini tampaknya belum didukung di mana pun. Ketika akhirnya mulai didukung, itu akan berfungsi untuk menentukan lebar topeng perbatasan - mengatur ini ke nilai yang berbeda menjadi <code><a href="/en-US/docs/Web/CSS/mask-border-slice">mask-border-slice</a></code> akan menyebabkan irisan diskalakan agar sesuai dengan topeng perbatasan.</p> - -<pre class="brush: css notranslate">mask-border-width: 30 fill;</pre> - -<p>Browser berbasis Chromium mendukung versi lama properti ini — <code>mask-box-image-width</code> — dengan awalan:</p> - -<pre class="brush: css notranslate">-webkit-mask-box-image-width: 20px;</pre> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: The <code><a href="/en-US/docs/Web/CSS/mask-border">mask-border</a></code> Halaman menampilkan contoh yang berfungsi (menggunakan properti topeng perbatasan awalan kedaluwarsa yang didukung di Chromium), sehingga Anda bisa mendapatkan gambaran tentang efeknya.</p> -</div> - -<h2 id="Specifications" name="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Masks", "#propdef-mask-border-width", "mask-border-width")}}</td> - <td>{{Spec2("CSS Masks")}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>TBD</p> 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 deleted file mode 100644 index 9fe60a8e8c..0000000000 --- a/files/id/web/css/media_queries/using_media_queries/index.html +++ /dev/null @@ -1,631 +0,0 @@ ---- -title: Media query CSS -slug: Web/CSS/Media_Queries/Using_media_queries -translation_of: Web/CSS/Media_Queries/Using_media_queries -original_slug: Web/Guide/CSS/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 deleted file mode 100644 index b8dfca3c45..0000000000 --- a/files/id/web/css/reference/index.html +++ /dev/null @@ -1,186 +0,0 @@ ---- -title: Referensi CSS -slug: Web/CSS/Reference -translation_of: Web/CSS/Reference -original_slug: Web/CSS/referensi ---- -<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/text-transform/index.html b/files/id/web/css/text-transform/index.html deleted file mode 100644 index b9fbd65f0c..0000000000 --- a/files/id/web/css/text-transform/index.html +++ /dev/null @@ -1,307 +0,0 @@ ---- -title: text-transform -slug: Web/CSS/text-transform -translation_of: Web/CSS/text-transform ---- -<div>{{CSSRef}}</div> - -<p>Properti CSS <strong><code>text-transform</code></strong> menerangkan bagaimana mengatur teks sebuah elemen. Properti ini dapat digunakan untuk membuat sebuah teks menjadi besar atau kecil semua, atau membuat setiap kata dikapitalisasi.</p> - -<pre class="brush:css no-line-numbers">/* Nilai Kata-kunci */ -text-transform: capitalize; -text-transform: uppercase; -text-transform: lowercase; -text-transform: none; -text-transform: full-width; - -/* Nilai Global */ -text-transform: inherit; -text-transform: initial; -text-transform: unset; -</pre> - -<p>Properti <code>text-transform</code> memperhatikan peraturan khusus untuk setiap bahasa, seperti:</p> - -<ul> - <li> - <p>Dalam bahasa daerah Turki, seperti bahasa Turki (<code>tr</code>), bahasa Azerbaijan (<code>az</code>), Tatar Krimean (<code>crh</code>), Tatar Volga (<code>tt</code>), dan bahasa Bashkir (<code>ba</code>), terdapat dua macam i, yaitu dengan dan tanpa titik, dan dua pasangan huruf: <code>i</code>/<code>İ</code> and <code>ı</code>/<code>I</code>.</p> - </li> - <li> - <p>Dalam bahasa Jerman (<code>de</code>), huruf besar <code>ß</code> menjadi <code>SS</code>.</p> - </li> - <li> - <p>Dalam bahasa Belanda (<code>nl</code>), dwihuruf <code>ij</code> diubah menjadi <code>IJ</code>, bahkan dengan pilihan <code>text-transform: capitalize</code>, yang seharusnya hanya mengubah huruf pertama dari kata menjadi huruf besar.</p> - </li> - <li> - <p>Dalam bahasa Yunani (<code>el</code>), huruf vokal kehilangan aksen saat semua huruf dalam kata adalah huruf besar (<code>ά</code>/<code>Α</code>), kecuali untuk huruf <span lang="el">eta</span> disjungtif (<code>ή</code>/<code>Ή</code>). Diftong dengan aksen pada huruf vokal pertama dihilangkan dan mendapat diaeresis pada huruf vokal kedua (<code>άι</code>/<code>ΑΪ</code>).</p> - </li> - <li> - <p>Dalam bahasa Yunani (<code>el</code>), huruf sigma kecil mempunyai dua bentuk: <code>σ</code> dan <code>ς</code>. <code>ς</code> digunakan hanya saat sigma terdapat di akhir kata. Sewaktu menerapkan <code>text-transform: lowercase</code> kepada huruf sigma besar (<code>Σ</code>), peramban perlu memilih huruf kecil yang tepat berdasarkan konteksnya.</p> - </li> - <li>Dalam bahasa Irlandia (<code>ga</code>), huruf pendahulu tertentu tetap menjadi huruf kecil saat dasar awal dikapitalkan, contohnya <code>text-transform: uppercase</code> akan mengubah <code>ar aon tslí</code> menjadi <code>AR AON tSLÍ</code> dan bukan menjadi seperti yang dikira orang <code>AR AON TSLÍ </code>(hanya Firefox). Pada beberapa kasus, garis-sambung juga dihilangkan saat pengubahan menjadi huruf besar: <code>an t-uisce</code> berubah menjadi <code>AN tUISCE </code>(dan garis-sambung ditambahkan kembali saat dilakukan <code>text-transform: lowercase</code>)</li> -</ul> - -<p>Pilihan bahasa didefinisikan dengan atribut HTML <code>lang</code> atau dengan atribut XML <code>xml:lang</code>.</p> - -<p>Dukungan untuk kasus-kasus tertentu tidak sama untuk semua peramban, harap periksa <a href="#Browser_compatibility">tabel kompatibilitas peramban</a>.</p> - -<p>{{cssinfo}}</p> - -<h2 id="Syntax">Syntax</h2> - -<dl> - <dt><code>capitalize</code></dt> - <dd> - <p>Adalah kata kunci yang mengubah secara paksa <em>huruf</em> pertama dari setiap kata menjadi huruf besar. Karakter lainnya tidak berubah; huruf-huruf tersebut akan tetap seperti pertama kali dituliskan pada katanya. Sebuah huruf adalah karakter Unicode dari kategori Huruf atau Angka umum {{experimental_inline}} : pilihan ini tidak memasukkan tanda baca atau simbal pada awal kata.</p> - - <div class="note">Penulis tidak seharusnya mengharapkan <code class="css">capitalize</code> untuk mengikuti konvensi huruf besar untuk bahasa tertentu (seperti mengabaikan artikel dalam bahasa Inggris).</div> - - <div class="note">Kata kunci <code>capitalize</code> kurang dispesifikasikan pada CSS 1 dan CSS 2.1. Terdapat perbedaan antara peramban untuk memperhitungkan huruf pertama (Firefox menganggap - dan _ sebagai huruf, tetapi peramban lain tidak. Baik Webkit dan Gecko tidak dengan tepat menanggap simbol berdasarkan huruf seperti <code>ⓐ</code> sebagai benar-benar huruf. Internet Explorer 9 menerapkan definisi CSS 2 yang paling mendekati, tetapi dengan beberapa kasus sangat aneh). Dengan mendefinisikan bagaimana penerapan yang benar secara jelas, CSS Text Level 3 membersihkan kekacauan ini. Baris <code>capitalize</code> di tabel kompatibilitas peramban mempunyai informasi pada versi berapa mesin peramban mulai mendukung penerapan ini</div> - </dd> - <dt><code>uppercase</code></dt> - <dd>Adalah kata kunci yang mengubah semua karakter menjadi huruf besar.</dd> - <dt><code>lowercase</code></dt> - <dd>Adalah kata kunci yang mengubah semua karakter menjadi huruf kecil.</dd> - <dt><code>none</code></dt> - <dd>Adalah kata kunci yang mencegah perubahan dari semua karakter.</dd> - <dt><code>full-width</code> {{experimental_inline}}</dt> - <dd>Adalah kata kunci yang mengharuskan penulisan karakter — biasanya ideogram dan tulisan latin — di dalam kotak persegi, yang membuat mereka dapat sejajar dalam tulisan Asia Timur kebanyakan (seperti bahasa Cina atau Jepang).</dd> - -</dl> - -<h3 id="Sintaksis_Formal">Sintaksis Formal</h3> - -{{csssyntax}} - -<h2 id="Contoh">Contoh</h2> - -<h3 id="none" name="none"><code>none</code></h3> - -<pre class="brush: html"><p>Kalimat Awal - <strong><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong> -</p></code> -<p>text-transform: none - <strong><span><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></span></strong> -</p> -</pre> - -<pre class="brush: css">span { - text-transform: none; -} -strong { float: right; }</pre> - -<p>This demonstrates no text transformation.</p> - -<p>{{ EmbedLiveSample('none', '100%', '100px') }}</p> - -<h3 id="capitalize_(General)" name="capitalize_(General)"><code>capitalize</code> (Umum)</h3> - -<pre class="brush: html"><p>Kalimat Awal - <strong><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong> -</p></code> -<p>text-transform: capitalize -<code> <strong></code><span><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></span><code></strong></code> -</p></pre> - -<pre class="brush: css">span { - text-transform: capitalize; -} -strong { float: right; }</pre> - -<p>Contoh ini menunjukkan kata yang dikapitalkan.</p> - -<p>{{ EmbedLiveSample('capitalize_(General)', '100%', '100px') }}</p> - -<h3 id="capitalize_(Punctuation)" name="capitalize_(Punctuation)"><code>capitalize</code> (Tanda Baca)</h3> - -<pre class="brush: html"><p>Kalimat Awal - <strong><code>(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!</code><code></strong> -</p></code> -<p>text-transform: capitalize - <code><strong></code><span><code>(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!</code></span><code></strong></code> -</p></pre> - -<pre class="brush: css">span { - text-transform: capitalize; -} -strong { float: right; }</pre> - -<p>Contoh ini mennjukkan bagaimana tanda baca di awal sebuah kata diabaikan. Kata kunci ini bekerja pada huruf pertama yang termasuk dalam bagian karakter Unicode dari kategori Huruf dan Angka umum.</p> - -<p>{{ EmbedLiveSample('capitalize_(Punctuation)', '100%', '100px') }}</p> - -<h3 id="capitalize_(Symbols)" name="capitalize_(Symbols)"><code>capitalize</code> (Simbol)</h3> - -<pre class="brush: html"><p>Kalimat Awal - <strong><code>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</code><code></strong> -</p></code> -<p>text-transform: capitalize - <code><strong></code><span><code>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</code></span><code></strong></code> -</p></pre> - -<pre class="brush: css">span { - text-transform: capitalize; -} -strong { float: right; }</pre> - -<p>Contoh ini menunjukkan bagaimana simbol di awal kata diabaikan. Kata kunci ini bekerja pada huruf pertama yang termasuk dalam bagian karakter Unicode dari kategori Huruf dan Angka umum.</p> - -<p>{{ EmbedLiveSample('capitalize_(Symbols)', '100%', '100px') }}</p> - -<h3 id="capitalize_(Dutch_ij_digraph)" name="capitalize_(Dutch_ij_digraph)"><code>capitalize</code> (dwihuruf Belanda <em>ij</em>)</h3> - -<pre class="brush: html"><p>Kalimat Awal - <strong lang="nl"><code>The Dutch word: "<span lang="nl">ijsland</span>" starts with a digraph.</code><code></strong> -</p></code> -<p>text-transform: capitalize - <code><strong></code><span lang="nl"><code>The Dutch word: "<span lang="nl">ijsland</span>" starts with a digraph.</code></span><code></strong></code> -</p></pre> - -<pre class="brush: css">span { - text-transform: capitalize; -} -strong { float: right; }</pre> - -<p>Contoh ini menunjukkan bagaimana dwihuruf bahasa Belanda <em>ij</em> harus diperlakukan sebagai huruf tunggal.</p> - -<p>{{ EmbedLiveSample('capitalize_(Dutch_ij_digraph)', '100%', '100px') }}</p> - -<h3 id="uppercase_(General)" name="uppercase_(General)"><code>uppercase</code> (Umum)</h3> - -<pre class="brush: html"><p>Kalimat Awal - <strong><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code><code></strong> -</p></code> -<p>text-transform: uppercase - <code><strong></code><span><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></span><code></strong></code> -</p></pre> - -<pre class="brush: css">span { - text-transform: uppercase; -} -strong { float: right; }</pre> - -<p>Contoh ini menunjukkan bagaimana kalimat diubah menjadi huruf besar.</p> - -<p>{{ EmbedLiveSample('uppercase_(General)', '100%', '100px') }}</p> - -<h3 id="uppercase_(Greek_Vowels)" name="uppercase_(Greek_Vowels)"><code>uppercase</code> (Huruf Vokal Yunani)</h3> - -<pre class="brush: html"><p>Kalimat Awal - <strong><code>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</code><code></strong> -</p></code> -<p>text-transform: uppercase - <code><strong></code><span><code>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</code></span><code></strong></code> -</p></pre> - -<pre class="brush: css">span { - text-transform: uppercase; -} -strong { float: right; }</pre> - -<p>Contoh ini menunjukkan bagaimana huruf vokal bahasa Yunani, kecuali huruf disjungtif <em>eta</em>, kehilangan aksen, dan aksen pada huruf vokal pertama dari pasangan vokal menjadi diaeresis pada huruf vokal kedua.</p> - -<p>{{ EmbedLiveSample('uppercase_(Greek_Vowels)', '100%', '100px') }}</p> - -<h3 id="lowercase_(General)" name="lowercase_(General)"><code>lowercase</code> (Umum)</h3> - -<pre class="brush: html"><p>Kalimat Awal - <strong><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code><code></strong> -</p></code> -<p>text-transform: lowercase - <code><strong></code><span><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></span><code></strong></code> -</p></pre> - -<pre class="brush: css">span { - text-transform: lowercase; -} -strong { float: right; }</pre> - -<p>Contoh ini menunjukkan bagaimana kalimat diubah menjadi huruf kecil.</p> - -<p>{{ EmbedLiveSample('lowercase_(General)', '100%', '100px') }}</p> - -<h3 id="lowercase_(Greek_Σ)" name="lowercase_(Greek_Σ)"><code>lowercase</code> (Huruf Yunani Σ)</h3> - -<pre class="brush: html"><p>Kalimat Awal - <strong><code>Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</code><code></strong> -</p></code> -<p>text-transform: lowercase - <code><strong></code><span><code>Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</code></span><code></strong></code> -</p></pre> - -<pre class="brush: css">span { - text-transform: lowercase; -} -strong { float: right; }</pre> - -<p>Contoh ini menunjukkan bagaimana karakter bahasa Yunani sigma (<code>Σ</code>) diubah menjadi huruf kecil sigma biasa (<code>σ</code>) atau varian akhir-kata (<code>ς</code>), tergantung kepada konteksnya.</p> - -<p>{{ EmbedLiveSample('lowercase_(Greek_Σ)', '100%', '100px') }}</p> - -<h3 id="full-width_(General)" name="full-width_(General)"><code>full-width</code> (Umum)</h3> - -<pre class="brush: html"><p>Kalimat Awal - <strong>0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~<code></strong> -</p></code> -<p>text-transform: full-width - <code><strong></code><span>0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~</span><code></strong></code> -</p></pre> - -<pre class="brush: css">span { - text-transform: full-width; -} -strong { width: 100%; float: right; }</pre> - -<p>Beberapa karakter mempunyai dua bentuk, yaitu lebar normal dan penuh, dengan kode nilai Unicode yang berbeda. Versi lebar-penuh digunakan untuk membuat penggabungan penulisan dengan karakter ideografi Asia dengan mulus.</p> - -<p>{{ EmbedLiveSample('full-width_(General)', '100%', '175px') }}</p> - -<h2 id="Spesifikasi">Spesifikasi</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spesifikasi</th> - <th scope="col">Status</th> - <th scope="col">Komentar</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Text', '#text-transform', 'text-transform')}}</td> - <td>{{Spec2('CSS4 Text')}}</td> - <td>Dari {{SpecName('CSS3 Text', '#text-transform', 'text-transform')}}, menambahkan kata kunci <code>full-size-kana</code> dan membolehkan kata kunci <code>full-width</code> digunakan bersama dengan kata kunci lainnya.</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Text', '#text-transform', 'text-transform')}}</td> - <td>{{Spec2('CSS3 Text')}}</td> - <td>Dari {{SpecName('CSS2.1', 'text.html#caps-prop', 'text-transform')}}, memperluas cakupan huruf ke semua karakter Unicode dalam kategori Angka dan Huruf umum. Mengubah penerapan <code>capitalize</code> ke huruf pertama kata, mengabaikan tanda baca atau simbol di awal. Menambahkan kata kunci <code>full-width</code> untuk membuat penggabungan penulisan dengan karakter ideografi dan alfabet menjadi mulus.</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'text.html#caps-prop', 'text-transform')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>Dari {{SpecName('CSS1', '#text-transform', 'text-transform')}}, memperluas cakupan huruf dengan tulisan bikameral non-latin.</td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#text-transform', 'text-transform')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>Definisi awal</td> - </tr> - </tbody> -</table> - -<h2 id="Kompatibilitas_Peramban">Kompatibilitas Peramban</h2> - -<p> </p> - -<div class="hidden">Tabel kompatibilitas di halaman ini dibuat dari data terstruktur. Apabaila anda mau menambahkan data, harap lakukan <em>check-out</em> pada <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> dan mengirimkan <em>pull-request</em> kepada kami.</div> - -<p>{{Compat("css.properties.text-transform")}}</p> - -<p> </p> - -<h2 id="Lihat_juga">Lihat juga</h2> - -<ul> - <li>{{cssxref("font-variant")}}</li> -</ul> diff --git a/files/id/web/css/type_selectors/index.html b/files/id/web/css/type_selectors/index.html deleted file mode 100644 index 5302eef6eb..0000000000 --- a/files/id/web/css/type_selectors/index.html +++ /dev/null @@ -1,121 +0,0 @@ ---- -title: Type selectors -slug: Web/CSS/Type_selectors -translation_of: Web/CSS/Type_selectors ---- -<div>{{CSSRef("Selectors")}}</div> - -<h2 id="Rangkuman">Rangkuman</h2> - -<p>Gaya seleksi CSS menampilkan elemen dengan nama node (bagian khusus nama elemen). Digunakan tersendiri, karenanya, sebuah tipe seleksi untuk sebuah nama node bagian terkecil menyeleksi seluruh bagian bagian dari tipe tersebut -- yang mana bahwa, dengan nama node tersebut -- didalam dokumen.</p> - -<h2 id="Bentuk_Penulisan">Bentuk Penulisan</h2> - -<pre class="syntaxbox">element { <em>style properties</em> } -</pre> - -<h2 id="Contoh">Contoh</h2> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">span { - background-color: DodgerBlue; - color: #ffffff; -} -</pre> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><span>Here's a span with some text.</span> -<p>Here's a p with some text.</p> -</pre> - -<h3 id="Hasil">Hasil</h3> - -<p>{{EmbedLiveSample('Example', 200, 100)}}</p> - -<h2 id="Spesifikasi">Spesifikasi</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spesifikasi</th> - <th scope="col">Status</th> - <th scope="col">Komentar</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Selectors', '#type-selectors', 'Type (tag name) selector')}}</td> - <td>{{Spec2('CSS4 Selectors')}}</td> - <td>Tanpa Perubahan</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Selectors', '#type-selectors', 'type selectors')}}</td> - <td>{{Spec2('CSS3 Selectors')}}</td> - <td>Tanpa Perubahan</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'selector.html#type-selectors', 'type selectors')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#basic-concepts', 'type selectors')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>Defenisi Tanda</td> - </tr> - </tbody> -</table> - -<h2 id="Dukungan_Browser">Dukungan Browser</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>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for 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>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> |