From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- .../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 +++++++ files/id/web/css/referensi/index.html | 185 +++++++++++++ files/id/web/css/text-transform/index.html | 307 +++++++++++++++++++++ files/id/web/css/type_selectors/index.html | 121 ++++++++ 14 files changed, 1934 insertions(+) create mode 100644 files/id/web/css/@font-face/font-display/index.html create mode 100644 files/id/web/css/@font-face/index.html create mode 100644 files/id/web/css/_colon_active/index.html create mode 100644 files/id/web/css/background-color/index.html create mode 100644 files/id/web/css/css_box_model/index.html create mode 100644 files/id/web/css/css_box_model/introduction_to_the_css_box_model/index.html create mode 100644 files/id/web/css/css_selectors/index.html create mode 100644 files/id/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html create mode 100644 files/id/web/css/flex-direction/index.html create mode 100644 files/id/web/css/index.html create mode 100644 files/id/web/css/mask-border-width/index.html create mode 100644 files/id/web/css/referensi/index.html create mode 100644 files/id/web/css/text-transform/index.html create 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 new file mode 100644 index 0000000000..50fed7426a --- /dev/null +++ b/files/id/web/css/@font-face/font-display/index.html @@ -0,0 +1,101 @@ +--- +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 new file mode 100644 index 0000000000..940386b922 --- /dev/null +++ b/files/id/web/css/@font-face/index.html @@ -0,0 +1,199 @@ +--- +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 new file mode 100644 index 0000000000..67d9357bef --- /dev/null +++ b/files/id/web/css/_colon_active/index.html @@ -0,0 +1,143 @@ +--- +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 new file mode 100644 index 0000000000..920b4d28e5 --- /dev/null +++ b/files/id/web/css/background-color/index.html @@ -0,0 +1,149 @@ +--- +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 new file mode 100644 index 0000000000..08152c9c16 --- /dev/null +++ b/files/id/web/css/css_box_model/index.html @@ -0,0 +1,115 @@ +--- +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 new file mode 100644 index 0000000000..d81bae36e6 --- /dev/null +++ b/files/id/web/css/css_box_model/introduction_to_the_css_box_model/index.html @@ -0,0 +1,73 @@ +--- +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 new file mode 100644 index 0000000000..8bf3fb0034 --- /dev/null +++ b/files/id/web/css/css_selectors/index.html @@ -0,0 +1,154 @@ +--- +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 new file mode 100644 index 0000000000..9ec7339a95 --- /dev/null +++ b/files/id/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html @@ -0,0 +1,64 @@ +--- +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 new file mode 100644 index 0000000000..7406212148 --- /dev/null +++ b/files/id/web/css/flex-direction/index.html @@ -0,0 +1,155 @@ +--- +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 new file mode 100644 index 0000000000..c4f9c56adb --- /dev/null +++ b/files/id/web/css/index.html @@ -0,0 +1,64 @@ +--- +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 new file mode 100644 index 0000000000..b017ac4a56 --- /dev/null +++ b/files/id/web/css/mask-border-width/index.html @@ -0,0 +1,104 @@ +--- +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/referensi/index.html b/files/id/web/css/referensi/index.html new file mode 100644 index 0000000000..7609391ca5 --- /dev/null +++ b/files/id/web/css/referensi/index.html @@ -0,0 +1,185 @@ +--- +title: Referensi CSS +slug: Web/CSS/referensi +translation_of: Web/CSS/Reference +--- +
{{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 new file mode 100644 index 0000000000..41db13ecf4 --- /dev/null +++ b/files/id/web/css/text-transform/index.html @@ -0,0 +1,307 @@ +--- +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 new file mode 100644 index 0000000000..5302eef6eb --- /dev/null +++ b/files/id/web/css/type_selectors/index.html @@ -0,0 +1,121 @@ +--- +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