diff options
32 files changed, 4644 insertions, 0 deletions
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 +--- +<div>{{CSSRef}}</div> + +<p>Die CSS-Funktionsnotation ist ein Typ von <a href="/de/docs/Web/CSS/CSS_Values_and_Units">CSS-Werten</a>, der komplexere Datentypen darstellen oder spezielle Datenverarbeitungen oder Berechnungen aufrufen kann.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox notranslate">selector { + property: functional-notation( [argument]? [, argument]! ); +}</pre> + +<p>Die Syntax beginnt mit dem <strong>Namen der funktionalen Notation</strong>, gefolgt von einer linken Klammer <code>(</code>. Als Nächstes folgen das/die Notationsargument(e), und die Funktion wird mit einer schließenden Klammer <code>)</code> abgeschlossen.</p> + +<p>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.</p> + +<h2 id="Index">Index</h2> + +<p>Zu den funktionalen Notationen, die durch eine Reihe von CSS-Spezifikationen definiert sind, gehören die folgenden:</p> + +<div class="index"><span>A</span> + +<ul> + <li>{{CSSxRef("abs", "abs()")}} (math) {{Experimental_Inline}}</li> + <li>{{CSSxRef("acos", "acos()")}} (math) {{Experimental_Inline}}</li> + <li>{{CSSxRef("font-variant-alternates/annotation()", "annotation()")}} (font)</li> + <li>{{CSSxRef("asin", "asin()")}} (math) {{Experimental_Inline}}</li> + <li>{{CSSxRef("atan", "atan()")}} (math) {{Experimental_Inline}}</li> + <li>{{CSSxRef("atan2", "atan2()")}} (math) {{Experimental_Inline}}</li> + <li>{{CSSxRef("attr")}}</li> +</ul> +<span>B</span> + +<ul> + <li>{{CSSxRef("filter-function/blur", "blur()")}} (filter)</li> + <li>{{CSSxRef("filter-function/brightness", "brightness()")}} (filter)</li> +</ul> +<span>C</span> + +<ul> + <li>{{CSSxRef("calc")}} (math)</li> + <li>{{CSSxRef("font-variant-alternates/character-variant()", "character-variant()")}} (font)</li> + <li>{{CSSxRef("circle", "circle()")}} (shape)</li> + <li>{{CSSxRef("clamp")}} (math)</li> + <li>{{CSSxRef("color()")}} (colors) {{Experimental_Inline}}</li> + <li>{{CSSxRef("conic-gradient")}}</li> + <li>{{CSSxRef("cos", "cos()")}} (math) {{Experimental_Inline}}</li> + <li>{{CSSxRef("counter")}}</li> + <li>{{CSSxRef("counters")}}</li> + <li>{{CSSxRef("filter-function/contrast", "contrast()")}} (filter)</li> + <li>{{CSSxRef("cross-fade")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("cubic-bezier", "cubic-bezier()")}}</li> +</ul> +<span>D</span> + +<ul> + <li>{{CSSxRef("device-cmyk", "device-cmyk()")}} (colors) {{Experimental_Inline}}</li> + <li>{{CSSxRef("filter-function/drop-shadow", "drop-shadow()")}} (filter)</li> +</ul> +<span>E</span> + +<ul> + <li>{{CSSxRef("element")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("env")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("ellipse", "ellipse()")}} (shape)</li> + <li>{{CSSxRef("exp", "exp()")}} (math) {{Experimental_Inline}}</li> +</ul> +<span>F</span> + +<ul> + <li>{{CSSxRef("fit-content()", "fit-content()")}}</li> + <li>{{CSSxRef("format", "format()")}}</li> +</ul> +<span>G</span> + +<ul> + <li>{{CSSxRef("filter-function/grayscale", "grayscale()")}} (filter)</li> +</ul> +<span>H</span> + +<ul> + <li>{{CSSxRef("hsl", "hsl()")}} (colors)</li> + <li>{{CSSxRef("hsla", "hsla()")}} (colors)</li> + <li>{{CSSxRef("filter-function/hue-rotate", "hue-rotate()")}} (filter)</li> + <li>{{CSSxRef("hwb", "hwb()")}} (colors) {{Experimental_Inline}}</li> + <li>{{CSSxRef("hypot", "hypot()")}} (math) {{Experimental_Inline}}</li> +</ul> +<span>I</span> + +<ul> + <li>{{CSSxRef("imagefunction", "image()")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("image-set")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("inset()")}} (shape)</li> + <li>{{CSSxRef("filter-function/invert", "invert()")}} (filter)</li> +</ul> +<span>L</span> + +<ul> + <li>{{CSSxRef("lab", "lab()")}} (colors) {{Experimental_Inline}}</li> + <li>{{CSSxRef("lch", "lch()")}} (colors) {{Experimental_Inline}}</li> + <li>{{CSSxRef("leader", "leader()")}}</li> + <li>{{CSSxRef("linear-gradient")}}</li> + <li>{{CSSxRef("local", "local()")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("log", "log()")}} (math) {{Experimental_Inline}}</li> +</ul> +<span>M</span> + +<ul> + <li>{{CSSxRef("transform-function/matrix", "matrix()")}} (transform)</li> + <li>{{CSSxRef("transform-function/matrix3d", "matrix3d()")}} (transform)</li> + <li>{{CSSxRef("max")}} (math)</li> + <li>{{CSSxRef("min")}} (math)</li> + <li>{{CSSxRef("minmax")}} (math)</li> + <li>{{CSSxRef("mod", "mod()")}} (math) {{Experimental_Inline}}</li> +</ul> +<span>O</span> + +<ul> + <li>{{CSSxRef("filter-function/opacity", "opacity()")}} (filter)</li> + <li>{{CSSxRef("font-variant-alternates/ornaments()", "ornaments()")}} (font)</li> +</ul> +<span>P</span> + +<ul> + <li>{{CSSxRef("paint")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("path()", "path()")}} (shape)</li> + <li>{{CSSxRef("transform-function/perspective", "perspective()")}} (transform)</li> + <li>{{CSSxRef("polygon", "polygon()")}} (shape)</li> + <li>{{CSSxRef("pow", "pow()")}} (math) {{Experimental_Inline}}</li> +</ul> +<span>R</span> + +<ul> + <li>{{CSSxRef("radial-gradient")}}</li> + <li>{{CSSxRef("rem", "rem()")}} (math) {{Experimental_Inline}}</li> + <li>{{CSSxRef("repeat")}}</li> + <li>{{CSSxRef("repeating-linear-gradient")}}</li> + <li>{{CSSxRef("repeating-radial-gradient")}}</li> + <li>{{CSSxRef("repeating-conic-gradient")}}</li> + <li>rgb() (colors)</li> + <li>rgba() (colors)</li> + <li>{{CSSxRef("transform-function/rotate", "rotate()")}} (transform)</li> + <li>{{CSSxRef("transform-function/rotate3d", "rotate3d()")}} (transform)</li> + <li>{{CSSxRef("transform-function/rotateX", "rotateX()")}} (transform)</li> + <li>{{CSSxRef("transform-function/rotateY", "rotateY()")}} (transform)</li> + <li>{{CSSxRef("transform-function/rotateZ", "rotateZ()")}} (transform)</li> + <li>{{CSSxRef("round", "round()")}} (math) {{Experimental_Inline}}</li> +</ul> +<span>S</span> + +<ul> + <li>{{CSSxRef("filter-function/saturate", "saturate()")}} (filter)</li> + <li>{{CSSxRef("transform-function/scale", "scale()")}} (transform)</li> + <li>{{CSSxRef("transform-function/scale3d", "scale3d()")}} (transform)</li> + <li>{{CSSxRef("transform-function/scaleX", "scaleX()")}} (transform)</li> + <li>{{CSSxRef("transform-function/scaleY", "scaleY()")}} (transform)</li> + <li>{{CSSxRef("transform-function/scaleZ", "scaleZ()")}} (transform)</li> + <li>{{CSSxRef("filter-function/sepia", "sepia()")}} (filter)</li> + <li>{{CSSxRef("sign", "sign()")}} (math) {{Experimental_Inline}}</li> + <li>{{CSSxRef("sin", "sin()")}} (math) {{Experimental_Inline}}</li> + <li>{{CSSxRef("transform-function/skew", "skew()")}} (transform)</li> + <li>{{CSSxRef("transform-function/skewX", "skewX()")}} (transform)</li> + <li>{{CSSxRef("transform-function/skewY", "skewY()")}} (transform)</li> + <li>{{CSSxRef("sqrt", "sqrt()")}} (math) {{Experimental_Inline}}</li> + <li>{{CSSxRef("steps", "steps()")}}</li> + <li>{{CSSxRef("font-variant-alternates/styleset()", "styleset()")}} (font)</li> + <li>{{CSSxRef("font-variant-alternates/stylistic()", "stylistic()")}} (font)</li> + <li>{{CSSxRef("font-variant-alternates/swash()", "swash()")}} (font)</li> + <li>{{CSSxRef("symbols", "symbols()")}}</li> +</ul> +<span>T</span> + +<ul> + <li>{{CSSxRef("tan", "tan()")}} (math) {{Experimental_Inline}}</li> + <li>{{CSSxRef("target-counter", "target-counter()")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("target-counters", "target-counters()")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("target-text", "target-text()")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("toggle", "toggle()")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("transform-function/translate", "translate()")}} (transform)</li> + <li>{{CSSxRef("transform-function/translate3d", "translate3d()")}} (transform)</li> + <li>{{CSSxRef("transform-function/translateX", "translateX()")}} (transform)</li> + <li>{{CSSxRef("transform-function/translateY", "translateY()")}} (transform)</li> + <li>{{CSSxRef("transform-function/translateZ", "translateZ()")}} (transform)</li> +</ul> +<span>U</span> + +<ul> + <li>{{CSSxRef("url()", "url()")}}</li> +</ul> +<span>V</span> + +<ul> + <li>{{CSSxRef("var")}}</li> +</ul> +</div> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS4 Values")}}</td> + <td>{{Spec2("CSS4 Values")}}</td> + <td>Hinzugefügte Funktionsnotation <code>toggle()</code>, <code>attr()</code>, <code>calc()</code>, <code>min()</code>, <code>max()</code>, <code>clamp()</code>, <code>round()</code>, <code>mod()</code>, <code>rem()</code>, <code>mod()</code>, <code>sin()</code>, <code>cos()</code>, <code>tan()</code>, <code>asin()</code>, <code>acos()</code>, <code>atan()</code>, <code>atan2()</code>, <code>pow()</code>, <code>sqrt()</code>, <code>hypot()</code>, <code>log()</code>, <code>exp()</code>, <code>abs()</code> und <code>sign()</code>.</td> + </tr> + <tr> + <td>{{SpecName("CSS3 Values")}}</td> + <td>{{Spec2("CSS3 Values")}}</td> + <td>Fügt die Funktionsnotation <code>calc()</code> zu.</td> + </tr> + <tr> + <td>{{SpecName("CSS4 Colors")}}</td> + <td>{{Spec2("CSS4 Colors")}}</td> + <td>Fügt kommmalose Syntaxen für die funktionale Notation <code>rgb()</code>, <code>rgba()</code>, <code>hsl()</code>, und <code>hsla()</code> hinzu.<br> + Erlaubt Alpha-Werte in <code>rgb()</code> und <code>hsl()</code>, und macht <code>rgba()</code> und <code>hsla()</code> into (deprecated) zu (veralteten) Aliasen für diese.<br> + Fügt die Funktionen <code>hwb()</code>, <code>device-cmyk()</code> und <code>color()</code> hinzu.</td> + </tr> + <tr> + <td>{{SpecName("CSS3 Colors")}}</td> + <td>{{Spec2("CSS3 Colors")}}</td> + <td>Fügt <code>rgba()</code>, <code>hsl()</code>, <code>hsla()</code> als funktionale Notation hinzu.</td> + </tr> + <tr> + <td>{{SpecName("CSS4 Images")}}</td> + <td>{{Spec2("CSS4 Images")}}</td> + <td>Fügt <code>element()</code>, <code>image()</code>, <code>image-set()</code> und <code>conic-gradient()</code> als Funktionsnotation hinzu.</td> + </tr> + </tbody> +</table> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Values_and_Units">CSS Werte und Einheiten</a></li> + <li><a href="/de/docs/Learn/CSS/Building_blocks/Werten_Einheiten">Einführung zu CSS: Werte und Einheiten</a></li> +</ul> 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 +--- +<div>{{cssref}}</div> + +<p>Bei fließenden Blöcken (<a href="/de/docs/Web/CSS/float"><code>float</code></a>) ist die Stapelreihenfolge ein wenig anders. Fließende Blöcke werden zwischen nicht positionierten Blöcken und positionierten Blöcken platziert:</p> + +<ol> + <li>Der Hintergrund und die Ränder des Wurzelelements</li> + <li>Nachfolgende <a href="/de/docs/Web/CSS/position#Types_of_positioning">nicht positionierte</a> Blöcke, in der Reihenfolge ihres Erscheinens im HTML</li> + <li>Fließende Blöcke</li> + <li>Nachfolgende <a href="/de/docs/Web/CSS/position#Types_of_positioning">positionierte</a> Elemente, in der Reihenfolge ihres Erscheinens in der HTML-Datei</li> +</ol> + +<p>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:</p> + +<ol> + <li>Der Hintergrund und die Ränder des Wurzelelements</li> + <li>Nachfolgende <a href="/de/docs/Web/CSS/position#Types_of_positioning">nicht positionierte</a> Blöcke, in der Reihenfolge ihres Erscheinens im HTML</li> + <li>Schwebende Blöcke</li> + <li>Nachfolgende <a href="/de/docs/Web/CSS/position#Types_of_positioning">nicht-positionierte</a> Inline-Elemente</li> + <li>Nachfolgende <a href="/de/docs/Web/CSS/position#Types_of_positioning">positionierte</a> Elemente, in der Reihenfolge ihres Erscheinens in der HTML</li> +</ol> + +<p><img alt="Example of stacking rules with floating boxes" class="internal" src="/@api/deki/files/911/=Understanding_zindex_02.png"></p> + +<div class="note"> +<p><strong>Hinweis:</strong> Wenn ein Deckkraftwert (<code><a href="/de/docs/Web/CSS/opacity">opacity</a></code>) 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 <a href="https://philipwalton.com/articles/what-no-one-told-you-about-z-index/">What No One Told You About Z-Index</a>).</p> +</div> + +<h2 id="Quellcode_für_das_Beispiel">Quellcode für das Beispiel</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><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> + +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">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; +} +</pre> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index">Stapeln ohne die Eigenschaft z-index</a>: Die Stapelungsregeln, die gelten, wenn <code>z-index</code> nicht verwendet wird.</li> + <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index">Stapeln mit z-index</a>: Wie Sie <code>z-index</code> verwenden, um die Standardstapelung zu ändern.</li> + <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1">Der Stapelkontext:</a> Hinweise zum Stapelkontext.</li> + <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1">Stapelkontext-Beispiel 1</a>: 2-stufige HTML-Hierarchie, <code>z-index</code> auf der letzten Stufe</li> + <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2">Stapelkontext-Beispiel 2:</a> 2-stufige HTML-Hierarchie, <code>z-index</code> auf allen Ebenen</li> + <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3">Stapelkontext-Beispiel 3:</a> 3-stufige HTML-Hierarchie, <code>z-index</code> auf der zweiten Ebene</li> +</ul> + +<div class="originaldocinfo"> +<h2 id="Original_Document_Information" name="Original_Document_Information">Original Dokumenteninformation</h2> + +<ul> + <li>Autor(s): Paolo Lombardi</li> + <li>Dieser Artikel ist die englische Übersetzung eines Artikels, den ich auf Italienisch für <a class="external external-icon" href="http://www.yappy.it" rel="noopener">YappY</a>. geschrieben habe. Ich gewähre das Recht, den gesamten Inhalt unter der <a class="external external-icon" href="http://creativecommons.org/licenses/by-sa/2.0/" rel="noopener">Creative Commons: Attribution-Sharealike license</a> zu teilen.</li> + <li>Letzte Aktualisation: 3. November 2004</li> +</ul> +</div> 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 +--- +<div>{{cssref}}</div> + +<p>« <a href="/en-US/docs/Web/CSS">CSS</a> « <a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index" title="Understanding CSS z-index">Understanding CSS z-index</a></p> + +<h2 id="Stapelkontext_Beispiel_1">Stapelkontext Beispiel 1</h2> + +<p>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 <code>z-index</code> Eigenschaften.</p> + +<p>Der einzige Stapelkontext ist der Root-Kontext. Ohne z-indizes werden die Elemente in der Reihenfolge ihres Auftretens gestapelt.</p> + +<p><img alt="Stacking context example 1" class="internal" src="/@api/deki/files/914/=Understanding_zindex_05a.png"></p> + +<p>Wenn DIV #2 ein positiver <code>z-index</code> Wert (nicht Null und nicht automatisch) zugewiesen wird, wird es über allen anderen DIVs gerendert.</p> + +<p><img alt="Stacking context example 1" class="internal" src="/@api/deki/files/915/=Understanding_zindex_05b.png"></p> + +<p>Wenn dann DIV #4 ebenfalls einen positiven <code>z-index</code> zugewiesen bekommt, der größer ist als der <code>z-index</code> von DIV #2, wird es über allen anderen DIVs einschließlich DIV #2 gerendert.</p> + +<p><img alt="Stacking context example 1" class="internal" src="/@api/deki/files/916/=Understanding_zindex_05c.png"></p> + +<p>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 <code>z-index</code> 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.</p> + +<p>In Bezug auf die Stapelkontexte werden DIV #1 und DIV #3 einfach in das Wurzelelement assimiliert, und die resultierende Hierarchie ist die folgende:</p> + +<ul> + <li>Wurzel-Stapelkontext + <ul> + <li>DIV #2 (z-index 1)</li> + <li>DIV #4 (z-index 2)</li> + </ul> + </li> +</ul> + +<div class="note"><strong>Hinweis:</strong> 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 <code>z-index</code> Wertes. Und dieses Beispiel zeigt, was passiert, wenn ein übergeordnetes Element keinen Stapelkontext erzeugt.</div> + +<h2 id="Example" name="Example">Beispiel</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><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> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">.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; +}</pre> + +<h3 id="Ergebnis">Ergebnis</h3> + +<p>{{ EmbedLiveSample('Example', '100%', '250px', '', 'Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1') }}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index">Stapeln ohne die Eigenschaft z-index</a>: Die Stapelungsregeln, die gelten, wenn der <code>z-index</code> nicht verwendet wird.</li> + <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index">Verwenden von z-index</a>: Wie Sie <code>z-index</code> verwenden, um die Standardstapelung zu ändern.</li> + <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">Der Stapelkontext:</a> Hinweise zum Stapelkontext.</li> + <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2">Stapelkontext-Beispiel 2:</a> 2-stufige HTML-Hierarchie, <code>z-index</code> auf allen Ebenen</li> + <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3">Stapelkontext-Beispiel 3:</a> 3-stufige HTML-Hierarchie, <code>z-index</code> auf der zweiten Ebene</li> +</ul> + +<div class="originaldocinfo"> +<h2 id="Original_Document_Information" name="Original_Document_Information">Original Dokumenteninformation</h2> + +<ul> + <li>Autor(s): Paolo Lombardi</li> + <li>Dieser Artikel ist die englische Übersetzung eines Artikels, den ich auf Italienisch für <a class="external external-icon" href="http://www.yappy.it">YappY</a>. geschrieben habe. Ich gewähre das Recht, den gesamten Inhalt unter der <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a> zu teilen.</li> + <li>Letzte Aktualisation: 9. Juli 2005</li> +</ul> +</div> 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 +--- +<div>{{cssref}}</div> + +<p>« <a href="/en-US/docs/Web/CSS">CSS</a> « <a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index" title="Understanding CSS z-index">Understanding CSS z-index</a></p> + +<h2 id="Stapelkontext_Beispiel_2">Stapelkontext Beispiel 2</h2> + +<p>Dies ist ein sehr einfaches Beispiel, aber es ist der Schlüssel zum Verständnis des Konzepts des <em>Stapelkontexts</em>. Es gibt dieselben vier DIVs des vorherigen Beispiels, aber jetzt werden {{cssxref("z-index")}} Eigenschaften auf beiden Ebenen der Hierarchie zugewiesen.</p> + +<p>{{ EmbedLiveSample('Example_source_code', '352', '270') }}</p> + +<p>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 <code>z-index</code> Werte bestimmen, wie Elemente gestapelt werden.</p> + +<p>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.</p> + +<p>Zum besseren Verständnis der Situation sehen Sie hier die Hierarchie des Stapelkontexts:</p> + +<ul> + <li>Wurzel-Stapelkontext + <ul> + <li>DIV #2 (z-index 2)</li> + <li>DIV #3 (z-index 1) + <ul> + <li>DIV #4 (z-index 10)</li> + </ul> + </li> + </ul> + </li> +</ul> + +<div class="note"><strong>Hinweis:</strong> 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.</div> + +<h2 id="Example_source_code" name="Example_source_code">Beispiel</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><!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> +</pre> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index">Stapeln ohne die Eigenschaft z-index</a>: Die Stapelungsregeln, die gelten, wenn der <code>z-index</code> nicht verwendet wird.</li> + <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float">Stapeln mit fließenden Blöcken</a>: Wie fließende Elemente beim Stapeln behandelt werden.</li> + <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index">Verwenden von z-index</a>: Wie Sie <code>z-index</code> verwenden, um die Standardstapelung zu ändern.</li> + <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">Der Stapelkontext:</a> Hinweise zum Stapelkontext.</li> + <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1">Stapelkontext-Beispiel 1:</a> 2-stufige HTML-Hierarchie, <code>z-index</code> auf der letzten Stufe</li> + <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3">Stapelkontext-Beispiel 3:</a> 3-stufige HTML-Hierarchie, <code>z-index</code> auf der zweiten Ebene</li> +</ul> + +<div class="originaldocinfo"> +<h2 id="Original_Document_Information" name="Original_Document_Information">Original Dokumenteninformation</h2> + +<ul> + <li>Autor(s): Paolo Lombardi</li> + <li>Dieser Artikel ist die englische Übersetzung eines Artikels, den ich auf Italienisch für <a class="external external-icon" href="http://www.yappy.it">YappY</a>. geschrieben habe. Ich gewähre das Recht, den gesamten Inhalt unter der <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a> zu teilen.</li> + <li>Letzte Aktualisation: 9. July 2005</li> +</ul> +</div> 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 +--- +<div>{{cssref}}</div> + +<p>« <a href="/en-US/docs/Web/CSS">CSS</a> « <a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index" title="Understanding CSS z-index">Understanding CSS z-index</a></p> + +<h2 id="Stapelkontext_Beispiel_3">Stapelkontext Beispiel 3</h2> + +<p>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.</p> + +<p>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.</p> + +<p>Wenn sich die drei Menüebenen teilweise überlappen, könnte die Verwaltung der Stapelung zu einem Problem werden.</p> + +<p>{{ EmbedLiveSample('Example_source_code', '320', '330') }}</p> + +<p>Das Menü der ersten Ebene wird nur relativ positioniert, es wird also kein Stapelkontext erzeugt.</p> + +<p>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 <code>{{cssxref("z-index")}}</code> 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.</p> + +<p>Ein Menü der dritten Ebene wird also unter den folgenden Menüs der zweiten Ebene gestapelt, da alle Menüs der zweiten Ebene denselben <code>z-index</code> Wert haben und die Standard-Stapelregeln gelten.</p> + +<p>Um die Situation besser zu verstehen, sehen Sie hier die Stapelkontexthierarchie:</p> + +<ul> + <li>Wurzel-Stapelkontext + <ul> + <li>LEVEL #1 + <ul> + <li>LEVEL #2 (z-index: 1) + <ul> + <li>LEVEL #3</li> + <li>...</li> + <li>LEVEL #3</li> + </ul> + </li> + <li>LEVEL #2 (z-index: 1)</li> + <li>...</li> + <li>LEVEL #2 (z-index: 1)</li> + </ul> + </li> + <li>LEVEL #1</li> + <li>...</li> + <li>LEVEL #1</li> + </ul> + </li> +</ul> + +<p>Dieses Problem kann vermieden werden, indem die Überlappung zwischen den Menüs der verschiedenen Ebenen entfernt wird, oder indem individuelle (und unterschiedliche) <code>z-index</code> Werte verwendet werden, die über den id-Selektor anstelle des class-Selektors zugewiesen werden, oder indem die HTML-Hierarchie abgeflacht wird.</p> + +<div class="note"><strong>Hinweis:</strong> 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.</div> + +<h2 id="Example_source_code" name="Example_source_code">Beispiel Quellcode</h2> + +<pre class="brush: html notranslate"><!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> +</pre> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index">Stapeln ohne die Eigenschaft z-index</a>: Die Stapelungsregeln, die gelten, wenn der <code>z-index</code> nicht verwendet wird.</li> + <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float">Stapeln mit fließenden Blöcken</a>: Wie fließende Elemente (<code>float</code>) beim Stapeln behandelt werden.</li> + <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index">Verwenden von z-index</a>: Wie Sie <code>z-index</code> verwenden, um die Standardstapelung zu ändern.</li> + <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">Der Stapelkontext:</a> Hinweise zum Stapelkontext.</li> + <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1">Stapelkontext-Beispiel 1</a>: 2-stufige HTML-Hierarchie, <code>z-index</code> auf der letzten Stufe</li> + <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2">Stapelkontext-Beispiel 2</a>: 2-stufige HTML-Hierarchie, <code>z-index</code> auf allen Ebenen</li> +</ul> + +<div class="originaldocinfo"> +<h2 id="Original_Document_Information" name="Original_Document_Information">Original Dokumenteninformation</h2> + +<ul> + <li>Autor(s): Paolo Lombardi</li> + <li>Dieser Artikel ist die englische Übersetzung eines Artikels, den ich auf Italienisch für <a class="external external-icon" href="http://www.yappy.it">YappY</a>. geschrieben habe. Ich gewähre das Recht, den gesamten Inhalt unter der <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a> zu teilen.</li> + <li>Letzte Aktualisation: 9. Juli 2005</li> +</ul> +</div> + +<p><strong>Hinweis:</strong> 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.</p> 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 +--- +<div>{{cssref}}</div> + +<p>Wenn die <a href="/de/docs/Web/CSS/">CSS</a>-Eigenschaft {{cssxref("z-index")}} bei keinem Element angegeben ist, werden die Elemente in der folgenden Reihenfolge gestapelt (von unten nach oben):</p> + +<ol> + <li>Der Hintergrund und die Ränder des Wurzelelements</li> + <li>Nachfolgende <a href="/de/docs/Web/CSS/position">nicht positionierte</a> Blöcke, in der Reihenfolge ihres Erscheinens im HTML</li> + <li>Nachfolgende <a href="/de/docs/Web/CSS/position">positionierte</a> Elemente, in der Reihenfolge ihres Erscheinens in der HTML-Datei</li> +</ol> + +<p>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.</p> + +<p>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.</p> + +<p><img alt="Figure 1. Exemple de règles d'empilement sans propriété z-index" class="internal" src="/@api/deki/files/1448/=Understanding_zindex_01.png"></p> + +<h2 id="Quellcode_für_das_Beispiel">Quellcode für das Beispiel</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><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> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">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; +} +</pre> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float">Stapeln mit fließenden Blöcken:</a> Wie fließende (<code>float</code>) Elemente beim Stapeln behandelt werden.</li> + <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index">Verwenden von z-index</a>: Wie Sie <code>z-index</code> verwenden, um die Standardstapelung zu ändern.</li> + <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">Der Stapelkontext:</a> Hinweise zum Stapelkontext.</li> + <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1">Stapelkontext-Beispiel 1</a>: 2-stufige HTML-Hierarchie, <code>z-index</code> auf der letzten Stufe</li> + <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2">Stapelkontext-Beispiel 2:</a> 2-stufige HTML-Hierarchie, <code>z-index</code> auf allen Ebenen</li> + <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3">Stapelkontext-Beispiel 3:</a> 3-stufige HTML-Hierarchie, <code>z-index</code> auf der zweiten Ebene</li> +</ul> + +<div class="originaldocinfo"> +<h2 id="Original_Document_Information" name="Original_Document_Information">Original Dokumenteninformation</h2> + +<ul> + <li>Autor(s): Paolo Lombardi</li> + <li>Dieser Artikel ist die englische Übersetzung eines Artikels, den ich auf Italienisch für <a class="external external-icon" href="http://www.yappy.it">YappY</a>. geschrieben habe. Ich gewähre das Recht, den gesamten Inhalt unter der <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a> zu teilen.</li> + <li>Letzte Aktualisation: 3. November 2004</li> +</ul> +</div> 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 +--- +<div>{{CSSRef}}</div> + +<p class="summary"><span class="seoSummary">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.</span> Below is an overview of most of these data types. Refer to the page for each value type for more detailed information.</p> + +<h2 id="Textual_data_types">Textual data types</h2> + +<ul> + <li>{{cssxref("<custom-ident>")}}</li> + <li>Pre-defined keywords as an <code><ident></code></li> + <li>{{cssxref("<string>")}}</li> + <li>{{cssxref("<url>")}}</li> +</ul> + +<p>Text data types are either <code><string></code>, a quoted series of characters, or an <code><ident></code>, a "CSS Identifier" which is an unquoted string. A <code><string></code> must be quoted with either single or double quotes. CSS Identifiers, listed in the specifications as <code><ident></code> or <code><custom-ident></code>, must be unquoted.</p> + +<p>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.</p> + +<p>When both quoted and unquoted user defined text values are permitted, the specification will list <code><custom-ident> | <string></code>, meaning quotes are optional, such as is the case with animation names:</p> + +<pre class="brush: css notranslate">@keyframe validIdent { + /* keyframes go here */ +} +@keyframe 'validString' { + /* keyframes go here */ +}</pre> + +<p>Some text values are not valid if encompassed in quotes. For example, the value of {{cssxref("grid-area")}} can be a <code><custom-ident></code>, so if we had a grid area named <code>content</code> we would use it without quotes:</p> + +<pre class="brush: css notranslate">.item { + grid-area: content; +} +</pre> + +<p>In comparison, a data type that is a {{cssxref("<string>")}}, such as a string value of the {{cssxref("content")}} property, must be quoted:</p> + +<pre class="brush: css notranslate">.item::after { + content: "This is my content."; +} +</pre> + +<p>While you can generally create any name you want, including using emojis, the identifier can't be <code>none</code>, <code>unset</code>, <code>initial</code>, or <code>inherit</code>, 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.</p> + +<h3 id="Pre-defined_keyword_values">Pre-defined keyword values</h3> + +<p>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.</p> + +<p>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")}}.</p> + +<pre class="syntaxbox notranslate">left <a href="/en-US/docs/CSS/Value_definition_syntax#Single_bar" title="Single bar: exactly one of the entities must be present">|</a> right <a href="/en-US/docs/CSS/Value_definition_syntax#Single_bar" title="Single bar: exactly one of the entities must be present">|</a> none <a href="/en-US/docs/CSS/Value_definition_syntax#Single_bar" title="Single bar: exactly one of the entities must be present">|</a> inline-start <a href="/en-US/docs/CSS/Value_definition_syntax#Single_bar" title="Single bar: exactly one of the entities must be present">|</a> inline-end</pre> + +<p>Such values are used without quotes:</p> + +<pre class="brush: css notranslate"><code>.box { + float: left; +} +</code></pre> + +<h3 id="CSS-wide_values">CSS-wide values</h3> + +<p>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.</p> + +<p>The <code>initial</code> keyword represents the value specified as the property’s initial value. The <code>inherit</code> keyword represents the computed value of the property on the element’s parent, provided it is inherited.</p> + +<p>The <code>unset</code> keyword acts as either <code>inherit</code> or <code>initial</code>, depending on whether the property is inherited or not.</p> + +<p>A fourth value of {{cssxref("revert")}} was added in the Cascade Level 4 specification, but it does not currently have good browser support.</p> + +<h3 id="URLs">URLs</h3> + +<p>A {{cssxref("<url>")}} type uses functional notation, which accepts a <code><string></code> 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.</p> + +<pre class="brush: css notranslate"><code>.box { + background-image: url("images/my-background.png"); +}</code> + +<code>.box { + background-image: url("https://www.exammple.com/images/my-background.png"); +}</code> +</pre> + +<p>The parameter for <code>url()</code> can be either quoted or unquoted. If unquoted, it is parsed as a <code><url-token></code>, which has extra requirements including the escaping of certain characters. See {{cssxref("<url>")}} for more information.</p> + +<h2 id="Numeric_data_types">Numeric data types</h2> + +<ul> + <li>{{cssxref("<integer>")}}</li> + <li>{{cssxref("<number>")}}</li> + <li>{{cssxref("<dimension>")}}</li> + <li>{{cssxref("<percentage>")}}</li> +</ul> + +<h3 id="Integers">Integers</h3> + +<p>An integer is one or more decimal digits, <code>0</code> through <code>9</code>, such as <code>1024</code> or <code>-55</code>. An integer may be preceded by a <code>+</code> or <code>-</code> symbol, with no space between the symbol and the integer.</p> + +<h3 id="Numbers">Numbers</h3> + +<p>A {{cssxref("<number>")}} represents a real number, which may or may not have a decimal point with a fractional component, for example <code>0.255</code>, <code>128</code> or <code>-1.2</code>. Numbers may also be preceded by a <code>+</code> or <code>-</code> symbol.</p> + +<h3 id="Dimensions">Dimensions</h3> + +<p>A {{cssxref("<dimension>")}} is a <code><number></code> with a unit attached to it, for example <code>45deg</code>, <code>100ms</code>, or <code>10px</code>. 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. <code>1 cm</code> is not valid.</p> + +<p>CSS uses dimensions to specify:</p> + +<ul> + <li>{{cssxref("<length>")}} (Distance units)</li> + <li>{{cssxref("<angle>")}}</li> + <li>{{cssxref("<time>")}}</li> + <li>{{cssxref("<frequency>")}}</li> + <li>{{cssxref("<resolution>")}}</li> +</ul> + +<p>These are all covered in subsections below.</p> + +<h4 id="Distance_units">Distance units</h4> + +<p>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.</p> + +<p>Relative length units specify a length in relation to something else. For example, <code>em</code> is relative to the font size on the element and <code>vh</code> is relative to the viewport height.</p> + +<table class="standard-table"> + <caption> + <h4 id="Relative_length_units">Relative length units</h4> + </caption> + <thead> + <tr> + <th scope="col">Unit</th> + <th scope="col">Relative to</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>em</code></td> + <td>Font size of the element.</td> + </tr> + <tr> + <td><code>ex</code></td> + <td>x-height of the element's font.</td> + </tr> + <tr> + <td><code>cap</code></td> + <td>Cap height (the nominal height of capital letters) of the element's font.</td> + </tr> + <tr> + <td><code>ch</code></td> + <td>Average character advance of a narrow glyph in the element’s font, as represented by the “0” (ZERO, U+0030) glyph.</td> + </tr> + <tr> + <td><code>ic</code></td> + <td>Average character advance of a full width glyph in the element’s font, as represented by the “水” (CJK water ideograph, U+6C34) glyph.</td> + </tr> + <tr> + <td><code>rem</code></td> + <td>Font size of the root element.</td> + </tr> + <tr> + <td><code>lh</code></td> + <td>Line height of the element.</td> + </tr> + <tr> + <td><code>rlh</code></td> + <td>Line height of the root element.</td> + </tr> + <tr> + <td><code>vw</code></td> + <td>1% of viewport's width.</td> + </tr> + <tr> + <td><code>vh</code></td> + <td>1% of viewport's height.</td> + </tr> + <tr> + <td><code>vi</code></td> + <td>1% of viewport's size in the root element's inline axis.</td> + </tr> + <tr> + <td><code>vb</code></td> + <td>1% of viewport's size in the root element's block axis.</td> + </tr> + <tr> + <td><code>vmin</code></td> + <td>1% of viewport's smaller dimension.</td> + </tr> + <tr> + <td><code>vmax</code></td> + <td>1% of viewport's larger dimension.</td> + </tr> + </tbody> +</table> + +<p>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, <code>mm</code> is a physical millimeter, 1/10th of a centimeter.</p> + +<table class="standard-table"> + <caption> + <h4 id="Absolute_length_units">Absolute length units</h4> + </caption> + <thead> + <tr> + <th scope="col">Unit</th> + <th scope="col">Name</th> + <th scope="col">Equivalent to</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>cm</code></td> + <td>Centimeters</td> + <td>1cm = 96px/2.54</td> + </tr> + <tr> + <td><code>mm</code></td> + <td>Millimeters</td> + <td>1mm = 1/10th of 1cm</td> + </tr> + <tr> + <td><code>Q</code></td> + <td>Quarter-millimeters</td> + <td>1Q = 1/40th of 1cm</td> + </tr> + <tr> + <td><code>in</code></td> + <td>Inches</td> + <td>1in = 2.54cm = 96px</td> + </tr> + <tr> + <td><code>pc</code></td> + <td>Picas</td> + <td>1pc = 1/16th of 1in</td> + </tr> + <tr> + <td><code>pt</code></td> + <td>Points</td> + <td>1pt = 1/72th of 1in</td> + </tr> + <tr> + <td><code>px</code></td> + <td>Pixels</td> + <td>1px = 1/96th of 1in</td> + </tr> + </tbody> +</table> + +<p>When including a length value, if the length is <code>0</code>, 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.</p> + +<h4 id="Angle_units">Angle units</h4> + +<p>Angle values are represented by the type {{cssxref("<angle>")}} and accept the following values:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Unit</th> + <th scope="col">Name</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>deg</code></td> + <td>Degrees</td> + <td>There are 360 degrees in a full circle.</td> + </tr> + <tr> + <td><code>grad</code></td> + <td>Gradians</td> + <td>There are 400 gradians in a full circle.</td> + </tr> + <tr> + <td><code>rad</code></td> + <td>Radians</td> + <td>There are 2π radians in a full circle.</td> + </tr> + <tr> + <td><code>turn</code></td> + <td>Turns</td> + <td>There is 1 turn in a full circle.</td> + </tr> + </tbody> +</table> + +<h4 id="Time_units">Time units</h4> + +<p>Time values are represented by the type {{cssxref("<time>")}}. When including a time value, the unit identifier -- the <code>s</code> or <code>ms</code> -- is required. It accepts the following values.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Unit</th> + <th scope="col">Name</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>s</code></td> + <td>Seconds</td> + <td></td> + </tr> + <tr> + <td><code>ms</code></td> + <td>Milliseconds</td> + <td>There are 1,000 milliseconds in a second.</td> + </tr> + </tbody> +</table> + +<h4 id="Frequency_units">Frequency units</h4> + +<p>Frequency values are represented by the type {{cssxref("<frequency>")}}. It accepts the following values.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Unit</th> + <th scope="col">Name</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>Hz</code></td> + <td>Hertz</td> + <td>Represents the number of occurrences per second.</td> + </tr> + <tr> + <td><code>kHz</code></td> + <td>KiloHertz</td> + <td>A kiloHertz is 1000 Hertz.</td> + </tr> + </tbody> +</table> + +<p><code>1Hz</code>, which can also be written as <code>1hz</code> or <code>1HZ</code>, is one cycle per second.</p> + +<h4 id="Resolution_unit">Resolution unit</h4> + +<p>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:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Unit</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>dpi</code></td> + <td>Dots per inch.</td> + </tr> + <tr> + <td><code>dpcm</code></td> + <td>Dots per centimetre.</td> + </tr> + <tr> + <td><code>dppx</code>, <code>x</code></td> + <td>Dots per px unit.</td> + </tr> + </tbody> +</table> + +<h3 id="Percentages">Percentages</h3> + +<p>A {{cssxref("<percentage>")}} is a type that represents a fraction of some other value.</p> + +<p>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.</p> + +<p>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:</p> + +<pre class="brush: css notranslate">.box { + width: 50%; +}</pre> + +<h3 id="Mixing_percentages_and_dimensions">Mixing percentages and dimensions</h3> + +<p>Some properties accept a dimension that could be either one of two types, for example a <code><length></code> <strong>or</strong> a <code><percentage></code>. 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:</p> + +<ul> + <li>{{cssxref("<frequency-percentage>")}}</li> + <li>{{cssxref("<angle-percentage>")}}</li> + <li>{{cssxref("<time-percentage>")}}</li> +</ul> + +<h3 id="Special_data_types_defined_in_other_specs">Special data types (defined in other specs)</h3> + +<ul> + <li>{{cssxref("<color>")}}</li> + <li>{{cssxref("<image>")}}</li> + <li>{{cssxref("<position>")}}</li> +</ul> + +<h4 id="Color">Color</h4> + +<p>The {{cssxref("<color>")}} value specifies the color of an element feature (e.g. it's background color), and is defined in the <a href="https://drafts.csswg.org/css-color-3/">CSS Color Module</a>.</p> + +<h4 id="Image">Image</h4> + +<p>The {{cssxref("<image>")}} value specifies all the different types of image that can be used in CSS, and is defined in the <a href="https://www.w3.org/TR/css-images-4/">CSS Image Values and Replaced Content Module</a>.</p> + +<h4 id="Position">Position</h4> + +<p>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 <a href="https://www.w3.org/TR/css-backgrounds-3/">CSS Backgrounds and Borders specification</a>.</p> + +<h3 id="Functional_notation">Functional notation</h3> + +<ul> + <li>{{cssxref("calc()")}}</li> + <li>{{cssxref("min", "min()")}}</li> + <li>{{cssxref("max", "max()")}}</li> + <li>{{cssxref("clamp", "clamp()")}}</li> + <li>{{cssxref("toggle", "toggle()")}}</li> + <li>{{cssxref("attr", "attr()")}}</li> +</ul> + +<p><a href="/en-US/docs/Web/CSS/CSS_Functionals">Functional notation</a> 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 <code>(</code> followed by the argument(s) to the notation followed by a right parenthesis <code>)</code>. Functions can take multiple arguments, which are formatted similarly to a CSS property value.</p> + +<p>White space is allowed, but optional inside the parentheses. (But see notes regarding whitespace within pages for <code>min()</code>, <code>max()</code> and <code>clamp()</code> functions.)</p> + +<p>Some legacy functional notations such as <code>rgba()</code> 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.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS4 Values")}}</td> + <td>{{Spec2("CSS4 Values")}}</td> + <td>Adds the <code>vi</code>, <code>vb</code>, <code>ic</code>, <code>cap</code>, <code>lh</code> and <code>rlh</code> units.<br> + Adds the <code>min()</code>, <code>max()</code> and <code>clamp()</code> functional notation<br> + Adds <code>toggle()</code></td> + </tr> + <tr> + <td>{{SpecName("CSS3 Values")}}</td> + <td>{{Spec2("CSS3 Values")}}</td> + <td>Adds <code>calc()</code>, <code>ch</code>, <code>rem</code>, <code>vw</code>, <code>vw</code>, <code>vmin</code>,<code> vmax</code>, <code>Q</code></td> + </tr> + <tr> + <td>{{SpecName("CSS4 Colors")}}</td> + <td>{{Spec2("CSS4 Colors")}}</td> + <td>Adds commaless syntaxes for the <code>rgb()</code>, <code>rgba()</code>, <code>hsl()</code>, and <code>hsla()</code> functions. Allows alpha values in <code>rgb()</code> and <code>hsl()</code>, turning <code>rgba()</code> and <code>hsla()</code> into (deprecated) aliases for them.<br> + Adds color keyword <code>rebeccapurple</code>.<br> + Adds 4- and 8-digit hex color values, where the last digit(s) represents the alpha value.<br> + Adds <code>hwb()</code>, <code>device-cmyk()</code>, and <code>color()</code> functions.</td> + </tr> + <tr> + <td>{{SpecName("CSS3 Colors")}}</td> + <td>{{Spec2("CSS3 Colors")}}</td> + <td>Deprecates system-colors. Adds SVG colors. Adds the <code>rgba()</code>, <code>hsl()</code>, and <code>hsla()</code> functions.</td> + </tr> + <tr> + <td>{{SpecName("CSS4 Images")}}</td> + <td>{{Spec2("CSS4 Images")}}</td> + <td> + <p>Adds <code>element()</code>, <code>image()</code>, <code>image-set()</code>, <code>conic-gradient()</code></p> + </td> + </tr> + <tr> + <td>{{SpecName("CSS3 Images")}}</td> + <td>{{Spec2("CSS3 Images")}}</td> + <td>Initial definition of image.</td> + </tr> + <tr> + <td>{{SpecName("CSS2.1")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("CSS1")}}</td> + <td>{{Spec2("CSS1")}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Types">CSS Basic Data Types</a></li> + <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">Introduction to CSS: Values and Units </a></li> +</ul> 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: <transform-function> +slug: Web/CSS/transform-function +tags: + - CSS + - CSS Data Type + - CSS Transforms + - Data Type + - Layout + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/CSS/transform-function +--- +<div>{{CSSRef}}</div> + +<p>The <strong><code><transform-function></code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/CSS_Types">data type</a> represents a transformation that affects an element's appearance. Transformation <a href="/en-US/docs/Web/CSS/CSS_Functions">functions</a> can rotate, resize, distort, or move an element in 2D or 3D space. It is used in the {{cssxref("transform")}} property.</p> + +<h2 id="Syntax">Syntax</h2> + +<p>The <code><transform-function></code> data type is specified using one of the transformation functions listed below. Each function applies a geometric operation in either 2D or 3D.</p> + +<h3 id="Matrix_transformation">Matrix transformation</h3> + +<dl> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/matrix">matrix()</a></code></dt> + <dd>Describes a homogeneous 2D transformation matrix.</dd> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/matrix3d">matrix3d()</a></code></dt> + <dd>Describes a 3D transformation as a 4×4 homogeneous matrix.</dd> +</dl> + +<h3 id="Perspective">Perspective</h3> + +<dl> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/perspective">perspective()</a></code></dt> + <dd>Sets the distance between the user and the z=0 plane.</dd> +</dl> + +<h3 id="Rotation">Rotation</h3> + +<dl> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/rotate">rotate()</a></code></dt> + <dd>Rotates an element around a fixed point on the 2D plane.</dd> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/rotate3d">rotate3d()</a></code></dt> + <dd>Rotates an element around a fixed axis in 3D space.</dd> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/rotateX">rotateX()</a></code></dt> + <dd>Rotates an element around the horizontal axis.</dd> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/rotateY">rotateY()</a></code></dt> + <dd>Rotates an element around the vertical axis.</dd> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/rotateZ">rotateZ()</a></code></dt> + <dd>Rotates an element around the z-axis.</dd> +</dl> + +<h3 id="Scaling_resizing">Scaling (resizing)</h3> + +<dl> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/scale">scale()</a></code></dt> + <dd>Scales an element up or down on the 2D plane.</dd> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/scale3d">scale3d()</a></code></dt> + <dd>Scales an element up or down in 3D space.</dd> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/scaleX">scaleX()</a></code></dt> + <dd>Scales an element up or down horizontally.</dd> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/scaleY">scaleY()</a></code></dt> + <dd>Scales an element up or down vertically.</dd> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/scaleZ">scaleZ()</a></code></dt> + <dd>Scales an element up or down along the z-axis.</dd> +</dl> + +<h3 id="Skewing_distortion">Skewing (distortion)</h3> + +<dl> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/skew">skew()</a></code></dt> + <dd>Skews an element on the 2D plane.</dd> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/skewX">skewX()</a></code></dt> + <dd>Skews an element in the horizontal direction.</dd> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/skewY">skewY()</a></code></dt> + <dd>Skews an element in the vertical direction.</dd> +</dl> + +<h3 id="Translation_moving">Translation (moving)</h3> + +<dl> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/translate">translate()</a></code></dt> + <dd>Translates an element on the 2D plane.</dd> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/translate3d">translate3d()</a></code></dt> + <dd>Translates an element in 3D space.</dd> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/translateX">translateX()</a></code></dt> + <dd>Translates an element horizontally.</dd> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/translateY">translateY()</a></code></dt> + <dd>Translates an element vertically.</dd> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/translateZ">translateZ()</a></code></dt> + <dd>Translates an element along the z-axis.</dd> +</dl> + +<h2 id="Description">Description</h2> + +<p>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 <a href="https://en.wikipedia.org/wiki/Cartesian_coordinate_system">Cartesian coordinate system</a>, although <a href="https://en.wikipedia.org/wiki/Homogeneous_coordinates">homogeneous coordinates</a> are also sometimes used.</p> + +<h3 id="Cartesian_coordinates">Cartesian coordinates</h3> + +<p><a href="/@api/deki/files/5796/=coord_in_R2.png"><img src="/files/3438/coord_in_R2.png" style="float: right;"></a></p> + +<p>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 <code>(x, y)</code>.</p> + +<p>In CSS (and most computer graphics), the origin <code>(0, 0)</code> represents the<em> top-left</em> 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 <code>(2, 5)</code>, while a point 3 units to the left and 12 units up would be <code>(-3, -12)</code>.</p> + +<h3 id="Transformation_functions">Transformation functions</h3> + +<p>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:</p> + +<p style="text-align: center;"><math> <mfenced> <mtable> <mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd></mtr> <mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd></mtr> </mtable> </mfenced> </math></p> + +<p>The function is applied to an element by using matrix multiplication. Thus, each coordinate changes based on the values in the matrix:</p> + +<p style="text-align: center;"><math> <mfenced> <mtable> <mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd></mtr> <mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd></mtr> </mtable> </mfenced> <mfenced> <mtable> <mtr><mtd><mi>x</mi></mtd></mtr><mtr><mtd><mi>y</mi></mtd></mtr> </mtable> </mfenced> <mo>=</mo> <mfenced> <mtable> <mtr> <mtd><mi>a</mi><mi>x</mi><mo>+</mo><mi>c</mi><mi>y</mi></mtd> </mtr> <mtr> <mtd><mi>b</mi><mi>x</mi><mo>+</mo><mi>d</mi><mi>y</mi></mtd> </mtr> </mtable> </mfenced> </math></p> + +<p>It is even possible to apply several transformations in a row:</p> + +<p style="text-align: center;"><math> <mfenced> <mtable> <mtr> <mtd><msub><mi>a</mi><mn>1</mn></msub></mtd> <mtd><msub><mi>c</mi><mn>1</mn></msub></mtd> </mtr> <mtr> <mtd><msub><mi>b</mi><mn>1</mn></msub></mtd> <mtd><msub><mi>d</mi><mn>1</mn></msub></mtd> </mtr> </mtable> </mfenced> <mfenced> <mtable> <mtr> <mtd><msub><mi>a</mi><mn>2</mn></msub></mtd> <mtd><msub><mi>c</mi><mn>2</mn></msub></mtd> </mtr> <mtr> <mtd><msub><mi>b</mi><mn>2</mn></msub></mtd> <mtd><msub><mi>d</mi><mn>2</mn></msub></mtd> </mtr> </mtable> </mfenced> <mo>=</mo> <mfenced> <mtable> <mtr> <mtd> <msub><mi>a</mi><mn>1</mn></msub> <msub><mi>a</mi><mn>2</mn></msub> <mo>+</mo> <msub><mi>c</mi><mn>1</mn></msub> <msub><mi>b</mi><mn>2</mn></msub> </mtd> <mtd> <msub><mi>a</mi><mn>1</mn></msub> <msub><mi>c</mi><mn>2</mn></msub> <mo>+</mo> <msub><mi>c</mi><mn>1</mn></msub> <msub><mi>d</mi><mn>2</mn></msub> </mtd> </mtr> <mtr> <mtd> <msub><mi>b</mi><mn>1</mn></msub> <msub><mi>a</mi><mn>2</mn></msub> <mo>+</mo> <msub><mi>d</mi><mn>1</mn></msub> <msub><mi>b</mi><mn>2</mn></msub> </mtd> <mtd> <msub><mi>b</mi><mn>1</mn></msub> <msub><mi>c</mi><mn>2</mn></msub> <mo>+</mo> <msub><mi>d</mi><mn>1</mn></msub> <msub><mi>d</mi><mn>2</mn></msub> </mtd> </mtr> </mtable> </mfenced> </math></p> + +<p>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.</p> + +<p>However, one major transformation is not linear, and therefore must be special-cased when using this notation: translation. The translation vector <code>(tx, ty)</code> must be expressed separately, as two additional parameters.</p> + +<div class="note"> +<p><strong>Note:</strong> Though trickier than Cartesian coordinates, <a class="external" href="https://en.wikipedia.org/wiki/Homogeneous_coordinates">homogeneous coordinates</a> in <a class="external" href="https://en.wikipedia.org/wiki/Projective_geometry">projective geometry</a> lead to 3×3 transformation matrices, and can simply express translations as linear functions.</p> +</div> + +<h2 id="Examples">Examples</h2> + +<h3 id="Transform_function_comparison">Transform function comparison</h3> + +<p>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.</p> + +<p>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 <code>transform3d()</code>, to allow you to see the effect of all the transforms.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><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></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">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; +}</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js notranslate">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) + } +})</pre> + +<h4 id="Result">Result</h4> + +<p>{{EmbedLiveSample('Transform_function_comparison', '100%', 300)}}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS Transforms 2', '#transform-functions', '<transform-function>')}}</td> + <td>{{Spec2('CSS Transforms 2')}}</td> + <td>Added 3D transform functions.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Transforms', '#transform-functions', '<transform-function>')}}</td> + <td>{{Spec2('CSS3 Transforms')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("css.types.transform-function")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>CSS {{cssxref("transform")}} property</li> +</ul> 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() +--- +<div>{{CSSRef}}</div> + +<p>Die <a href="/de/docs/Web/CSS">CSS</a>-Eigenschaften <strong><code>translate3d()</code></strong> positioniert ein Element im 3D-Raum neu. Sein Ergebnis ist ein {{cssxref("<Transform-Funktion>")}} Datentyp.</p> + +<div>{{EmbedInteractiveExample("pages/css/function-translate3d.html")}}</div> + +<p class="hidden">Die Quelle für dieses interaktive Beispiel ist in einem GitHub-Repository gespeichert. Wenn Sie zum Projekt der interaktiven Beispiele beitragen möchten, klonen Sie bitte <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> und senden Sie uns eine Pull-Anfrage.</p> + +<p>Diese Transformation wird durch einen dreidimensionalen Vektor charakterisiert. Seine Koordinaten legen fest, wie sehr sich das Element in jede Richtung bewegt.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox notranslate">translate3d(<var>tx</var>, <var>ty</var>, <var>tz</var>) +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code><var>tx</var></code></dt> + <dd>Ist ein {{cssxref("<Länge>")}} oder {{cssxref("<Prozentsatz>")}}, das die Abszisse des Verschiebungsvektors darstellt.</dd> + <dt><code><var>ty</var></code></dt> + <dd>Ist ein {{cssxref("<Länge>")}} oder {{cssxref("<Prozentsatz>")}}, das die Ordinate des Verschiebevektors darstellt.</dd> + <dt><code><var>tz</var></code></dt> + <dd>Ist ein {{cssxref("<Länge>")}}, der die z-Komponente des Verschiebungsvektors darstellt.<br> + Es kann kein {{cssxref("<Prozentwert>")}}-Wert sein; in diesem Fall wird die Eigenschaft, die die Transformation enthält, als ungültig betrachtet.</dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Kartesische Koordinaten auf ℝ<sup>2</sup></th> + <th scope="col">Homogene Koordinaten auf ℝℙ<sup>2</sup></th> + <th scope="col">Kartesische Koordinaten auf ℝ<sup>3</sup></th> + <th scope="col">Homogene Koordinaten auf ℝℙ<sup>3</sup></th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="2" rowspan="2"> + <p>Diese Transformation gilt für den 3D-Raum und kann nicht in der Ebene dargestellt werden.</p> + </td> + <td colspan="1" rowspan="2">Eine Verschiebung ist keine lineare Transformation in ℝ3 und kann nicht durch eine kartesische Koordinatenmatrix dargestellt werden.</td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>tz</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + </tbody> +</table> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Using_a_single_axis_translation" name="Using_a_single_axis_translation">Verwendung einer einachsigen Verschiebung</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><div>Static</div> +<div class="moved">Moved</div> +<div>Static</div></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">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; +} +</pre> + +<h4 id="Ergebnis">Ergebnis</h4> + +<p>{{EmbedLiveSample("Using_a_single_axis_translation", 250, 250)}}</p> + +<h3 id="Combining_z-axis_and_x-axis_translation" name="Combining_z-axis_and_x-axis_translation">Kombinierte Z-Achsen- und X-Achsen-Verschiebung</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html notranslate"><div>Static</div> +<div class="moved">Moved</div> +<div>Static</div></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css notranslate">div { + width: 60px; + height: 60px; + background-color: skyblue; +} + +.moved { + transform: perspective(500px) translate3d(10px, 0, 100px); + background-color: pink; +} +</pre> + +<h4 id="Ergebnis_2">Ergebnis</h4> + +<p>{{EmbedLiveSample("Combining_z-axis_and_x-axis_translation", 250, 250)}}</p> + +<h2 id="Spezifikation">Spezifikation</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Transforms 2", "#funcdef-translate3d", "translate3d()")}}</td> + <td>{{Spec2("CSS Transforms 2")}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2> + +<div class="hidden">Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert. Wenn Sie zu den Daten beitragen möchten, besuchen Sie bitte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> und senden Sie uns eine Pull-Anfrage.</div> + +<p>{{Compat("css.types.transform-function")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{cssxref("translate")}}</li> + <li><code><a href="/de/docs/Web/CSS/transform-function/translateY()">translateY()</a></code></li> + <li><code><a href="/de/docs/Web/CSS/transform-function/translateX">translateX()</a></code></li> + <li>{{cssxref("transform")}}</li> + <li>{{cssxref("<transform-function>")}}</li> +</ul> 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 +--- +<div>{{CSSRef}}</div> + +<p>Die <a href="/de/docs/Web/CSS">CSS</a>-Funktion <strong><code>translateX()</code></strong> positioniert ein Element horizontal auf der 2D-Ebene neu. Ihr Ergebnis ist ein {{cssxref("<transform-function>")}} Datentyp.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/3544/transform-functions-translateX_2.png" style="height: 146px; width: 243px;"></p> + +<div class="note"> +<p><strong>Hinweis:</strong> <code>translateX(tx)</code> ist dasselbe wie <code><a href="/en-US/docs/Web/CSS/transform-function/translate">translate</a>(tx, 0)</code> oder <code><a href="/en-US/docs/Web/CSS/transform-function/translate3d">translate3d</a>(tx, 0, 0)</code>.</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: css notranslate">/* <length-percentage> values */ +transform: translateX(200px); +transform: translateX(50%); +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code><length-percentage></code></dt> + <dd>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.</dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Kartesische Koordinaten auf ℝ<sup>2</sup></th> + <th scope="col">Homogene Koordinaten auf ℝℙ<sup>2</sup></th> + <th scope="col">Kartesische Koordinaten auf ℝ<sup>3</sup></th> + <th scope="col">Homogene Koordinaten auf ℝℙ<sup>3</sup></th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="1" rowspan="2"> + <p>Eine Translation ist keine lineare Transformation in ℝ2 und kann nicht durch eine kartesische Koordinatenmatrix dargestellt werden.</p> + </td> + <td><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>t</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>t</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>t</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + <tr> + <td><code>[1 0 0 1 t 0]</code></td> + </tr> + </tbody> +</table> + +<h2 id="Formale_Syntax">Formale Syntax</h2> + +<pre class="syntaxbox notranslate">translateX({{cssxref("<length-percentage>")}}) +</pre> + +<h2 id="Examples" name="Examples">Beispiel</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><div>Static</div> +<div class="moved">Moved</div> +<div>Static</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">div { + width: 60px; + height: 60px; + background-color: skyblue; +} + +.moved { + transform: translateX(10px); /* Equal to translate(10px) */ + background-color: pink; +} +</pre> + +<h3 id="Ergebnis">Ergebnis</h3> + +<p>{{EmbedLiveSample("Examples", 250, 250)}}</p> + +<h2 id="Spezifikation">Spezifikation</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS3 Transforms", "#funcdef-transform-translatex", "translateX()")}}</td> + <td>{{Spec2("CSS3 Transforms")}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2> + +<div class="hidden">Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert. Wenn Sie zu den Daten beitragen möchten, besuchen Sie bitte <a href="Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert. Wenn Sie zu den Daten beitragen möchten, besuchen Sie bitte https://github.com/mdn/browser-compat-data und senden Sie uns eine Pull-Anfrage.">https://github.com/mdn/browser-compat-data</a> und senden Sie uns eine Pull-Anfrage.</div> + +<p>{{Compat("css.types.transform-function")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{cssxref("translate")}}</li> + <li><code><a href="/de/docs/Web/CSS/transform-function/translateY()">translateY()</a></code></li> + <li><code><a href="/de/docs/Web/CSS/transform-function/translateZ()">translateZ()</a></code></li> + <li><code><a href="/de/docs/Web/CSS/transform-function/translate3d()">translate3d()</a></code></li> + <li>{{cssxref("transform")}}</li> + <li>{{cssxref("<transform-function>")}}</li> +</ul> 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() +--- +<div>{{CSSRef}}</div> + +<p>Die <a href="/de/docs/Web/CSS">CSS</a>-Funktion <strong><code>translateY()</code></strong> positioniert ein Element horizontal auf der 2D-Ebene neu. Ihr Ergebnis ist ein {{cssxref("<transform-function>")}} Datentyp.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12125/translateY.png" style="height: 195px; width: 243px;"></p> + +<div class="note"> +<p><strong>Hinweis:</strong> <code>translateY(ty)</code> ist dasselbe wie <code><a href="/en-US/docs/Web/CSS/transform-function/translate">translate</a>(0, ty)</code> oder <code><a href="/en-US/docs/Web/CSS/transform-function/translate3d">translate3d</a>(0, ty, 0)</code>.</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: css notranslate">/* <length-percentage> values */ +transform: translateY(200px); +transform: translateY(50%); +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code><length-percentage></code></dt> + <dd>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.</dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Kartesische Koordinaten auf ℝ<sup>2</sup></th> + <th scope="col">Homogene Koordinaten auf ℝℙ<sup>2</sup></th> + <th scope="col">Kartesische Koordinaten auf ℝ<sup>3</sup></th> + <th scope="col">Homogene Koordinaten auf ℝℙ<sup>3</sup></th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="1" rowspan="2"> + <p>Eine Translation ist keine lineare Transformation in ℝ2 und kann nicht durch eine kartesische Koordinatenmatrix dargestellt werden.</p> + </td> + <td><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + <tr> + <td><code>[1 0 0 1 0 t]</code></td> + </tr> + </tbody> +</table> + +<h2 id="Formale_Syntax">Formale Syntax</h2> + +<pre class="syntaxbox notranslate">translateY({{cssxref("<length-percentage>")}}) +</pre> + +<h2 id="Examples" name="Examples">Beispiel</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><div>Static</div> +<div class="moved">Moved</div> +<div>Static</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">div { + width: 60px; + height: 60px; + background-color: skyblue; +} + +.moved { + transform: translateY(10px); + background-color: pink; +} +</pre> + +<h3 id="Ergebnis">Ergebnis</h3> + +<p>{{EmbedLiveSample("Examples", 250, 250)}}</p> + +<h2 id="Spezifikation">Spezifikation</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS3 Transforms", "#funcdef-transform-translatex", "translateX()")}}</td> + <td>{{Spec2("CSS3 Transforms")}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2> + +<div class="hidden">Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert. Wenn Sie zu den Daten beitragen möchten, besuchen Sie bitte <a href="Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert. Wenn Sie zu den Daten beitragen möchten, besuchen Sie bitte https://github.com/mdn/browser-compat-data und senden Sie uns eine Pull-Anfrage.">https://github.com/mdn/browser-compat-data</a> und senden Sie uns eine Pull-Anfrage.</div> + +<p>{{Compat("css.types.transform-function")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{cssxref("translate")}}</li> + <li><code><a href="/de/docs/Web/CSS/transform-function/translateX">translateX()</a></code></li> + <li>{{cssxref("transform")}}</li> + <li>{{cssxref("<transform-function>")}}</li> +</ul> 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() +--- +<div>{{CSSRef}}</div> + +<p>Die <a href="/de/docs/Web/CSS">CSS</a>-Funktion <strong><code>translateZ()</code></strong> 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.</p> + +<div>{{EmbedInteractiveExample("pages/css/function-translateZ.html")}}</div> + +<div class="hidden">Die Quelle für dieses interaktive Beispiel ist in einem GitHub-Repository gespeichert. Wenn Sie zum Projekt der interaktiven Beispiele beitragen möchten, klonen Sie bitte <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> und senden Sie uns eine Pull-Anfrage.</div> + +<p>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.</p> + +<p>In den obigen interaktiven Beispielen wurden die Werte <code><a href="/de/docs/Web/CSS/perspective">perspective: 550px;</a></code> gesetzt, um einen 3D-Raum zu erzeugen, und <code><a href="/de/docs/Web/CSS/transform-style">transform-style: preserve-3d;</a></code>, damit die Kinder-elemente, die 6 Seiten des Würfels, auch im 3D-Raum positioniert werden, auf den Würfel gesetzt.</p> + +<div class="note"> +<p><strong>Hinweis:</strong> <code>translateZ(tz)</code> ist gleichzusetzen mit <code><a href="/de/docs/Web/CSS/transform-function/translate3d">translate3d</a>(0, 0, tz)</code>.</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox notranslate">translateZ(<var>tz</var>) +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code><var>tz</var></code></dt> + <dd>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.</dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Kartesische Koordinaten auf ℝ<sup>2</sup></th> + <th scope="col">Homogene Koordinaten auf ℝℙ<sup>2</sup></th> + <th scope="col">Kartesische Koordinaten auf ℝ<sup>3</sup></th> + <th scope="col">Homogene Koordinaten auf ℝℙ<sup>3</sup></th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="2" rowspan="2">Diese Transformation gilt für den 3D-Raum und kann nicht in der Ebene dargestellt werden.</td> + <td colspan="1" rowspan="2">Eine Verschiebung ist keine lineare Transformation in ℝ3 und kann nicht durch eine kartesische Koordinatenmatrix dargestellt werden.</td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">Beispiel</h2> + +<p>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.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><div>Static</div> +<div class="moved">Moved</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">div { + position: relative; + width: 60px; + height: 60px; + left: 100px; + background-color: skyblue; +} + +.moved { + transform: perspective(500px) translateZ(200px); + background-color: pink; +} +</pre> + +<p>Was hier wirklich wichtig ist, ist die Klasse "moved"; lassen Sie uns einen Blick darauf werfen, was sie tut. Zunächst positioniert die Funktion <a href="/de/docs/Web/CSS/transform-function/perspective">perspective()</a> den Betrachter relativ zu der Ebene, die bei z=0 liegt (im Wesentlichen die Oberfläche des Bildschirms). Ein Wert von <code>500px</code> bedeutet, dass sich der Benutzer 500 Pixel "vor" dem Bild befindet, das bei z=0 liegt.</p> + +<p>Dann verschiebt die Funktion <a href="/de/docs/Web/CSS/transform-function/translateZ()">translateZ()</a> 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.</p> + +<p>Beachten Sie, wenn der <code>perspective()</code>-Wert kleiner ist als der <code>translateZ()</code>-Wert, wie z.B. <code>transform: perspective(200px) translateZ(300px);</code> das transformierte Element wird nicht sichtbar sein, da es weiter als der Viewport des Benutzers ist. Je kleiner der Unterschied zwischen den Werten von <code>perspective()</code> und <code>translateZ()</code> ist, desto näher ist der Benutzer am Element und desto größer erscheint das übersetzte Element.</p> + +<h4 id="Ergebnis">Ergebnis</h4> + +<p>{{EmbedLiveSample("Examples", 250, 250)}}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS Transforms 2', '#transform-functions', 'transform')}}</td> + <td>{{Spec2('CSS Transforms 2')}}</td> + <td>Fügt eine 3D-Transformationsfunktion zum CSS Transform-Standard hinzu.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2> + +<div class="hidden">Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert. Wenn Sie zu den Daten beitragen möchten, besuchen Sie bitte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> und senden Sie uns eine Pull-Anfrage.</div> + +<p>{{Compat("css.types.transform-function")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/CSS/translate" title="Mit der CSS-Eigenschaft translate CSS können Sie Transformationen einzeln und unabhängig von der Eigenschaft 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."><code>translate</code></a></li> + <li><code><a href="/de/docs/Web/CSS/transform-function/translateX()">translateX()</a></code></li> + <li><code><a href="/de/docs/Web/CSS/transform-function/translateY()">translateY()</a></code></li> + <li><code><a href="/de/docs/Web/CSS/transform-function/translate3d()">translate3d()</a></code></li> + <li>{{cssxref("transform")}}</li> + <li>{{cssxref("<transform-function>")}}</li> +</ul> 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 +--- +<div>{{CSSRef}}</div> + +<p>Mit der <a href="/de/docs/Web/CSS">CSS</a>-Eigenschaft <strong><code>translate</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> 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.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: css no-line-numbers notranslate">/* Standardwert */ +translate: none; + +/* Einzelwert */ +translate: 100px; +translate: 50%; + +/* Zwei Werte */ +translate: 100px 200px; +translate: 50% 105px; + +/* Drei Werte */ +translate: 50% 105px 5rem; +</pre> + +<h3 id="Values">Values</h3> + +<dl> + <dt>Einzelwert {{cssxref("<length-percentage>")}}</dt> + <dd>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 <code>translate()</code> (2D-Übersetzung) mit zwei angegebenen Werten.</dd> + <dt>Zwei Werte {{cssxref("<length-percentage>")}}</dt> + <dd>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.</dd> + <dt>Drei Werte {{cssxref("<length-percentage>")}}</dt> + <dd>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).</dd> + <dt id="none"><code>none</code></dt> + <dd>Gibt an, dass keine Verschiebung angewendet werden soll.</dd> +</dl> + +<h2 id="Formale_Definition">Formale Definition</h2> + +<p>{{CSSInfo}}</p> + +<h2 id="Formale_Syntax">Formale Syntax</h2> + +<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre> + +<h2 id="Examples" name="Examples">Beispiel</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><div> + <p class="translate">Translation</p> +</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">* { + 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; +} +</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample('Examples')}}</p> + +<h2 id="Spezifikation">Spezifikation</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS Transforms 2', '#individual-transforms', 'individual transforms')}}</td> + <td>{{Spec2('CSS Transforms 2')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2> + +<div class="hidden">Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert. Wenn Sie zu den Daten beitragen möchten, besuchen Sie bitte <a href="Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert. Wenn Sie zu den Daten beitragen möchten, besuchen Sie bitte https://github.com/mdn/browser-compat-data und senden Sie uns eine Pull-Anfrage.">https://github.com/mdn/browser-compat-data</a> und senden Sie uns eine Pull-Anfrage.</div> + +<p>{{Compat("css.types.transform-function")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><code><a href="/de/docs/Web/CSS/transform-function/translateX">translateX()</a></code></li> + <li><code><a href="/de/docs/Web/CSS/transform-function/translateY">translateY()</a></code></li> + <li><code><a href="/de/docs/Web/CSS/transform-function/translateZ()">translateZ()</a></code></li> + <li><code><a href="/de/docs/Web/CSS/transform-function/translate3d()">translate3d()</a></code></li> + <li>{{cssxref('scale')}}</li> + <li>{{cssxref('rotate')}}</li> + <li>{{cssxref('transform')}}</li> +</ul> + +<p>Note: skew is not an independent transform value</p> 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 +--- +<p>Un anfitrión (del ingles <em>host</em>) 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.</p> + +<p>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".</p> + +<h2 id="Conozca_más">Conozca más</h2> + +<h3 id="Conocimiento_general">Conocimiento general</h3> + +<ul> + <li>{{interwiki("wikipedia", "Host")}} en la Wikipedia</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p>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".</p> + +<pre dir="ltr" id="tw-target-rmn"></pre> + + + +<h2 id="Description">Description</h2> + +<pre dir="ltr" id="tw-target-text">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.</pre> + +<pre class="brush: js notranslate">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 +</pre> + +<h2 id="Examples">Examples</h2> + +<h3 id="Displaying_the_constructor_of_an_object">Displaying the constructor of an object</h3> + +<p>The following example creates a constructor (<code>Tree</code>) and an object of that type (<code>theTree</code>). The example then displays the <code>constructor</code> property for the object <code>theTree</code>.</p> + +<pre class="brush: js notranslate">function Tree(name) { + this.name = name +} + +let theTree = new Tree('Redwood') +console.log('theTree.constructor is ' + theTree.constructor) +</pre> + +<p>This example displays the following output:</p> + +<pre class="brush: js notranslate">theTree.constructor is function Tree(name) { + this.name = name +} +</pre> + +<h3 id="Changing_the_constructor_of_an_object">Changing the constructor of an object</h3> + +<p>One can assign the <code>constructor</code> property for any value except <code>null</code> and <code>undefined</code> since those don't have a corresponding constructor function (like <code>String</code>, <code>Number</code>, <code>Boolean</code> 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 <code>null</code> and <code>undefined</code>) 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.</p> + +<pre class="brush: js notranslate">let val = null; +val.constructor = 1; //<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox-stackTrace reps-custom-format">TypeError: <span class="objectBox objectBox-string">var is null</span></span></span></span></span> + +<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox-stackTrace reps-custom-format"><span class="objectBox objectBox-string">val = 'abc';</span></span></span></span></span> +<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox-stackTrace reps-custom-format"><span class="objectBox objectBox-string">val.constructor = Number; //val.constructor === String</span></span></span></span></span> + +<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox-stackTrace reps-custom-format"><span class="objectBox objectBox-string">val.foo = 'bar';</span></span></span></span></span> //An implicit instance of <span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox-stackTrace reps-custom-format"><span class="objectBox objectBox-string">String('abc') was created and assigned the prop foo</span></span></span></span></span> +<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox-stackTrace reps-custom-format"><span class="objectBox objectBox-string">val.foo === undefined; //true, since a new instance of String('abc') was created for this comparison, which doesn't have the foo property</span></span></span></span></span></pre> + +<p>So basically one can change the value of the <code>constructor</code> property for anything, except the primitives mentioned above, <strong>note that changing the </strong><code>constructor</code><strong> property does not affect the instanceof operator</strong>:</p> + +<pre class="brush: js notranslate">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.</pre> + +<p>If the object is sealed/frozen then the change has no effect and no exception is thrown:</p> + +<pre class="brush: js notranslate">let a = Object.seal({}); +a.constructor = Number; +a.constructor === Object; //true</pre> + +<h3 id="Changing_the_constructor_of_a_function">Changing the constructor of a function</h3> + +<p>Mostly this property is used for defining a function as a <strong>function-constructor</strong> with further calling it with <strong>new</strong> and prototype-inherits chain.</p> + +<pre class="brush: js notranslate">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</pre> + +<p>But when do we need to perform the last line here? Unfortunately, the answer is: <em>it depends</em>.</p> + +<p>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.</p> + +<p>Take the following case: the object has the <code>create()</code> method to create itself.</p> + +<pre class="brush: js notranslate">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</pre> + +<p>In the example above the exception will be shown since the constructor links to Parent.</p> + +<p>To avoid this, just assign the necessary constructor you are going to use.</p> + +<pre class="brush: js notranslate">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</pre> + +<p>Ok, now it's pretty clear why changing the constructor can be useful.</p> + +<p>Let's consider one more case.</p> + +<pre class="brush: js notranslate">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 + } +};</pre> + +<p>For this example we need either to stay parent constructor to continue to work properly or reassign static properties to child's constructor:</p> + +<pre class="brush: js notranslate">... +Child = Object.assign(ParentWithStatic) // Notice that we assign it before we create(...) a prototype below +Child.prototype = Object.create(ParentWithStatic.prototype) +... +</pre> + +<p>or assign parent constructor identifier to a separate property on the Child constructor function and access it via that property:</p> + +<pre class="brush: js notranslate">... +Child.parentConstructor = ParentWithStatic +Child.prototype = Object.create(ParentWithStatic.prototype) +... + let startPosition = this.constructor.parentConstructor.getStartPosition() +... +</pre> + +<div class="blockIndicator note"> +<p><strong>Summary</strong>: Manually updating or setting the constructor can lead to differrent and sometimes confusing consequences. To prevent this, just define the role of <code>constructor</code> in each specific case. In most cases, <code>constructor</code> is not used and reassignment of it is not necessary.</p> +</div> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.prototype.constructor', 'Object.prototype.constructor')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.builtins.Object.constructor")}}</p> + +<h2 id="See_also">See also</h2> + +<div class="hidden"> +<p>The curly braces here invoke standard macroses defined by the MDN wiki. Checkout here for more info: <a href="/en-US/docs/MDN/Contribute/Structures/Macros/Commonly-used_macros">https://developer.mozilla.org/en-US/docs/MDN/Contribute/Structures/Macros/Commonly-used_macros</a></p> +</div> + +<ul> + <li>{{jsxref("statements/class","Class declaration","",1)}}</li> + <li>{{jsxref("Classes/constructor","Class constructor","",1)}}</li> + <li>Glossary: {{Glossary("constructor", "", 1)}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p><strong><code>format()</code></strong> メソッドは、リストの言語固有の表現を文字列で返します。</p> + +<div>{{EmbedInteractiveExample("pages/js/intl-listformat.html", "taller")}}</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><var>listFormat</var>.format([<var>list</var>])</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code><var>list</var></code></dt> + <dd>Array などの反復可能オブジェクトです。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>リストのすべての要素を表現する、言語に依存した文字列表現です。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p><strong><code>format()</code></strong> メソッドは、 <code>Intl.ListFormat</code> オブジェクトで提供された引数に基づいて書式化された文字列を返します。 <code>locales</code> と <code>options</code> 引数で <code>format()</code> の動作をカスタマイズし、アプリケーションがリストを書式化する言語の慣習を指定することができます。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Using_format" name="Using_format">format の使用</h3> + +<p>以下の例では、英語を使用したリストのフォーマッターの作り方を紹介します。</p> + +<pre class="brush: js notranslate">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 +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Intl.ListFormat', '#sec-Intl.ListFormat.prototype.format', 'format()')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.builtins.Intl.ListFormat.format")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("ListFormat", "Intl.ListFormat")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p>The <strong><code>Intl.ListFormat()</code></strong> コンストラクターは、言語に応じたリストの書式化を可能にするオブジェクトを生成します。</p> + +<div>{{EmbedInteractiveExample("pages/js/intl-listformat.html", "taller")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力していただける場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="notranslate">new Intl.ListFormat([<var>locales</var>[, <var>options</var>]])</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code><var>locales</var></code> {{optional_inline}}</dt> + <dd> + <p>BCP47 言語タグの文字列、または、そのような文字列の配列です。<code><var>locales</var></code> 引数の一般的な形式と解釈は、 {{jsxref("Global_Objects/Intl", "Intl", "#Locale_identification_and_negotiation", 1)}} のページをご覧ください。</p> + </dd> + <dt><code><var>options</var></code> {{optional_inline}}</dt> + <dd> + <p>以下のプロパティの一部またはすべてを持つオブジェクトです。</p> + + <dl> + <dt><code>localeMatcher</code></dt> + <dd>使用するロケール一致アルゴリズム。利用可能な値は <code>lookup</code> と <code>best fit</code> です。既定値は <code>best fit</code> です。このオプションについての詳細は、 {{jsxref("Global_Objects/Intl", "Intl のページ", "#Locale_negotiation", 1)}}をご覧ください。</dd> + <dt><code>type</code></dt> + <dd>出力メッセージの書式です。可能な値は "and" ベースのリストを表す <code>conjunction</code> (既定値、例えば <code>A, B, and C</code>)、または "or" ベースのリストを表す <code>disjunction</code> (例えば <code>A, B, or C</code>)、単位付きの値のリストを表す <code>unit</code> (例えば <code>5 pounds, 12 ounces</code>) です。</dd> + <dt><code>style</code></dt> + <dd>書式化されたメッセージの長さです。利用可能な値は、 <code>long</code> (既定値、例えば <code>A, B, and C</code>)、 <code>short</code> (例えば <code>A, B, C</code>)、 <code>narrow</code> (例えば <code>A B C</code>) です。 <code>style</code> が <code>short</code> または <code>narrow</code> であった場合、 type オプションには <code>unit</code> のみが許可されます。</dd> + </dl> + </dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Using_format" name="Using_format">format の使用</h3> + +<p>次の例では、英語を使用するリストのフォーマッターを生成する方法を示します。</p> + +<pre class="brush: js notranslate">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</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Intl.ListFormat', '#sec-intl-listformat-constructor', 'ListFormat()')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.builtins.Intl.ListFormat.ListFormat")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Intl")}}</li> +</ul> 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 +--- +<p>{{JSRef}}</p> + +<p><strong><code>Intl.ListFormat.supportedLocalesOf()</code></strong> メソッドは、ランタイムの既定のロケールで代替する必要なく日時の書式で対応されているものを含む配列を返します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">Intl.ListFormat.supportedLocalesOf(<var>locales</var>[, <var>options</var>])</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code><var>locales</var></code></dt> + <dd>BCP 47 言語タグを持つ文字列、またはそのような文字列の配列です。 <code>locales</code> 引数の一般的な形式については、 {{jsxref("Intl", "Intl のページ", "#Locale_identification_and_negotiation", 1)}}を参照してください。</dd> + <dt><code><var>options</var></code></dt> + <dd> + <p>省略可能です。以下のプロパティを持つことがあるオブジェクトです。</p> + + <dl> + <dt><code>localeMatcher</code></dt> + <dd>使用するロケールの一致アルゴリズムです。指定可能な値は <code>lookup</code> および <code>best fit</code> で、既定値は <code>best fit</code> です。このオプションの詳細は、 {{jsxref("Intl", "Intl のページ", "#Locale_negotiation", 1)}}を参照してください。</dd> + </dl> + </dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>指定したロケールタグのサブセットを表す文字列の配列で、ランタイムの既定のロケールで代替する必要なく日時の書式で対応されているものを含みます。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p><code>locales</code> で提供されている言語タグのサブセットを含む配列を返します。返される言語タグは、ランタイムが日時のロケールに対応しているもので、使用しているロケール一致アルゴリズムで一致しているとみなされているものです。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Using_supportedLocalesOf" name="Using_supportedLocalesOf">supportedLocalesOf() の使用</h3> + +<p>日時の書式でインドネシア語とドイツ語に対応しており、バリ語に対応していないランタイムを想定すると、 <code>supportedLocalesOf</code> はインドネシア語とドイツ語の言語タグを変更せずに返しますが、 pinyin の照合は日時の書式には関係なく、インドネシア語でも使用されません。ここでの <code>lookup</code> アルゴリズムの仕様に注意してください — バリ語話者のほとんどはインドネシア語も理解しているので、 <code>best fit</code> のマッチャーはインドネシア語がバリ語に適切に一致すると判断し、バリ語の言語タグも返すかもしれません。</p> + +<pre class="brush: js notranslate">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" +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Intl.ListFormat', '#sec-Intl.ListFormat.supportedLocalesOf', 'supportedLocalesOf()')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.builtins.Intl.ListFormat.supportedLocalesOf")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("ListFormat", "Intl.ListFormat")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p><strong><code>replaceAll()</code></strong> メソッドは、<code>pattern</code> にマッチしたすべての文字列を <code>replacement</code> で置き換えた新しい文字列を返します。<code>pattern</code> は文字列または {{jsxref("RegExp")}} を指定することができ、<code>replacement</code> は文字列または各マッチに対して呼び出される関数を指定することができます。</p> + +<p>元の文字列は変更されません。</p> + +<div>{{EmbedInteractiveExample("pages/js/string-replaceall.html")}}</div> + + + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">const newStr = <var>str</var>.replaceAll(<var>regexp</var>|<var>substr</var>, <var>newSubstr</var>|<var>function</var>) +</pre> + +<div class="blockIndicator note"> +<p>`<var>regexp</var>`を使用する場合は、グローバル("g")フラグを設定する必要があります。それ以外の場合は、<code>TypeError</code> が投げられます："replaceAll must be called with a global RegExp".</p> +</div> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code><var>regexp</var></code> (pattern)</dt> +<dd>グローバルフラグを持つ {{jsxref("RegExp")}} オブジェクトまたはリテラルです。マッチしたものは <code><var>newSubstr</var></code> または、指定された <code><var>function</var></code> によって返された値に置き換えられます。グローバル("g")フラグのない RegExp は <code>TypeError</code> を投げます："replaceAll must be called with a global RegExp".</dd> + + <dt><code><var>substr</var></code></dt> + <dd><code><var>newSubstr</var></code> で置き換えられる {{jsxref("String")}} です。これは文字列リテラルとして扱われ、正規表現として解釈されません。</dd> + + <dt><code><var>newSubstr</var></code> (replacement)</dt> + <dd><code><var>regexp</var></code> または <code><var>substr</var></code> で指定された部分文字列を置き換える {{jsxref("String")}} です。いくつかの特殊な置換パターンがサポートされています。下記の「<a href="#Specifying_a_string_as_a_parameter">引数としての文字列の指定</a>」セクションで説明しています。</dd> + + <dt><code><var>function</var></code> (replacement)</dt> + <dd>指定された <code><var>regexp</var></code> または <code><var>substr</var></code> のマッチを置き換えるために使用される、新しい部分文字列を生成するために呼び出される関数です。この関数に与えられる引数については、下記の「<a href="#Specifying_a_function_as_a_parameter">引数としての関数の指定</a>」セクションで説明しています。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">戻り値</h3> + +<p>パターンにマッチしたすべての文字列を置換文字列で置き換えた新しい文字列です。</p> + +<h2 id="Description" name="Description">説明</h2> + +<p>このメソッドは、呼び出し元の {{jsxref("String")}} オブジェクトを変更しません。戻り値として新しい文字列を返します。</p> + +<h3 id="Specifying_a_string_as_a_parameter" name="Specifying_a_string_as_a_parameter">引数としての文字列の指定</h3> + +<p>置換文字列には以下の特殊な置換パターンを含めることができます。</p> + +<table class="standard-table"> + <thead> + <tr> + <th class="header" scope="col">パターン</th> + <th class="header" scope="col">挿入</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>$$</code> </td> + <td><code>"$"</code> を挿入します。</td> + </tr> + <tr> + <td><code>$&</code></td> + <td>マッチした部分文字列を挿入します。</td> + </tr> + <tr> + <td><code>$`</code></td> + <td>マッチした部分文字列の直前の文字列の部分を挿入します。</td> + </tr> + <tr> + <td><code>$'</code></td> + <td> マッチした部分文字列の直後の文字列の部分を挿入します。</td> + </tr> + <tr> + <td><code>$<var>n</var></code></td> + <td><code><var>n</var></code> は 100 未満の正の整数です。第一引数が {{jsxref("RegExp")}} オブジェクトだった場合に <code><var>n</var></code> 番目の括弧でキャプチャされた文字列を挿入します。<code>1</code>, <code>2</code>, ... でインデックスされることに注意してください。</td> + </tr> + </tbody> +</table> + +<h3 id="Specifying_a_function_as_a_parameter" name="Specifying_a_function_as_a_parameter">引数としての関数の指定</h3> + +<p>第二引数として関数を指定することができます。このとき、関数はマッチが完了した後に実行されます。関数呼び出しの結果（返り値）は、置換文字列として使われます（<strong>注:</strong> 上記の特殊な置換パターンはこの場合には適用されません）。</p> + +<p>第一引数の正規表現がグローバルだと、置換されるべきマッチごとに関数が複数回実行されうることに注意してください。</p> + +<p>関数に与えられる引数は次の通りです。</p> + +<table class="standard-table"> + <thead> + <tr> + <th class="header" scope="col">名前</th> + <th class="header" scope="col">与えられる値</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>match</code> </td> + <td>マッチした部分文字列（上記の <code>$&</code> に対応）です。</td> + </tr> + <tr> + <td><code>p1, p2, ...</code></td> + <td><code>replace()</code> の第一引数が {{jsxref("RegExp")}} オブジェクトだった場合、<var>n</var> 番目の括弧でキャプチャされたグループの文字列（上記の <code>$1</code>, <code>$2</code>, などに対応）です。例えば <code>/(\a+)(\b+)/</code> が与えられた場合、<code>p1</code> は <code>\a+</code> に対するマッチ、<code>p2</code> は <code>\b+</code> に対するマッチとなります。</td> + </tr> + <tr> + <td><code>offset</code></td> + <td>マッチした部分文字列の、分析中の文字列全体の中でのオフセットです（例えば、文字列全体が <code>'abcd'</code> で、マッチした部分文字列が <code>'bc'</code> ならば、この引数は <code>1</code> となります）。</td> + </tr> + <tr> + <td><code>string</code></td> + <td>分析中の文字列全体です。</td> + </tr> + </tbody> +</table> + +<p>（引数の正確な個数は、第一引数が {{jsxref("RegExp")}} オブジェクトかどうか、そうならばさらに括弧でキャプチャされるサブマッチがいくつ指定されているかに依ります。）</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Using_replaceAll" name="Using_replaceAll">replaceAll の使用</h3> + +<pre class="brush: js notranslate">'aabbcc'.replaceAll('b', '.'); +// 'aa..cc'</pre> + +<h3 id="Non-global_regex_throws" name="Non-global_regex_throws">グローバルではない正規表現</h3> + +<p>正規表現フラグを使用する場合は、グローバルである必要があります。これは機能しません：</p> + +<pre class="brush: js; example-bad notranslate">'aabbcc'.replaceAll(/b/, '.'); +TypeError: replaceAll must be called with a global RegExp +</pre> + +<p>これは機能します：</p> + +<pre class="brush: js; example-good notranslate">'aabbcc'.replaceAll(/b/g, '.'); +"aa..cc" +</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.replaceall', 'String.prototype.replaceAll')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.String.replaceAll")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("String.prototype.replace", "String.prototype.replace()")}}</li> + <li>{{jsxref("String.prototype.match", "String.prototype.match()")}}</li> + <li>{{jsxref("RegExp.prototype.exec", "RegExp.prototype.exec()")}}</li> + <li>{{jsxref("RegExp.prototype.test", "RegExp.prototype.test()")}}</li> +</ul> diff --git a/files/ko/learn/javascript/objects/얼마나_이해했는지_확인해보자_colon__json/index.html b/files/ko/learn/javascript/objects/얼마나_이해했는지_확인해보자_colon__json/index.html new file mode 100644 index 0000000000..526779b577 --- /dev/null +++ b/files/ko/learn/javascript/objects/얼마나_이해했는지_확인해보자_colon__json/index.html @@ -0,0 +1,65 @@ +--- +title: '얼마나 이해했는지 확인해보자: JSON' +slug: 'Learn/JavaScript/Objects/얼마나_이해했는지_확인해보자:_JSON' +translation_of: 'Learn/JavaScript/Objects/Test_your_skills:_JSON' +--- +<div>{{learnsidebar}}</div> + +<p>이 테스트의 목표는 <a href="https://wiki.developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/JSON">JSON으로 작업하기</a>를 잘 이해했는지 평가해보는 것입니다.</p> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: 아래에 있는 편집기를 사용해보세요. 테스트 중 막히면, 도움을 요청할 수 있습니다. 페이지 하단의 "평가 또는 추가 도움말" 을 참고하세요.</p> +</div> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: 작성한 코드에 오류가 발생하는 경우, 결과창에서 정답을 알아낼 수 있도록 돕기 위해 결과값을 보여줄 것입니다. (또는 브라우저의 자바스크립트 콘솔로도 확인 가능합니다.)</p> +</div> + +<h2 id="JSON_1">JSON 1</h2> + +<p>이번에 수행할 유일한 과제는 JSON 데이터에 접근하고 사용해보는 것입니다. 어미 고양이들과 그들의 새끼 고양이에 관한 JSON 데이터는 <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/tasks/json/sample.json">sample.json</a>에서 확인할 수 있습니다. 이 JSON은 텍스트 문자열로 호출되며, 제시된 프로미스 체인(JSON 데이터를 가져오는 것으로 시작)의 조건을 만족시킬 때 <code>displayCatInfo()</code> 함수의 <code>catString</code> 파라미터로 사용될 수 있습니다.</p> + +<ul> +</ul> + +<ul> + <li><code>motherInfo</code> 의 변수 : 쉼표로 나뉘어진 세 어미 고양이의 이름 </li> + <li><code>kittenInfo</code> 의 변수 : 새끼 고양이의 전체 마릿수, 수컷 수, 암컷 수 </li> +</ul> + +<p>변수들의 값은 문단 내부의 화면에 출력됩니다.</p> + +<p>몇 가지 힌트/질문:</p> + +<ul> + <li>JSON 데이터는 <code>displayCatInfo()</code> 함수 내부에 텍스트로 제공됩니다. 데이터를 얻기 위해서는 JSON 구문을 분석해야 합니다.</li> + <li>아마도 outer loop를 사용해 반복하여 고양이와 그들의 이름을 <code>motherInfo</code> 의 변수에 추가하고, inner loop 를 사용해 모든 새끼 고양이들, 총/수컷/암컷 마릿수를 <code>kittenInfo</code> 의 변수에 추가하려고 할 것입니다.</li> + <li>마지막에 오는 어미 고양이 이름 전에는 "and"가 와야하며, 그 뒤에 작업이 완전히 멈춰야 합니다. JSON에 고양이가 무수히 많이 오더라도 작업이 잘 이뤄질꺼라고 확신할 수 있으십니까?</li> + <li> <code>para1.textContent = motherInfo;</code> 과 <code>para2.textContent = kittenInfo;</code> 는 왜 <code>displayCatInfo()</code> 함수의 내부에 있어야 하며, 스크립트 마지막에 오지 않는 것일까요? 이것은 비동기와 관련이 있습니다.</li> +</ul> + +<p>완료된 예제를 다시 만드려면, 아래 코드를 변경해보세요:</p> + +<p>{{EmbedGHLiveSample("learning-area/javascript/oojs/tasks/json/json1.html", '100%', 400)}}</p> + +<div class="blockIndicator warning"> +<p><strong>Warning</strong>: 이번 테스트를 치를 때 코드를 위에 있는 편집기에 작성하세요. 로컬환경이나 CodePen 또는 JSFiddle 에서는 이 예제가 작동하지 않을 수 있는데, <em>cross-origin</em> 라고 불리는 보안정책 때문일 것입니다. 이는 현재 환경과 다른 출처의 리소스의 요청을 제한하는 정책입니다. 위 편집기는 자바스크립트 코드와 요청된 JSON 파일을 모두 동일한 출처에서 요청하고 있습니다. (Github 저장소의 <iframe>에 내장되어 있습니다.) 하지만 예를 들어 CodePen에 기입하는 코드는 JSON을 호출하는 출처와는 다르기 때문에 오류가 발생할 수 있습니다. CORS를 사용하여 이런 제약사항을 해결할 수 있지만, 이번 장에서 가르치는 범위에는 해당하지 않습니다.</p> +</div> + +<h2 id="평가_또는_추가_도움말">평가 또는 추가 도움말</h2> + +<p>위에 있는 편집기를 이용해 예제를 연습해볼 수 있습니다.</p> + +<p>만일 작업을 평가하고나, 막혀서 도움을 요청하고 싶다면:</p> + +<ol> + <li><a href="https://discourse.mozilla.org/c/mdn/learn/250">MDN 학습 토론 카테고리</a>에 평가 또는 도움을 요청하는 글을 작성하세요. 글에는 다음 사항이 포함되어야 합니다 : + + <ul> + <li>"Assessment wanted for JSON skill test (JSON 기술 테스트에 대한 평가를 요청드립니다)" 와 같은 제목을 사용하세요.</li> + <li>이미 시도해보았거나, 원하는 것(예를 들어, 막혀서 도움이 필요하다거나 평가가 필요하다는 것과 같은)에 대한 세부사항을 기입해주세요.</li> + <li>작성한 코드를 삽입하세요.</li> + <li>실제 작업 또는 평가 페이지에 대한 링크를 삽입하세요. 그래야 도움받고자 하는 질문을 확인할 수 있습니다.</li> + </ul> + </li> +</ol> 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 +--- +<div>{{APIRef}}</div> + +<p><strong><code>select</code></strong> 이벤트는 어떤 텍스트가 선택되었을 때 발생됩니다.</p> + +<table class="properties"> + <tbody> + <tr> + <th>Bubbles</th> + <td>Yes</td> + </tr> + <tr> + <th>Cancelable</th> + <td>No</td> + </tr> + <tr> + <th>Interface</th> + <td>유저 인터페이스로부터 발생된 경우 {{domxref("UIEvent")}}, 아니라면 {{domxref("Event")}}</td> + </tr> + <tr> + <th>Event handler property</th> + <td>{{domxref("GlobalEventHandlers.onselect", "onselect")}}</td> + </tr> + </tbody> +</table> + +<p>The event is not available for all elements in all languages. For example, in HTML, <code>select</code> events can be dispatched only on form <code>{{HtmlElement('input/text', '<input type="text">')}}</code> and {{HtmlElement("textarea")}} elements.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Selection_logger">Selection logger</h3> + +<pre class="brush: html notranslate"><input value="Try selecting some text in this element."> +<p id="log"></p></pre> + +<pre class="brush: js notranslate">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);</pre> + +<p>{{EmbedLiveSample("Selection_logger")}}</p> + +<h3 id="onselect_equivalent">onselect equivalent</h3> + +<p>You can also set up the event handler using the {{domxref("GlobalEventHandlers.onselect", "onselect")}} property:</p> + +<pre class="brush: js notranslate">input.onselect = logSelection;</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('UI Events', '#event-type-select', 'select')}}</td> + <td>{{Spec2('UI Events')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{Compat("api.Element.select_event")}}</p> diff --git a/files/ru/learn/html/multimedia_and_embedding/изображения_в_html/проверьте_свои_знания_colon__изображения_в_html/index.html b/files/ru/learn/html/multimedia_and_embedding/изображения_в_html/проверьте_свои_знания_colon__изображения_в_html/index.html new file mode 100644 index 0000000000..e00777dabe --- /dev/null +++ b/files/ru/learn/html/multimedia_and_embedding/изображения_в_html/проверьте_свои_знания_colon__изображения_в_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 +--- +<div>{{learnsidebar}}</div> + +<p>Цель этого теста навыков - оценить, поняли ли вы нашу статью <a href="/ru/docs/Learn/HTML/Multimedia_and_embedding/Изображения_в_HTML">Изображения в HTML</a>.</p> + +<div class="blockIndicator note"> +<p><strong>Примечание</strong>: Вы можете опробовать решения в интерактивных редакторах ниже, однако может быть полезно загрузить код и использовать онлайн-инструмент, такой как <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a> или <a href="https://glitch.com/">Glitch</a> для работы с задачами.</p> +</div> + +<h2 id="Изображения_в_HTML_№1">Изображения в HTML №1</h2> + +<p>В этой задаче мы хотим, чтобы вы вставили на страницу простое изображение ягоды черники. Вам необходимо:</p> + +<ul> + <li>Добавьте путь к изображению в соответствующий атрибут, чтобы встроить его на страницу. Изображение называется <code>blueberries.jpg</code> и оно находится в папке с именем <code>images</code> внутри текущей папки.</li> + <li>Добавьте альтернативный текст к соответствующему атрибуту, чтобы описать изображение для людей, которые его не видят.</li> + <li>Дайте элементу <code><img></code> соответствующие значения <code>width</code> и <code>height</code> чтобы он отображался с правильным соотношением сторон и достаточно места на странице для отображения. Размер изображения 615 x 419 пикселей.</li> +</ul> + +<p>Попробуйте обновить живой код ниже, чтобы воссоздать готовый пример:</p> + +<p>{{EmbedGHLiveSample("learning-area/html/multimedia-and-embedding/tasks/images/images1.html", '100%', 700)}}</p> + +<div class="blockIndicator note"> +<p><a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/tasks/images/images1-download.html">Загрузите файл</a> для этой задачи, чтобы работать в вашем редакторе или в онлайн-редакторе.</p> +</div> + +<h2 id="Изображения_в_HTML_№2">Изображения в HTML №2</h2> + +<p>В этой задаче у вас уже есть полнофункциональное изображение, но мы хотели бы, чтобы вы добавили всплывающую подсказку, которая появляется при наведении курсора на изображение. Вы должны ввести некоторую соответствующую информацию во всплывающую подсказку.</p> + +<p>Попробуйте обновить живой код ниже, чтобы воссоздать законченный пример:</p> + +<p>{{EmbedGHLiveSample("learning-area/html/multimedia-and-embedding/tasks/images/images2.html", '100%', 700)}}</p> + +<div class="blockIndicator note"> +<p><a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/tasks/images/images2-download.html">Загрузите файл</a> для этой задачи, чтобы работать в вашем редакторе или в онлайн-редакторе.</p> +</div> + +<h2 id="Изображения_в_HTML_№3">Изображения в HTML №3</h2> + +<p>В этой последней задаче вам предоставляется как полнофункциональное изображение, так и текст заголовка. Здесь вам нужно добавить элементы, которые будут связывать изображение с его заголовком.</p> + +<p>Попробуйте обновить живой код ниже, чтобы воссоздать готовый пример:</p> + +<p>{{EmbedGHLiveSample("learning-area/html/multimedia-and-embedding/tasks/images/images3.html", '100%', 700)}}</p> + +<div class="blockIndicator note"> +<p><a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/tasks/images/images3-download.html">Загрузите файл</a> для этой задачи, чтобы работать в вашем редакторе или в онлайн-редакторе.</p> +</div> + +<h2 id="Оценка_или_дополнительная_помощь">Оценка или дополнительная помощь</h2> + +<p>Вы можете попрактиковаться с этими примерами в интерактивных редакторах выше.</p> + +<p>Если вы хотите, чтобы ваша работа была оценена, или если вы застряли и хотите обратиться за помощью:</p> + +<ol> + <li>Поместите свою работу в онлайн-редактор, например <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a> или <a href="https://glitch.com/">Glitch</a>. Вы можете написать код самостоятельно или использовать файлы, ссылки на которые приведены в приведенных выше разделах.</li> + <li>Напишите сообщение с просьбой об оценке и / или помощи в <a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a>. Ваш пост должен включать: + <ul> + <li>Описательный заголовок, например "Требуется оценка для проверки навыков 1 по основам изображений HTML".</li> + <li>Подробная информация о том, что вы уже пробовали, и что бы вы хотели, чтобы мы сделали, например если вы застряли и нуждаетесь в помощи или хотите пройти оценку.</li> + <li>Ссылка на пример, который вы хотите оценить или с которым вам нужна помощь, в онлайн-редакторе (как указано в шаге 1 выше). Это хорошая практика - очень сложно помочь кому-то с проблемой кодирования, если вы не видите его код.</li> + <li>Ссылка на страницу фактического задания или оценки, чтобы мы могли найти вопрос, в котором вам нужна помощь.</li> + </ul> + </li> +</ol> 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 +--- +<p>{{HTMLSidebar}}</p> + +<p>Атрибут <strong><code>pattern</code></strong> определяет <a href="/ru/docs/Web/JavaScript/Guide/Regular_Expressions">регулярное выражение</a>, которому должно соответствовать значение элемента формы. Если ненулевое значение не соответствует ограничениям, установленным в <code>pattern</code>, доступное только для чтения свойство {{domxref('ValidityState.patternMismatch','patternMismatch')}} объекта {{domxref('ValidityState')}} будет истинным.</p> + +<p>Атрибут <code>pattern</code> является атрибутом для полей ввода с типом {{HTMLElement("input/text", "text")}}, {{HTMLElement("input/tel", "tel")}}, {{HTMLElement("input/email", "email")}}, {{HTMLElement("input/url", "url")}}, {{HTMLElement("input/password", "password")}}, и {{HTMLElement("input/search", "search")}}.</p> + +<div id="pattern-include"> +<p>The <code>pattern</code> attribute, when specified, is a regular expression which the input's {{htmlattrxref("value")}} must match in order for the value to pass <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a>. It must be a valid JavaScript regular expression, as used by the {{jsxref("RegExp")}} type, and as documented in our <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">guide on regular expressions</a>; the <code>'u'</code> 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.</p> + +<p>If the specified pattern is not specified or is invalid, no regular expression is applied and this attribute is ignored.</p> + +<div class="note"> +<p><strong>Tip:</strong> 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 <strong>must not</strong> rely on the tooltip alone for an explanation. See below for more information on usability.</p> +</div> +</div> + +<p>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.</p> + +<h3 id="Usability">Usability</h3> + +<p>When including a <code>pattern</code>, provide a description of the pattern in visible text near the control. Additionally, include a <code><a href="/en-US/docs/Web/HTML/Global_attributes/title">title</a></code> 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.</p> + +<h3 id="Constraint_validation">Constraint validation</h3> + +<p>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')}}.<br> + 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 <code>^(?:</code> were implied at the start of the pattern and <code>)$</code> at the end.</p> + +<h2 id="Examples">Examples</h2> + +<p>Given the following:</p> + +<div id="example1"> +<pre class="brush: html notranslate"><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></pre> + +<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 <code><a href="/en-US/docs/Web/HTML/Attributes/pattern">pattern</a></code> attribute set on each.</p> + +<p>If the values are too long or too short, or contain characters that aren't digits, the patternMismatch will be true. When <code>true</code>, the element matches the {{cssxref(":invalid")}} CSS pseudo-classes.</p> + +<pre class="brush: css notranslate">input:invalid { + border: red solid 3px; +}</pre> + +<p>{{EmbedLiveSample("example1", 300, 40)}}</p> +</div> + +<p>Had we used <code><a href="/en-US/docs/Web/HTML/Attributes/minlength">minlength</a></code> and <code><a href="/en-US/docs/Web/HTML/Attributes/maxlength">maxlength</a></code> attributes instead, we may have seen {{domxref('validityState.tooLong')}} or {{domxref('validityState.tooShort')}} being true.</p> + +<h3 id="Specifying_a_pattern">Specifying a pattern</h3> + +<p>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 <a href="/en-US/docs/Learn/HTML/Forms/Form_validation#Validating_against_a_regular_expression">Validating against a regular expression</a> for a simple crash course on using regular expressions to validate inputs).</p> + +<p>The example below restricts the value to 4-8 characters and requires that it contain only lower-case letters.</p> + +<pre class="brush: html notranslate"><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></pre> + +<div class="hidden"> +<pre class="brush: css notranslate">div { + margin-bottom: 10px; + position: relative; +} + +p { + font-size: 80%; + color: #999; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; +}</pre> +</div> + +<p>This renders like so:</p> + +<p>{{ EmbedLiveSample('Specifying_a_pattern', 600, 110) }}</p> + +<h3 id="Accessibility_Concerns">Accessibility Concerns</h3> + +<p>When a control has a <code>pattern</code> attribute, the <code>title</code> attribute, if used, must describe the pattern. Relying on the <code>title</code> 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.</p> + +<p>While <code>title</code>s 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.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('HTML WHATWG', 'forms.html#attr-input-pattern', 'pattern') }}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{ SpecName('HTML5.1', 'forms.html#attr-input-pattern', 'pattern') }}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{ SpecName('HTML5 W3C', 'forms.html#attr-input-pattern', 'pattern') }}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("html.elements.attributes.pattern")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">Constraint validation</a></li> + <li><a href="/en-US/docs/Web/Guide/HTML/Forms/Data_form_validation">Forms: Data form validation</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">Regular Expressions</a></li> +</ul> 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: <mover> +slug: Web/MathML/Element/mover +tags: + - MathML + - MathML Reference + - 'MathML:Element' + - 'MathML:Script and Limit Schemata' + - Справка по MathML + - Элемент MathML +translation_of: Web/MathML/Element/mover +--- +<div>{{MathMLRef}}</div> + +<p class="summary">Элемент <code><mover></code> языка разметки MathML <span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>используется для добавления акцента или ограничения на выражение</span></span></span>. Используйте синтаксис: <code><mover></code><code><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>базовый надстрочный символ</span></span></span></mover></code></p> + +<h2 id="Атрибуты">Атрибуты</h2> + +<dl> + <dt id="attr-accent">accent</dt> + <dd>Если установлено <code>true</code>, то <span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>over-script - это <em>акцент</em>, приближенный к базовому выражению.</span></span></span><br> + Если установлено <code>false</code> (по умолчанию) over-script <span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>это <em>ограничение</em> по базовому выражению.</span></span></span></dd> + <dt id="attr-align">align {{deprecated_inline}}</dt> + <dd><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Выравнивание над сценарием.</span></span></span> Возможные значения: <code>left</code>, <code>center</code>, и <code>right</code>.<br> + <span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Этот атрибут устарел и будет удален в будущем</span></span></span>. Вместо этого используйте CSS <code><a href="https://developer.mozilla.org/ru/docs/Web/CSS/text-align">text-align</a></code>.</dd> + <dt id="attr-class-id-style">class, id, style</dt> + <dd><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Предусмотрено для использования с</span></span></span> <a href="/ru/docs/Web/CSS">таблицами стилей</a>.</dd> + <dt id="attr-displaystyle"><code>displaystyle</code></dt> + <dd><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Логическое значение, определяющее, используется ли больше вертикального пространства для отображаемых уравнений или, если установлено значение</span></span></span> <code>false</code>, <span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>используется более компактный макет для отображения формул</span></span></span>. <span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Основной эффект заключается в том, что отображаются более крупные версии операторов, когда</span></span></span> <code>displaystyle</code> установлено в <code>true</code>. Смотри также <code>largeop</code> и <code>movablelimits</code> для {{ MathMLElement("mo") }}.</dd> + <dt id="attr-href">href</dt> + <dd><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Используется для установки гиперссылки на указанный URI.</span></span></span></dd> + <dt id="attr-mathbackground">mathbackground</dt> + <dd>Цвет фона. Возможно использование <code>#rgb</code>, <code>#rrggbb</code> и <a href="/ru/docs/Web/CSS/color_value">имён цветов HTML</a>.</dd> + <dt id="attr-mathcolor">mathcolor</dt> + <dd>Цвет текста. Возможно использование <code>#rgb</code>, <code>#rrggbb</code> и <a href="/ru/docs/Web/CSS/color_value">имён цветов HTML</a>.</dd> +</dl> + +<h2 id="Примеры">Примеры</h2> + +<p>Образец: <img alt="x+y+z" src="/files/3196/mover.png" style="margin-left: 10px; vertical-align: middle;"></p> + +<p>Отображение в вашем браузере: <math> <mover accent="true"> <mrow> <mi> x </mi> <mo> + </mo> <mi> y </mi> <mo> + </mo> <mi> z </mi> </mrow> <mo> ⏞ </mo> </mover> </math></p> + +<pre class="brush: html notranslate"><math> + +<mover accent="true"> + <mrow> + <mi> x </mi> + <mo> + </mo> + <mi> y </mi> + <mo> + </mo> + <mi> z </mi> + </mrow> + <mo> &#x23DE; <!-- Верхняя фигурная скобка --> </mo> +</mover> + +</math> +</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("MathMLCore", "#underscripts-and-overscripts-munder-mover-munderover", "mover")}}</td> + <td>{{Spec2("MathMLCore")}}</td> + <td>Проект спецификации</td> + </tr> + <tr> + <td>{{ SpecName('MathML3', 'chapter3.html#presm.mover', 'mover') }}</td> + <td>{{ Spec2('MathML3') }}</td> + <td>Текущая спецификация</td> + </tr> + <tr> + <td>{{ SpecName('MathML2', 'chapter3.html#presm.mover', 'mover') }}</td> + <td>{{ Spec2('MathML2') }}</td> + <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Начальная спецификация</span></span></span></td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + + + +<p>{{Compat("mathml.elements.mover")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{ MathMLElement("munder") }} (Underscript)</li> + <li>{{ MathMLElement("munderover") }} (Underscript-overscript pair)</li> +</ul> diff --git a/files/ru/web/mathml/атрибут/index.html b/files/ru/web/mathml/атрибут/index.html new file mode 100644 index 0000000000..1c99572a49 --- /dev/null +++ b/files/ru/web/mathml/атрибут/index.html @@ -0,0 +1,484 @@ +--- +title: Справка по атрибутам MathML +slug: Web/MathML/Атрибут +tags: + - MathML + - MathML Reference + - Справка по MathML +translation_of: Web/MathML/Attribute +--- +<div>{{MathMLRef}}</div> + +<p>Ниже приведён список атрибутов MathML в алфавитном порядке. Более подробная информация о каждом атрибуте доступна на <a href="/ru/docs/Web/MathML/Element" title="/en-US/docs/MathML/Element">странице элементов</a>.</p> + +<p>Примечания:</p> + +<ul> + <li>Элементы MathML {{ MathMLElement("mstyle") }} и {{ MathMLElement("math") }} {{ gecko_minversion_inline("7.0") }} принимают все атрибуты MathML.</li> + <li>Смотри <a href="/en-US/docs/MathML/Attributes/Values" title="/en-US/docs/MathML/Attributes/Values">примечания</a> к значениям и единицам измерения в MathML.</li> + <li>Атрибуты <code>background</code>, <code>color</code>, <code>fontfamily</code>, <code>fontsize</code>, <code>fontstyle</code>, <code>fontweight</code> и <code>xlink:href</code> являются устаревшими.</li> + <li><a href="/en-US/docs/Glossary/XLink">XLink</a> атрибуты для элементов MathML: <code>xlink:actuate</code>, <code>xlink:href</code>, <code>xlink:show</code> и <code>xlink:type</code> также устарели.</li> +</ul> + +<table class="standard-table"> + <thead> + <tr> + <th>Название</th> + <th>Элементы, принимающие атрибут</th> + <th>Описание</th> + </tr> + </thead> + <tbody> + <tr id="accent"> + <td><code>accent</code></td> + <td>{{ MathMLElement("mo") }}, {{ MathMLElement("mover") }}, {{ MathMLElement("munderover") }}</td> + <td>Логическое значение, определяющее, нужно ли оператор рассматривать как акцент.</td> + </tr> + <tr id="accentunder"> + <td><code>accentunder</code></td> + <td>{{ MathMLElement("munder") }}, {{ MathMLElement("munderover") }}</td> + <td>Логическое значение, определяющее, нужно ли оператор рассматривать как акцент.</td> + </tr> + <tr id="actiontype"> + <td><code>actiontype</code></td> + <td>{{ MathMLElement("maction") }}</td> + <td>Строковое значение, определяющее выполняемое для этого элемента действие.</td> + </tr> + <tr id="align"> + <td><code>align</code> {{deprecated_inline}}</td> + <td>{{ MathMLElement("mtable") }}<br> + {{ MathMLElement("munder") }}, {{ MathMLElement("mover") }}, {{ MathMLElement("munderover") }}<br> + {{ MathMLElement("mstack") }}</td> + <td>Задаёт различное выравнивание нескольких элементов (смотри подробности на страницах с элементами).</td> + </tr> + <tr id="alignmentscope"> + <td>{{ unimplemented_inline() }} <code>alignmentscope</code></td> + <td>{{ MathMLElement("mtable") }}</td> + <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Логическое значение, указывающее, должны ли столбцы таблицы действовать как области выравнивания или нет.</span></span></span></td> + </tr> + <tr id="alt-*"> + <td>{{ unimplemented_inline() }}<br> + <code>altimg</code><br> + <code>altimg-width</code><br> + <code>altimg-height</code><br> + <code>altimg-valign</code><br> + <code>alttext</code></td> + <td>{{ MathMLElement("math") }}</td> + <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Визуальные и текстовые варианты отката.</span></span></span></td> + </tr> + <tr id="bevelled"> + <td><code>bevelled</code> {{deprecated_inline}}</td> + <td>{{ MathMLElement("mfrac") }}</td> + <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Задаёт стиль отображения дроби.</span></span> <span class="ChMk0b JLqJ4b"><span>Не рекомендуется.</span></span> <span class="ChMk0b JLqJ4b"><span>Вместо этого используйте U+2044 (дробная косая черта).</span></span></span></td> + </tr> + <tr id="charalign"> + <td>{{ unimplemented_inline() }} <code>charalign</code></td> + <td>{{ MathMLElement("mstack") }}</td> + <td>Определяет горизонтальное выравнивание цифр.</td> + </tr> + <tr id="close"> + <td><code>close</code></td> + <td>{{ MathMLElement("mfenced") }}</td> + <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Строка закрывающего разделителя.</span></span></span></td> + </tr> + <tr id="columnalign"> + <td><code>columnalign</code></td> + <td>{{ MathMLElement("mtable") }}, {{ MathMLElement("mtd") }}, {{ MathMLElement("mtr") }}, {{ MathMLElement("mlabeledtr") }}</td> + <td>Определяет горизонтальное выравнивание клеток таблицы.</td> + </tr> + <tr id="columnlines"> + <td><code>columnlines</code></td> + <td>{{ MathMLElement("mtable") }}</td> + <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Задаёт границы столбца таблицы.</span></span></span></td> + </tr> + <tr id="columnspacing"> + <td><code>columnspacing</code></td> + <td>{{ MathMLElement("mtable") }}</td> + <td>Задаёт пространство между колонками таблицы.</td> + </tr> + <tr id="columnspan"> + <td><code>columnspan</code></td> + <td>{{ MathMLElement("mtd") }}</td> + <td>Неотрицательное целое число, <span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>указывающее, на сколько столбцов таблицы распространяется ячейка.</span></span></span></td> + </tr> + <tr id="columnwidth"> + <td>{{ unimplemented_inline() }} <code>columnwidth</code></td> + <td>{{ MathMLElement("mtable") }}</td> + <td>Задаёт ширину колонок таблицы.</td> + </tr> + <tr id="crossout"> + <td>{{ unimplemented_inline() }} <code>crossout</code></td> + <td>{{ MathMLElement("mscarry") }}</td> + <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Указывает, какая линия проводится для пересечения переносчиков.</span></span></span></td> + </tr> + <tr id="decimalpoint"> + <td>{{ unimplemented_inline() }} <code>decimalpoint</code></td> + <td>{{ MathMLElement("mstyle") }}</td> + <td>Если значение <code>decimalpoint</code> используется для указания <a href="#">выравнивания</a>, <span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>этот атрибут определяет символ для точки внутри</span></span></span> {{ MathMLElement("mstack") }} и {{ MathMLElement("mtable") }} колонок.</td> + </tr> + <tr id="denomalign"> + <td><code>denomalign</code> {{deprecated_inline}}</td> + <td>{{ MathMLElement("mfrac") }}</td> + <td>Выравнивание знаменателя под дробью.</td> + </tr> + <tr id="depth"> + <td><code>depth</code></td> + <td>{{ MathMLElement("mpadded") }}</td> + <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Устанавливает или увеличивает глубину.</span></span> </span>Смотри <a href="/en-US/docs/MathML/Attributes/Values" title="/en-US/docs/MathML/Attributes/Values">длины</a>.</td> + </tr> + <tr id="dir"> + <td><code>dir</code></td> + <td>{{ MathMLElement("math") }}, {{ MathMLElement("mi") }}, {{ MathMLElement("mo") }}, {{ MathMLElement("mrow") }}, {{ MathMLElement("ms") }}, {{ MathMLElement("mtext") }}</td> + <td>Направление текста. Возможны значения <code>ltr</code> (слева направо) или <code>rtl</code> (справа налево).</td> + </tr> + <tr id="display"> + <td><code>display</code></td> + <td>{{ MathMLElement("math") }}</td> + <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Задает режим визуализации.</span></span></span> Допускаются значения <code>block</code> и <code>inline</code>.</td> + </tr> + <tr id="displaystyle"> + <td><code>displaystyle</code></td> + <td><em>All</em></td> + <td> + <p><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Логическое значение, указывающее, используется ли больше вертикального пространства для отображаемых уравнений или, если установлено значение</span></span></span> <code>false</code>, <span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>для отображения формул используется более компактный макет.</span></span></span></p> + + <p><em>В MathML 3 этот атрибут был действителен только на {{ MathMLElement("mstyle") }}, {{ MathMLElement("mtable") }}, и {{ MathMLElement("math") }}.</em></p> + </td> + </tr> + <tr id="edge"> + <td>{{ unimplemented_inline() }} <code>edge</code></td> + <td>{{ MathMLElement("malignmark") }}</td> + <td></td> + </tr> + <tr id="equalcolumns"> + <td>{{ unimplemented_inline() }} <code>equalcolumns</code></td> + <td>{{ MathMLElement("mtable") }}</td> + <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Логическое значение, указывающее, следует ли принудительно задавать для всех столбцов одинаковую общую высоту.</span></span></span></td> + </tr> + <tr id="equalrows"> + <td>{{ unimplemented_inline() }} <code>equalrows</code></td> + <td>{{ MathMLElement("mtable") }}</td> + <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Логическое значение, указывающее, принудить ли все строки иметь одинаковую общую высоту.</span></span></span></td> + </tr> + <tr id="fence"> + <td><code>fence</code></td> + <td>{{ MathMLElement("mo") }}</td> + <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Логическое значение, определяющее, является ли оператор ограждающим (например, круглые скобки).</span></span> <span class="ChMk0b JLqJ4b"><span>Для этого атрибута нет визуального эффекта.</span></span></span></td> + </tr> + <tr id="form"> + <td>{{ unimplemented_inline() }} <code>form</code></td> + <td>{{ MathMLElement("mo") }}</td> + <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Задает роль оператора во вложенном выражении.</span></span></span></td> + </tr> + <tr id="frame"> + <td><code>frame</code></td> + <td>{{ MathMLElement("mtable") }}</td> + <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Определяет границы всего</span></span></span> {{ MathMLElement("mtable") }}. Возможные значения: <code>none</code> (по умолчанию), <code>solid</code> и <code>dashed</code>.</td> + </tr> + <tr id="framespacing"> + <td><code>framespacing</code></td> + <td>{{ MathMLElement("mtable") }}</td> + <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Задает дополнительное пространство, добавленное между таблицей и</span></span></span> <code>frame</code>.</td> + </tr> + <tr id="groupalign"> + <td>{{ unimplemented_inline() }} <code>groupalign</code></td> + <td>{{ MathMLElement("maligngroup") }}, {{ MathMLElement("mtable") }}, {{ MathMLElement("mtd") }}, {{ MathMLElement("mtr") }}</td> + <td></td> + </tr> + <tr id="height"> + <td><code>height</code></td> + <td>{{ MathMLElement("mglyph") }}, {{ MathMLElement("mpadded") }}, {{ MathMLElement("mspace") }}</td> + <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Задает желаемую высоту.</span></span></span> Для возможных значений смотри <a href="/en-US/docs/MathML/Attributes/Values#Lengths" title="/en-US/docs/MathML/Attributes/Values#Lengths">длины</a>.</td> + </tr> + <tr id="href"> + <td><code>href</code></td> + <td><em>All</em></td> + <td>Используется для создания гиперссылки к заданному URI.</td> + </tr> + <tr id="id"> + <td><code>id</code></td> + <td><em>All</em></td> + <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Устанавливает уникальный идентификатор, связанный с элементом.</span></span></span></td> + </tr> + <tr id="indentalign"> + <td>{{ unimplemented_inline() }} <code>indentalign</code></td> + <td>{{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }}</td> + <td></td> + </tr> + <tr id="indentalignfirst"> + <td>{{ unimplemented_inline() }} <code>indentalignfirst</code></td> + <td>{{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }}</td> + <td></td> + </tr> + <tr id="indentalignlast"> + <td>{{ unimplemented_inline() }} <code>indentalignlast</code></td> + <td>{{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }}</td> + <td></td> + </tr> + <tr id="indentshift"> + <td>{{ unimplemented_inline() }} <code>indentshift</code></td> + <td>{{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }}</td> + <td></td> + </tr> + <tr id="indentshiftfirst"> + <td>{{ unimplemented_inline() }} <code>indentshiftfirst</code></td> + <td>{{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }}</td> + <td></td> + </tr> + <tr id="indentshiftlast"> + <td>{{ unimplemented_inline() }} <code>indentshiftlast</code></td> + <td>{{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }}</td> + <td></td> + </tr> + <tr id="indenttarget"> + <td>{{ unimplemented_inline() }} <code>indenttarget</code></td> + <td>{{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }}</td> + <td></td> + </tr> + <tr id="infixlinebreakstyle"> + <td>{{ unimplemented_inline() }} <code>infixlinebreakstyle</code></td> + <td>{{ MathMLElement("mstyle") }}</td> + <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Задает стиль</span></span></span> по умолчанию для <code>linebreakstyle</code> <span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>для использования в инфиксных операторах.</span></span></span></td> + </tr> + <tr id="largeop"> + <td><code>largeop</code></td> + <td>{{ MathMLElement("mo") }}</td> + <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Указывает, следует ли рисовать оператор больше обычного.</span></span></span></td> + </tr> + <tr id="length"> + <td><code>length</code></td> + <td>{{ MathMLElement("msline") }}</td> + <td></td> + </tr> + <tr id="linebreak"> + <td>{{ unimplemented_inline() }} <code>linebreak</code></td> + <td>{{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }}</td> + <td></td> + </tr> + <tr id="linebreakmultchar"> + <td>{{ unimplemented_inline() }} <code>linebreakmultchar</code></td> + <td>{{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }}</td> + <td></td> + </tr> + <tr id="linebreakstyle"> + <td>{{ unimplemented_inline() }} <code>linebreakstyle</code></td> + <td>{{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }}</td> + <td></td> + </tr> + <tr id="lineleading"> + <td>{{ unimplemented_inline() }} <code>lineleading</code></td> + <td>{{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }}</td> + <td></td> + </tr> + <tr id="linethickness"> + <td><code>linethickness</code></td> + <td>{{ MathMLElement("mfrac") }}</td> + <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Толщина горизонтальной линии дроби.</span></span></span></td> + </tr> + <tr id="location"> + <td>{{ unimplemented_inline() }} <code>location</code></td> + <td>{{ MathMLElement("mscarries") }}</td> + <td></td> + </tr> + <tr id="longdivstyle"> + <td>{{ unimplemented_inline() }} <code>longdivstyle</code></td> + <td>{{ MathMLElement("mlongdiv") }}</td> + <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Управляет стилем макета с длинным разделением.</span></span></span></td> + </tr> + <tr id="lspace"> + <td><code>lspace</code></td> + <td>{{ MathMLElement("mo") }}, {{ MathMLElement("mpadded") }}</td> + <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Количество места перед оператором</span></span></span> (смотри <a href="/en-US/docs/MathML/Attributes/Values#Lengths" title="/en-US/docs/MathML/Attributes/Values#Lengths">длины</a> <span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>для значений и единиц</span></span></span>).</td> + </tr> + <tr id="lquote"> + <td><code>lquote</code></td> + <td>{{ MathMLElement("ms") }}</td> + <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Начальный символ цитаты</span></span></span> (зависит от <code>dir</code>), отгораживающий содержимое. Значение по умолчанию: "<code>&quot;</code>".</td> + </tr> + <tr id="mathbackground"> + <td><code>mathbackground</code></td> + <td><em>All</em></td> + <td>Цвет фона. Возможно использование <code>#rgb</code>, <code>#rrggbb</code> и <a href="/ru/docs/Web/CSS/color_value" title="/en-US/docs/CSS/color_value#HTML.2fSVG.2fX11.c2.a0_Color_Keywords">названия цветов HTML</a>.</td> + </tr> + <tr id="mathcolor"> + <td><code>mathcolor</code></td> + <td><em>All</em></td> + <td>Цвет текста. Возможно использование <code>#rgb</code>, <code>#rrggbb</code> и <a href="/ru/docs/Web/CSS/color_value" title="/en-US/docs/CSS/color_value#HTML.2fSVG.2fX11.c2.a0_Color_Keywords">названия цветов HTML</a>.</td> + </tr> + <tr id="mathsize"> + <td><code>mathsize</code></td> + <td>{{ MathMLElement("mi") }}, {{ MathMLElement("mn") }}, {{ MathMLElement("mo") }}, {{ MathMLElement("ms") }}, {{ MathMLElement("mtext") }}</td> + <td>Размер содержимого.</td> + </tr> + <tr id="mathvariant"> + <td><code>mathvariant</code></td> + <td>{{ MathMLElement("mi") }}, {{ MathMLElement("mn") }}, {{ MathMLElement("mo") }}, {{ MathMLElement("ms") }}, {{ MathMLElement("mtext") }}</td> + <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Логический класс идентификатора, который варьируется в типографике.</span></span></span></td> + </tr> + <tr id="maxsize"> + <td><code>maxsize</code></td> + <td>{{ MathMLElement("mo") }}</td> + <td>Максимальный размер ооператора.</td> + </tr> + <tr id="minlabelspacing"> + <td>{{ unimplemented_inline() }} <code>minlabelspacing</code></td> + <td>{{ MathMLElement("mtable") }}</td> + <td><a href="/en-US/docs/MathML/Attributes/Values" title="/en-US/docs/MathML/Attributes/Values">Значение длины</a>, определяющее минимальное расстояние между <a href="Element/mlabeledtr" rel="internal" title="/en-US/docs/MathML/Element/mlabeledtr">label</a> <span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>и соседней ячейкой в строке.</span></span></span></td> + </tr> + <tr id="minsize"> + <td><code>minsize</code></td> + <td>{{ MathMLElement("mo") }}</td> + <td>Минимальный размер оператора.</td> + </tr> + <tr id="movablelimits"> + <td><code>movablelimits</code></td> + <td>{{ MathMLElement("mo") }}</td> + <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Определяет, перемещаются ли присоединенные нижние и верхние индексы на позиции нижних и верхних индексов.</span></span></span></td> + </tr> + <tr id="notation"> + <td><code>notation</code></td> + <td>{{ MathMLElement("menclose") }}</td> + <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Список обозначений, разделённых пробелом, для применения к дочерним элементам.</span></span></span></td> + </tr> + <tr id="numalign"> + <td><code>numalign</code> {{deprecated_inline}}</td> + <td>{{ MathMLElement("mfrac") }}</td> + <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Выравнивание числителя по дроби.</span></span></span></td> + </tr> + <tr id="open"> + <td><code>open</code></td> + <td>{{ MathMLElement("mfenced") }}</td> + <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Строка открывающего разделителя.</span></span></span></td> + </tr> + <tr id="overflow"> + <td>{{ unimplemented_inline() }} <code>overflow</code></td> + <td>{{ MathMLElement("math") }}</td> + <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Если выражение слишком длинное, чтобы уместиться в допустимой ширине, этот атрибут устанавливает предпочтительную обработку.</span></span></span></td> + </tr> + <tr id="position"> + <td>{{ unimplemented_inline() }} <code>position</code></td> + <td>{{ MathMLElement("msgroup") }}, {{ MathMLElement("msrow") }}, {{ MathMLElement("mscarries") }}, {{ MathMLElement("msline") }}</td> + <td></td> + </tr> + <tr id="rowalign"> + <td><code>rowalign</code></td> + <td>{{ MathMLElement("mtable") }}, {{ MathMLElement("mtd") }}, {{ MathMLElement("mtr") }}</td> + <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Задаёт вертикальное выравнивание ячеек таблицы.</span></span></span></td> + </tr> + <tr id="rowlines"> + <td><code>rowlines</code></td> + <td>{{ MathMLElement("mtable") }}</td> + <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Задаёт границы строки таблицы.</span></span></span></td> + </tr> + <tr id="rowspacing"> + <td><code>rowspacing</code></td> + <td>{{ MathMLElement("mtable") }}</td> + <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Задаёт расстояние между строками таблицы.</span></span></span></td> + </tr> + <tr id="rowspan"> + <td><code>rowspan</code></td> + <td>{{ MathMLElement("mtd") }}</td> + <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Неотрицательное целочисленное значение, указывающее, на сколько строк расширяется ячейка.</span></span></span></td> + </tr> + <tr id="rspace"> + <td><code>rspace</code></td> + <td>{{ MathMLElement("mo") }}</td> + <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Количество места после оператора.</span></span></span></td> + </tr> + <tr id="rquote"> + <td><code>rquote</code></td> + <td>{{ MathMLElement("ms") }}</td> + <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Закрывающая кавычка</span></span></span> (зависит от <code>dir</code>), заключающая содержимое. Значение по умолчанию: "<code>&quot;</code>".</td> + </tr> + <tr id="scriptlevel"> + <td><code>scriptlevel</code></td> + <td>{{ MathMLElement("mstyle") }}</td> + <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>В основном контролирует размер шрифта.</span></span> <span class="ChMk0b JLqJ4b"><span>Чем выше</span></span></span> <code>scriptlevel</code>, <span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>тем меньше размер шрифта.</span></span></span></td> + </tr> + <tr id="scriptminsize"> + <td><code>scriptminsize</code></td> + <td>{{ MathMLElement("mstyle") }}</td> + <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Задает минимальный размер шрифта, разрешённый из-за изменений в</span></span></span> <code>scriptlevel</code>.</td> + </tr> + <tr id="scriptsizemultiplier"> + <td><code>scriptsizemultiplier</code></td> + <td>{{ MathMLElement("mstyle") }}</td> + <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Определяет множитель, который будет использоваться для настройки размера шрифта из-за изменений в</span></span></span> <code>scriptlevel</code>.</td> + </tr> + <tr id="selection"> + <td><code>selection</code></td> + <td>{{ MathMLElement("maction") }}</td> + <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Дочерний элемент, к которому обращается действие.</span></span></span></td> + </tr> + <tr id="separator"> + <td><code>separator</code></td> + <td>{{ MathMLElement("mo") }}</td> + <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Для этого атрибута нет визуального эффекта, но он указывает, является ли оператор разделителем (например, запятыми).</span></span></span></td> + </tr> + <tr id="separators"> + <td><code>separators</code></td> + <td>{{ MathMLElement("mfenced") }}</td> + <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Последовательность из нуля или более символов, используемых для разных разделителей.</span></span></span></td> + </tr> + <tr id="shift"> + <td>{{ unimplemented_inline() }} <code>shift</code></td> + <td>{{ MathMLElement("msgroup") }}</td> + <td></td> + </tr> + <tr id="side"> + <td>{{ unimplemented_inline() }} <code>side</code></td> + <td>{{ MathMLElement("mtable") }}</td> + <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Задает позицию, в которой</span></span></span> {{ MathMLElement("mlabeledtr") }} <span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>должны быть размещены элементы метки.</span></span></span></td> + </tr> + <tr id="src"> + <td>{{ unimplemented_inline() }} <code>src</code></td> + <td>{{ MathMLElement("mglyph") }}</td> + <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Расположение ресурса изображения.</span></span></span></td> + </tr> + <tr id="stackalign"> + <td>{{ unimplemented_inline() }} <code>stackalign</code></td> + <td>{{ MathMLElement("mstack") }}</td> + <td></td> + </tr> + <tr id="stretchy"> + <td><code>stretchy</code></td> + <td>{{ MathMLElement("mo") }}</td> + <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Указывает, растягивается ли оператор до размера соседнего элемента.</span></span></span></td> + </tr> + <tr id="subscriptshift"> + <td><code>subscriptshift</code> {{deprecated_inline}}</td> + <td>{{ MathMLElement("mmultiscripts") }}, {{ MathMLElement("msub") }}, {{ MathMLElement("msubsup") }}</td> + <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Минимальный интервал, на который можно сместить нижний индекс ниже базовой линии выражения.</span></span></span></td> + </tr> + <tr id="supscriptshift"> + <td><code>supscriptshift</code> {{deprecated_inline}}</td> + <td>{{ MathMLElement("mmultiscripts") }}, {{ MathMLElement("msup") }}, {{ MathMLElement("msubsup") }}</td> + <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Минимальное расстояние, на которое можно сместить верхний индекс над базовой линией выражения.</span></span></span></td> + </tr> + <tr id="symmetric"> + <td><code>symmetric</code></td> + <td>{{ MathMLElement("mo") }}</td> + <td>Если <code>stretchy</code> установлено в <code>true</code>, то <span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>этот атрибут указывает, должен ли оператор быть вертикально симметричным относительно воображаемой математической оси (центрированная дробная линия).</span></span></span></td> + </tr> + <tr id="voffset"> + <td><code>voffset</code></td> + <td>{{ MathMLElement("mpadded") }}</td> + <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Устанавливает вертикальное положение дочернего содержимого.</span></span></span></td> + </tr> + <tr id="width"> + <td><code>width</code></td> + <td>{{ MathMLElement("mglyph") }}, {{ MathMLElement("mpadded") }}, {{ MathMLElement("mspace") }}, {{ MathMLElement("mtable") }}</td> + <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Задает желаемую ширину.</span></span></span> Смотри <a href="/en-US/docs/MathML/Attributes/Values#Lengths" title="/en-US/docs/MathML/Attributes/Values#Lengths">длины</a> для возможных значений.</td> + </tr> + <tr id="xlink-href"> + <td><code>xlink:href</code> {{deprecated_inline}}</td> + <td><em>All</em></td> + <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Может использоваться для установки гиперссылки на указанный URI.</span></span> <span class="ChMk0b JLqJ4b"><span>Однако авторам рекомендуется использовать</span></span></span> вместо этого атрибут <code>href</code>.</td> + </tr> + <tr id="xmlns"> + <td><code>xmlns</code></td> + <td>{{ MathMLElement("math") }}</td> + <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Задает URI для пространства имен MathML</span></span></span> (<code><a class="external" href="http://www.w3.org/1998/Math/MathML" rel="freelink">http://www.w3.org/1998/Math/MathML</a></code>)</td> + </tr> + </tbody> +</table> 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 +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>[@@toPrimitive]()</code></strong> перетворює об'єкт Symbol на примітивне значення.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate">Symbol()[Symbol.toPrimitive](<var>hint</var>) +</pre> + +<h3 id="Повертає">Повертає</h3> + +<p>Примітивне значення вказаного об'єкта {{jsxref("Symbol")}}.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>[@@toPrimitive]()</code> об'єкта {{jsxref("Symbol")}} повертає примітивне значення об'єкта Symbol у вигляді символьного типу даних. Аргумент <code><var>hint</var></code> не використовується.</p> + +<p>JavaScript викликає метод <code>[@@toPrimitive]()</code> для перетворення об'єкта на примітивне значення. Вам рідко знадобиться запускати метод <code>[@@toPrimitive]()</code> власноруч; JavaScript автоматично запускає його, зустрівши об'єкт там, де очікується примітивне значення.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_toPrimitive">Використання @@toPrimitive</h3> + +<pre class="brush: js notranslate">const sym = Symbol("example"); +sym === sym[Symbol.toPrimitive](); // true +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-symbol.prototype-@@toprimitive', 'Symbol.prototype.@@toPrimitive')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.builtins.Symbol.@@toPrimitive")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Symbol.toPrimitive")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>Symbol.for(key)</code></strong> шукає існуючі символи у загальному реєстрі символів за заданим ключем, та повертає, якщо знаходить. Інакше, у глобальному реєстрі символів створюється новий символ з цим ключем.</p> + +<div>{{EmbedInteractiveExample("pages/js/symbol-for.html")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate">Symbol.for(<var>key</var>);</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code><var>key</var></code></dt> + <dd>Рядок, обов'язковий. Ключ для символа (а також використовується для опису символа).</dd> +</dl> + +<h3 id="Повертає">Повертає</h3> + +<p>Існуючий символ з наданим ключем, якщо його знайдено; інакше, створюється та повертається новий символ.</p> + +<h2 id="Опис">Опис</h2> + +<p>На відміну від <code>Symbol()</code>, функція <code>Symbol.for()</code> створює символ, доступний у списку глобального реєстру символів. <code>Symbol.for()</code> також не обов'язково створює новий символ при кожному виклику, а спочатку перевіряє, чи існує вже символ з наданим ключем <code>key</code> у реєстрі. В такому випадку повертається цей символ. Якщо символ з наданим ключем не знайдений, <code>Symbol.for()</code> створить новий глобальний символ.</p> + +<h3 id="Глобальний_реєстр_символів">Глобальний реєстр символів</h3> + +<p>Глобальний реєстр символів - це список з наступною структурою запису, який ініціалізується порожнім:</p> + +<table class="standard-table"> + <caption>Запис у глобальному реєстрі символів</caption> + <tbody> + <tr> + <th>Ім'я поля</th> + <th>Значення</th> + </tr> + <tr> + <td>[[key]]</td> + <td>Рядковий ключ для ідентифікації символа.</td> + </tr> + <tr> + <td>[[symbol]]</td> + <td>Символ, що зберігається глобально.</td> + </tr> + </tbody> +</table> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_Symbol.for">Використання Symbol.for()</h3> + +<pre class="brush: js notranslate">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)" +</pre> + +<p>Щоб уникнути конфліктів між іменами ваших ключів глобальних символів та іншими (код бібліотеки) глобальними символами, може бути гарною ідеєю додавати до ваших символів префікс:</p> + +<pre class="brush: js notranslate">Symbol.for('mdn.foo'); +Symbol.for('mdn.bar'); +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-symbol.for', 'Symbol.for')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.builtins.Symbol.for")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Symbol.keyFor()")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>Symbol.keyFor(sym)</code></strong> отримує ключ спільного символа з глобального реєстру для наданого символа.</p> + +<div>{{EmbedInteractiveExample("pages/js/symbol-keyfor.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate">Symbol.keyFor(<var>sym</var>);</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code><var>sym</var></code></dt> + <dd>Символ, обов'язковий. Символ, для якого потрібно знайти ключ.</dd> +</dl> + +<h3 id="Повертає">Повертає</h3> + +<p>Рядкове представлення ключа для наданого символа, якщо він був знайдений у глобальному реєстрі; інакше, {{jsxref("undefined")}}.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_keyFor">Використання keyFor()</h3> + +<pre class="brush: js notranslate">var globalSym = Symbol.for('foo'); // створити новий глобальний символ +Symbol.keyFor(globalSym); // "foo" + +var localSym = Symbol(); +Symbol.keyFor(localSym); // undefined + +// добревідомі символи не є зареєстрованими +// у глобальному реєстрі символів +Symbol.keyFor(Symbol.iterator) // undefined +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-symbol.keyfor', 'Symbol.keyFor')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.builtins.Symbol.keyFor")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Symbol.for()")}}</li> +</ul> 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 +--- +<div>{{JSRef}} {{obsolete_header}}</div> + +<p>Метод <strong><code>toSource()</code></strong> повертає рядкове представлення першокоду об'єкта.</p> + +<p>Цей метод зазвичай викликається внутрішньо у JavaScript.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><var>Symbol</var>.toSource() + +var sym = Symbol() +sym.toSource()</pre> + +<h3 id="Повертає">Повертає</h3> + +<p>Рядкове представлення першокоду об'єкта.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Вбудована_функція">Вбудована функція</h3> + +<p>Для вбудованого об'єкта <code>Symbol</code> метод <code>toSource</code> повертає наступний рядок, який вказує, що першокод недоступний:</p> + +<pre class="brush:js notranslate">"function Symbol() { + [native code] +}"</pre> + +<p>Для екземплярів <code>Symbol</code>, <code>toSource</code> повертає рядок, що відображає першокод.</p> + +<pre class="brush: js notranslate">"Symbol()"</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<p>Не є частиною жодного стандарту.</p> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.builtins.Symbol.toSource")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Object.prototype.toSource()")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>toString()</code></strong> повертає рядок, що відображає вказаний об'єкт {{jsxref("Symbol")}}.</p> + +<div>{{EmbedInteractiveExample("pages/js/symbol-prototype-tostring.html")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="notranslate">Symbol().toString()</pre> + +<h3 id="Повертає">Повертає</h3> + +<p>Рядкове представлення вказаного об'єкта {{jsxref("Symbol")}}.</p> + +<h2 id="Опис">Опис</h2> + +<p>Об'єкт {{jsxref("Symbol")}} заміщує метод <code>toString</code> об'єкта {{jsxref("Object")}}; він не успадковує {{jsxref("Object.prototype.toString()")}}. Для об'єктів <code>Symbol</code> метод <code>toString</code> повертає рядкове представлення об'єкта.</p> + +<h3 id="Обєднання_з_рядками_не_виконується">Об'єднання з рядками не виконується</h3> + +<p>Хоча ви можете викликати <code>toString()</code> на символах, ви не можете об'єднувати їх з рядками:</p> + +<pre class="brush: js notranslate">Symbol('foo') + 'bar' // TypeError: Can't convert symbol to string</pre> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_toString">Використання toString()</h3> + +<pre class="brush: js notranslate">Symbol('desc').toString() // "Symbol(desc)" + +// добревідомі символи +Symbol.iterator.toString() // "Symbol(Symbol.iterator) + +// глобальні символи +Symbol.for('foo').toString() // "Symbol(foo)" +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-symbol.prototype.tostring', 'Symbol.prototype.toString')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.builtins.Symbol.toString")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Object.prototype.toString()")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>valueOf()</code></strong> повертає примітивне значення об'єкта Symbol.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="notranslate">Symbol().valueOf() +</pre> + +<h3 id="Повертає">Повертає</h3> + +<p>Примітивне значення вказаного об'єкта {{jsxref("Symbol")}}.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>valueOf()</code> об'єкта {{jsxref("Symbol")}} повертає примітивне значення об'єкта Symbol у вигляді символьного типу даних.</p> + +<p>JavaScript викликає метод <code>valueOf()</code> для перетворення об'єкта на примітивне значення. Вам рідко знадобиться викликати метод <code>valueOf()</code> власноруч; JavaScript автоматично запускає його, зустрівши об'єкт там, де очікується примітивне значення.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_valueOf">Використання valueOf()</h3> + +<pre class="brush: js notranslate">const sym = Symbol("example"); +sym === sym.valueOf(); // true +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-symbol.prototype.valueof', 'Symbol.prototype.valueOf')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.builtins.Symbol.valueOf")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Object.prototype.valueOf()")}}</li> +</ul> diff --git a/files/zh-cn/web/css/css_logical_properties/浮动和定位/index.html b/files/zh-cn/web/css/css_logical_properties/浮动和定位/index.html new file mode 100644 index 0000000000..b96f3f6c88 --- /dev/null +++ b/files/zh-cn/web/css/css_logical_properties/浮动和定位/index.html @@ -0,0 +1,132 @@ +--- +title: 浮动和定位的逻辑属性 +slug: Web/CSS/CSS_Logical_Properties/浮动和定位 +translation_of: Web/CSS/CSS_Logical_Properties/Floating_and_positioning +--- +<div>{{CSSRef}}</div> + +<p class="summary"><a href="https://drafts.csswg.org/css-logical/">逻辑属性和值指南</a> 包含了 {{cssxref("float")}} 和{{cssxref("clear")}}逻辑属性到物理属性的映射, 以及与定位布局一起使用的<a href="/en-US/docs/Web/CSS/CSS_Positioning">定位属性</a>. 通过本文，我们来看看如何使用它们。</p> + +<h2 id="Mapped_properties_and_values">Mapped properties and values</h2> + +<p>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.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Logical property or value</th> + <th scope="col">Physical property or value</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{cssxref("float")}}: inline-start</td> + <td>{{cssxref("float")}}: left</td> + </tr> + <tr> + <td>{{cssxref("float")}}: inline-end</td> + <td>{{cssxref("float")}}: right</td> + </tr> + <tr> + <td>{{cssxref("clear")}}: inline-start</td> + <td>{{cssxref("clear")}}: left</td> + </tr> + <tr> + <td>{{cssxref("clear")}}: inline-end</td> + <td>{{cssxref("clear")}}: right</td> + </tr> + <tr> + <td>{{cssxref("inset-inline-start")}}</td> + <td>{{cssxref("left")}}</td> + </tr> + <tr> + <td>{{cssxref("inset-inline-end")}}</td> + <td>{{cssxref("right")}}</td> + </tr> + <tr> + <td>{{cssxref("inset-block-start")}}</td> + <td>{{cssxref("top")}}</td> + </tr> + <tr> + <td>{{cssxref("inset-block-end")}}</td> + <td>{{cssxref("bottom")}}</td> + </tr> + <tr> + <td>{{cssxref("text-align")}}: start</td> + <td>{{cssxref("text-align")}}: left</td> + </tr> + <tr> + <td>{{cssxref("text-align")}}: end</td> + <td>{{cssxref("text-align")}}: right</td> + </tr> + </tbody> +</table> + +<p>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.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Logical property</th> + <th scope="col">Purpose</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{cssxref("inset-inline")}}</td> + <td>Sets both of the above inset values for the inline dimension simultaneously.</td> + </tr> + <tr> + <td>{{cssxref("inset-block")}}</td> + <td>Sets both of the above inset values for the block dimension simultaneously.</td> + </tr> + <tr> + <td>{{cssxref("inset")}}</td> + <td>Sets all four inset values simultaneously with physical mapping of multi-value.</td> + </tr> + </tbody> +</table> + +<h2 id="Float_and_clear_example">Float and clear example</h2> + +<p>The physical values used with the {{cssxref("float")}} and {{cssxref("clear")}} properties are <code>left</code>, <code>right</code> and <code>both</code>. The Logical Properties specification defines the values <code>inline-start</code> and <code>inline-end</code> as mappings for <code>left</code> and <code>right</code>.</p> + +<p>In the example below I have two boxes — the first has the box floated with <code>float: left</code>, the second with <code>float: inline-start</code>. If you change the <code>writing-mode</code> to <code>vertical-rl</code> or the <code>direction</code> to <code>rtl</code> you will see that the left-floated box always sticks to the left, whereas the <code>inline-start</code>-floated item follows the <code>direction</code> and <code>writing-mode</code>.</p> + +<p>{{EmbedGHLiveSample("css-examples/logical/float.html", '100%', 700)}}</p> + +<h2 id="Example_Inset_properties_for_positioned_layout">Example: Inset properties for positioned layout</h2> + +<p>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")}}.</p> + +<p>These properties take a length or a percentage as a value, and relate to the user's screen dimensions.</p> + +<p>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")}}.</p> + +<p>In the below example I have used the <code>inset-block-start</code> and <code>inset-inline-end</code> properties to position the blue box using absolute positioning inside the area with the grey dotted border, which has <code>position: relative</code>. Change the <code>writing-mode</code> property to <code>vertical-rl</code>, or add <code>direction: rtl</code>, and see how the flow relative box stays with the text direction.</p> + +<p>{{EmbedGHLiveSample("css-examples/logical/positioning-inset.html", '100%', 700)}}</p> + +<h2 id="New_two-_and_four-value_shorthands">New two- and four-value shorthands</h2> + +<p>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.</p> + +<ul> + <li>{{cssxref("inset")}} — sets all four sides together with physical mapping.</li> + <li>{{cssxref("inset-inline")}} — sets both logical inline insets.</li> + <li>{{cssxref("inset-block")}} — sets both logical block insets.</li> +</ul> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: 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.</p> +</div> + +<h2 id="Example_Logical_values_for_text-align">Example: Logical values for text-align</h2> + +<p>The {{cssxref("text-align")}} property has logical values that relate to text direction — rather than using <code>left</code> and <code>right</code> we can use <code>start</code> and <code>end</code>. In the below example I have set <code>text-align: right</code> in the first block and <code>text-align: end</code> in the second.</p> + +<p>If you change the value of <code>direction</code> to <code>rtl</code> 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.</p> + +<p>{{EmbedGHLiveSample("css-examples/logical/text-align.html", '100%', 700)}}</p> + +<p>This works in a more consistent way when using box alignment that uses start and end rather than physical directions for alignment.</p> |