From ba5d6f9610d6bb352eecfa3ded1bb99bc9892916 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Fri, 11 Dec 2020 19:00:14 -0500 Subject: dump 2020-12-11 --- files/de/web/css/css_functions/index.html | 255 +++++++++++ .../stacking_and_float/index.html | 152 +++++++ .../stacking_context_example_1/index.html | 132 ++++++ .../stacking_context_example_2/index.html | 140 ++++++ .../stacking_context_example_3/index.html | 186 ++++++++ .../stacking_without_z-index/index.html | 128 ++++++ files/de/web/css/css_values_and_units/index.html | 493 +++++++++++++++++++++ files/de/web/css/transform-function/index.html | 295 ++++++++++++ .../transform-function/translate3d()/index.html | 147 ++++++ .../css/transform-function/translatex/index.html | 125 ++++++ .../css/transform-function/translatey()/index.html | 123 +++++ .../css/transform-function/translatez()/index.html | 128 ++++++ files/de/web/css/translate/index.html | 136 ++++++ files/es/glossary/host/index.html | 18 + .../global_objects/object/constructor/index.html | 222 ++++++++++ .../intl/listformat/format/index.html | 81 ++++ .../intl/listformat/listformat/index.html | 90 ++++ .../intl/listformat/supportedlocalesof/index.html | 84 ++++ .../global_objects/string/replaceall/index.html | 177 ++++++++ .../index.html" | 65 +++ files/ko/web/api/element/select_event/index.html | 76 ++++ .../index.html" | 74 ++++ files/ru/web/html/attributes/pattern/index.html | 157 +++++++ files/ru/web/mathml/element/mover/index.html | 100 +++++ .../index.html" | 484 ++++++++++++++++++++ .../global_objects/symbol/@@toprimitive/index.html | 64 +++ .../reference/global_objects/symbol/for/index.html | 108 +++++ .../global_objects/symbol/keyfor/index.html | 75 ++++ .../global_objects/symbol/tosource/index.html | 57 +++ .../global_objects/symbol/tostring/index.html | 76 ++++ .../global_objects/symbol/valueof/index.html | 64 +++ .../index.html" | 132 ++++++ 32 files changed, 4644 insertions(+) create mode 100644 files/de/web/css/css_functions/index.html create mode 100644 files/de/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html create mode 100644 files/de/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html create mode 100644 files/de/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html create mode 100644 files/de/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html create mode 100644 files/de/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html create mode 100644 files/de/web/css/css_values_and_units/index.html create mode 100644 files/de/web/css/transform-function/index.html create mode 100644 files/de/web/css/transform-function/translate3d()/index.html create mode 100644 files/de/web/css/transform-function/translatex/index.html create mode 100644 files/de/web/css/transform-function/translatey()/index.html create mode 100644 files/de/web/css/transform-function/translatez()/index.html create mode 100644 files/de/web/css/translate/index.html create mode 100644 files/es/glossary/host/index.html create mode 100644 files/it/web/javascript/reference/global_objects/object/constructor/index.html create mode 100644 files/ja/web/javascript/reference/global_objects/intl/listformat/format/index.html create mode 100644 files/ja/web/javascript/reference/global_objects/intl/listformat/listformat/index.html create mode 100644 files/ja/web/javascript/reference/global_objects/intl/listformat/supportedlocalesof/index.html create mode 100644 files/ja/web/javascript/reference/global_objects/string/replaceall/index.html create mode 100644 "files/ko/learn/javascript/objects/\354\226\274\353\247\210\353\202\230_\354\235\264\355\225\264\355\226\210\353\212\224\354\247\200_\355\231\225\354\235\270\355\225\264\353\263\264\354\236\220_colon__json/index.html" create mode 100644 files/ko/web/api/element/select_event/index.html create mode 100644 "files/ru/learn/html/multimedia_and_embedding/\320\270\320\267\320\276\320\261\321\200\320\260\320\266\320\265\320\275\320\270\321\217_\320\262_html/\320\277\321\200\320\276\320\262\320\265\321\200\321\214\321\202\320\265_\321\201\320\262\320\276\320\270_\320\267\320\275\320\260\320\275\320\270\321\217_colon__\320\270\320\267\320\276\320\261\321\200\320\260\320\266\320\265\320\275\320\270\321\217_\320\262_html/index.html" create mode 100644 files/ru/web/html/attributes/pattern/index.html create mode 100644 files/ru/web/mathml/element/mover/index.html create mode 100644 "files/ru/web/mathml/\320\260\321\202\321\200\320\270\320\261\321\203\321\202/index.html" create mode 100644 files/uk/web/javascript/reference/global_objects/symbol/@@toprimitive/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/symbol/for/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/symbol/keyfor/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/symbol/tosource/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/symbol/tostring/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/symbol/valueof/index.html create mode 100644 "files/zh-cn/web/css/css_logical_properties/\346\265\256\345\212\250\345\222\214\345\256\232\344\275\215/index.html" diff --git a/files/de/web/css/css_functions/index.html b/files/de/web/css/css_functions/index.html new file mode 100644 index 0000000000..648c96c2c0 --- /dev/null +++ b/files/de/web/css/css_functions/index.html @@ -0,0 +1,255 @@ +--- +title: CSS Funktionsnotation +slug: Web/CSS/CSS_Functions +tags: + - CSS + - CSS Datentypen + - CSS Funktion + - Funktionen + - Funktionsnotation + - Referenz + - Typen + - datentpen +translation_of: Web/CSS/CSS_Functions +--- +
{{CSSRef}}
+ +

Die CSS-Funktionsnotation ist ein Typ von CSS-Werten, der komplexere Datentypen darstellen oder spezielle Datenverarbeitungen oder Berechnungen aufrufen kann.

+ +

Syntax

+ +
selector {
+  property: functional-notation( [argument]? [, argument]! );
+}
+ +

Die Syntax beginnt mit dem Namen der funktionalen Notation, gefolgt von einer linken Klammer (. Als Nächstes folgen das/die Notationsargument(e), und die Funktion wird mit einer schließenden Klammer ) abgeschlossen.

+ +

Funktionen können mehrere Argumente annehmen, die ähnlich wie CSS-Eigenschaftswerte formatiert sind. Leerzeichen sind erlaubt, aber innerhalb der Klammern sind sie optional. In einigen Funktionsnotationen werden mehrere Argumente durch Kommas getrennt, während andere Leerzeichen verwenden.

+ +

Index

+ +

Zu den funktionalen Notationen, die durch eine Reihe von CSS-Spezifikationen definiert sind, gehören die folgenden:

+ +
A + + +B + + +C + + +D + + +E + + +F + + +G + + +H + + +I + + +L + + +M + + +O + + +P + + +R + + +S + + +T + + +U + + +V + + +
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS4 Values")}}{{Spec2("CSS4 Values")}}Hinzugefügte Funktionsnotation toggle(), attr(), calc(), min(), max(), clamp(), round(), mod(), rem(), mod(), sin(), cos(), tan(), asin(), acos(), atan(), atan2(), pow(), sqrt(), hypot(), log(), exp(), abs() und sign().
{{SpecName("CSS3 Values")}}{{Spec2("CSS3 Values")}}Fügt die Funktionsnotation calc() zu.
{{SpecName("CSS4 Colors")}}{{Spec2("CSS4 Colors")}}Fügt kommmalose Syntaxen für die funktionale Notation rgb(), rgba(), hsl(), und hsla() hinzu.
+ Erlaubt Alpha-Werte in rgb() und hsl(), und macht rgba() und hsla() into (deprecated) zu (veralteten) Aliasen für diese.
+ Fügt die Funktionen hwb(), device-cmyk() und color() hinzu.
{{SpecName("CSS3 Colors")}}{{Spec2("CSS3 Colors")}}Fügt rgba(), hsl(), hsla() als funktionale Notation hinzu.
{{SpecName("CSS4 Images")}}{{Spec2("CSS4 Images")}}Fügt element(), image(), image-set() und conic-gradient() als Funktionsnotation hinzu.
+ +

Siehe auch

+ + diff --git a/files/de/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html b/files/de/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html new file mode 100644 index 0000000000..40e655caef --- /dev/null +++ b/files/de/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html @@ -0,0 +1,152 @@ +--- +title: Stapeln mit fließenden Blöcken +slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float +tags: + - CSS + - CSS z-index + - CSS z-index verstehen + - Fortgeschritten + - Leitfaden + - Referenz + - z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float +--- +
{{cssref}}
+ +

Bei fließenden Blöcken (float) ist die Stapelreihenfolge ein wenig anders. Fließende Blöcke werden zwischen nicht positionierten Blöcken und positionierten Blöcken platziert:

+ +
    +
  1. Der Hintergrund und die Ränder des Wurzelelements
    2. +
  2. Nachfolgende nicht positionierte Blöcke, in der Reihenfolge ihres Erscheinens im HTML
    3. +
  3. Fließende Blöcke
    4. +
  4. Nachfolgende positionierte Elemente, in der Reihenfolge ihres Erscheinens in der HTML-Datei
    5. +
+ +

Wie Sie im Beispiel unten sehen können, sind Hintergrund und Rahmen des nicht positionierten Blocks (DIV #4) von fließenden Blöcken völlig unbeeinflusst, der Inhalt ist jedoch betroffen. Dies geschieht gemäß dem Standard-Float-Verhalten. Dieses Verhalten kann mit einer zusätzlichen Regel in der obigen Liste dargestellt werden:

+ +
    +
  1. Der Hintergrund und die Ränder des Wurzelelements
    2. +
  2. Nachfolgende nicht positionierte Blöcke, in der Reihenfolge ihres Erscheinens im HTML
    3. +
  3. Schwebende Blöcke
    4. +
  4. Nachfolgende nicht-positionierte Inline-Elemente
    5. +
  5. Nachfolgende positionierte Elemente, in der Reihenfolge ihres Erscheinens in der HTML
    6. +
+ +

Example of stacking rules with floating boxes

+ +
+

Hinweis: Wenn ein Deckkraftwert (opacity) auf den nicht positionierten Block (DIV #4) angewendet wird, passiert etwas Seltsames: Der Hintergrund und der Rand dieses Blocks ragen über die schwebenden Blöcke und die positionierten Blöcke hinaus. Das liegt an einem besonderen Teil der Spezifikation: Das Anwenden eines Deckkraftwerts erzeugt einen neuen Stapelkontext (siehe What No One Told You About Z-Index).

+
+ +

Quellcode für das Beispiel

+ +

HTML

+ +
<div id="abs1">
+  <b>DIV #1</b><br />position: absolute;</div>
+
+<div id="flo1">
+  <b>DIV #2</b><br />float: left;</div>
+
+<div id="flo2">
+  <b>DIV #3</b><br />float: right;</div>
+
+<br />
+
+<div id="sta1">
+  <b>DIV #4</b><br />no positioning</div>
+
+<div id="abs2">
+  <b>DIV #5</b><br />position: absolute;</div>
+
+<div id="rel1">
+  <b>DIV #6</b><br />position: relative;</div>
+
+
+ +

CSS

+ +
div {
+  padding: 10px;
+  text-align: center;
+}
+
+b {
+  font-family: sans-serif;
+}
+
+#abs1 {
+  position: absolute;
+  width: 150px;
+  height: 200px;
+  top: 10px;
+  right: 140px;
+  border: 1px dashed #900;
+  background-color: #fdd;
+}
+
+#sta1 {
+  height: 100px;
+  border: 1px dashed #996;
+  background-color: #ffc;
+  margin: 0px 10px 0px 10px;
+  text-align: left;
+}
+
+#flo1 {
+  margin: 0px 10px 0px 20px;
+  float: left;
+  width: 150px;
+  height: 200px;
+  border: 1px dashed #090;
+  background-color: #cfc;
+}
+
+#flo2 {
+  margin: 0px 20px 0px 10px;
+  float: right;
+  width: 150px;
+  height: 200px;
+  border: 1px dashed #090;
+  background-color: #cfc;
+}
+
+#abs2 {
+  position: absolute;
+  width: 150px;
+  height: 100px;
+  top: 80px;
+  left: 100px;
+  border: 1px dashed #990;
+  background-color: #fdd;
+}
+
+#rel1 {
+  position: relative;
+  border: 1px dashed #996;
+  background-color: #cff;
+  margin: 0px 10px 0px 10px;
+  text-align: left;
+}
+
+ +

See also

+ + + +
+

Original Dokumenteninformation

+ + +
diff --git a/files/de/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html b/files/de/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html new file mode 100644 index 0000000000..b1a48f0ebc --- /dev/null +++ b/files/de/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html @@ -0,0 +1,132 @@ +--- +title: Stapelkontext Beispiel 1 +slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1 +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1 +--- +
{{cssref}}
+ +

« CSS « Understanding CSS z-index

+ +

Stapelkontext Beispiel 1

+ +

Lassen Sie uns mit einem einfachen Beispiel beginnen. Im Wurzel-Stapelkontext haben wir zwei DIVs (DIV #1 und DIV #3), beide relativ positioniert, aber ohne {{cssxref("z-index")}} Eigenschaften. Innerhalb von DIV #1 befindet sich ein absolut positioniertes DIV #2, während sich in DIV #3 ein absolut positioniertes DIV #4 befindet, beide ohne z-index Eigenschaften.

+ +

Der einzige Stapelkontext ist der Root-Kontext. Ohne z-indizes werden die Elemente in der Reihenfolge ihres Auftretens gestapelt.

+ +

Stacking context example 1

+ +

Wenn DIV #2 ein positiver z-index Wert (nicht Null und nicht automatisch) zugewiesen wird, wird es über allen anderen DIVs gerendert.

+ +

Stacking context example 1

+ +

Wenn dann DIV #4 ebenfalls einen positiven z-index zugewiesen bekommt, der größer ist als der z-index von DIV #2, wird es über allen anderen DIVs einschließlich DIV #2 gerendert.

+ +

Stacking context example 1

+ +

In diesem letzten Beispiel können Sie sehen, dass DIV #2 und DIV #4 keine Geschwister sind, da sie zu verschiedenen Eltern in der Hierarchie der HTML-Elemente gehören. Trotzdem kann die Stapelung von DIV #4 in Bezug auf DIV #2 durch z-index gesteuert werden. Da DIV #1 und DIV #3 kein z-index-Wert zugewiesen ist, bilden sie keinen Stapelkontext. Das bedeutet, dass ihr gesamter Inhalt, einschließlich DIV #2 und DIV #4, zu demselben Wurzel-Stacking-Kontext gehört.

+ +

In Bezug auf die Stapelkontexte werden DIV #1 und DIV #3 einfach in das Wurzelelement assimiliert, und die resultierende Hierarchie ist die folgende:

+ + + +
Hinweis: DIV #1 und DIV #3 sind nicht lichtdurchlässig. Es ist wichtig, sich daran zu erinnern, dass das Zuweisen einer Deckkraft von weniger als 1 zu einem positionierten Element implizit einen Stapelkontext erzeugt, genau wie das Hinzufügen eines z-index Wertes. Und dieses Beispiel zeigt, was passiert, wenn ein übergeordnetes Element keinen Stapelkontext erzeugt.
+ +

Beispiel

+ +

HTML

+ +
<div id="div1">
+<br /><span class="bold">DIV #1</span>
+<br />position: relative;
+   <div id="div2">
+   <br /><span class="bold">DIV #2</span>
+   <br />position: absolute;
+   <br />z-index: 1;
+   </div>
+</div>
+
+<br />
+
+<div id="div3">
+<br /><span class="bold">DIV #3</span>
+<br />position: relative;
+   <div id="div4">
+   <br /><span class="bold">DIV #4</span>
+   <br />position: absolute;
+   <br />z-index: 2;
+   </div>
+</div>
+
+</body></html>
+
+ +

CSS

+ +
.bold {
+    font-weight: bold;
+    font: 12px Arial;
+}
+#div1,
+#div3 {
+    height: 80px;
+    position: relative;
+    border: 1px dashed #669966;
+    background-color: #ccffcc;
+    padding-left: 5px;
+}
+#div2 {
+    opacity: 0.8;
+    z-index: 1;
+    position: absolute;
+    width: 150px;
+    height: 200px;
+    top: 20px;
+    left: 170px;
+    border: 1px dashed #990000;
+    background-color: #ffdddd;
+    text-align: center;
+}
+#div4 {
+    opacity: 0.8;
+    z-index: 2;
+    position: absolute;
+    width: 200px;
+    height: 70px;
+    top: 65px;
+    left: 50px;
+    border: 1px dashed #000099;
+    background-color: #ddddff;
+    text-align: left;
+    padding-left: 10px;
+}
+ +

Ergebnis

+ +

{{ EmbedLiveSample('Example', '100%', '250px', '', 'Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1') }}

+ +

See also

+ + + +
+

Original Dokumenteninformation

+ + +
diff --git a/files/de/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html b/files/de/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html new file mode 100644 index 0000000000..bff33304e9 --- /dev/null +++ b/files/de/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html @@ -0,0 +1,140 @@ +--- +title: Stapelkontext Beispiel 2 +slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2 +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2 +--- +
{{cssref}}
+ +

« CSS « Understanding CSS z-index

+ +

Stapelkontext Beispiel 2

+ +

Dies ist ein sehr einfaches Beispiel, aber es ist der Schlüssel zum Verständnis des Konzepts des Stapelkontexts. Es gibt dieselben vier DIVs des vorherigen Beispiels, aber jetzt werden {{cssxref("z-index")}} Eigenschaften auf beiden Ebenen der Hierarchie zugewiesen.

+ +

{{ EmbedLiveSample('Example_source_code', '352', '270') }}

+ +

Sie können sehen, dass DIV #2 (z-index: 2) über DIV #3 (z-index: 1) liegt, da beide zum selben Stapelkontext gehören (dem Wurzel-Kontext), so dass die z-index Werte bestimmen, wie Elemente gestapelt werden.

+ +

Was als merkwürdig angesehen werden kann, ist, dass DIV #2 (z-index: 2) über DIV #4 (z-index: 10) liegt, trotz ihrer z-index Werte. Der Grund dafür ist, dass sie nicht zum selben Stapelkontext gehören. DIV #4 gehört zu dem Stacking-Kontext, der durch DIV #3 erzeugt wurde, und wie bereits erklärt, befindet sich DIV #3 (und sein gesamter Inhalt) unter DIV #2.

+ +

Zum besseren Verständnis der Situation sehen Sie hier die Hierarchie des Stapelkontexts:

+ + + +
Hinweis: Es ist zu beachten, dass sich die HTML-Hierarchie im Allgemeinen von der Stapelkontexthierarchie unterscheidet. In der Stapelkontexthierarchie werden Elemente, die keinen Stapelkontext erzeugen, an ihrem übergeordneten Element zusammengeklappt.
+ +

Beispiel

+ +

HTML

+ +
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+<head><style type="text/css">
+
+div { font: 12px Arial; }
+
+span.bold { font-weight: bold; }
+
+#div2 { z-index: 2; }
+#div3 { z-index: 1; }
+#div4 { z-index: 10; }
+
+#div1,#div3 {
+   height: 80px;
+   position: relative;
+   border: 1px dashed #669966;
+   background-color: #ccffcc;
+   padding-left: 5px;
+}
+
+#div2 {
+   opacity: 0.8;
+   position: absolute;
+   width: 150px;
+   height: 200px;
+   top: 20px;
+   left: 170px;
+   border: 1px dashed #990000;
+   background-color: #ffdddd;
+   text-align: center;
+}
+
+#div4 {
+   opacity: 0.8;
+   position: absolute;
+   width: 200px;
+   height: 70px;
+   top: 65px;
+   left: 50px;
+   border: 1px dashed #000099;
+   background-color: #ddddff;
+   text-align: left;
+   padding-left: 10px;
+}
+
+
+</style></head>
+
+<body>
+
+    <br />
+
+    <div id="div1"><br />
+        <span class="bold">DIV #1</span><br />
+        position: relative;
+        <div id="div2"><br />
+            <span class="bold">DIV #2</span><br />
+            position: absolute;<br />
+            z-index: 2;
+        </div>
+    </div>
+
+    <br />
+
+    <div id="div3"><br />
+        <span class="bold">DIV #3</span><br />
+        position: relative;<br />
+        z-index: 1;
+        <div id="div4"><br />
+            <span class="bold">DIV #4</span><br />
+            position: absolute;<br />
+            z-index: 10;
+        </div>
+    </div>
+
+</body>
+</html>
+
+ +

Siehe auch

+ + + +
+

Original Dokumenteninformation

+ + +
diff --git a/files/de/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html b/files/de/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html new file mode 100644 index 0000000000..165cd88bd6 --- /dev/null +++ b/files/de/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html @@ -0,0 +1,186 @@ +--- +title: Stapelkontext Beispiel 3 +slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3 +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3 +--- +
{{cssref}}
+ +

« CSS « Understanding CSS z-index

+ +

Stapelkontext Beispiel 3

+ +

Dieses letzte Beispiel zeigt Probleme, die entstehen, wenn mehrere positionierte Elemente in einer mehrstufigen HTML-Hierarchie gemischt werden und wenn z-Indizes über Klassenselektoren zugewiesen werden.

+ +

Nehmen wir als Beispiel ein hierarchisches Menü mit drei Ebenen, das aus mehreren positionierten DIVs besteht. Die DIVs der zweiten und dritten Ebene erscheinen, wenn man mit dem Mauszeiger über die übergeordneten Elemente fährt oder auf sie klickt. Normalerweise wird diese Art von Menü entweder clientseitig oder serverseitig per Skript generiert, so dass die Stilregeln mit einem Klassenselektor anstelle des id-Selektors zugewiesen werden.If the three menu levels partially overlap, then managing stacking could become a problem.

+ +

Wenn sich die drei Menüebenen teilweise überlappen, könnte die Verwaltung der Stapelung zu einem Problem werden.

+ +

{{ EmbedLiveSample('Example_source_code', '320', '330') }}

+ +

Das Menü der ersten Ebene wird nur relativ positioniert, es wird also kein Stapelkontext erzeugt.

+ +

Das Menü der zweiten Ebene wird absolut innerhalb des übergeordneten Elements positioniert. Um es über alle Menüs der ersten Ebene zu legen, wird ein {{cssxref("z-index")}} verwendet. Das Problem ist, dass für jedes Menü der zweiten Ebene ein Stapelkontext erzeugt wird und jedes Menü der dritten Ebene zum Kontext seines Elternelements gehört.

+ +

Ein Menü der dritten Ebene wird also unter den folgenden Menüs der zweiten Ebene gestapelt, da alle Menüs der zweiten Ebene denselben z-index Wert haben und die Standard-Stapelregeln gelten.

+ +

Um die Situation besser zu verstehen, sehen Sie hier die Stapelkontexthierarchie:

+ + + +

Dieses Problem kann vermieden werden, indem die Überlappung zwischen den Menüs der verschiedenen Ebenen entfernt wird, oder indem individuelle (und unterschiedliche) z-index Werte verwendet werden, die über den id-Selektor anstelle des class-Selektors zugewiesen werden, oder indem die HTML-Hierarchie abgeflacht wird.

+ +
Hinweis: Im Quellcode sehen Sie, dass die Menüs der zweiten und dritten Ebene aus mehreren DIVs bestehen, die in einem absolut positionierten Container enthalten sind. Dies ist nützlich, um sie alle auf einmal zu gruppieren und zu positionieren.
+ +

Beispiel Quellcode

+ +
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+<head><style type="text/css">
+
+div { font: 12px Arial; }
+
+span.bold { font-weight: bold; }
+
+div.lev1 {
+   width: 250px;
+   height: 70px;
+   position: relative;
+   border: 2px outset #669966;
+   background-color: #ccffcc;
+   padding-left: 5px;
+}
+
+#container1 {
+   z-index: 1;
+   position: absolute;
+   top: 30px;
+   left: 75px;
+}
+
+div.lev2 {
+   opacity: 0.9;
+   width: 200px;
+   height: 60px;
+   position: relative;
+   border: 2px outset #990000;
+   background-color: #ffdddd;
+   padding-left: 5px;
+}
+
+#container2 {
+   z-index: 1;
+   position: absolute;
+   top: 20px;
+   left: 110px;
+}
+
+div.lev3 {
+   z-index: 10;
+   width: 100px;
+   position: relative;
+   border: 2px outset #000099;
+   background-color: #ddddff;
+   padding-left: 5px;
+}
+
+</style></head>
+
+<body>
+
+<br />
+
+<div class="lev1">
+<span class="bold">LEVEL #1</span>
+
+   <div id="container1">
+
+      <div class="lev2">
+      <br /><span class="bold">LEVEL #2</span>
+      <br />z-index: 1;
+
+         <div id="container2">
+
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+
+         </div>
+
+      </div>
+
+      <div class="lev2">
+      <br /><span class="bold">LEVEL #2</span>
+      <br />z-index: 1;
+      </div>
+
+   </div>
+</div>
+
+<div class="lev1">
+<span class="bold">LEVEL #1</span>
+</div>
+
+<div class="lev1">
+<span class="bold">LEVEL #1</span>
+</div>
+
+<div class="lev1">
+<span class="bold">LEVEL #1</span>
+</div>
+
+</body></html>
+
+ +

Siehe auch

+ + + +
+

Original Dokumenteninformation

+ + +
+ +

Hinweis: Der Grund, warum das Beispielbild falsch aussieht - mit der zweiten Ebene 2, die die Menüs der Ebene 3 überlagert - ist, dass die Ebene 2 Deckkraft hat, was einen neuen Stapelungskontext erzeugt. Im Grunde ist diese ganze Beispielseite falsch und irreführend.

diff --git a/files/de/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html b/files/de/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html new file mode 100644 index 0000000000..4711fcdaef --- /dev/null +++ b/files/de/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html @@ -0,0 +1,128 @@ +--- +title: Stapeln ohne die Eigenschaft z-index +slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index +tags: + - CSS + - CSS z-index + - CSS z-index verstehen + - Fortgeschritten + - Leitfaden + - Referenz + - z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index +--- +
{{cssref}}
+ +

Wenn die CSS-Eigenschaft {{cssxref("z-index")}} bei keinem Element angegeben ist, werden die Elemente in der folgenden Reihenfolge gestapelt (von unten nach oben):

+ +
    +
  1. Der Hintergrund und die Ränder des Wurzelelements
    2. +
  2. Nachfolgende nicht positionierte Blöcke, in der Reihenfolge ihres Erscheinens im HTML
    3. +
  3. Nachfolgende positionierte Elemente, in der Reihenfolge ihres Erscheinens in der HTML-Datei
    4. +
+ +

Beachten Sie, dass die CSS-Eigenschaft {{cssxref("order")}}, wenn sie das Rendering von der "Reihenfolge des Erscheinens im HTML" innerhalb von {{cssxref("flex")}}-Containern ändert, auch die Reihenfolge für den Stapelkontext beeinflusst.

+ +

Im folgenden Beispiel sind die Elemente #1 bis #4 positionierte Elemente. Element Nr. 5 ist statisch und wird daher unter den anderen vier Elementen gezeichnet, obwohl es im HTML-Markup später kommt.

+ +

Figure 1. Exemple de règles d'empilement sans propriété z-index

+ +

Quellcode für das Beispiel

+ +

HTML

+ +
<div id="abs1" class="absolute">
+  <b>DIV #1</b><br />position: absolute;</div>
+<div id="rel1" class="relative">
+  <b>DIV #2</b><br />position: relative;</div>
+<div id="rel2" class="relative">
+  <b>DIV #3</b><br />position: relative;</div>
+<div id="abs2" class="absolute">
+  <b>DIV #4</b><br />position: absolute;</div>
+<div id="sta1" class="static">
+  <b>DIV #5</b><br />position: static;</div>
+
+ +

CSS

+ +
b {
+  font-family: sans-serif;
+}
+
+div {
+  padding: 10px;
+  border: 1px dashed;
+  text-align: center;
+}
+
+.static {
+  position: static;
+  height: 80px;
+  background-color: #ffc;
+  border-color: #996;
+}
+
+.absolute {
+  position: absolute;
+  width: 150px;
+  height: 350px;
+  background-color: #fdd;
+  border-color: #900;
+  opacity: 0.7;
+}
+
+.relative {
+  position: relative;
+  height: 80px;
+  background-color: #cfc;
+  border-color: #696;
+  opacity: 0.7;
+}
+
+#abs1 {
+  top: 10px;
+  left: 10px;
+}
+
+#rel1 {
+  top: 30px;
+  margin: 0px 50px 0px 50px;
+}
+
+#rel2 {
+  top: 15px;
+  left: 20px;
+  margin: 0px 50px 0px 50px;
+}
+
+#abs2 {
+  top: 10px;
+  right: 10px;
+}
+
+#sta1 {
+  background-color: #ffc;
+  margin: 0px 50px 0px 50px;
+}
+
+ +

Siehe auch

+ + + +
+

Original Dokumenteninformation

+ + +
diff --git a/files/de/web/css/css_values_and_units/index.html b/files/de/web/css/css_values_and_units/index.html new file mode 100644 index 0000000000..7cde234d24 --- /dev/null +++ b/files/de/web/css/css_values_and_units/index.html @@ -0,0 +1,493 @@ +--- +title: CSS values and units +slug: Web/CSS/CSS_Values_and_Units +translation_of: Web/CSS/CSS_Values_and_Units +--- +
{{CSSRef}}
+ +

Jede CSS declaration includes a property / value pair. Depending on the property, the value can include a single integer or keyword, to a series of keywords and values with or without units. There are a common set of data types -- values and units -- that CSS properties accept. Below is an overview of most of these data types. Refer to the page for each value type for more detailed information.

+ +

Textual data types

+ + + +

Text data types are either <string>, a quoted series of characters, or an <ident>, a "CSS Identifier" which is an unquoted string. A <string> must be quoted with either single or double quotes. CSS Identifiers, listed in the specifications as <ident> or <custom-ident>, must be unquoted.

+ +

In the CSS specifications, values that can be defined by the web developer, like keyframe animations, font-family names, or grid areas are listed as a  {{cssxref("<custom-ident>")}}, {{cssxref("<string>")}}, or both.

+ +

When both quoted and unquoted user defined text values are permitted, the specification will list <custom-ident> | <string>, meaning quotes are optional, such as is the case with animation names:

+ +
@keyframe validIdent {
+  /* keyframes go here */
+}
+@keyframe 'validString' {
+  /* keyframes go here */
+}
+ +

Some text values are not valid if encompassed in quotes. For example, the value of {{cssxref("grid-area")}} can be a <custom-ident>, so if we had a grid area named content we would use it without quotes:

+ +
.item {
+  grid-area: content;
+}
+
+ +

In comparison, a data type that is a {{cssxref("<string>")}}, such as a string value of the {{cssxref("content")}} property, must be quoted:

+ +
.item::after {
+    content: "This is my content.";
+}
+
+ +

While you can generally create any name you want, including using emojis, the identifier can't be none, unset, initial, or inherit, start with a digit or two dashes, and generally you don't want it to be any other pre-defined CSS keyword. See the {{cssxref("<custom-ident>")}} and {{cssxref("<string>")}} reference pages for more details.

+ +

Pre-defined keyword values

+ +

Pre-defined keywords are text values defined by the specification for that property. These keywords are also CSS Identifiers and are therefore used without quotes.

+ +

When viewing CSS property value syntax in a CSS specification or the MDN property page, allowable keywords will be listed in the following form. The following values are the pre-defined keyword values allowed for {{cssxref("float")}}.

+ +
left | right | none | inline-start | inline-end
+ +

Such values are used without quotes:

+ +
.box {
+    float: left;
+}
+
+ +

CSS-wide values

+ +

In addition to the pre-defined keywords that are part of the specification for a property, all CSS properties accept the CSS-wide property values {{cssxref("initial")}}, {{cssxref("inherit")}}, and {{cssxref("unset")}}, which explicitly specify defaulting behaviors.

+ +

The initial keyword represents the value specified as the property’s initial value. The inherit keyword represents the computed value of the property on the element’s parent, provided it is inherited.

+ +

The unset keyword acts as either inherit or initial, depending on whether the property is inherited or not.

+ +

A fourth value of {{cssxref("revert")}} was added in the Cascade Level 4 specification, but it does not currently have good browser support.

+ +

URLs

+ +

A {{cssxref("<url>")}} type uses functional notation, which accepts a <string> that is a URL. This may be an absolute URL or a relative URL. For example, if you wanted to include a background image, you might use either of the following.

+ +
.box {
+  background-image: url("images/my-background.png");
+}
+
+.box {
+  background-image: url("https://www.exammple.com/images/my-background.png");
+}
+
+ +

The parameter for url() can be either quoted or unquoted. If unquoted, it is parsed as a <url-token>, which has extra requirements including the escaping of certain characters. See {{cssxref("<url>")}}  for more information.

+ +

Numeric data types

+ + + +

Integers

+ +

An integer is one or more decimal digits, 0 through 9, such as 1024 or -55. An integer may be preceded by a + or - symbol, with no space between the symbol and the integer.

+ +

Numbers

+ +

A {{cssxref("<number>")}} represents a real number, which may or may not have a decimal point with a fractional component, for example 0.255, 128 or -1.2. Numbers may also be preceded by a + or - symbol.

+ +

Dimensions

+ +

A {{cssxref("<dimension>")}} is a <number> with a unit attached to it, for example 45deg, 100ms, or 10px. The attached unit identifier is case insensitive. There is never a space or any other characters between a the number and the unit identifier: i.e. 1 cm is not valid.

+ +

CSS uses dimensions to specify:

+ + + +

These are all covered in subsections below.

+ +

Distance units

+ +

Where a distance unit, also known as a length, is allowed as a value for a property, this is described as the {{cssxref("<length>")}} type. There are two types of lengths in CSS: relative and absolute.

+ +

Relative length units specify a length in relation to something else. For example, em is relative to the font size on the element and vh is relative to the viewport height.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

Relative length units

+
UnitRelative to
emFont size of the element.
exx-height of the element's font.
capCap height (the nominal height of capital letters) of the element's font.
chAverage character advance of a narrow glyph in the element’s font, as represented by the “0” (ZERO, U+0030) glyph.
icAverage character advance of a full width glyph in the element’s font, as represented by the “水” (CJK water ideograph, U+6C34) glyph.
remFont size of the root element.
lhLine height of the element.
rlhLine height of the root element.
vw1% of viewport's width.
vh1% of viewport's height.
vi1% of viewport's size in the root element's inline axis.
vb1% of viewport's size in the root element's block axis.
vmin1% of viewport's smaller dimension.
vmax1% of viewport's larger dimension.
+ +

Absolute length units are fixed to a physical length: either an inch or a centimeter. Many of these units are therefore more useful when the output is a fixed size media, such as print. For example, mm is a physical millimeter, 1/10th of a centimeter.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

Absolute length units

+
UnitNameEquivalent to
cmCentimeters1cm = 96px/2.54
mmMillimeters1mm = 1/10th of 1cm
QQuarter-millimeters1Q = 1/40th of 1cm
inInches1in = 2.54cm = 96px
pcPicas1pc = 1/16th of 1in
ptPoints1pt = 1/72th of 1in
pxPixels1px = 1/96th of 1in
+ +

When including a length value, if the length is 0, the unit identifier is not required. Otherwise, the unit identifier is required, is case insensitive, and must come immediately after the numeric part of the value, with no space in-between.

+ +

Angle units

+ +

Angle values are represented by the type {{cssxref("<angle>")}} and accept the following values:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
UnitNameDescription
degDegreesThere are 360 degrees in a full circle.
gradGradiansThere are 400 gradians in a full circle.
radRadiansThere are 2π radians in a full circle.
turnTurnsThere is 1 turn in a full circle.
+ +

Time units

+ +

Time values are represented by the type {{cssxref("<time>")}}. When including a time value, the unit identifier -- the s or ms -- is required. It accepts the following values.

+ + + + + + + + + + + + + + + + + + + + + +
UnitNameDescription
sSeconds
msMillisecondsThere are 1,000 milliseconds in a second.
+ +

Frequency units

+ +

Frequency values are represented by the type {{cssxref("<frequency>")}}. It accepts the following values.

+ + + + + + + + + + + + + + + + + + + + + +
UnitNameDescription
HzHertzRepresents the number of occurrences per second.
kHzKiloHertzA kiloHertz is 1000 Hertz.
+ +

1Hz, which can also be written as 1hz or 1HZ, is one cycle per second.

+ +

Resolution unit

+ +

Resolution units are represented by the type {{cssxref("<resolution>")}}. They represent the size of a single dot in a graphical representation, such as a screen, by indicating how many of these dots fit in a CSS inch, centimeter, or pixel. It accepts the following values:

+ + + + + + + + + + + + + + + + + + + + + + +
UnitDescription
dpiDots per inch.
dpcmDots per centimetre.
dppx, xDots per px unit.
+ +

Percentages

+ +

A {{cssxref("<percentage>")}} is a type that represents a fraction of some other value.

+ +

Percentage values are always relative to another quantity, for example a length. Each property that allows percentages also defines the quantity to which the percentage refers. This quantity can be a value of another property of the same element, the value of a property of an ancestor element, a measurement of a containing block, or something else.

+ +

As an example, if you specify the {{cssxref("width")}} of a box as a percentage, it refers to the percentage of the box's parent's computed width:

+ +
.box {
+  width: 50%;
+}
+ +

Mixing percentages and dimensions

+ +

Some properties accept a dimension that could be either one of two types, for example a <length> or a <percentage>. In this case the allowed value is detailed in the specification as a combination unit, e.g. {{cssxref("<length-percentage>")}}. Other possible combinations are as follows:

+ + + +

Special data types (defined in other specs)

+ + + +

Color

+ +

The {{cssxref("<color>")}} value specifies the color of an element feature (e.g. it's background color), and is defined in the CSS Color Module.

+ +

Image

+ +

The {{cssxref("<image>")}} value specifies all the different types of image that can be used in CSS, and is defined in the CSS Image Values and Replaced Content Module.

+ +

Position

+ +

The {{cssxref("<position>")}} type defines 2D positioning of an object inside a positioning area, for example a background image inside a container. This type is interpreted as a  {{cssxref("background-position")}} and therefore specified in the CSS Backgrounds and Borders specification.

+ +

Functional notation

+ + + +

Functional notation is a type of value that can represent more complex types or invoke special processing by CSS. The syntax starts with the name of the function immediately followed by a left parenthesis ( followed by the argument(s) to the notation followed by a right parenthesis ). Functions can take multiple arguments, which are formatted similarly to a CSS property value.

+ +

White space is allowed, but optional inside the parentheses. (But see notes regarding whitespace within pages for min(), max() and clamp() functions.)

+ +

Some legacy functional notations such as rgba() use commas, but generally commas are only used to separate items in a list. If a comma is used to separate arguments, white space is optional before and after the comma.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS4 Values")}}{{Spec2("CSS4 Values")}}Adds the vi, vb, ic, cap, lh and rlh units.
+ Adds the min(), max() and clamp() functional notation
+ Adds toggle()
{{SpecName("CSS3 Values")}}{{Spec2("CSS3 Values")}}Adds calc(), ch, rem, vw, vw, vmin, vmax, Q
{{SpecName("CSS4 Colors")}}{{Spec2("CSS4 Colors")}}Adds commaless syntaxes for the rgb(), rgba(), hsl(), and hsla() functions. Allows alpha values in rgb() and hsl(), turning rgba() and hsla() into (deprecated) aliases for them.
+ Adds color keyword rebeccapurple.
+ Adds 4- and 8-digit hex color values, where the last digit(s) represents the alpha value.
+ Adds hwb(), device-cmyk(), and color() functions.
{{SpecName("CSS3 Colors")}}{{Spec2("CSS3 Colors")}}Deprecates system-colors. Adds SVG colors. Adds the rgba(), hsl(), and hsla() functions.
{{SpecName("CSS4 Images")}}{{Spec2("CSS4 Images")}} +

Adds element(), image(), image-set(), conic-gradient()

+
{{SpecName("CSS3 Images")}}{{Spec2("CSS3 Images")}}Initial definition of image.
{{SpecName("CSS2.1")}}{{Spec2("CSS2.1")}}
{{SpecName("CSS1")}}{{Spec2("CSS1")}}Initial definition.
+ +

See also

+ + diff --git a/files/de/web/css/transform-function/index.html b/files/de/web/css/transform-function/index.html new file mode 100644 index 0000000000..7ad06db5c7 --- /dev/null +++ b/files/de/web/css/transform-function/index.html @@ -0,0 +1,295 @@ +--- +title: +slug: Web/CSS/transform-function +tags: + - CSS + - CSS Data Type + - CSS Transforms + - Data Type + - Layout + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/CSS/transform-function +--- +
{{CSSRef}}
+ +

The <transform-function> CSS data type represents a transformation that affects an element's appearance. Transformation functions can rotate, resize, distort, or move an element in 2D or 3D space. It is used in the {{cssxref("transform")}} property.

+ +

Syntax

+ +

The <transform-function> data type is specified using one of the transformation functions listed below. Each function applies a geometric operation in either 2D or 3D.

+ +

Matrix transformation

+ +
+
matrix()
+
Describes a homogeneous 2D transformation matrix.
+
matrix3d()
+
Describes a 3D transformation as a 4×4 homogeneous matrix.
+
+ +

Perspective

+ +
+
perspective()
+
Sets the distance between the user and the z=0 plane.
+
+ +

Rotation

+ +
+
rotate()
+
Rotates an element around a fixed point on the 2D plane.
+
rotate3d()
+
Rotates an element around a fixed axis in 3D space.
+
rotateX()
+
Rotates an element around the horizontal axis.
+
rotateY()
+
Rotates an element around the vertical axis.
+
rotateZ()
+
Rotates an element around the z-axis.
+
+ +

Scaling (resizing)

+ +
+
scale()
+
Scales an element up or down on the 2D plane.
+
scale3d()
+
Scales an element up or down in 3D space.
+
scaleX()
+
Scales an element up or down horizontally.
+
scaleY()
+
Scales an element up or down vertically.
+
scaleZ()
+
Scales an element up or down along the z-axis.
+
+ +

Skewing (distortion)

+ +
+
skew()
+
Skews an element on the 2D plane.
+
skewX()
+
Skews an element in the horizontal direction.
+
skewY()
+
Skews an element in the vertical direction.
+
+ +

Translation (moving)

+ +
+
translate()
+
Translates an element on the 2D plane.
+
translate3d()
+
Translates an element in 3D space.
+
translateX()
+
Translates an element horizontally.
+
translateY()
+
Translates an element vertically.
+
translateZ()
+
Translates an element along the z-axis.
+
+ +

Description

+ +

Various coordinate models can be used to describe an HTML element's size and shape, as well as any transformations applied to it. The most common is the Cartesian coordinate system, although homogeneous coordinates are also sometimes used.

+ +

Cartesian coordinates

+ +

+ +

In the Cartesian coordinate system, a two-dimensional point is described using two values: an x coordinate (abscissa) and a y coordinate (ordinate). This is represented by the vector notation (x, y).

+ +

In CSS (and most computer graphics), the origin (0, 0) represents the top-left corner of any element. Positive coordinates are down and to the right of the origin, while negative ones are up and to the left. Thus, a point that's 2 units to the right and 5 units down would be (2, 5), while a point 3 units to the left and 12 units up would be (-3, -12).

+ +

Transformation functions

+ +

Transformation functions alter the appearance of an element by manipulating the values of its coordinates. A linear transformation function is described using a 2×2 matrix, like this:

+ +

ac bd

+ +

The function is applied to an element by using matrix multiplication. Thus, each coordinate changes based on the values in the matrix:

+ +

ac bd xy = ax+cy bx+dy

+ +

It is even possible to apply several transformations in a row:

+ +

a1 c1 b1 d1 a2 c2 b2 d2 = a1 a2 + c1 b2 a1 c2 + c1 d2 b1 a2 + d1 b2 b1 c2 + d1 d2

+ +

With this notation, it is possible to describe, and therefore compose, most common transformations: rotations, scaling, or skewing. (In fact, all transformations that are linear functions can be described.) Composite transformations are effectively applied in order from right to left.

+ +

However, one major transformation is not linear, and therefore must be special-cased when using this notation: translation. The translation vector (tx, ty) must be expressed separately, as two additional parameters.

+ +
+

Note: Though trickier than Cartesian coordinates, homogeneous coordinates in projective geometry lead to 3×3 transformation matrices, and can simply express translations as linear functions.

+
+ +

Examples

+ +

Transform function comparison

+ +

The following example provides a 3D cube created from DOM elements and transforms, and a select menu allowing you to choose different transform functions to transform the cube with, so you can compare the effects of the different types.

+ +

Choose one, and the transform is applied to the cube; after 2 seconds, the cube reverts back to its starting state. The cube's starting state is slightly rotated using transform3d(), to allow you to see the effect of all the transforms.

+ +

HTML

+ +
<main>
+  <section id="example-element">
+      <div class="face front">1</div>
+      <div class="face back">2</div>
+      <div class="face right">3</div>
+      <div class="face left">4</div>
+      <div class="face top">5</div>
+      <div class="face bottom">6</div>
+  </section>
+
+  <div class="select-form">
+    <label>Select a transform function</label>
+    <select>
+      <option selected>Choose a function</option>
+      <option>rotate(360deg)</option>
+      <option>rotateX(360deg)</option>
+      <option>rotateY(360deg)</option>
+      <option>rotateZ(360deg)</option>
+      <option>rotate3d(1, 1, 1, 90deg)</option>
+      <option>scale(1.5)</option>
+      <option>scaleX(1.5)</option>
+      <option>scaleY(1.5)</option>
+      <option>scaleZ(1.5)</option>
+      <option>scale3d(1, 1.5, 1.5)</option>
+      <option>skew(17deg, 13deg)</option>
+      <option>skewX(17deg)</option>
+      <option>skewY(17deg)</option>
+      <option>translate(100px, 100px)</option>
+      <option>translateX(100px)</option>
+      <option>translateY(100px)</option>
+      <option>translateZ(100px)</option>
+      <option>translate3d(50px, 50px, 50px)</option>
+      <option>perspective(200px)</option>
+      <option>matrix(1, 2, -1, 1, 80, 80)</option>
+      <option>matrix3d(1,0,0,0,0,1,3,0,0,0,1,0,50,100,0,1.1)</option>
+    </select>
+  </div>
+</main>
+ +

CSS

+ +
main {
+  width: 400px;
+  height: 200px;
+  padding: 50px;
+  background-image: linear-gradient(135deg, white, cyan, white);
+}
+
+#example-element {
+  width: 100px;
+  height: 100px;
+  transform-style: preserve-3d;
+  transition: transform 1.5s;
+  transform: rotate3d(1, 1, 1, 30deg);
+}
+
+.face {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  backface-visibility: inherit;
+  font-size: 60px;
+  color: #fff;
+}
+
+.front {
+    background: rgba(90,90,90,.7);
+    transform: translateZ(50px);
+}
+
+.back {
+    background: rgba(0,210,0,.7);
+    transform: rotateY(180deg) translateZ(50px);
+}
+
+.right {
+  background: rgba(210,0,0,.7);
+  transform: rotateY(90deg) translateZ(50px);
+}
+
+.left {
+  background: rgba(0,0,210,.7);
+  transform: rotateY(-90deg) translateZ(50px);
+}
+
+.top {
+  background: rgba(210,210,0,.7);
+  transform: rotateX(90deg) translateZ(50px);
+}
+
+.bottom {
+  background: rgba(210,0,210,.7);
+  transform: rotateX(-90deg) translateZ(50px);
+}
+
+.select-form {
+  margin-top: 50px;
+}
+ +

JavaScript

+ +
const selectElem = document.querySelector('select');
+const example = document.querySelector('#example-element');
+
+selectElem.addEventListener('change', () => {
+  if(selectElem.value === 'Choose a function') {
+    return;
+  } else {
+    example.style.transform = `rotate3d(1, 1, 1, 30deg) ${selectElem.value}`;
+    setTimeout(function() {
+      example.style.transform = 'rotate3d(1, 1, 1, 30deg)';
+    }, 2000)
+  }
+})
+ +

Result

+ +

{{EmbedLiveSample('Transform_function_comparison', '100%', 300)}}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS Transforms 2', '#transform-functions', '<transform-function>')}}{{Spec2('CSS Transforms 2')}}Added 3D transform functions.
{{SpecName('CSS3 Transforms', '#transform-functions', '<transform-function>')}}{{Spec2('CSS3 Transforms')}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("css.types.transform-function")}}

+ +

See also

+ + diff --git a/files/de/web/css/transform-function/translate3d()/index.html b/files/de/web/css/transform-function/translate3d()/index.html new file mode 100644 index 0000000000..fc95451ba8 --- /dev/null +++ b/files/de/web/css/transform-function/translate3d()/index.html @@ -0,0 +1,147 @@ +--- +title: translate3d() +slug: Web/CSS/transform-function/translate3d() +tags: + - CSS + - CSS Funktion + - CSS Transformation + - Funktion + - Referenz +translation_of: Web/CSS/transform-function/translate3d() +--- +
{{CSSRef}}
+ +

Die CSS-Eigenschaften translate3d() positioniert ein Element im 3D-Raum neu. Sein Ergebnis ist ein {{cssxref("<Transform-Funktion>")}} Datentyp.

+ +
{{EmbedInteractiveExample("pages/css/function-translate3d.html")}}
+ + + +

Diese Transformation wird durch einen dreidimensionalen Vektor charakterisiert. Seine Koordinaten legen fest, wie sehr sich das Element in jede Richtung bewegt.

+ +

Syntax

+ +
translate3d(tx, ty, tz)
+
+ +

Werte

+ +
+
tx
+
Ist ein {{cssxref("<Länge>")}} oder {{cssxref("<Prozentsatz>")}}, das die Abszisse des Verschiebungsvektors darstellt.
+
ty
+
Ist ein {{cssxref("<Länge>")}} oder {{cssxref("<Prozentsatz>")}}, das die Ordinate des Verschiebevektors darstellt.
+
tz
+
Ist ein {{cssxref("<Länge>")}}, der die z-Komponente des Verschiebungsvektors darstellt.
+ Es kann kein {{cssxref("<Prozentwert>")}}-Wert sein; in diesem Fall wird die Eigenschaft, die die Transformation enthält, als ungültig betrachtet.
+
+ + + + + + + + + + + + + + + + + +
Kartesische Koordinaten auf ℝ2Homogene Koordinaten auf ℝℙ2Kartesische Koordinaten auf ℝ3Homogene Koordinaten auf ℝℙ3
+

Diese Transformation gilt für den 3D-Raum und kann nicht in der Ebene dargestellt werden.

+ 		Eine Verschiebung ist keine lineare Transformation in ℝ3 und kann nicht durch eine kartesische Koordinatenmatrix dargestellt werden. 100tx010ty001tz0001
+ +

Beispiele

+ +

Verwendung einer einachsigen Verschiebung

+ +

HTML

+ +
<div>Static</div>
+<div class="moved">Moved</div>
+<div>Static</div>
+ +

CSS

+ +
div {
+  width: 60px;
+  height: 60px;
+  background-color: skyblue;
+}
+
+.moved {
+  /* Equivalent to perspective(500px) translateX(10px) */
+  transform: perspective(500px) translate3d(10px, 0, 0px);
+  background-color: pink;
+}
+
+ +

Ergebnis

+ +

{{EmbedLiveSample("Using_a_single_axis_translation", 250, 250)}}

+ +

Kombinierte Z-Achsen- und X-Achsen-Verschiebung

+ +

HTML

+ +
<div>Static</div>
+<div class="moved">Moved</div>
+<div>Static</div>
+ +

CSS

+ +
div {
+  width: 60px;
+  height: 60px;
+  background-color: skyblue;
+}
+
+.moved {
+  transform: perspective(500px) translate3d(10px, 0, 100px);
+  background-color: pink;
+}
+
+ +

Ergebnis

+ +

{{EmbedLiveSample("Combining_z-axis_and_x-axis_translation", 250, 250)}}

+ +

Spezifikation

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName("CSS Transforms 2", "#funcdef-translate3d", "translate3d()")}}{{Spec2("CSS Transforms 2")}}Ursprüngliche Definition
+ +

Browser-Kompatibilität

+ + + +

{{Compat("css.types.transform-function")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/css/transform-function/translatex/index.html b/files/de/web/css/transform-function/translatex/index.html new file mode 100644 index 0000000000..764fd63db3 --- /dev/null +++ b/files/de/web/css/transform-function/translatex/index.html @@ -0,0 +1,125 @@ +--- +title: translateX() +slug: Web/CSS/transform-function/translateX +tags: + - CSS + - CSS Funktion + - CSS Tranformation + - Funktion + - Referenz +translation_of: Web/CSS/transform-function/translateX +--- +
{{CSSRef}}
+ +

Die CSS-Funktion translateX() positioniert ein Element horizontal auf der 2D-Ebene neu. Ihr Ergebnis ist ein {{cssxref("<transform-function>")}} Datentyp.

+ +

+ +
+

Hinweis: translateX(tx) ist dasselbe wie translate(tx, 0) oder translate3d(tx, 0, 0).

+
+ +

Syntax

+ +
/* <length-percentage> values */
+transform: translateX(200px);
+transform: translateX(50%);
+
+ +

Werte

+ +
+
<length-percentage>
+
Ist ein {{cssxref("<length>")}} oder {{cssxref("<percentage>")}} , der die Abszisse des Verschiebevektors darstellt. Ein Prozentwert bezieht sich auf die Breite der Referenzbox, die durch die Eigenschaft {{cssxref("transform-box")}} definiert ist.
+
+ + + + + + + + + + + + + + + + + + + + + +
Kartesische Koordinaten auf ℝ2Homogene Koordinaten auf ℝℙ2Kartesische Koordinaten auf ℝ3Homogene Koordinaten auf ℝℙ3
+

Eine Translation ist keine lineare Transformation in ℝ2 und kann nicht durch eine kartesische Koordinatenmatrix dargestellt werden.

+ 		10t010001 10t010001 100t010000100001
[1 0 0 1 t 0]
+ +

Formale Syntax

+ +
translateX({{cssxref("<length-percentage>")}})
+
+ +

Beispiel

+ +

HTML

+ +
<div>Static</div>
+<div class="moved">Moved</div>
+<div>Static</div>
+ +

CSS

+ +
div {
+  width: 60px;
+  height: 60px;
+  background-color: skyblue;
+}
+
+.moved {
+  transform: translateX(10px); /* Equal to translate(10px) */
+  background-color: pink;
+}
+
+ +

Ergebnis

+ +

{{EmbedLiveSample("Examples", 250, 250)}}

+ +

Spezifikation

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName("CSS3 Transforms", "#funcdef-transform-translatex", "translateX()")}}{{Spec2("CSS3 Transforms")}}Ursprüngliche Definition
+ +

Browser-Kompatibilität

+ + + +

{{Compat("css.types.transform-function")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/css/transform-function/translatey()/index.html b/files/de/web/css/transform-function/translatey()/index.html new file mode 100644 index 0000000000..a364b79966 --- /dev/null +++ b/files/de/web/css/transform-function/translatey()/index.html @@ -0,0 +1,123 @@ +--- +title: translateY() +slug: Web/CSS/transform-function/translateY() +tags: + - CSS + - CSS Funktion + - CSS Transfomation + - Funktion + - Referenz +translation_of: Web/CSS/transform-function/translateY() +--- +
{{CSSRef}}
+ +

Die CSS-Funktion translateY() positioniert ein Element horizontal auf der 2D-Ebene neu. Ihr Ergebnis ist ein {{cssxref("<transform-function>")}} Datentyp.

+ +

+ +
+

Hinweis: translateY(ty) ist dasselbe wie translate(0, ty) oder translate3d(0, ty, 0).

+
+ +

Syntax

+ +
/* <length-percentage> values */
+transform: translateY(200px);
+transform: translateY(50%);
+
+ +

Werte

+ +
+
<length-percentage>
+
Ist ein {{cssxref("<length>")}} oder {{cssxref("<percentage>")}} , der die Abszisse des Verschiebevektors darstellt. Ein Prozentwert bezieht sich auf die Breite der Referenzbox, die durch die Eigenschaft {{cssxref("transform-box")}} definiert ist.
+
+ + + + + + + + + + + + + + + + + + + + + +
Kartesische Koordinaten auf ℝ2Homogene Koordinaten auf ℝℙ2Kartesische Koordinaten auf ℝ3Homogene Koordinaten auf ℝℙ3
+

Eine Translation ist keine lineare Transformation in ℝ2 und kann nicht durch eine kartesische Koordinatenmatrix dargestellt werden.

+ 		10001t001 10001t001 1000010t00100001
[1 0 0 1 0 t]
+ +

Formale Syntax

+ +
translateY({{cssxref("<length-percentage>")}})
+
+ +

Beispiel

+ +

HTML

+ +
<div>Static</div>
+<div class="moved">Moved</div>
+<div>Static</div>
+ +

CSS

+ +
div {
+  width: 60px;
+  height: 60px;
+  background-color: skyblue;
+}
+
+.moved {
+  transform: translateY(10px);
+  background-color: pink;
+}
+
+ +

Ergebnis

+ +

{{EmbedLiveSample("Examples", 250, 250)}}

+ +

Spezifikation

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName("CSS3 Transforms", "#funcdef-transform-translatex", "translateX()")}}{{Spec2("CSS3 Transforms")}}Ursprüngliche Definition
+ +

Browser-Kompatibilität

+ + + +

{{Compat("css.types.transform-function")}}

+ +

See also

+ + diff --git a/files/de/web/css/transform-function/translatez()/index.html b/files/de/web/css/transform-function/translatez()/index.html new file mode 100644 index 0000000000..27e86335fd --- /dev/null +++ b/files/de/web/css/transform-function/translatez()/index.html @@ -0,0 +1,128 @@ +--- +title: translateZ() +slug: Web/CSS/transform-function/translateZ() +tags: + - 3D + - CSS + - CSS Funktion + - CSS Transformation + - Funktion + - Referenz +translation_of: Web/CSS/transform-function/translateZ() +--- +
{{CSSRef}}
+ +

Die CSS-Funktion translateZ() positioniert ein Element entlang der Z-Achse im 3D-Raum neu, d. h. näher zum Betrachter hin oder weiter von ihm weg. Ihr Ergebnis ist ein {{cssxref("<transform-function>")}} Datentyp.

+ +
{{EmbedInteractiveExample("pages/css/function-translateZ.html")}}
+ + + +

Diese Transformation wird durch einen {{cssxref("<length>")}}-Wert definiert, der angibt, wie weit sich das Element oder die Elemente nach innen oder nach außen bewegen.

+ +

In den obigen interaktiven Beispielen wurden die Werte perspective: 550px; gesetzt, um einen 3D-Raum zu erzeugen, und transform-style: preserve-3d;, damit die Kinder-elemente, die 6 Seiten des Würfels, auch im 3D-Raum positioniert werden, auf den Würfel gesetzt.

+ +
+

Hinweis: translateZ(tz) ist gleichzusetzen mit translate3d(0, 0, tz).

+
+ +

Syntax

+ +
translateZ(tz)
+
+ +

Werte

+ +
+
tz
+
Ein {{cssxref("<Länge>")}} Wert, der die Z-Komponente des Verschiebungsvektors darstellt. Ein positiver Wert verschiebt das Element zum Betrachter hin, ein negativer Wert weiter vom Betrachter weg.
+
+ + + + + + + + + + + + + + + + + +
Kartesische Koordinaten auf ℝ2Homogene Koordinaten auf ℝℙ2Kartesische Koordinaten auf ℝ3Homogene Koordinaten auf ℝℙ3
Diese Transformation gilt für den 3D-Raum und kann nicht in der Ebene dargestellt werden.Eine Verschiebung ist keine lineare Transformation in ℝ3 und kann nicht durch eine kartesische Koordinatenmatrix dargestellt werden. 10000100001t0001
+ +

Beispiel

+ +

In diesem Beispiel werden zwei Boxen erstellt. Einer wird normal auf der Seite positioniert, ohne dass er übersetzt wird. Der zweite wird durch Anwendung der Perspektive verändert, um einen 3D-Raum zu erzeugen, und dann in Richtung des Benutzers bewegt.

+ +

HTML

+ +
<div>Static</div>
+<div class="moved">Moved</div>
+ +

CSS

+ +
div {
+  position: relative;
+  width: 60px;
+  height: 60px;
+  left: 100px;
+  background-color: skyblue;
+}
+
+.moved {
+  transform: perspective(500px) translateZ(200px);
+  background-color: pink;
+}
+
+ +

Was hier wirklich wichtig ist, ist die Klasse "moved"; lassen Sie uns einen Blick darauf werfen, was sie tut. Zunächst positioniert die Funktion perspective() den Betrachter relativ zu der Ebene, die bei z=0 liegt (im Wesentlichen die Oberfläche des Bildschirms). Ein Wert von 500px bedeutet, dass sich der Benutzer 500 Pixel "vor" dem Bild befindet, das bei z=0 liegt.

+ +

Dann verschiebt die Funktion translateZ() das Element um 200 Pixel vom Bildschirm "nach außen", in Richtung des Benutzers. Dies hat den Effekt, dass das Element größer erscheint, wenn es auf einem 2D-Display betrachtet wird, oder näher, wenn es mit einem VR-Headset oder einem anderen 3D-Anzeigegerät betrachtet wird.

+ +

Beachten Sie, wenn der perspective()-Wert kleiner ist als der translateZ()-Wert, wie z.B. transform: perspective(200px) translateZ(300px); das transformierte Element wird nicht sichtbar sein, da es weiter als der Viewport des Benutzers ist. Je kleiner der Unterschied zwischen den Werten von perspective() und translateZ() ist, desto näher ist der Benutzer am Element und desto größer erscheint das übersetzte Element.

+ +

Ergebnis

+ +

{{EmbedLiveSample("Examples", 250, 250)}}

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS Transforms 2', '#transform-functions', 'transform')}}{{Spec2('CSS Transforms 2')}}Fügt eine 3D-Transformationsfunktion zum CSS Transform-Standard hinzu.
+ +

Browser-Kompatibilität

+ + + +

{{Compat("css.types.transform-function")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/css/translate/index.html b/files/de/web/css/translate/index.html new file mode 100644 index 0000000000..ab89dae4c4 --- /dev/null +++ b/files/de/web/css/translate/index.html @@ -0,0 +1,136 @@ +--- +title: translate +slug: Web/CSS/translate +tags: + - CSS + - CSS Eigenschaft + - Experimentell + - Referenz + - Tranformation +translation_of: Web/CSS/translate +--- +
{{CSSRef}}
+ +

Mit der CSS-Eigenschaft translate CSS können Sie Transformationen einzeln und unabhängig von der Eigenschaft {{CSSxRef("transform")}} angeben. Dies entspricht eher der typischen Verwendung auf der Benutzeroberfläche und erspart es, sich die genaue Reihenfolge der Transformationsfunktionen zu merken, die im Transformationswert angegeben werden müssen.

+ +

Syntax

+ +
/* Standardwert */
+translate: none;
+
+/* Einzelwert */
+translate: 100px;
+translate: 50%;
+
+/* Zwei Werte */
+translate: 100px 200px;
+translate: 50% 105px;
+
+/* Drei Werte */
+translate: 50% 105px 5rem;
+
+ +

Values

+ +
+
Einzelwert {{cssxref("<length-percentage>")}}
+
Ein Einzelwert als {{cssxref("<Länge>")}} oder {{cssxref("<Prozentsatz>")}}, der eine 2D-Verschiebung angibt, die eine gleiche Verschiebung entlang der X- und Y-Achse spezifiziert. Äquivalent zu einer Funktion translate() (2D-Übersetzung) mit zwei angegebenen Werten.
+
Zwei Werte {{cssxref("<length-percentage>")}}
+
Zwei Werte als {{cssxref("<Länge>")}} oder {{cssxref("<Prozentsatz>")}}, wobei der erste Wert für die Verschiebung auf der X- und der Zweite auf der Y-Achse steht.
+
Drei Werte {{cssxref("<length-percentage>")}}
+
Zwei Werte als {{cssxref("<Länge>")}} oder {{cssxref("<Prozentsatz>")}} und ein dritter Wert im Format {{cssxref("<length>")}}, die die Verchiebung auf der X-, Y-, und Z-Achse spezifizieren. Entspricht der Funktion {{cssxref("translate3d()")}} (3D-Verschiebung).
+
none
+
Gibt an, dass keine Verschiebung angewendet werden soll.
+
+ +

Formale Definition

+ +

{{CSSInfo}}

+ +

Formale Syntax

+ +
{{CSSSyntax}}
+ +

Beispiel

+ +

HTML

+ +
<div>
+  <p class="translate">Translation</p>
+</div>
+ +

CSS

+ +
* {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: sans-serif;
+}
+
+div {
+  width: 150px;
+  margin: 0 auto;
+}
+
+p {
+  padding: 10px 5px;
+  border: 3px solid black;
+  border-radius: 20px;
+  width: 150px;
+  font-size: 1.2rem;
+  text-align: center;
+}
+
+.translate {
+  transition: translate 1s;
+}
+
+div:hover .translate {
+  translate: 200px 50px;
+}
+
+ +

Result

+ +

{{EmbedLiveSample('Examples')}}

+ +

Spezifikation

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS Transforms 2', '#individual-transforms', 'individual transforms')}}{{Spec2('CSS Transforms 2')}}Ursprüngliche Definition
+ +

Browser-Kompatibilität

+ + + +

{{Compat("css.types.transform-function")}}

+ +

See also

+ + + +

Note: skew is not an independent transform value

diff --git a/files/es/glossary/host/index.html b/files/es/glossary/host/index.html new file mode 100644 index 0000000000..e9fb95aa8c --- /dev/null +++ b/files/es/glossary/host/index.html @@ -0,0 +1,18 @@ +--- +title: Anfitrión +slug: Glossary/Host +tags: + - Glosario +translation_of: Glossary/Host +--- +

Un anfitrión (del ingles host) es un dispositivo conectado a {{glossary("Internet")}} (o una red de área local). Algunos anfitriones denominados {{glossary("server","servidores")}} ofrecen servicios adicionales como servir páginas web o alojar archivos y correos electrónicos.

+ +

El anfitrión no es necesariamente un elemento hardware. Pueden ser generado como máquinas virtuales. El anfitrión generado en una máquina virtual se suele denominar "Alojamiento virtual".

+ +

Conozca más

+ +

Conocimiento general

+ + diff --git a/files/it/web/javascript/reference/global_objects/object/constructor/index.html b/files/it/web/javascript/reference/global_objects/object/constructor/index.html new file mode 100644 index 0000000000..6a9c339acb --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/object/constructor/index.html @@ -0,0 +1,222 @@ +--- +title: Object.prototype.constructor +slug: Web/JavaScript/Reference/Global_Objects/Object/constructor +translation_of: Web/JavaScript/Reference/Global_Objects/Object/constructor +--- +
{{JSRef}}
+ +

La proprietà constuctor restituisce un riferimento alla funzione del costruttore {{jsxref ("Object")}} che ha creato l'oggetto istanza. Notare che il valore di questa proprietà è un riferimento alla funzione stessa, non una stringa contenente il nome della funzione.Il valore è di sola lettura solo per i valori primitivi come 1, true e "test".

+ +

+
+
+
+
Description

+
+
Tutti gli oggetti (ad eccezione degli object.create (null)) avranno una proprietà constuctor. Gli oggetti creati senza l'uso esplicito di una funzione di constructor (come oggetti letterali e array-letterali) avranno una proprietà constructor che punta al tipo di costrunctor dell'oggetto fondamentale per quell'oggetto.

+
+
let o = {}
+o.constructor === Object // true
+
+let o = new Object
+o.constructor === Object // true
+
+let a = []
+a.constructor === Array // true
+
+let a = new Array
+a.constructor === Array // true
+
+let n = new Number(3)
+n.constructor === Number // true
+

+
+
Examples

+
+
Displaying the constructor of an object

+
+
The following example creates a constructor (Tree) and an object of that type (theTree). The example then displays the constructor property for the object theTree.

+
+
function Tree(name) {
+  this.name = name
+}
+
+let theTree = new Tree('Redwood')
+console.log('theTree.constructor is ' + theTree.constructor)
+

+
+
This example displays the following output:

+
+
theTree.constructor is function Tree(name) {
+  this.name = name
+}
+

+
+
Changing the constructor of an object

+
+
One can assign the constructor property for any value except null and undefined since those don't have a corresponding constructor function (like String, Number, Boolean etc.), but values which are primitives won't keep the change (with no exception thrown). This is due to the same mechanism, which allows one to set any property on primitive values (except null and undefined) with no effect. namely wherenever one uses such a primitive as an object an instance of the corresponding constructor is created and discarded right after the statement was executed.

+
+
let val = null;
+val.constructor = 1; //TypeError: var is null
+
+val = 'abc';
+val.constructor = Number; //val.constructor === String
+
+val.foo = 'bar'; //An implicit instance of String('abc') was created and assigned the prop foo
+val.foo === undefined; //true, since a new instance of String('abc') was created for this comparison, which doesn't have the foo property

+
+
So basically one can change the value of the constructor property for anything, except the primitives mentioned above, note that changing the constructor property does not affect the instanceof operator:

+
+
let a = [];
+a.constructor = String
+a.constructor === String // true
+a instanceof String //false
+a instanceof Array //true
+
+a = new Foo();
+a.constructor = 'bar'
+a.constructor === 'bar' // true
+
+//etc.

+
+
If the object is sealed/frozen then the change has no effect and no exception is thrown:

+
+
let a = Object.seal({});
+a.constructor = Number;
+a.constructor === Object; //true

+
+
Changing the constructor of a function

+
+
Mostly this property is used for defining a function as a function-constructor with further calling it with new and prototype-inherits chain.

+
+
function Parent() { /* ... */ }
+Parent.prototype.parentMethod = function parentMethod() {}
+
+function Child() {
+   Parent.call(this) // Make sure everything is initialized properly
+}
+Child.prototype = Object.create(Parent.prototype) // re-define child prototype to Parent prototype
+
+Child.prototype.constructor = Child // return original constructor to Child

+
+
But when do we need to perform the last line here? Unfortunately, the answer is: it depends.

+
+
Let's try to define the cases in which re-assignment of the original constructor will play a major role, and when it will be one superfluous line of code.

+
+
Take the following case: the object has the create() method to create itself.

+
+
function Parent() { /* ... */ }
+function CreatedConstructor() {
+   Parent.call(this)
+}
+
+CreatedConstructor.prototype = Object.create(Parent.prototype)
+
+CreatedConstructor.prototype.create = function create() {
+  return new this.constructor()
+}
+
+new CreatedConstructor().create().create() // TypeError undefined is not a function since constructor === Parent

+
+
In the example above the exception will be shown since the constructor links to Parent.

+
+
To avoid this, just assign the necessary constructor you are going to use.

+
+
function Parent() { /* ... */ }
+function CreatedConstructor() { /* ... */ }
+
+CreatedConstructor.prototype = Object.create(Parent.prototype)
+CreatedConstructor.prototype.constructor = CreatedConstructor // sets the correct constructor for future use
+
+CreatedConstructor.prototype.create = function create() {
+  return new this.constructor()
+}
+
+new CreatedConstructor().create().create() // it's pretty fine

+
+
Ok, now it's pretty clear why changing the constructor can be useful.

+
+
Let's consider one more case.

+
+
function ParentWithStatic() {}
+
+ParentWithStatic.startPosition = { x: 0, y:0 } // Static member property
+ParentWithStatic.getStartPosition = function getStartPosition() {
+  return this.startPosition
+}
+
+function Child(x, y) {
+  this.position = {
+    x: x,
+    y: y
+  }
+}
+
+Child = Object.assign(ParentWithStatic)
+Child.prototype = Object.create(ParentWithStatic.prototype)
+Child.prototype.constructor = Child
+
+Child.prototype.getOffsetByInitialPosition = function getOffsetByInitialPosition() {
+  let position = this.position
+  let startPosition = this.constructor.getStartPosition() // error undefined is not a function, since the constructor is Child
+
+  return {
+    offsetX: startPosition.x - position.x,
+    offsetY: startPosition.y - position.y
+  }
+};

+
+
For this example we need either to stay parent constructor to continue to work properly or reassign static properties to child's constructor:

+
+
...
+Child = Object.assign(ParentWithStatic) // Notice that we assign it before we create(...) a prototype below
+Child.prototype = Object.create(ParentWithStatic.prototype)
+...
+

+
+
or assign parent constructor identifier to a separate property on the Child constructor function and access it via that property:

+
+
...
+Child.parentConstructor = ParentWithStatic
+Child.prototype = Object.create(ParentWithStatic.prototype)
+...
+   let startPosition = this.constructor.parentConstructor.getStartPosition()
+...
+

+
+

+
Summary: Manually updating or setting the constructor can lead to differrent and sometimes confusing consequences. To prevent this, just define the role of constructor in each specific case. In most cases, constructor is not used and reassignment of it is not necessary.

+

+
+
Specifications

+
+
+ 
+  
+   
+  
+ 
+ 
+  
+   
+  
+ 
+
Specification
{{SpecName('ESDraft', '#sec-object.prototype.constructor', 'Object.prototype.constructor')}}

+
+
Browser compatibility

+
+
+
+
{{Compat("javascript.builtins.Object.constructor")}}

+
+
See also

+
+
+
+
diff --git a/files/ja/web/javascript/reference/global_objects/intl/listformat/format/index.html b/files/ja/web/javascript/reference/global_objects/intl/listformat/format/index.html
new file mode 100644
index 0000000000..6e2b3436e6
--- /dev/null
+++ b/files/ja/web/javascript/reference/global_objects/intl/listformat/format/index.html
@@ -0,0 +1,81 @@
+---
+title: Intl​.ListFormat.prototype​.format()
+slug: Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/format
+tags:
+  - Internationalization
+  - Intl
+  - JavaScript
+  - ListFormat
+  - Method
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/format
+---
+
{{JSRef}}

+
+
format() メソッドは、リストの言語固有の表現を文字列で返します。

+
+
{{EmbedInteractiveExample("pages/js/intl-listformat.html", "taller")}}

+
+
構文

+
+
listFormat.format([list])

+
+
引数

+
+

+ 
list

+ 
Array などの反復可能オブジェクトです。

+

+
+
返値

+
+
リストのすべての要素を表現する、言語に依存した文字列表現です。

+
+
解説

+
+
format() メソッドは、 Intl.ListFormat オブジェクトで提供された引数に基づいて書式化された文字列を返します。 locales と options 引数で format() の動作をカスタマイズし、アプリケーションがリストを書式化する言語の慣習を指定することができます。

+
+
例

+
+
format の使用

+
+
以下の例では、英語を使用したリストのフォーマッターの作り方を紹介します。

+
+
const list = ['Motorcycle', 'Bus', 'Car'];
+
+ console.log(new Intl.ListFormat('en-GB', { style: 'long', type: 'conjunction' }).format(list));
+// > Motorcycle, Bus and Car
+
+ console.log(new Intl.ListFormat('en-GB', { style: 'short', type: 'disjunction' }).format(list));
+// > Motorcycle, Bus or Car
+
+ console.log(new Intl.ListFormat('en-GB', { style: 'narrow', type: 'unit' }).format(list));
+// > Motorcycle Bus Car
+

+
+
仕様書

+
+
+ 
+  
+   
+  
+ 
+ 
+  
+   
+  
+ 
+
仕様書
{{SpecName('Intl.ListFormat', '#sec-Intl.ListFormat.prototype.format', 'format()')}}

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("javascript.builtins.Intl.ListFormat.format")}}

+
+
関連情報

+
+
diff --git a/files/ja/web/javascript/reference/global_objects/intl/listformat/listformat/index.html b/files/ja/web/javascript/reference/global_objects/intl/listformat/listformat/index.html
new file mode 100644
index 0000000000..dd6aab0010
--- /dev/null
+++ b/files/ja/web/javascript/reference/global_objects/intl/listformat/listformat/index.html
@@ -0,0 +1,90 @@
+---
+title: Intl.ListFormat() コンストラクター
+slug: Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/ListFormat
+tags:
+  - Constructor
+  - Intl
+  - JavaScript
+  - ListFormat
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/ListFormat
+---
+
{{JSRef}}

+
+
The Intl.ListFormat() コンストラクターは、言語に応じたリストの書式化を可能にするオブジェクトを生成します。

+
+
{{EmbedInteractiveExample("pages/js/intl-listformat.html", "taller")}}

+
+
+
+
構文

+
+
new Intl.ListFormat([locales[, options]])

+
+
引数

+
+

+ 
locales {{optional_inline}}

+ 

+ 
BCP47 言語タグの文字列、または、そのような文字列の配列です。locales 引数の一般的な形式と解釈は、 {{jsxref("Global_Objects/Intl", "Intl", "#Locale_identification_and_negotiation", 1)}} のページをご覧ください。

+ 

+ 
options {{optional_inline}}

+ 

+ 
以下のプロパティの一部またはすべてを持つオブジェクトです。

+
+ 

+  
localeMatcher

+  
使用するロケール一致アルゴリズム。利用可能な値は lookup と best fit です。既定値は best fit です。このオプションについての詳細は、 {{jsxref("Global_Objects/Intl", "Intl のページ", "#Locale_negotiation", 1)}}をご覧ください。

+  
type

+  
出力メッセージの書式です。可能な値は "and" ベースのリストを表す conjunction (既定値、例えば A, B, and C)、または "or" ベースのリストを表す disjunction (例えば A, B, or C)、単位付きの値のリストを表す unit (例えば 5 pounds, 12 ounces) です。

+  
style

+  
書式化されたメッセージの長さです。利用可能な値は、 long (既定値、例えば A, B, and C)、 short (例えば A, B, C)、 narrow (例えば A B C) です。 style が short または narrow であった場合、 type オプションには unit のみが許可されます。

+ 

+ 

+

+
+
例

+
+
format の使用

+
+
次の例では、英語を使用するリストのフォーマッターを生成する方法を示します。

+
+
const list = ['Motorcycle', 'Bus', 'Car'];
+
+ console.log(new Intl.ListFormat('en-GB', { style: 'long', type: 'conjunction' }).format(list));
+// > Motorcycle, Bus and Car
+
+ console.log(new Intl.ListFormat('en-GB', { style: 'short', type: 'disjunction' }).format(list));
+// > Motorcycle, Bus or Car
+
+ console.log(new Intl.ListFormat('en-GB', { style: 'narrow', type: 'unit' }).format(list));
+// > Motorcycle Bus Car

+
+
仕様書

+
+
+ 
+  
+   
+  
+ 
+ 
+  
+   
+  
+ 
+
仕様書
{{SpecName('Intl.ListFormat', '#sec-intl-listformat-constructor', 'ListFormat()')}}

+
+
ブラウザーの互換性

+
+

+
+
+
{{Compat("javascript.builtins.Intl.ListFormat.ListFormat")}}

+

+
+
関連情報

+
+
diff --git a/files/ja/web/javascript/reference/global_objects/intl/listformat/supportedlocalesof/index.html b/files/ja/web/javascript/reference/global_objects/intl/listformat/supportedlocalesof/index.html
new file mode 100644
index 0000000000..61ef765440
--- /dev/null
+++ b/files/ja/web/javascript/reference/global_objects/intl/listformat/supportedlocalesof/index.html
@@ -0,0 +1,84 @@
+---
+title: Intl.ListFormat.supportedLocalesOf()
+slug: Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/supportedLocalesOf
+tags:
+  - Internationalization
+  - Intl
+  - JavaScript
+  - ListFormat
+  - Method
+  - supportedLocalesOf
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/supportedLocalesOf
+---
+
{{JSRef}}

+
+
Intl.ListFormat.supportedLocalesOf() メソッドは、ランタイムの既定のロケールで代替する必要なく日時の書式で対応されているものを含む配列を返します。

+
+
構文

+
+
Intl.ListFormat.supportedLocalesOf(locales[, options])

+
+
引数

+
+

+ 
locales

+ 
BCP 47 言語タグを持つ文字列、またはそのような文字列の配列です。 locales 引数の一般的な形式については、 {{jsxref("Intl", "Intl のページ", "#Locale_identification_and_negotiation", 1)}}を参照してください。

+ 
options

+ 

+ 
省略可能です。以下のプロパティを持つことがあるオブジェクトです。

+
+ 

+  
localeMatcher

+  
使用するロケールの一致アルゴリズムです。指定可能な値は lookup および best fit で、既定値は best fit です。このオプションの詳細は、 {{jsxref("Intl", "Intl のページ", "#Locale_negotiation", 1)}}を参照してください。

+ 

+ 

+

+
+
返値

+
+
指定したロケールタグのサブセットを表す文字列の配列で、ランタイムの既定のロケールで代替する必要なく日時の書式で対応されているものを含みます。

+
+
解説

+
+
locales で提供されている言語タグのサブセットを含む配列を返します。返される言語タグは、ランタイムが日時のロケールに対応しているもので、使用しているロケール一致アルゴリズムで一致しているとみなされているものです。

+
+
例

+
+
supportedLocalesOf() の使用

+
+
日時の書式でインドネシア語とドイツ語に対応しており、バリ語に対応していないランタイムを想定すると、 supportedLocalesOf はインドネシア語とドイツ語の言語タグを変更せずに返しますが、 pinyin の照合は日時の書式には関係なく、インドネシア語でも使用されません。ここでの lookup アルゴリズムの仕様に注意してください — バリ語話者のほとんどはインドネシア語も理解しているので、 best fit のマッチャーはインドネシア語がバリ語に適切に一致すると判断し、バリ語の言語タグも返すかもしれません。

+
+
const locales = ['ban', 'id-u-co-pinyin', 'de-ID'];
+const options = { localeMatcher: 'lookup' };
+console.log(Intl.ListFormat.supportedLocalesOf(locales, options).join(', '));
+// → "id-u-co-pinyin, de-ID"
+

+
+
仕様書

+
+
+ 
+  
+   
+  
+ 
+ 
+  
+   
+  
+ 
+
仕様書
{{SpecName('Intl.ListFormat', '#sec-Intl.ListFormat.supportedLocalesOf', 'supportedLocalesOf()')}}

+
+
ブラウザーの互換性

+
+

+
+
+
{{Compat("javascript.builtins.Intl.ListFormat.supportedLocalesOf")}}

+

+
+
関連情報

+
+
diff --git a/files/ja/web/javascript/reference/global_objects/string/replaceall/index.html b/files/ja/web/javascript/reference/global_objects/string/replaceall/index.html
new file mode 100644
index 0000000000..eafd5acb03
--- /dev/null
+++ b/files/ja/web/javascript/reference/global_objects/string/replaceall/index.html
@@ -0,0 +1,177 @@
+---
+title: String.prototype.replaceAll()
+slug: Web/JavaScript/Reference/Global_Objects/String/replaceAll
+tags:
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - String
+  - regex
+translation_of: Web/JavaScript/Reference/Global_Objects/String/replaceAll
+---
+
{{JSRef}}

+
+
replaceAll() メソッドは、pattern にマッチしたすべての文字列を replacement で置き換えた新しい文字列を返します。pattern は文字列または {{jsxref("RegExp")}} を指定することができ、replacement は文字列または各マッチに対して呼び出される関数を指定することができます。

+
+
元の文字列は変更されません。

+
+
{{EmbedInteractiveExample("pages/js/string-replaceall.html")}}

+
+
+
+
構文

+
+
const newStr = str.replaceAll(regexp|substr, newSubstr|function)
+

+
+

+
`regexp`を使用する場合は、グローバル("g")フラグを設定する必要があります。それ以外の場合は、TypeError が投げられます："replaceAll must be called with a global RegExp".

+

+
+
引数

+
+

+ 
regexp (pattern)

+
グローバルフラグを持つ {{jsxref("RegExp")}} オブジェクトまたはリテラルです。マッチしたものは newSubstr または、指定された function によって返された値に置き換えられます。グローバル("g")フラグのない RegExp は TypeError を投げます："replaceAll must be called with a global RegExp".

+
+ 
substr

+ 
newSubstr で置き換えられる {{jsxref("String")}} です。これは文字列リテラルとして扱われ、正規表現として解釈されません。

+
+ 
newSubstr (replacement)

+ 
regexp または substr で指定された部分文字列を置き換える {{jsxref("String")}} です。いくつかの特殊な置換パターンがサポートされています。下記の「引数としての文字列の指定」セクションで説明しています。

+
+ 
function (replacement)

+ 
指定された regexp または substr のマッチを置き換えるために使用される、新しい部分文字列を生成するために呼び出される関数です。この関数に与えられる引数については、下記の「引数としての関数の指定」セクションで説明しています。

+

+
+
戻り値

+
+
パターンにマッチしたすべての文字列を置換文字列で置き換えた新しい文字列です。

+
+
説明

+
+
このメソッドは、呼び出し元の {{jsxref("String")}} オブジェクトを変更しません。戻り値として新しい文字列を返します。

+
+
引数としての文字列の指定

+
+
置換文字列には以下の特殊な置換パターンを含めることができます。

+
+
+ 
+  
+   
+   
+  
+ 
+ 
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+ 
+
パターン挿入
$$​ ​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​"$" を挿入します。
$&マッチした部分文字列を挿入します。
$`マッチした部分文字列の直前の文字列の部分を挿入します。
$'	マッチした部分文字列の直後の文字列の部分を挿入します。
$nn は 100 未満の正の整数です。第一引数が {{jsxref("RegExp")}} オブジェクトだった場合に n 番目の括弧でキャプチャされた文字列を挿入します。1, 2, ... でインデックスされることに注意してください。

+
+
引数としての関数の指定

+
+
第二引数として関数を指定することができます。このとき、関数はマッチが完了した後に実行されます。関数呼び出しの結果（返り値）は、置換文字列として使われます（注: 上記の特殊な置換パターンはこの場合には適用されません）。

+
+
第一引数の正規表現がグローバルだと、置換されるべきマッチごとに関数が複数回実行されうることに注意してください。

+
+
関数に与えられる引数は次の通りです。

+
+
+ 
+  
+   
+   
+  
+ 
+ 
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+ 
+
名前与えられる値
match ​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​ ​ ​マッチした部分文字列（上記の $& に対応）です。
p1, p2, ...replace() の第一引数が {{jsxref("RegExp")}} オブジェクトだった場合、n 番目の括弧でキャプチャされたグループの文字列（上記の $1, $2, などに対応）です。例えば /(\a+)(\b+)/ が与えられた場合、p1 は \a+ に対するマッチ、p2 は \b+ に対するマッチとなります。
offsetマッチした部分文字列の、分析中の文字列全体の中でのオフセットです（例えば、文字列全体が 'abcd' で、マッチした部分文字列が 'bc' ならば、この引数は 1 となります）。
string分析中の文字列全体です。

+
+
（引数の正確な個数は、第一引数が {{jsxref("RegExp")}} オブジェクトかどうか、そうならばさらに括弧でキャプチャされるサブマッチがいくつ指定されているかに依ります。）

+
+
例

+
+
replaceAll の使用

+
+
'aabbcc'.replaceAll('b', '.');
+// 'aa..cc'

+
+
グローバルではない正規表現

+
+
正規表現フラグを使用する場合は、グローバルである必要があります。これは機能しません：

+
+
'aabbcc'.replaceAll(/b/, '.');
+TypeError: replaceAll must be called with a global RegExp
+

+
+
これは機能します：

+
+
'aabbcc'.replaceAll(/b/g, '.');
+"aa..cc"
+

+
+
仕様

+
+
+ 
+  
+   
+  
+ 
+ 
+  
+   
+  
+ 
+
仕様書
{{SpecName('ESDraft', '#sec-string.prototype.replaceall', 'String.prototype.replaceAll')}}

+
+
ブラウザー実装状況

+
+
+
+
{{Compat("javascript.builtins.String.replaceAll")}}

+
+
関連情報

+
+
diff --git "a/files/ko/learn/javascript/objects/\354\226\274\353\247\210\353\202\230_\354\235\264\355\225\264\355\226\210\353\212\224\354\247\200_\355\231\225\354\235\270\355\225\264\353\263\264\354\236\220_colon__json/index.html" "b/files/ko/learn/javascript/objects/\354\226\274\353\247\210\353\202\230_\354\235\264\355\225\264\355\226\210\353\212\224\354\247\200_\355\231\225\354\235\270\355\225\264\353\263\264\354\236\220_colon__json/index.html"
new file mode 100644
index 0000000000..526779b577
--- /dev/null
+++ "b/files/ko/learn/javascript/objects/\354\226\274\353\247\210\353\202\230_\354\235\264\355\225\264\355\226\210\353\212\224\354\247\200_\355\231\225\354\235\270\355\225\264\353\263\264\354\236\220_colon__json/index.html"
@@ -0,0 +1,65 @@
+---
+title: '얼마나 이해했는지 확인해보자: JSON'
+slug: 'Learn/JavaScript/Objects/얼마나_이해했는지_확인해보자:_JSON'
+translation_of: 'Learn/JavaScript/Objects/Test_your_skills:_JSON'
+---
+
{{learnsidebar}}

+
+
이 테스트의 목표는 JSON으로 작업하기를 잘 이해했는지 평가해보는 것입니다.

+
+

+
Note: 아래에 있는 편집기를 사용해보세요. 테스트 중 막히면, 도움을 요청할 수 있습니다. 페이지 하단의 "평가 또는 추가 도움말" 을 참고하세요.

+

+
+

+
Note: 작성한 코드에 오류가 발생하는 경우, 결과창에서 정답을 알아낼 수 있도록 돕기 위해 결과값을 보여줄 것입니다. (또는 브라우저의 자바스크립트 콘솔로도 확인 가능합니다.)

+

+
+
JSON 1

+
+
이번에 수행할 유일한 과제는 JSON 데이터에 접근하고 사용해보는 것입니다. 어미 고양이들과 그들의 새끼 고양이에 관한 JSON 데이터는 sample.json에서 확인할 수 있습니다. 이 JSON은 텍스트 문자열로 호출되며, 제시된 프로미스 체인(JSON 데이터를 가져오는 것으로 시작)의 조건을 만족시킬 때 displayCatInfo() 함수의 catString 파라미터로 사용될 수 있습니다.

+
+
+
+
+
+
변수들의 값은 문단 내부의 화면에 출력됩니다.

+
+
몇 가지 힌트/질문:

+
+
+
+
완료된 예제를 다시 만드려면, 아래 코드를 변경해보세요:

+
+
{{EmbedGHLiveSample("learning-area/javascript/oojs/tasks/json/json1.html", '100%', 400)}}

+
+

+
Warning:  이번 테스트를 치를 때 코드를 위에 있는 편집기에 작성하세요. 로컬환경이나 CodePen 또는 JSFiddle 에서는 이 예제가 작동하지 않을 수 있는데, cross-origin 라고 불리는 보안정책 때문일 것입니다. 이는 현재 환경과 다른 출처의 리소스의 요청을 제한하는 정책입니다. 위 편집기는 자바스크립트 코드와 요청된 JSON 파일을 모두 동일한 출처에서 요청하고 있습니다. (Github 저장소의 <iframe>에 내장되어 있습니다.)  하지만 예를 들어 CodePen에 기입하는 코드는 JSON을 호출하는 출처와는 다르기 때문에 오류가 발생할 수 있습니다. CORS를 사용하여 이런 제약사항을 해결할 수 있지만, 이번 장에서 가르치는 범위에는 해당하지 않습니다.

+

+
+
평가 또는 추가 도움말

+
+
위에 있는 편집기를 이용해 예제를 연습해볼 수 있습니다.

+
+
만일 작업을 평가하고나, 막혀서 도움을 요청하고 싶다면:

+
+
    
+ 
  1. MDN 학습 토론 카테고리에 평가 또는 도움을 요청하는 글을 작성하세요. 글에는 다음 사항이 포함되어야 합니다 :
+
+  
      
+   
    • "Assessment wanted for JSON skill test (JSON 기술 테스트에 대한 평가를 요청드립니다)" 와 같은 제목을 사용하세요.
      • 
+   
    • 이미 시도해보았거나, 원하는 것(예를 들어, 막혀서 도움이 필요하다거나 평가가 필요하다는 것과 같은)에 대한 세부사항을 기입해주세요.
      • 
+   
    • 작성한 코드를 삽입하세요.
      • 
+   
    • 실제 작업 또는 평가 페이지에 대한 링크를 삽입하세요. 그래야 도움받고자 하는 질문을 확인할 수 있습니다.
      • 
+  
    
+ 
    2. 
+

diff --git a/files/ko/web/api/element/select_event/index.html b/files/ko/web/api/element/select_event/index.html
new file mode 100644
index 0000000000..87dd62fa4a
--- /dev/null
+++ b/files/ko/web/api/element/select_event/index.html
@@ -0,0 +1,76 @@
+---
+title: 'Element: select event'
+slug: Web/API/Element/select_event
+translation_of: Web/API/Element/select_event
+---
+
{{APIRef}}

+
+
select 이벤트는 어떤 텍스트가 선택되었을 때 발생됩니다.

+
+
+ 
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+ 
+
BubblesYes
CancelableNo
Interface유저 인터페이스로부터 발생된 경우 {{domxref("UIEvent")}}, 아니라면 {{domxref("Event")}}
Event handler property{{domxref("GlobalEventHandlers.onselect", "onselect")}}

+
+
The event is not available for all elements in all languages. For example, in HTML, select events can be dispatched only on form {{HtmlElement('input/text', '<input type="text">')}} and {{HtmlElement("textarea")}} elements.

+
+
Examples

+
+
Selection logger

+
+
<input value="Try selecting some text in this element.">
+<p id="log"></p>

+
+
function logSelection(event) {
+  const log = document.getElementById('log');
+  const selection = event.target.value.substring(event.target.selectionStart, event.target.selectionEnd);
+  log.textContent = `You selected: ${selection}`;
+}
+
+const input = document.querySelector('input');
+input.addEventListener('select', logSelection);

+
+
{{EmbedLiveSample("Selection_logger")}}

+
+
onselect equivalent

+
+
You can also set up the event handler using the {{domxref("GlobalEventHandlers.onselect", "onselect")}} property:

+
+
input.onselect = logSelection;

+
+
Specifications

+
+
+ 
+  
+   
+   
+  
+ 
+ 
+  
+   
+   
+  
+ 
+
SpecificationStatus
{{SpecName('UI Events', '#event-type-select', 'select')}}{{Spec2('UI Events')}}

+
+
Browser compatibility

+
+
{{Compat("api.Element.select_event")}}

diff --git "a/files/ru/learn/html/multimedia_and_embedding/\320\270\320\267\320\276\320\261\321\200\320\260\320\266\320\265\320\275\320\270\321\217_\320\262_html/\320\277\321\200\320\276\320\262\320\265\321\200\321\214\321\202\320\265_\321\201\320\262\320\276\320\270_\320\267\320\275\320\260\320\275\320\270\321\217_colon__\320\270\320\267\320\276\320\261\321\200\320\260\320\266\320\265\320\275\320\270\321\217_\320\262_html/index.html" "b/files/ru/learn/html/multimedia_and_embedding/\320\270\320\267\320\276\320\261\321\200\320\260\320\266\320\265\320\275\320\270\321\217_\320\262_html/\320\277\321\200\320\276\320\262\320\265\321\200\321\214\321\202\320\265_\321\201\320\262\320\276\320\270_\320\267\320\275\320\260\320\275\320\270\321\217_colon__\320\270\320\267\320\276\320\261\321\200\320\260\320\266\320\265\320\275\320\270\321\217_\320\262_html/index.html"
new file mode 100644
index 0000000000..e00777dabe
--- /dev/null
+++ "b/files/ru/learn/html/multimedia_and_embedding/\320\270\320\267\320\276\320\261\321\200\320\260\320\266\320\265\320\275\320\270\321\217_\320\262_html/\320\277\321\200\320\276\320\262\320\265\321\200\321\214\321\202\320\265_\321\201\320\262\320\276\320\270_\320\267\320\275\320\260\320\275\320\270\321\217_colon__\320\270\320\267\320\276\320\261\321\200\320\260\320\266\320\265\320\275\320\270\321\217_\320\262_html/index.html"
@@ -0,0 +1,74 @@
+---
+title: 'Проверьте свои знания: Изображения в HTML'
+slug: >-
+  Learn/HTML/Multimedia_and_embedding/Изображения_в_HTML/Проверьте_свои_знания:_Изображения_в_HTML
+translation_of: >-
+  Learn/HTML/Multimedia_and_embedding/Images_in_HTML/Test_your_skills:_HTML_images
+---
+
{{learnsidebar}}

+
+
Цель этого теста навыков - оценить, поняли ли вы нашу статью Изображения в HTML.

+
+

+
Примечание: Вы можете опробовать решения в интерактивных редакторах ниже, однако может быть полезно загрузить код и использовать онлайн-инструмент, такой как CodePen, jsFiddle или Glitch для работы с задачами.

+

+
+
Изображения в HTML №1

+
+
В этой задаче мы хотим, чтобы вы вставили на страницу простое изображение ягоды черники. Вам необходимо:

+
+
+
+
Попробуйте обновить живой код ниже, чтобы воссоздать готовый пример:

+
+
{{EmbedGHLiveSample("learning-area/html/multimedia-and-embedding/tasks/images/images1.html", '100%', 700)}}

+
+

+
Загрузите файл для этой задачи, чтобы работать в вашем редакторе или в онлайн-редакторе.

+

+
+
Изображения в HTML №2

+
+
В этой задаче у вас уже есть полнофункциональное изображение, но мы хотели бы, чтобы вы добавили всплывающую подсказку, которая появляется при наведении курсора на изображение. Вы должны ввести некоторую соответствующую информацию во всплывающую подсказку.

+
+
Попробуйте обновить живой код ниже, чтобы воссоздать законченный пример:

+
+
{{EmbedGHLiveSample("learning-area/html/multimedia-and-embedding/tasks/images/images2.html", '100%', 700)}}

+
+

+
Загрузите файл для этой задачи, чтобы работать в вашем редакторе или в онлайн-редакторе.

+

+
+
Изображения в HTML №3

+
+
В этой последней задаче вам предоставляется как полнофункциональное изображение, так и текст заголовка. Здесь вам нужно добавить элементы, которые будут связывать изображение с его заголовком.

+
+
Попробуйте обновить живой код ниже, чтобы воссоздать готовый пример:

+
+
{{EmbedGHLiveSample("learning-area/html/multimedia-and-embedding/tasks/images/images3.html", '100%', 700)}}

+
+

+
Загрузите файл для этой задачи, чтобы работать в вашем редакторе или в онлайн-редакторе.

+

+
+
Оценка или дополнительная помощь

+
+
Вы можете попрактиковаться с этими примерами в интерактивных редакторах выше.

+
+
Если вы хотите, чтобы ваша работа была оценена, или если вы застряли и хотите обратиться за помощью:

+
+
    
+ 
  1. Поместите свою работу в онлайн-редактор, например CodePen, jsFiddle или Glitch. Вы можете написать код самостоятельно или использовать файлы, ссылки на которые приведены в приведенных выше разделах.
    2. 
+ 
  2. Напишите сообщение с просьбой об оценке и / или помощи в MDN Discourse forum Learning category. Ваш пост должен включать:
+  
      
+   
    • Описательный заголовок, например "Требуется оценка для проверки навыков 1 по основам изображений HTML".
      • 
+   
    • Подробная информация о том, что вы уже пробовали, и что бы вы хотели, чтобы мы сделали, например если вы застряли и нуждаетесь в помощи или хотите пройти оценку.
      • 
+   
    • Ссылка на пример, который вы хотите оценить или с которым вам нужна помощь, в онлайн-редакторе (как указано в шаге 1 выше). Это хорошая практика - очень сложно помочь кому-то с проблемой кодирования, если вы не видите его код.
      • 
+   
    • Ссылка на страницу фактического задания или оценки, чтобы мы могли найти вопрос, в котором вам нужна помощь.
      • 
+  
    
+ 
    3. 
+

diff --git a/files/ru/web/html/attributes/pattern/index.html b/files/ru/web/html/attributes/pattern/index.html
new file mode 100644
index 0000000000..b7df7361ed
--- /dev/null
+++ b/files/ru/web/html/attributes/pattern/index.html
@@ -0,0 +1,157 @@
+---
+title: 'HTML attribute: pattern'
+slug: Web/HTML/Attributes/pattern
+translation_of: Web/HTML/Attributes/pattern
+---
+
{{HTMLSidebar}}

+
+
Атрибут pattern определяет регулярное выражение, которому должно соответствовать значение элемента формы. Если  ненулевое значение не соответствует ограничениям, установленным в pattern, доступное только для чтения свойство {{domxref('ValidityState.patternMismatch','patternMismatch')}} объекта {{domxref('ValidityState')}} будет истинным.

+
+
Атрибут pattern является атрибутом для полей ввода с типом {{HTMLElement("input/text", "text")}}, {{HTMLElement("input/tel", "tel")}}, {{HTMLElement("input/email", "email")}}, {{HTMLElement("input/url", "url")}}, {{HTMLElement("input/password", "password")}}, и {{HTMLElement("input/search", "search")}}.

+
+

+
The pattern attribute, when specified, is a regular expression which the input's {{htmlattrxref("value")}} must match in order for the value to pass constraint validation. It must be a valid JavaScript regular expression, as used by the {{jsxref("RegExp")}} type, and as documented in our guide on regular expressions; the 'u' flag is specified when compiling the regular expression, so that the pattern is treated as a sequence of Unicode code points, instead of as ASCII. No forward slashes should be specified around the pattern text.

+
+
If the specified pattern is not specified or is invalid, no regular expression is applied and this attribute is ignored.

+
+

+
Tip: Use the {{htmlattrxref("title", "input")}} attribute to specify text that most browsers will display as a tooltip to explain what the requirements are to match the pattern. You must not rely on the tooltip alone for an explanation. See below for more information on usability.

+

+

+
+
Some of the input types supporting the pattern attribute, notably the {{HTMLElement("input/email", "email")}} and {{HTMLElement("input/url", "url")}} input types, have expected value syntaxes that must be matched. If the pattern attribute isn't present, and the value doesn't match the expected syntax for that value type, the {{domxref('ValidityState')}} object's read-only {{domxref('ValidityState.typeMismatch','typeMismatch')}} property will be true.

+
+
Usability

+
+
When including a pattern, provide a description of the pattern in visible text near the control. Additionally, include a title attribute which gives a description of the pattern. User agents may use the title contents during constraint validation to tell the user that the pattern is not matched. Some browsers show a tooltip with title contents, improving usability for sighted users. Additionally, assistive technology may read the title aloud when the control gains focus, but this should not be relied upon for accessibility.

+
+
Constraint validation

+
+
If the input’s value is not the empty string and the value does not match the entire regular expression, there is a from a {{domxref('ValidityState.patternMismatch','patternMismatch')}}.

+ The pattern's regular expression, when matched against the value, must have its start anchored to the start of the string and its end anchored to the end of the string, which is slightly different from JavaScript regular expressions: in the case of pattern attribute, we are matching against the entire value, not just any subset, as if a ^(?: were implied at the start of the pattern and )$ at the end.

+
+
Examples

+
+
Given the following:

+
+

+
<p>
+ <label>Enter your phone number in the format (123)456-7890
+  (<input name="tel1" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit area code" size="2"/>)-
+   <input name="tel2" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit prefix" size="2"/> -
+   <input name="tel3" type="tel" pattern="[0-9]{4}" placeholder="####" aria-label="4-digit number" size="3"/>
+ </label>
+</p>

+
+
Here we have 3 sections for a north American phone number with an implicit label encompassing all three components of the phone number, expecting 3-digits, 3-digits and 4-digits respectively, as defined by the pattern attribute set on each.

+
+
If the values are too long or too short, or contain characters that aren't digits, the patternMismatch will be true. When true, the element matches the {{cssxref(":invalid")}} CSS pseudo-classes.

+
+
input:invalid {
+  border: red solid 3px;
+}

+
+
{{EmbedLiveSample("example1", 300, 40)}}

+

+
+
Had we used minlength and maxlength attributes instead, we may have seen {{domxref('validityState.tooLong')}} or {{domxref('validityState.tooShort')}} being true.

+
+
Specifying a pattern

+
+
You can use the {{htmlattrxref("pattern","input")}} attribute to specify a regular expression that the inputted value must match in order to be considered valid (see Validating against a regular expression for a simple crash course on using regular expressions to validate inputs).

+
+
The example below restricts the value to 4-8 characters and requires that it contain only lower-case letters.

+
+
<form>
+  <div>
+    <label for="uname">Choose a username: </label>
+    <input type="text" id="uname" name="name" required size="45"
+           pattern="[a-z]{4,8}" title="4 to 8 lowercase letters">
+    <span class="validity"></span>
+    <p>Usernames must be lowercase and 4-8 characters in length.</p>
+  </div>
+  <div>
+    <button>Submit</button>
+  </div>
+</form>

+
+
+
+
This renders like so:

+
+
{{ EmbedLiveSample('Specifying_a_pattern', 600, 110) }}

+
+
Accessibility Concerns

+
+
When a control has a pattern attribute, the title attribute, if used, must describe the pattern. Relying on the title attribute for the visual display of text content is generally discouraged as many user agents do not expose the attribute in an accessible manner. Some browsers show a tooltip when an element with a title is hovered, but that leaves out keyboard-only and touch-only users. This is one of the several reasons you must include information informing users how to fill out the the control to match the requirements.

+
+
While titles are used by some browsers to populate error messaging, because browsers sometimes also show the title as text on hover, it therefore shows in non-error situations, so be careful not to word titles as if an error has occurred.

+
+
Specifications

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpecificationStatusComment
{{ SpecName('HTML WHATWG', 'forms.html#attr-input-pattern', 'pattern') }}{{Spec2('HTML WHATWG')}}
{{ SpecName('HTML5.1', 'forms.html#attr-input-pattern', 'pattern') }}{{Spec2('HTML5.1')}}
{{ SpecName('HTML5 W3C', 'forms.html#attr-input-pattern', 'pattern') }}{{Spec2('HTML5 W3C')}}

+
+
Browser compatibility

+
+
+
+
{{Compat("html.elements.attributes.pattern")}}

+
+
See also

+
+
diff --git a/files/ru/web/mathml/element/mover/index.html b/files/ru/web/mathml/element/mover/index.html
new file mode 100644
index 0000000000..bbc4005440
--- /dev/null
+++ b/files/ru/web/mathml/element/mover/index.html
@@ -0,0 +1,100 @@
+---
+title: 
+slug: Web/MathML/Element/mover
+tags:
+  - MathML
+  - MathML Reference
+  - 'MathML:Element'
+  - 'MathML:Script and Limit Schemata'
+  - Справка по MathML
+  - Элемент MathML
+translation_of: Web/MathML/Element/mover
+---
+
{{MathMLRef}}

+
+
Элемент <mover> языка разметки MathML используется для добавления акцента или ограничения на выражение. Используйте синтаксис: <mover>базовый надстрочный символ</mover>

+
+
Атрибуты

+
+

+ 
accent

+ 
Если установлено true, то over-script - это акцент, приближенный к базовому выражению.

+ Если установлено false (по умолчанию) over-script это ограничение по базовому выражению.

+ 
align {{deprecated_inline}}

+ 
Выравнивание над сценарием. Возможные значения: left, center, и right.

+ Этот атрибут устарел и будет удален в будущем. Вместо этого используйте CSS text-align.

+ 
class, id, style

+ 
Предусмотрено для использования с таблицами стилей.

+ 
displaystyle

+ 
Логическое значение, определяющее, используется ли больше вертикального пространства для отображаемых уравнений или, если установлено значение false, используется более компактный макет для отображения формул. Основной эффект заключается в том, что отображаются более крупные версии операторов, когда displaystyle установлено в true. Смотри также largeop и movablelimits для {{ MathMLElement("mo") }}.

+ 
href

+ 
Используется для установки гиперссылки на указанный URI.

+ 
mathbackground

+ 
Цвет фона. Возможно использование #rgb, #rrggbb и имён цветов HTML.

+ 
mathcolor

+ 
Цвет текста. Возможно использование #rgb, #rrggbb и имён цветов HTML.

+

+
+
Примеры

+
+
Образец: x+y+z

+
+
Отображение в вашем браузере:     x   +   y   +   z    ⏞   

+
+
<math>
+
+<mover accent="true">
+  <mrow>
+    <mi> x </mi>
+    <mo> + </mo>
+    <mi> y </mi>
+    <mo> + </mo>
+    <mi> z </mi>
+  </mrow>
+  <mo> &#x23DE; <!-- Верхняя фигурная скобка --> </mo>
+</mover>
+
+</math>
+

+
+
Спецификации

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
СпецификацияСтатусКомментарий
{{SpecName("MathMLCore", "#underscripts-and-overscripts-munder-mover-munderover", "mover")}}{{Spec2("MathMLCore")}}Проект спецификации
{{ SpecName('MathML3', 'chapter3.html#presm.mover', 'mover') }}{{ Spec2('MathML3') }}Текущая спецификация
{{ SpecName('MathML2', 'chapter3.html#presm.mover', 'mover') }}{{ Spec2('MathML2') }}Начальная спецификация

+
+
Совместимость с браузерами

+
+
+
+
{{Compat("mathml.elements.mover")}}

+
+
Смотрите также

+
+
    
+ 
  • {{ MathMLElement("munder") }} (Underscript)
    • 
+ 
  • {{ MathMLElement("munderover") }} (Underscript-overscript pair)
    • 
+

diff --git "a/files/ru/web/mathml/\320\260\321\202\321\200\320\270\320\261\321\203\321\202/index.html" "b/files/ru/web/mathml/\320\260\321\202\321\200\320\270\320\261\321\203\321\202/index.html"
new file mode 100644
index 0000000000..1c99572a49
--- /dev/null
+++ "b/files/ru/web/mathml/\320\260\321\202\321\200\320\270\320\261\321\203\321\202/index.html"
@@ -0,0 +1,484 @@
+---
+title: Справка по атрибутам MathML
+slug: Web/MathML/Атрибут
+tags:
+  - MathML
+  - MathML Reference
+  - Справка по MathML
+translation_of: Web/MathML/Attribute
+---
+
{{MathMLRef}}

+
+
Ниже приведён список атрибутов MathML в алфавитном порядке. Более подробная информация о каждом атрибуте доступна на странице элементов.

+
+
Примечания:

+
+
    
+ 
  • Элементы MathML {{ MathMLElement("mstyle") }} и {{ MathMLElement("math") }} {{ gecko_minversion_inline("7.0") }} принимают все атрибуты MathML.
    • 
+ 
  • Смотри примечания к значениям и единицам измерения в MathML.
    • 
+ 
  • Атрибуты background, color, fontfamily, fontsize, fontstyle, fontweight и xlink:href являются устаревшими.
    • 
+ 
  • XLink атрибуты для элементов MathML: xlink:actuate, xlink:href, xlink:show и xlink:type также устарели.
    • 
+

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
НазваниеЭлементы, принимающие атрибутОписание
accent{{ MathMLElement("mo") }}, {{ MathMLElement("mover") }}, {{ MathMLElement("munderover") }}Логическое значение, определяющее, нужно ли оператор рассматривать как акцент.
accentunder{{ MathMLElement("munder") }}, {{ MathMLElement("munderover") }}Логическое значение, определяющее, нужно ли оператор рассматривать как акцент.
actiontype{{ MathMLElement("maction") }}Строковое значение, определяющее выполняемое для этого элемента действие.
align {{deprecated_inline}}{{ MathMLElement("mtable") }}

+    {{ MathMLElement("munder") }}, {{ MathMLElement("mover") }}, {{ MathMLElement("munderover") }}

+    {{ MathMLElement("mstack") }}		Задаёт различное выравнивание нескольких элементов (смотри подробности на страницах с элементами).
{{ unimplemented_inline() }} alignmentscope{{ MathMLElement("mtable") }}Логическое значение, указывающее, должны ли столбцы таблицы действовать как области выравнивания или нет.
{{ unimplemented_inline() }}

+    altimg

+    altimg-width

+    altimg-height

+    altimg-valign

+    alttext		{{ MathMLElement("math") }}Визуальные и текстовые варианты отката.
bevelled {{deprecated_inline}}{{ MathMLElement("mfrac") }}Задаёт стиль отображения дроби. Не рекомендуется. Вместо этого используйте U+2044 (дробная косая черта).
{{ unimplemented_inline() }} charalign{{ MathMLElement("mstack") }}Определяет горизонтальное выравнивание цифр.
close{{ MathMLElement("mfenced") }}Строка закрывающего разделителя.
columnalign{{ MathMLElement("mtable") }}, {{ MathMLElement("mtd") }}, {{ MathMLElement("mtr") }}, {{ MathMLElement("mlabeledtr") }}Определяет горизонтальное выравнивание клеток таблицы.
columnlines{{ MathMLElement("mtable") }}Задаёт границы столбца таблицы.
columnspacing{{ MathMLElement("mtable") }}Задаёт пространство между колонками таблицы.
columnspan{{ MathMLElement("mtd") }}Неотрицательное целое число, указывающее, на сколько столбцов таблицы распространяется ячейка.
{{ unimplemented_inline() }} columnwidth{{ MathMLElement("mtable") }}Задаёт ширину колонок таблицы.
{{ unimplemented_inline() }} crossout{{ MathMLElement("mscarry") }}Указывает, какая линия проводится для пересечения переносчиков.
{{ unimplemented_inline() }} decimalpoint{{ MathMLElement("mstyle") }}Если значение decimalpoint используется для указания выравнивания, этот атрибут определяет символ для точки внутри {{ MathMLElement("mstack") }} и {{ MathMLElement("mtable") }} колонок.
denomalign {{deprecated_inline}}{{ MathMLElement("mfrac") }}Выравнивание знаменателя под дробью.
depth{{ MathMLElement("mpadded") }}Устанавливает или увеличивает глубину. Смотри длины.
dir{{ MathMLElement("math") }}, {{ MathMLElement("mi") }}, {{ MathMLElement("mo") }}, {{ MathMLElement("mrow") }}, {{ MathMLElement("ms") }}, {{ MathMLElement("mtext") }}Направление текста. Возможны значения ltr (слева направо) или rtl (справа налево).
display{{ MathMLElement("math") }}Задает режим визуализации. Допускаются значения block и inline.
displaystyleAll
+    
Логическое значение, указывающее, используется ли больше вертикального пространства для отображаемых уравнений или, если установлено значение false, для отображения формул используется более компактный макет.

+
+    
В MathML 3 этот атрибут был действителен только на {{ MathMLElement("mstyle") }}, {{ MathMLElement("mtable") }}, и {{ MathMLElement("math") }}.

+   
{{ unimplemented_inline() }} edge{{ MathMLElement("malignmark") }}
{{ unimplemented_inline() }} equalcolumns{{ MathMLElement("mtable") }}Логическое значение, указывающее, следует ли принудительно задавать для всех столбцов одинаковую общую высоту.
{{ unimplemented_inline() }} equalrows{{ MathMLElement("mtable") }}Логическое значение, указывающее, принудить ли все строки иметь одинаковую общую высоту.
fence{{ MathMLElement("mo") }}Логическое значение, определяющее, является ли оператор ограждающим (например, круглые скобки). Для этого атрибута нет визуального эффекта.
{{ unimplemented_inline() }} form{{ MathMLElement("mo") }}Задает роль оператора во вложенном выражении.
frame{{ MathMLElement("mtable") }}Определяет границы всего {{ MathMLElement("mtable") }}. Возможные значения: none (по умолчанию), solid и dashed.
framespacing{{ MathMLElement("mtable") }}Задает дополнительное пространство, добавленное между таблицей и frame.
{{ unimplemented_inline() }} groupalign{{ MathMLElement("maligngroup") }}, {{ MathMLElement("mtable") }}, {{ MathMLElement("mtd") }}, {{ MathMLElement("mtr") }}
height{{ MathMLElement("mglyph") }}, {{ MathMLElement("mpadded") }}, {{ MathMLElement("mspace") }}Задает желаемую высоту. Для возможных значений смотри длины.
hrefAllИспользуется для создания гиперссылки к заданному URI.
idAllУстанавливает уникальный идентификатор, связанный с элементом.
{{ unimplemented_inline() }} indentalign{{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }}
{{ unimplemented_inline() }} indentalignfirst{{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }}
{{ unimplemented_inline() }} indentalignlast{{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }}
{{ unimplemented_inline() }} indentshift{{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }}
{{ unimplemented_inline() }} indentshiftfirst{{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }}
{{ unimplemented_inline() }} indentshiftlast{{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }}
{{ unimplemented_inline() }} indenttarget{{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }}
{{ unimplemented_inline() }} infixlinebreakstyle{{ MathMLElement("mstyle") }}Задает стиль по умолчанию для linebreakstyle для использования в инфиксных операторах.
largeop{{ MathMLElement("mo") }}Указывает, следует ли рисовать оператор больше обычного.
length{{ MathMLElement("msline") }}
{{ unimplemented_inline() }} linebreak{{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }}
{{ unimplemented_inline() }} linebreakmultchar{{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }}
{{ unimplemented_inline() }} linebreakstyle{{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }}
{{ unimplemented_inline() }} lineleading{{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }}
linethickness{{ MathMLElement("mfrac") }}Толщина горизонтальной линии дроби.
{{ unimplemented_inline() }} location{{ MathMLElement("mscarries") }}
{{ unimplemented_inline() }} longdivstyle{{ MathMLElement("mlongdiv") }}Управляет стилем макета с длинным разделением.
lspace{{ MathMLElement("mo") }}, {{ MathMLElement("mpadded") }}Количество места перед оператором (смотри длины для значений и единиц).
lquote{{ MathMLElement("ms") }}Начальный символ цитаты (зависит от dir), отгораживающий содержимое. Значение по умолчанию: "&quot;".
mathbackgroundAllЦвет фона. Возможно использование #rgb, #rrggbb и названия цветов HTML.
mathcolorAllЦвет текста. Возможно использование #rgb, #rrggbb и названия цветов HTML.
mathsize{{ MathMLElement("mi") }}, {{ MathMLElement("mn") }}, {{ MathMLElement("mo") }}, {{ MathMLElement("ms") }}, {{ MathMLElement("mtext") }}Размер содержимого.
mathvariant{{ MathMLElement("mi") }}, {{ MathMLElement("mn") }}, {{ MathMLElement("mo") }}, {{ MathMLElement("ms") }}, {{ MathMLElement("mtext") }}Логический класс идентификатора, который варьируется в типографике.
maxsize{{ MathMLElement("mo") }}Максимальный размер ооператора.
{{ unimplemented_inline() }} minlabelspacing{{ MathMLElement("mtable") }}Значение длины, определяющее минимальное расстояние между label и соседней ячейкой в строке.
minsize{{ MathMLElement("mo") }}Минимальный размер оператора.
movablelimits{{ MathMLElement("mo") }}Определяет, перемещаются ли присоединенные нижние и верхние индексы на позиции нижних и верхних индексов.
notation{{ MathMLElement("menclose") }}Список обозначений, разделённых пробелом, для применения к дочерним элементам.
numalign {{deprecated_inline}}{{ MathMLElement("mfrac") }}Выравнивание числителя по дроби.
open{{ MathMLElement("mfenced") }}Строка открывающего разделителя.
{{ unimplemented_inline() }} overflow{{ MathMLElement("math") }}Если выражение слишком длинное, чтобы уместиться в допустимой ширине, этот атрибут устанавливает предпочтительную обработку.
{{ unimplemented_inline() }} position{{ MathMLElement("msgroup") }}, {{ MathMLElement("msrow") }}, {{ MathMLElement("mscarries") }}, {{ MathMLElement("msline") }}
rowalign{{ MathMLElement("mtable") }}, {{ MathMLElement("mtd") }}, {{ MathMLElement("mtr") }}Задаёт вертикальное выравнивание ячеек таблицы.
rowlines{{ MathMLElement("mtable") }}Задаёт границы строки таблицы.
rowspacing{{ MathMLElement("mtable") }}Задаёт расстояние между строками таблицы.
rowspan{{ MathMLElement("mtd") }}Неотрицательное целочисленное значение, указывающее, на сколько строк расширяется ячейка.
rspace{{ MathMLElement("mo") }}Количество места после оператора.
rquote{{ MathMLElement("ms") }}Закрывающая кавычка (зависит от dir), заключающая содержимое. Значение по умолчанию: "&quot;".
scriptlevel{{ MathMLElement("mstyle") }}В основном контролирует размер шрифта. Чем выше scriptlevel, тем меньше размер шрифта.
scriptminsize{{ MathMLElement("mstyle") }}Задает минимальный размер шрифта, разрешённый из-за изменений в scriptlevel.
scriptsizemultiplier{{ MathMLElement("mstyle") }}Определяет множитель, который будет использоваться для настройки размера шрифта из-за изменений в scriptlevel.
selection{{ MathMLElement("maction") }}Дочерний элемент, к которому обращается действие.
separator{{ MathMLElement("mo") }}Для этого атрибута нет визуального эффекта, но он указывает, является ли оператор разделителем (например, запятыми).
separators{{ MathMLElement("mfenced") }}Последовательность из нуля или более символов, используемых для разных разделителей.
{{ unimplemented_inline() }} shift{{ MathMLElement("msgroup") }}
{{ unimplemented_inline() }} side{{ MathMLElement("mtable") }}Задает позицию, в которой {{ MathMLElement("mlabeledtr") }} должны быть размещены элементы метки.
{{ unimplemented_inline() }} src{{ MathMLElement("mglyph") }}Расположение ресурса изображения.
{{ unimplemented_inline() }} stackalign{{ MathMLElement("mstack") }}
stretchy{{ MathMLElement("mo") }}Указывает, растягивается ли оператор до размера соседнего элемента.
subscriptshift {{deprecated_inline}}{{ MathMLElement("mmultiscripts") }}, {{ MathMLElement("msub") }}, {{ MathMLElement("msubsup") }}Минимальный интервал, на который можно сместить нижний индекс ниже базовой линии выражения.
supscriptshift {{deprecated_inline}}{{ MathMLElement("mmultiscripts") }}, {{ MathMLElement("msup") }}, {{ MathMLElement("msubsup") }}Минимальное расстояние, на которое можно сместить верхний индекс над базовой линией выражения.
symmetric{{ MathMLElement("mo") }}Если stretchy установлено в true, то этот атрибут указывает, должен ли оператор быть вертикально симметричным относительно воображаемой математической оси (центрированная дробная линия).
voffset{{ MathMLElement("mpadded") }}Устанавливает вертикальное положение дочернего содержимого.
width{{ MathMLElement("mglyph") }}, {{ MathMLElement("mpadded") }}, {{ MathMLElement("mspace") }}, {{ MathMLElement("mtable") }}Задает желаемую ширину. Смотри длины для возможных значений.
xmlns{{ MathMLElement("math") }}Задает URI для пространства имен MathML (http://www.w3.org/1998/Math/MathML)

diff --git a/files/uk/web/javascript/reference/global_objects/symbol/@@toprimitive/index.html b/files/uk/web/javascript/reference/global_objects/symbol/@@toprimitive/index.html
new file mode 100644
index 0000000000..d4819f362a
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/symbol/@@toprimitive/index.html
@@ -0,0 +1,64 @@
+---
+title: 'Symbol.prototype[@@toPrimitive]'
+slug: Web/JavaScript/Reference/Global_Objects/Symbol/@@toPrimitive
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Symbol
+  - Символ
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/@@toPrimitive
+---
+
{{JSRef}}

+
+
Метод [@@toPrimitive]() перетворює об'єкт Symbol на примітивне значення.

+
+
Синтаксис

+
+
Symbol()[Symbol.toPrimitive](hint)
+

+
+
Повертає

+
+
Примітивне значення вказаного об'єкта {{jsxref("Symbol")}}.

+
+
Опис

+
+
Метод [@@toPrimitive]() об'єкта {{jsxref("Symbol")}} повертає примітивне значення об'єкта Symbol у вигляді символьного типу даних. Аргумент hint не використовується.

+
+
JavaScript викликає метод [@@toPrimitive]() для перетворення об'єкта на примітивне значення. Вам рідко знадобиться запускати метод [@@toPrimitive]() власноруч; JavaScript автоматично запускає його, зустрівши об'єкт там, де очікується примітивне значення.

+
+
Приклади

+
+
Використання @@toPrimitive

+
+
const sym = Symbol("example");
+sym === sym[Symbol.toPrimitive](); // true
+

+
+
Специфікації

+
+
+ 
+  
+   
+  
+ 
+ 
+  
+   
+  
+ 
+
Специфікація
{{SpecName('ESDraft', '#sec-symbol.prototype-@@toprimitive', 'Symbol.prototype.@@toPrimitive')}}

+
+
Сумісність з веб-переглядачами

+
+
+
+
{{Compat("javascript.builtins.Symbol.@@toPrimitive")}}

+
+
Див. також

+
+
    
+ 
  • {{jsxref("Symbol.toPrimitive")}}
    • 
+

diff --git a/files/uk/web/javascript/reference/global_objects/symbol/for/index.html b/files/uk/web/javascript/reference/global_objects/symbol/for/index.html
new file mode 100644
index 0000000000..e8680798a9
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/symbol/for/index.html
@@ -0,0 +1,108 @@
+---
+title: Symbol.for()
+slug: Web/JavaScript/Reference/Global_Objects/Symbol/for
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Symbol
+  - Символ
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/for
+---
+
{{JSRef}}

+
+
Метод Symbol.for(key) шукає існуючі символи у загальному реєстрі символів за заданим ключем, та повертає, якщо знаходить. Інакше, у глобальному реєстрі символів створюється новий символ з цим ключем.

+
+
{{EmbedInteractiveExample("pages/js/symbol-for.html")}}

+
+
+
+
Синтаксис

+
+
Symbol.for(key);

+
+
Параметри

+
+

+ 
key

+ 
Рядок, обов'язковий. Ключ для символа (а також використовується для опису символа).

+

+
+
Повертає

+
+
Існуючий символ з наданим ключем, якщо його знайдено; інакше, створюється та повертається новий символ.

+
+
Опис

+
+
На відміну від Symbol(), функція Symbol.for() створює символ, доступний у списку глобального реєстру символів. Symbol.for() також не обов'язково створює новий символ при кожному виклику, а спочатку перевіряє, чи існує вже символ з наданим ключем key у реєстрі. В такому випадку повертається цей символ. Якщо символ з наданим ключем не знайдений, Symbol.for() створить новий глобальний символ.

+
+
Глобальний реєстр символів

+
+
Глобальний реєстр символів - це список з наступною структурою запису, який ініціалізується порожнім:

+
+
+ 
+ 
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+ 
+
Запис у глобальному реєстрі символів
Ім'я поляЗначення
[[key]]Рядковий ключ для ідентифікації символа.
[[symbol]]Символ, що зберігається глобально.

+
+
Приклади

+
+
Використання Symbol.for()

+
+
Symbol.for('foo'); // створити новий глобальний символ
+Symbol.for('foo'); // отримати вже створений символ
+
+// Один і той самий глобальний символ, але не локально
+Symbol.for('bar') === Symbol.for('bar'); // true
+Symbol('bar') === Symbol('bar'); // false
+
+// Ключ також використовується в якості опису
+var sym = Symbol.for('mario');
+sym.toString(); // "Symbol(mario)"
+

+
+
Щоб уникнути конфліктів між іменами ваших ключів глобальних символів та іншими (код бібліотеки) глобальними символами, може бути гарною ідеєю додавати до ваших символів префікс:

+
+
Symbol.for('mdn.foo');
+Symbol.for('mdn.bar');
+

+
+
Специфікації

+
+
+ 
+  
+   
+  
+ 
+ 
+  
+   
+  
+ 
+
Специфікація
{{SpecName('ESDraft', '#sec-symbol.for', 'Symbol.for')}}

+
+
Сумісність з веб-переглядачами

+
+
+
+
{{Compat("javascript.builtins.Symbol.for")}}

+
+
Див. також

+
+
    
+ 
  • {{jsxref("Symbol.keyFor()")}}
    • 
+

diff --git a/files/uk/web/javascript/reference/global_objects/symbol/keyfor/index.html b/files/uk/web/javascript/reference/global_objects/symbol/keyfor/index.html
new file mode 100644
index 0000000000..52ae98f144
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/symbol/keyfor/index.html
@@ -0,0 +1,75 @@
+---
+title: Symbol.keyFor()
+slug: Web/JavaScript/Reference/Global_Objects/Symbol/keyFor
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Symbol
+  - Символ
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/keyFor
+---
+
{{JSRef}}

+
+
Метод Symbol.keyFor(sym) отримує ключ спільного символа з глобального реєстру для наданого символа.

+
+
{{EmbedInteractiveExample("pages/js/symbol-keyfor.html")}}

+
+
+
+
Синтаксис

+
+
Symbol.keyFor(sym);

+
+
Параметри

+
+

+ 
sym

+ 
Символ, обов'язковий. Символ, для якого потрібно знайти ключ.

+

+
+
Повертає

+
+
Рядкове представлення ключа для наданого символа, якщо він був знайдений у глобальному реєстрі; інакше, {{jsxref("undefined")}}.

+
+
Приклади

+
+
Використання keyFor()

+
+
var globalSym = Symbol.for('foo'); // створити новий глобальний символ
+Symbol.keyFor(globalSym); // "foo"
+
+var localSym = Symbol();
+Symbol.keyFor(localSym); // undefined
+
+// добревідомі символи не є зареєстрованими
+// у глобальному реєстрі символів
+Symbol.keyFor(Symbol.iterator) // undefined
+

+
+
Специфікації

+
+
+ 
+  
+   
+  
+ 
+ 
+  
+   
+  
+ 
+
Специфікація
{{SpecName('ESDraft', '#sec-symbol.keyfor', 'Symbol.keyFor')}}

+
+
Сумісність з веб-переглядачами

+
+
+
+
{{Compat("javascript.builtins.Symbol.keyFor")}}

+
+
Див. також

+
+
    
+ 
  • {{jsxref("Symbol.for()")}}
    • 
+

diff --git a/files/uk/web/javascript/reference/global_objects/symbol/tosource/index.html b/files/uk/web/javascript/reference/global_objects/symbol/tosource/index.html
new file mode 100644
index 0000000000..0abc2fb1cb
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/symbol/tosource/index.html
@@ -0,0 +1,57 @@
+---
+title: Symbol.prototype.toSource()
+slug: Web/JavaScript/Reference/Global_Objects/Symbol/toSource
+tags:
+  - JavaScript
+  - Symbol
+  - Символ
+  - застарілий
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/toSource
+---
+
{{JSRef}} {{obsolete_header}}

+
+
Метод toSource() повертає рядкове представлення першокоду об'єкта.

+
+
Цей метод зазвичай викликається внутрішньо у JavaScript.

+
+
Синтаксис

+
+
Symbol.toSource()
+
+var sym = Symbol()
+sym.toSource()

+
+
Повертає

+
+
Рядкове представлення першокоду об'єкта.

+
+
Приклади

+
+
Вбудована функція

+
+
Для вбудованого об'єкта Symbol метод toSource повертає наступний рядок, який вказує, що першокод недоступний:

+
+
"function Symbol() {
+   [native code]
+}"

+
+
Для екземплярів Symbol, toSource повертає рядок, що відображає першокод.

+
+
"Symbol()"

+
+
Специфікації

+
+
Не є частиною жодного стандарту.

+
+
Сумісність з веб-переглядачами

+
+
+
+
{{Compat("javascript.builtins.Symbol.toSource")}}

+
+
Див. також

+
+
    
+ 
  • {{jsxref("Object.prototype.toSource()")}}
    • 
+

diff --git a/files/uk/web/javascript/reference/global_objects/symbol/tostring/index.html b/files/uk/web/javascript/reference/global_objects/symbol/tostring/index.html
new file mode 100644
index 0000000000..37d28602a2
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/symbol/tostring/index.html
@@ -0,0 +1,76 @@
+---
+title: Symbol.prototype.toString()
+slug: Web/JavaScript/Reference/Global_Objects/Symbol/toString
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Symbol
+  - Символ
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/toString
+---
+
{{JSRef}}

+
+
Метод toString() повертає рядок, що відображає вказаний об'єкт {{jsxref("Symbol")}}.

+
+
{{EmbedInteractiveExample("pages/js/symbol-prototype-tostring.html")}}

+
+
+
+
Синтаксис

+
+
Symbol().toString()

+
+
Повертає

+
+
Рядкове представлення вказаного об'єкта {{jsxref("Symbol")}}.

+
+
Опис

+
+
Об'єкт {{jsxref("Symbol")}} заміщує метод toString об'єкта {{jsxref("Object")}}; він не успадковує {{jsxref("Object.prototype.toString()")}}. Для об'єктів Symbol метод toString повертає рядкове представлення об'єкта.

+
+
Об'єднання з рядками не виконується

+
+
Хоча ви можете викликати toString() на символах, ви не можете об'єднувати їх з рядками:

+
+
Symbol('foo') + 'bar'        // TypeError: Can't convert symbol to string

+
+
Приклади

+
+
Використання toString()

+
+
Symbol('desc').toString()    // "Symbol(desc)"
+
+// добревідомі символи
+Symbol.iterator.toString()   // "Symbol(Symbol.iterator)
+
+// глобальні символи
+Symbol.for('foo').toString() // "Symbol(foo)"
+

+
+
Специфікації

+
+
+ 
+  
+   
+  
+ 
+ 
+  
+   
+  
+ 
+
Специфікація
{{SpecName('ESDraft', '#sec-symbol.prototype.tostring', 'Symbol.prototype.toString')}}

+
+
Сумісність з веб-переглядачами

+
+
+
+
{{Compat("javascript.builtins.Symbol.toString")}}

+
+
Див. також

+
+
    
+ 
  • {{jsxref("Object.prototype.toString()")}}
    • 
+

diff --git a/files/uk/web/javascript/reference/global_objects/symbol/valueof/index.html b/files/uk/web/javascript/reference/global_objects/symbol/valueof/index.html
new file mode 100644
index 0000000000..253b1eac7c
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/symbol/valueof/index.html
@@ -0,0 +1,64 @@
+---
+title: Symbol.prototype.valueOf()
+slug: Web/JavaScript/Reference/Global_Objects/Symbol/valueOf
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Symbol
+  - Символ
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/valueOf
+---
+
{{JSRef}}

+
+
Метод valueOf() повертає примітивне значення об'єкта Symbol.

+
+
Синтаксис

+
+
Symbol().valueOf()
+

+
+
Повертає

+
+
Примітивне значення вказаного об'єкта {{jsxref("Symbol")}}.

+
+
Опис

+
+
Метод valueOf() об'єкта {{jsxref("Symbol")}} повертає примітивне значення об'єкта Symbol у вигляді символьного типу даних.

+
+
JavaScript викликає метод valueOf() для перетворення об'єкта на примітивне значення. Вам рідко знадобиться викликати метод valueOf() власноруч; JavaScript автоматично запускає його, зустрівши об'єкт там, де очікується примітивне значення.

+
+
Приклади

+
+
Використання valueOf()

+
+
const sym = Symbol("example");
+sym === sym.valueOf(); // true
+

+
+
Специфікації

+
+
+ 
+  
+   
+  
+ 
+ 
+  
+   
+  
+ 
+
Специфікація
{{SpecName('ESDraft', '#sec-symbol.prototype.valueof', 'Symbol.prototype.valueOf')}}

+
+
Сумісність з веб-переглядачами

+
+
+
+
{{Compat("javascript.builtins.Symbol.valueOf")}}

+
+
Див. також

+
+
    
+ 
  • {{jsxref("Object.prototype.valueOf()")}}
    • 
+

diff --git "a/files/zh-cn/web/css/css_logical_properties/\346\265\256\345\212\250\345\222\214\345\256\232\344\275\215/index.html" "b/files/zh-cn/web/css/css_logical_properties/\346\265\256\345\212\250\345\222\214\345\256\232\344\275\215/index.html"
new file mode 100644
index 0000000000..b96f3f6c88
--- /dev/null
+++ "b/files/zh-cn/web/css/css_logical_properties/\346\265\256\345\212\250\345\222\214\345\256\232\344\275\215/index.html"
@@ -0,0 +1,132 @@
+---
+title: 浮动和定位的逻辑属性
+slug: Web/CSS/CSS_Logical_Properties/浮动和定位
+translation_of: Web/CSS/CSS_Logical_Properties/Floating_and_positioning
+---
+
{{CSSRef}}

+
+
逻辑属性和值指南 包含了 {{cssxref("float")}} 和{{cssxref("clear")}}逻辑属性到物理属性的映射, 以及与定位布局一起使用的定位属性. 通过本文，我们来看看如何使用它们。

+
+
Mapped properties and values

+
+
The table below details the properties and values discussed in this guide along with their physical mappings. They assume a horizontal {{cssxref("writing-mode")}}, with a left-to-right direction.

+
+
+ 
+  
+   
+   
+  
+ 
+ 
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+ 
+
Logical property or valuePhysical property or value
{{cssxref("float")}}: inline-start{{cssxref("float")}}: left
{{cssxref("float")}}: inline-end{{cssxref("float")}}: right
{{cssxref("clear")}}: inline-start{{cssxref("clear")}}: left
{{cssxref("clear")}}: inline-end{{cssxref("clear")}}: right
{{cssxref("inset-inline-start")}}{{cssxref("left")}}
{{cssxref("inset-inline-end")}}{{cssxref("right")}}
{{cssxref("inset-block-start")}}{{cssxref("top")}}
{{cssxref("inset-block-end")}}{{cssxref("bottom")}}
{{cssxref("text-align")}}: start{{cssxref("text-align")}}: left
{{cssxref("text-align")}}: end{{cssxref("text-align")}}: right

+
+
In addition to these mapped properties there are some additional shorthand properties made possible by being able to address block and inline dimensions. These have no mapping to physical properties, aside from the {{cssxref("inset")}} property.

+
+
+ 
+  
+   
+   
+  
+ 
+ 
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+ 
+
Logical propertyPurpose
{{cssxref("inset-inline")}}Sets both of the above inset values for the inline dimension simultaneously.
{{cssxref("inset-block")}}Sets both of the above inset values for the block dimension simultaneously.
{{cssxref("inset")}}Sets all four inset values simultaneously with physical mapping of multi-value.

+
+
Float and clear example

+
+
The physical values used with the {{cssxref("float")}} and {{cssxref("clear")}} properties are left, right and both. The Logical Properties specification defines the values inline-start and inline-end as mappings for left and right.

+
+
In the example below I have two boxes — the first has the box floated with float: left, the second with float: inline-start. If you change the writing-mode to vertical-rl or the direction to rtl you will see that the left-floated box always sticks to the left, whereas the inline-start-floated item follows the direction and writing-mode.

+
+
{{EmbedGHLiveSample("css-examples/logical/float.html", '100%', 700)}}

+
+
Example: Inset properties for positioned layout

+
+
Positioning generally allows us to position an element in a manner relative to its containing block — we essentially inset the item relative to where it would fall based on normal flow. To do this we have historically used the physical properties {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} and {{cssxref("left")}}.

+
+
These properties take a length or a percentage as a value, and relate to the user's screen dimensions.

+
+
New properties have been created in the Logical Properties specification for when you want the positioning to relate to the flow of text in your writing mode. These are as follows: {{cssxref("inset-block-start")}}, {{cssxref("inset-block-end")}}, {{cssxref("inset-inline-start")}} and {{cssxref("inset-inline-end")}}.

+
+
In the below example I have used the inset-block-start and inset-inline-end properties to position the blue box using absolute positioning inside the area with the grey dotted border, which has position: relative. Change the writing-mode property to vertical-rl, or add direction: rtl, and see how the flow relative box stays with the text direction.

+
+
{{EmbedGHLiveSample("css-examples/logical/positioning-inset.html", '100%', 700)}}

+
+
New two- and four-value shorthands

+
+
As with other properties in the specification we have some new shorthand properties, which give the ability to set two or four values at once.

+
+
    
+ 
  • {{cssxref("inset")}} — sets all four sides together with physical mapping.
    • 
+ 
  • {{cssxref("inset-inline")}} — sets both logical inline insets.
    • 
+ 
  • {{cssxref("inset-block")}} — sets both logical block insets.
    • 
+

+
+

+
Note: The browsers that have implemented the Logical Properties specification have so far implemented the direct mappings and not the new shorthands. Look to the browser compatibility data section on each property page reference for more details.

+

+
+
Example: Logical values for text-align

+
+
The {{cssxref("text-align")}} property has logical values that relate to text direction — rather than using left and right we can use start and end. In the below example I have set text-align: right in the first block and text-align: end in the second.

+
+
If you change the value of direction to rtl you will see that the alignment stays to the right for the first block, but goes to the logical end on the left in the second.

+
+
{{EmbedGHLiveSample("css-examples/logical/text-align.html", '100%', 700)}}

+
+
This works in a more consistent way when using box alignment that uses start and end rather than physical directions for alignment.

-- 
cgit v1.2.3-54-g00ecf