From 95aca4b4d8fa62815d4bd412fff1a364f842814a Mon Sep 17 00:00:00 2001 From: Ryan Johnson Date: Thu, 29 Apr 2021 16:16:42 -0700 Subject: remove retired locales (#699) --- .../id/web/css/@font-face/font-display/index.html | 101 ---- files/id/web/css/@font-face/index.html | 199 ------- files/id/web/css/_colon_active/index.html | 143 ----- files/id/web/css/background-color/index.html | 149 ----- files/id/web/css/css_box_model/index.html | 115 ---- .../introduction_to_the_css_box_model/index.html | 73 --- files/id/web/css/css_selectors/index.html | 154 ----- .../index.html | 64 --- files/id/web/css/flex-direction/index.html | 155 ----- files/id/web/css/index.html | 64 --- files/id/web/css/mask-border-width/index.html | 104 ---- .../media_queries/using_media_queries/index.html | 631 --------------------- files/id/web/css/reference/index.html | 186 ------ files/id/web/css/text-transform/index.html | 307 ---------- files/id/web/css/type_selectors/index.html | 121 ---- 15 files changed, 2566 deletions(-) delete mode 100644 files/id/web/css/@font-face/font-display/index.html delete mode 100644 files/id/web/css/@font-face/index.html delete mode 100644 files/id/web/css/_colon_active/index.html delete mode 100644 files/id/web/css/background-color/index.html delete mode 100644 files/id/web/css/css_box_model/index.html delete mode 100644 files/id/web/css/css_box_model/introduction_to_the_css_box_model/index.html delete mode 100644 files/id/web/css/css_selectors/index.html delete mode 100644 files/id/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html delete mode 100644 files/id/web/css/flex-direction/index.html delete mode 100644 files/id/web/css/index.html delete mode 100644 files/id/web/css/mask-border-width/index.html delete mode 100644 files/id/web/css/media_queries/using_media_queries/index.html delete mode 100644 files/id/web/css/reference/index.html delete mode 100644 files/id/web/css/text-transform/index.html delete mode 100644 files/id/web/css/type_selectors/index.html (limited to 'files/id/web/css') 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 ---- -
{{CSSRef}}
- -

The font-display descriptor determines how a font face is displayed based on whether and when it is downloaded and ready to use.

- -

The font display timeline

- -

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.

- -
-
Font block period
-
If the font face is not loaded, any element attempting to use it must render an invisible fallback font face. If the font face successfully loads during this period, it is used normally.
-
Font swap period
-
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.
-
Font failure period
-
If the font face is not loaded, the user agent treats it as a failed load causing normal font fallback.
-
- -

{{cssinfo}}

- -

Syntax

- -
/* Keyword values */
-font-display: auto;
-font-display: block;
-font-display: swap;
-font-display: fallback;
-font-display: optional;
- -

Values

- -
-
auto
-
The font display strategy is defined by the user agent.
-
block
-
Gives the font face a short block period and an infinite swap period.
-
swap
-
Gives the font face an extremely small block period and an infinite swap period.
-
fallback
-
Gives the font face an extremely small block period and a short swap period.
-
optional
-
Gives the font face an extremely small block period and no swap period.
-
- -

Formal syntax

- -{{csssyntax}} - -

Examples

- -
@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;
-}
- -

Specifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS4 Fonts', '#font-display-desc', 'font-display')}}{{Spec2('CSS4 Fonts')}}Initial definition
- -

Browser compatibility

- - - -

{{Compat("css.at-rules.font-face.font-display")}}

- -

See also

- - 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 ---- -
{{CSSRef}}
- -

The @font-face CSS at-rule 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. If the local() 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 url() function is downloaded and used.

- -

By allowing authors to provide their own fonts, @font-face 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.

- -

It's common to use both url() and local() 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.

- -

The @font-face at-rule may be used not only at the top level of a CSS, but also inside any CSS conditional-group at-rule.

- -
@font-face {
-  font-family: "Open Sans";
-  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
-       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
-}
- -

Syntax

- -

Descriptors

- -
-
{{cssxref("@font-face/font-display", "font-display")}}
-
Determines how a font face is displayed based on whether and when it is downloaded and ready to use.
-
{{cssxref("@font-face/font-family", "font-family")}}
-
Specifies a name that will be used as the font face value for font properties.
-
{{cssxref("@font-face/font-stretch", "font-stretch")}}
-
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 font-stretch: 50% 200%;
-
{{cssxref("@font-face/font-style", "font-style")}}
-
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 font-style: oblique 20deg 50deg;
-
{{cssxref("@font-face/font-weight", "font-weight")}}
-
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 font-weight: 100 400;
-
{{cssxref("@font-face/font-variant", "font-variant")}}
-
A {{cssxref("font-variant")}} value.
-
{{cssxref("font-feature-settings", "font-feature-settings")}}
-
Allows control over advanced typographic features in OpenType fonts.
-
{{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}
-
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.
-
{{cssxref("@font-face/src", "src")}}
-
-

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.

- -

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 format() function:

- - 
src: url(ideal-sans-serif.woff) format("woff"),
-     url(basic-sans-serif.ttf) format("truetype");
- -

The available types are: "woff", "woff2", "truetype", "opentype", "embedded-opentype", and "svg".

-
-
{{cssxref("@font-face/unicode-range", "unicode-range")}}
-
The range of Unicode code points to be used from the font.
-
- -

Formal syntax

- -{{csssyntax}} - -

Examples

- -

This example simply specifies a downloadable font to use, applying it to the entire body of the document:

- -

View the live example

- -
<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>
-
- -

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:

- -
@font-face {
-  font-family: MyHelvetica;
-  src: local("Helvetica Neue Bold"),
-       local("HelveticaNeue-Bold"),
-       url(MgOpenModernaBold.ttf);
-  font-weight: bold;
-}
-
- -

Font MIME Types

- - - - - - - - - - - - - - - - - - - - - - - - - - -
FormatMIME type
TrueTypefont/ttf
OpenTypefont/otf
Web Open Font Formatfont/woff
Web Open Font Format 2font/woff2
- -

Notes

- - - -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('WOFF2.0', '', 'WOFF2 font format')}}{{Spec2('WOFF2.0')}}Font format specification with new compression algorithm
{{SpecName('WOFF1.0', '', 'WOFF font format')}}{{Spec2('WOFF1.0')}}Font format specification
{{SpecName('CSS3 Fonts', '#font-face-rule', '@font-face')}}{{Spec2('CSS3 Fonts')}}Initial definition
- -

Browser compatibility

- - - -

{{Compat("css.at-rules.font-face")}}

- -

See also

- - 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' ---- -
{{CSSRef}}
- -

Rangkuman

- -

:active CSS pseudo-class 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.  :active 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.

- -

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 LHVA-order:  :link — :visited — :hover — :active.

- -
Cataan: Pada system dengan multi tombol mouse, CSS 3 spesifik bahwa :active pseudo-class harus hanya diterapkan pada tombol utama; pada klik kanan mouse, ini secara tipikal kebanyakan pada tombol kiri.
- -

Contoh

- -
-

HTML

- -
<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>
- -

CSS

- -
body { background-color: #ffffc9 }
-a:link { color: blue } /* unvisited links */
-a:visited { color: purple } /* visited links */
-a:hover { font-weight: bold } /* user hovers */
-a:active { color: lime } /* active links */
-
- -
{{EmbedLiveSample('example',600,140)}}
- -

Spesifikasi

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS4 Selectors', '#active-pseudo', ':active')}}{{Spec2('CSS4 Selectors')}}No change.
{{SpecName('CSS3 Selectors', '#useraction-pseudos', ':active')}}{{Spec2('CSS3 Selectors')}}No change.
{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':active')}}{{Spec2('CSS2.1')}}No change.
{{SpecName('CSS1', '#anchor-pseudo-classes', ':active')}}{{Spec2('CSS1')}}Initial definition.
- -

Dukungan Browser

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1.0")}}4.05.01.0
Support on non-<a> elements1.0{{CompatGeckoDesktop("1.0")}}8.07.01.0
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support1.0{{CompatGeckoMobile("1.0")}}6.06.01.0
Support on non-<a> elements1.0{{CompatGeckoMobile("1.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}} [1]
-
- -

[1] Secara menyeluruh, Safari Mobile tidak menggunakan {{cssxref(":active")}} kesatuan yang tidak ada pada sebuah touchstart event handler pada elemen yang relevan atau pada {{HTMLElement("body")}}.

- -

Lihat juga

- - 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 ---- -
{{CSSRef}}
- -

Background-color CSS digunakan untuk seting warna latar belakang dari element yang di inginkan.

- -
{{EmbedInteractiveExample("pages/css/background-color.html")}}
- - - -

Syntax

- -
/* 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;
- -

Background-color menggunakan hanya satu jenis warna <color> nilai.

- -

Values

- -
-
{{cssxref("<color>")}}
-
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.
-
- -

Formal syntax

- -{{csssyntax}} - -

Contoh

- -

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>
- -

CSS

- -
.exampleone {
-  background-color: teal;
-  color: white;
-}
-
-.exampletwo {
-  background-color: rgb(153,102,153);
-  color: rgb(255,255,204);
-}
-
-.examplethree {
-  background-color: #777799;
-  color: #FFFFFF;
-}
-
- -

Result

- -

{{EmbedLiveSample("Examples", 200, 150)}}

- -

Accessibility concerns

- -

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.

- -

Color contrast ratio is determined by comparing the luminosity of the text and background color values. In order to meet current Web Content Accessibility Guidelines (WCAG), 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 bold or larger, or 24px or larger.

- - - -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#background-color', 'background-color')}}{{Spec2('CSS3 Backgrounds')}}Though technically removing the transparent keyword, this doesn't change anything as it has been incorporated as a true {{cssxref("<color>")}}
{{SpecName('CSS2.1', 'colors.html#propdef-background-color', 'background-color')}}{{Spec2('CSS2.1')}}No change
{{SpecName('CSS1', '#background-color', 'background-color')}}{{Spec2('CSS1')}}Initial definition
- -
{{cssinfo}}
- -

Browser compatibility

- - - -

{{Compat("css.properties.background-color")}}

- -

See also

- - 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 ---- -
{{CSSRef}}
- -

CSS Basic Box Model 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 visual formatting model.

- -

Reference

- -

Properties

- -

Properties controlling the flow of content in a box

- -
- -
- -

Properties controlling the size of a box

- -
- -
- -

Properties controlling the margins of a box

- -
- -
- -

Properties controlling the paddings of a box

- -
- -
- -

Other properties

- -
- -
- -

Guides

- -
-
Introduction to the CSS box model
-
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.
-
Mastering margin collapsing
-
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.
-
Visual formatting model
-
Explains the visual formatting model.
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("CSS3 Box")}}{{Spec2("CSS3 Box")}}Added margin-trim
{{SpecName("CSS2.1", "box.html")}}{{Spec2("CSS2.1")}} 
{{SpecName("CSS1")}}{{Spec2("CSS1")}}Initial definition.
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 ---- -
{{CSSRef}}
- -

When laying out a document, the browser's rendering engine represents each element as a rectangular box according to the standard CSS basic box model. CSS determines the size, position, and properties (color, background, border size, etc.) of these boxes.

- -

Every box is composed of four parts (or areas), defined by their respective edges: the content edge, padding edge, border edge, and margin edge.

- -

CSS Box model

- -

The content area, 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 content width (or content-box width) and the content height (or content-box height). It often has a background color or background image.

- -

If the {{cssxref("box-sizing")}} property is set to content-box (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.

- -

The padding area, bounded by the padding edge, extends the content area to include the element's padding. Its dimensions are the padding-box width and the padding-box height.

- -

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.

- -

The border area, bounded by the border edge, extends the padding area to include the element's borders. Its dimensions are the border-box width and the border-box height.

- -

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 border-box, 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.

- -

The margin area, 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 margin-box width and the margin-box height.

- -

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 margin collapsing occurs, the margin area is not clearly defined since margins are shared between boxes.

- -

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.

- -

See also

- - - -

Specification

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS3 Box', '#intro')}}{{Spec2('CSS3 Box')}}
{{ SpecName("CSS2.1","box.html#box-dimensions")}}{{ Spec2('CSS2.1') }}Though more precisely worded, there is no practical change.
{{ SpecName("CSS1","#formatting-model")}}{{ Spec2('CSS1') }}Initial definition.
- -

See also

- - 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 ---- -
{{CSSRef}}
- -

Selectors define to which elements a set of CSS rules apply.

- -

Dasar Selektor

- -
-
Type selectors (Jenis-Jenis Seleksi)
-
Dasar selektor ini memilih seluruh elemen sehingga ditampilkan dengan pemberian nama.
- Syntax: eltname
- Example: Input akan menampilkan sebuah elemen  {{HTMLElement('input')}}.
-
Class selectors (Selektor Class)
-
Dasar selektor ini memilih elemen yang didasarkan pada nilai attribut classnya.
- Syntax: .classname
- Example: .index akan menampilkan sebuah elemen yang mempunyai indeks class (seperti didefenisikan oleh sebuah attribut class="index" atau yang serupa).
-
ID selectors (selektor ID)
-
Dasar selektor ini memilih cabangan (nodes) didasarkan pada nilai attribut idnya. Bisa jadi hanya satu elemen dengan sebuah pemberian ID dalam sebuah dokumen.
- Syntax: #idname
- Example: #toc akan menampilkan elemen yang mempunyai id toc (seperti didefenisikan dengan atrribut id="toc" atau yang serupa).
-
Universal selectors (selektor seluruhnya)
-
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.
- Syntax: * ns|* *|*
- Example: * akan menampilkan seluruh elemen dari dokumen.
-
Attribute selectors (selektor attribut)
-
Dasar selektor ini memilih nodes (cabangan)  didasarkan pada sebuah nilai dari atributnya.
- Syntax: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]
- Example: [autoplay] akan menampilkan seluruh elemen yang mempunyai attribut autoplay pengaturan (pada sebuah nilai).
-
- -

Combinators

- -
-
Adjacent sibling selectors
-
The '+' combinator selects nodes that immediately follow the former specified element.
- Syntax: A + B
- Example: ul + li will match any {{HTMLElement('li')}} that immediately follows a {{HTMLElement('ul')}}.
-
General sibling selectors
-
The '~' combinator selects nodes that follow (not necessarily immediately) the former specified element, if both elements shared the same parent.
- Syntax: A ~ B
- Example: p ~ span will match all {{HTMLElement('span')}} elements that follow a {{HTMLElement('p')}} element inside the same element.
-
Child selectors
-
The '>' combinator selects nodes that are direct children of the former specified element.
- Syntax: A > B
- Example: ul > li will match all {{HTMLElement('li')}} elements that are inside a {{HTMLElement('ul')}} element.
-
Descendant selectors
-
The ' ' combinator selects nodes that are children (not necessary direct children) of the former specified element.
- Syntax: A B
- Example: div span will match any {{HTMLElement('span')}} element that is inside a {{HTMLElement('div')}} element.
-
- -

Pseudo-elements

- -

Pseudo-elements 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.

- -

Pseudo-classes

- -

Pseudo-classes 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.

- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS4 Selectors')}}{{Spec2('CSS4 Selectors')}} 
{{SpecName('CSS3 Selectors')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Initial definition
- -

Browser compatibility

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1{{CompatGeckoDesktop("1")}}3.03.51.0
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support1.5{{CompatGeckoMobile("1.9.2")}}{{CompatUnknown}}{{CompatUnknown}}3.2
-
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' ---- -

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. {{CSSRef}}

- -

Membantu mengidentifikasi tujuan dari sebuah tautan yang ditujukan pada sebuan bagian khusus sebuah dokumen, CSS3 Selectors mengenalkan {{ Cssxref(":target") }} pseudo-class.

- -

Penentuan Sebuah Target

- -

pseudo-class {{ Cssxref(":target") }} digunakan pada menampilkan target elemen dari sebuah URI berisikan sebuah pengidentifikasi menurut bagian bagian. Sebagai contoh, pada URI 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.  

- -

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:

- -
h2:target {font-weight: bold;}
-
- -

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:

- -
#Example:target {border: 1px solid black;}
- -

Menargetkan Seluruh Elemen

- -

Jika intensif (berkelanjutan) untuk membuat sebuah "blanket" tampilan yang akan diterapkan pada seluruh target element, selanjutnya seleksi secara umum yang dapat diterapkan didalamnya:

- -
:target {color: red;}
-
- -

Contoh

- -

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. 

- -
-
<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>
-
- -

Kesimpulan

- -

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. 

- - - - - -
-

Original Document Information

- - -
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 ---- -
{{CSSRef}}
- -


-

- -

flex-direction  adalah properti css yang menentukan sumbu utama dan arah (normal atau terbalik ) dari flex item yang ditempatkan di flex container / wadah .

- -
{{EmbedInteractiveExample("pages/css/flex-direction.html")}}
- - - -

Note that the values row and row-reverse are affected by the directionality of the flex container. If its {{HTMLAttrxRef("dir")}} attribute is ltr, row represents the horizontal axis oriented from the left to the right, and row-reverse from the right to the left; if the dir attribute is rtl, row represents the axis oriented from the right to the left, and row-reverse from the left to the right.

- -

Syntax

- -
/* 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;
-
- -

Values

- -

The following values are accepted:

- -
-
row
-
The flex container's main-axis is defined to be the same as the text direction. The main-start and main-end points are the same as the content direction.
-
row-reverse
-
Behaves the same as row but the main-start and main-end points are permuted.
-
column
-
The flex container's main-axis is the same as the block-axis. The main-start and main-end points are the same as the before and after points of the writing-mode.
-
column-reverse
-
Behaves the same as column but the main-start and main-end are permuted.
-
- -

Accessibility concerns

- -

Using the flex-direction property with values of row-reverse or column-reverse 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.

- - - -

Formal definition

- -

{{cssinfo}}

- -

Formal syntax

- -{{csssyntax}} - -

Examples

- -

Reversing flex container columns and rows

- -

HTML

- -
<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>
-
- -

CSS

- -
#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;
-}
- -

Result

- -

{{EmbedLiveSample('Reversing_flex_container_columns_and_rows', '', '550')}}

- -

Specifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS3 Flexbox', '#flex-direction-property', 'flex-direction')}}{{Spec2('CSS3 Flexbox')}}Initial definition
- -

Browser compatibility

- - - -

{{Compat("css.properties.flex-direction")}}

- -

See also

- - 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 ---- -

Cascading Style Sheets, dikenal juga sebagai CSS, adalah bahasa stylesheet yang digunakan untuk merubah tampilan dokumen yang terulis dalam HTML atau XML (termasuk variasi bahasa XML seperti SVG atau XHTML). CSS menjelaskan bagaimana elemen terstruktur yang harus ditampilkan di layar, di kertas, dalam cara komunikasi, atau dalam media yang lain.

- -

CSS adalah salah satu dari bahasa inti dari open web (web berbasis terbuka) dan telah berstandar W3C specification. Dibangun dalam berbagai level, CSS1 sekarang sudah kuno, CSS2.1 direkomendasi dan CSS3, sekarang terbagi dalam modul kecil, bergerak dalam jalur standar.

- -
- - -
-
-

Dokumentasi dan tutorial

- -
-
Kunci konsep CSS
-
Menjelaskan syntax dan lembar bahasa dan memperkenalkan dasar-dasar seperti specificity dan inheritance, box model dan margin collapsing, stacking dan konteks block-formatting, atau initial, computed, used dan nilai actual. Entitas seperti CSS shorthand properties juga dijelaskan.
-
Panduan Pengembang CSS
-
Artikel yang membantu mempelajari tehnik CSS untuk membuat konten anda bersinar.
-
- -

Alat untuk pengembang CSS

- -
    -
  • W3C CSS Validation Service mengecek bila CSS yang diberikan adalah valid. Ini adalah alat debugging yang berguna.
    • -
  • Firebug extension milik Firefox, extensi populer yang mengizinkan untuk merubah secara langsung CSS dalam situs yang dilihat. Sangat praktis untuk beberapa perubahan, bahkan ekstensi ini berguna lebih banyak.
    • -
  • Web Developer extension milik FireFox juga mengizinkan melihat dan merubah scara langsung CSS dalam situs yang dilihat. lebih mudah daripada Firebug, walaupun kurang berguna.
    • -
  • EditCSS extension milik FireFox mengizinkan mengubah CSS dalam sidebar.
    • -
- - - - -
- -
- - -
    -
  • CSS Text-decoration Level 3 mencapai status Candidate Recommandation, termasuk properti text-decoration-* dan text-emphasis-*. Berikut lingk yang menjelaskan hal ini {{cssxref("text-shadow")}}. (August 1st, 2013)
    • -
  • Gecko sekarang suport {{cssxref("background-origin")}}: local. Ini tersedia dari Firefox 25 (dan siap juga dalam Nightly). (July 25th, 2013)
    • -
  • Pointer Events mencapai status Candidate Recommandation, berarti properti CSS touch-action, yang hanya dapat diimplementasikan pada IE10 (dengan prefiks -ms- ), sekarang bukan percobaan lagi. (May 6th, 2013)
    • -
  • Gecko suport flexible boxes 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")}}. (May 3rd, 2013)
    • -
-
-
-
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 ---- -
{{CSSRef}}
- -

The mask-border-width CSS properti mengatur lebar elemen mask border.

- -

Syntax

- -
/* 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;
-
- -

The mask-border-width properti dapat ditentukan menggunakan satu, dua, tiga, atau empat nilai yang dipilih dari daftar nilai di bawah.

- - - -

Values

- -
-
<length-percentage>
-
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.
-
<number>
-
Lebar batas topeng, ditentukan sebagai kelipatan yang sesuai {{cssxref("border-width")}}. Tidak boleh negatif.
-
auto
-
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 border-width digunakan sebagai gantinya.
-
- -

Formal definition

- -

{{cssinfo}}

- -

Formal syntax

- -{{csssyntax}} - -

Examples

- -

Basic usage

- -

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 mask-border-slice akan menyebabkan irisan diskalakan agar sesuai dengan topeng perbatasan.

- -
mask-border-width: 30 fill;
- -

Browser berbasis Chromium mendukung versi lama properti ini — mask-box-image-width — dengan awalan:

- -
-webkit-mask-box-image-width: 20px;
- -
-

Note: The mask-border Halaman menampilkan contoh yang berfungsi (menggunakan properti topeng perbatasan awalan kedaluwarsa yang didukung di Chromium), sehingga Anda bisa mendapatkan gambaran tentang efeknya.

-
- -

Specifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("CSS Masks", "#propdef-mask-border-width", "mask-border-width")}}{{Spec2("CSS Masks")}}Initial definition
- -

Browser compatibility

- -

TBD

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 ---- -

Media query 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 CSS3, memungkinkan tampilan konten disesuaikan dengan alat penampil tertentu tanpa harus mengubah konten itu sendiri.

- -

Sintaks

- -

Media query terdiri dari jenis media (media type) 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 dan semua ekspresi di dalam media query adalah benar.

- -
<!-- Media query CSS pada elemen link -->
-<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
-
-<!-- Media query CSS di dalam style sheet -->
-<style>
-@media (max-width: 600px) {
-  .facet_sidebar {
-    display: none;
-  }
-}
-</style>
- -

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 <link> masih akan diunduh bahkan jika media query tersebut adalah salah (false) (namun tidak akan diterapkan).

- -

Kecuali jika Anda menggunakan operator not atau only, jenis media adalah opsional dan jenis all akan diterapkan.

- -

Operator logika

- -

Anda dapat merancang media query kompleks menggunakan operator logika, termasuk not, and, dan only. Operator and digunakan untuk menggabungkan banyak fitur media (media features) ke dalam satu media query tunggal, setiap fitur terkait harus benar (true) agar query benar (true). Operator not digunakan untuk menegasikan keseluruhan media query. Operator only digunakan untuk menerapkan suatu style hanya jika keseluruhan query cocok, berguna untuk mencegah browser lama menerapkan style-style tertentu. Jika Anda menggunakan operator-operator not atau only, Anda harus menyebutkan jenis media secara eksplisit.

- -

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 or.

- -

and

- -

Kata kunci and 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 all secara implisit, dapat terlihat seperti ini:

- -
@media (min-width: 700px) { ... }
- -

Namun, jika, Anda menginginkan hal ini diterapkan hanya untuk tampilan lanskap, Anda dapat menggunakan operator and untuk menggabungkan fitur-fitur media tersebut.

- -
@media (min-width: 700px) and (orientation: landscape) { ... }
- -

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 and.

- -
@media tv and (min-width: 700px) and (orientation: landscape) { ... }
- -

Sekarang, media query di atas hanya akan diterapkan jika jenis media adalah TV, lebar viewport adalah 700px atau lebih, dan tampilan adalah lanskap.

- -

daftar terpisah koma

- -

Daftar terpisah koma adalah seperti operator logika or 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.

- -

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:

- -
@media (min-width: 700px), handheld and (orientation: landscape) { ... }
- -

Pada contoh di atas, jika saya menggunakan perangkat screen dengan lebar viewport 800px, pernyataan media akan benar (true) karena bagian pertama, yang diinterpetasikan sebagai @media all and (min-width: 700px) akan berlaku pada perangkat saya dan oleh karena itu benar (true), terlepas dari fakta bahwa perangkat screen saya akan gagal dalam pengecekan jenis media handheld di media query kedua. Demikian pula, jika saya menggunakan perangkat genggam handheld 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).

- -

not

- -

Kata kunci not berlaku pada keseluruhan media query dan memberikan nilai benar (true) jika media query akan sebaliknya memberikan nilai salah (false) (seperti fitur query monochrome pada warna tampilan atau lebar layar 600px dengan min-width: 700px). Sebuah not hanya akan menegasikan media query yang ditetapkan dan bukan setiap media query jika ada dalam daftar media query terpisah koma. Kata kunci not tidak dapat digunakan untuk menegasikan sebuah fitur query individual, hanya untuk media query secara keseluruhan. Sebagai contoh, not dievaluasi paling akhir dalam query berikut ini:

- -
@media not all and (monochrome) { ... }
-
- -

Ini berarti bahwa query tersebut dievaluasi seperti ini:

- -
@media not (all and (monochrome)) { ... }
-
- -

... bukan seperti ini:

- -
@media (not all) and (monochrome) { ... }
- -

Sebagai contoh lain, lihat media query berikut ini:

- -
@media not screen and (color), print and (color)
-
- -

Yang dievaluasi seperti ini:

- -
@media (not (screen and (color))), print and (color)
- -

only

- -

Kata kunci only mencegah browser lama yang tidak mendukung media query dengan fitur media menerapkan style yang disediakan:

- -
<link rel="stylesheet" media="only screen and (color)" href="example.css" />
-
- -

Pseudo-BNF (untuk Anda yang gemar hal seperti ini)

- -
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
- -

Media query adalah case insensitive.  Media query yang melibatkan jenis media yang tidak diketahui selalu salah (false).

- -
Catatan: Tanda kurung wajib digunakan di sekitar ekspresi; jika tidak digunakan akan mengakibatkan kesalahan.
- -

Fitur media

- -

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.

- -
Catatan: 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).
- -

color

- -

Nilai: {{cssxref("<color>")}}
- Media: {{cssxref("Media/Visual")}}
- Menerima prefiks min/max prefixes: ya

- -

Menunjukkan jumlah per komponen warna dari alat penampil.  Jika alat tersebut bukan alat yang memiliki warna, nilai ini adalah nol.

- -
Catatan: 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.
- -

Contoh

- -

Untuk menerapkan style sheet pada semua alat berwarna:

- -
@media all and (color) { ... }
-
- -

Untuk menerapkan style sheet pada alat yang memiliki paling sedikit 4 bit per komponen warna:

- -
@media all and (min-color: 4) { ... }
-
- -

color-index

- -

Nila: {{cssxref("<integer>")}}
- Media: {{cssxref("Media/Visual")}}
- Menerima prefiks min/max: ya

- -

Menunjukkan jumlah entri dalam tabel pencarian warna untuk alat penampil.

- -

Contoh

- -

Untuk menunjukkan bahwa suatu style sheet harus diterapkan pada semua alat yang menggunakan warna terindeks, Anda dapat melakukan:

- -
@media all and (color-index) { ... }
-
- -

Untuk menerapkan style sheet pada alat berwarna terindeks dengan paling sedikit 256 warna:

- -
<link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" />
-
- -

aspect-ratio

- -

Nilai: {{cssxref("<ratio>")}}
- Media: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
- Menerima prefiks min/max: ya

- -

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).

- -

Contoh

- -

Berikut ini memilih style sheet khusus untuk digunakan ketika daerah tampilan paling tidak selebar tingginya.

- -
@media screen and (min-aspect-ratio: 1/1) { ... }
- -

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.

- -

device-aspect-ratio

- -

Nilai: {{cssxref("<ratio>")}}
- Media: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
- Menerima prefiks min/max: ya

- -

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).

- -

Contoh

- -

Berikut ini memilih style sheet khusus yang digunakan untuk tampilan layar lebar.

- -
@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }
- -

Ini memilih style ketika rasio aspek adalah 16:9 atau 16:10.

- -

device-height

- -

Nilai: {{cssxref("<length>")}}
- Media: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
- Menerima prefiks min/max: ya

- -

Menggambarkan tinggi alat penampil (berarti keseluruhan layar atau halaman, bukan hanya area render, seperti jendela dokumen).

- -

Contoh

- -

Untuk menerapkan style sheet pada sebuah dokument ketika ditampilkan pada layar yang memiliki panjang kurang dari 800 piksel, Anda dapat menggunakan ini:

- -
<link rel="stylesheet" media="screen and (max-device-height: 799px)" />
-
- -

device-width

- -

Nilai: {{cssxref("<length>")}}
- Media: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
- Menerima prefiks min/max: ya

- -

Menggambarkan lebar alat penampil (berarti keseluruhan layar atau halaman, bukan hanya area render, seperti jendela dokumen).

- -

Contoh

- -

Untuk menerapkan style sheet pada sebuah dokumen ketika ditampilkan pada layar yang memiliki lebar kurang dari 800 piksel wide, Anda dapat menggunakan ini:

- -
<link rel="stylesheet" media="screen and (max-device-width: 799px)" />
- -

grid

- -

Nilai: {{cssxref("<integer>")}}
- Media: all
- Menerima prefiks min/max: tidak

- -

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.

- -

Contoh

- -

Untuk menerapkan suatu style pada alat genggam dengan layar selebar 15-karakter atau kurang:

- -
@media handheld and (grid) and (max-width: 15em) { ... }
-
- -
Catatan: 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.
- -

height

- -

Nilai: {{cssxref("<length>")}}
- Media: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
- Menerima prefiks min/max: ya

- -

Fitur media height (tinggi) menggambarkan tinggi permukaan rendering alat penampil (seperti tinggi viewport atau kotak halaman pada sebuah printer).

- -
Catatan: Ketika user mengubah ukuran window, Firefox mengganti style sheets dengan yang paling sesuai berdasarkan media query menggunakan fitur media width dan height.
- -

monochrome

- -

Nilai: {{cssxref("<integer>")}}
- Media: {{cssxref("Media/Visual")}}
- Menerima prefiks min/max: ya

- -

Menunjukkan jumlah bit per piksel pada alat monokrom (keabuan).  Jika alat tersebut bukan monokrom, nilai alat tersebut adalah 0.

- -

Contoh

- -

Untuk menerapkan style sheet pada semua alat monokrom:

- -
@media all and (monochrome) { ... }
-
- -

Untuk menerapkan style sheet pada alat monokrom dengan paling sedikit 8 bit per piksel:

- -
@media all and (min-monochrome: 8) { ... }
-
- -

orientation

- -

Nilai: landscape | portrait
- Media: {{cssxref("Media/Visual")}}
- Menerima prefiks min/max: tidak

- -

Menunjukkan apakah viewport dalam mode lanskap (tampilan lebih lebar daripada tingginya) atau potret (tampilan lebih tinggi daripada lebarnya).

- -

Contoh

- -

Untuk menerapkan style sheet hanya pada orientasi potret:

- -
@media all and (orientation: portrait) { ... }
- -

resolution

- -

Nilai: {{cssxref("<resolution>")}}
- Media: {{cssxref("Media/Bitmap", "bitmap")}}
- Menerima prefiks min/max: ya

- -

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).

- -

Contoh

- -

Untuk menerapkan style sheet pada alat dengan resolusi paling sedikit 300 dpi:

- -
@media print and (min-resolution: 300dpi) { ... }
-
- -

Untuk mengganti sintaks lama (min-device-pixel-ratio: 2):

- -
@media screen and (min-resolution: 2dppx) { ... }
- -

scan

- -

Nilai: progressive | interlace
- Media: {{cssxref("Media/TV")}}
- Menerima prefiks min/max: tidak

- -

Menggambarkan proses pemindaian alat penampil televisi.

- -

Contoh

- -

Untuk menerapkan style sheet hanya pada televisi pemindai progresif:

- -
@media tv and (scan: progressive) { ... }
-
- -

width

- -

Nilai: {{cssxref("<length>")}}
- Media: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
- Menerima prefiks min/max: ya

- -

Fitur media width menggambarkan lebar permukaan rendering alat penampil (seperti lebar jendela dokumen, atau lebar kotak halaman sebuah printer).

- -
Catatan: Ketika user mengubah ukuran jendela, Firefox mengganti style sheets yang sesuai berdasarkan media query menggunakan fitur media width dan height.
- -

Contoh

- -

Jika Anda ingin menentukan sebuah style sheet untuk perangkat genggam, atau perangkat layar dengan lebar lebih besar dari 20em, Anda dapat menggunakan query ini:

- -
@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... }
-
- -

Query Media ini menentukan style sheet yang berlaku untuk media cetak lebih lebar dari 8,5 inci:

- -
<link rel="stylesheet" media="print and (min-width: 8.5in)"
-    href="http://foo.com/mystyle.css" />
-
- -

Query ini menentukan style sheet yang digunakan saat lebar viewport adalah antara 500 dan 800 pixel:

- -
@media screen and (min-width: 500px) and (max-width: 800px) { ... }
-
- -

Fitur Media Spesifik Mozilla

- -

Mozilla menawarkan beberapa fitur media spesifik Gecko. Beberapa di antaranya mungkin diusulkan sebagai fitur media resmi.

- -

{{ h3_gecko_minversion("-moz-images-in-menus", "1.9.2") }}

- -

Nilai: {{cssxref("<integer>")}}
- Media: {{cssxref("Media/Visual")}}
- Meneriman prefiks min/max: tidak

- -

Jika perangkat memungkinkan gambar untuk muncul dalam menu, ini adalah 1; jika tidak, nilainya adalah 0. Ini berhubungan dengan pseudo-class CSS {{ cssxref(":-moz-system-metric(images-in-menus)") }}.

- -

{{ h3_gecko_minversion("-moz-mac-graphite-theme", "1.9.2") }}

- -

Nilai: {{cssxref("<integer>")}}
- Media: {{cssxref("Media/Visual")}}
- Menerima prefiks min/max: no

- -

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.

- -

Ini berkaitan dengan pseudo-class CSS {{ cssxref(":-moz-system-metric(mac-graphite-theme)") }}.

- -

{{ h3_gecko_minversion("-moz-maemo-classic", "1.9.2") }}

- -

Nilai: {{cssxref("<integer>")}}
- Media: {{cssxref("Media/Visual")}}
- Menerima prefiks min/max: tidak

- -

Jika user menggunakan Maemo dengan tema asli, ini adalah 1; jika menggunakan tema Fremantle yang lebih baru, ini adalah 0.

- -

Ini berkaitan dengan pseudo-class CSS {{ cssxref(":-moz-system-metric(maemo-classic)") }}.

- -

{{ h3_gecko_minversion("-moz-device-pixel-ratio", "2.0") }} {{ deprecated_inline("gecko&16") }}

- -

Nilai: {{cssxref("<number>")}}
- Media: {{cssxref("Media/Visual")}}
- Menerima prefiks min/max: ya

- -

Memberikan jumlah piksel perangkat per piksel CSS.

- -
-

Jangan gunakan fitur ini.

- -

Tapi gunakanlah fitur resolution dengan unit dppx.

- -


- -moz-device-pixel-ratio mungkin digunakan sebagai kompatibilitas dengan Firefox lebih tua daripada 16 dan -webkit-device-pixel-ratio dengan browser-browser berbasis WebKit yang tidak mendukung dppx.

- -

Contoh:

- -
@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 dppx */
- -

Lihat artikel CSSWG ini untuk praktek kompatibilitas yang baik terkait resolution dan dppx.

-
- -
Catatan: Fitur media ini juga diimplementasikan oleh Webkit sebagai -webkit-device-pixel-ratio. Prefiks min dan max seperti diimplementasikan oleh Gecko dinamakan min--moz-device-pixel-ratio dan max--moz-device-pixel-ratio; tetapi prefiks yang sama seperti yang diimplementasikan oleh Webkit dinamakan -webkit-min-device-pixel-ratio dan -webkit-max-device-pixel-ratio.
- -

{{ h3_gecko_minversion("-moz-os-version", "25.0") }}

- -

Nilai: windows-xp | windows-vista | windows-win7 | windows-win8
- Media: {{cssxref("Media/Visual")}}
- Menerima prefiks min/max: tidak

- -

Menunjukkan versi sistem operasi mana yang sedang digunakan saat ini. Saat ini hanya diimplementasikan pada Windows. Nilai-nilai yang mungkin adalah:

- - - -

Ini disediakan untuk aplikasi skins dan kode chrome lainnya agar dapat beradaptasi untuk bekerja dengan baik dengan versi sistem operasi saat ini.

- -

{{ h3_gecko_minversion("-moz-scrollbar-end-backward", "1.9.2") }}

- -

Nilai: {{cssxref("<integer>")}}
- Media: {{cssxref("Media/Visual")}}
- Menerima prefiks min/max: no

- -

Jika user interface perangkat menampilkan tombol panah kembali di akhir scrollbar, ini adalah 1. Jika tidak, bernilai 0.

- -

Ini berkaitan dengan pseudo-class CSS {{ cssxref(":-moz-system-metric(scrollbar-end-backward)") }}.

- -

{{ h3_gecko_minversion("-moz-scrollbar-end-forward", "1.9.2") }}

- -

Nilai: {{cssxref("<integer>")}}
- Media: {{cssxref("Media/Visual")}}
- Menerima prefiks min/max: tidak

- -

If the device's user interface displays a forward arrow button at the end of scrollbars, this is 1. Otherwise it's 0.

- -

This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-end-forward)") }} CSS pseudo-class.

- -

{{ h3_gecko_minversion("-moz-scrollbar-start-backward", "1.9.2") }}

- -

Value: {{cssxref("<integer>")}}
- Media: {{cssxref("Media/Visual")}}
- Accepts min/max prefixes: no

- -

If the device's user interface displays a backward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.

- -

This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-start-backward)") }} CSS pseudo-class.

- -

{{ h3_gecko_minversion("-moz-scrollbar-start-forward", "1.9.2") }}

- -

Value: {{cssxref("<integer>")}}
- Media: {{cssxref("Media/Visual")}}
- Accepts min/max prefixes: no

- -

If the device's user interface displays a forward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.

- -

This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-start-forward)") }} CSS pseudo-class.

- -

{{ h3_gecko_minversion("-moz-scrollbar-thumb-proportional", "1.9.2") }}

- -

Value: {{cssxref("<integer>")}}
- Media: {{cssxref("Media/Visual")}}
- Accepts min/max prefixes: no

- -

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.

- -

This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-thumb-proportional)") }} CSS pseudo-class.

- -

{{ h3_gecko_minversion("-moz-touch-enabled", "1.9.2") }}

- -

Value: {{cssxref("<integer>")}}
- Media: {{cssxref("Media/Visual")}}
- Accepts min/max prefixes: no

- -

If the device supports touch events (for a touch screen), this is 1. Otherwise it's 0.

- -

This corresponds to the {{ cssxref(":-moz-system-metric(touch-enabled)") }} CSS pseudo-class.

- -

Example

- -

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.

- -

{{ h3_gecko_minversion("-moz-windows-classic", "1.9.2") }}

- -

Value: {{cssxref("<integer>")}}
- Media: {{cssxref("Media/Visual")}}
- Accepts min/max prefixes: no

- -

If the user is using Windows unthemed (in classic mode instead of using uxtheme), this is 1; otherwise it's 0.

- -

This corresponds to the {{ cssxref(":-moz-system-metric(windows-classic)") }} CSS pseudo-class.

- -

{{ h3_gecko_minversion("-moz-windows-compositor", "1.9.2") }}

- -

Value: {{cssxref("<integer>")}}
- Media: {{cssxref("Media/Visual")}}
- Accepts min/max prefixes: no

- -

If the user is using Windows with the DWM compositor, this is 1; otherwise it's 0.

- -

This corresponds to the {{ cssxref(":-moz-system-metric(windows-compositor)") }} CSS pseudo-class.

- -

{{ h3_gecko_minversion("-moz-windows-default-theme", "1.9.2") }}

- -

Value: {{cssxref("<integer>")}}
- Media: {{cssxref("Media/Visual")}}
- Accepts min/max prefixes: no

- -

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.

- -

This corresponds to the {{ cssxref(":-moz-system-metric(windows-default-theme)") }} CSS pseudo-class.

- -

{{ h3_gecko_minversion("-moz-windows-glass", "21.0") }}

- -

Value: {{cssxref("<integer>")}}
- Media: {{cssxref("Media/Visual")}}
- Accepts min/max prefixes: no

- -

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.

- -

{{ h3_gecko_minversion("-moz-windows-theme", "2.0") }}

- -

Value: aero | luna-blue | luna-olive | luna-silver | royale | generic | zune
- Media: {{cssxref("Media/Visual")}}
- Accepts min/max prefixes: no

- -

Indicates which Windows theme is currently being used. Only available on Windows. Possible values are:

- - - -

This is provided for application skins and other chrome code to be able to adapt to work well with the current Windows theme.

- -

Browser compatibility

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatChrome("21") }}{{ CompatGeckoDesktop("1.9.1") }}{{ CompatIE("9.0") }}{{ CompatOpera("9") }}{{ CompatSafari("4") }}
grid{{ CompatUnknown() }}{{ CompatNo() }} (grid media type is not supported){{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
resolution{{ CompatChrome("29") }}{{ CompatGeckoDesktop("1.9.1") }} supports {{cssxref("<integer>")}} values;
- {{ CompatGeckoDesktop("8.0") }} supports {{cssxref("<number>")}} values, as per the spec.		{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
scan{{ CompatUnknown() }}{{ CompatNo() }} (tv media type is not supported){{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -

See also

- - 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 ---- -
{{CSSRef}}
- -

Gunakan referensi CSS ini untuk menelusuri indeks alfabetikal dari semua properti CSS umum, pseudo-classes, pseudo-elements, data types, dan at-rules. Anda juga dapat menulusuri konsep dasar and a list of selektor berdasarkan jenis. Juga ada referensi DOM-CSS / CSSOM.

- -

Basic rule syntax

- -

Style rule syntax

- -
style-rule ::=
-    selectors-list {
-      properties-list
-    }
-
- -

... where :

- -
selectors-list ::=
-    selector[:pseudo-class] [::pseudo-element]
-    [, selectors-list]
-
-properties-list ::=
-    [property : value] [; properties-list]
-
- -

See the index of selectors, pseudo-classes, and pseudo-elements below. The syntax for each specified value depends on the data type defined for each specified property.

- -

Style rule examples

- -
strong {
-  color: red;
-}
-
-div.menu-bar li:hover > ul {
-  display: block;
-}
-
- -

For a beginner-level introduction to the syntax of selectors, see our guide on CSS Selectors. Be aware that any syntax error in a rule definition invalidates the entire rule. Invalid rules are ignored by the browser. Note that CSS rule definitions are entirely (ASCII) text-based, whereas DOM-CSS / CSSOM (the rule management system) is object-based.

- -

At-rule syntax

- -

As the structure of at-rules varies widely, please see At-rule to find the syntax of the specific one you want.

- -

Keyword index

- -
-

Note: The property names in this index do not include the JavaScript names where they differ from the CSS standard names.

-
- -
{{CSS_Ref}}
- -

Selectors

- -

The following are the various selectors, which allow styles to be conditional based on various features of elements within the DOM.

- -

Basic selectors

- -

Basic selectors are fundamental selectors; these are the most basic selectors that are frequently combined to create other, more complex selectors.

- - - -

Grouping selectors

- -
-
Selector list A, B
-
Specifies that both A and B elements are selected. This is a grouping method to select several matching elements.
-
- -

Combinators

- -

Combinators are selectors that establish a relationship between two or more simple selectors, such as "A is a child of B" or "A is adjacent to B."

- -
-
Adjacent sibling combinator A + B
-
Specifies that the elements selected by both A and B have the same parent and that the element selected by B immediately follows the element selected by A horizontally.
-
General sibling combinator A ~ B
-
Specifies that the elements selected by both A and B share the same parent and that the element selected by A comes before—but not necessarily immediately before—the element selected by B.
-
Child combinator A > B
-
Specifies that the element selected by B is the direct child of the element selected by A.
-
Descendant combinator A B
-
Specifies that the element selected by B is a descendant of the element selected by A, but is not necessarily a direct child.
-
Column combinator A || B {{Experimental_Inline}}
-
Specifies that the element selected by B is located within the table column specified by A. Elements which span multiple columns are considered to be a member of all of those columns.
-
- -

Pseudo

- -
-
Pseudo classes :
-
Specifies a special state of the selected element(s).
-
Pseudo elements ::
-
Represents entities that are not included in HTML.
-
- -
-

See also: Selectors in the Selectors Level 4 specification.

-
- -

Concepts

- -

Syntax and semantics

- - - -

Values

- - - -

Layout

- - - -

DOM-CSS / CSSOM

- -

Major object types

- - - -

Important methods

- - - -

See also

- - - - - - 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 ---- -
{{CSSRef}}
- -

Properti CSS text-transform menerangkan bagaimana mengatur teks sebuah elemen. Properti ini dapat digunakan untuk membuat sebuah teks menjadi besar atau kecil semua, atau membuat setiap kata dikapitalisasi.

- -
/* 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;
-
- -

Properti text-transform memperhatikan peraturan khusus untuk setiap bahasa, seperti:

- - - -

Pilihan bahasa didefinisikan dengan atribut HTML lang atau dengan atribut XML xml:lang.

- -

Dukungan untuk kasus-kasus tertentu tidak sama untuk semua peramban, harap periksa tabel kompatibilitas peramban.

- -

{{cssinfo}}

- -

Syntax

- -
-
capitalize
-
-

Adalah kata kunci yang mengubah secara paksa huruf 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.

- -
Penulis tidak seharusnya mengharapkan capitalize untuk mengikuti konvensi huruf besar untuk bahasa tertentu (seperti mengabaikan artikel dalam bahasa Inggris).
- -
Kata kunci capitalize 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 ⓐ 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 capitalize di tabel kompatibilitas peramban mempunyai informasi pada versi berapa mesin peramban mulai mendukung penerapan ini
-
-
uppercase
-
Adalah kata kunci yang mengubah semua karakter menjadi huruf besar.
-
lowercase
-
Adalah kata kunci yang mengubah semua karakter menjadi huruf kecil.
-
none
-
Adalah kata kunci yang mencegah perubahan dari semua karakter.
-
full-width {{experimental_inline}}
-
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).
- -
- -

Sintaksis Formal

- -{{csssyntax}} - -

Contoh

- -

none

- -
<p>Kalimat Awal
-  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong>
-</p>
-<p>text-transform: none
-  <strong><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span></strong>
-</p>
-
- -
span {
-  text-transform: none;
-}
-strong { float: right; }
- -

This demonstrates no text transformation.

- -

{{ EmbedLiveSample('none', '100%', '100px') }}

- -

capitalize (Umum)

- -
<p>Kalimat Awal
-  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong>
-</p>
-<p>text-transform: capitalize
-  <strong><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span></strong>
-</p>
- -
span {
-  text-transform: capitalize;
-}
-strong { float: right; }
- -

Contoh ini menunjukkan kata yang dikapitalkan.

- -

{{ EmbedLiveSample('capitalize_(General)', '100%', '100px') }}

- -

capitalize (Tanda Baca)

- -
<p>Kalimat Awal
-  <strong>(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!</strong>
-</p>
-<p>text-transform: capitalize
-  <strong><span>(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!</span></strong>
-</p>
- -
span {
-  text-transform: capitalize;
-}
-strong { float: right; }
- -

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.

- -

{{ EmbedLiveSample('capitalize_(Punctuation)', '100%', '100px') }}

- -

capitalize (Simbol)

- -
<p>Kalimat Awal
-  <strong>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</strong>
-</p>
-<p>text-transform: capitalize
-  <strong><span>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</span></strong>
-</p>
- -
span {
-  text-transform: capitalize;
-}
-strong { float: right; }
- -

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.

- -

{{ EmbedLiveSample('capitalize_(Symbols)', '100%', '100px') }}

- -

capitalize (dwihuruf Belanda ij)

- -
<p>Kalimat Awal
-  <strong lang="nl">The Dutch word: "ijsland" starts with a digraph.</strong>
-</p>
-<p>text-transform: capitalize
-  <strong><span lang="nl">The Dutch word: "ijsland" starts with a digraph.</span></strong>
-</p>
- -
span {
-  text-transform: capitalize;
-}
-strong { float: right; }
- -

Contoh ini menunjukkan bagaimana dwihuruf bahasa Belanda ij harus diperlakukan sebagai huruf tunggal.

- -

{{ EmbedLiveSample('capitalize_(Dutch_ij_digraph)', '100%', '100px') }}

- -

uppercase (Umum)

- -
<p>Kalimat Awal
-  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong>
-</p>
-<p>text-transform: uppercase
-  <strong><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span></strong>
-</p>
- -
span {
-  text-transform: uppercase;
-}
-strong { float: right; }
- -

Contoh ini menunjukkan bagaimana kalimat diubah menjadi huruf besar.

- -

{{ EmbedLiveSample('uppercase_(General)', '100%', '100px') }}

- -

uppercase (Huruf Vokal Yunani)

- -
<p>Kalimat Awal
-  <strong>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</strong>
-</p>
-<p>text-transform: uppercase
-  <strong><span>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</span></strong>
-</p>
- -
span {
-  text-transform: uppercase;
-}
-strong { float: right; }
- -

Contoh ini menunjukkan bagaimana huruf vokal bahasa Yunani, kecuali huruf disjungtif eta, kehilangan aksen, dan aksen pada huruf vokal pertama dari pasangan vokal menjadi diaeresis pada huruf vokal kedua.

- -

{{ EmbedLiveSample('uppercase_(Greek_Vowels)', '100%', '100px') }}

- -

lowercase (Umum)

- -
<p>Kalimat Awal
-  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong>
-</p>
-<p>text-transform: lowercase
-  <strong><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span></strong>
-</p>
- -
span {
-  text-transform: lowercase;
-}
-strong { float: right; }
- -

Contoh ini menunjukkan bagaimana kalimat diubah menjadi huruf kecil.

- -

{{ EmbedLiveSample('lowercase_(General)', '100%', '100px') }}

- -

lowercase (Huruf Yunani Σ)

- -
<p>Kalimat Awal
-  <strong>Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</strong>
-</p>
-<p>text-transform: lowercase
-  <strong><span>Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</span></strong>
-</p>
- -
span {
-  text-transform: lowercase;
-}
-strong { float: right; }
- -

Contoh ini menunjukkan bagaimana karakter bahasa Yunani sigma (Σ) diubah menjadi huruf kecil sigma biasa (σ) atau varian akhir-kata (ς), tergantung kepada konteksnya.

- -

{{ EmbedLiveSample('lowercase_(Greek_Σ)', '100%', '100px') }}

- -

full-width (Umum)

- -
<p>Kalimat Awal
-  <strong>0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~</strong>
-</p>
-<p>text-transform: full-width
-  <strong><span>0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~</span></strong>
-</p>
- -
span {
-  text-transform: full-width;
-}
-strong { width: 100%; float: right; }
- -

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.

- -

{{ EmbedLiveSample('full-width_(General)', '100%', '175px') }}

- -

Spesifikasi

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpesifikasiStatusKomentar
{{SpecName('CSS4 Text', '#text-transform', 'text-transform')}}{{Spec2('CSS4 Text')}}Dari {{SpecName('CSS3 Text', '#text-transform', 'text-transform')}}, menambahkan kata kunci full-size-kana dan membolehkan kata kunci full-width digunakan bersama dengan kata kunci lainnya.
{{SpecName('CSS3 Text', '#text-transform', 'text-transform')}}{{Spec2('CSS3 Text')}}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  capitalize ke huruf pertama kata, mengabaikan tanda baca atau simbol di awal. Menambahkan kata kunci full-width untuk membuat penggabungan penulisan dengan karakter ideografi dan alfabet menjadi mulus.
{{SpecName('CSS2.1', 'text.html#caps-prop', 'text-transform')}}{{Spec2('CSS2.1')}}Dari {{SpecName('CSS1', '#text-transform', 'text-transform')}}, memperluas cakupan huruf dengan tulisan bikameral non-latin.
{{SpecName('CSS1', '#text-transform', 'text-transform')}}{{Spec2('CSS1')}}Definisi awal
- -

Kompatibilitas Peramban

- -

 

- - - -

{{Compat("css.properties.text-transform")}}

- -

 

- -

Lihat juga

- - 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 ---- -
{{CSSRef("Selectors")}}
- -

Rangkuman

- -

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.

- -

Bentuk Penulisan

- -
element { style properties }
-
- -

Contoh

- -

CSS

- -
span {
-  background-color: DodgerBlue;
-  color: #ffffff;
-}
-
- -

HTML

- -
<span>Here's a span with some text.</span>
-<p>Here's a p with some text.</p>
-
- -

Hasil

- -

{{EmbedLiveSample('Example', 200, 100)}}

- -

Spesifikasi

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpesifikasiStatusKomentar
{{SpecName('CSS4 Selectors', '#type-selectors', 'Type (tag name) selector')}}{{Spec2('CSS4 Selectors')}}Tanpa Perubahan
{{SpecName('CSS3 Selectors', '#type-selectors', 'type selectors')}}{{Spec2('CSS3 Selectors')}}Tanpa Perubahan
{{SpecName('CSS2.1', 'selector.html#type-selectors', 'type selectors')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#basic-concepts', 'type selectors')}}{{Spec2('CSS1')}}Defenisi Tanda
- -

Dukungan Browser

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
-- cgit v1.2.3-54-g00ecf