diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:41:15 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:41:15 -0500 |
| commit | 4b1a9203c547c019fc5398082ae19a3f3d4c3efe (patch) | |
| tree | d4a40e13ceeb9f85479605110a76e7a4d5f3b56b /files/de/web/css | |
| parent | 33058f2b292b3a581333bdfb21b8f671898c5060 (diff) | |
| download | translated-content-4b1a9203c547c019fc5398082ae19a3f3d4c3efe.tar.gz translated-content-4b1a9203c547c019fc5398082ae19a3f3d4c3efe.tar.bz2 translated-content-4b1a9203c547c019fc5398082ae19a3f3d4c3efe.zip | |
initial commit
Diffstat (limited to 'files/de/web/css')
444 files changed, 64706 insertions, 0 deletions
diff --git a/files/de/web/css/-moz-binding/index.html b/files/de/web/css/-moz-binding/index.html new file mode 100644 index 0000000000..c59286c421 --- /dev/null +++ b/files/de/web/css/-moz-binding/index.html @@ -0,0 +1,65 @@ +--- +title: '-moz-binding' +slug: Web/CSS/-moz-binding +tags: + - CSS + - CSS Referenz + - NeedsBrowserCompatibility + - NeedsMobileBrowserCompatibility + - NeedsUpdate + - Non-standard + - XBL +translation_of: Archive/Web/CSS/-moz-binding +--- +<div>{{Non-standard_header}}{{CSSRef}}{{Deprecated_Header(57)}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>-moz-binding</code> CSS Eigenschaft wird bei Mozilla basierten Anwendungen dazu verwendet, <a href="/de/docs/XBL">XBL</a> Bindings an ein DOM Element anzufügen.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">/* <uri> Wert */ +-moz-binding: url(http://www.example.org/xbl/htmlBindings.xml#checkbox); + +/* Globale Werte */ +-moz-binding: inherited; +-moz-binding: initial; +-moz-binding: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><uri></dt> + <dd>Die URI für ein XBL Binding (inclusive dem Fragmentidentifizier).</dd> + <dt><code>none</code></dt> + <dd>Kein XBL Binding wird auf das Element angewandt.</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush: css">.beispieleins { + -moz-binding: url(http://www.example.org/xbl/htmlBindings.xml#radiobutton); +}</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<p>Nicht Teil einer Spezifikation.</p> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.properties.-moz-binding")}} + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/XBL/XBL_1.0_Referenz/Anfügen_und_Lösen_von_Bindings">XBL Referenz: Anfügen und Lösen von Bindings</a></li> + <li><a href="/de/docs/Mozilla/Tech/XUL/Tutorial/Einführung_in_XBL">XUL Tutorial: Einführung in XBL</a></li> +</ul> diff --git a/files/de/web/css/-moz-border-bottom-colors/index.html b/files/de/web/css/-moz-border-bottom-colors/index.html new file mode 100644 index 0000000000..04c5583e52 --- /dev/null +++ b/files/de/web/css/-moz-border-bottom-colors/index.html @@ -0,0 +1,134 @@ +--- +title: '-moz-border-bottom-colors' +slug: Web/CSS/-moz-border-bottom-colors +tags: + - CSS + - CSS Eigenschaft + - CSS Referenz + - Non-standard +translation_of: Archive/Web/CSS/-moz-border-bottom-colors +--- +<div>{{Non-standard_header}}{{CSSRef}}</div> + +<p>In Mozilla Anwendungen wie Firefox setzt die <code>-moz-border-bottom-colors</code> CSS Eigenschaft eine Liste von Farben für den unteren Rahmen.</p> + +<p>Wenn ein Element einen Rand hat, der größer ist als ein einzelner CSS-Pixel, verwendet jede Zeile von Pixeln die nächste Farbe, die in dieser Eigenschaft angegeben wurde, von außen nach innen. Dies beseitigt die Notwendigkeit von verschachtelten Boxen. Falls der Rand breiter ist als die Anzahl der definierten Farben, wird der verbleibende Teil des Randes in der innersten Farbe gezeichnet.</p> + +<p>{{cssinfo}}</p> + +<p>Sie wird nicht angewendet</p> + +<ol> + <li>wenn {{cssxref("border-style")}} <code>dashed</code> oder <code>dotted</code> ist.</li> + <li>auf Tabellen mit <code>border-collapse: collapse</code>.</li> +</ol> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">/* Einzelner <color> Wert */ +-moz-border-bottom-colors: #f0f0f0; + +/* Mehrere <color> Werte */ +-moz-border-bottom-colors: #f0f0f0 #a0a0a0 #505050 #000000; + +/* Globale Werte */ +-moz-border-bottom-colors: inherit; +-moz-border-bottom-colors: initial; +-moz-border-bottom-colors: unset; +</pre> + +<p>Akzeptiert eine durch Leerzeichen getrennte Liste von Farbwerten.</p> + +<dl> + <dt><color></dt> + <dd>Definiert die Farbe einer Linie von Pixeln des unteren Randes. <code>transparent</code> ist gültig. Siehe {{cssxref("<color>")}} Werte für mögliche Einheiten.</dd> + <dt>none</dt> + <dd>Es werden keine Farben gezeichnet oder {{cssxref("border-color")}} verwendet, falls angegeben.</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush:html"><div id="example">Beispiel</div> +</pre> + +<pre class="brush:css">#example { + padding: 20px; + background-color: gray; + border: 10px solid black; + -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0; + -moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0; + -moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0; + -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0; +} +</pre> + +<p>{{EmbedLiveSample("Beispiel", 120, 90)}}</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<p>Diese Eigenschaft ist nicht Teil irgendeiner Spezifikation.</p> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{cssxref("border-color")}}</li> + <li>{{Cssxref("-moz-border-right-colors")}}</li> + <li>{{Cssxref("-moz-border-top-colors")}}</li> + <li>{{Cssxref("-moz-border-left-colors")}}</li> +</ul> diff --git a/files/de/web/css/-moz-border-left-colors/index.html b/files/de/web/css/-moz-border-left-colors/index.html new file mode 100644 index 0000000000..a9d2006c1d --- /dev/null +++ b/files/de/web/css/-moz-border-left-colors/index.html @@ -0,0 +1,136 @@ +--- +title: '-moz-border-left-colors' +slug: Web/CSS/-moz-border-left-colors +tags: + - CSS + - CSS Eigenschaft + - CSS Referenz + - Non-standard +translation_of: Archive/Web/CSS/-moz-border-left-colors +--- +<div>{{Non-standard_header}}{{CSSRef}}</div> + +<p>In Mozilla-Anwendungen wie Firefox, setzt die {{cssxref("-moz-border-left-colors")}} CSS Eigenschaft eine Liste von Farben für den linken Rand.</p> + +<p>Wenn ein Element einen Rand hat, der größer ist als ein einzelner CSS-Pixel, verwendet jede Zeile von Pixeln die nächste Farbe, die in dieser Eigenschaft angegeben wurde, von außen nach innen. Dies beseitigt die Notwendigkeit von verschachtelten Boxen. Falls der Rand breiter ist als die Anzahl der definierten Farben, wird der verbleibende Teil des Randes in der innersten Farbe gezeichnet.</p> + +<p>{{cssinfo}}</p> + +<p>Sie wird nicht angewendet</p> + +<ol> + <li>wenn {{cssxref("border-style")}} <code>dashed</code> oder <code>dotted</code> ist.</li> + <li>auf Tabellen mit <code>border-collapse: collapse</code>.</li> +</ol> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">/* Einzelner <color> Wert */ +-moz-border-left-colors: #f0f0f0; + +/* Mehrere <color> Werte */ +-moz-border-left-colors: #f0f0f0 #a0a0a0 #505050 #000000; + +/* Globale Werte */ +-moz-border-left-colors: inherit; +-moz-border-left-colors: initial; +-moz-border-left-colors: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<p>Akzeptiert eine durch Leerzeichen getrennte Liste von Farbwerten.</p> + +<dl> + <dt><color></dt> + <dd>Definiert die Farbe einer Linie von Pixeln des linken Randes. <code>transparent</code> ist gültig. Siehe {{cssxref("<color>")}} Werte für mögliche Einheiten.</dd> + <dt>none</dt> + <dd>Es werden keine Farben gezeichnet oder {{cssxref("border-color")}} verwendet, falls angegeben.</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush:html"><div id="example">Beispiel</div> +</pre> + +<pre class="brush:css">#example { + padding: 20px; + background-color: gray; + border: 10px solid black; + -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0; + -moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0; + -moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0; + -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0; +} +</pre> + +<p>{{EmbedLiveSample("Beispiel", 120, 90)}}</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<p>Diese Eigenschaft ist nicht Teil irgendeiner Spezifikation.</p> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{cssxref("border-color")}}</li> + <li>{{Cssxref("-moz-border-right-colors")}}</li> + <li>{{Cssxref("-moz-border-bottom-colors")}}</li> + <li>{{Cssxref("-moz-border-top-colors")}}</li> +</ul> diff --git a/files/de/web/css/-moz-border-right-colors/index.html b/files/de/web/css/-moz-border-right-colors/index.html new file mode 100644 index 0000000000..787c70a6fa --- /dev/null +++ b/files/de/web/css/-moz-border-right-colors/index.html @@ -0,0 +1,88 @@ +--- +title: '-moz-border-right-colors' +slug: Web/CSS/-moz-border-right-colors +tags: + - CSS + - CSS Eigenschaft + - CSS Referenz + - Non-standard +translation_of: Archive/Web/CSS/-moz-border-right-colors +--- +<div>{{Non-standard_header}}{{CSSRef}}{{Obsolete_Header(59)}}</div> + +<p>In Mozilla-Anwendungen wie Firefox, setzt die {{cssxref("-moz-border-top-colors")}} CSS Eigenschaft eine Liste von Farben für den rechten Rand.</p> + +<p>Wenn ein Element einen Rand hat, der größer ist als ein einzelner CSS-Pixel, verwendet jede Zeile von Pixeln die nächste Farbe, die in dieser Eigenschaft angegeben wurde, von außen nach innen. Dies beseitigt die Notwendigkeit von verschachtelten Boxen. Falls der Rand breiter ist als die Anzahl der definierten Farben, wird der verbleibende Teil des Randes in der innersten Farbe gezeichnet.</p> + +<p>{{cssinfo}}</p> + +<p>Sie wird nicht angewendet</p> + +<ol> + <li>wenn {{cssxref("border-style")}} <code>dashed</code> oder <code>dotted</code> ist.</li> + <li>auf Tabellen mit <code>border-collapse: collapse</code>.</li> +</ol> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">/* Einzelner <color> Wert */ +-moz-border-right-colors: #f0f0f0; + +/* Mehrere <color> Werte */ +-moz-border-right-colors: #f0f0f0 #a0a0a0 #505050 #000000; + +/* Globale Werte */ +-moz-border-right-colors: inherit; +-moz-border-right-colors: initial; +-moz-border-right-colors: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<p>Akzeptiert eine durch Leerzeichen getrennte Liste von Farbwerten.</p> + +<dl> + <dt><color></dt> + <dd>Definiert die Farbe einer Linie von Pixeln des rechten Randes. <code>transparent</code> ist gültig. Siehe {{cssxref("<color>")}} Werte für mögliche Einheiten.</dd> + <dt>none</dt> + <dd>Es werden keine Farben gezeichnet oder {{cssxref("border-color")}} verwendet, falls angegeben.</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush:html"><div id="example">Beispiel</div> +</pre> + +<pre class="brush:css">#example { + padding: 20px; + background-color: gray; + border: 10px solid black; + -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0; + -moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0; + -moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0; + -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0; +} +</pre> + +<p>{{EmbedLiveSample("Beispiel", 120, 90)}}</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<p>Diese Eigenschaft ist nicht Teil irgendeiner Spezifikation.</p> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.properties.-moz-border-right-colors")}} + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{cssxref("border-color")}}</li> + <li>{{Cssxref("-moz-border-top-colors")}}</li> + <li>{{Cssxref("-moz-border-bottom-colors")}}</li> + <li>{{Cssxref("-moz-border-left-colors")}}</li> +</ul> diff --git a/files/de/web/css/-moz-border-top-colors/index.html b/files/de/web/css/-moz-border-top-colors/index.html new file mode 100644 index 0000000000..79f324ceb0 --- /dev/null +++ b/files/de/web/css/-moz-border-top-colors/index.html @@ -0,0 +1,136 @@ +--- +title: '-moz-border-top-colors' +slug: Web/CSS/-moz-border-top-colors +tags: + - CSS + - CSS Eigenschaft + - CSS Referenz + - Non-standard +translation_of: Archive/Web/CSS/-moz-border-top-colors +--- +<div>{{Non-standard_header}}{{CSSRef}}</div> + +<p>In Mozilla-Anwendungen wie Firefox, setzt die {{cssxref("-moz-border-top-colors")}} CSS Eigenschaft eine Liste von Farben für den oberen Rand.</p> + +<p>Wenn ein Element einen Rand hat, der größer ist als ein einzelner CSS-Pixel, verwendet jede Zeile von Pixeln die nächste Farbe, die in dieser Eigenschaft angegeben wurde, von außen nach innen. Dies beseitigt die Notwendigkeit von verschachtelten Boxen. Falls der Rand breiter ist als die Anzahl der definierten Farben, wird der verbleibende Teil des Randes in der innersten Farbe gezeichnet.</p> + +<p>{{cssinfo}}</p> + +<p>Sie wird nicht angewendet</p> + +<ol> + <li>wenn {{cssxref("border-style")}} <code>dashed</code> oder <code>dotted</code> ist.</li> + <li>auf Tabellen mit <code>border-collapse: collapse</code>.</li> +</ol> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">/* Einzelner <color> Wert */ +-moz-border-top-colors: #f0f0f0; + +/* Mehrere <color> Werte */ +-moz-border-top-colors: #f0f0f0 #a0a0a0 #505050 #000000; + +/* Globale Werte */ +-moz-border-top-colors: inherit; +-moz-border-top-colors: initial; +-moz-border-top-colors: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<p>Akzeptiert eine durch Leerzeichen getrennte Liste von Farbwerten.</p> + +<dl> + <dt><color></dt> + <dd>Definiert die Farbe einer Linie von Pixeln des oberen Randes. <code>transparent</code> ist gültig. Siehe {{cssxref("<color>")}} Werte für mögliche Einheiten.</dd> + <dt>none</dt> + <dd>Es werden keine Farben gezeichnet oder {{cssxref("border-color")}} verwendet, falls angegeben.</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush:html"><div id="example">Beispiel</div> +</pre> + +<pre class="brush:css">#example { + padding: 20px; + background-color: gray; + border: 10px solid black; + -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0; + -moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0; + -moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0; + -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0; +} +</pre> + +<p>{{EmbedLiveSample("Beispiel", 120, 90)}}</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<p>Diese Eigenschaft ist nicht Teil irgendeiner Spezifikation.</p> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{cssxref("border-color")}}</li> + <li>{{Cssxref("-moz-border-right-colors")}}</li> + <li>{{Cssxref("-moz-border-bottom-colors")}}</li> + <li>{{Cssxref("-moz-border-left-colors")}}</li> +</ul> diff --git a/files/de/web/css/-moz-box-flex/index.html b/files/de/web/css/-moz-box-flex/index.html new file mode 100644 index 0000000000..8c54ffa75a --- /dev/null +++ b/files/de/web/css/-moz-box-flex/index.html @@ -0,0 +1,103 @@ +--- +title: '-moz-box-flex' +slug: Web/CSS/-moz-box-flex +tags: + - CSS + - CSS Referenz + - NeedsBrowserCompatibility + - NeedsMobileBrowserCompatibility + - Non-standard +translation_of: Web/CSS/box-flex +--- +<div>{{CSSRef}}{{warning("Dies ist eine Eigenschaft zur Steuerung von Teilen des XUL Boxmodells. Sie stimmt weder mit den alten CSS Flexible Box Layout Module Entwürfen für <code>box-flex</code> (welche auf dieser Eigenschaft beruhen), noch dem Verhalten von <code>-webkit-box-flex</code> (welche auf diesen Entwürfen beruht) überein.")}}</div> + +<p>Siehe <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes">Flexbox</a> für mehr Informationen, was anstelle dieser Eigenschaft verwendet werden sollte.</p> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>-moz-box-flex</code> und <code>-webkit-box-flex</code> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaften geben an, wie eine <code>-moz-box</code> oder <code>-webkit-box</code> wächst, um die Box zu füllen, die sie beinhaltet, in Richtung des Layouts der beinhaltenden Box. Siehe <a href="/de/docs/Web/Guide/CSS/Flexible_boxes">Flexbox</a> für mehr Informationen über die Eigenschaften von Flexbox-Elementen.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">/* <number> Werte */ +-moz-box-flex: 0; +-moz-box-flex: 3; +-webkit-box-flex: 0; +-webkit-box-flex: 3; + +/* Globale Werte */ +-moz-box-flex: inherit; +-moz-box-flex: initial; +-moz-box-flex: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt>0</dt> + <dd>Die Box wächst nicht.</dd> + <dt>> 0</dt> + <dd>Die Box wächst soweit, dass sie den verfügbaren Raum ausfüllt.</dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <title>-moz-box-flex example</title> + <style> + div.example { + display: -moz-box; + display: -webkit-box; + border: 1px solid black; + width: 100%; + } + div.example > p:nth-child(1) { + -moz-box-flex: 1; /* Mozilla */ + -webkit-box-flex: 1; /* WebKit */ + border: 1px solid black; + } + div.example > p:nth-child(2) { + -moz-box-flex: 0; /* Mozilla */ + -webkit-box-flex: 0; /* WebKit */ + border: 1px solid black; + } + </style> + </head> + <body> + <div class="example"> + <p>Ich wachse, um den zusätzlichen Raum auszufüllen.</p> + <p>Ich wachse nicht.</p> + </div> + </body> +</html> +</pre> + +<h2 id="Hinweise">Hinweise</h2> + +<p>Die beinhaltende Box teilt den zur Verfügung stehenden zusätzlichen Abstand proportional zum Flexwert jedes Inhaltselements auf.</p> + +<p>Inhaltselemente, die null als Flexwert haben, vergrößern sich nicht.</p> + +<p>Falls nur ein Inhaltselement einen Flexwert hat, der nicht null ist, vergrößert es sich, um den verfügbaren Raum auszufüllen.</p> + +<p>Inhaltselemente, die den gleichen Flexwert haben, vergrößern sich um den gleichen absoluten Betrag.</p> + +<p>Falls der Flexwert über das <code>flex</code> Elementattribut gesetzt wird, wird der Stil ignoriert.</p> + +<p>Um XUL Elemente innerhalb einer Box gleich groß zu machen, muss das <code>equalsize</code> Attribut der beinhaltenden Box auf den Wert <code>always</code> gesetzt werden. Dieses Attribut hat keine entsprechende CSS Eigenschaft.</p> + +<p>Ein Trick, um alle Inhaltselemente in einer beinhaltenden Box gleich groß zu machen, ist, allen eine feste Größe (z. B. <code>height: 0;</code>) und denselben box-flex Wert größer als null zu geben (z. B. <code>-moz-box-flex: 1</code>).</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<p>Diese Eigenschaft ist eine nicht standardisierte Erweiterung. Es gab einen <a class="external" href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">alten Entwurf der CSS3 Flexbox Spezifikation</a>, der eine <code>box-flex</code> Eigenschaft definiert hat, aber dieser Entwurf ist mittlerweile überholt.</p> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{Compat("css.properties.box-flex")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<p>{{cssxref("-moz-box-orient")}}, {{cssxref("-moz-box-pack")}}, {{cssxref("-moz-box-direction")}}, {{cssxref("flex")}}</p> diff --git a/files/de/web/css/-moz-box-ordinal-group/index.html b/files/de/web/css/-moz-box-ordinal-group/index.html new file mode 100644 index 0000000000..f4465ba8ca --- /dev/null +++ b/files/de/web/css/-moz-box-ordinal-group/index.html @@ -0,0 +1,66 @@ +--- +title: '-moz-box-ordinal-group' +slug: Web/CSS/-moz-box-ordinal-group +tags: + - CSS + - CSS Referenz + - 'CSS:Mozilla Erweiterungen' + - Flexible Box + - Non-standard +translation_of: Web/CSS/box-ordinal-group +--- +<p>{{CSSRef}}<br> + {{warning("Dies ist eine Eigenschaft des ursprünglichen CSS Flexible Box Entwurfs und wurde in neueren Entwürfen ersetzt.")}}</p> + +<p>Siehe <a href="/de/docs/Web/Guide/CSS/Flexible_boxes" title="/en/CSS/Flexible_boxes">Flexbox</a> für mehr Informationen, was statt dieser Eigenschaft verwendet werden sollte.</p> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Kennzeichnet die Aufzählungsgruppe, zu der das Element gehört. Elemente mit einer geringeren Aufzählungsgruppe werden vor denen mit höherer Aufzählungsgruppe angezeigt.</p> + +<h2 id="Werte">Werte</h2> + +<p>Werte müssen Ganzzahlen größer als null sein. Der Standardwert für diese Eigenschaft ist 1.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush: html"><style type="text/css"> + #Flexbox { + display: -ms-box; + display: -moz-box; + display: -webkit-box; + } + + #text1 { + background: red; + -ms-box-ordinal-group: 4; + -moz-box-ordinal-group: 4; + -webkit-box-ordinal-group: 4; + } + + #text2 { + background: green; + -ms-box-ordinal-group: 3; + -moz-box-ordinal-group: 3; + -webkit-box-ordinal-group: 3; + } + + #text3 { + background: blue; + -ms-box-ordinal-group: 2; + -moz-box-ordinal-group: 2; + -webkit-box-ordinal-group: 2; + } + + #text4 { + background: orange; + } +</style> + +<div id="Flexbox"> + <div id="text1">text 1</div> + <div id="text2">text 2</div> + <div id="text3">text 3</div> + <div id="text4">text 4</div> +</div> +</pre> diff --git a/files/de/web/css/-moz-box-pack/index.html b/files/de/web/css/-moz-box-pack/index.html new file mode 100644 index 0000000000..517c6fce72 --- /dev/null +++ b/files/de/web/css/-moz-box-pack/index.html @@ -0,0 +1,136 @@ +--- +title: '-moz-box-pack' +slug: Web/CSS/-moz-box-pack +tags: + - CSS + - CSS Eigenschaft + - CSS Referenz + - Layout + - Non-standard +translation_of: Web/CSS/box-pack +--- +<div>{{CSSRef}}{{warning("Dies ist eine Eigenschaft des ursprünglichen CSS Flexible Box Layout Moduls, welches durch einen neuen Standard ersetzt wurde.")}}</div> + +<p>Siehe <a href="/de/docs/Web/Guide/CSS/Flexible_boxes">Flexbox</a> für mehr Informationen.</p> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>-moz-box-pack</code> und <code>-webkit-box-pack</code> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaften bestimmen, wie ein <code>-moz-box</code> oder <code>-webkit-box</code> seine Inhalte in Richtung seines Layouts packt. Die Wirkung dieser Eigenschaft ist nur sichtbar, falls es zusätzlichen Leerraum innerhalb der Box gibt. Siehe <a href="/de/docs/Web/Guide/CSS/Flexible_boxes">Flexbox</a> für mehr Informationen bezüglich den Eigenschaften von Flexbox-Elementen.</p> + +<p>Die Richtung des Layouts hängt von der Ausrichtung des Elements ab: horizontal oder vertikal.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">/* Schlüsselwortwerte */ +-moz-box-pack: start; +-moz-box-pack: center; +-moz-box-pack: end; +-moz-box-pack: justify; + +/* Globale Werte */ +-moz-box-pack: inherit; +-moz-box-pack: initial; +-moz-box-pack: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code>start</code></dt> + <dd>Die Box packt Inhalte am Anfang und lässt eventuellen zusätzlichen Leerraum am Ende.</dd> + <dt><code>center</code></dt> + <dd>Die Box packt Inhalte in der Mitte und teilt eventuellen zusätzlichen Leerraum zwischen Start und Ende auf.</dd> + <dt><code>end</code></dt> + <dd>Die Box packt Inhalte am Ende und lässt eventuellen zusätzlichen Leerraum am Start.</dd> + <dt><code>justify</code></dt> + <dd>Der Leerraum wird gleichmäßig zwischen jedem Kind aufgeteilt, wobei kein zusätzlicher Leerraum vor dem ersten Kind oder nach dem letzten Kind platziert wird. Falls es nur ein Kind gibt, wird der Wert so behandelt, als ob er <code>start</code> wäre.</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush: css">div.example { + border-style: solid; + + display: -moz-box; /* Mozilla */ + display: -webkit-box; /* WebKit */ + + /* Make this box taller than the children, + so there is room for the box-pack */ + height: 300px; + /* Make this box wide enough to show the contents + are centered horizontally */ + width: 300px; + + /* Children should be oriented vertically */ + -moz-box-orient: vertical; /* Mozilla */ + -webkit-box-orient: vertical; /* WebKit */ + + /* Align children to the horizontal center of this box */ + -moz-box-align: center; /* Mozilla */ + -webkit-box-align: center; /* WebKit */ + + /* Pack children to the bottom of this box */ + -moz-box-pack: end; /* Mozilla */ + -webkit-box-pack: end; /* WebKit */ +} + +div.example p { + /* Make children narrower than their parent, + so there is room for the box-align */ + width: 200px; +} +</pre> + +<pre class="brush: html"><div class="example"> + <p>I will be second from the bottom of div.example, centered horizontally.</p> + <p>I will be on the bottom of div.example, centered horizontally.</p> +</div> +</pre> + +<p>{{EmbedLiveSample('Beispiele', 310, 310)}}</p> + +<h2 id="Hinweise">Hinweise</h2> + +<p>Der Rand der Box, die als <em>Start</em> zum Packen bestimmt wird, hängt von der Ausrichtung der Box und deren Richtung ab:</p> + +<table class="standard-table" style="text-align: center;"> + <tbody> + <tr> + <th> </th> + <th><strong>Normal</strong></th> + <th><strong>Umgekehrt</strong></th> + </tr> + <tr> + <th style="text-align: right;"><strong>Horizontal</strong></th> + <td>links</td> + <td>rechts</td> + </tr> + <tr> + <th style="text-align: right;"><strong>Vertikal</strong></th> + <td>oben</td> + <td>unten</td> + </tr> + </tbody> +</table> + +<p>Der dem Start gegenüberliegende Rand wird als das <em>Ende</em> bestimmt.</p> + +<p>Falls das Packen durch das <code>pack</code> Elementattribut gesetzt wird, wird die Stileigenschaft ignoriert.</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<p>Diese Eigenschaft ist nicht standardisiert, jedoch erschien eine ähnliche Eigenschaft in einem <a class="external" href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">frühen Entwurf von CSS3 Flexbox</a>, die durch neuere Versionen der Spezifikation überholt wurde.</p> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.properties.box-pack")}} + +<h2 id="Siehe_auch">Siehe auch</h2> + +<p>{{cssxref("box-orient")}}, {{cssxref("box-direction")}}, {{cssxref("box-align")}}</p> diff --git a/files/de/web/css/-moz-cell/index.html b/files/de/web/css/-moz-cell/index.html new file mode 100644 index 0000000000..7e4ded305c --- /dev/null +++ b/files/de/web/css/-moz-cell/index.html @@ -0,0 +1,11 @@ +--- +title: '-moz-cell' +slug: Web/CSS/-moz-cell +tags: + - CSS + - Non-standard +translation_of: Web/CSS/cursor +--- +<div>{{CSSRef}}{{obsolete_header}}</div> + +<p><em>Diesen Wert nicht verwenden!</em> Stattdessen sollte der <code>cursor</code> Wert {{cssxref("cursor#cell","cell")}} verwendet werden.</p> diff --git a/files/de/web/css/-moz-float-edge/index.html b/files/de/web/css/-moz-float-edge/index.html new file mode 100644 index 0000000000..1049fa0df2 --- /dev/null +++ b/files/de/web/css/-moz-float-edge/index.html @@ -0,0 +1,67 @@ +--- +title: '-moz-float-edge' +slug: Web/CSS/-moz-float-edge +tags: + - CSS + - CSS Eigenschaft + - 'CSS:Mozilla Erweiterungen' + - Layout + - NeedsCompatTable + - NeedsLiveSample + - Non-standard +translation_of: Web/CSS/-moz-float-edge +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die nicht standardisierte <strong><code>-moz-float-edge</code></strong> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft gibt an, ob die Höhen- und Breiteneigenschaften des Elements die Dicke des Außenabstands, des Rands oder des Innenabstands beinhalten.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">/* Schlüsselwortwerte */ +-moz-float-edge: border-box; +-moz-float-edge: content-box; +-moz-float-edge: margin-box; +-moz-float-edge: padding-box; + +/* Globale Werte */ +-moz-float-edge: inherit; +-moz-float-edge: initial; +-moz-float-edge: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code>border-box</code></dt> + <dd>Die Höhen- und Breiteneigenschaften beinhalten den Inhalt, Innenabstand und Rand, aber nicht den Außenabstand.</dd> + <dt><code>content-box</code></dt> + <dd>Die Höhen- und Breiteneigenschaften beinhalten den Inhalt, aber weder Innenabstand, Rand, noch Außenabstand.</dd> + <dt><code>margin-box</code></dt> + <dd>Die Höhen- und Breiteneigenschaften beinhalten den Inhalt, Innenabstand, Rand und Außenabstand.</dd> + <dt><code>padding-box</code></dt> + <dd>Die Höhen- und Breiteneigenschaften beinhalten den Inhalt und Innenabstand, aber nicht den Rand oder Außenabstand.</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush:css">hr { + display: block; + height: 2px; + border: 1px inset; + margin: 0.5em auto 0.5em auto; + color: gray; + -moz-float-edge: margin-box; + box-sizing: border-box; +}</pre> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<p>{{bug(432891)}}</p> diff --git a/files/de/web/css/-moz-force-broken-image-icon/index.html b/files/de/web/css/-moz-force-broken-image-icon/index.html new file mode 100644 index 0000000000..b4b56a17d8 --- /dev/null +++ b/files/de/web/css/-moz-force-broken-image-icon/index.html @@ -0,0 +1,57 @@ +--- +title: '-moz-force-broken-image-icon' +slug: Web/CSS/-moz-force-broken-image-icon +tags: + - CSS + - CSS Referenz + - NeedsContent + - Non-standard +translation_of: Web/CSS/-moz-force-broken-image-icon +--- +<div>{{Non-standard_header}}{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p><code>-moz-force-broken-image-icon</code> ist eine erweiterte CSS Eigenschaft. Der Wert <code>1</code> erzwingt ein Symbol für nicht ladbare Bilder auch wenn das Bild ein {{HTMLElement("img", "<code>alt</code>", "#attr-alt")}} Attribut hat. Wenn der Wert <code>0</code> verwendet wird, wird sich das Bild wie gewohnt verhalten und nur das <code>alt</code> Attribut anzeigen.</p> + +<div class="note"><strong>Hinweis:</strong> Sogar wenn der Wert auf <code>1</code> gesetzt wird, wird das <code>alt</code> Attribut immer noch angezeigt. Mehr Informationen sind weiter unten verfügbar.</div> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt>{{cssxref("<integer>")}}</dt> + <dd>Ein Wert von <code>1</code> bedeutet, dass ein Symbol für nicht ladbare Bilder angezeigt wird, auch wenn das Bild ein {{HTMLElement("img", "<code>alt</code>", "#attr-alt")}} Attribut hat. Ein Wert von <code>0</code> zeigt nur das <code>alt</code> Attribut an.</dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush:css;">img { + -moz-force-broken-image-icon: 1; + height:100px; + width:100px; +}</pre> + +<pre class="brush:html;"><img src='/broken/image/link.png' alt='Broken image link'></pre> + +<p>{{EmbedLiveSample('Beispiele','125','125','/files/4619/broken%20image%20link.png')}}</p> + +<div class="note"><strong>Hinweis:</strong> Sofern das Bild keine definierte Höhe und Breite hat, wird das Symbol für nicht ladbare Bilder nicht angezeigt, aber das <code>alt</code> Attribut wird ebenfalls versteckt, wenn <code>-moz-force-broken-image-icon</code> auf <code>1</code> gesetzt wird.</div> + +<h2 id="Hinweise">Hinweise</h2> + +<ul> + <li>Diese Eigenschaft funktioniert nur in gecko-basierten Browsern.</li> + <li>Die Verwendung dieser Eigenschaft wird nicht empfohlen. Stattdessen sollte ein passendes <code>alt</code> Attribut verwendet werden.</li> +</ul> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{Bug(58646)}}</li> +</ul> diff --git a/files/de/web/css/-moz-image-rect/index.html b/files/de/web/css/-moz-image-rect/index.html new file mode 100644 index 0000000000..685d7a855b --- /dev/null +++ b/files/de/web/css/-moz-image-rect/index.html @@ -0,0 +1,146 @@ +--- +title: '-moz-image-rect' +slug: Web/CSS/-moz-image-rect +tags: + - CSS + - CSS Eigenschaft + - CSS Referenz + - NeedsCompatTable + - NeedsUpdate + - Non-standard +translation_of: Web/CSS/-moz-image-rect +--- +<div>{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("2.0")}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Dieser Wert für <a href="/de/docs/Web/CSS">CSS</a> {{cssxref("background-image")}} ermöglicht es, einen Bereich eines größeren Bildes als Hintergrund zu verwenden. Dies erlaubt es beispielsweise, verschiedene Teile eines größeren Bildes als Hintergründe in verschiedenen Teilen des Inhalts zu verwenden.</p> + +<p>Dies funktioniert ähnlich der {{cssxref("-moz-image-region")}} Eigenschaft, welche zusammen mit der {{cssxref("list-style-image")}} verwendet wird, um Teile eines Bildes als Aufzählungszeichen in einer Liste zu verwenden. Diese Eigenschaft wird jedoch für CSS Hintergründe verwendet.</p> + +<p>Die Syntax für ein Rechteck ist ähnlich der der <a href="/de/docs/Web/CSS/shape#Syntax"><code>rect()</code></a> Funktion, die einen {{cssxref("<shape>")}} CSS Typ generiert. Alle vier Werte sind relativ zur linken oberen Ecke des Bildes.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">-moz-image-rect({{cssxref("<uri>")}}, <em>top</em>, <em>right</em>, <em>bottom</em>, <em>left</em>);</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt>{{cssxref("<uri>")}}</dt> + <dd>Der URI des Bildes, von dem das Teilbild verwendet werden soll.</dd> + <dt><code>top</code></dt> + <dd>Der obere Rand, definiert als {{cssxref("<length>")}} des Teilbilds innerhalb des angegebenen Bildes.</dd> + <dt><code>right</code></dt> + <dd>Der rechte Rand, definiert als {{cssxref("<length>")}} des Teilbilds innerhalb des angegebenen Bildes.</dd> + <dt><code>bottom</code></dt> + <dd>Der untere Rand, definiert als {{cssxref("<length>")}} des Teilbilds innerhalb des angegebenen Bildes.</dd> + <dt><code>left</code></dt> + <dd>Der linke Rand, definiert als {{cssxref("<length>")}} des Teilbilds innerhalb des angegebenen Bildes.</dd> +</dl> + +<h2 id="Beispiel">Beispiel</h2> + +<p>Dieses Beispiel lädt ein Bild und verwendet es in vier Segmenten, um das Firefox Logo in vier {{HTMLElement("div")}} Blöcken darzustellen. Wenn auf deren Container geklickt wird, werden die vier Segmente rotiert, indem die {{cssxref("background-image")}} Eigenschaftswerte zwischen den vier {{HTMLElement("div")}} Blöcken getauscht werden.</p> + +<h3 id="CSS">CSS</h3> + +<p>Das CSS definiert einen Containerstil, dann die Stile für die vier Boxen, die das gesamte Bild ausmachen.</p> + +<p>Der Container sieht folgendermaßen aus:</p> + +<pre class="brush: css">#container { + width: 267px; + height: 272px; + top: 100px; + left: 100px; + position: absolute; + font-size: 16px; + text-shadow: white 0px 0px 6px; + text-align: center; +}</pre> + +<p>Dann werden die vier Boxen definiert, die die Segmente des Bildes beschreiben. Hier wird eines nach dem anderen dargestellt.</p> + +<pre class="brush: css">#box1 { + background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 0%, 50%, 50%, 0%); + width: 133px; + height: 136px; + position: absolute; +} +</pre> + +<p>Dies ist die linke obere Ecke des Bildes. Sie beschreibt ein Rechteck, das das linke obere Viertel des Bildes der Datei <code>firefox.jpg</code> beinhaltet.</p> + +<pre class="brush: css">#box2 { + background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 0%, 100%, 50%, 50%); + width: 133px; + height: 136px; + position: absolute; +} +</pre> + +<p>Dies beschreibt die rechte obere Ecke des Bildes.</p> + +<p>Die anderen Ecken folgen einem ähnlichen Schema:</p> + +<pre class="brush: css">#box3 { + background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 50%, 50%, 100%, 0%); + width: 133px; + height: 136px; + position: absolute; +} + +#box4 { + background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 50%, 100%, 100%, 50%); + width: 133px; + height: 136px; + position: absolute; +} +</pre> + +<h3 id="HTML">HTML</h3> + +<p>Das HTML ist recht einfach:</p> + +<pre class="brush: html"><div id="container" onclick="rotate()"> + <div id="box1" style="left:0px;top:0px;">Top left</div> + <div id="box2" style="left:133px;top:0px;">Top right</div> + <div id="box3" style="left:0px;top:136px;">Bottom left</div> + <div id="box4" style="left:133px;top:136px;">Bottom right</div> +</div> +</pre> + +<p>Dies platziert die vier Segmente des Bildes in einem 2x2 Raster. Diese vier Segmente sind alle innerhalb eines größeren {{HTMLElement("div")}} Blocks, dessen primärer Zweck das Erhalten von Klickereignissen und deren Senden an den JavaScript Code ist.</p> + +<h3 id="Der_JavaScript_Code">Der JavaScript Code</h3> + +<p>Dieser Code verarbeitet das Klickereignis, wenn auf den Container geklickt wird.</p> + +<pre class="brush:js">function rotate() { + var prevStyle = window.getComputedStyle(document.getElementById("box4"), null).getPropertyValue("background-image"); + + // Now that we've saved the last one, start rotating + + for (var i=1; i<=4; i++) { + var curId = "box" + i; + + // Shift the background images + + var curStyle = window.getComputedStyle(document.getElementById(curId), null).getPropertyValue("background-image"); + document.getElementById(curId).style.backgroundImage = prevStyle; + prevStyle = curStyle; + } +}</pre> + +<p>Dies verwendet {{domxref("window.getComputedStyle()")}}, um den Stil jedes Elements auszulesen und dem nächsten Element zuzuweisen. Beachte, dass es zuvor eine Kopie des letzten Boxstils speichert, da dieser durch den Stil des dritten Elements überschrieben wird. Durch das simple Kopieren der Werte der {{cssxref("background-image")}} Eigenschaft von einem zum nächsten Element durch jeden Mausklick, wird dieser erwünschte Effekt erreicht.</p> + +<h3 id="Wie_es_aussieht">Wie es aussieht</h3> + +<p>{{EmbedLiveSample("Beispiel","400","400")}}</p> + +<h2 id="Bugs">Bugs</h2> + +<ul> + <li>{{WebkitBug(32177)}}</li> +</ul> diff --git a/files/de/web/css/-moz-image-region/index.html b/files/de/web/css/-moz-image-region/index.html new file mode 100644 index 0000000000..3a49ad49b0 --- /dev/null +++ b/files/de/web/css/-moz-image-region/index.html @@ -0,0 +1,84 @@ +--- +title: '-moz-image-region' +slug: Web/CSS/-moz-image-region +tags: + - CSS + - Non-standard + - Referenz +translation_of: Web/CSS/-moz-image-region +--- +<p>{{Non-standard_header}}{{ CSSRef() }}</p> + +<div><em>Für ein System, das mit beliebigen Hintergründen funktioniert, siehe {{Cssxref("-moz-image-rect")}}.</em></div> + +<div> </div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>-moz-image-region</code> Eigenschaft ist für XUL-Elemente und Pseudo-Elemente, welche ein Bild von der <a href="/de/CSS/list-style-image" title="de/CSS/list-style-image"><code>list-style-image</code></a> Eigenschaft benutzen, gedacht. Die Eigenschaft gibt einen Bereich des Bildes an, welcher anstelle des ganzen Bildes dargestellt wird. Das erlaubt Elementen verschiedene Stücke des gleichen Bildes zu benutzen, um die Leistung zu steigern.<br> + Die Syntax ist derjenigen der clip-Property ähnlich. Alle vier Werte sind relativ von der oberen linken Ecke des Bildes.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt>auto</dt> + <dd>Standardwert. Es wird nichts ausgeschnitten.</dd> + <dt>rect()</dt> + <dd>Es wird ein Bereich ausgeschnitten, der über die vier Längenangaben definert wird.</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<pre>#example-button { + /* Zeige nur einen 4x4 großen Ausschnitt von der oberen, linken Ecke des Bildes */ + list-style-image: url("chrome://example/skin/example.png"); + -moz-image-region: rect(0px, 4px, 4px, 0px); +} +#example-button:hover { + /* Zeige einen anderen 4x4 großen Ausschnitt vom Bild, wenn sich die Maus über dem Button befindet */ + -moz-image-region: rect(0px, 8px, 4px, 4px); +} + +</pre> + +<h2 id="Browser_Kompatibilität">Browser <span>Kompatibilität</span></h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Browser</th> + <th>ab Version</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>---</td> + </tr> + <tr> + <td>Firefox (Gecko)</td> + <td>1.0 (1.0)</td> + </tr> + <tr> + <td>Opera</td> + <td>---</td> + </tr> + <tr> + <td>Safari (WebKit)</td> + <td>---</td> + </tr> + </tbody> +</table> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/CSS/clip" title="de/CSS/clip"><code>clip</code></a></li> +</ul> diff --git a/files/de/web/css/-moz-orient/index.html b/files/de/web/css/-moz-orient/index.html new file mode 100644 index 0000000000..8f650e4ab5 --- /dev/null +++ b/files/de/web/css/-moz-orient/index.html @@ -0,0 +1,73 @@ +--- +title: '-moz-orient' +slug: Web/CSS/-moz-orient +tags: + - CSS + - CSS Referenz + - Non-standard +translation_of: Web/CSS/-moz-orient +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<p>Die <code>-moz-orient</code> CSS Eigenschaft bestimmt die Orientierung des Elements, auf das sie angewendet wird.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code>inline</code></dt> + <dd>Das Element wird in der gleichen Richtung wie die Textachse dargestellt: horizontal für horizontale Schreibmodi, vertikal für vertikale Schreibmodi.</dd> + <dt><code>block</code></dt> + <dd>Das Element wird in der gleichen Richtung wie die Textachse dargestellt: horizontal für horizontale Schreibmodi, vertikal für vertikale Schreibmodi.</dd> + <dt><code>horizontal</code></dt> + <dd>Das Element wird horizontal dargestellt.</dd> + <dt><code>vertical</code></dt> + <dd>Das Element wird vertikal dargestellt.</dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p> + The following progress meter + is horizontal (the default): +</p> +<progress max="100" value="75"></progress> + +<p> + The following progress meter + is vertical: +</p> +<progress class="vert" max="100" value="75"></progress></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">.vert { + -moz-orient: vertical; + width: 16px; + height: 150px; +}</pre> + +<h3 id="Beispiele_2">Beispiele</h3> + +<p>{{EmbedLiveSample("Beispiele","200","360")}}</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<p>Obwohl für das W3C mit anfänglichem positivem Feedback <a href="https://lists.w3.org/Archives/Public/www-style/2014Jun/0396.html">eingereicht</a>, ist diese Eigenschaft noch nicht Teil einer Spezifikation; aktuell ist sie daher eine Mozilla spezifische Erweiterung (d. h. <code>-moz-orient</code>).</p> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.properties.-moz-orient")}} + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{cssxref("box-orient")}}</li> +</ul> diff --git a/files/de/web/css/-moz-outline-radius-bottomleft/index.html b/files/de/web/css/-moz-outline-radius-bottomleft/index.html new file mode 100644 index 0000000000..33caabb749 --- /dev/null +++ b/files/de/web/css/-moz-outline-radius-bottomleft/index.html @@ -0,0 +1,22 @@ +--- +title: '-moz-outline-radius-bottomleft' +slug: Web/CSS/-moz-outline-radius-bottomleft +tags: + - CSS + - CSS Eigenschaft + - CSS Referenz + - NeedsCompatTable + - NeedsContent + - NeedsExample + - Non-standard +translation_of: Web/CSS/-moz-outline-radius-bottomleft +--- +<div>{{Non-standard_header}}{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>-moz-outline-radius-bottomleft</code> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft setzt in Mozilla Anwendungen die Rundung der linken unteren Ecke des Umrisses.</p> + +<p>{{cssinfo}}</p> + +<p>Siehe die {{cssxref("-moz-outline-radius")}} Eigenschaft für mehr Informationen.</p> diff --git a/files/de/web/css/-moz-outline-radius-bottomright/index.html b/files/de/web/css/-moz-outline-radius-bottomright/index.html new file mode 100644 index 0000000000..6603060bd4 --- /dev/null +++ b/files/de/web/css/-moz-outline-radius-bottomright/index.html @@ -0,0 +1,22 @@ +--- +title: '-moz-outline-radius-bottomright' +slug: Web/CSS/-moz-outline-radius-bottomright +tags: + - CSS + - CSS Eigenschaft + - CSS Referenz + - NeedsCompatTable + - NeedsContent + - NeedsExample + - Non-standard +translation_of: Web/CSS/-moz-outline-radius-bottomright +--- +<div>{{Non-standard_header}}{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>-moz-outline-radius-bottomright</code> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft setzt in Mozilla Anwendungen die Rundung der rechten unteren Ecke des Umrisses.</p> + +<p>{{cssinfo}}</p> + +<p>Siehe die {{cssxref("-moz-outline-radius")}} Eigenschaft für mehr Informationen.</p> diff --git a/files/de/web/css/-moz-outline-radius-topleft/index.html b/files/de/web/css/-moz-outline-radius-topleft/index.html new file mode 100644 index 0000000000..1129445f62 --- /dev/null +++ b/files/de/web/css/-moz-outline-radius-topleft/index.html @@ -0,0 +1,22 @@ +--- +title: '-moz-outline-radius-topleft' +slug: Web/CSS/-moz-outline-radius-topleft +tags: + - CSS + - CSS Eigenschaft + - CSS Referenz + - NeedsCompatTable + - NeedsContent + - NeedsExample + - Non-standard +translation_of: Web/CSS/-moz-outline-radius-topleft +--- +<div>{{Non-standard_header}}{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>-moz-outline-radius-topleft</code> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft setzt in Mozilla Anwendungen die Rundung der linken oberen Ecke des Umrisses.</p> + +<p>{{cssinfo}}</p> + +<p>Siehe die {{cssxref("-moz-outline-radius")}} Eigenschaft für mehr Informationen.</p> diff --git a/files/de/web/css/-moz-outline-radius-topright/index.html b/files/de/web/css/-moz-outline-radius-topright/index.html new file mode 100644 index 0000000000..4abd5bea36 --- /dev/null +++ b/files/de/web/css/-moz-outline-radius-topright/index.html @@ -0,0 +1,22 @@ +--- +title: '-moz-outline-radius-topright' +slug: Web/CSS/-moz-outline-radius-topright +tags: + - CSS + - CSS Eigenschaft + - CSS Referenz + - NeedsCompatTable + - NeedsContent + - NeedsExample + - Non-standard +translation_of: Web/CSS/-moz-outline-radius-topright +--- +<div>{{Non-standard_header}}{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>-moz-outline-radius-topright</code> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft setzt in Mozilla Anwendungen die Rundung der rechten oberen Ecke des Umrisses.</p> + +<p>{{cssinfo}}</p> + +<p>Siehe die {{cssxref("-moz-outline-radius")}} Eigenschaft für mehr Informationen.</p> diff --git a/files/de/web/css/-moz-outline-radius/index.html b/files/de/web/css/-moz-outline-radius/index.html new file mode 100644 index 0000000000..45213c6b0b --- /dev/null +++ b/files/de/web/css/-moz-outline-radius/index.html @@ -0,0 +1,141 @@ +--- +title: '-moz-outline-radius' +slug: Web/CSS/-moz-outline-radius +tags: + - CSS + - CSS Referenz + - NeedsLiveSample + - Non-standard +translation_of: Web/CSS/-moz-outline-radius +--- +<div>{{Non-standard_header}}{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>In Mozilla Anwendungen wie Firefox kann die <code>-moz-outline-radius</code> CSS Eigenschaft dazu verwendet werden, um Umrissen runde Ecken zu verleihen. Ein {{cssxref("outline", "Umriss")}} ist eine Linie, die um Elemente gezeichnet wird, außerhalb des Randes, um das Element hervorzuheben.</p> + +<p><code>-moz-outline-radius</code> ist eine praktische Kurzschreibweise, um die vier Eigenschaften {{cssxref("-moz-outline-radius-topleft")}}, {{cssxref("-moz-outline-radius-topright")}}, {{cssxref("-moz-outline-radius-bottomright")}} und {{cssxref("-moz-outline-radius-bottomleft")}} zu setzen.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">/* Ein Wert */ +-moz-outline-radius: 25px; + +/* Zwei Werte */ +-moz-outline-radius: 25px 1em; + +/* Drei Werte */ +-moz-outline-radius: 25px 1em 12%; + +/* Vier Werte */ +-moz-outline-radius: 25px 1em 12% 4mm; + +/* Globale Werte */ +-moz-outline-radius: inherit; +-moz-outline-radius: initial; +-moz-outline-radius: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<div class="note">Elliptische Umrisse und <code><percentage></code> Werte folgen der in {{cssxref("border-radius")}} beschriebenen Syntax.</div> + +<p>Ein, zwei, drei oder vier <code><outline-radius></code> Werte, die jeweils einem dieser Werte entsprechen:</p> + +<dl> + <dt><length></dt> + <dd>Siehe {{cssxref("<length>")}} für mögliche Werte.</dd> + <dt><percentage></dt> + <dd>Eine {{cssxref("<percentage>")}}; siehe {{cssxref("border-radius")}} für Details.</dd> +</dl> + +<ul> + <li>Falls ein einzelner Wert gesetzt ist, wird er auf alle 4 Ecken angewendet.</li> + <li>Falls zwei Werte gesetzt sind, bezieht sich der erste auf die linke obere und die rechte untere Ecke und der zweite auf die rechte obere und die linke untere Ecke.</li> + <li>Falls drei Werte gesetzt sind, bezieht sich der erste auf die linke obere Ecke, der zweite auf die rechte obere und die linke untere Ecke und der dritte auf die rechte untere Ecke.</li> + <li>Falls vier Werte gesetzt sind, bezieht sich der erste auf die linke obere Ecke, der zweite auf die rechte obere Ecke, der dritte auf die rechte untere Ecke und der vierte auf die linke untere Ecke.</li> +</ul> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush:css">outline: dotted red; + +-moz-outline-radius: 12% 1em 25px; +/* ist gleichbedeutend mit: */ +-moz-outline-radius-topleft: 12%; +-moz-outline-radius-topright: 1em; +-moz-outline-radius-bottomright: 35px; +-moz-outline-radius-bottomleft: 1em;</pre> + +<h2 id="Hinweise">Hinweise</h2> + +<ul> + <li><code>dotted</code> oder <code>dashed</code> abgerundete Ecken werden durchgehend dargestellt, {{bug("382721")}}.</li> + <li>Zukünftige Versionen von Gecko/Firefox entfernen möglicherweise diese Eigenschaft vollständig. Siehe {{bug("593717")}}.</li> +</ul> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<p>Diese Eigenschaft ist in keinem CSS Standard definiert.</p> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("1.8")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("1.8")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/de/web/css/-moz-stack-sizing/index.html b/files/de/web/css/-moz-stack-sizing/index.html new file mode 100644 index 0000000000..40e35d798f --- /dev/null +++ b/files/de/web/css/-moz-stack-sizing/index.html @@ -0,0 +1,59 @@ +--- +title: '-moz-stack-sizing' +slug: Web/CSS/-moz-stack-sizing +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - NeedsLiveSample + - Non-standard + - XUL +translation_of: Archive/Web/CSS/-moz-stack-sizing +--- +<div>{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9.1")}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p><code>-moz-stack-sizing</code> ist eine erweiterte CSS Eigenschaft. Normalerweise ändert ein {{XULElem("stack")}} seine Größe, sodass alle seine Kindelemente komplett sichtbar sind. Zum Beispiel führt das Verschieben eines Kindelements ganz nach rechts innerhalb eines Stacks dazu, dass der Stack verbreitert wird, sodass das Kindelement sichtbar bleibt.</p> + +<p>Falls es erwünscht ist, den Stack an der automatischen Größenänderung zur Unterbringung aller Kinder zu hindern, kann <code>-moz-stack-sizing</code> beim Kindelement auf <code>ignore</code> gesetzt werden. Die Eigenschaft wird nicht für den Stack selbst, sondern auf dessen Kindelemente gesetzt. Dies erlaubt es, bestimmte Kindelemente zu ignorieren, die anderen aber nicht.</p> + +<p class="note"><strong>Hinweis:</strong> In früheren Gecko Versionen war es möglich, das Problem zu umgehen, indem sehr große negative untere und rechte Außenabstände für das Stackelement angegeben wurden und gleichgroße positive untere und rechte Außenabstände für die Kindelemente, die nicht ignoriert werden sollten. (Das Problem betraf nicht Kindelemente, die über oder links vom Stack verschoben wurden.)</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">/* Schlüsselwortwerte */ +-moz-stack-sizing: stretch-to-fit; +-moz-stack-sizing: ignore; + +/* Globale Werte */ +-moz-stack-sizing: inherit; +-moz-stack-sizing: initial; +-moz-stack-sizing: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt>stretch-to-fit</dt> + <dd>Das Kindelement beeinflusst die Größe des Stacks.</dd> + <dt>ignore</dt> + <dd>Der Stack wird das Kind bei der Berechnung seiner Größe nicht berücksichtigen.</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush:css">.mainsheet { + -moz-stack-sizing: ignore; +} +</pre> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<p>{{bug("346189")}}</p> diff --git a/files/de/web/css/-moz-text-blink/index.html b/files/de/web/css/-moz-text-blink/index.html new file mode 100644 index 0000000000..40ee555a03 --- /dev/null +++ b/files/de/web/css/-moz-text-blink/index.html @@ -0,0 +1,47 @@ +--- +title: '-moz-text-blink' +slug: Web/CSS/-moz-text-blink +tags: + - CSS + - CSS Referenz + - 'CSS:Mozilla Extensions' +translation_of: Archive/Web/CSS/-moz-text-blink +--- +<div>{{CSSRef}}{{non-standard_header}}{{deprecated_header}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die nicht standardisierte <code>-moz-text-blink</code> Mozilla <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft definiert den Blinkmodus.</p> + +<div class="note"> +<p>Firefox, der der einzige große Browser ist, der diese Eigenschaft unterstützt, hat die Unterstützung in Firefox 26 aufgegeben. Diese Eigenschaft wird nun in keinem Browser mehr unterstützt.</p> +</div> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt>none</dt> + <dd>Produziert kein Blinken.</dd> + <dt>blink</dt> + <dd>Text blinkt. Beachte, dass Text nicht blinken zu lassen eine Technik ist, um <a href="http://www.w3.org/TR/UAAG/guidelines.html#tech-on-off-blinking-text" rel="external nofollow" title="http://www.w3.org/TR/UAAG/guidelines.html#tech-on-off-blinking-text">Checkpoint 3.3 der WAI-UAAG</a> zu erfüllen.</dd> +</dl> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush:css">.example { + -moz-text-blink: blink; +}</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<p>Diese Eigenschaft wurde in einem <a href="http://www.w3.org/TR/2003/CR-css3-text-20030514/#text-blink">alten Entwurf der CSS 3 Text Spezifikation</a> definiert. Neuere Versionen haben die Definition entfernt.</p> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.properties.-moz-text-blink")}} diff --git a/files/de/web/css/-moz-user-focus/index.html b/files/de/web/css/-moz-user-focus/index.html new file mode 100644 index 0000000000..2c3e77a9da --- /dev/null +++ b/files/de/web/css/-moz-user-focus/index.html @@ -0,0 +1,117 @@ +--- +title: '-moz-user-focus' +slug: Web/CSS/-moz-user-focus +tags: + - CSS + - CSS Referenz + - 'CSS:Mozilla Erweiterungen' + - NeedsBrowserCompatibility + - NeedsContent + - NeedsExample + - NeedsMobileBrowserCompatibility +translation_of: Web/CSS/-moz-user-focus +--- +<div>{{Non-standard_header}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>-moz-user-focus</code> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft wird dazu benutzt, anzugeben, ob das Element den Fokus haben kann.</p> + +<p>Durch Setzen ihres Wertes auf <code>ignore</code> kann die Fokussierung des Elements deaktiviert werden, was bedeutet, dass der Benutzer das Element nicht aktivieren kann. Das Element wird in der Tabsequenz ausgelassen.</p> + +<p>{{cssinfo}}</p> + +<div class="note"><strong>Hinweis:</strong> Diese Eigenschaft funktioniert nicht bei XUL {{XULElem("textbox")}} Elementen, weil die <code>textbox</code> selbst nie fokussiert werden kann. Stattdessen erzeugt XBL ein anonymes HTML {{HTMLElement("input")}} Element innerhalb der <code>textbox</code> und dieses Element ist dasjenige, das den Fokus erhält. Die <code>textbox</code> kann auch daran gehindert werden, den Tastaturfokus zu erhalten, indem sein Tabindex auf <code>-1</code> gesetzt wird und daran, den Mausfokus zu erhalten, indem die Standardaktion des <code>mousedown</code> Ereignisses verhindert wird.</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">/* Schlüsselwortwerte */ +-moz-user-focus: normal; +-moz-user-focus: ignore; + +/* Globale Werte */ +-moz-user-focus: inherit; +-moz-user-focus: initial; +-moz-user-focus: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code>ignore</code></dt> + <dd>Das Element akzeptiert den Tastaturfokus nicht und wird in der Tabreihenfolge ausgelassen.</dd> + <dt><code>normal</code></dt> + <dd>Das Element kann den Tastaturfokus akzeptieren.</dd> + <dt><code>select-after</code></dt> + <dd>?</dd> + <dt><code>select-before</code></dt> + <dd>?</dd> + <dt><code>select-menu</code></dt> + <dd>?</dd> + <dt><code>select-same</code></dt> + <dd>?</dd> + <dt><code>select-all</code></dt> + <dd>?</dd> + <dt><code>none</code></dt> + <dd>?</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<p>Diese Eigenschaft ist nicht Teil einer Spezifikation. Eine ähnliche Eigenschaft <code>user-focus</code> wurde in <a class="external" href="http://www.w3.org/TR/2000/WD-css3-userint-20000216">frühen Entwürfen eines Vorläufers der CSS3 UI Spezifikation</a> vorgeschlagen, jedoch von der Arbeitsgruppe abgelehnt.</p> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Android</th> + <th>Chrome für Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/de/web/css/-moz-user-input/index.html b/files/de/web/css/-moz-user-input/index.html new file mode 100644 index 0000000000..a9237a1778 --- /dev/null +++ b/files/de/web/css/-moz-user-input/index.html @@ -0,0 +1,64 @@ +--- +title: '-moz-user-input' +slug: Web/CSS/-moz-user-input +tags: + - CSS + - CSS Referenz + - Non-standard +translation_of: Web/CSS/-moz-user-input +--- +<div>{{Non-standard_header}}{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>In Mozilla Anwendungen bestimmt die <code>-moz-user-input</code> CSS Eigenschaft, ob ein Element Benutzereingaben zulässt. Eine ähnliche Eigenschaft <code>user-focus</code> wurde in <a class="external" href="http://www.w3.org/TR/2000/WD-css3-userint-20000216">frühen Entwürfen eines Vorläufers der CSS3 UI Spezifikation</a> definiert, wurde jedoch von der Arbeitsgruppe verworfen.</p> + +<p>{{cssinfo}}</p> + +<p><code>-moz-user-input</code> war einer der Vorschläge, der zu der vorgeschlagenen CSS 3 {{cssxref("user-input")}} Eigenschaft führten, welche noch nicht Candidate Recommendation (benötigt Implementierungen) erreicht hat.</p> + +<p>Für Elemente, die normalerweise Benutzereingaben ermöglichen wie beispielsweise {{HTMLElement("textarea")}}, ist der Initialwert von <code>-moz-user-input</code> <code>enabled</code>.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">/* Schlüsselwortwerte */ +-moz-user-input: none; +-moz-user-input: enabled; +-moz-user-input: disabled; + +/* Globale Werte */ +-moz-user-input: inherit; +-moz-user-input: initial; +-moz-user-input: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt>none</dt> + <dd>Das Element reagiert nicht auf Benutzereingaben und wird nicht {{Cssxref(":active")}}.</dd> + <dt>enabled</dt> + <dd>Das Element akzeptiert Benutzereingaben. Für Texteingabefelder ist dies das Standardverhalten.</dd> + <dt>disabled</dt> + <dd>Das Element akzeptiert keine Benutzereingaben. Dies ist jedoch insofern nicht dasselbe wie das Setzen von {{XULAttr("disabled")}} auf <code>true</code>, als dass das Element normal dargestellt wird.</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush:css">input.example { + /* Der Benutzer kann den Text markieren, ihn jedoch nicht ändern. */ + -moz-user-input: disabled; +} +</pre> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{cssxref("-moz-user-focus")}}</li> + <li>{{cssxref("-moz-user-modify")}}</li> + <li>{{cssxref("-moz-user-select")}}</li> +</ul> diff --git a/files/de/web/css/-moz-user-modify/index.html b/files/de/web/css/-moz-user-modify/index.html new file mode 100644 index 0000000000..d1ec135fa0 --- /dev/null +++ b/files/de/web/css/-moz-user-modify/index.html @@ -0,0 +1,133 @@ +--- +title: '-moz-user-modify' +slug: Web/CSS/-moz-user-modify +tags: + - CSS + - CSS Referenz + - NeedsMobileBrowserCompatibility + - Non-standard +translation_of: Web/CSS/user-modify +--- +<div>{{Non-standard_header}}{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>-moz-user-modify</code> Eigenschaft bestimmt, ob der Inhalt eines Elementes vom Benutzer bearbeitet werden kann oder nicht. Diese Eigenschaft ist ähnlich zum {{htmlattrxref("contenteditable")}} Attribut. Eine ähnliche Eigenschaft <code>user-focus</code> wurde in <a class="external" href="http://www.w3.org/TR/2000/WD-css3-userint-20000216">frühen Entwürfen eines Vorläufers der CSS3 UI Spezifikation</a> vorgeschlagen, jedoch von der Arbeitsgruppe verworfen.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">/* Schlüsselwortwerte */ +-moz-user-modify: read-only; +-moz-user-modify: read-write; +-moz-user-modify: write-only; + +/* Globale Werte */ +-moz-user-modify: inherit; +-moz-user-modify: initial; +-moz-user-modify: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt>read-only</dt> + <dd>Standardwert. Inhalte sind nur lesbar.</dd> + <dt>read-write</dt> + <dd>Der Benutzer kann Inhalte lesen und schreiben.</dd> + <dt>write-only</dt> + <dd>Der Benutzer kann Inhalte bearbeiten, jedoch nicht lesen.</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiel">Beispiel</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush:css">.readwrite { + -moz-user-modify: read-write; + -webkit-user-modify: read-write; +} +</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush:html"><div class="readwrite">Der Benutzer kann diesen Text ändern.</div> +</pre> + +<h3 id="Ergebnis">Ergebnis</h3> + +<p>{{EmbedLiveSample("Beispiel", 300, 30)}}</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<p><code>user-modify</code> in <a class="external" href="http://www.w3.org/TR/2000/WD-css3-userint-20000216#user-modify" lang="en">einem frühen Entwurf der CSS 3 User Interface Spezifikation</a> (Working Draft vom Februar 2000, jetzt überholt durch <em>CSS 3 Basic User Interface</em>).</p> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}} {{property_prefix("-moz")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>3.0 {{property_prefix("-webkit")}}<sup>[1]</sup></td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Auch unterstützt: <code>-webkit-user-modify: read-write-plaintext-only</code> (Richtext geht verloren).<br> + Diese Eigenschaft wird in Safari 2.0 <code>-khtml-user-modify</code> genannt.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{cssxref("-moz-user-focus")}}</li> + <li>{{cssxref("-moz-user-input")}}</li> + <li>{{cssxref("-moz-user-select")}}</li> +</ul> diff --git a/files/de/web/css/-moz-user-select/index.html b/files/de/web/css/-moz-user-select/index.html new file mode 100644 index 0000000000..aefa619439 --- /dev/null +++ b/files/de/web/css/-moz-user-select/index.html @@ -0,0 +1,55 @@ +--- +title: '-moz-user-select' +slug: Web/CSS/-moz-user-select +tags: + - CSS + - CSS Referenz + - 'CSS:Mozilla Erweiterungen' +translation_of: Web/CSS/user-select +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Übersicht">Übersicht</h2> + +<p>In Mozilla Anwendungen steuert die <code>-moz-user-select</code> Eigenschaft, ob und wie ein Text ausgewählt werden kann.</p> + +<ul> + <li>Standardwert: <code>text</code></li> + <li>Anwendbar auf: alle Elemente</li> + <li>Vererbbar: Ja</li> + <li>Prozentwerte: Nein</li> + <li>Medium: visuell</li> + <li>berechneter Wert: wie festgelegt</li> +</ul> + +<h2 id="Syntax">Syntax</h2> + +<pre class="eval">-moz-user-select: text | all | none| -moz-none | inherit +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt>text</dt> + <dd>Der Text kann vom Benutzer ausgewählt werden.</dd> + <dt>all</dt> + <dd>Bei einem einfachem Klick auf das Element wird der gesamte Text ausgewählt. Bei einem Doppelklick auf das Element wird der höchste Vorfahr ausgewählt.</dd> + <dt>none</dt> + <dd>Der Text eines Elements und dessen Kindelemente können nicht ausgewählt werden. Wird jedoch eine <a href="/de/DOM/Selection">Auswahl über das DOM</a> getätigt, sind diese Elemente darin enthalten.</dd> + <dt>-moz-none</dt> + <dd>Der Text eines Elements und dessen Kindelemente können nicht ausgewählt werden. Die Auswahl kann bei Kindelementen aktiviert werden, wenn dort <code>-moz-user-select: text</code> festgelegt wird.</dd> + <dt>inherit</dt> + <dd>Der Wert des Elternelements wird geerbt.</dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<pre>/* Schaltet Textauswahl ab */ +-moz-user-select: none +</pre> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/CSS/::selection"><code>::selection</code></a></li> +</ul> diff --git a/files/de/web/css/-moz-window-shadow/index.html b/files/de/web/css/-moz-window-shadow/index.html new file mode 100644 index 0000000000..9571b99e0d --- /dev/null +++ b/files/de/web/css/-moz-window-shadow/index.html @@ -0,0 +1,53 @@ +--- +title: '-moz-window-shadow' +slug: Web/CSS/-moz-window-shadow +tags: + - CSS + - CSS Eigenschaft + - NeedsCompatTable + - Non-standard + - Referenz + - XUL +translation_of: Archive/Web/CSS/-moz-window-shadow +--- +<div>{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9.1")}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>-moz-window-shadow</code> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft bestimmt, ob ein Fenster einen Schatten wirft oder nicht. Sie funktioniert nur unter Mac OS X.</p> + +<div class="note"> +<p>Diese Eigenschaft ist nicht standardisiert und kann ab Firefox 44 nicht mehr in Webseiten verwendet werden.</p> +</div> + +<p>{{cssinfo}}</p> + +<p>Firefox 3 hat die Unterstützung für transparente Fenster unter Mac OS X hinzugefügt. Jedoch waren für diese Fenster Schatten deaktiviert und es gab keine Möglichkeit, diese zu aktivieren.</p> + +<p>In Firefox 3.5 wurde der Standardwert geändert; alle Fenster haben nun einen Schatten. Es wurde die <code>-moz-window-shadow</code> CSS Eigenschaft eingeführt, um umgewollte Schatten ausschalten zu können.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt>default</dt> + <dd>Das Fenster wirft einen Schatten mit dem Standard Fensterschattenstil.</dd> + <dt>menu {{gecko_minversion_inline("2.0")}}</dt> + <dd>Das Fenster hat einen Schatten, der für Menüs passend ist.</dd> + <dt>tooltip {{gecko_minversion_inline("2.0")}}</dt> + <dd>Das Fenster hat einen Schatten, der für Tooltips passend ist.</dd> + <dt>sheet {{gecko_minversion_inline("2.0")}}</dt> + <dd>Das Fenster hat einen Schatten, der für Sheetfenster passend ist.</dd> + <dt>none</dt> + <dd>Das Fenster hat keinen Schatten.</dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush:css">.KUI-panel { + -moz-window-shadow: none; +} +</pre> diff --git a/files/de/web/css/-webkit-box-reflect/index.html b/files/de/web/css/-webkit-box-reflect/index.html new file mode 100644 index 0000000000..08b974fd4e --- /dev/null +++ b/files/de/web/css/-webkit-box-reflect/index.html @@ -0,0 +1,116 @@ +--- +title: '-webkit-box-reflect' +slug: Web/CSS/-webkit-box-reflect +tags: + - CSS + - Eigenschaft + - Non-standard + - Referenz +translation_of: Web/CSS/-webkit-box-reflect +--- +<div>{{Non-standard_header}}{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>-webkit-box-reflect</code> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft reflektiert den Inhalt eines Elements in einer bestimmten Richtung.</p> + +<div class="warning"><strong>Hinweis:</strong> Dieses Feature ist <strong>nicht dazu gedacht, auf Webseiten verwendet zu werden</strong>. Um Reflektionen im Web zu erreichen, ist der Standardweg die Benutzung der CSS {{cssxref("element", "element()")}} Funktion.</div> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">/* Richtungswerte */ +-webkit-box-reflect: above; +-webkit-box-reflect: below; +-webkit-box-reflect: left; +-webkit-box-reflect: right; + +/* Versatzwert */ +-webkit-box-reflect: below 10px; + +/* Maskenwert */ +-webkit-box-reflect: below 0 linear-gradient(transparent, white); + +/* Globale Werte */ +-webkit-box-reflect: inherit; +-webkit-box-reflect: initial; +-webkit-box-reflect: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code>above</code><em>, </em><code>below</code><em>, </em><code>right</code><em>, </em><code>left</code></dt> + <dd>Sind Schlüsselwörter, die angeben, in welche Richtung die Reflektion stattfinden soll.</dd> + <dt><code><length></code></dt> + <dd>Gibt die Größe der Reflektion an.</dd> + <dt><code><image></code></dt> + <dd>Beschreibt die Maske, die auf die Reflektion angewendet werden soll.</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<p>Diese Eigenschaft ist nicht standardisiert und wird nicht Teil von CSS sein. Der Standardweg, um eine Reflektion in CSS zu erzeugen, ist die Verwendung der CSS Funktion {{cssxref("element", "element()")}}.</p> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome("4.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatOpera("15.0")}}</td> + <td>{{CompatSafari("4.0")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatNo}}</td> + <td>{{CompatAndroid("2.1")}}</td> + <td>{{CompatNo}}</td> + <td>22.0 {{CompatVersionUnknown}}</td> + <td>3.2 {{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Die Apple <a class="external" href="http://developer.apple.com/library/safari/documentation/appleapplications/reference/safaricssref/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-SW16" title="http://developer.apple.com/library/safari/documentation/appleapplications/reference/safaricssref/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-SW16">Documentation</a></li> + <li>Die Webkit <a href="https://www.webkit.org/blog/182/css-reflections/">Spezifikation</a></li> + <li>Lea Verous Artikel bezüglich Reflektion unter Vernwendung von <a class="external" href="http://lea.verou.me/2011/06/css-reflections-for-firefox-with-moz-element-and-svg-masks/" title="http://lea.verou.me/2011/06/css-reflections-for-firefox-with-moz-element-and-svg-masks/">standardisierten CSS Features</a>.</li> +</ul> diff --git a/files/de/web/css/-webkit-mask-origin/index.html b/files/de/web/css/-webkit-mask-origin/index.html new file mode 100644 index 0000000000..21f3b18534 --- /dev/null +++ b/files/de/web/css/-webkit-mask-origin/index.html @@ -0,0 +1,100 @@ +--- +title: '-webkit-mask-origin' +slug: Web/CSS/-webkit-mask-origin +tags: + - CSS + - Referenz +translation_of: Web/CSS/mask-origin +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<p>Die <code>-webkit-mask-origin</code> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft bestimmt den Ursprungspunkt des Maskenbildes. Der Wert der {{cssxref("-webkit-mask-position")}} Eigenschaft wird relativ zum Wert dieser Eigenschaft interpretiert. Diese Eigenschaft wird nicht angewendet, wenn <code>-webkit-mask-attachment</code> <code>fixed</code> ist.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Werte">Werte</h2> + +<dl> + <dt>padding</dt> + <dd>Standardwert. Die Position des Maskenbildes ist relativ zum Innenabstand. (Für einzelne Boxen ist <code>"0 0</code>" die linke obere Ecke des Randes des Innenabstands, "<code>100% 100%</code>" ist die untere rechte Ecke.)</dd> + <dt>border</dt> + <dd>Die Position des Maskenbildes ist relativ zum Rand.</dd> + <dt>content</dt> + <dd>Das Maskenbild ist relativ zum Inhalt.</dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush: css">.example { + border: 10px double; + padding: 10px; + -webkit-mask-image: url('mask.png'); + + /* Das Maskenbild ist innerhalb des Innenabstands. */ + -webkit-mask-origin: content; +} +</pre> + +<pre class="brush: css">div { + -webkit-mask-image: url('mask1.png'), url('mask2.png'); + -webkit-mask-origin: padding, content; +} +</pre> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>1.0</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>4.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>2.1</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>3.2</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<p>{{cssxref("-webkit-mask")}}, {{cssxref("-webkit-mask-box-image")}}, {{cssxref("-webkit-mask-attachment")}}, {{cssxref("-webkit-mask-image")}},{{cssxref("-webkit-mask-composite")}}, {{cssxref("-webkit-mask-repeat")}}, {{cssxref("-webkit-mask-clip")}}</p> diff --git a/files/de/web/css/-webkit-mask-position-x/index.html b/files/de/web/css/-webkit-mask-position-x/index.html new file mode 100644 index 0000000000..04586fef38 --- /dev/null +++ b/files/de/web/css/-webkit-mask-position-x/index.html @@ -0,0 +1,124 @@ +--- +title: '-webkit-mask-position-x' +slug: Web/CSS/-webkit-mask-position-x +translation_of: Web/CSS/-webkit-mask-position-x +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<p> </p> + +<p>Die CSS-Eigenschaft <code>-webkit-mask-position-x</code> legt die anfängliche horizontale Position eines Maskenbilds (Bild mit einer Maske) fest.</p> + +<pre class="brush: css no-line-numbers">/* Keyword values */ +-webkit-mask-position-x: left; +-webkit-mask-position-x: center; +-webkit-mask-position-x: right; + +/* <percentage> values */ +-webkit-mask-position-x: 100%; +-webkit-mask-position-x: -50%; + +/* <length> values */ +-webkit-mask-position-x: 50px; +-webkit-mask-position-x: -1cm; + +/* Multiple values values */ +-webkit-mask-position-x: 50px, 25%, -3em; + +/* Global values */ +-webkit-mask-position-x: inherit; +-webkit-mask-position-x: initial; +-webkit-mask-position-x: unset; +</pre> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code><length-percentage></code></dt> + <dd>Eine Länge, die die Position der linken Kante des Bildes relativ zur linken Füllkante der Box angibt. Die Prozentsätze werden anhand der horizontalen Abmessung des Box-Padding-Bereichs berechnet. Das heißt, ein Wert von <code>0%</code> bedeutet, dass die linke Kante des Bildes mit der linken Füllkante der Box ausgerichtet ist und ein Wert von <code>100%</code> bedeutet, dass die rechte Kante des Bildes mit der rechten Füllkante der Box ausgerichtet ist.</dd> + <dt><code><strong>left</strong></code></dt> + <dd>Gleichwertig mit <code>0%</code>.</dd> + <dt><code><strong>center</strong></code></dt> + <dd>Gleichwertig mit <code>50%</code>.</dd> + <dt><code><strong>right</strong></code></dt> + <dd>Gleichwertig mit <code>100%</code>.</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush:css">.exampleOne { + -webkit-mask-image: url(mask.png); + -webkit-mask-position-x: right; +} + +.exampleTwo { + -webkit-mask-image: url(mask.png); + -webkit-mask-position-x: 25%; +} +</pre> + +<h2 id="Spezifikation">Spezifikation</h2> + +<p>Kein Teil einer Spezifikation.</p> + +<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>4.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Sehenswert">Sehenswert</h2> + +<p>{{cssxref("-webkit-mask-position")}}, {{cssxref("-webkit-mask-position-y")}}, {{cssxref("-webkit-mask-origin")}}, {{cssxref("-webkit-mask-attachment")}}</p> diff --git a/files/de/web/css/-webkit-mask-position-y/index.html b/files/de/web/css/-webkit-mask-position-y/index.html new file mode 100644 index 0000000000..d0c972990c --- /dev/null +++ b/files/de/web/css/-webkit-mask-position-y/index.html @@ -0,0 +1,122 @@ +--- +title: '-webkit-mask-position-y' +slug: Web/CSS/-webkit-mask-position-y +translation_of: Web/CSS/-webkit-mask-position-y +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<p>Die CSS-Eigenschaft <code>-webkit-mask-position-y</code> legt die anfängliche vertikale Position eines Maskenbilds (Bild mit einer Maske) fest.</p> + +<pre class="brush: css no-line-numbers">/* Keyword values */ +-webkit-mask-position-y: top; +-webkit-mask-position-y: center; +-webkit-mask-position-y: bottom; + +/* <percentage> values */ +-webkit-mask-position-y: 100%; +-webkit-mask-position-y: -50%; + +/* <length> values */ +-webkit-mask-position-y: 50px; +-webkit-mask-position-y: -1cm; + +/* Multiple values values */ +-webkit-mask-position-y: 50px, 25%, -3em; + +/* Global values */ +-webkit-mask-position-y: inherit; +-webkit-mask-position-y: initial; +-webkit-mask-position-y: unset; +</pre> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code><length-percentage></code></dt> + <dd>Eine Länge, die die Position der oberen Seite des Bildes relativ zur oberen Kante der Box angibt. Die Prozentsätze werden anhand der vertikalen Abmessung des Box-Padding-Bereichs berechnet. Ein Wert von <code>0%</code> bedeutet, dass der obere Rand des Bilds mit der oberen Füllkante der Box ausgerichtet ist und ein Wert von <code>100%</code> bedeutet, dass die untere Kante des Bildes mit der unteren Füllkante der Box ausgerichtet ist.</dd> + <dt><code><strong>top</strong></code></dt> + <dd>Gleichwertig zu <code>0%</code>.</dd> + <dt><code><strong>bottom</strong></code></dt> + <dd>Gleichwertig zu <code>100%</code>.</dd> + <dt><code><strong>center</strong></code></dt> + <dd>Gleichwertig zu <code>50%</code>.</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush:css">.exampleOne { + -webkit-mask-image: url(mask.png); + -webkit-mask-position-y: bottom; +} + +.exampleTwo { + -webkit-mask-image: url(mask.png); + -webkit-mask-position-y: 25%; +} +</pre> + +<h2 id="Spezifikation">Spezifikation</h2> + +<p>Kein Teil einer Spezifikation.</p> + +<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>4.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Sehenswert">Sehenswert</h2> + +<p>{{cssxref("-webkit-mask-position")}}, {{cssxref("-webkit-mask-position-x")}}, {{cssxref("-webkit-mask-origin")}}, {{cssxref("-webkit-mask-attachment")}}</p> diff --git a/files/de/web/css/-webkit-mask-repeat-x/index.html b/files/de/web/css/-webkit-mask-repeat-x/index.html new file mode 100644 index 0000000000..15ab8b1f66 --- /dev/null +++ b/files/de/web/css/-webkit-mask-repeat-x/index.html @@ -0,0 +1,128 @@ +--- +title: '-webkit-mask-repeat-x' +slug: Web/CSS/-webkit-mask-repeat-x +translation_of: Web/CSS/-webkit-mask-repeat-x +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<p> </p> + +<p>Die Eigenschaft <code>-webkit-mask-repeat-x</code> gibt an, ob und wie ein Maskenbild horizontal wiederholt wird.</p> + +<pre class="brush:css no-line-numbers">/* Keyword values */ +-webkit-mask-repeat-x: repeat; +-webkit-mask-repeat-x: no-repeat; +-webkit-mask-repeat-x: space; +-webkit-mask-repeat-x: round; + +/* Multiple values */ +-webkit-mask-repeat-x: repeat, no-repeat, space; + +/* Global values */ +-webkit-mask-repeat-x: inherit; +-webkit-mask-repeat-x: initial; +-webkit-mask-repeat-x: unset; +</pre> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt>repeat</dt> + <dd>Das Maskenbild wird sowohl horizontal als auch vertikal wiederholt.</dd> + <dt>no-repeat</dt> + <dd>Das Maskenbild wird nicht wiederholt, nur eine Kopie des Maskenbildes wird gezeichnet. Der Rest des Inhalts des maskierten Elements wird nicht angezeigt.</dd> + <dt>space</dt> + <dd>Das Bild wird so oft wie möglich wiederholt, ohne zu beschneiden. Das erste und das letzte Bild sind an jeder Seite des Elements angeheftet und Leerräume sind gleichmäßig zwischen den Bildern verteilt. Die Eigenschaft {{cssxref ("mask-position")}} wird ignoriert, es sei denn, nur ein Bild kann ohne Übersteuerung angezeigt werden. Der einzige Fall, in dem Clipping mit Leerzeichen auftritt, ist, wenn nicht genügend Platz vorhanden ist, um ein Bild anzuzeigen.</dd> + <dt>round</dt> + <dd>Wenn der erlaubte Platz vergrößert wird, werden sich die wiederholten Bilder dehnen (ohne Lücken zu hinterlassen), bis Platz für einen weiteren Platz vorhanden ist. Wenn das nächste Bild hinzugefügt wird, werden alle aktuellen komprimiert, um Platz zu schaffen. Beispiel: Ein Bild mit einer ursprünglichen Breite von 260 Pixeln, das dreimal wiederholt wird, könnte sich dehnen, bis jede Wiederholung 300 Pixel breit ist, und dann wird ein weiteres Bild hinzugefügt. Sie werden dann auf 225px komprimieren.</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush: css">.exampleone { + -webkit-mask-image: url('mask.png'); + -webkit-mask-repeat-x: repeat; +} + +.exampletwo { + -webkit-mask-image: url('mask.png'); + -webkit-mask-repeat-x: no-repeat; +} +</pre> + +<h3 id="Support_für_mehrere_Bildmasken">Support für mehrere Bildmasken</h3> + +<p>Sie können für jedes Maskenbild, getrennt durch Kommas, einen anderen <code><repeat-style> </code>angeben:</p> + +<pre class="brush: css">.examplethree { + -webkit-mask-image: url('mask1.png'), url('mask2.png'); + -webkit-mask-repeat-x: repeat, space; +} +</pre> + +<p>Jedes Bild wird mit dem entsprechenden Wiederholungsstil verglichen, vom ersten bis zum letzten.</p> + +<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Während die Eigenschaft selbst erkannt wird, akzeptiert sie keine Werte.</p> + +<h2 id="Sehenswert">Sehenswert</h2> + +<p>{{cssxref("-webkit-mask-repeat")}}, {{cssxref("-webkit-mask-repeat-y")}}</p> diff --git a/files/de/web/css/-webkit-mask-repeat-y/index.html b/files/de/web/css/-webkit-mask-repeat-y/index.html new file mode 100644 index 0000000000..e969fc9482 --- /dev/null +++ b/files/de/web/css/-webkit-mask-repeat-y/index.html @@ -0,0 +1,126 @@ +--- +title: '-webkit-mask-repeat-y' +slug: Web/CSS/-webkit-mask-repeat-y +translation_of: Web/CSS/-webkit-mask-repeat-y +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<p>Die Eigenschaft <code>-webkit-mask-repeat-y</code> gibt an, ob und wie ein Maskenbild vertikal wiederholt wird.</p> + +<pre class="brush:css no-line-numbers">/* Keyword values */ +-webkit-mask-repeat-y: repeat; +-webkit-mask-repeat-y: no-repeat; +-webkit-mask-repeat-y: space; +-webkit-mask-repeat-y: round; + +/* Multiple values */ +-webkit-mask-repeat-y: repeat, no-repeat, space; + +/* Global values */ +-webkit-mask-repeat-y: inherit; +-webkit-mask-repeat-y: initial; +-webkit-mask-repeat-y: unset; +</pre> + +<p>{{cssinfo}}</p> + +<h3 id="Syntax">Syntax</h3> + +<h2 id="Werte">Werte</h2> + +<dl> + <dt>repeat</dt> + <dd>Das Maskenbild wird vertikal wiederholt.</dd> + <dt>no-repeat</dt> + <dd>Das Maskenbild wird nicht vertikal wiederholt, nur eine Kopie des Maskenbildes wird in vertikaler Richtung gezeichnet. Der vertikale Rest des Inhalts des maskierten Elements wird nicht angezeigt.</dd> + <dt>space</dt> + <dd>Das Bild wird so oft wie möglich wiederholt, ohne zu beschneiden. Das erste und das letzte Bild werden am oberen und unteren Rand des Elements fixiert, und Leerräume werden gleichmäßig zwischen den Bildern verteilt. Die Eigenschaft {{cssxref ("mask-position")}} wird ignoriert, es sei denn, nur ein Bild kann ohne Übersteuerung angezeigt werden. Der einzige Fall, in dem Clipping mit Leerzeichen auftritt, ist, wenn nicht genügend Platz vorhanden ist, um ein Bild anzuzeigen.</dd> + <dt>round</dt> + <dd>Wenn der erlaubte vertikale Raum größer wird, dehnen sich die wiederholten Bilder (ohne Lücken), bis Platz für einen weiteren Platz ist. Wenn das nächste Bild hinzugefügt wird, werden alle aktuellen komprimiert, um Platz zu schaffen. Beispiel: Ein Bild mit einer ursprünglichen Höhe von 260 Pixeln, das dreimal wiederholt wird, kann sich dehnen, bis jede Wiederholung 300 Pixel hoch ist, und dann wird ein weiteres Bild hinzugefügt. Sie werden dann auf eine Höhe von 225px komprimieren.</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush: css">.exampleone { + -webkit-mask-image: url('mask.png'); + -webkit-mask-repeat-y: repeat; +} + +.exampletwo { + -webkit-mask-image: url('mask.png'); + -webkit-mask-repeat-y: no-repeat; +} +</pre> + +<h3 id="Support_für_mehrere_Bildmasken">Support für mehrere Bildmasken</h3> + +<p>Sie können für jedes Maskenbild, getrennt durch Kommas, einen anderen <code><repeat-style></code> angeben:</p> + +<pre class="brush: css">.examplethree { + -webkit-mask-image: url('mask1.png'), url('mask2.png'); + -webkit-mask-repeat-y: repeat, space; +} +</pre> + +<p>Jedes Bild wird mit dem entsprechenden Wiederholungsstil verglichen, vom ersten bis zum letzten.</p> + +<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Während die Eigenschaft selbst erkannt wird, akzeptiert sie keine Werte.</p> + +<h2 id="Sehenswert">Sehenswert</h2> + +<p>{{cssxref("-webkit-mask-repeat")}}, {{cssxref("-webkit-mask-repeat-x")}}</p> diff --git a/files/de/web/css/-webkit-mask-repeat/index.html b/files/de/web/css/-webkit-mask-repeat/index.html new file mode 100644 index 0000000000..cef03cef91 --- /dev/null +++ b/files/de/web/css/-webkit-mask-repeat/index.html @@ -0,0 +1,127 @@ +--- +title: '-webkit-mask-repeat' +slug: Web/CSS/-webkit-mask-repeat +tags: + - CSS +translation_of: Web/CSS/mask-repeat +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>-webkit-mask-repeat</code> Eigenschaft gibt an, ob und wie ein Maskenbild wiederholt (gekachelt) wird.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: css">/* Einzelne Schlüsselwortwerte */ +-webkit-mask-repeat: repeat; +-webkit-mask-repeat: repeat-x; +-webkit-mask-repeat: repeat-y; +-webkit-mask-repeat: no-repeat; + +/* Mehrer Schlüsselwortwerte */ +-webkit-mask-repeat: repeat, repeat-x, no-repeat; + +/* Globale Werte */ +-webkit-mask-repeat: inherit; +-webkit-mask-repeat: initial; +-webkit-mask-repeat: unset; +</pre> + +<h2 id="Werte">Werte</h2> + +<dl> + <dt>repeat</dt> + <dd>Das Maskenbild wird horizontal und vertikal wiederholt.</dd> + <dt>repeat-x</dt> + <dd>Das Maskenbild wird nur horizontal wiederholt.</dd> + <dt>repeat-y</dt> + <dd>Das Maskenbild wird nur vertikal wiederholt.</dd> + <dt>no-repeat</dt> + <dd>Das Maskenbild wird nicht wiederholt; nur eine Kopie des Maskenbildes wird gezeichnet. Der Rest des Inhalts des maskierten Elements wird nicht dargestellt.</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush: css">.exampleone { + -webkit-mask-image: url('mask.png'); + -webkit-mask-repeat: repeat-x; +} + +.exampletwo { + -webkit-mask-image: url('mask.png'); + -webkit-mask-repeat: no-repeat; +} +</pre> + +<h3 id="Unterstützung_mehrerer_Maskenbilder">Unterstützung mehrerer Maskenbilder</h3> + +<p>Für jedes Maskenbild kann ein unterschiedlicher <code><repeat-style></code> Wert angegeben werden, der durch Kommas getrennt wird:</p> + +<pre class="brush: css">.examplethree { + -webkit-mask-image: url('mask1.png'), url('mask2.png'); + -webkit-mask-repeat: repeat-x, repeat-y; +} +</pre> + +<p>Jedes Bild wird dem zugehörigen Wiederholungsstil zugeordnet, vom zuerst bis zum zuletzt angegebenen.</p> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>1.0</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>4.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>2.1</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>3.2</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<p>{{cssxref("-webkit-mask")}}, {{cssxref("-webkit-mask-box-image")}}, {{cssxref("-webkit-mask-clip")}}, {{cssxref("-webkit-mask-origin")}}, {{cssxref("-webkit-mask-attachment")}}, {{cssxref("-webkit-mask-image")}}, {{cssxref("-webkit-mask-composite")}}</p> diff --git a/files/de/web/css/-webkit-overflow-scrolling/index.html b/files/de/web/css/-webkit-overflow-scrolling/index.html new file mode 100644 index 0000000000..e563f1bc33 --- /dev/null +++ b/files/de/web/css/-webkit-overflow-scrolling/index.html @@ -0,0 +1,95 @@ +--- +title: '-webkit-overflow-scrolling' +slug: Web/CSS/-webkit-overflow-scrolling +tags: + - CSS + - CSS Eigenschaft + - CSS Referenz + - NeedsBrowserCompatibility + - NeedsLiveSample + - NeedsMobileBrowserCompatibility + - Non-standard +translation_of: Web/CSS/-webkit-overflow-scrolling +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>-webkit-overflow-scrolling</code> CSS Eigenschaft bestimmt, ob Touchgeräte impulsbasiertes Scrolling für ein Element verwenden oder nicht.</p> + +<h2 id="Werte">Werte</h2> + +<dl> + <dt><code>auto</code></dt> + <dd>"Reguläres" Scrolling wird verwendet, wobei der Inhalt sofort aufhört zu scrollen, wenn der Finger vom Touchscreen entfernt wird.</dd> + <dt><code>touch</code></dt> + <dd>Impulsbasiertes Scrolling wird verwendet, wobei der Inhalt für einen Moment weiterscrollt nachdem die Scrollgeste beendet und der Finger vom Touchscreen entfernt wurde. Die Geschwindigkeit und Dauer des Weiterscrollens ist proportional zur Stärke der Scrollgeste. Erzeugt auch einen neuen Stackingkontext.</dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush: css">-webkit-overflow-scrolling: touch; /* lets it scroll lazy */ + +-webkit-overflow-scrolling: auto; /* stop scrolling immediately */ +</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<p>Nicht Teil einer Spezifikation.</p> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>5.0</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="http://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/">CSS-Tricks Artikel mit Demo</a></li> + <li><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/css/property/-webkit-overflow-scrolling"><code>-webkit-overflow-scrolling</code> Eintrag in Safari CSS-Referenz</a></li> +</ul> diff --git a/files/de/web/css/-webkit-print-color-adjust/index.html b/files/de/web/css/-webkit-print-color-adjust/index.html new file mode 100644 index 0000000000..37712aa627 --- /dev/null +++ b/files/de/web/css/-webkit-print-color-adjust/index.html @@ -0,0 +1,97 @@ +--- +title: '-webkit-print-color-adjust' +slug: Web/CSS/-webkit-print-color-adjust +tags: + - CSS + - CSS Eigenschaft + - Layout + - NeedsExample + - Non-standard + - Web +translation_of: Web/CSS/-webkit-print-color-adjust +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<p>Die <code>-webkit-print-color-adjust</code> Eigenschaft ist eine nicht standardisierte CSS Erweiterung, die dazu verwendet werden kann, um das Drucken von Hintergrundfarben und -bildern in Browsern zu erzwingen, die auf der WebKit Engine basieren.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">-webkit-print-color-adjust: economy | exact +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code>economy</code></dt> + <dd>Normales Verhalten. Hintergrundfarben und -bilder werden nur gedruckt, falls der Benutzer dies explizit in den Druckeinstellungen seines Browsers erlaubt.</dd> + <dt><code>exact</code></dt> + <dd>Hintergrundfarben und -bilder des Elements, auf den die Regel zutrifft, werden immer gedruckt. Die Druckeinstellungen des Benutzers werden überschrieben.</dd> +</dl> + +<h2 id="Vererbung">Vererbung</h2> + +<p>Diese Eigenschaft wird <a href="/de/docs/Web/Guide/CSS/Getting_started/Kaskadierung_und_vererbung">vererbt</a>.</p> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>6.0<sup>[2]</sup></td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Chrome druckt keine Hintergründe des {{HTMLElement("body")}} Elements. Falls diese Eigenschaft für das <code><body></code> Element auf <code>exact</code> gesetzt ist, wird sie nur auf dessen Unterknoten angewendet.</p> + +<p>Wenn Hintergrundbilder zugeschnitten sind (zum Beispiel wenn Sprites als Hintergrundbilder verwendet werden), werden sie wegen<a href="http://code.google.com/p/chromium/issues/detail?id=131054"> Chromium Bug 131054</a> verzerrt dargestellt, wenn sie im Chrome Browser mit <code>-webkit-print-color-adjust: exact</code> gedruckt werden. Einfarbige Hintergründe und Hintergrundbilder, die nicht zugeschnitten sind (d. h. sie haben eine kleinere Breite und Höhe als das Element, auf das sie angewendet werden), werden korrekt gedruckt.</p> + +<p>[2] Safari druckt keine Hintergründe des {{HTMLElement("body")}} Elements. Falls diese Eigenschaft für das <code><body></code> Element auf <code>exact</code> gesetzt ist, wird sie nur auf dessen Unterknoten angewendet.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>WebKit <a href="https://bugs.webkit.org/show_bug.cgi?id=64583">Bug 64583</a>: "WIP: Add CSS property to control printing of backgrounds for individual elements"</li> + <li>CSSWG Wiki: "<a href="http://wiki.csswg.org/ideas/print-backgrounds">print-backgrounds</a>" - Ein Vorschlag diese Eigenschaft zu standardisieren</li> + <li>CSS Color Module Level 4: die <code><a href="https://drafts.csswg.org/css-color-4/#color-adjust">color-adjust</a></code> Eigenschaft - ein neuerer Vorschlag, diese Eigenschaft zu standardisieren</li> +</ul> diff --git a/files/de/web/css/-webkit-tap-highlight-color/index.html b/files/de/web/css/-webkit-tap-highlight-color/index.html new file mode 100644 index 0000000000..f74eca6d7e --- /dev/null +++ b/files/de/web/css/-webkit-tap-highlight-color/index.html @@ -0,0 +1,33 @@ +--- +title: '-webkit-tap-highlight-color' +slug: Web/CSS/-webkit-tap-highlight-color +translation_of: Web/CSS/-webkit-tap-highlight-color +--- +<div>{{ CSSRef() }}</div> + +<p>{{ Non-standard_header() }}</p> + +<p><strong><code>-webkit-tap-highlight-color</code></strong> ist eine nicht standardmäßige CSS-Eigenschaft, mit der die Farbe der Hervorhebung festgelegt wird, die während des Tippens über einen Link angezeigt wird. Die Markierung zeigt dem Benutzer an, dass sein Antippen erfolgreich erkannt wird, und zeigt an, auf welches Element er tippt.</p> + +<pre class="brush: css no-line-numbers">-webkit-tap-highlight-color: red; +</pre> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<h3 id="Values">Values</h3> + +<p>A {{Cssxref("color value")}}.</p> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<p>Kein Teil einer Spezifikation. Apple hat <a href="https://developer.apple.com/library/mac/documentation/AppleApplications/Reference/SafariWebContent/AdjustingtheTextSize/AdjustingtheTextSize.html#//apple_ref/doc/uid/TP40006510-SW5">eine Beschreibung im Safari Web Content Guide</a>.</p> + +<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2> + +<p>Diese Eigenschaft wird von WebKit / Safari, Blink / Chrome und <a href="https://msdn.microsoft.com/en-us//library/dn806275(v=vs.85).aspx">einigen Versionen von Internet Explorer und Microsoft Edge</a> unterstützt.</p> diff --git a/files/de/web/css/-webkit-text-fill-color/index.html b/files/de/web/css/-webkit-text-fill-color/index.html new file mode 100644 index 0000000000..e3a7cc06e6 --- /dev/null +++ b/files/de/web/css/-webkit-text-fill-color/index.html @@ -0,0 +1,83 @@ +--- +title: '-webkit-text-fill-color' +slug: Web/CSS/-webkit-text-fill-color +tags: + - CSS + - CSS Eigenschaft + - NeedsBrowserCompatibility + - NeedsExample + - NeedsMobileBrowserCompatibility + - Referenz +translation_of: Web/CSS/-webkit-text-fill-color +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <strong><code>-webkit-text-fill-color</code></strong> CSS Eigenschaft bestimmt die Füll<a href="/de/docs/Web/CSS/color_value">farbe</a> von Textzeichen. Falls diese Eigenschaft nicht gesetzt ist, wird der Wert der {{cssxref("color")}} Eigenschaft verwendet.</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<p>Nicht Teil irgendeiner Spezifikation.</p> + +<p>Apple hat <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266--webkit-text-fill-color">eine Beschreibung in der Safari CSS Referenz</a>.</p> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="https://www.webkit.org/blog/85/introducing-text-stroke/">Surfin' Safari Blog Post, der dieses Feature ankündigt</a></li> + <li><a href="https://css-tricks.com/adding-stroke-to-web-text/">CSS-Tricks Artikel, der dieses Feature erklärt</a></li> + <li>{{cssxref("-webkit-text-stroke-color")}}</li> + <li>{{cssxref("-webkit-text-stroke-width")}}</li> + <li>{{cssxref("-webkit-text-stroke")}}</li> +</ul> diff --git a/files/de/web/css/-webkit-text-stroke-color/index.html b/files/de/web/css/-webkit-text-stroke-color/index.html new file mode 100644 index 0000000000..1a220a1710 --- /dev/null +++ b/files/de/web/css/-webkit-text-stroke-color/index.html @@ -0,0 +1,108 @@ +--- +title: '-webkit-text-stroke-color' +slug: Web/CSS/-webkit-text-stroke-color +tags: + - CSS + - CSS Eigenschaft + - CSS Referenz + - NeedsBrowserCompatibility + - NeedsExample + - NeedsMobileBrowserCompatibility + - Non-standard +translation_of: Web/CSS/-webkit-text-stroke-color +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <strong><code>-webkit-text-stroke-color</code></strong> CSS Eigenschaft definiert die Umrandungs<a href="/de/docs/Web/CSS/color_value">farbe</a> von Textzeichen. Falls diese Eigenschaft nicht gesetzt ist, wird der Wert der {{cssxref("color")}} Eigenschaft verwendet.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">/* <color> Werte */ +-webkit-text-stroke-color: red; +-webkit-text-stroke-color: #e08ab4; +-webkit-text-stroke-color: rgb(200, 100, 0); + +/* Globale Werte */ +-webkit-text-stroke-color: inherit; +-webkit-text-stroke-color: initial; +-webkit-text-stroke-color: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code><color></code></dt> + <dd>Die Farbe der Umrandung.</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<p>Nicht Teil einer Spezifikation.</p> + +<p>Apple hat eine <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266--webkit-text-stroke-color">Beschreibung von <code>-webkit-text-stroke-color</code> in der Safari CSS Referenz</a>.</p> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="https://www.webkit.org/blog/85/introducing-text-stroke/">Surfin' Safari Blogeintrag, der dieses Feature ankündigt</a></li> + <li><a href="https://css-tricks.com/adding-stroke-to-web-text/">CSS-Tricks Artikel, der dieses Feature erklärt</a></li> + <li>{{cssxref("-webkit-text-fill-color")}}</li> + <li>{{cssxref("-webkit-text-stroke-width")}}</li> + <li>{{cssxref("-webkit-text-stroke")}}</li> +</ul> diff --git a/files/de/web/css/-webkit-text-stroke-width/index.html b/files/de/web/css/-webkit-text-stroke-width/index.html new file mode 100644 index 0000000000..e06b5b1337 --- /dev/null +++ b/files/de/web/css/-webkit-text-stroke-width/index.html @@ -0,0 +1,85 @@ +--- +title: '-webkit-text-stroke-width' +slug: Web/CSS/-webkit-text-stroke-width +tags: + - CSS + - Experimentell + - NeedsBrowserCompatibility + - NeedsContent + - NeedsExample + - Non-standard +translation_of: Web/CSS/-webkit-text-stroke-width +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <strong><code>-webkit-text-stroke-width</code></strong> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft definiert die Strichbreite des Texts.</p> + +<p>Der Standardwert dieser Eigenschaft ist null.</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<p>Nicht Teil einer Spezifikation.</p> + +<p>Apple hat eine <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266--webkit-text-stroke-width">Beschreibung in der Safari CSS Referenz</a>.</p> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="https://www.webkit.org/blog/85/introducing-text-stroke/">Surfin' Safari Blogeintrag, der dieses Feature ankündigt</a></li> + <li><a href="https://css-tricks.com/adding-stroke-to-web-text/">CSS-Tricks Artikel, der dieses Feature beschreibt</a></li> + <li>{{cssxref("-webkit-text-stroke-color")}}</li> + <li>{{cssxref("-webkit-text-stroke")}}</li> + <li>{{cssxref("-webkit-text-fill-color")}}</li> +</ul> diff --git a/files/de/web/css/-webkit-text-stroke/index.html b/files/de/web/css/-webkit-text-stroke/index.html new file mode 100644 index 0000000000..056b62d357 --- /dev/null +++ b/files/de/web/css/-webkit-text-stroke/index.html @@ -0,0 +1,126 @@ +--- +title: '-webkit-text-stroke' +slug: Web/CSS/-webkit-text-stroke +tags: + - CSS + - Eigenschaft + - Non-standard + - Referenz +translation_of: Web/CSS/-webkit-text-stroke +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <strong><code>-webkit-text-stroke</code></strong> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft gibt die <a href="/de/docs/Web/CSS/length">Breite</a> und <a href="/de/docs/Web/CSS/color_value">Farbe</a> der Umrandung von Textzeichen an. Sie ist eine Kurzschreibweise für die Langschreibungseigenschaften {{cssxref("-webkit-text-stroke-width")}} und {{cssxref("-webkit-text-stroke-color")}}.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css notranslate">/* Breiten- und Farbwerte */ +-webkit-text-stroke: 4px navy; + +/* Globale Werte */ +-webkit-text-stroke: inherit; +-webkit-text-stroke: initial; +-webkit-text-stroke: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code><length></code></dt> + <dd>Die Breite der Umrandung.</dd> + <dt><code><color></code></dt> + <dd>Die Farbe der Umrandung.</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Beispiel">Beispiel</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><p id="example">Die Umrandung dieses Texts ist rot.</p></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">#example { + font-size: 50px; + margin: 0; + -webkit-text-stroke: 2px red; +}</pre> + +<p>{{EmbedLiveSample("Beispiel", 650, 60)}}</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<p>Nicht Teil einer Spezifikation.</p> + +<p>Apple hat eine <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-_webkit_text_stroke">Beschreibung in der Safari CSS Referenz</a>.</p> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>4</td> + <td>{{CompatGeckoDesktop("48.0")}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>15</td> + <td>3.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>4</td> + <td>{{CompatGeckoMobile("48.0")}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>36</td> + <td>4.1</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Ab Gecko 48 hinter der Einstellung <code>layout.css.prefixes.webkit</code> implementiert, dort noch standarmäßig <code>false</code>;<br> + ab Gecko 49 {{geckoRelease("49.0")}} standardmäßig <code>true</code>.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="https://www.webkit.org/blog/85/introducing-text-stroke/">Surfin' Safari Blogeintrag, der dieses Feature ankündigt</a></li> + <li><a href="https://css-tricks.com/adding-stroke-to-web-text/">CSS-Tricks Artikel, der dieses Feature erklärt</a></li> + <li>{{cssxref("-webkit-text-stroke-width")}}</li> + <li>{{cssxref("-webkit-text-stroke-color")}}</li> + <li>{{cssxref("-webkit-text-fill-color")}}</li> +</ul> diff --git a/files/de/web/css/-webkit-touch-callout/index.html b/files/de/web/css/-webkit-touch-callout/index.html new file mode 100644 index 0000000000..af79615358 --- /dev/null +++ b/files/de/web/css/-webkit-touch-callout/index.html @@ -0,0 +1,108 @@ +--- +title: '-webkit-touch-callout' +slug: Web/CSS/-webkit-touch-callout +tags: + - CSS + - CSS Eigenschaft + - Layout + - NeedsBrowserCompatibility + - NeedsLiveSample + - Referenz +translation_of: Web/CSS/-webkit-touch-callout +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>-webkit-touch-callout</code> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft steuert die Anzeige der Standard-Textbox, die angezeigt wird, wenn das Touchziel berührt und gehalten wird.</p> + +<p>Wenn das Ziel in iPhone OS berührt und gehalten wird, zeigt Safari eine Textbox-Information über den Link an. Diese Eigenschaft erlaubt es, dieses Verhalten zu deaktivieren.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">/* Schlüsselwortwerte */ +-webkit-touch-callout: default; +-webkit-touch-callout: none; + +/* Globale Werte */ +-webkit-touch-callout: initial; +-webkit-touch-callout: inherit; +-webkit-touch-callout: unset;</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code>default</code></dt> + <dd>Die Standard-Textbox wird angezeigt.</dd> + <dt><code>none</code></dt> + <dd>Die Textbox ist deaktiviert.</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush: css">.example { + -webkit-touch-callout: none; +} +</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<p>Nicht Teil einer Spezifikation.</p> + +<p>Apple hat eine <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-_webkit_touch_callout">Beschreibung in der Safari CSS Referenz</a>.</p> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Die <code>-webkit-touch-callout</code> Eigenschaft wurde <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-_webkit_touch_callout">in iOS 2.0 implementiert</a> und später zu WebKit hinzugefügt ({{webkitbug(121507)}}).</p> diff --git a/files/de/web/css/@charset/index.html b/files/de/web/css/@charset/index.html new file mode 100644 index 0000000000..289dc8117b --- /dev/null +++ b/files/de/web/css/@charset/index.html @@ -0,0 +1,79 @@ +--- +title: '@charset' +slug: Web/CSS/@charset +tags: + - CSS + - CSS At-Regel + - Layout + - Referenz + - Web +translation_of: Web/CSS/@charset +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>@charset</code> <a href="/de/docs/Web/CSS" title="CSS">CSS</a> <a href="/de/docs/Web/CSS/At-Regel" title="At-rule">At-Regel</a> gibt die Zeichenkodierung an, die in dem Stylesheet verwendet wird. Sie muss das erste Element im Stylesheet sein und ihr darf kein Zeichen vorangestellt werden; da sie kein <a href="/de/docs/Web/CSS/Syntax#verschachtelte_Ausdrücke" title="en/CSS/Syntax#nested_statements">verschachtelter Ausdruck</a> ist, kann sie nicht innerhalb <a href="/de/docs/Web/CSS/At-Regel#bedingte_Gruppen_Regel" title="en/CSS/At-rule#Conditional_Group_Rules">bedingten Gruppen At-Regeln</a> verwendet werden. Falls mehrere <code>@charset</code> At-Regeln definiert sind, wird nur die erste verwendet. Und sie kann auch nicht innerhalb eines <code>style</code> Attributs eines HTML Elements oder innerhalb des {{ HTMLElement("style") }} Elements verwendet werden, in dem die Zeichenkodierung der HTML Seite ausschlaggebend ist.</p> + +<p>Diese At-Regel ist nützlich, wenn nicht-ASCII Zeichen in manchen CSS Eigenschaften wie {{ cssxref("content") }} verwendet werden.</p> + +<p>Da es mehrere Möglichkeiten gibt, die Zeichenkodierung eines Stylesheets anzugeben, versucht der Browser die folgenden Methoden in der angegebenen Reihenfolge (und stoppt, sobald eine ein Ergebnis zurückliefert):</p> + +<ol> + <li>Der Wert des <a href="http://de.wikipedia.org/wiki/Byte_Order_Mark" title="http://en.wikipedia.org/wiki/Byte_order_mark">Unicode Bytereihenfolge</a> Zeichens, das am Anfang der Datei gesetzt ist.</li> + <li>Der Wert, der durch das <code>charset</code> Attribut des <code>Content-Type:</code> HTTP-Headers angegeben wurde oder das Äquivalent hierzu im Protokoll, das verwendet wird, um das Stylesheet zu übertragen.</li> + <li>Die <code>@charset</code> CSS At-Regel.</li> + <li>Benutze die Zeichenkodierung, die durch das referenzierte Dokument angegeben wird: Das <code>charset</code> Attribut des {{ HTMLElement("link") }} Elements. Diese Methode ist veraltet in HTML5 und darf nicht verwendet werden.</li> + <li>Nimm an, dass das Dokument UTF-8 kodiert ist.</li> +</ol> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">@charset "UTF-8"; +@charset 'iso-8859-15'; +</pre> + +<dl> + <dt style="margin: 0 40px;"><em>charset</em></dt> + <dd style="margin: 0 40px;">Ist ein {{cssxref("<string>")}}, der die zu verwendende Zeichenkodierung angibt. Dies muss der Name einer websicheren Zeichenkodierung sein, wie sie in der <a href="http://www.iana.org/assignments/character-sets">IANA Registrierung</a> definiert wird. Falls mehrere Namen mit einer Kodierung assoziiert werden, wird nur der verwendet, der mit <em>preferred</em> gekennzeichnet ist.</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<p>Gültige Bespiele:</p> + +<pre class="brush: css">@charset "UTF-8"; /* Setzt die Kodierung des Stylesheets auf Unicode UTF-8 */ +@charset 'iso-8859-15'; /* Setzt die Kodierung des Stylesheets auf Latin-9 (Westeuropäische Sprachen, mit Eurozeichen) */ +</pre> + +<p>Ungültige Beispiele:</p> + +<pre class="brush: css"> @charset "UTF-8"; /* Ungültig, da ein Zeichen (Leerzeichen) vor der At-Regel steht */ +@charset UTF-8; /* Ungültig, da kein ' oder " angegeben wurde, die Zeichenkodierung ist kein CSS {{cssxref("<string>")}} */</pre> + +<h2 id="Spezifikationen">Spezifikationen</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('CSS2.1', 'syndata.html#x57', '@charset')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser Kompatibilität</h2> + +{{Compat("css.at-rules.charset")}} diff --git a/files/de/web/css/@document/index.html b/files/de/web/css/@document/index.html new file mode 100644 index 0000000000..f9d47540fb --- /dev/null +++ b/files/de/web/css/@document/index.html @@ -0,0 +1,71 @@ +--- +title: '@document' +slug: Web/CSS/@document +tags: + - At-Regel + - CSS + - Referenz +translation_of: Web/CSS/@document +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <strong><code>@document</code></strong> <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/At-Regel">at-rule</a> beschränkt die Stilregeln, die sie beinhaltet, basierend auf dem URL des Dokuments. Sie wurde hauptsächlich für Benutzerstylesheets entworfen. Eine <code>@document</code> Regel kann eine oder mehrere Matchingfunktionen definieren. Falls eine der Funktionen auf einen URL passt, wird die Regel auf diesen URL angewandt.</p> + +<p>Der Hauptanwendungsfall ist für benutzerdefinierte Stylesheets, jedoch kann diese Regel auch für autordefinierte Stylesheets verwendet werden.</p> + +<p>Die verfügbaren Funktionen sind:</p> + +<ul> + <li><code>url()</code>, welche einen exakten URL matcht.</li> + <li><code>url-prefix()</code>, welche matcht, falls der Dokument-URL mit dem angegebenen Wert beginnt.</li> + <li><code>domain()</code>, welche matcht, falls der Dokument-URL zur angegebenen Domain (oder einer Subdomain davon) gehört.</li> + <li><code>regexp()</code>, welche matcht, falls der Dokument-URL auf den angegebenen <a href="/de/docs/Web/JavaScript/Guide/Regular_Expressions">regulären Ausdruck</a> passt. Der Ausdruck muss den gesamten URL matchen.</li> +</ul> + +<h2 id="Syntax">Syntax</h2> + +<p>Die angegebenen Werte für die <code>url()</code>, <code>url-prefix()</code> und <code>domain()</code> Funktionen können optional durch einfache oder doppelte Anführungszeichen umschlossen werden. Die angegebenen WErte für die <code>regexp()</code> Funktion <strong>müssen</strong> durch Anführungenzeichen umschlossen sein.</p> + +<p>Für die <code>regexp()</code> Funktion escapte Werte müssen zusätzlich vom CSS escapt werden. Zum Beispiel matcht ein <code>.</code> (Punkt) ein beliebiges Zeichen in regulären Ausdrücken. Um einen Punkt zu matchen, muss er zunächst anhand der Regeln für reguläre Ausdrücke escapt werden (also <code>\.</code>) und anschließend durch die CSS Regeln (also <code>\\.</code>).</p> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush: css">@document url(http://www.w3.org/), + url-prefix(http://www.w3.org/Style/), + domain(mozilla.org), + regexp("https:.*") +{ + /* CSS Regeln hier werden angewandt auf: + - Die Seite "http://www.w3.org/". + - Jede Seite, deren URL mit "http://www.w3.org/Style/" beginnt + - Jede Seite, deren URLs Host "mozilla.org" ist oder mit ".mozilla.org" endet + - Jede Seite, deren URL mit "https:" beginnt */ + + /* macht die oben erwähnten Seiten wirklich hässlich */ + body { + color: purple; + background: yellow; + } +} +</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<p><a href="http://www.w3.org/TR/2012/WD-css3-conditional-20120911/#at-document">Ursprünglich</a> in {{SpecName('CSS3 Conditional', '', '')}}, wurde <code>@document</code> nach Level 4 <a href="http://www.w3.org/TR/2012/WD-css3-conditional-20121213/#changes">verschoben</a>.</p> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.at-rules.document")}} + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a class="external" href="http://lists.w3.org/Archives/Public/www-style/2004Aug/0135">Per-site user style sheet rules</a> on the www-style mailing list.</li> + <li>The file <code><a class="external" href="http://www.mozilla.org/support/firefox/edit#content">userContent.css</a></code> is a user stylesheet on Gecko-based browsers.</li> +</ul> diff --git a/files/de/web/css/@import/index.html b/files/de/web/css/@import/index.html new file mode 100644 index 0000000000..acff38aebc --- /dev/null +++ b/files/de/web/css/@import/index.html @@ -0,0 +1,79 @@ +--- +title: '@import' +slug: Web/CSS/@import +tags: + - '@-Regel' + - CSS + - Referenz +translation_of: Web/CSS/@import +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <strong><code>@import</code></strong> <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/At-rule">@-Regel</a> wird verwendet, um Stilregeln anderer Stylesheets zu importieren. Diese Regeln müssen allen anderen Typen von Regeln vorangehen außer {{cssxref("@charset")}} Regeln; da sie kein <a href="/de/docs/Web/CSS/Syntax#verschachtelte_Statements">verschachteltes Statement</a> ist, kann <code>@import</code> nicht innerhalb <a href="/de/docs/Web/CSS/At-rule#Bedingte_Gruppenregeln">bedingter Gruppen-@-Regeln</a> verwendet werden.</p> + +<p>Damit User Agents verhindern können, Ressourcen für nicht unterstützte Medientypen zu holen, können Autoren medienabhängige <code>@import</code> Regeln definieren. Diese bedingten Importe definieren kommaseparierte <a href="/de/docs/Web/CSS/Media_Queries/Media_Queries_verwenden">Media Queries</a> nach dem URI. Falls keine Media Query angegeben wurde, ist der Import unbedingt. Die Angabe von <code>all</code> für das Medium hat denselben Effekt.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="eval">@import <em>url</em>; +@import <em>url</em> <em>list-of-media-queries</em>; +</pre> + +<p>wobei:</p> + +<dl> + <dt style="margin: 0 40px;"><em>url</em></dt> + <dd style="margin: 0 40px;">Ist ein {{cssxref("<string>")}} oder ein {{cssxref("<uri>")}}, der die Adresse der zu importierenden Ressource repräsentiert. Der URL kann absolut oder relativ sein. Beachte, dass der URL nicht unbedingt eine Datei referenzieren muss; er kann auch nur den Packagenamen und -teil angeben und die passende Datei wird automatisch ausgewählt (z. B. <strong>chrome://communicator/skin/</strong>). <a href="/de/docs/XUL_Tutorial/Die_Chrome_URL">Siehe hier</a> für mehr Informationen.</dd> + <dt style="margin: 0 40px;"><em>list-of-media-queries</em></dt> + <dd style="margin: 0 40px;">Ist eine kommaseparierte Liste von <a href="/de/docs/Web/CSS/Media_Queries/Media_Queries_verwenden">Media Queries</a>, die die Anwendung der in dem verlinkten URL definierten CSS Regeln bedingt. Falls der Browser keine dieser Media Queries unterstützt, lädt er die verlinkte Ressource nicht.</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush:css">@import url("fineprint.css") print; +@import url("bluish.css") projection, tv; +@import 'custom.css'; +@import url("chrome://communicator/skin/"); +@import "common.css" screen, projection; +@import url('landscape.css') screen and (orientation:landscape); +</pre> + +<h2 id="Spezifikationen">Spezifikationen</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 Media Queries', '#media0', '@import')}}</td> + <td>{{Spec2('CSS3 Media Queries')}}</td> + <td>Erweitert die Syntax zur Unterstützung beliebiger Media Queries und nicht nur einfache <a href="/de/docs/Web/CSS/@media#Medientypen">Medientypen</a>.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'cascade.html#at-import', '@import')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Fügt Unterstützung für {{cssxref("<string>")}} hinzu, um den URL eines Stylesheets anzugeben,<br> + und Voraussetzung dafür, die <code>@import</code> Regel am Anfang des CSS Dokuments anzugeben.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#the-cascade', '@import')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.at-rules.import")}} diff --git a/files/de/web/css/@keyframes/index.html b/files/de/web/css/@keyframes/index.html new file mode 100644 index 0000000000..31acaf56b5 --- /dev/null +++ b/files/de/web/css/@keyframes/index.html @@ -0,0 +1,114 @@ +--- +title: '@keyframes' +slug: Web/CSS/@keyframes +translation_of: Web/CSS/@keyframes +--- +<div>{{CSSRef}}</div> + +<h2 id="Zusammenfassung">Zusammenfassung</h2> + +<p>Durch die CSS-at-Regel <code>@keyframes</code> kann der Autor die einzelnen Schritte einer CSS-Animationssequenz festlegen, indem er Keyframes (oder Wegpunkte) setzt, die während der Sequenz an bestimmten Punkten erreicht werden. Das ermöglicht eine spezifischere Kontrolle über die Zwischenschritte einer Animationssequenz gegenüber dem Ergebnis einem dem Browser überlassenen, automatisch berechneten Ablauf.</p> + +<p>Die at-Regel <code>@keyframes</code> kann mit dem CSS-Objekt {{domxref("CSSKeyframesRule")}} erlangt werden.</p> + +<p>Um Keyframes zu benutzen, erstellt man eine <code>@keyframes</code>-Regel mit einem Namen, der dann durch die {{ cssxref("animation-name") }}-Eigenschaft genutzt wird, um einer Animation einen Keyframe zuzuweisen. Jede <code>@keyframes</code>-Regel beinhaltet eine Style-Liste aus Keyframe-Selektoren, von denen jeder eine Prozentzahl enthält, die angibt, zu welchem relativen Zeitpunkt während der Animation der Keyframe auftritt, sowie einen Block mit den jeweiligen Style-Informationen für diesen Keyframe.</p> + +<p>Die Reihenfolge der Keyframes ist egal, denn sie werden in der Reihenfolge ihrer Prozentzahl verwendet.</p> + +<h3 id="Gültige_Keyframe-Liste">Gültige Keyframe-Liste</h3> + +<p>Damit ein Keyframe gültig ist, muss er Regeln enthalten, die zumindest die Zeiten <code>0%</code> (oder <code>from</code>) und <code>100%</code> (oder <code>to</code>) enthalten (d.h. der Start- und Endstatus der Animation). Wenn beide Zeiten nicht angegeben sind, ist die Keyframe-Deklaration ungültig; sie wird vom Parser ignoriert und kann nicht als Animation verwendet werden.</p> + +<p>Wenn Eigenschaften beschrieben werden, die nicht in den Keyframe-Regeln animiert werden können, werden sie ignoriert. Unterstützte Eingeschaften in dem Block werden weiterhin animiert.</p> + +<h3 id="Doppelte_Deklarationen">Doppelte Deklarationen</h3> + +<p>Wenn mehrere Keyframe-Sets mit einem Namen existieren, gilt der letzte definierte. <code>@keyframes</code>-Regeln sind nicht kaskadierend, Animationen nehmen also niemals Keyframes von mehr als einer definierten Regel.</p> + +<p>Wenn ein Zeitpunkt in der Animation doppelt deklariert ist, gilt der letzte Keyframe dieses Zeitpunkts in der <code>@keyframes</code>-Regel. Mehrere Regeln derselben Zeit sind nicht kaskadierend.</p> + +<h3 id="Wenn_Eigenschaften_aus_manchen_Keyframes_ausgelassen_werden">Wenn Eigenschaften aus manchen Keyframes ausgelassen werden</h3> + +<p>Jede Eigenschaft, die nicht in jedem Keyframe spezifiert wird, ist interpoliert (mit der Ausnahme von denen, die nicht interpoliert werden können und daher aus der gesamten Animation weggelassen werden). Zum Beispiel:</p> + +<pre class="brush: css">@keyframes identifier { + 0% { top: 0; left: 0; } + 30% { top: 50px; } + 68%, 72% { left: 50px; } + 100% { top: 100px; left: 100%; } +} +</pre> + +<p>Hier wird die {{ cssxref("top") }}-Eigenschaft mit Benutzen der <code>0%</code>-, <code>30%-</code>, und <code>100%</code>-Keyframes animiert, und {{ cssxref("left") }} animiert anhand der <code>0%</code>-, <code>68%</code>-, and <code>100%</code>-Keyframes.</p> + +<p>Nur Eigenschaften, die in sowohl im <code>0%</code>-, als auch im <code>100%</code>-Keyframe spezifiziert sind, werden animiert; jede Eigenschaft, die nicht in diesen beiden Keyframes enthalten ist, wird ihren Startwert für die Dauer der Animation behalten.</p> + +<h3 id="Wenn_ein_Keyframe_mehrmals_definiert_wird">Wenn ein Keyframe mehrmals definiert wird</h3> + +<p>Wenn ein Keyframe mehrmals definiert wird, aber nicht alle Eigenschaften in jedem Keyframe enthalten sind, werden ausschließlich die Werte des letzten Keyframes beachtet, zum Beispiel:</p> + +<pre class="brush: css">@keyframes identifier { + 0% { top: 0; } + 50% { top: 30px; left: 20px; } + 50% { top: 10px; } + 100% { top: 0; } +} +</pre> + +<p>In diesem Beispiel ist der genutzte Wert des <code>50%</code>-Keyframe <code>top: 10px</code> und alle anderen Werte des ersten Keyframes werden ignoriert.</p> + +<p>{{ non-standard_inline }} {{ fx_minversion_inline("14") }} Kaskadierende Keyframes werden in Firefox ab Version 14 unterstützt. Im oberen Beispiel wird beim <code>50%</code>-Keyframe der Wert <code>left: 20px</code> beachtet. Dies ist noch nicht in der Spezifikation definiert, wird allerdings gerade diskutiert.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">@keyframes <bezeichner> { + [ [ from | to | <Prozentzahl> ] [, from | to | <Prozentzahl> ]* block ]* +} +</pre> + +<h3 id="Values">Values</h3> + +<dl> + <dt><code><Bezeichner></code></dt> + <dd>Ein Name, der die Keyframe-Liste eindeutig identifiziert. Er muss den CSS-Syntax-Richtlinien für Bezeichner entsprechen.</dd> + <dt><code>from</code></dt> + <dd>Der Startwert <code>0%</code>.</dd> + <dt><code>to</code></dt> + <dd>Der Endwert <code>100%</code>.</dd> + <dt>{{cssxref("<percentage>")}}</dt> + <dd>Eine Prozentzahl, die den Zeitpunkt in der Animationssequenz angibt, an dem der spezifizierte Keyframe gelten soll.</dd> +</dl> + +<h2 id="Beispiel">Beispiel</h2> + +<p>Siehe <a href="/en/CSS/CSS_animations" title="en/CSS/CSS_animations">CSS-Animationen</a> für Beispiele.</p> + +<h2 id="Spezifikationen">Spezifikationen</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 Animations', '#keyframes', '@keyframes') }}</td> + <td>{{ Spec2('CSS3 Animations') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser-Kompatibilität</h2> + +{{Compat("css.at-rules.keyframes")}} + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/en-US/docs/CSS/Tutorials/Using_CSS_animations" title="Tutorial about CSS animations">CSS-Animationen benutzen</a></li> + <li>{{ domxref("AnimationEvent", "AnimationEvent") }}</li> +</ul> diff --git a/files/de/web/css/@media/any-pointer/index.html b/files/de/web/css/@media/any-pointer/index.html new file mode 100644 index 0000000000..d919a97c58 --- /dev/null +++ b/files/de/web/css/@media/any-pointer/index.html @@ -0,0 +1,67 @@ +--- +title: any-pointer +slug: Web/CSS/@media/any-pointer +tags: + - CSS + - NeedsBrowserCompatibility + - NeedsExample + - Referenz +translation_of: Web/CSS/@media/any-pointer +--- +{{cssref}} + +<p><strong><code>any-pointer</code></strong> ist ein CSS Media Feature, das dazu verwendet werden kann, um zu prüfen, ob irgendein verfügbarer Eingabemechanismus ein Zeigegerät ist, und falls ja, wie genau es ist.</p> + +<h2 id="Aufgezählte_Werte">Aufgezählte Werte</h2> + +<table> + <thead> + <tr> + <th>Wert</th> + <th>Bedeutung</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>none</code></td> + <td>Das Gerät verfügt nicht über ein Zeigegerät.</td> + </tr> + <tr> + <td><code>coarse</code></td> + <td>Mindestens ein Eingabemechanismus des Geräts verfügt über ein Zeigegerät von begrenzter Genauigkeit.</td> + </tr> + <tr> + <td><code>fine</code></td> + <td>Mindestens ein Eingabemechanismus des Geräts verfügt über ein Zeigegerät von präziser Genauigkeit.</td> + </tr> + </tbody> +</table> + +<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 Media Queries', '#descdef-media-any-pointer', 'any-pointer')}}</td> + <td>{{Spec2('CSS4 Media Queries')}}</td> + <td>Added in Media Queries Level 4</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.at-rules.media.any-pointer")}} + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/CSS/@media/pointer">das <code>pointer</code> Media Feature</a></li> +</ul> diff --git a/files/de/web/css/@media/index.html b/files/de/web/css/@media/index.html new file mode 100644 index 0000000000..814ff628ed --- /dev/null +++ b/files/de/web/css/@media/index.html @@ -0,0 +1,260 @@ +--- +title: '@media' +slug: Web/CSS/@media +tags: + - At-rule + - CSS + - Layout + - NeedsTranslation + - Reference + - TopicStub + - Web +translation_of: Web/CSS/@media +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Summary">Summary</h2> + +<p>The <code>@media</code> <a href="/en/CSS" title="CSS">CSS</a> <a href="/en/CSS/At-rule" title="en/CSS/At-rule">at-rule</a> associates a set of nested statements, in a CSS block that is delimited by curly braces, with a condition defined by a <a href="/en/CSS/Media_queries" title="CSS media queries">media query</a>. The <code>@media</code> at-rule may be used not only at the top level of a CSS, but also inside any <a href="/en/CSS/At-rule#Conditional_Group_Rules" title="en/CSS/At-rule#Conditional_Group_Rules">CSS conditional-group at-rule</a>.</p> + +<p>The <code>@media</code> at-rule can be accessed via the CSS object model interface {{domxref("CSSMediaRule")}}.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<p>A <code><media-query></code> is composed of a media type and/or a number of media features.</p> + +<h2 id="Media_types" name="Media_types">Media types</h2> + +<div class="note"><strong>Note:</strong> Firefox currently only implements the <code>print</code> and <code>screen</code> media types. The <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/4650" title="https://addons.mozilla.org/en-US/firefox/addon/4650">FullerScreen</a> extension enables support for the <code>projection</code> media type.</div> + +<dl> + <dt>all</dt> + <dd>Suitable for all devices.</dd> + <dt>print</dt> + <dd>Intended for paged material and for documents viewed on screen in print preview mode. Please consult the section on <a href="/en/CSS/Paged_Media" title="https://developer.mozilla.org/en/CSS/Paged_Media">paged media</a>, and the <a href="/en/CSS/Getting_Started/Media" title="https://developer.mozilla.org/en/CSS/Getting_Started/Media">media section of the Getting Started tutorial</a> for information about formatting issues that are specific to paged media.</dd> + <dt>screen</dt> + <dd>Intended primarily for color computer screens.</dd> + <dt>speech</dt> + <dd>Intended for speech synthesizers. Note: CSS2 had a similar media type called 'aural' for this purpose. See the appendix on aural style sheets for details.</dd> +</dl> + +<div class="note"><strong>Note:</strong> CSS2.1 and Media Queries 3 defined several additional media types (<code>tty</code>, <code>tv</code>, <code>projection</code>, <code>handheld</code>, <code>braille</code>, <code>embossed</code>, <code>aural</code>), but they were deprecated in <a href="http://dev.w3.org/csswg/mediaqueries/#media-types">Media Queries 4</a> and shouldn't be used.</div> + +<h2 id="Media_features" name="Media_features">Media Features</h2> + +<p><a href="http://dev.w3.org/csswg/mediaqueries/#mq-features">Definition</a>. This section needs to be expanded to explain media conditions in more depth.</p> + +<table> + <thead> + <tr> + <th>Name</th> + <th>Summary</th> + <th>Notes</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/width"><code>width</code></a></td> + <td>Viewport width</td> + <td> </td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/height"><code>height</code></a></td> + <td>Viewport height</td> + <td> </td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/aspect-ratio"><code>aspect-ratio</code></a></td> + <td>Width-to-height aspect ratio of the viewport</td> + <td> </td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/orientation"><code>orientation</code></a></td> + <td>Orientation of the viewport</td> + <td> </td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/resolution"><code>resolution</code></a></td> + <td>Pixel density of the output device</td> + <td> </td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/scan"><code>scan</code></a></td> + <td>Scanning process of the output device</td> + <td> </td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/grid"><code>grid</code></a></td> + <td>Is the device a grid or bitmap?</td> + <td> </td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/update-frequency"><code>update-frequency</code></a></td> + <td>How quickly (if at all) can the output device modify the appearance of the content</td> + <td>Added in Media Queries Level 4</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/overflow-block"><code>overflow-block</code></a></td> + <td>How does the output device handle content that overflows the viewport along the block axis?</td> + <td>Added in Media Queries Level 4</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/overflow-inline"><code>overflow-inline</code></a></td> + <td>Can content that overflows the viewport along the inline axis be scrolled?</td> + <td>Added in Media Queries Level 4</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/color"><code>color</code></a></td> + <td>Number of bits per color component of the output device, or zero if the device isn't color.</td> + <td> </td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/color-index"><code>color-index</code></a></td> + <td>Number of entries in the output device's color lookup table, or zero if the device does not use such a table.</td> + <td> </td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/monochrome"><code>monochrome</code></a></td> + <td>Bits per pixel in the output device's monochrome frame buffer, or 0 if the device is not monochrome.</td> + <td> </td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/inverted-colors"><code>inverted-colors</code></a></td> + <td>Is the user agent or underlying OS inverting colors?</td> + <td>Added in Media Queries Level 4</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/pointer"><code>pointer</code></a></td> + <td>Is the primary input mechanism a pointing device, and if so, how accurate is it?</td> + <td>Added in Media Queries Level 4</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/hover"><code>hover</code></a></td> + <td>Does the primary input mechanism allow the user to hover over elements?</td> + <td>Added in Media Queries Level 4</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/any-pointer"><code>any-pointer</code></a></td> + <td>Is any available input mechanism a pointing device, and if so, how accurate is it?</td> + <td> </td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/any-hover"><code>any-hover</code></a></td> + <td>Does any available input mechanism allow the user to hover over elements?</td> + <td> </td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/light-level"><code>light-level</code></a></td> + <td>Current ambient light level</td> + <td>Added in Media Queries Level 4</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/scripting"><code>scripting</code></a></td> + <td>Is scripting (e.g. JavaScript) available?</td> + <td>Added in Media Queries Level 4</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/device-width"><code>device-width</code></a> {{obsolete_inline}}</td> + <td>Width of the rendering surface of the output device</td> + <td>Deprecated in Media Queries Level 4</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/device-height"><code>device-height</code></a> {{obsolete_inline}}</td> + <td>Height of the rendering surface of the output device</td> + <td>Deprecated in Media Queries Level 4</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/device-aspect-ratio"><code>device-aspect-ratio</code></a> {{obsolete_inline}}</td> + <td>Width-to-height aspect ratio of the output device</td> + <td>Deprecated in Media Queries Level 4</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/-webkit-device-pixel-ratio"><code>-webkit-device-pixel-ratio</code></a> {{non-standard_inline}}</td> + <td>Number of physical device pixels per CSS pixel</td> + <td>Nonstandard; WebKit/Blink-specific. If possible, use the <a href="/en-US/docs/Web/CSS/@media/resolution"><code>resolution</code></a> media feature instead.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/-webkit-transform-3d"><code>-webkit-transform-3d</code></a> {{non-standard_inline}}</td> + <td>Are CSS 3D {{cssxref("transform")}}s supported?</td> + <td>Nonstandard; WebKit/Blink-specific</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/-webkit-transform-2d"><code>-webkit-transform-2d</code></a> {{non-standard_inline}}</td> + <td>Are CSS 2D {{cssxref("transform")}}s supported?</td> + <td>Nonstandard; WebKit-specific</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/-webkit-transition"><code>-webkit-transition</code></a> {{non-standard_inline}}</td> + <td>Are CSS {{cssxref("transition")}}s supported?</td> + <td>Nonstandard; WebKit-specific</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/-webkit-animation"><code>-webkit-animation</code></a> {{non-standard_inline}}</td> + <td>Are CSS {{cssxref("animation")}}s supported?</td> + <td>Nonstandard; WebKit-specific</td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">Examples</h2> + +<pre class="brush: css">@media print { + body { font-size: 10pt } +} +@media screen { + body { font-size: 13px } +} +@media screen, print { + body { line-height: 1.2 } +} +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Conditional', '#at-media', '@media')}}</td> + <td>{{Spec2('CSS3 Conditional')}}</td> + <td>Defines the basic syntax of the <code>@media</code> rule.</td> + </tr> + <tr> + <td>{{SpecName('CSS4 Media Queries', '#media', '@media')}}</td> + <td>{{Spec2('CSS4 Media Queries')}}</td> + <td> + <p>Added <code>scripting</code>, <code>pointer</code>, <code>hover</code>, <code>light-level</code>, <code>update-frequency</code>, <code>overflow-block</code>, and <code>overflow-inline</code> media features.<br> + Deprecated all media types except for <code>screen</code>, <code>print</code>, <code>speech</code>, and <code>all</code>.</p> + </td> + </tr> + <tr> + <td>{{SpecName('CSS3 Media Queries', '#media0', '@media')}}</td> + <td>{{Spec2('CSS3 Media Queries')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'media.html#at-media-rule', '@media')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + +{{Compat("css.at-rules.media")}} + +<h2 id="See_also">See also</h2> + +<ul> + <li><a class="internal" href="/en/CSS/Media_queries" title="En/CSS/Media queries">Media queries</a></li> + <li>The CSSOM {{ domxref("CSSMediaRule") }} associated with this at-rule.</li> +</ul> diff --git a/files/de/web/css/@media/pointer/index.html b/files/de/web/css/@media/pointer/index.html new file mode 100644 index 0000000000..4c1ff0fc8b --- /dev/null +++ b/files/de/web/css/@media/pointer/index.html @@ -0,0 +1,91 @@ +--- +title: pointer +slug: Web/CSS/@media/pointer +translation_of: Web/CSS/@media/pointer +--- +<div>{{cssref}}</div> + +<p>Das <a href="/en-US/docs/CSS">CSS</a> {{cssxref("@media")}} media Merkmal <strong><code>pointer</code></strong> wird verwendet um Styles abhängig vom primären Eingabemechanismus des Geräts anzuwenden. Es gibt aufschluss darüber ob der primäre Eingabemechanismus ein Zeigegerät ist, und wenn ja, wie präzise es ist.</p> + +<h2 id="Syntax">Syntax</h2> + +<p>Die Einstellungsmöglichkeiten für das Merkmal <code>pointer</code> sind in der folgenden Liste aufge</p> + +<dl> + <dt><code>none</code></dt> + <dd>Das Gerät verfügt nur über Tastatur</dd> + <dt><code>coarse</code></dt> + <dd>Das Gerät verfügt über ein Eingabegerät mit limitierter Präzision (z.B. Touch)</dd> + <dt><code>fine</code></dt> + <dd>Das Gerät verfügt über einen sehr präzises Eingabegerät (z.B. Maus, Touchpad, Stift)</dd> +</dl> + +<h2 id="Beispiel">Beispiel</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><input id="test" type="checkbox" /> +<label for="test">Look at me!</label></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">input[type="checkbox"]:checked { + background: gray; +} + +@media (pointer: fine) { + input[type="checkbox"] { + -moz-appearance: none; + -webkit-appearance: none; + appearance: none; + width: 15px; + height: 15px; + border: 1px solid blue; + } +} + +@media (pointer: coarse) { + input[type="checkbox"] { + -moz-appearance: none; + -webkit-appearance: none; + appearance: none; + width: 30px; + height: 30px; + border: 2px solid red; + } +}</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample("Example")}}</p> + +<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 Media Queries', '#pointer', 'pointer')}}</td> + <td>{{Spec2('CSS4 Media Queries')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + + + +<p>{{Compat("css.at-rules.media.pointer")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/@media/any-pointer">the <code>any-pointer</code> media feature</a></li> +</ul> diff --git a/files/de/web/css/@media/prefers-reduced-motion/index.html b/files/de/web/css/@media/prefers-reduced-motion/index.html new file mode 100644 index 0000000000..84c9382a27 --- /dev/null +++ b/files/de/web/css/@media/prefers-reduced-motion/index.html @@ -0,0 +1,23 @@ +--- +title: prefers-reduced-motion +slug: Web/CSS/@media/prefers-reduced-motion +translation_of: Web/CSS/@media/prefers-reduced-motion +--- +<p>Das <strong><code>prefers-reduced-motion</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">media feature</a> wird genutzt um zu erkennen ob der Nutzer angefragt hat, dass das System die Menge an nicht notwendiger Bewegung minimiert.</p> + +<h2 id="User_preferences">User preferences</h2> + +<ul> + <li>Unter Windows 10: Einstellungen > Erleichterte Bedienung > Anzeige > Animationen in Windows anzeigen</li> + <li>In Firefox <code>about:config</code>: Füge eine Binär-Präferenz ("Number") namens <code>ui.prefersReducedMotion</code> hinzu und setze deren Wert auf <code>1</code>. Änderung an dieser Präferenz werden sofort übernommen.</li> +</ul> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + + + +<p>{{Compat("css.at-rules.media.prefers-reduced-motion")}}</p> + +<h2 id="sect1"></h2> + +<div>{{QuickLinksWithSubpages("/en-US/docs/Web/CSS/@media/")}}</div> diff --git a/files/de/web/css/@media/width/index.html b/files/de/web/css/@media/width/index.html new file mode 100644 index 0000000000..7f25285f3e --- /dev/null +++ b/files/de/web/css/@media/width/index.html @@ -0,0 +1,53 @@ +--- +title: width +slug: Web/CSS/@media/width +tags: + - CSS + - Referenz +translation_of: Web/CSS/@media/width +--- +<p>{{cssref}}</p> + +<p><strong><code>width</code></strong> ist eine <a href="/de/docs/Web/CSS">CSS</a> Medien-Eigenschaft, die verwendet werden kann um Stile basierend auf der Breite der Anzeige (Viewport) zuzuordnen. Die Breite muss als {{cssxref("<length>")}} Wert definiert werden.</p> + +<h2 id="Syntax">Syntax</h2> + +<p><strong><code>width</code></strong> ist ein Breichswert, d.h. <strong><code>min-width</code></strong> und <strong>max-width</strong> sind ebenfalls verfügbar.</p> + +<pre class="brush: css">/* Exakte Breite */ +@media (width: 300px) {} + +/* Viewport Minimale Breite */ +@media (min-width: 50em) {} + +/* Viewport Maximale Breite */ +@media (max-width: 1000px) {} +</pre> + +<h2 id="Spezifikationen">Spezifikationen</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('CSS4 Media Queries', '#media', '@media')}}</td> + <td>{{Spec2('CSS4 Media Queries')}}</td> + <td>Keine Änderung.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Media Queries', '#width', 'width')}}</td> + <td>{{Spec2('CSS3 Media Queries')}}</td> + <td>Initiale Definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browserkompatibilität</h2> + +{{Compat("css.at-rules.media.width")}} diff --git a/files/de/web/css/@page/bleed/index.html b/files/de/web/css/@page/bleed/index.html new file mode 100644 index 0000000000..709025d671 --- /dev/null +++ b/files/de/web/css/@page/bleed/index.html @@ -0,0 +1,77 @@ +--- +title: bleed +slug: Web/CSS/@page/bleed +tags: + - CSS + - CSS Referenz + - NeedsBrowserCompatibility + - NeedsLiveSample + - NeedsMobileBrowserCompatibility +translation_of: Web/CSS/@page/bleed +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Der <code>bleed</code> <a href="/de/docs/Web/CSS/At-Regel">At-Regel</a> Deskriptor gibt den Überhang über den Beschnitt des Seitenbereichs an. Diese Eigenschaft hat nur einen Effekt, falls Schnittmarken über die {{cssxref("marks")}} Eigenschaft aktiviert werden.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">/* Schlüsselwortwerte */ +bleed: auto; + +/* <length> Werte */ +bleed: 8pt; +bleed: 1cm; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>Erhält den Wert <code>6pt</code>, falls der Wert von {{cssxref("marks")}} <code>crop</code> ist. Ansonsten ist der Wert <code>0</code>.</dd> + <dt><code>{{cssxref("<length>")}}</code></dt> + <dd>Gibt an, wie weit, in jeder Richtung, der Beschnitt den Seitenbereich überragt. Werte können negativ sein, allerdings gibt es implementierungsspezifische Beschränkungen.</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush: css">@page { + bleed: 1cm; +} +</pre> + +<h2 id="Spezifikationen">Spezifikationen</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 Paged Media", "#bleed", "bleed")}}</td> + <td>{{Spec2("CSS3 Paged Media")}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{Compat("css.at-rules.page.bleed")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{Cssxref("marks")}}</li> +</ul> diff --git a/files/de/web/css/@page/index.html b/files/de/web/css/@page/index.html new file mode 100644 index 0000000000..ed45c12a03 --- /dev/null +++ b/files/de/web/css/@page/index.html @@ -0,0 +1,90 @@ +--- +title: '@page' +slug: Web/CSS/@page +tags: + - At-Regel + - CSS + - Layout + - NeedsMobileBrowserCompatibility + - Referenz + - Web +translation_of: Web/CSS/@page +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>@page</code> CSS At-Regel wird verwendet, um einige CSS Eigenschaften zu ändern, wenn ein Dokument gedruckt wird. Es können nicht alle CSS Eigenschaften mit <code>@page</code> geändert werden. Es können nur Seitenränder, Absatzkontrolle — oben (widow); unten (orphans) — und Seitenumbrüche des Dokuments verändert werden. Versuche, andere CSS Eigenschaften zu ändern, werden ignoriert.</p> + +<p>Die <code>@page</code> At-Regel kann über die CSS Objektmodellschnittstelle {{domxref("CSSPageRule")}} angesprochen werden.</p> + +<div class="note"><strong>Hinweis:</strong> Das W3C diskutiert, wie die viewportbezogenen {{cssxref("<length>")}} Einheiten, <code>vh</code>, <code>vw</code>, <code>vmin</code>, und <code>vmax</code> gehandhabt werden sollen. Bis dahin sollten diese nicht in einer <code>@page</code> At-Regel verwendet werden.</div> + +<h2 id="Syntax">Syntax</h2> + +<h3 id="Deskriptoren">Deskriptoren</h3> + +<dl> + <dt>{{cssxref("@page/size", "size")}}</dt> + <dd>Bestimmt die Zielgröße und -ausrichtung des den Seitenbereich beinhaltenden Blocks. Im allgemeinen Fall, in dem ein Seitenbereich auf einer Seitenpostille dargestellt wird, gibt sie auch die Größe der Zielseitenpostille an.</dd> +</dl> + +<dl> + <dt>{{cssxref("@page/marks", "marks")}}</dt> + <dd>Fügt dem Dokument Schneide- und/oder Registrierungsmarker hinzu.</dd> +</dl> + +<dl> + <dt>{{cssxref("@page/bleed", "bleed")}}</dt> + <dd>Gibt den Überhang über den Seitenbereich an, bei dem die Darstellung der Seite abgeschnitten wird.</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<p>Bitte lies die verschiedenen <a href="/de/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">Pseudoklassen</a> von <code>@page</code> für Beispiele.</p> + +<ul> + <li>{{Cssxref(":blank")}}</li> + <li>{{Cssxref(":first")}}</li> + <li>{{Cssxref(":left")}}</li> + <li>{{Cssxref(":right")}}</li> + <li>{{Cssxref(":recto")}} {{experimental_inline}}</li> + <li>{{Cssxref(":verso")}} {{experimental_inline}}</li> +</ul> + +<h2 id="Spezifikationen">Spezifikationen</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 Logical Properties', '#logical-page', ':recto und :verso')}}</td> + <td>{{Spec2('CSS Logical Properties')}}</td> + <td>Fügt die <code>:recto</code> und <code>:verso</code> Seitenselektoren hinzu.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Paged Media', '#at-page-rule', '@page')}}</td> + <td>{{Spec2('CSS3 Paged Media')}}</td> + <td>Keine Änderung bzgl. {{SpecName('CSS2.1')}}, es können jedoch mehr CSS At-Regeln innerhalb <code>@page</code> verwendet werden.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'page.html#page-selectors', '@page')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{Compat("css.at-rules.page")}}</p> diff --git a/files/de/web/css/@page/marks/index.html b/files/de/web/css/@page/marks/index.html new file mode 100644 index 0000000000..f30efcffd3 --- /dev/null +++ b/files/de/web/css/@page/marks/index.html @@ -0,0 +1,84 @@ +--- +title: marks +slug: Web/CSS/@page/marks +tags: + - CSS + - CSS Eigenschaft + - Layout + - NeedsBrowserCompatibility + - NeedsExample + - NeedsMobileBrowserCompatibility + - Referenz + - Web +translation_of: Web/CSS/@page/marks +--- +<p>{{CSSRef}}</p> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>marks</code> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft fügt Schneide- und/oder Registermarken zur Darstellung eines Dokuments hinzu. <em>Schneidemarken</em> zeigen an, wo die Seite abgeschnitten werden soll. <em>Registermarken</em> verden zur Ausrichtung von Blättern benutzt.</p> + +<p>Schneidemarken und Registermarken werden außerhalb des Seitenrechtecks gedruckt. Um Platz für Schneide- und Registermarken zu haben, müssen die finalen Seiten etwas größer sein als das Seitenrechteck.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css language-css"><code class="language-css"><span class="comment token">/* Schlüsselwortwerte */</span> +<span class="property token">marks</span><span class="punctuation token">:</span> none<span class="punctuation token">;</span> +<span class="property token">marks</span><span class="punctuation token">:</span> crop<span class="punctuation token">;</span> +<span class="property token">marks</span><span class="punctuation token">:</span> cross<span class="punctuation token">;</span> +<span class="property token">marks</span><span class="punctuation token">:</span> crop cross<span class="punctuation token">;</span></code></pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code>crop</code></dt> + <dd>Es werden Schneidemarken angezeigt.</dd> + <dt><code>cross</code></dt> + <dd>Es werden Registermarken angezeigt.</dd> + <dt><code>none</code></dt> + <dd>Es werden keine Marken angezeigt.</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush:css">@page { + marks: crop cross; +} +</pre> + +<h2 id="Spezifikationen">Spezifikationen</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 Paged Media', '#marks', 'marks')}}</td> + <td>{{Spec2('CSS3 Paged Media')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<p>Diese CSS Eigenschaft wurde ursprünglich in CSS Level 2 vorgeschlagen, wurde jedoch in CSS Level 2 (Revision 1) verworfen.</p> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.at-rules.page.marks")}} + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{Cssxref("@page/bleed", "bleed")}}</li> +</ul> diff --git a/files/de/web/css/@viewport/index.html b/files/de/web/css/@viewport/index.html new file mode 100644 index 0000000000..2cdcd37691 --- /dev/null +++ b/files/de/web/css/@viewport/index.html @@ -0,0 +1,96 @@ +--- +title: '@viewport' +slug: Web/CSS/@viewport +translation_of: Web/CSS/@viewport +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Zusammenfassung">Zusammenfassung</h2> + +<p>Die <code>@viewport</code> <a href="/en/CSS" title="CSS">CSS</a> <a href="/en/CSS/At-rule" title="en/CSS/At-rule">at-Regel</a> enthält eine Menge aus geschachtelten Deskriptoren in einem CSS-Block, der durch geschweifte Klammern begrenzt wird. Diese Deskriptoren steuern die Viewport-Einstellungen, insbesondere auf mobilen Geräten.</p> + +<h2 id="Syntax">Syntax</h2> + +<p>(Dieser MDN Artikel ist derzeit nur ein Abriss, ihm fehlt die vollständige Beschreibung der Syntax.)</p> + +<pre class="syntaxbox" style="font-size: 14px;">@viewport { + /* viewport-Deskriptor: viewport-Wert; */ +}</pre> + +<p> </p> + +<p>Ein <em>Zoomfaktor</em> von <code>1.0</code> oder <code>100%</code> beschreibt kein Zooming. Größere Werte vergrößern, kleinere Werte verkleinern.</p> + +<h3 id="Deskriptoren">Deskriptoren</h3> + +<p>Browser sollen unbekannte Deskriptoren ignorieren.</p> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/@viewport/min-width"><code>min-width</code></a></dt> + <dd>Verwendet für die Festlegung der Breite des Viewports, wenn das Dokument zum ersten Mal gezeigt wird.</dd> + <dt><a href="/en-US/docs/Web/CSS/@viewport/max-width"><code>max-width</code></a></dt> + <dd>Verwendet für die Festlegung der Breite des Viewports, wenn das Dokument zum ersten Mal gezeigt wird.</dd> + <dt><a href="/en-US/docs/Web/CSS/@viewport/width"><code>width</code></a></dt> + <dd>Eine Kurznotation für die Festlegung von sowohl <code>min-width</code> als auch <code>max-width</code></dd> + <dt><a href="/en-US/docs/Web/CSS/@viewport/min-height"><code>min-height</code></a></dt> + <dd>Verwendet für die Festlegung der Höhe des Viewports, wenn das Dokument zum ersten Mal gezeigt wird.</dd> + <dt><a href="/en-US/docs/Web/CSS/@viewport/max-height"><code>max-height</code></a></dt> + <dd>Verwendet für die Festlegung der Höhe des Viewports, wenn das Dokument zum ersten Mal gezeigt wird.</dd> + <dt><a href="/en-US/docs/Web/CSS/@viewport/height"><code>height</code></a></dt> + <dd>Eine Kurznotation für die Festlegung von sowohl <code>min-height</code> als auch <code>max-height</code></dd> + <dt><a href="/en-US/docs/Web/CSS/@viewport/zoom"><code>zoom</code></a></dt> + <dd>Legt den initialen Zoomfaktor fest.</dd> + <dt><a href="/en-US/docs/Web/CSS/@viewport/min-zoom"><code>min-zoom</code></a></dt> + <dd>Legt den minimalen Zoomfaktor fest.</dd> + <dt><a href="/en-US/docs/Web/CSS/@viewport/max-zoom"><code>max-zoom</code></a></dt> + <dd>Legt den maximalen Zoomfaktor fest.</dd> + <dt><a href="/en-US/docs/Web/CSS/@viewport/user-zoom"><code>user-zoom</code></a></dt> + <dd>Steuert, ob der Anwender den Zoomfaktor ändern darf.</dd> + <dt><a href="/en-US/docs/Web/CSS/@viewport/orientation"><code>orientation</code></a></dt> + <dd>Steuert die Orientierung des Dokuments (Hoch- oder Querformat).</dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="eval" style="font-size: 14px;">@viewport { + min-width: 640px; + max-width: 800px; +} +@viewport { + zoom: 0.75; + min-zoom: 0.5; + max-zoom: 0.9; +} +@viewport { + orientation: landscape; +}</pre> + +<h2 id="Specifications" name="Specifications">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezification</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Device', '#the-atviewport-rule', '@viewport')}}</td> + <td>{{Spec2('CSS3 Device')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<p>{{Compat("css.at-rules.viewport")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{HTMLElement("meta")}}, specifically <code><meta name="viewport"></code></li> + <li><a href="/en-US/docs/Mobile/Viewport_meta_tag">Using the viewport meta tag to control layout on mobile browsers</a></li> +</ul> diff --git a/files/de/web/css/_colon_-moz-broken/index.html b/files/de/web/css/_colon_-moz-broken/index.html new file mode 100644 index 0000000000..bf59121e5e --- /dev/null +++ b/files/de/web/css/_colon_-moz-broken/index.html @@ -0,0 +1,25 @@ +--- +title: ':-moz-broken' +slug: 'Web/CSS/:-moz-broken' +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - NeedsExample + - Non-standard +translation_of: 'Web/CSS/:-moz-broken' +--- +<div>{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9")}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>:-moz-broken</code> <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> matcht Elemente, die fehlende Bildlinks repräsentieren.</p> + +<p>Dieser Selektor ist dazu gedacht, hauptsächlich von Themeentwicklern verwendet zu werden.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{bug("11011")}}</li> + <li>{{cssxref("-moz-alt-content")}}</li> +</ul> diff --git a/files/de/web/css/_colon_-moz-drag-over/index.html b/files/de/web/css/_colon_-moz-drag-over/index.html new file mode 100644 index 0000000000..af4b680211 --- /dev/null +++ b/files/de/web/css/_colon_-moz-drag-over/index.html @@ -0,0 +1,42 @@ +--- +title: ':-moz-drag-over' +slug: 'Web/CSS/:-moz-drag-over' +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - Non-standard +translation_of: 'Web/CSS/:-moz-drag-over' +--- +<div>{{Non-standard_header}}{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>:-moz-drag-over</code> <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> wird dazu verwendet, um ein Element zu stylen, wenn das drag-over Ereignis für es ausgelöst wird.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>element</var>:-moz-drag-over { <em>Stileigenschaften</em> } +</pre> + +<h2 id="Beispiel">Beispiel</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush:css">td:-moz-drag-over { + color: red; +} +</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush:html"><table border="1"> + <tr> + <td width="100px" height="100px">Hierüber ziehen</td> + </tr> +</table> +</pre> + +<h3 id="Ergebnis">Ergebnis</h3> + +<p>{{EmbedLiveSample("Example")}}</p> diff --git a/files/de/web/css/_colon_-moz-first-node/index.html b/files/de/web/css/_colon_-moz-first-node/index.html new file mode 100644 index 0000000000..97002e8509 --- /dev/null +++ b/files/de/web/css/_colon_-moz-first-node/index.html @@ -0,0 +1,48 @@ +--- +title: ':-moz-first-node' +slug: 'Web/CSS/:-moz-first-node' +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - Non-standard +translation_of: 'Web/CSS/:-moz-first-node' +--- +<div>{{Non-standard_header}}{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>:-moz-first-node</code> <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> repräsentiert ein beliebiges Element, dass der erste Kindknoten eines anderen Elements ist. Es unterscheidet sich von {{cssxref(":last-child")}}, da es keine letzten Kindelemente mit darauffolgendem (nicht aus Leerzeichen bestehenden) Text matcht.</p> + +<p class="note">Any white space at the start of an element is ignored for the determination of <code>:-moz-first-node</code>.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>span</var>:-moz-first-node { <em>Stileigenschaften</em> } +</pre> + +<h2 id="Beispiel">Beispiel</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush:css">span:-moz-first-node { + background-color: lime; +} +</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush:html"><div> + <span>:-moz-first-node</span> + <span>:-moz-last-node</span> +</div> +</pre> + +<p>{{EmbedLiveSample("Example", "220", "20")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{cssxref(":-moz-last-node")}}</li> + <li>{{cssxref(":first-child")}}</li> +</ul> diff --git a/files/de/web/css/_colon_-moz-focusring/index.html b/files/de/web/css/_colon_-moz-focusring/index.html new file mode 100644 index 0000000000..ab07f48bdc --- /dev/null +++ b/files/de/web/css/_colon_-moz-focusring/index.html @@ -0,0 +1,91 @@ +--- +title: ':-moz-focusring' +slug: 'Web/CSS/:-moz-focusring' +tags: + - CSS + - CSS Referenz + - NeedsBrowserCompatibility + - NeedsLiveSample + - Non-standard +translation_of: 'Web/CSS/:-moz-focusring' +--- +<div>{{Non-standard_header}}{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>:-moz-focusring</code> <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> ist ähnlich der {{cssxref(":focus")}} Pseudoklasse, jedoch matcht sie ein Element nur, wenn das Element aktuell fokussiert ist <strong>und</strong> der User Agent das Zeichen von Fokusringen aktiviert hat. Falls <code>:-moz-focusring</code> matcht, dann matcht auch <code>:focus</code>, aber das Umgekehrte ist nicht immer wahr - es hängt davon ab, ob der User Agent das Zeichnen von Fokusringen aktiviert hat. Ob der User Agent das Zeichen von Fokusringen aktiviert hat, kann von Dingen wie der Einstellung des Betriebssystems abhängen, das der Benutzer verwendet, sodass das Verhalten dieser Pseudoklasse von Plattform zu Plattform abhängig von den Best Practices (Standardeinstellungen) bezüglich Fokusierung der Plattform oder Benutzereinstellungen.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">:-moz-focusring</pre> + +<h2 id="Beispiel">Beispiel</h2> + +<p>Um die Anzeige eines fokussierten Elements zu definieren, kann dieser Pseudoklassenselektor folgendermaßen verwendet werden:</p> + +<pre class="brush: css">mybutton:-moz-focusring { + outline: 2px dotted; +} +</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<p>Dieses Feature ist bisher noch in keiner Spezifikation definiert, jedoch wurde es <a href="https://lists.w3.org/Archives/Public/www-style/2015Sep/0226.html">in der Working Group diskutiert</a> und es wurde <a href="https://lists.w3.org/Archives/Public/www-style/2015Oct/0012.html">beschlossen, es zu Selectors 4 oder 5 hinzuzufügen</a>.</p> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop(2)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Android</th> + <th>Chrome für Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{bug("418521")}}</li> +</ul> diff --git a/files/de/web/css/_colon_-moz-full-screen-ancestor/index.html b/files/de/web/css/_colon_-moz-full-screen-ancestor/index.html new file mode 100644 index 0000000000..c14ed802c6 --- /dev/null +++ b/files/de/web/css/_colon_-moz-full-screen-ancestor/index.html @@ -0,0 +1,82 @@ +--- +title: ':-moz-full-screen-ancestor' +slug: 'Web/CSS/:-moz-full-screen-ancestor' +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - NeedsExample + - Non-standard + - Pseudoklasse +translation_of: 'Archive/Web/CSS/:-moz-full-screen-ancestor' +--- +<div>{{CSSRef}}{{non-standard_header}}</div> + +<p>Die <code>:-moz-full-screen-ancestor</code> CSS <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> passt auf alle Vorfahren des Vollbild-Elements außer beinhaltende Frames in Elterndokumenten, welche das Vollbild-Element in ihren eigenen Dokumenten sind. Jedoch passt diese Pseudoklasse auf die Vorfahren dieser Elemente.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<p>Benötigt Beispiele.</p> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("10.0")}}{{property_prefix("-moz")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("10.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Vollbild-API">Verwendung des Vollbildmodus</a></li> + <li>{{domxref("element.mozRequestFullScreen()")}}</li> + <li>{{domxref("document.mozCancelFullScreen()")}}</li> + <li>{{domxref("document.mozFullScreen")}}</li> + <li>{{domxref("document.mozFullScreenElement")}}</li> + <li>{{domxref("document.mozFullScreenEnabled")}}</li> + <li>{{HTMLAttrXRef("mozallowfullscreen", "iframe")}}</li> + <li>{{cssxref(":-moz-full-screen")}}</li> +</ul> diff --git a/files/de/web/css/_colon_-moz-handler-blocked/index.html b/files/de/web/css/_colon_-moz-handler-blocked/index.html new file mode 100644 index 0000000000..df544a0487 --- /dev/null +++ b/files/de/web/css/_colon_-moz-handler-blocked/index.html @@ -0,0 +1,23 @@ +--- +title: ':-moz-handler-blocked' +slug: 'Web/CSS/:-moz-handler-blocked' +tags: + - CSS + - CSS Referenz + - Non-standard +translation_of: 'Web/CSS/:-moz-handler-blocked' +--- +<p>{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9.1")}}</p> + +<h2 id="Übersicht">Übersicht</h2> + +<p><code>:-moz-handler-blocked</code> matcht Elemente, die nicht angezeigt werden können, weil deren Handler blockiert wurden.</p> + +<p>Dies ist hauptsächlich für Themeentwickler nützlich.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{cssxref(":-moz-handler-crashed")}}</li> + <li>{{cssxref(":-moz-handler-disabled")}}</li> +</ul> diff --git a/files/de/web/css/_colon_-moz-handler-crashed/index.html b/files/de/web/css/_colon_-moz-handler-crashed/index.html new file mode 100644 index 0000000000..25f59a32c2 --- /dev/null +++ b/files/de/web/css/_colon_-moz-handler-crashed/index.html @@ -0,0 +1,23 @@ +--- +title: ':-moz-handler-crashed' +slug: 'Web/CSS/:-moz-handler-crashed' +tags: + - CSS + - CSS Referenz + - Non-standard +translation_of: 'Web/CSS/:-moz-handler-crashed' +--- +<p>{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("2.0")}}</p> + +<h2 id="Übersicht">Übersicht</h2> + +<p><code>:-moz-handler-crashed</code> matcht Elemente, die nicht angezeigt werden können, weil das Plugin, das für deren Darstellung verantwortlich ist, abgestürzt ist.</p> + +<p>Dies ist hauptsächlich für Themeentwickler nützlich.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{cssxref(":-moz-handler-blocked")}}</li> + <li>{{cssxref(":-moz-handler-disabled")}}</li> +</ul> diff --git a/files/de/web/css/_colon_-moz-handler-disabled/index.html b/files/de/web/css/_colon_-moz-handler-disabled/index.html new file mode 100644 index 0000000000..4a47e9f9d6 --- /dev/null +++ b/files/de/web/css/_colon_-moz-handler-disabled/index.html @@ -0,0 +1,23 @@ +--- +title: ':-moz-handler-disabled' +slug: 'Web/CSS/:-moz-handler-disabled' +tags: + - CSS + - CSS Referenz + - Non-standard +translation_of: 'Web/CSS/:-moz-handler-disabled' +--- +<p>{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9.1")}}</p> + +<h2 id="Übersicht">Übersicht</h2> + +<p><code>:-moz-handler-disabled</code> matcht Elemente, die nicht angezeigt werden können, weil deren Handler durch den Benutzer deaktiviert wurden.</p> + +<p>Dies ist hauptsächlich für Themeentwickler nützlich.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{cssxref(":-moz-handler-blocked")}}</li> + <li>{{cssxref(":-moz-handler-crashed")}}</li> +</ul> diff --git a/files/de/web/css/_colon_-moz-last-node/index.html b/files/de/web/css/_colon_-moz-last-node/index.html new file mode 100644 index 0000000000..29f8c0b486 --- /dev/null +++ b/files/de/web/css/_colon_-moz-last-node/index.html @@ -0,0 +1,48 @@ +--- +title: ':-moz-last-node' +slug: 'Web/CSS/:-moz-last-node' +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - Non-standard +translation_of: 'Web/CSS/:-moz-last-node' +--- +<div>{{Non-standard_header}}{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>:-moz-last-node</code> <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">Pseudoklasse</a> matcht ein Element, das der letzte Kindknoten eines anderen Elements ist. Es unterscheidet sich von {{cssxref(":last-child")}}, da es keine letzten Kindelemente mit darauffolgendem (nicht aus Leerzeichen bestehenden) Text matcht.</p> + +<p class="note">Leerzeichen am Ende eines Elements werden zur Bestimmung von <code>:-moz-last-node</code> ignoriert.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>span</var>:-moz-last-node { <em>Stileigenschaften</em> } +</pre> + +<h2 id="Beispiel">Beispiel</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush:css">span:-moz-last-node { + background-color: lime; +} +</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush:html"><div> + <span>:-moz-first-node</span> + <span>:-moz-last-node</span> +</div> +</pre> + +<p>{{EmbedLiveSample("Beispiel", "220", "20")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{cssxref(":-moz-first-node")}}</li> + <li>{{cssxref(":last-child")}}</li> +</ul> diff --git a/files/de/web/css/_colon_-moz-list-bullet/index.html b/files/de/web/css/_colon_-moz-list-bullet/index.html new file mode 100644 index 0000000000..f3ffef8cda --- /dev/null +++ b/files/de/web/css/_colon_-moz-list-bullet/index.html @@ -0,0 +1,47 @@ +--- +title: '::-moz-list-bullet' +slug: 'Web/CSS/:-moz-list-bullet' +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - NeedsLiveSample + - Non-standard +translation_of: 'Web/CSS/:-moz-list-bullet' +--- +<div>{{Non-standard_header}}{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Das nicht standardisierte <code>::-moz-list-bullet</code> Mozilla <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Pseudo-elements">Pseudoelement</a> wird dazu benutzt, um den Aufzählungspunkt eines Listenelements zu stylen.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">li::-moz-list-bullet { <em>style properties</em> }</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush:css">.list li::-moz-list-bullet { + font-size: 36px; +} +</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush:html"><ul> + <li>Number 1</li> + <li>Number 2</li> + <li>Number 3</li> +</ul> +<ul class="list"> + <li>Number 1</li> + <li>Number 2</li> + <li>Number 3</li> +</ul> +</pre> + +<h3 id="Ergebnis">Ergebnis</h3> + +<p><img alt="Image:liug3.jpg" class="internal" src="/@api/deki/files/745/=Liug3.jpg"></p> diff --git a/files/de/web/css/_colon_-moz-list-number/index.html b/files/de/web/css/_colon_-moz-list-number/index.html new file mode 100644 index 0000000000..92de0853ac --- /dev/null +++ b/files/de/web/css/_colon_-moz-list-number/index.html @@ -0,0 +1,45 @@ +--- +title: '::-moz-list-number' +slug: 'Web/CSS/:-moz-list-number' +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - Non-standard + - Pseudoelement +translation_of: 'Web/CSS/:-moz-list-number' +--- +<div>{{Non-standard_header}}{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Das <code>::-moz-list-number</code> <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Pseudo-elements">Pseudoelement</a> erlaubt es, das Aussehen von Zahlen in Listeneinträgen ({{HTMLElement("li")}}), die in geordneten Listen ({{HTMLElement("ol")}}) auftreten, anzupassen.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">li::-moz-list-number { <em>style properties</em> } +</pre> + +<h2 id="Beispiel">Beispiel</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush:css">li::-moz-list-number { + font-style: italic; + font-weight: bold; +} +</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush:html"><ol> + <li>First item</li> + <li>Second item</li> + <li>Third item</li> +</ol> +</pre> + +<h3 id="Ergebnis">Ergebnis</h3> + +<p><img alt="moz-list-number.png" class="default internal" src="/@api/deki/files/4668/=moz-list-number.png"><br> + {{EmbedLiveSample("Beispiel")}}</p> diff --git a/files/de/web/css/_colon_-moz-loading/index.html b/files/de/web/css/_colon_-moz-loading/index.html new file mode 100644 index 0000000000..01a8a5cb9a --- /dev/null +++ b/files/de/web/css/_colon_-moz-loading/index.html @@ -0,0 +1,17 @@ +--- +title: ':-moz-loading' +slug: 'Web/CSS/:-moz-loading' +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - NeedsContent + - NeedsExample + - Non-standard +translation_of: 'Web/CSS/:-moz-loading' +--- +<div>{{CSSRef}}{{Non-standard_header}}{{gecko_minversion_header("1.9")}}</div> + +<p>Die <code>:-moz-loading</code> <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> matcht Elemente, die nicht angezeigt werden können, weil sie noch nicht geladen wurden, wie beispielsweise Bilder, die noch nicht angefangen haben, anzukommen. Beachte, dass Bilder, die <em>dabei sind</em>, geladen zu werden, <em>nicht</em> von der Pseudoklasse gematcht werden.</p> + +<p>Dies ist hauptsächlich für Themeentwickler nützlich.</p> diff --git a/files/de/web/css/_colon_-moz-locale-dir(ltr)/index.html b/files/de/web/css/_colon_-moz-locale-dir(ltr)/index.html new file mode 100644 index 0000000000..74d080b016 --- /dev/null +++ b/files/de/web/css/_colon_-moz-locale-dir(ltr)/index.html @@ -0,0 +1,28 @@ +--- +title: ':-moz-locale-dir(ltr)' +slug: 'Web/CSS/:-moz-locale-dir(ltr)' +tags: + - CSS + - CSS Referenz + - Localisierung + - NeedsCompatTable + - NeedsExample + - Non-standard + - Pseudoklasse +translation_of: 'Web/CSS/:-moz-locale-dir(ltr)' +--- +<div>{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9.2")}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>:-moz-locale-dir(ltr)</code> <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/pseudo-classes">Pseudoklasse</a> matcht ein Element, falls die Benutzerschnittstelle von links nach rechts angezeigt wird. Dies wird durch das Setzen der Einstellung <code>intl.uidirection.<em>locale</em></code> (wobei <code><em>locale</em></code> die aktuelle Sprachumgebung ist) auf "ltr" bestimmt.</p> + +<p>Dies erlaubt Erweiterungen (und Themes) die einfache Anpassung ihrer Benutzerschnittstelle an die Bedürfnisse der Sprachumgebung des Benutzers. Dies kann sich von Fenster zu Fenster und sogar von Tab zu Tab unterscheiden. Dies ermöglicht es Erweiterungen, selbst dann zu funktionieren, wenn sie die standardmäßige Sprachumgebung des Benutzers nicht unterstützen, da sie sowohl links-nach-rechts als auch rechts-nach-links Layouts unterstützen können, ohne sich um die Besonderheiten der Sprachumgebung zu sorgen.</p> + +<p>Dieser Selektor funktioniert nicht korrekt unter HTML; er matcht immer, unabhängig davon, ob das UI links-nach-rechts oder rechts-nach-links ist.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{Cssxref(":-moz-locale-dir(rtl)")}}</li> +</ul> diff --git a/files/de/web/css/_colon_-moz-locale-dir(rtl)/index.html b/files/de/web/css/_colon_-moz-locale-dir(rtl)/index.html new file mode 100644 index 0000000000..ac2045c986 --- /dev/null +++ b/files/de/web/css/_colon_-moz-locale-dir(rtl)/index.html @@ -0,0 +1,30 @@ +--- +title: ':-moz-locale-dir(rtl)' +slug: 'Web/CSS/:-moz-locale-dir(rtl)' +tags: + - CSS + - CSS Referenz + - Lokalisierung + - NeedsCompatTable + - NeedsExample + - Non-standard + - Pseudoklasse + - Rechts-nach-links +translation_of: 'Web/CSS/:-moz-locale-dir(rtl)' +--- +<div>{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9.2")}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>:-moz-locale-dir(rtl)</code> <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/pseudo-classes">Pseudoklasse</a> matcht ein Element, falls die Benutzerschnittstelle von rechts nach links angezeigt wird. Dies wird durch das Setzen der Einstellung <code>intl.uidirection.<em>locale</em></code> (wobei <code><em>locale</em></code> die aktuelle Sprachumgebung ist) auf "rtl" bestimmt.</p> + +<p>Dies erlaubt Erweiterungen (und Themes) die einfache Anpassung ihrer Benutzerschnittstelle an die Bedürfnisse der Sprachumgebung des Benutzers. Dies kann sich von Fenster zu Fenster und sogar von Tab zu Tab unterscheiden. Dies ermöglicht es Erweiterungen, selbst dann zu funktionieren, wenn sie die standardmäßige Sprachumgebung des Benutzers nicht unterstützen, da sie sowohl links-nach-rechts als auch rechts-nach-links Layouts unterstützen können, ohne sich um die Besonderheiten der Sprachumgebung zu sorgen.</p> + +<p>Dieser Selektor funktioniert nicht korrekt unter HTML; er matcht nie, unabhängig davon, ob das UI links-nach-rechts oder rechts-nach-links ist.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{cssxref(":-moz-locale-dir(rtl)")}}</li> + <li><a href="/de/docs/Making_Sure_Your_Theme_Works_with_RTL_Locales">Sicherstellen, dass die Benutzerschnittstelle mit RTL-Sprachumgebungen zusammenarbeitet</a></li> +</ul> diff --git a/files/de/web/css/_colon_-moz-lwtheme-brighttext/index.html b/files/de/web/css/_colon_-moz-lwtheme-brighttext/index.html new file mode 100644 index 0000000000..1b9aca10dd --- /dev/null +++ b/files/de/web/css/_colon_-moz-lwtheme-brighttext/index.html @@ -0,0 +1,22 @@ +--- +title: ':-moz-lwtheme-brighttext' +slug: 'Web/CSS/:-moz-lwtheme-brighttext' +tags: + - CSS + - CSS Referenz + - Non-standard +translation_of: 'Mozilla/Gecko/Chrome/CSS/:-moz-lwtheme-brighttext' +--- +<div>{{CSSRef}}{{non-standard_header}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>:-moz-lwtheme-brighttext</code> <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> matcht in Chrome-Dokumenten, wenn {{cssxref(":-moz-lwtheme")}} <code>true</code> ist und ein Lightweight Theme mit heller Farbe ausgewählt ist.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{cssxref(":-moz-lwtheme")}}</li> + <li>{{cssxref(":-moz-lwtheme-darktext")}}</li> + <li><a href="/de/Add-ons/Themes/Lightweight_Themes">Lightweight Themes</a></li> +</ul> diff --git a/files/de/web/css/_colon_-moz-lwtheme-darktext/index.html b/files/de/web/css/_colon_-moz-lwtheme-darktext/index.html new file mode 100644 index 0000000000..d62e9ca240 --- /dev/null +++ b/files/de/web/css/_colon_-moz-lwtheme-darktext/index.html @@ -0,0 +1,23 @@ +--- +title: ':-moz-lwtheme-darktext' +slug: 'Web/CSS/:-moz-lwtheme-darktext' +tags: + - CSS + - CSS Referenz + - Non-standard + - Themes +translation_of: 'Mozilla/Gecko/Chrome/CSS/:-moz-lwtheme-darktext' +--- +<div>{{CSSRef}}{{non-standard_header}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>:-moz-lwtheme-darktext</code> <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> matcht in Chrome-Dokumenten, wenn {{cssxref(":-moz-lwtheme")}} <code>true</code> ist und ein Lightweight Theme mit dunkler Farbe ausgewählt ist.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{cssxref(":-moz-lwtheme")}}</li> + <li>{{cssxref(":-moz-lwtheme-brighttext")}}</li> + <li><a href="/de/Add-ons/Themes/Lightweight_Themes">Lightweight Themes</a></li> +</ul> diff --git a/files/de/web/css/_colon_-moz-lwtheme/index.html b/files/de/web/css/_colon_-moz-lwtheme/index.html new file mode 100644 index 0000000000..6b0c439fa7 --- /dev/null +++ b/files/de/web/css/_colon_-moz-lwtheme/index.html @@ -0,0 +1,26 @@ +--- +title: ':-moz-lwtheme' +slug: 'Web/CSS/:-moz-lwtheme' +tags: + - CSS + - CSS Referenz + - Lightweight themes + - NeedsCompatTable + - NeedsExample + - Non-standard + - Themes +translation_of: 'Mozilla/Gecko/Chrome/CSS/:-moz-lwtheme' +--- +<div>{{Non-standard_header}}{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>:-moz-lwtheme</code> <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> matcht in Chromedokumenten, wenn das {{xulattr("lightweightthemes")}} Attribut des Wurzelelements <code>true</code> ist und ein Theme ausgewählt wurde.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{cssxref(":-moz-lwtheme-darktext")}}</li> + <li>{{cssxref(":-moz-lwtheme-brighttext")}}</li> + <li><a href="/de/Add-ons/Themes/Lightweight_Themes">Lightweight Themes</a></li> +</ul> diff --git a/files/de/web/css/_colon_-moz-only-whitespace/index.html b/files/de/web/css/_colon_-moz-only-whitespace/index.html new file mode 100644 index 0000000000..ef533f52d7 --- /dev/null +++ b/files/de/web/css/_colon_-moz-only-whitespace/index.html @@ -0,0 +1,36 @@ +--- +title: ':-moz-only-whitespace' +slug: 'Web/CSS/:-moz-only-whitespace' +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - Non-standard + - Pseudoklasse +translation_of: 'Web/CSS/:-moz-only-whitespace' +--- +<div>{{Non-standard_header}}{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>:-moz-only-whitespace</code> <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> matcht ein Element, dass keine Kindelemente hat oder leere Textknoten oder Textknoten, die nur Leerzeichen enthalten. Nur falls es Elementknoten oder Textknoten mit einem oder mehreren Zeichen innerhalb des Elements gibt, matcht das Element diese Pseudoklasse nicht mehr.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>span</var>:-moz-only-whitespace { <em>Stileigenschaften</em> } +</pre> + +<h2 id="Beispiel">Beispiel</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush:css">span:-moz-only-whitespace::before { + background-color: lime; +}</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush:html"><span> </span> +</pre> + +<p>{{EmbedLiveSample("Beispiel", "50", "20")}}</p> diff --git a/files/de/web/css/_colon_-moz-placeholder/index.html b/files/de/web/css/_colon_-moz-placeholder/index.html new file mode 100644 index 0000000000..2055009cf2 --- /dev/null +++ b/files/de/web/css/_colon_-moz-placeholder/index.html @@ -0,0 +1,120 @@ +--- +title: ':-moz-placeholder' +slug: 'Web/CSS/:-moz-placeholder' +tags: + - CSS + - CSS Pseudoklasse + - CSS Referenz + - Non-standard + - Platzhalter + - Selektoren +translation_of: 'Web/CSS/:placeholder-shown' +--- +<div class="note"><strong>Hinweis:</strong> Die :-moz-placeholder Pseudoklasse ist in Firefox 19 als veraltet markiert zugunsten des {{cssxref('::-moz-placeholder')}} Pseudoelements.</div> + +<div class="note"><strong>Hinweis:</strong>Die CSSWG hat beschlossen, <code>:placeholder-shown</code> einzuführen. Diese Funktionalität wird in Gecko irgendwann in der Zukunft wieder eingeführt, ohne Präfix und unter dem neuen Namen. {{bug("1069012")}}</div> + +<div>{{deprecated_header}}{{Non-standard_header}}{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>:-moz-placeholder</code> <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> repräsentiert ein Formularelement, das <a href="/de/docs/Web/Guide/HTML/Formulare_in_HTML#Das_placeholder_Attribut">Platzhaltertext</a> anzeigt. Dies erlaubt Webentwicklern und Themedesignern die Darstellung von Platzhaltertext anzupassen, welche standardmäßig einer hellgrauen Farbe entspricht. Dies ist in manchen Fällen unvorteilhaft, beispielsweise wenn der Hintergrundfarbe von Formularfeldern eine ähnliche Farbe zugewiesen wird. Hier kann die Pseudoklasse verwendet werden, um die Textfarbe des Platzhalters zu ändern.</p> + +<h2 id="Beispiel">Beispiel</h2> + +<p>Dieses Beispiel weist dem Platzhaltertext eine grüne Farbe zu.</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> +<head> + <title>Placeholder demo</title> + <style type="text/css"> + input:-moz-placeholder { + color: green; + } + </style> +</head> +<body> + <input id="test" placeholder="Placeholder text!"> +</body> +</html> +</pre> + +<p>Ergibt:</p> + +<p>{{EmbedLiveSample('Beispiel', '100%', 30)}}</p> + +<h2 id="Überlauf">Überlauf</h2> + +<p>Oft werden Suchfelder oder andere Formularelemente auf mobilen Geräten verkürzt dargestellt. Leider passt u. U. der Platzhaltertext eines {{HTMLElement("input")}} Elements in die Länge des Elements, was einen abgeschnittenen Text zur Folge hat. Um diese Darstellung zu verhindern, kann die CSS Eigenschaft <code>text-overflow: ellipsis!</code> verwendet werden, um den Text mit einer Ellipse abzuschließen.</p> + +<pre class="brush: css">input[placeholder] { text-overflow: ellipsis; } +::-moz-placeholder { text-overflow: ellipsis; } /* firefox 19+ */ +input:-moz-placeholder { text-overflow: ellipsis; } +</pre> + +<p>David Walsh hat dies in seinem Blog Eintrag <a class="external" href="http://davidwalsh.name/placeholder-overflow">"Placeholders and Overflow"</a> beschrieben.</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<p>Nicht Teil einer Spezifikation.</p> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("2.0")}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Implementiert in {{bug("457801")}}.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/Guide/HTML/Formulare_in_HTML">Formulare in HTML5</a></li> + <li>{{HTMLElement("input")}}</li> + <li>{{HTMLElement("textarea")}}</li> +</ul> diff --git a/files/de/web/css/_colon_-moz-submit-invalid/index.html b/files/de/web/css/_colon_-moz-submit-invalid/index.html new file mode 100644 index 0000000000..af433fef51 --- /dev/null +++ b/files/de/web/css/_colon_-moz-submit-invalid/index.html @@ -0,0 +1,28 @@ +--- +title: ':-moz-submit-invalid' +slug: 'Web/CSS/:-moz-submit-invalid' +tags: + - CSS + - CSS Pseudoklasse + - CSS Referenz + - Non-standard +translation_of: 'Web/CSS/:-moz-submit-invalid' +--- +<p>{{Non-standard_header}}{{CSSRef}}</p> + +<p>Die <code>:-moz-submit-invalid</code> <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">Pseudoklasse</a> repräsentiert jeden Submitbutton auf Formularen, deren Inhalte anhand ihrer <a href="/en-US/docs/Web/Guide/HTML/Forms_in_HTML#Constraint_Validation">Validierungsbeschränkungen</a> nicht gültig sind.</p> + +<p>Standardmäßig wird kein Stil zugewiesen. Dieser Stil kann dazu verwendet werden, um das Aussehen des Submitbuttons anzupassen, wenn es ungültige Formularfelder gibt.</p> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.selectors.-moz-submit-invalid")}} + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{cssxref(":valid")}}</li> + <li>{{cssxref(":invalid")}}</li> + <li>{{cssxref(":required")}}</li> + <li>{{cssxref(":optional")}}</li> +</ul> diff --git a/files/de/web/css/_colon_-moz-suppressed/index.html b/files/de/web/css/_colon_-moz-suppressed/index.html new file mode 100644 index 0000000000..a14ef0e383 --- /dev/null +++ b/files/de/web/css/_colon_-moz-suppressed/index.html @@ -0,0 +1,17 @@ +--- +title: ':-moz-suppressed' +slug: 'Web/CSS/:-moz-suppressed' +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - NeedsContent + - NeedsExample + - Non-standard +translation_of: 'Web/CSS/:-moz-suppressed' +--- +<div>{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9")}}</div> + +<p>Die <code>:-moz-suppressed</code> <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> matcht Elemente, die Bilder repräsentieren, die nicht geladen werden konnten, da das Laden von Bildern von dieser Seite blockiert wurde.</p> + +<p>Dieser Selektor ist dazu gedacht, hauptsächlich von Themeentwicklern verwendet zu werden.</p> diff --git a/files/de/web/css/_colon_-moz-system-metric(images-in-menus)/index.html b/files/de/web/css/_colon_-moz-system-metric(images-in-menus)/index.html new file mode 100644 index 0000000000..d9882303fd --- /dev/null +++ b/files/de/web/css/_colon_-moz-system-metric(images-in-menus)/index.html @@ -0,0 +1,19 @@ +--- +title: ':-moz-system-metric(images-in-menus)' +slug: 'Web/CSS/:-moz-system-metric(images-in-menus)' +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - NeedsContent + - NeedsExample + - Non-standard +translation_of: 'Archive/Web/CSS/:-moz-system-metric/images-in-menus' +--- +<div>{{CSSRef}}{{Non-standard_header}}{{Fx_minversion_header(3)}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>:-moz-system-metric(images-in-menus)</code> CSS <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> matcht ein Element, falls die Benutzerschnittstelle des Computers Bilder in Menüs unterstützt.</p> + +<p>Dieser Selektor ist hauptsächlich für die Benutzung durch Themeentwickler gedacht.</p> diff --git a/files/de/web/css/_colon_-moz-system-metric(mac-graphite-theme)/index.html b/files/de/web/css/_colon_-moz-system-metric(mac-graphite-theme)/index.html new file mode 100644 index 0000000000..8cd7bc0e9b --- /dev/null +++ b/files/de/web/css/_colon_-moz-system-metric(mac-graphite-theme)/index.html @@ -0,0 +1,25 @@ +--- +title: ':-moz-system-metric(mac-graphite-theme)' +slug: 'Web/CSS/:-moz-system-metric(mac-graphite-theme)' +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - Non-standard +translation_of: 'Archive/Web/CSS/:-moz-system-metric/mac-graphite-theme' +--- +<div>{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9.1")}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p><code>:-moz-system-metric(mac-graphite-theme)</code> matcht ein Element, falls der Benutzer die "Graphite" Darstellung in der "Darstellung" Einstellungsseite der Mac OS X Systemeinstellungen gewählt hat.</p> + +<p>Dieser Selektor ist hauptsächlich dazu gedacht, von Themeentwicklern verwendet zu werden.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<p><a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=332586">Demo</a></p> + +<h2 id="Bugzilla">Bugzilla</h2> + +<p>{{bug("448767")}}</p> diff --git a/files/de/web/css/_colon_-moz-system-metric(scrollbar-end-backward)/index.html b/files/de/web/css/_colon_-moz-system-metric(scrollbar-end-backward)/index.html new file mode 100644 index 0000000000..689598432f --- /dev/null +++ b/files/de/web/css/_colon_-moz-system-metric(scrollbar-end-backward)/index.html @@ -0,0 +1,73 @@ +--- +title: ':-moz-system-metric(scrollbar-end-backward)' +slug: 'Web/CSS/:-moz-system-metric(scrollbar-end-backward)' +tags: + - CSS + - CSS Pseudoklasse + - CSS Referenz + - NeedsContent + - NeedsExample + - Non-standard +translation_of: 'Archive/Web/CSS/:-moz-system-metric/scrollbar-end-backward' +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>:-moz-system-metric(scrollbar-end-backward)</code> <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> matcht ein Element, falls die Benutzerschnittstelle des Computers einen Zurück-Button am Ende von Scrollleisten beinhaltet.</p> + +<p>Dieser Selektor ist hauptsächlich für die Verwendung durch Themeentwickler gedacht.</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<p>Nicht Teil einer Spezifikation.</p> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/de/web/css/_colon_-moz-system-metric(scrollbar-end-forward)/index.html b/files/de/web/css/_colon_-moz-system-metric(scrollbar-end-forward)/index.html new file mode 100644 index 0000000000..a7c84cd200 --- /dev/null +++ b/files/de/web/css/_colon_-moz-system-metric(scrollbar-end-forward)/index.html @@ -0,0 +1,73 @@ +--- +title: ':-moz-system-metric(scrollbar-end-forward)' +slug: 'Web/CSS/:-moz-system-metric(scrollbar-end-forward)' +tags: + - CSS + - CSS Pseudoklasse + - CSS Referenz + - NeedsContent + - NeedsExample + - Non-standard +translation_of: 'Archive/Web/CSS/:-moz-system-metric/scrollbar-end-forward' +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>:-moz-system-metric(scrollbar-end-forward)</code> <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> matcht ein Element, falls die Benutzerschnittstelle des Computers einen Vorwärts-Button am Ende von Scrollleisten beinhaltet.</p> + +<p>Dieser Selektor ist hauptsächlich für die Verwendung durch Themeentwickler gedacht.</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<p>Nicht Teil einer Spezifikation.</p> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/de/web/css/_colon_-moz-system-metric(scrollbar-start-backward)/index.html b/files/de/web/css/_colon_-moz-system-metric(scrollbar-start-backward)/index.html new file mode 100644 index 0000000000..0781e4b37a --- /dev/null +++ b/files/de/web/css/_colon_-moz-system-metric(scrollbar-start-backward)/index.html @@ -0,0 +1,73 @@ +--- +title: ':-moz-system-metric(scrollbar-start-backward)' +slug: 'Web/CSS/:-moz-system-metric(scrollbar-start-backward)' +tags: + - CSS + - CSS Pseudoklasse + - CSS Referenz + - NeedsContent + - NeedsExample + - Non-standard +translation_of: 'Archive/Web/CSS/:-moz-system-metric/scrollbar-start-backward' +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>:-moz-system-metric(scrollbar-start-backward)</code> <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> matcht ein Element, falls die Benutzerschnittstelle des Computers einen Zurück-Button am Anfang von Scrollleisten beinhaltet.</p> + +<p>Dieser Selektor ist hauptsächlich für die Verwendung durch Themeentwickler gedacht.</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<p>Nicht Teil einer Spezifikation.</p> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/de/web/css/_colon_-moz-system-metric(scrollbar-start-forward)/index.html b/files/de/web/css/_colon_-moz-system-metric(scrollbar-start-forward)/index.html new file mode 100644 index 0000000000..01a8b77a02 --- /dev/null +++ b/files/de/web/css/_colon_-moz-system-metric(scrollbar-start-forward)/index.html @@ -0,0 +1,73 @@ +--- +title: ':-moz-system-metric(scrollbar-start-forward)' +slug: 'Web/CSS/:-moz-system-metric(scrollbar-start-forward)' +tags: + - CSS + - CSS Pseudoklasse + - CSS Referenz + - NeedsContent + - NeedsExample + - Non-standard +translation_of: 'Archive/Web/CSS/:-moz-system-metric/scrollbar-start-forward' +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>:-moz-system-metric(scrollbar-start-forward)</code> <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> matcht ein Element, falls die Benutzerschnittstelle des Computers einen Vorwärts-Button am Anfang von Scrollleisten beinhaltet.</p> + +<p>Dieser Selektor ist hauptsächlich für die Verwendung durch Themeentwickler gedacht.</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<p>Nicht Teil einer Spezifikation.</p> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/de/web/css/_colon_-moz-system-metric(scrollbar-thumb-proportional)/index.html b/files/de/web/css/_colon_-moz-system-metric(scrollbar-thumb-proportional)/index.html new file mode 100644 index 0000000000..cfdd764992 --- /dev/null +++ b/files/de/web/css/_colon_-moz-system-metric(scrollbar-thumb-proportional)/index.html @@ -0,0 +1,73 @@ +--- +title: ':-moz-system-metric(scrollbar-thumb-proportional)' +slug: 'Web/CSS/:-moz-system-metric(scrollbar-thumb-proportional)' +tags: + - CSS + - CSS Pseudoklasse + - CSS Referenz + - NeedsContent + - NeedsExample + - Non-standard +translation_of: 'Archive/Web/CSS/:-moz-system-metric/scrollbar-thumb-proportional' +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>:-moz-system-metric(scrollbar-thumb-proportional)</code> <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> matcht ein Element, falls die Benutzerschnittstelle des Computers proportionale Scrollleistenbalken verwendet; d. h. der bewegliche Balken der Scrollleiste verändert seine Größe, um die relative Größe der sichtbaren Bereichs des Dokuments zu kennzeichnen.</p> + +<p>Dieser Selektor ist hauptsächlich für die Verwendung durch Themeentwickler gedacht.</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<p>Nicht Teil einer Spezifikation.</p> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/de/web/css/_colon_-moz-system-metric(touch-enabled)/index.html b/files/de/web/css/_colon_-moz-system-metric(touch-enabled)/index.html new file mode 100644 index 0000000000..c59bc203d3 --- /dev/null +++ b/files/de/web/css/_colon_-moz-system-metric(touch-enabled)/index.html @@ -0,0 +1,73 @@ +--- +title: ':-moz-system-metric(touch-enabled)' +slug: 'Web/CSS/:-moz-system-metric(touch-enabled)' +tags: + - CSS + - CSS Pseudoklasse + - CSS Referenz + - NeedsContent + - NeedsExample + - Non-standard +translation_of: 'Archive/Web/CSS/:-moz-system-metric/touch-enabled' +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>:-moz-system-metric(touch-enabled)</code> <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> matcht ein Element, falls das Gerät, auf welchem der Inhalt angezeigt wird, eine unterstützte Touchscreen Schnittstelle bietet.</p> + +<div class="note"><strong>Hinweis:</strong> Diese Pseudoklasse ist nicht für die Benutzung in Webinhalten gedacht. Stattdessen sollte die <a href="/de/docs/Web/CSS/Media_Queries/Verwendung_von_Media_Queries#-moz-touch-enabled"><code>-moz-touch-enabled</code></a> Media Query verwendet werden.</div> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<p>Nicht Teil einer Spezifikation.</p> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("1.9.2")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/de/web/css/_colon_-moz-system-metric(windows-default-theme)/index.html b/files/de/web/css/_colon_-moz-system-metric(windows-default-theme)/index.html new file mode 100644 index 0000000000..2242bb293c --- /dev/null +++ b/files/de/web/css/_colon_-moz-system-metric(windows-default-theme)/index.html @@ -0,0 +1,65 @@ +--- +title: ':-moz-system-metric(windows-default-theme)' +slug: 'Web/CSS/:-moz-system-metric(windows-default-theme)' +tags: + - CSS + - CSS Pseudoklasse + - CSS Referenz + - NeedsMobileBrowserCompatibility + - Non-standard +translation_of: 'Archive/Web/CSS/:-moz-system-metric/windows-default-theme' +--- +<div>{{Non-standard_header}}{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>:-moz-system-metric(windows-default-theme)</code> CSS <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> matcht ein Element, falls der Benutzer aktuell eines der folgenden Themes in Windows verwendet: Luna, Royale, Zune oder Aero (d. h. Vista Basic, Vista Standard oder Aero Glass). Dies schließt sowohl Windows Classic Themes als auch Drittanbieterthemes aus.</p> + +<p>Dieser Selektor ist hauptsächlich für die Verwendung durch Themeentwickler gedacht.</p> + +<h2 id="Beispiel">Beispiel</h2> + +<h3 id="HTML_Inhalt">HTML Inhalt</h3> + +<pre class="brush: html"><p id="defaultThemes"> + This paragraph should have a green background with Luna/Royale/Zune/Aero + Windows themes and red with other themes. +</p> + +<p id="nonDefaultThemes"> + This paragraph should have a green background with Windows Classic or + third-party themes and red with other themes. +</p> + +<p id="notSupported">Theme detection is not supported.</p></pre> + +<h3 id="CSS_Inhalt">CSS Inhalt</h3> + +<pre class="brush: css">#defaultThemes, +#nonDefaultThemes { + background-color: #FFA0A0; +} + +#defaultThemes:-moz-system-metric(windows-default-theme) { + background-color: #A0FFA0; +} + +#nonDefaultThemes:not(-moz-system-metric(windows-default-theme)) { + background-color: #A0FFA0; +} + +#notSupported:-moz-system-metric(windows-default-theme), +#notSupported:not(:-moz-system-metric(windows-default-theme)) { + display: none; +} +</pre> + +<p>{{EmbedLiveSample("Beispiel", "100%", 170)}}</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<p>Nicht Teil einer Spezifikation.</p> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.selectors.-moz-system-metric.windows-default-theme")}} diff --git a/files/de/web/css/_colon_-moz-tree-cell-text(hover)/index.html b/files/de/web/css/_colon_-moz-tree-cell-text(hover)/index.html new file mode 100644 index 0000000000..a1cf6af05c --- /dev/null +++ b/files/de/web/css/_colon_-moz-tree-cell-text(hover)/index.html @@ -0,0 +1,20 @@ +--- +title: ':-moz-tree-cell-text(hover)' +slug: 'Web/CSS/:-moz-tree-cell-text(hover)' +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - NeedsContent + - NeedsExample + - Non-standard + - Selektor +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-cell-text(hover)' +--- +<div>{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header(1.9)}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>:-moz-tree-cell-text(hover)</code> <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> matcht ein Element, falls sich der Mauszeiger über dem Text innerhalb einer Baumzelle befindet.</p> + +<p>Dieser Selektor ist hauptsächlich für die Benutzung durch Themeentwickler gedacht.</p> diff --git a/files/de/web/css/_colon_-moz-tree-cell-text/index.html b/files/de/web/css/_colon_-moz-tree-cell-text/index.html new file mode 100644 index 0000000000..1507e1f8c4 --- /dev/null +++ b/files/de/web/css/_colon_-moz-tree-cell-text/index.html @@ -0,0 +1,30 @@ +--- +title: ':-moz-tree-cell-text' +slug: 'Web/CSS/:-moz-tree-cell-text' +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - NeedsContent + - NeedsExample + - Non-standard +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-cell-text' +--- +<p>{{Non-standard_header}}{{CSSRef}}</p> + +<p>Aktiviert durch das <code>properties</code> Attribut.</p> + +<h2 id="Zugehörige_Elemente">Zugehörige Elemente</h2> + +<ul> + <li>{{XULElem("treecell")}}</li> +</ul> + +<h2 id="Stileigenschaften">Stileigenschaften</h2> + +<ul> + <li>{{cssxref("font")}}</li> + <li>{{cssxref("visibility")}}</li> + <li>{{cssxref("color")}}</li> + <li>{{cssxref("text-decoration")}}</li> +</ul> diff --git a/files/de/web/css/_colon_-moz-tree-cell/index.html b/files/de/web/css/_colon_-moz-tree-cell/index.html new file mode 100644 index 0000000000..f2250e3e4f --- /dev/null +++ b/files/de/web/css/_colon_-moz-tree-cell/index.html @@ -0,0 +1,38 @@ +--- +title: ':-moz-tree-cell' +slug: 'Web/CSS/:-moz-tree-cell' +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - NeedsContent + - NeedsExample + - Non-standard +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-cell' +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<p>Aktiviert durch das <code>properties</code> Attribut.</p> + +<h2 id="Zugehörige_Elemente">Zugehörige Elemente</h2> + +<ul> + <li>{{XULElem("treecell")}}</li> +</ul> + +<h2 id="Stileigenschaften">Stileigenschaften</h2> + +<ul> + <li>{{cssxref("background")}}</li> + <li>{{cssxref("border")}}</li> + <li>{{cssxref("margin")}}</li> + <li>{{cssxref("outline")}}</li> + <li>{{cssxref("padding")}}</li> + <li>{{cssxref("visibility")}}</li> +</ul> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Mozilla/Tech/XUL/Tutorial/Styling_eines_Baums">Styling eines Baums</a></li> +</ul> diff --git a/files/de/web/css/_colon_-moz-tree-column/index.html b/files/de/web/css/_colon_-moz-tree-column/index.html new file mode 100644 index 0000000000..927b64e482 --- /dev/null +++ b/files/de/web/css/_colon_-moz-tree-column/index.html @@ -0,0 +1,29 @@ +--- +title: ':-moz-tree-column' +slug: 'Web/CSS/:-moz-tree-column' +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - NeedsContent + - NeedsExample + - Non-standard +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-column' +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<p>Aktiviert durch das <code>properties</code> Attribut.</p> + +<h2 id="Zugehörige_Elemente">Zugehörige Elemente</h2> + +<ul> + <li>{{XULElem("treecol")}}</li> +</ul> + +<h2 id="Stileigenschaften">Stileigenschaften</h2> + +<ul> + <li>{{cssxref("margin")}}</li> + <li>{{cssxref("visibility")}}</li> + <li>{{cssxref("text style")}}</li> +</ul> diff --git a/files/de/web/css/_colon_-moz-tree-drop-feedback/index.html b/files/de/web/css/_colon_-moz-tree-drop-feedback/index.html new file mode 100644 index 0000000000..607b4dfe1b --- /dev/null +++ b/files/de/web/css/_colon_-moz-tree-drop-feedback/index.html @@ -0,0 +1,29 @@ +--- +title: ':-moz-tree-drop-feedback' +slug: 'Web/CSS/:-moz-tree-drop-feedback' +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - NeedsContent + - NeedsExample + - Non-standard + - Pseudo-class +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-drop-feedback' +--- +<div>{{Non-standard_header}}{{CSSRef}}</div> + +<p>Aktiviert durch das <code>properties</code> Attribut.</p> + +<h2 id="Zugehörige_Elemente">Zugehörige Elemente</h2> + +<ul> + <li>{{XULElem("treerow")}}</li> +</ul> + +<h2 id="Stileigenschaften">Stileigenschaften</h2> + +<ul> + <li>{{cssxref("margin")}}</li> + <li>{{cssxref("visibility")}}</li> +</ul> diff --git a/files/de/web/css/_colon_-moz-tree-image/index.html b/files/de/web/css/_colon_-moz-tree-image/index.html new file mode 100644 index 0000000000..780d66e4bf --- /dev/null +++ b/files/de/web/css/_colon_-moz-tree-image/index.html @@ -0,0 +1,34 @@ +--- +title: ':-moz-tree-image' +slug: 'Web/CSS/:-moz-tree-image' +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - NeedsContent + - NeedsLiveSample + - Non-standard +translation_of: 'Mozilla/Gecko/Chrome/CSS/:-moz-tree-image' +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<p>Aktiviert durch das <code>properties</code> Attribut.</p> + +<h2 id="Zugehörige_Elemente">Zugehörige Elemente</h2> + +<ul> + <li>{{XULElem("treeitem")}}</li> + <li>{{XULElem("treecell")}}</li> +</ul> + +<h2 id="Stileigenschaften">Stileigenschaften</h2> + +<ul> + <li>{{cssxref("margin")}}</li> + <li>{{cssxref("list-style")}}</li> + <li>{{cssxref("position")}}</li> +</ul> + +<h2 id="Beispiele">Beispiele</h2> + +<p><a class="external" href="http://forums.mozillazine.org/viewtopic.php?t=610762&sid=2aa24bf393171dd0c9bd9343b3d355c3">Bookmark icons in the Places window - Mozillazine Forum</a></p> diff --git a/files/de/web/css/_colon_-moz-tree-indentation/index.html b/files/de/web/css/_colon_-moz-tree-indentation/index.html new file mode 100644 index 0000000000..c53db78b8f --- /dev/null +++ b/files/de/web/css/_colon_-moz-tree-indentation/index.html @@ -0,0 +1,27 @@ +--- +title: ':-moz-tree-indentation' +slug: 'Web/CSS/:-moz-tree-indentation' +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - NeedsContent + - NeedsExample + - Non-standard +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-indentation' +--- +<p>{{CSSRef}}{{Non-standard_header}}</p> + +<p>Aktiviert durch das <code>properties</code> Attribut.</p> + +<h2 id="Zugehörige_Elemente">Zugehörige Elemente</h2> + +<ul> + <li>{{XULElem("treeitem")}}</li> +</ul> + +<h2 id="Stileigenschaften">Stileigenschaften</h2> + +<ul> + <li>{{cssxref("position")}}</li> +</ul> diff --git a/files/de/web/css/_colon_-moz-tree-line/index.html b/files/de/web/css/_colon_-moz-tree-line/index.html new file mode 100644 index 0000000000..b6badf8db2 --- /dev/null +++ b/files/de/web/css/_colon_-moz-tree-line/index.html @@ -0,0 +1,25 @@ +--- +title: ':-moz-tree-line' +slug: 'Web/CSS/:-moz-tree-line' +tags: + - CSS + - CSS Referenz + - Non-standard +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-line' +--- +<p>{{Non-standard_header}}{{CSSRef}}</p> + +<p>Aktiviert durch das <code>properties</code> Attribut.</p> + +<h2 id="Zugehörige_Elemente">Zugehörige Elemente</h2> + +<ul> + <li>{{XULElem("treeitem")}}</li> +</ul> + +<h2 id="Stileigenschaften">Stileigenschaften</h2> + +<ul> + <li>{{cssxref("border")}}</li> + <li>{{cssxref("visibility")}}</li> +</ul> diff --git a/files/de/web/css/_colon_-moz-tree-progressmeter/index.html b/files/de/web/css/_colon_-moz-tree-progressmeter/index.html new file mode 100644 index 0000000000..1642c8f373 --- /dev/null +++ b/files/de/web/css/_colon_-moz-tree-progressmeter/index.html @@ -0,0 +1,28 @@ +--- +title: ':-moz-tree-progressmeter' +slug: 'Web/CSS/:-moz-tree-progressmeter' +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - NeedsContent + - NeedsExample + - Non-standard +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-progressmeter' +--- +<div>{{Non-standard_header}}{{CSSRef}}</div> + +<p>Aktiviert, wenn das <code>type</code> Attribut auf <code>progressmeter</code> gesetzt ist.</p> + +<h2 id="Zugehörige_Elemente">Zugehörige Elemente</h2> + +<ul> + <li>{{XULElem("treecell")}}</li> +</ul> + +<h2 id="Stileigenschaften">Stileigenschaften</h2> + +<ul> + <li>{{cssxref("margin")}}</li> + <li>{{cssxref("color")}}</li> +</ul> diff --git a/files/de/web/css/_colon_-moz-tree-row(hover)/index.html b/files/de/web/css/_colon_-moz-tree-row(hover)/index.html new file mode 100644 index 0000000000..07400474ba --- /dev/null +++ b/files/de/web/css/_colon_-moz-tree-row(hover)/index.html @@ -0,0 +1,20 @@ +--- +title: ':-moz-tree-row(hover)' +slug: 'Web/CSS/:-moz-tree-row(hover)' +tags: + - CSS + - CSS Pseudoklasse + - CSS Referenz + - NeedsCompatTable + - NeedsContent + - NeedsExample + - Non-standard +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-row(hover)' +--- +<div>{{Non-standard_header}}{{CSSRef}}{{Fx_minversion_header(3)}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>:-moz-tree-row(hover)</code> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> matcht ein Element, falls der Mauszeiger sich über einer Baumzeile befindet.</p> + +<p>Dieser Selektor ist hauptsächlich für die Verwendung durch Themeentwickler gedacht.</p> diff --git a/files/de/web/css/_colon_-moz-tree-row/index.html b/files/de/web/css/_colon_-moz-tree-row/index.html new file mode 100644 index 0000000000..72c4ae0940 --- /dev/null +++ b/files/de/web/css/_colon_-moz-tree-row/index.html @@ -0,0 +1,48 @@ +--- +title: ':-moz-tree-row' +slug: 'Web/CSS/:-moz-tree-row' +tags: + - CSS + - CSS Referenz + - Non-standard +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-row' +--- +<p>{{CSSRef}}{{Non-standard_header}}</p> + +<p>Das <code>::-moz-tree-row</code> <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Pseudo-elements">Pseudoelement</a> wird benutzt, um Zeilen auszuwählen und Stile auf Baumzeilen anzuwenden.</p> + +<h2 id="Zugehörige_Elemente">Zugehörige Elemente</h2> + +<ul> + <li>{{XULElem("treerow")}}</li> +</ul> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">treechildren::-moz-tree-row { <em>Stileigenschaften </em>} +</pre> + +<h2 id="Stileigenschaften">Stileigenschaften</h2> + +<ul> + <li>{{cssxref("background")}}</li> + <li>{{cssxref("border")}}</li> + <li>{{cssxref("margin")}}</li> + <li>{{cssxref("outline")}}</li> + <li>{{cssxref("padding")}}</li> + <li>{{cssxref("display")}}</li> + <li>{{cssxref("-moz-appearance")}}</li> +</ul> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush:css">treechildren::-moz-tree-row( foo bar ) +{ + margin: 2%; +} +</pre> + +<p>...wo...</p> + +<pre class="brush:html"> <treerow properties="foo">...</treerow> +</pre> diff --git a/files/de/web/css/_colon_-moz-tree-separator/index.html b/files/de/web/css/_colon_-moz-tree-separator/index.html new file mode 100644 index 0000000000..d204747549 --- /dev/null +++ b/files/de/web/css/_colon_-moz-tree-separator/index.html @@ -0,0 +1,29 @@ +--- +title: ':-moz-tree-separator' +slug: 'Web/CSS/:-moz-tree-separator' +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - NeedsContent + - NeedsExample + - Non-standard +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-separator' +--- +<div>{{Non-standard_header}}{{CSSRef}}</div> + +<p>Aktiviert durch das <code>properties</code> Attribut.</p> + +<h2 id="Zugehörige_Elemente">Zugehörige Elemente</h2> + +<ul> + <li>{{XULElem("treeseparator")}}</li> +</ul> + +<h2 id="Stileigenschaften">Stileigenschaften</h2> + +<ul> + <li>{{cssxref("border")}}</li> + <li>{{cssxref("display")}}</li> + <li>{{cssxref("-moz-appearance")}}</li> +</ul> diff --git a/files/de/web/css/_colon_-moz-tree-twisty/index.html b/files/de/web/css/_colon_-moz-tree-twisty/index.html new file mode 100644 index 0000000000..3af5a302d0 --- /dev/null +++ b/files/de/web/css/_colon_-moz-tree-twisty/index.html @@ -0,0 +1,30 @@ +--- +title: ':-moz-tree-twisty' +slug: 'Web/CSS/:-moz-tree-twisty' +tags: + - CSS + - CSS Referenz + - Non-standard +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-twisty' +--- +<p>{{CSSRef}}{{Non-standard_header}}</p> + +<p>Aktiviert durch das <code>properties</code> Attribut.</p> + +<h2 id="Zugehörige_Elemente">Zugehörige Elemente</h2> + +<ul> + <li>{{XULElem("treecell")}}</li> +</ul> + +<h2 id="Styleeigenschaften">Styleeigenschaften</h2> + +<ul> + <li>{{cssxref("border")}}</li> + <li>{{cssxref("margin")}}</li> + <li>{{cssxref("padding")}}</li> + <li>{{cssxref("display")}}</li> + <li>{{cssxref("list-style")}}</li> + <li>{{cssxref("position")}}</li> + <li>{{cssxref("-moz-appearance")}}</li> +</ul> diff --git a/files/de/web/css/_colon_-moz-ui-invalid/index.html b/files/de/web/css/_colon_-moz-ui-invalid/index.html new file mode 100644 index 0000000000..cc133a4d28 --- /dev/null +++ b/files/de/web/css/_colon_-moz-ui-invalid/index.html @@ -0,0 +1,94 @@ +--- +title: ':-moz-ui-invalid' +slug: 'Web/CSS/:-moz-ui-invalid' +tags: + - CSS + - CSS Referenz + - NeedsExample + - NeedsMobileBrowserCompatibility + - Non-standard + - Pseudoklasse +translation_of: 'Web/CSS/:user-invalid' +--- +<div>{{Non-standard_header}}{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>:-moz-ui-invalid</code> CSS <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> repräsentiert jedes validierte Formularelement, dessen Wert nicht auf dessen <a href="/de/docs/Web/Guide/HTML/Formulare_in_HTML#Beschränkungsvalidierung">Validierungsbeschränkungen</a> basiert, unter bestimmten Umständen. Diese Pseudoklasse wird anhand der folgenden Regeln angewendet:</p> + +<ul> + <li>Falls das Steuerungselement nicht den Fokus hat und der Wert ungültig ist, wende diese Pseudoklasse an.</li> + <li>Falls das Steuerungselement den Fokus hat und der Wert gültig war (einschließlich leer) als es den Fokus erhielt, wende die Pseudoklasse nicht an.</li> + <li>Falls das Steuerungselement den Fokus hat und der Wert ungültig war als es den Fokus erhielt, werte ihn bei jedem Tastendruck erneut aus.</li> + <li>Falls das Steuerungselement ein Pflichtfeld ist, werden die vorherigen Regeln nur angewandt, falls der Benutzer den Wert geändert hat oder versucht, das Formular abzuschicken.</li> +</ul> + +<p>Das Ergebnis ist, dass wenn das Steuerungselement gültig war als der Benutzer angefangen hat, mit ihm zu interagieren, das Gültigkeitsstyling nur geändert wird, falls der Benutzer den Fokus auf ein anderes Steuerungselement setzt. Falls der Benutzer jedoch versucht, einen zuvor markierten Wert zu korrigieren, zeigt das Steuerungselement sofort an, wenn der Wert gültig wird. Auf Pflichtfelder wird die Pseudoklasse nur angewendet, falls der Benutzer diese ändert oder versucht, einen unveränderten gültigen Wert abzuschicken.</p> + +<p>Standardmäßig wendet Gecko einen Stil an, der ein rotes "Leuchten" (unter Vernwendung der {{cssxref("box-shadow")}} Eigenschaft) um Felder erzeugt, die diese Pseudoklasse zugewiesen haben. Siehe die {{cssxref(":invalid")}} Pseudoklasse für ein Beispiel, das zeigt, wie der Standardstil überschrieben werden kann.</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<p>Nicht Teil einer Spezifikation.</p> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop(2)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Android</th> + <th>Chrome für Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{cssxref(":valid")}}</li> + <li>{{cssxref(":invalid")}}</li> + <li>{{cssxref(":required")}}</li> + <li>{{cssxref(":optional")}}</li> + <li>{{cssxref(":-moz-ui-valid")}}</li> +</ul> diff --git a/files/de/web/css/_colon_-moz-ui-valid/index.html b/files/de/web/css/_colon_-moz-ui-valid/index.html new file mode 100644 index 0000000000..163ffacd79 --- /dev/null +++ b/files/de/web/css/_colon_-moz-ui-valid/index.html @@ -0,0 +1,94 @@ +--- +title: ':-moz-ui-valid' +slug: 'Web/CSS/:-moz-ui-valid' +tags: + - CSS + - CSS Pseudoklasse + - CSS Referenz + - NeedsExample + - NeedsMobileBrowserCompatibility + - Non-standard +translation_of: 'Web/CSS/:-moz-ui-valid' +--- +<div>{{Non-standard_header}}{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>:-moz-ui-valid</code> CSS <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> repräsentiert jedes validierte Formularelement, dessen Wert korrekt validiert basierend auf dessen <a href="/de/docs/Web/Guide/HTML/Formulare_in_HTML#Beschränkungsvalidierung">Validierungsbeschränkungen</a>.</p> + +<p>Diese Pseudoklasse wird anhand der folgenden Regeln angewendet:</p> + +<ul> + <li>Falls das Steuerungselement nicht den Fokus hat und der Wert gültig ist, wende diese Pseudoklasse an.</li> + <li>Falls das Steuerungselement den Fokus hat und der Wert gültig war (einschließlich leer) als es den Fokus erhielt, wende die Pseudoklasse an.</li> + <li>Falls das Steuerungselement den Fokus hat und der Wert ungültig war als es den Fokus erhielt, werte ihn bei jedem Tastendruck erneut aus.</li> + <li>Falls das Steuerungselement ein Pflichtfeld ist, werden die vorherigen Regeln nur angewandt, falls der Benutzer den Wert geändert hat oder versucht, das Formular abzuschicken.</li> +</ul> + +<p>Das Ergebnis ist, dass wenn das Steuerungselement gültig war als der Benutzer angefangen hat, mit ihm zu interagieren, das Gültigkeitsstyling nur geändert wird, falls der Benutzer den Fokus auf ein anderes Steuerungselement setzt. Falls der Benutzer jedoch versucht, einen zuvor markierten Wert zu korrigieren, zeigt das Steuerungselement sofort an, wenn der Wert gültig wird. Pflichtfelder werden nur als ungültig markiert, falls der Benutzer diese ändert oder versucht, einen unveränderten ungültigen Wert abzuschicken.</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<p>Nicht Teil einer Spezifikation.</p> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop(2)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Android</th> + <th>Chrome für Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{cssxref(":valid")}}</li> + <li>{{cssxref(":invalid")}}</li> + <li>{{cssxref(":required")}}</li> + <li>{{cssxref(":optional")}}</li> + <li>{{cssxref(":-moz-ui-valid")}}</li> +</ul> diff --git a/files/de/web/css/_colon_-moz-user-disabled/index.html b/files/de/web/css/_colon_-moz-user-disabled/index.html new file mode 100644 index 0000000000..50ea47366c --- /dev/null +++ b/files/de/web/css/_colon_-moz-user-disabled/index.html @@ -0,0 +1,19 @@ +--- +title: ':-moz-user-disabled' +slug: 'Web/CSS/:-moz-user-disabled' +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - NeedsContent + - NeedsExample + - Non-standard +translation_of: 'Web/CSS/:-moz-user-disabled' +--- +<div>{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9")}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>:-moz-user-disabled</code> <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> matcht Elemente, die Bilder repräsentieren, die nicht geladen wurden, weil Bilder durch die Benutzereinstellungen komplett deaktiviert wurden.</p> + +<p>Dieser Selektor ist hauptsächlich für die Verwendung durch Themeentwickler gedacht.</p> diff --git a/files/de/web/css/_colon_-moz-window-inactive/index.html b/files/de/web/css/_colon_-moz-window-inactive/index.html new file mode 100644 index 0000000000..88a73ced90 --- /dev/null +++ b/files/de/web/css/_colon_-moz-window-inactive/index.html @@ -0,0 +1,51 @@ +--- +title: ':-moz-window-inactive' +slug: 'Web/CSS/:-moz-window-inactive' +tags: + - CSS + - CSS Referenz + - 'CSS:Mozilla Erweiterungen' + - NeedsBrowserCompatibility + - NeedsLiveSample + - NeedsMobileBrowserCompatibility + - Non-standard +translation_of: 'Web/CSS/:-moz-window-inactive' +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>:-moz-window-inactive</code> <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> matcht jedes Element während es sich in einem inaktivem Fenster befindet.</p> + +<div class="note"><strong>Hinweis:</strong> Vor der Einführung dieser Pseudoklasse konnten andere Stile für Hintergrundfenster durch das Setzen eines Attributs (<code>active="true"</code>) für das Toplevel XUL Chromefenster erreicht werden. Dieses Attribut wird nicht mehr verwendet.</div> + +<p><code>:-moz-window-inactive</code> funktioniert auch in Inhalten von HTML Dokumenten.</p> + +<h2 id="Beispiel">Beispiel</h2> + +<p>Dieses Beispiel verändert die Darstellung des Hintergrunds einer Box in Abhängigkeit davon, ob das Fenster aktiv ist oder nicht.</p> + +<pre class="brush: html"><style type="text/css"> +#mybox { + background: linear-gradient(to bottom, blue, cyan); +} + +#mybox:-moz-window-inactive { + background: cyan; +} +</style> + +<div id="mybox" style="width:200px; height:200px;"> + <p>Dies ist eine Box!</p> +</div> +</pre> + +<p>Dieses Beispiel kann <a href="/samples/cssref/moz-window-inactive.html">als Livebeispiel betrachtet</a> werden.</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<p>Nicht Teil einer Spezifikation.</p> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.selectors.-moz-window-inactive")}} diff --git a/files/de/web/css/_colon_-webkit-autofill/index.html b/files/de/web/css/_colon_-webkit-autofill/index.html new file mode 100644 index 0000000000..2030c723b3 --- /dev/null +++ b/files/de/web/css/_colon_-webkit-autofill/index.html @@ -0,0 +1,80 @@ +--- +title: ':-webkit-autofill' +slug: 'Web/CSS/:-webkit-autofill' +tags: + - CSS + - NeedsExample + - Non-standard + - Pseudoklasse + - Referenz +translation_of: 'Web/CSS/:-webkit-autofill' +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>:-webkit-autofill</code> CSS <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> matcht, wenn der Wert eines {{HTMLElement("input")}} Elements durch den Browser vorausgefüllt wird.</p> + +<p class="note"><strong>Hinweis:</strong> Die User Agent Stylesheets einiger Browser verwenden <code>!important</code> in ihren <code>:-webkit-autofill</code> Stildeklarationen, was sie durch Webseiten nicht überschreibbar macht, ohne dass auf JavaScript Hacks zurückgegriffen werden muss.</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<p>Nicht Teil einer Spezifikation.</p> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="https://code.google.com/p/chromium/issues/detail?id=46543">Chromium Issue 46543: Auto-filled input text box yellow background highlight cannot be turned off!</a></li> + <li><a href="https://bugs.webkit.org/show_bug.cgi?id=66032">WebKit Bug 66032: Allow site authors to override autofilled fields' colors.</a></li> + <li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=740979">Mozilla Bug 740979: implement <code>:-moz-autofill</code> pseudo-class on input elements with an autofilled value</a></li> +</ul> diff --git a/files/de/web/css/_colon_active/index.html b/files/de/web/css/_colon_active/index.html new file mode 100644 index 0000000000..73bb8044dd --- /dev/null +++ b/files/de/web/css/_colon_active/index.html @@ -0,0 +1,84 @@ +--- +title: ':active' +slug: 'Web/CSS/:active' +tags: + - CSS + - CSS Pseudoklasse + - Layout + - Referenz + - Web +translation_of: 'Web/CSS/:active' +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">Pseudoklasse</a> <code>:active</code> entspricht jedem Element, das vom Benutzer aktiviert wurde. Beim Mauszeiger ist das die Zeitspanne, wo die Taste gedrückt gehalten wird. Deshalb wird sie meistens bei den Elementen {{HTMLElement("a")}} und {{HTMLElement("button")}} Eingesetzt, kann aber auch für jedes andere Element genutzt werden.</p> + +<p>Die Stile können von weiteren Pseudoklassen überschrieben werden: {{cssxref(":link")}}, {{cssxref(":hover")}} und {{cssxref(":visited")}}. Deshalb ist es wichtig, die <em>LVHA-Reihenfolge</em> einzuhalten: <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>.</p> + +<div class="note"><strong>Hinweis:</strong> Auf Systemen mit Mäusen mit mehreren Knöpfen, definiert CSS 3, dass die <code>:active</code> Pseudoklasse nur dem Hauptknopf zugewiesen wird; bei Mäusen für Rechtshänder ist dies typischerweise der linkeste Knopf.</div> + +<h2 id="Beispiel">Beispiel</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html; highlight:[3]"><body> + <h1>:active CSS selector example</h1> + <p>The following link will turn lime during the time you click it and release the click: <a href="#">Mozilla Developer Network</a>.</p> +</body></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css; highlight:[5]">body { background-color: #ffffc9 } +a:link { color: blue } /* unbesuchte Links */ +a:visited { color: purple } /* besuchte Links*/ +a:hover { font-weight: bold } /* Benutzer fährt mit der Maus darüber */ +a:active { color: lime } /* aktive Links */ +</pre> + +<div>{{EmbedLiveSample('Beispiel', 600, 140)}}</div> + +<h2 id="Spezifikationen">Spezifikationen</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('CSS4 Selectors', '#active-pseudo', ':active')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Keine Änderung</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#useraction-pseudos', ':active')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Keine Änderung</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':active')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Keine Änderung</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#anchor-pseudo-classes', ':active')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Standard Wert definiert</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.selectors.active")}} + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Weitere Link-Pseudoklassen: {{cssxref(":link")}}, {{cssxref(":visited")}} und {{cssxref(":hover")}}.</li> +</ul> diff --git a/files/de/web/css/_colon_default/index.html b/files/de/web/css/_colon_default/index.html new file mode 100644 index 0000000000..5055b1a2b8 --- /dev/null +++ b/files/de/web/css/_colon_default/index.html @@ -0,0 +1,83 @@ +--- +title: ':default' +slug: 'Web/CSS/:default' +tags: + - CSS + - CSS Pseudoklasse + - Layout + - NeedsMobileBrowserCompatibility + - Referenz + - Web +translation_of: 'Web/CSS/:default' +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>:default</code> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> repräsentiert ein Benutzerschnittstellenelement, das das Standardelement innerhalb einer Gruppe ähnlicher Elemente darstellt.</p> + +<p>Zum Beispiel kann mithilfe dieser Pseudoklasse die Standardschaltfläche in einer Gruppe von Schaltflächen ausgewählt werden.</p> + +<p>Benutzerschnittstellenelemente, die Mehrfachauswahlen erlauben, können mehrere Standardwerte haben, um anfangs mit mehreren selektierten Einträgen angezeigt zu werden. In diesem Fall werden alle Standardwerte über die <code>:default</code> Pseudoklasse angesprochen.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">:default { <em>Stileigenschaften</em> } +</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush: css">:default +{ + background-color: lime; +} +</pre> + +<p>...auf folgendes HTML angewendet...</p> + +<pre class="brush: html"> <form method="get"> + <p><input type="submit" id="submit1"></p> + <p><input type="submit" id="submit2"></p> + <p><input type="reset"></p> + </form> +</pre> + +<p>Dieses Beispiel färbt die Hintergrundfarbe für die Absendeschaltfläche des Formulars in <code>lime</code> ein.</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifization</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#selector-default', ':default')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Keine Änderung.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', '#selector-default', ':default')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Definiert die Semantik in Bezug auf HTML und Defines the semantic regarding HTML and Beschränkungsvalidierung.</td> + </tr> + <tr> + <td>{{SpecName('CSS4 Selectors', '#default-pseudo', ':default')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Keine Änderung.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 UI', '#pseudo-default', ':default')}}</td> + <td>{{Spec2('CSS3 UI')}}</td> + <td>Definiert die Pseudoklasse, aber nicht die dazugehörige Semantik.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.selectors.default")}} diff --git a/files/de/web/css/_colon_dir/index.html b/files/de/web/css/_colon_dir/index.html new file mode 100644 index 0000000000..160ff8063b --- /dev/null +++ b/files/de/web/css/_colon_dir/index.html @@ -0,0 +1,69 @@ +--- +title: ':dir()' +slug: 'Web/CSS/:dir' +tags: + - CSS + - CSS Pseudoklasse + - Experimentell + - Referenz +translation_of: 'Web/CSS/:dir' +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>:dir</code> CSS <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> matcht Elemente basierend auf der Direktionalität des in ihnen beinhalteten Texts. In HTML wird die Richtung durch das {{htmlattrxref("dir", "html")}} Attribut bestimmt. Für andere Dokumenttypen können andere Methoden zur Bestimmung der Sprache existieren.</p> + +<p>Beachte, dass die Verwendung der Pseudoklasse <code>:dir()</code> nicht gleichbedeutend mit den <code>[dir=…]</code> Attributselektoren ist. Letztere matchen einen Wert von {{htmlattrxref("dir", "html")}} und matchen nicht, falls kein Attribut gesetzt ist, auch wenn in diesem Fall das Elemente den Wert seines Elternelements erbt; ebenso matchen <code>[dir=rtl]</code> oder <code>[dir=ltr]</code> auch nicht den <code>auto</code> Wert, der für das <code>dir</code> Attribut verwendet werden kann. Im Gegensatz dazu matcht <code>:dir()</code> den vom User Agent berechneten, den geerbten oder den <code>auto</code> Wert.</p> + +<p>Auch berücksichtigt <code>:dir()</code> nur den <em>semantischen</em> Wert der Ausrichtung, der innerhalb des Dokuments definiert wird, normalerweise in HTML. Er berücksichtigt nicht die <em>Styling</em>-Ausrichtung, die durch CSS Eigenschaften wie {{cssxref("direction")}}, welche rein stilistisch sind, gesetzt wird.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css;">/* element:dir(directionality) { Stileigenschaften } + wobei die Richtungn ltr oder rtl ist */ + +div:dir(ltr) { /* Stileigenschaften */ } +span:dir(rtl) { /* Stileigenschaften */ } +</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush:html;"><div dir="rtl"> + <span>test1</span> + <div dir="ltr">test2 + <div dir="auto">עִבְרִית</div> + </div> +</div> +</pre> + +<p>In diesem Beispiel matcht <code>:dir(rtl)</code> den obersten div, span, welcher <code>test1</code> beinhaltet und den div mit den hebräischen Zeichen. <code>:dir(ltr)</code> matcht den div, der <code>test2</code> beinhaltet.</p> + +<h2 id="Spezifikationen">Spezifikationen</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('CSS4 Selectors', '#the-dir-pseudo', ':dir()')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.selectors.dir")}} + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Sprachbezogene Pseudoklassen: {{cssxref(":lang")}}, {{cssxref(":dir")}}</li> +</ul> diff --git a/files/de/web/css/_colon_disabled/index.html b/files/de/web/css/_colon_disabled/index.html new file mode 100644 index 0000000000..cd11062408 --- /dev/null +++ b/files/de/web/css/_colon_disabled/index.html @@ -0,0 +1,139 @@ +--- +title: ':disabled' +slug: 'Web/CSS/:disabled' +tags: + - CSS + - CSS Pseudoklasse + - Layout + - Referenz + - Web +translation_of: 'Web/CSS/:disabled' +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>:disabled</code> CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> steht für alle deaktivierten Elemente. Ein Element gilt als deaktiviert, wenn es nicht aktiviert (d.h. ausgewählt, angeklickt oder mit Text gefüllt) oder fokussiert werden kann. Das Element verfügt außerdem über einen Status, in dem es aktiviert oder fokussiert werden kann.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Beispielselektoren">Beispielselektoren</h3> + +<dl> + <dt>input:disabled</dt> + <dd>Wählt alle deaktivierten Eingabefelder aus.</dd> + <dt>select.country:disabled</dt> + <dd>Wählt ein deaktiviertes Zielelement mit der Klasse country aus.</dd> +</dl> + +<h3 id="Anwendungsbeispiel">Anwendungsbeispiel</h3> + +<p>Das folgende CSS:</p> + +<pre class="brush: css">input[type="text"]:disabled { + background: #ccc; +} +</pre> + +<p>Angewendet auf das folgende HTML5 Beispiel:</p> + +<pre class="brush: html"><form action="#"> + <fieldset> + <legend>Shipping address</legend> + <input type="text" placeholder="Name"> + <input type="text" placeholder="Address"> + <input type="text" placeholder="Zip Code"> + </fieldset> + <fieldset id="billing"> + <legend>Billing address</legend> + <label for="billing_is_shipping">Same as shipping address:</label> + <input type="checkbox" onchange="javascript:toggleBilling()" checked> + <br /> + <input type="text" placeholder="Name" disabled> + <input type="text" placeholder="Address" disabled> + <input type="text" placeholder="Zip Code" disabled> + </fieldset> +</form> +</pre> + +<pre class="brush: html"><form action="#"> + <fieldset> + <legend>Empfängeradresse</legend> + <input type="text" placeholder="Name"> + <input type="text" placeholder="Adresse"> + <input type="text" placeholder="PLZ"> + </fieldset> + <fieldset> + <legend>Rechnungsadresse</legend> + <label for="billing_is_shipping">Rechnungsadresse entspricht der Empfängeradresse:</label> + <input type="checkbox" onchange="javascript:toggleBilling()" checked> + <br /> + <input type="text" placeholder="Name" disabled> + <input type="text" placeholder="Address" disabled> + <input type="text" placeholder="Zip Code" disabled> + </fieldset> +</form> +</pre> + +<p>Mit ein wenig JavaScript:</p> + +<pre class="brush:js">function toggleBilling() { + var billingItems = document.querySelectorAll('#billing input[type="text"]'); + for (var i = 0; i < billingItems.length; i++) { + billingItems[i].disabled = !billingItems[i].disabled; + } +} +</pre> + +<p>Führt zu einem ergrautem Hintergrund aller Texteingabefelder im {{HTMLElement("fieldset")}} der Rechnungsadresse.</p> + +<p>{{EmbedLiveSample('Anwendungsbeispiel', '300px', '250px', '', 'Web/CSS/:disabled')}}</p> + +<h2 id="Spezifikationen">Spezifikationen</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('HTML WHATWG', '#selector-disabled', ':disabled')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Keine Änderung</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', '#selector-disabled', ':disabled')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Beschreibt die Semantik von HTML und Formularen.</td> + </tr> + <tr> + <td>{{SpecName('CSS4 Selectors', '#enableddisabled', ':disabled')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Keine Änderung</td> + </tr> + <tr> + <td>{{SpecName('CSS3 UI', '#pseudo-classes', ':disabled')}}</td> + <td>{{Spec2('CSS3 UI')}}</td> + <td>Verweis auf Selektors Level 3</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#enableddisabled', ':disabled')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Beschreibt die Pseudoklasse,aber nicht die dazugehörige Semantik.</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +{{Compat("css.selectors.disabled")}} + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{Cssxref(":enabled")}}</li> +</ul> diff --git a/files/de/web/css/_colon_empty/index.html b/files/de/web/css/_colon_empty/index.html new file mode 100644 index 0000000000..ed47ba891a --- /dev/null +++ b/files/de/web/css/_colon_empty/index.html @@ -0,0 +1,66 @@ +--- +title: ':empty' +slug: 'Web/CSS/:empty' +tags: + - CSS + - CSS Pseudoklasse + - Layout + - Referenz + - Web +translation_of: 'Web/CSS/:empty' +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Der pseudo-Klassen Selektor <code>:empty</code> wählt Elemente aus, die über kein Kindelement verfügen. Ein Inhalt in Form von einem Text wird dabei ebenfalls als ein Kind des Elementes angesehen, Kommentare und sonstige Verarbeitungsanweisungen jedoch nicht.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><element>:empty { /* Deklarationsblock */ } +</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush:css">span:empty::before { + background-color: lime; +} +</pre> + +<p>Die ersten beiden <code>span</code> Elemente sind leer, sodass der <code>:empty</code> Selektor angewendet wird. Auf die letzten drei trifft das jedoch nicht zu.</p> + +<pre class="brush:css"><span></span> +<span><!-- Dieses Element wird grün dargestellt --></span> + +<span> </span> +<span>Lorem ipsum</span> +<span><strong></strong></span> +</pre> + +<h2 id="Spezifikationen">Spezifikationen</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('CSS4 Selectors', '#empty-pseudo', ':empty')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Keine Änderung</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#empty-pseudo', ':empty')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.selectors.empty")}} diff --git a/files/de/web/css/_colon_enabled/index.html b/files/de/web/css/_colon_enabled/index.html new file mode 100644 index 0000000000..1d4f3888d5 --- /dev/null +++ b/files/de/web/css/_colon_enabled/index.html @@ -0,0 +1,96 @@ +--- +title: ':enabled' +slug: 'Web/CSS/:enabled' +tags: + - CSS + - CSS Pseudoklasse + - Layout + - Referenz + - Web +translation_of: 'Web/CSS/:enabled' +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>:enabled</code> CSS <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> repräsentiert alle aktivierten Elemente. Ein Element ist aktiviert, falls es aktiviert werden kann (z. B. markierte, angeklickte Elemente oder solche, die Texteingaben akzeptieren) oder die fokussiert werden können. Das Element hat auch einen deaktivierten Zustand, in welchem es nicht aktiviert werden oder fokussiert werden kann.</p> + +<h2 id="Beispiel">Beispiel</h2> + +<p>Der folgende Code macht die Textfarbe grün, wenn das Element aktiviert ist, und grau, wenn es deaktiviert ist. Dies erlaubt es, dem Benutzer Feedback darüber zu geben, ob mit den Elementen interagiert werden kann oder nicht.</p> + +<div id="Aktivierte_deaktivierte_Inputs_Beispiel"> +<p>Das folgende HTML...</p> + +<pre class="brush:html"><form action="url_of_form"> + <label for="FirstField">First field (enabled):</label> <input type="text" id="FirstField" value="Lorem"><br /> + <label for="SecondField">Second field (disabled):</label> <input type="text" id="SecondField" value="Ipsum" disabled="disabled"><br /> + <input type="button" value="Submit" /> +</form> </pre> + +<p>...in Verwendung mit diesem CSS...</p> + +<pre class="brush:css; highlight:[1,4]">input:enabled { + color: #22AA22; +} + +input:disabled { + color: #D9D9D9; +} +</pre> + +<p>...ergibt:</p> + +<div>{{EmbedLiveSample("Aktivierte_deaktivierte_Inputs_Beispiel", 550, 95)}}</div> + +<div>Beachte, dass die Farbe des Buttontexts auch grün ist, da der Button ebenfalls aktiviert ist.</div> +</div> + +<h2 id="Spezifikationen">Spezifikationen</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('HTML WHATWG', '#selector-enabled', ':enabled')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Keine Änderung</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', '#selector-enabled', ':enabled')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Definiert die Semantik in Bezug auf HTML und Formulare.</td> + </tr> + <tr> + <td>{{SpecName('CSS4 Selectors', '#enableddisabled', ':enabled')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Keine Änderung</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Basic UI', '#pseudo-classes', ':enabled')}}</td> + <td>{{Spec2('CSS3 Basic UI')}}</td> + <td>Verknüpfung zu Selectors Level 3.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#enableddisabled', ':enabled')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Definiert die Pseudoklasse, aber nicht die zugehörige Semantik.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.selectors.enabled")}} + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{cssxref(":disabled")}}</li> +</ul> diff --git a/files/de/web/css/_colon_first-child/index.html b/files/de/web/css/_colon_first-child/index.html new file mode 100644 index 0000000000..150c836d17 --- /dev/null +++ b/files/de/web/css/_colon_first-child/index.html @@ -0,0 +1,103 @@ +--- +title: ':first-child' +slug: 'Web/CSS/:first-child' +tags: + - CSS + - CSS Pseudoklasse + - Layout + - Referenz + - Web +translation_of: 'Web/CSS/:first-child' +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>:first-child</code> <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> repräsentiert jedes Element, das das erste Kindelement seines Elternelements ist.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">element:first-child { <em>Stileigenschaften</em> } +</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Beispiel_1">Beispiel 1</h3> + +<h4 id="HTML_Inhalt">HTML Inhalt</h4> + +<pre class="brush: html"><div> + <span>Dieser Text ist grün!</span> + <span>Dieser Text nicht. :(</span> +</div> +</pre> + +<h4 id="CSS_Inhalt">CSS Inhalt</h4> + +<pre class="brush: css">span:first-child { + background-color: lime; +} +</pre> + +<p>... sieht folgendermaßen aus:</p> + +<p><span>{{EmbedLiveSample('Beispiel_1',300,50)}}</span></p> + +<h3 id="Beispiel_2_-_Verwendung_von_UL">Beispiel 2 - Verwendung von UL</h3> + +<h4 id="HTML_Inhalt_2">HTML Inhalt</h4> + +<pre class="brush: html"><ul> + <li>Eintrag 1</li> + <li>Eintrag 2</li> + <li>Eintrag 3</li> +</ul></pre> + +<h4 id="CSS_Inhalt_2">CSS Inhalt</h4> + +<pre class="brush: css">li{ + color:red; +} +li:first-child{ + color:green; +}</pre> + +<p>... sieht folgendermaßen aus:</p> + +<p><span>{{EmbedLiveSample('Beispiel_2_-_Verwendung_von_UL',300,100)}}</span></p> + +<h2 id="Spezifikationen">Spezifikationen</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('CSS4 Selectors', '#first-child-pseudo', ':first-child')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Keine Änderung</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#first-child-pseudo', ':first-child')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.selectors.first-child")}} + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{cssxref(":last-child")}}</li> + <li>{{cssxref(":nth-child")}}</li> + <li>{{cssxref(":last-of-type")}}</li> +</ul> diff --git a/files/de/web/css/_colon_first-of-type/index.html b/files/de/web/css/_colon_first-of-type/index.html new file mode 100644 index 0000000000..f99d9991c7 --- /dev/null +++ b/files/de/web/css/_colon_first-of-type/index.html @@ -0,0 +1,76 @@ +--- +title: ':first-of-type' +slug: 'Web/CSS/:first-of-type' +tags: + - CSS + - CSS Pseudoklasse + - Layout + - Referenz + - Web +translation_of: 'Web/CSS/:first-of-type' +--- +<p>{{CSSRef}}</p> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>:first-of-type</code> <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> repräsentiert den ersten Geschwisterknoten eines Typs in der Liste der Kindknoten des Elternelements.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">element:first-of-type { <em>Stileigenschaften</em> } +</pre> + +<h2 id="Beispiel">Beispiel</h2> + +<p>Dieses Beispiel zeigt, wie der universelle Selektor angenommen wird, falls kein einfacher Selektor angegeben wird.</p> + +<pre class="brush: css">div :first-of-type { + background-color: lime; +}</pre> + +<pre class="brush: html"><div> + <span>Dieser Text kommt zuerst!</span> + <span>Dieser Text nicht. :(</span> + <span>Was ist mit diesem <em>verschachtelten Element</em>?</span> + <strike>Dies ist ein weiterer Typ.</strike> + <span>Dieser leider nicht...</span> +</div> +</pre> + +<p id="...will_result_in.3A">...ergibt:</p> + +<div>{{EmbedLiveSample('Beispiel','100%', '120')}}</div> + +<h2 id="Spezifikationen">Spezifikationen</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('CSS4 Selectors', '#first-of-type-pseudo', ':first-of-type')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Keine Änderung</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#first-of-type-pseudo', ':first-of-type')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.selectors.first-of-type")}} + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{Cssxref(":nth-of-type")}}, {{Cssxref(":last-of-type")}}</li> +</ul> diff --git a/files/de/web/css/_colon_first/index.html b/files/de/web/css/_colon_first/index.html new file mode 100644 index 0000000000..2af8daa43a --- /dev/null +++ b/files/de/web/css/_colon_first/index.html @@ -0,0 +1,65 @@ +--- +title: ':first' +slug: 'Web/CSS/:first' +tags: + - CSS + - CSS Pseudoklasse + - Layout + - NeedsLiveSample + - NeedsMobileBrowserCompatibility + - Referenz + - Web +translation_of: 'Web/CSS/:first' +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>:first</code> {{cssxref("@page")}} <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> beschreibt das Styling der ersten Seite, wenn ein Dokument gedruckt wird.</p> + +<div class="note"><strong>Hinwweis:</strong> Nicht alle CSS Eigenschaften sind veränderbar. Es können nur Ränder, <a href="https://de.wikipedia.org/wiki/Hurenkind_und_Schusterjunge#Schusterjunge">Schusterjungen</a>, <a href="https://de.wikipedia.org/wiki/Hurenkind_und_Schusterjunge#Hurenkind">Hurenkinder</a> und Seitenumbrüche innerhalb des Dokuments geändert werden. Alle anderen CSS Eigenschaften werden ignoriert.</div> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush: css">@page :first { + margin: 2in 3in; +} +</pre> + +<div class="note"><strong>Hinwweis:</strong> Nur die absoluten Längeneinheiten können verwendet werden, wenn ein Rand definiert wird. Bitte schaue dir die Seite über <a href="/de/docs/Web/CSS/length#Absolute_L.C3.A4ngenangaben">Längen</a> für mehr Informationen an.</div> + +<h2 id="Spezifikationen">Spezifikationen</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 Paged Media', '#left-right-first', ':first')}}</td> + <td>{{Spec2('CSS3 Paged Media')}}</td> + <td>Keine Änderung</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'page.html#page-selectors', ':first')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.selectors.first")}} + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{Cssxref("@page")}}</li> + <li>{{Cssxref(":left")}}</li> + <li>{{Cssxref(":right")}}</li> +</ul> diff --git a/files/de/web/css/_colon_focus/index.html b/files/de/web/css/_colon_focus/index.html new file mode 100644 index 0000000000..6d0fb0aac5 --- /dev/null +++ b/files/de/web/css/_colon_focus/index.html @@ -0,0 +1,79 @@ +--- +title: ':focus' +slug: 'Web/CSS/:focus' +tags: + - CSS + - CSS Pseudoklasse + - Layout + - Referenz + - Selektoren + - Web +translation_of: 'Web/CSS/:focus' +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <a href="/de/docs/Web/CSS">CSS </a><a href="/de/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">Pseudoklasse</a> <code>:focus</code> steht für Elemente, welche mit einem Eingabegerät, wie z. B. der Tastatur, fokusiert wurden.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>element</var>:focus { ... }</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush: css">.first-name:focus { + color: red; +} + +.last-name:focus { + color: lime; +}</pre> + +<pre class="brush: html"><input class="first-name" value="Dieser Text wird rot, wenn das Textfeld den Fokus erhält"> +<input class="last-name" value="Dieser Text wird grün, wenn das Textfeld den Fokus erhält"></pre> + +<p>{{EmbedLiveSample('Beispiele', '100%', 40)}}</p> + +<h2 id="Spezifikationen">Spezifikationen</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('CSS4 Selectors', '#focus-pseudo', ':focus')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Keine Änderung</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':focus')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Keine Änderung</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':focus')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{Compat("css.selectors.focus")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<p> </p> + +<ul> + <li>{{cssxref(":focus-within")}}</li> +</ul> + +<p> </p> diff --git a/files/de/web/css/_colon_fullscreen/index.html b/files/de/web/css/_colon_fullscreen/index.html new file mode 100644 index 0000000000..8d10c1176d --- /dev/null +++ b/files/de/web/css/_colon_fullscreen/index.html @@ -0,0 +1,81 @@ +--- +title: ':fullscreen' +slug: 'Web/CSS/:fullscreen' +tags: + - CSS + - CSS Mozilla Erweiterungen + - CSS Pseudoklasse + - Experimentell + - Layout + - NeedsLiveSample + - Referenz + - Vollbild + - Web +translation_of: 'Web/CSS/:fullscreen' +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> <code>:fullscreen </code>betrifft jedes Element, welches sich im <a href="/de/docs/Web/Guide/API/DOM/Verwendung_des_Vollbildmodus">Vollbildmodus</a> befindet. Sie selektiert nicht nur das Toplevelelement, sondern den ganzen Stapel an Elementen.</p> + +<div class="note">Das W3C empfiehlt das zusammengeschriebene <code>:fullscreen</code>, d. h. ohne Bindestrich, jedoch haben sowohl Gecko als auch Webkit eine Präfixversion mit Bindestrich implementiert : <code>:-webkit-full-screen</code> und <code>:-moz-full-screen</code>. Microsoft Edge und Internet Explorer verwenden die Syntaxen <code>:fullscreen</code> und <code>:-ms-fullscreen</code>.</div> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush: css">*:fullscreen { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + margin: 0; + box-sizing: border-box; + width: 100%; + height: 100%; + object-fit: contain; +}</pre> + +<pre class="brush: css">h1:fullscreen { + border: 1px solid #f00; +}</pre> + +<pre class="brush: css">p:fullscreen { + font-size: 200%; +}</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Anmerkung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Fullscreen', '#:fullscreen-pseudo-class', ':fullscreen')}}</td> + <td>{{Spec2('Fullscreen')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.selectors.fullscreen")}} + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/Guide/API/DOM/Verwendung_des_Vollbildmodus">Vollbildmodus</a></li> + <li>{{domxref("element.mozRequestFullScreen()")}}</li> + <li>{{domxref("document.mozCancelFullScreen()")}}</li> + <li>{{domxref("document.mozFullScreen")}}</li> + <li>{{domxref("document.mozFullScreenElement")}}</li> + <li>{{domxref("document.mozFullScreenEnabled")}}</li> + <li>{{HTMLAttrXRef("allowfullscreen", "iframe")}}</li> + <li>{{cssxref(":-moz-full-screen-ancestor")}}</li> +</ul> diff --git a/files/de/web/css/_colon_hover/index.html b/files/de/web/css/_colon_hover/index.html new file mode 100644 index 0000000000..a26cfdbed9 --- /dev/null +++ b/files/de/web/css/_colon_hover/index.html @@ -0,0 +1,122 @@ +--- +title: ':hover' +slug: 'Web/CSS/:hover' +tags: + - CSS + - CSS Pseudoklasse + - Layout + - NeedsMobileBrowserCompatibility + - Referenz + - Web +translation_of: 'Web/CSS/:hover' +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>:hover</code> CSS <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> wird verwendet, wenn der Nutzer einen Link auswählt, auch ohne ihn zu aktivieren. Dieser Stil kann von weiteren Link-abhängigen Pseudoklassen überschrieben werden: {{ cssxref(":link") }}, {{ cssxref(":visited") }} und {{ cssxref(":active") }}. Um nur entsprechende Links auszuwählen, ist es wichtig die <code>:hover</code> Regel nach den <code>:link</code> und <code>:visited</code> Regeln, aber vor der <code>:active</code> Regel zu erwähnen, wie beschrieben in der <em>LVHA-Reihenfolge</em>: <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>.</p> + +<p>Die <code>:hover</code> Pseudoklasse kann auf alle <a href="/de/docs/Web/CSS/Pseudo-elements" title="Pseudo-classes">Pseudoelemente</a> angewendet werden. {{experimental_inline}}</p> + +<p>Webbrowser (User-Agents) wie Firefox, Internet Explorer, Safari, Opera oder Chrome, wenden den zugehörigen Stil an, wenn der Cursor (Mauszeiger) über ein Element fährt.</p> + +<div class="note"><strong>Hinweis</strong>: Auf Touchscreens ist <code>:hover</code> problematisch oder unmöglich. Abhängig vom Browser, tritt die <code>:hover</code> Pseudoklasse niemals, nur für einen kurzen Moment nach dem Berühren in Kraft oder bleibt aktiviert, auch wenn der Nutzer das Element nicht mehr berührt, bis er ein anderes Element berührt. Weil Touchscreen-Geräte oft gleich sind, ist es wichtig für Webentwickler, keinen Inhalt zu haben, der nur über die <code>:hover</code> Pseudoklasse aufrufbar ist, da es für Nutzer von solchen Geräten schwierig oder unmöglich ist, diesen Inhalt aufzurufen.</div> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush: css">:link:hover { outline: dotted red; } + +.foo:hover { background: gold; } +</pre> + +<h3 id="Dropdown_Menü">Dropdown Menü</h3> + +<p>Mit der <code>:hover</code> Pseudoklasse kann man komplexe Algorithmen in CSS erstellen. Dies ist eine verbreitete Methode, die genutzt wird, um beispielsweise Dropdown Menüs nur mit CSS (ohne <a href="/de/docs/Web/JavaScript" title="en/JavaScript">JavaScript</a>) zu erstellen. Die Idee dieser Methode ist das Erstellen einer Regel, wie die Folgende:</p> + +<pre class="brush: css">div.menu-bar ul ul { + display: none; +} + +div.menu-bar li:hover > ul { + display: block; +} +</pre> + +<p>Sie kann auf folgende HTML Struktur angewendet werden:</p> + +<pre class="brush: html"><div class="menu-bar"> + <ul> + <li> + <a href="example.html">Menü</a> + <ul> + <li> + <a href="example.html">Link</a> + </li> + <li> + <a class="menu-nav" href="example.html">Untermenü</a> + <ul> + <li> + <a class="menu-nav" href="example.html">Untermenü</a> + <ul> + <li><a href="example.html">Link</a></li> + <li><a href="example.html">Link</a></li> + <li><a href="example.html">Link</a></li> + <li><a href="example.html">Link</a></li> + </ul> + </li> + <li><a href="example.html">Link</a></li> + </ul> + </li> + </ul> + </li> + </ul> +</div> +</pre> + +<p>Sieh dir unser <a class="internal" href="/@api/deki/files/6238/=css_dropdown_menu.html" title="css_dropdown_menu.html">CSS-basiertes Dropdown Menü Beispiel</a> für eine mögliche Lösung an.</p> + +<h3 id="Galerie_mit_Vollbild-Bildern_und_Vorschauen">Galerie mit Vollbild-Bildern und Vorschauen</h3> + +<p>Man kann die <code>:hover</code> Pseudoklasse nutzen, um eine Bildergalerie mit Vollbild-Bildern, welche nur angezeigt werden, wenn der Nutzer mit der Maus über die Vorschau fährt, zu erstellen. Sieh dir dafür <a class="internal" href="/@api/deki/files/6247/=css-gallery.zip" title="css-gallery.zip">diese Demo </a>an.</p> + +<div class="note"><strong>Hinweis:</strong> Für einen analogen Effekt, der jedoch auf der {{ cssxref(":checked") }} Pseudoklasse basiert (angewendet auf Auswahlfelder), sieh dir <a class="internal" href="/@api/deki/files/6268/=css-checked-gallery.zip" title="css-checked-gallery.zip">diese Demo </a>an, übernommen von der {{ cssxref(":checked") }} Seite.</div> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Anmerkung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS4 Selectors', '#hover', ':hover') }}</td> + <td>{{ Spec2('CSS4 Selectors') }}</td> + <td>Kann auf jedes Pseudoelement angewendet werden.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':hover') }}</td> + <td>{{ Spec2('CSS3 Selectors') }}</td> + <td>Keine wesentlichen Veränderungen</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':hover') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.selectors.hover")}} + +<p>Siehe auch:</p> + +<ul> + <li><a href="https://code.google.com/p/chromium/issues/detail?id=370155">Chromium bug #370155: Don't make <code>:hover</code> sticky on tap on sites that set a mobile viewport</a></li> + <li><a href="https://code.google.com/p/chromium/issues/detail?id=306581">Chromium bug #306581: Immediately show hover and active states on touch when page isn't scrollable.</a></li> +</ul> diff --git a/files/de/web/css/_colon_in-range/index.html b/files/de/web/css/_colon_in-range/index.html new file mode 100644 index 0000000000..0cdd2fb178 --- /dev/null +++ b/files/de/web/css/_colon_in-range/index.html @@ -0,0 +1,117 @@ +--- +title: ':in-range' +slug: 'Web/CSS/:in-range' +tags: + - CSS + - CSS Pseudoklasse + - Layout + - Referenz + - Web +translation_of: 'Web/CSS/:in-range' +--- +<div>{{CSSRef}}</div> + +<p>Die <strong><code>:in-range</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">Pseudoklasse</a> entspricht einem {{htmlelement("input")}} Element, dessen aktueller Wert innerhalb eines bestimmten Bereichs liegt. Dieser Bereich wird durch die {{htmlattrxref("min", "input")}} und {{htmlattrxref("max","input")}} Attribute festgelegt.</p> + +<pre class="brush: css no-line-numbers">/* Wählt jedes <input> Element aus, aber nur wenn es eine + Begrenzung festlegt, und sein Wert innerhalb dieser + Begrenzung liegt */ +input:in-range { + background-color: rgba(0, 255, 0, 0.25); +}</pre> + +<p>Diese Pseudoklasse ist nützlich um den Nutzer visuell darauf hinzuweisen, dass der aktuelle Wert des Feldes innerhalb der erlaubten Begrenzungen liegt.</p> + +<div class="note"><strong>Note: </strong>Diese Pseudoklasse gilt nur für Elemente, die eine Begrenzung haben. Wenn es eine solche Begrenzung nicht gibt, kann der Wert des Elements weder "in-range" (innerhalb der Begrenzung) noch "out-of-range" (außerhalb der Begrenzung) sein.</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Example" name="Example">Beispiel</h2> + +<div id="example"> +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><form action="" id="form1"> + <ul>Werte zwischen 1 und 10 sind gültig. + <li> + <input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12"> + <label for="value1">Der Wert ist </label> + </li> + </ul> +</form></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css;">li { + list-style: none; + margin-bottom: 1em; +} + +input { + border: 1px solid black; +} + +input:in-range { + background-color: rgba(0, 255, 0, 0.25); +} + +input:out-of-range { + background-color: rgba(255, 0, 0, 0.25); + border: 2px solid red; +} + +input:in-range + label::after { + content: 'okay.'; +} + +input:out-of-range + label::after { + content: 'außerhalb der Begrenzung!'; +}</pre> + +<h3 id="Result">Result</h3> +</div> + +<div>{{EmbedLiveSample('Example', 600, 140)}}</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('HTML WHATWG', 'scripting.html#selector-in-range', ':in-range')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Definiert wann <code>:in-range</code> HTML-Elementen entspricht.</td> + </tr> + <tr> + <td>{{SpecName('CSS4 Selectors', '#in-range-pseudo', ':in-range')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Standard Wert definiert.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> +<div> +<div class="hidden">Die Kompatibilitätstabelle auf dieser Seite wurde aus strukturierten Daten generiert. Wenn du dazu beitragen möchtes gehe auf <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> und sende uns einen Pull Request.</div> + +<p>{{Compat("css.selectors.in-range")}}</p> +</div> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{cssxref(":out-of-range")}}</li> + <li><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Form data validation</a></li> +</ul> diff --git a/files/de/web/css/_colon_indeterminate/index.html b/files/de/web/css/_colon_indeterminate/index.html new file mode 100644 index 0000000000..8f229baed2 --- /dev/null +++ b/files/de/web/css/_colon_indeterminate/index.html @@ -0,0 +1,74 @@ +--- +title: ':indeterminate' +slug: 'Web/CSS/:indeterminate' +tags: + - CSS + - CSS Pseudoklasse + - Layout + - Referenz + - Selektoren + - Web +translation_of: 'Web/CSS/:indeterminate' +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>:indeterminate</code> <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> repräsentiert alle <code><input type="checkbox"></code> Elements, deren <code>indeterminate</code> <a href="/de/docs/Web/API">DOM</a> Eigenschaft durch JavaScript auf <code>true</code> gesetzt wurde. Darüber hinaus wird sie in manchen Browsern dazu verwendet, {{HTMLElement("progress")}} Elemente in einem Zwischenstatus zu finden.</p> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush: css">input, span { + background: red; +} + +:indeterminate, :indeterminate + span { + background: limegreen; +} +</pre> + +<pre class="brush: html"><input type="checkbox"> <span>Der Inhalt dieses Absatzes hat eine grüne Hintergrundfarbe.</span> +</pre> + +<pre class="brush: js">document.getElementsByTagName("input")[0].indeterminate = true; +</pre> + +<p>{{EmbedLiveSample('Beispiel', '100%', 50)}}</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Anmerkung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#selector-indeterminate', ':indeterminate')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Keine Änderung</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', '#selector-indeterminate', ':indeterminate')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Definiert die Semantik bezüglich HTML und Begrenzungsvalidierung.</td> + </tr> + <tr> + <td>{{SpecName('CSS4 Selectors', '#indeterminate', ':indeterminate')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Keine Änderung</td> + </tr> + <tr> + <td>{{SpecName('CSS3 UI', '#indeterminate', ':indeterminate')}}</td> + <td>{{Spec2('CSS3 UI')}}</td> + <td>Definiert die Pseudoklasse, aber nicht die dazugehörige Semantik.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.selectors.indeterminate")}} diff --git a/files/de/web/css/_colon_invalid/index.html b/files/de/web/css/_colon_invalid/index.html new file mode 100644 index 0000000000..4dc3873fd3 --- /dev/null +++ b/files/de/web/css/_colon_invalid/index.html @@ -0,0 +1,134 @@ +--- +title: ':invalid' +slug: 'Web/CSS/:invalid' +tags: + - CSS + - CSS Pseudoelement + - Layout + - Referenz + - Web +translation_of: 'Web/CSS/:invalid' +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <a href="/de/CSS/Pseudo-classes" title="Pseudoklassen">Pseudoklasse</a> <code>:invalid </code>entspricht jedem {{ HTMLElement("input") }}- oder {{ HTMLElement("form") }}-Element, dessen Inhalt nicht gemäß der Eigenschaften des Eingabeelements <a href="/en/HTML/HTML5/Constraint_validation" title="en/HTML/HTML5/Constraint_validation">validiert</a> werden kann. Dadurch kann die Darstellung ungültiger Felder auf einfache Weise angepasst werden, damit Benutzer*innen fehlerhafte Eingaben gut identifizieren und korrigieren können.</p> + +<p>Standardmäßig wendet Gecko keinen Stil auf die Pseudoklasse <code>:invalid</code> an. Jedoch wendet es einen Stil (ein rotes "Leuchten" mithilfe der Eigenschaft {{ Cssxref("box-shadow") }}) auf die Pseudoklasse {{ Cssxref(":-moz-ui-invalid") }} an, der einen Teil der Fälle für <code>:invalid</code> betrifft.</p> + +<p>Das Leuchten kann mit dem folgenden CSS ausgeschaltet werden. Es kann auch komplett überschrieben werden, um das Aussehen von ungültigen Feldern anzupassen.</p> + +<pre class="brush: css">:invalid { + box-shadow: none; +} + +:-moz-submit-invalid { + box-shadow: none; +} + +:-moz-ui-invalid { + box-shadow: none; +} +</pre> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Anmerkungen">Anmerkungen</h2> + +<h4 id="Radio_Buttons">Radio Buttons</h4> + +<p>Wenn in einer Gruppe von Radio Buttons (d.i., wenn alle den gleichen Wert für ihr <code>name</code>-Attribut besitzen) kein Radio Button ausgewählt ist und mindestens einer die Eigenschaft <code>required</code> hat, wird die Pseudoklasse <code>:invalid</code> auf alle Radio Buttons der Gruppe angewendet.</p> + +<h2 id="Example2" name="Example2">Beispiel</h2> + +<p>Dieses Beispiel zeigt ein einfaches Formular, dessen gültige Elemente grün und dessen ungültige Elemente rot gefärbt werden.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><form> + <label for="url_input">Geben Sie eine URL ein:</label> + <input type="url" id="url_input" /> + <br /> + <br /> + <label for="email_input">Geben Sie eine E-Mail-Adresse ein:</label> + <input type="email" id="email_input" required/> +</form></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">input:invalid { + background-color: #ffdddd; +} + +form:invalid { + border: 5px solid #ffdddd; +} + +input:valid { + background-color: #ddffdd; +} + +form:valid { + border: 5px solid #ddffdd; +} + +input:required { + border-color: #800000; + border-width: 3px; +} + +input:required:invalid { + border-color: #C00000; +}</pre> + +<p>{{ EmbedLiveSample('Example2',600,150) }}</p> + +<h2 id="Spezifikationen">Spezifikationen</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('HTML WHATWG', '#selector-invalid', ':invalid') }}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td>Keine Änderung.</td> + </tr> + <tr> + <td>{{ SpecName('HTML5 W3C', '#selector-invalid', ':invalid') }}</td> + <td>{{ Spec2('HTML5 W3C') }}</td> + <td>Definiert Semantik bezogen auf HTML und Überprüfung der Einschränkungen.</td> + </tr> + <tr> + <td>{{ SpecName('CSS4 Selectors', '#validity-pseudos', ':invalid') }}</td> + <td>{{ Spec2('CSS4 Selectors') }}</td> + <td>Keine Änderung.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Basic UI', '#pseudo-validity', ':invalid') }}</td> + <td>{{ Spec2('CSS3 Basic UI') }}</td> + <td>Definiert die Pseudoklasse, aber nicht die dazugehörige Semantik.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2> + +<p>{{Compat("css.selectors.invalid")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{ cssxref(":valid") }}</li> + <li>{{ cssxref(":-moz-submit-invalid") }}</li> + <li>{{ cssxref(":required") }}</li> + <li>{{ cssxref(":optional") }}</li> +</ul> diff --git a/files/de/web/css/_colon_lang/index.html b/files/de/web/css/_colon_lang/index.html new file mode 100644 index 0000000000..4bf15acd0f --- /dev/null +++ b/files/de/web/css/_colon_lang/index.html @@ -0,0 +1,85 @@ +--- +title: ':lang' +slug: 'Web/CSS/:lang' +tags: + - CSS + - CSS Pseudoklasse + - Layout + - Referenz + - Web +translation_of: 'Web/CSS/:lang' +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>:lang</code> CSS <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> matcht Elemente anhand der Sprache, in der das Element ist. In HTML wird die Sprache durch eine Kombination aus <code>lang</code> Attribut, dem {{HTMLElement("meta")}} Element und möglicherweise durch Informationen durch das Protokoll (wie z. B. HTTP Header). Für andere Dokumenttypen können andere Dokumentmethoden zur Bestimmung der Sprache existieren.</p> + +<p>Akzeptierte <code>language-code</code> Strings werden in der <a href="/de/docs/Web/HTML">HTML</a> 4.0 Specification definiert.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>element</var>:lang(language-code) { <em>Stileigenschaften</em> } +</pre> + +<h2 id="Beispiel">Beispiel</h2> + +<p>In diesem Beispiel wird der <code>lang</code> Selektor dazu verwendet, um mit Hilfe von <a href="/de/docs/Web/CSS/Kindselektoren">Kindselektoren</a> das Elternelement eines {{HTMLElement("q")}} Elements zu matchen. Es ist nicht dazu gedacht, den einzigen oder sogar den korrekten (was vom Dokumenttyp abhängt) Weg aufzuzeigen, um dies umzusetzen. Beachte, Unicodewerte werden verwendet, um spezielle Anführungszeichen anzugeben.</p> + +<pre class="brush: css">:lang(en) > q { quotes: '\201C' '\201D' '\2018' '\2019'; } +:lang(fr) > q { quotes: '« ' ' »'; } +:lang(de) > q { quotes: '»' '«' '\2039' '\203A'; } +</pre> + +<p>... wo ...</p> + +<pre class="brush: html"> <div lang="fr"><q>Dieses französische Anführungszeichen hat ein <q>verschachteltes</q> Zitat.</q></div> + <div lang="de"><q>Dieses deutsche Anführungszeichen hat ein <q>verschachteltes</q> Zitat.</q></div> + <div lang="en"><q>Dieses englische Anführungszeichen hat ein <q>verschachteltes</q> Zitat.</q></div> +</pre> + +<p>... wird dargestellt als ...</p> + +<p>{{EmbedLiveSample('Beispiel', '100%', 100)}}</p> + +<h2 id="Spezifikationen">Spezifikationen</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('CSS4 Selectors', '#lang-pseudo', ':lang()')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Keine Änderung</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#lang-pseudo', ':lang()')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Keine wesentliche Änderung</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#lang', ':lang()')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.selectors.lang")}} + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Sprachbezogene Pseudoklassen: {{cssxref(":lang")}}, {{cssxref(":dir")}}</li> + <li><a href="/de/docs/Web/API/HTMLElement/lang">Spracheigenschaft</a></li> + <li><a class="external" href="http://www.w3.org/TR/REC-html40/struct/dirlang.html#h-8.1.1">W3C HTML 4: Sprachcodes</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-59132807">W3C DOM Level 2 HTML: lang</a></li> +</ul> diff --git a/files/de/web/css/_colon_last-child/index.html b/files/de/web/css/_colon_last-child/index.html new file mode 100644 index 0000000000..368ad9a58a --- /dev/null +++ b/files/de/web/css/_colon_last-child/index.html @@ -0,0 +1,74 @@ +--- +title: ':last-child' +slug: 'Web/CSS/:last-child' +tags: + - CSS + - CSS Pseudoklasse + - Layout + - Referenz + - Web +translation_of: 'Web/CSS/:last-child' +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>:last-child</code> CSS <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> repräsentiert jedes Element, das das letzte Kindelement seines Elternelements ist.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">element:last-child { <em>Stileigenschaften</em> }</pre> + +<h2 id="Beispiel">Beispiel</h2> + +<h3 id="HTML_Inhalt">HTML Inhalt</h3> + +<pre class="brush: html"><ul> + <li>Dieser Punkt ist nicht grün.</li> + <li>Auch nicht dieser.</li> + <li>Dieser Punkt ist es! :)</li> +</ul></pre> + +<h3 id="CSS_Inhalt">CSS Inhalt</h3> + +<pre class="brush: css">li:last-child { + background-color: lime; +}</pre> + +<p>{{EmbedLiveSample('Beispiel', '100%', 100)}}</p> + +<h2 id="Spezifikationen">Spezifikationen</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('CSS4 Selectors', '#last-child', ':last-child')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Keine Änderung</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#last-child', ':last-child')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Ursprüngliche Definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.selectors.last-child")}} + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{cssxref(":first-child")}}</li> + <li>{{cssxref(":nth-child")}}</li> + <li>{{cssxref(":last-of-type")}}</li> +</ul> diff --git a/files/de/web/css/_colon_last-of-type/index.html b/files/de/web/css/_colon_last-of-type/index.html new file mode 100644 index 0000000000..267747715f --- /dev/null +++ b/files/de/web/css/_colon_last-of-type/index.html @@ -0,0 +1,86 @@ +--- +title: ':last-of-type' +slug: 'Web/CSS/:last-of-type' +tags: + - CSS + - CSS Pseudoklasse + - Layout + - Referenz + - Web +translation_of: 'Web/CSS/:last-of-type' +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>:last-of-type</code> <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> repräsentiert den letzten Geschwisterknoten eines Typs in der Liste von Kindknoten des Elternelements.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>element</var>:last-of-type { <em>Stileigenschaften</em> } +</pre> + +<h2 id="Beispiel">Beispiel</h2> + +<p>Um das letzte {{HTMLElement("em")}} Element innerhalb eines {{HTMLElement("p")}} Elements auszuwählen, kann folgender Code verwendet werden:</p> + +<pre class="brush: css">p em:last-of-type { + color: lime; +} +</pre> + +<pre class="brush: html"><p> + <em>Ich bin nicht grün. :(</em> + <strong>Ich bin nicht grün. :(</strong> + <em>Ich bin grün! :D</em> + <strong>Ich bin auch nicht grün. :(</strong> +</p> + +<p> + <em>Ich bin nicht grün. :(</em> + <span><em>Ich bin grün!</em></span> + <strong>Ich bin nicht grün. :(</strong> + <em>Ich bin grün! :D</em> + <span><em>Ich bin auch grün!</em> <strike> Ich bin nicht grün. </strike></span> + <strong>Ich bin auch nicht grün. :(</strong> +</p></pre> + +<p id="...will_result_in.3A">...entspricht:</p> + +<div>{{EmbedLiveSample('Beispiel','100%', '120')}}</div> + +<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('CSS4 Selectors', '#last-of-type-pseudo', ':last-of-type')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Keine Änderung</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#last-of-type-pseudo', ':last-of-type')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.selectors.last-of-type")}} + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{Cssxref(":nth-last-of-type")}}</li> + <li>{{Cssxref(":first-of-type")}}</li> + <li>{{Cssxref(":nth-of-type")}}</li> +</ul> diff --git a/files/de/web/css/_colon_link/index.html b/files/de/web/css/_colon_link/index.html new file mode 100644 index 0000000000..0ac0cb3d3d --- /dev/null +++ b/files/de/web/css/_colon_link/index.html @@ -0,0 +1,70 @@ +--- +title: ':link' +slug: 'Web/CSS/:link' +tags: + - CSS + - CSS Pseudoklasse + - Layout + - Referenz + - Web +translation_of: 'Web/CSS/:link' +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>:link</code> <a href="/de/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">Pseudoklasse</a> erlaubt es, Links innerhalb von Elementen auszuwählen. Dies wählt jeden Link aus, der bisher noch nicht besucht wurde, auch die, die bereits durch andere Selektoren anderer linkbezogener Pseudoklassen wie {{cssxref(":hover")}}, {{cssxref(":active")}} oder {{cssxref(":visited")}} gestylt wurden. Um nur die unbesuchten Links anzusprechen, ist es deshalb wichtig, die <em>LVHA-Reihenfolge </em>einzuhalten: <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>. Die {{cssxref(":focus")}} Pseudoklasse wird normalerweise direkt neben <code>:hover</code> platziert, je nach gewünschtem Effekt davor oder danach.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<pre>a:link { + color: slategray; +} + +.external:link { + background-color: lightblue; +}</pre> + +<h2 id="Spezifikationen">Spezifikationen</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('CSS4 Selectors', '#link', ':link') }}</td> + <td>{{ Spec2('CSS4 Selectors') }}</td> + <td>Keine Änderung</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Selectors', '#link', ':link') }}</td> + <td>{{ Spec2('CSS3 Selectors') }}</td> + <td>Keine Änderung</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':link') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Berenzung auf {{HTMLElement("a")}} aufgehoben</td> + </tr> + <tr> + <td>{{ SpecName('CSS1', '#anchor-pseudo-classes', ':link') }}</td> + <td>{{ Spec2('CSS1') }}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.selectors.link")}} + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{cssxref(":visited")}}, {{cssxref(":hover")}}, {{cssxref(":active")}}</li> +</ul> diff --git a/files/de/web/css/_colon_not/index.html b/files/de/web/css/_colon_not/index.html new file mode 100644 index 0000000000..cddf772707 --- /dev/null +++ b/files/de/web/css/_colon_not/index.html @@ -0,0 +1,76 @@ +--- +title: ':not()' +slug: 'Web/CSS/:not' +tags: + - CSS + - CSS Pseudoklasse + - Layout + - Referenz + - Selektoren + - Web +translation_of: 'Web/CSS/:not' +--- +<div>{{ CSSRef() }}</div> + +<h2 id="Summary" name="Summary">Übersicht</h2> + +<p>Die <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">Pseudoklasse</a> <code>:not(X)</code> ist eine Negation zu einem Selektor <var>X</var> als Argument und wird als Funktion angegeben. Sie passt auf Elemente, die nicht durch das Argument repräsentiert werden. X darf keinen weiteren Negationsselektor beinhalten.</p> + +<p>Die <a href="/de/docs/Web/CSS/Spezifit%C3%A4t">Spezifität</a> der <code>:not</code> Pseudoklasse entspricht der Spezifität seines Arguments. Die <code>:not</code> Pseudoklasse hat im Gegensatz zu anderen Pseudoklassen keinen Einfluss auf die Spezifität.</p> + +<div class="note"><strong>Hinweise:</strong> + +<ul> + <li>Mit der Negation können auch irrationale Selektoren erstellt werden, z. B. <code>:not(*)</code>, welche alle Elemente auswählen würde, die keine Elemente sind.</li> + <li>Es ist möglich, andere Regeln zu überschreiben. <code>A:not(B)</code> hat den selben Effekt wie <code>A</code>, aber eine höhere Spezifität.</li> + <li><code>:not(bla){}</code> passt auf alle Elemente, die nicht <code>bla</code> sind <strong>einschließlich <code>html</code> und <code>body</code></strong>.</li> +</ul> +</div> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox">:not(selector) { <em>Stileigenschaften</em> }</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush: css">p:not(.classy) { color: red; } +:not(p) { color: green; }</pre> + +<p>auf folgendes HTML angewandt:</p> + +<pre class="brush: html"><p>Irgendein Text.</p> +<p class="classy">Irgendein anderer Text.</p> +<span>Noch mehr Text<span> +</pre> + +<p>ergibt:</p> + +<p>{{EmbedLiveSample('Beispiele', '100%', '150')}}</p> + +<h2 id="Specifications" name="Specifications">Spezifikationen</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('CSS4 Selectors', '#negation', ':not()')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Argument erweitert, um komplexe Selektoren zu ermöglichen.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#negation', ':not()')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser Kompatibilität</h2> + +{{Compat("css.selectors.not")}} diff --git a/files/de/web/css/_colon_nth-child/index.html b/files/de/web/css/_colon_nth-child/index.html new file mode 100644 index 0000000000..17dc2c3387 --- /dev/null +++ b/files/de/web/css/_colon_nth-child/index.html @@ -0,0 +1,163 @@ +--- +title: ':nth-child' +slug: 'Web/CSS/:nth-child' +tags: + - CSS + - CSS Pseudoklasse + - Layout + - Referenz + - Web +translation_of: 'Web/CSS/:nth-child' +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>:nth-child(an+b)</code> <a href="/en-US/docs/CSS" title="CSS">CSS</a> <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">Pseudo-Klasse</a> passt auf ein Element, das im Dokumentbaum <code><em>a</em>n+<em>b</em>-1</code> Geschwisterknoten vor sich hat, wobei <strong>n</strong> einen gegebenen positiven Wert oder den Wert 0 hat. Zudem muss das Element einen Elternknoten haben. Einfacher ausgedrückt: Beginnend bei einem Startindex b trifft der Selector auf jedes n-te folgende Element zu.</p> + +<p>Einige Beispiele:</p> + +<ul> + <li><code>1n+0</code>, oder einfach <code>n</code>, trifft auf jedes Kindelement zu.</li> + <li><code>2n+0</code>, oder einfach 2n, würde auf die Kindelemente 2, 4, 6, 8, etc. zutreffen. Hier kann auch einfach das Schlüsselwort <code>even</code> verwendet werden.</li> + <li><code>2n+1</code> würde auf die Elemente 1, 3, 5, 7, etc. zutreffen. Hier gibt es auch eine Kurzform: Das Schlüsselwort <code>odd</code>.</li> + <li><code>3n+4</code> würde auf die folgenden Elemente zutreffen: 4, 7, 10, 13, etc.</li> +</ul> + +<p>Die Werte <code><em>a</em></code> und <code><em>b</em></code> müssen beide Integer sein, und der Index des ersten Kindelements eines Knotens ist 1. In anderen Worten, diese Klasse trifft auf alle Kindelemente zu, deren Index Teil der Menge { an + b; n = 0, 1, 2, ... } ist.</p> + +<p>Ein beliebter Anwendungsfall ist das Auswählen jeder zweiten Reihe in einer Tabelle.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">element:nth-child(<em>a</em>n + <em>b</em>) { <em>style properties</em> } +</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Beispielselektoren">Beispielselektoren</h3> + +<dl> + <dt><code>tr:nth-child(2n+1)</code></dt> + <dd>Wählt die ungeraden Reihen einer HTML-Tabelle aus.</dd> + <dt><code>tr:nth-child(odd)</code></dt> + <dd>Wählt die ungeraden Reihen einer HTML-Tabelle aus.</dd> + <dt><code>tr:nth-child(2n)</code></dt> + <dd>Wählt die geraden Reihen einer HTML-Tabelle aus.</dd> + <dt><code>tr:nth-child(even)</code></dt> + <dd>Wählt die geraden Reihen einer HTML-Tabelle aus.</dd> + <dt><code>span:nth-child(0n+1)</code></dt> + <dd>Selektiert ein span Element, welches das erste Kind seines Elternknotens ist. Dies entspricht dem {{Cssxref(':first-child')}} Selector.</dd> + <dt><code>span:nth-child(1)</code></dt> + <dd>Entspricht dem vorherigen Beispiel.</dd> + <dt><code>span:nth-child(-n+3)</code></dt> + <dd>Erzielt einen Treffer, wenn das Element vom Typ span ist und zudem eines der ersten drei Kinder seines Elternknotens ist.</dd> +</dl> + +<h3 id="Gesamtbeispiel">Gesamtbeispiel</h3> + +<p id="The_following_HTML...">Im folgenden ein HTML-Beispiel:</p> + +<pre class="brush:html"><p><code>span:nth-child(2n+1)</code>, <em>ohne</em> ein <code>&lt;em&gt;</code> + unter den Kindelementen. Element 1, 3, 5, und 7 sind ausgewählt, wie erwartet.</p> + +<div class="first"> + <span>Dieses span ist ausgewählt</span> + <span>Dieses span is nicht. :(</span> + <span>Wie sieht's mit diesem aus?</span> + <span>Und dieses?</span> + <span>Noch ein Beispiel</span> + <span>Und noch eins</span> + <span>Zu guter Letzt</span> +</div> + +<p><code>span:nth-child(2n+1)</code>, <em>mit</em> einem <code>&lt;em&gt;</code> + unter den Kindelementen. Element 1, 5, und 7 sind ausgewählt. 3 wird beim Zählen berücksichtigt + weil es ein Kind ist, aber es ist nicht ausgewählt, weil es kein +<code>&lt;span&gt;</code> ist.</p> + +<div class="second"> + <span>Dieses span ist ausgewählt!</span> + <span>Dieses span nicht. :(</span> + <em>Dieses ist ein em.</em> + <span>Wie sieht's mit diesem aus?</span> + <span>Und dieses?</span> + <span>Noch ein Beispiel</span> + <span>Und noch eins</span> + <span>Zu guter Letzt</span> +</div> + +<p><code>span:nth-of-type(2n+1)</code>, <em>mit</em> einem <code>&lt;em&gt;</code> + unter den Kindern. Element 1, 4, 6, und 8 sind ausgewählt. 3 ist + nicht bei der Zählung berücksichtigt oder ausgewählt, weil es ein <code>&lt;em&gt;</code> ist, +und kein <code>&lt;span&gt;</code>, und <code>nth-of-type</code> selektiert nur + Kinder dieses Typs. Das <code>&lt;em&gt;</code> wird übersprungen und ignoriert. +</p> + +<div class="third"> + <span>Dieses span ist ausgewählt!</span> + <span>Dieses span nicht. :(</span> + <em>Dieses ist ein em.</em> + <span>Wie sieht's mit diesem aus?</span> + <span>Und dieses?</span> + <span>Noch ein Beispiel</span> + <span>Und noch eins</span> + <span>Zu guter Letzt</span> +</div></pre> + +<p id="...using_this_CSS...">...dieses CSS wird verwendet...</p> + +<pre class="brush: css">html { + font-family: sans-serif; +} + +span, div em { + padding: 10px; + border: 1px solid green; + display: inline-block; + margin-bottom: 3px; +} + +.first span:nth-child(2n+1), +.second span:nth-child(2n+1), +.third span:nth-of-type(2n+1) { + background-color: lime; +}</pre> + +<p id="...will_result_in.3A">...und erzeugt folgendes Resultat:</p> + +<div>{{EmbedLiveSample('Gesamtbeispiel','100%', '550')}}</div> + +<h2 id="Spezifikationen">Spezifikationen</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('CSS4 Selectors', '#nth-child-pseudo', ':nth-child')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Keine Änderung</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#nth-child-pseudo', ':nth-child')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{Compat("css.selectors.nth-child")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{cssxref(":nth-of-type")}}</li> +</ul> diff --git a/files/de/web/css/_colon_only-child/index.html b/files/de/web/css/_colon_only-child/index.html new file mode 100644 index 0000000000..ac7ffcc7c0 --- /dev/null +++ b/files/de/web/css/_colon_only-child/index.html @@ -0,0 +1,113 @@ +--- +title: ':only-child' +slug: 'Web/CSS/:only-child' +tags: + - CSS + - CSS Pseudo-Klasse + - Layout + - Referenz + - Selektoren + - Web +translation_of: 'Web/CSS/:only-child' +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <span style="line-height: 1.5;">CSS </span><a href="/en-US/docs/CSS/Pseudo-classes" style="line-height: 1.5;" title="Pseudo-classes">Pseudo-Klasse</a><span style="line-height: 1.5;"> </span><code style="font-style: normal; line-height: 1.5;">:only-child</code><span style="line-height: 1.5;"> </span><span style="line-height: 1.5;"> repräsentiert ein Element, welches das einzige Kindeelement innerhalb seines Elternelementes ist. Das ist das gleiche wie </span><code style="font-style: normal; line-height: 1.5;">:first-child:last-child</code><span style="line-height: 1.5;"> oder </span><code style="font-style: normal; line-height: 1.5;">:nth-child(1):nth-last-child(1)</code><span style="line-height: 1.5;">, nur mit einer geringeren Spezifizität.</span></p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">parent child:only-child { + property: value; +} +</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Einfaches_Beispiel">Einfaches Beispiel</h3> + +<pre class="brush: css">span:only-child { + color: red; +} +</pre> + +<pre class="brush: html"><div> + <span>Dieser span ist das einzige Kind seines Elternteils</span> +</div> + +<div> + <span><span style="font-size: 1rem;">Dieser span ist eines von zwei Kindern seines Elternteils</span><span style="font-size: 1rem;"></span></span> + <span><span style="font-size: 1rem;">Dieser span ist eines von zwei Kindern seines Elternteils</span><span style="font-size: 1rem;"></span></span> +</div> +</pre> + +<h4 id="Ergebnis">Ergebnis</h4> + +<p>{{EmbedLiveSample('Basic_example', '100%', 100)}}</p> + +<h3 id="Ein_Beispiel_für_Listen">Ein Beispiel für Listen</h3> + +<pre class="brush: css">li li { + list-style-type: disc; +} +li:only-child { + color: #6699ff; + font-style: italic; + list-style-type: square; +}</pre> + +<pre class="brush: html"><ol> + <li>Erstens + <ul> + <li>Einziges Kind + </ul> + </li> + <li>Zweitens + <ul> + <li>Diese Liste hat zwei Elemente + <li><span style="font-size: 1rem;">Diese Liste hat zwei Elemente</span> + </ul> + </li> + <li>Drittens + <ul> + <li><span style="font-size: 1rem;">Diese Liste hat drei Elemente</span> + <li><span style="font-size: 1rem;">Diese Liste hat drei Elemente</span> + <li><span style="font-size: 1rem;">Diese Liste hat drei Elemente</span> + </ul> + </li> +<ol> +</pre> + +<h4 id="Ergebnis_2">Ergebnis</h4> + +<p>{{EmbedLiveSample('A_list_example', '100%', 150)}}</p> + +<hr> +<h2 id="Spezifizierungen">Spezifizierungen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifizierung</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Selectors', '#only-child-pseudo', ':only-child')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Keine Änderung.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#only-child-pseudo', ':only-child')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Ausgangs-Definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2> + +{{Compat("css.selectors.only-child")}} diff --git a/files/de/web/css/_colon_optional/index.html b/files/de/web/css/_colon_optional/index.html new file mode 100644 index 0000000000..ccf6fe9770 --- /dev/null +++ b/files/de/web/css/_colon_optional/index.html @@ -0,0 +1,69 @@ +--- +title: ':optional' +slug: 'Web/CSS/:optional' +tags: + - CSS + - CSS Pseudoklasse + - Layout + - NeedsMobileBrowserCompatibility + - Referenz + - Web +translation_of: 'Web/CSS/:optional' +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>:optional</code> CSS <a href="/de/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">Pseudoklasse</a> repräsentiert alle {{HTMLElement("input")}} Elemente, die kein {{htmlattrxref("required","input")}} Attribut enthalten.</p> + +<p>Für Pflichtfelder kann man die {{cssxref(":required")}} Pseudoklasse verwenden.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<p>Siehe {{cssxref(":invalid")}}.</p> + +<h2 id="Spezifikationen">Spezifikationen</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('HTML WHATWG', '#selector-optional', ':optional')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Keine Änderung</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', '#selector-optional', ':optional')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Definiert die Semantik bezüglich HTML und Beschränkungsvalidierung.</td> + </tr> + <tr> + <td>{{SpecName('CSS4 Selectors', '#opt-pseudos', ':optional')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Keine Änderung</td> + </tr> + <tr> + <td>{{SpecName('CSS3 UI', '#pseudo-required-value', ':optional')}}</td> + <td>{{Spec2('CSS3 UI')}}</td> + <td>Definiert die Pseudoklasse, aber nicht die zugehörige Semantik.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.selectors.optional")}} + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{cssxref(":required")}}</li> + <li>{{cssxref(":invalid")}}</li> + <li>{{cssxref(":valid")}}</li> +</ul> diff --git a/files/de/web/css/_colon_out-of-range/index.html b/files/de/web/css/_colon_out-of-range/index.html new file mode 100644 index 0000000000..c9b1c64957 --- /dev/null +++ b/files/de/web/css/_colon_out-of-range/index.html @@ -0,0 +1,94 @@ +--- +title: ':out-of-range' +slug: 'Web/CSS/:out-of-range' +tags: + - CSS + - CSS Pseudoklasse + - Layout + - Referenz + - Web +translation_of: 'Web/CSS/:out-of-range' +--- +<div>{{CSSRef}}</div> + +<div> </div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>:out-of-range</code> CSS <a href="/de/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">Pseudoklasse</a> passt, wenn das value Attribut eines Elements außerhalb der angegebenen Begrenzungen für dieses Element ist. Sie erlaubt der Seite, darauf zu reagieren, dass der aktuell definierte Wert eines Elements außerhalb der Bereichsgrenzen ist. Ein Wert kann außerhalb eines Bereichs sein, wenn er entweder kleiner oder größer als die gesetzten Minimal- und Maximalwerte ist.</p> + +<div class="note"><strong>Hinweis:</strong> Diese Pseudoklasse trifft nur auf Elemente zu, die Bereichsbegrenzungen haben. Falls keine solchen Begrenzungen existieren, kann der Wert des Elements weder innerhalb noch außerhalb der Grenzen liegen.</div> + +<h2 id="Beispiel">Beispiel</h2> + +<div id="Beispielcode"> +<h3 id="HTML">HTML</h3> + +<pre class="brush: html; highlight:[3]"><form action="" id="form1"> + <ul>Werte zwischen 1 und 10 sind gültig. + <li> + <input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12"> + <label for="value1">Der Wert ist </label> + </li> +</form></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css; highlight:[5]">li { + list-style: none; + margin-bottom: 1em; +} +input { + border: 1px solid black; +} +input:in-range { + background-color: rgba(0, 255, 0, 0.25); +} +input:out-of-range { + background-color: rgba(255, 0, 0, 0.25); + border: 2px solid red; +} +input:in-range + label::after { + content:' OK'; +} +input:out-of-range + label::after { + content:'out of range!'; +}</pre> +</div> + +<div>{{EmbedLiveSample('Beispielcode',600,140)}}</div> + +<h2 id="Spezifikation"><span>Spezifikation</span></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('CSS4 Selectors', '#in-range-pseudo', ':in-range')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Keine Änderung</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Basic UI', '#pseudo-range', ':in-range')}}</td> + <td>{{Spec2('CSS3 Basic UI')}}</td> + <td>Ursprüngliche Spezifikation</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.selectors.out-of-range")}} + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Link bezogene Pseudoklassen: {{cssxref(":link")}}, {{cssxref(":visited")}}, and {{cssxref(":hover")}}.</li> + <li><a href="/de/docs/Web/Guide/HTML/Forms/Datenformular_Validierungsguide">Datenformular Validierungsguide</a></li> +</ul> diff --git a/files/de/web/css/_colon_required/index.html b/files/de/web/css/_colon_required/index.html new file mode 100644 index 0000000000..769f925180 --- /dev/null +++ b/files/de/web/css/_colon_required/index.html @@ -0,0 +1,67 @@ +--- +title: ':required' +slug: 'Web/CSS/:required' +tags: + - CSS + - CSS Pseudoklasse + - Layout + - NeedsMobileBrowserCompatibility + - Referenz + - Web +translation_of: 'Web/CSS/:required' +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>:required</code> CSS <a href="/de/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">Pseudoklasse</a> repräsentiert jedes {{HTMLElement("input")}} Element, welches das Attribut {{htmlattrxref("required", "input")}} beinhaltet. So kann das Aussehen von Pflichtfeldern einfach angepasst werden.</p> + +<p>Die {{cssxref(":optional")}} Pseudoklasse hingegen kann für die Darstellung von Nicht-Pflichtfeldern verwendet werden.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<p>Siehe {{cssxref(":invalid")}}.</p> + +<h2 id="Spezifikationen">Spezifikationen</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('HTML WHATWG', '#selector-required', ':required')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Keine Änderung</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', '#selector-required', ':required')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Definiert die Semantik bezüglich HTML und Beschränkungsvalidierung</td> + </tr> + <tr> + <td>{{SpecName('CSS4 Selectors', '#opt-pseudos', ':required')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Keine Änderung</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Basic UI', '#pseudo-required-value', ':required')}}</td> + <td>{{Spec2('CSS3 Basic UI')}}</td> + <td>Definiert die Pseudoklasse, aber nicht die zugehörige Semantik</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.selectors.required")}} + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{cssxref(":optional")}}, {{cssxref(":invalid")}}, {{cssxref(":valid")}}</li> +</ul> diff --git a/files/de/web/css/_colon_root/index.html b/files/de/web/css/_colon_root/index.html new file mode 100644 index 0000000000..4328605e04 --- /dev/null +++ b/files/de/web/css/_colon_root/index.html @@ -0,0 +1,48 @@ +--- +title: ':root' +slug: 'Web/CSS/:root' +tags: + - CSS + - CSS Pseudoklasse + - Layout + - NeedsExample + - NeedsMobileBrowserCompatibility + - Referenz + - Web +translation_of: 'Web/CSS/:root' +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Mit dem <kbd>:root</kbd>-Selektor kannst Du das oberste "Elternelement" im DOM oder die Dokumentstruktur als Ziel festlegen. Es ist in der Spezifikation der CSS Selectors Level 3 als „strukturelle Pseudoklasse“ definiert, was bedeutet, dass Inhalt basierend auf seiner Beziehung zu übergeordneten und gleichgeordneten Inhalten gestaltet wird.</p> + +<p>In der überwiegenden Mehrheit der Fälle, auf die Du wahrscheinlich stößt, gilt Folgendes: <kbd>:root</kbd> bezieht sich auf das <kbd><html></kbd> -Element einer Webseite. In einem HTML-Dokument ist das HTML-Element immer das übergeordnete Element der höchsten Ebene, sodass das Verhalten von <kbd>:root</kbd> vorhersehbar ist. Da CSS jedoch eine Stilsprache ist, die mit anderen Dokumentformaten wie SVG und XML verwendet werden kann, kann die <kbd>:root</kbd>-Pseudoklasse in diesen Fällen auf andere Elemente verweisen. Unabhängig von der Auszeichnungssprache wählt <kbd>:root</kbd> immer das oberste Element des Dokuments in der Dokumentstruktur aus.</p> + +<h2 id="Spezifikationen">Spezifikationen</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('CSS4 Selectors', '#root-pseudo', ':root')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Keine Änderung</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#root-pseudo', ':root')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{Compat("css.selectors.root")}}</p> diff --git a/files/de/web/css/_colon_visited/index.html b/files/de/web/css/_colon_visited/index.html new file mode 100644 index 0000000000..9816196c8a --- /dev/null +++ b/files/de/web/css/_colon_visited/index.html @@ -0,0 +1,76 @@ +--- +title: ':visited' +slug: 'Web/CSS/:visited' +tags: + - CSS + - CSS Pseudoklasse + - CSS3 + - Layout + - NeedsMobileBrowserCompatibility + - Referenz + - Web +translation_of: 'Web/CSS/:visited' +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>:visited</code> <a href="/en/CSS/Pseudo-classes" title="Pseudo-classes">Pseudoklasse</a> betrifft nur bereits besuchte Links. Die Stile können von weiteren Pseudoklassen überschrieben werden: {{ cssxref(":link") }}, {{ cssxref(":hover") }}, und {{ cssxref(":active") }}. Um nur besuchte Links auszuwählen, ist es deshalb wichtig, die <em>LVHA-Reihenfolge</em> einzuhalten: <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>.</p> + +<div class="note style-wrap"> +<p><strong>Hinweis: </strong>Aus Datenschutzgründen ist der Einsatzbereich dieser Pseudoklasse auf die folgenden Eigenschaften begränzt: {{ cssxref("color") }}, {{ cssxref("background-color") }}, {{ cssxref("border-color") }}, {{ cssxref("border-bottom-color") }}, {{ cssxref("border-left-color") }}, {{ cssxref("border-right-color") }}, {{ cssxref("border-top-color") }}, {{ cssxref("outline-color") }}, {{ cssxref("column-rule-color") }}, <code>fill</code> und <code>stroke</code>. Beachte, dass auch der Alphakanal ignoriert wird: die Alphakomponente der nicht besuchten Regel wird stattdessen verwendet (außer, wenn die Deckkraft 0 ist. In diesem Fall wird die gesamte Farbe ignoriert und die Farbe der nicht besuchten Regel verwendet).</p> + +<p>Da sich die Farbe ändern kann, liefert <code>getComputedStyle</code> immer den Wert von unbesuchten Links zurück.</p> + +<p>Für mehr informationen zu den Schutzmasnahmen siehe <a href="/en-US/docs/CSS/Privacy_and_the_:visited_selector" title="/en-US/docs/CSS/Privacy_and_the_:visited_selector">Privacy and the :visited selector</a>.</p> +</div> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush: css">a:visited { color: #4b2f89; } +a:visited { background-color: white } </pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Anmerkung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS4 Selectors', '#link', ':visited') }}</td> + <td>{{ Spec2('CSS4 Selectors') }}</td> + <td>Keine Änderung</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Selectors', '#link', ':visited') }}</td> + <td>{{ Spec2('CSS3 Selectors') }}</td> + <td>Keine Änderung</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':visited') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Berenzung auf {{ HTMLElement("a") }} aufgehoben. Beschränkt aus Datenschutzgründen das Browserverhalten.</td> + </tr> + <tr> + <td>{{ SpecName('CSS1', '#anchor-pseudo-classes', ':visited') }}</td> + <td>{{ Spec2('CSS1') }}</td> + <td>Standard Wert definiert</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser Kompatibilität</h2> + +{{Compat("css.selectors.visited")}} + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/en-US/docs/CSS/Privacy_and_the_:visited_selector" title="/en-US/docs/CSS/Privacy_and_the_:visited_selector">Privatsphäre und der :visited Selektor</a></li> + <li>Weitere Link-Pseudoklassen: {{cssxref(":link")}}, {{cssxref(":active")}} und {{cssxref(":hover")}}.</li> +</ul> diff --git a/files/de/web/css/_doublecolon_-moz-page-sequence/index.html b/files/de/web/css/_doublecolon_-moz-page-sequence/index.html new file mode 100644 index 0000000000..a99a56e7fc --- /dev/null +++ b/files/de/web/css/_doublecolon_-moz-page-sequence/index.html @@ -0,0 +1,83 @@ +--- +title: '::-moz-page-sequence' +slug: 'Web/CSS/::-moz-page-sequence' +tags: + - CSS + - CSS Referenz + - NeedsBrowserCompatibility + - NeedsExample + - NeedsMobileBrowserCompatibility + - Non-standard + - Pseudoelement +translation_of: 'Web/CSS/::-moz-page-sequence' +--- +<div>{{CSSRef}}{{non-standard_header}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Das <code>::-moz-page-sequence</code> <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Pseudo-elements">Pseudoelement</a> repräsentiert den Hintergrund der Druckvorschau.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<p>Benötigt Beispiele.</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<p>Nicht Teil einer Spezifikation.</p> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{cssxref("::-moz-page")}}</li> + <li>{{cssxref("::-moz-scrolled-page-sequence")}}</li> +</ul> diff --git a/files/de/web/css/_doublecolon_-moz-page/index.html b/files/de/web/css/_doublecolon_-moz-page/index.html new file mode 100644 index 0000000000..e491443ea9 --- /dev/null +++ b/files/de/web/css/_doublecolon_-moz-page/index.html @@ -0,0 +1,28 @@ +--- +title: '::-moz-page' +slug: 'Web/CSS/::-moz-page' +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - NeedsContent + - NeedsExample + - Non-standard +translation_of: 'Web/CSS/::-moz-page' +--- +<div>{{Non-standard_header}}{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Das <code>::-moz-page</code> CSS <a href="/de/docs/Web/CSS/Pseudo-elements">Pseudoelement</a> gilt für eine einzelne Seite im Druck oder der Druckvorschau.</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<p>Nicht Teil einer Spezifikation.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{cssxref("::-moz-page-sequence")}}</li> + <li>{{cssxref("::-moz-scrolled-page-sequence")}}</li> +</ul> diff --git a/files/de/web/css/_doublecolon_-moz-placeholder/index.html b/files/de/web/css/_doublecolon_-moz-placeholder/index.html new file mode 100644 index 0000000000..07de5dafea --- /dev/null +++ b/files/de/web/css/_doublecolon_-moz-placeholder/index.html @@ -0,0 +1,107 @@ +--- +title: '::-moz-placeholder' +slug: 'Web/CSS/::-moz-placeholder' +tags: + - CSS + - CSS Pseudo-class + - CSS Reference + - Non-standard +translation_of: 'Web/CSS/::placeholder' +--- +<div>{{Non-standard_header}}{{CSSRef}}</div> + +<div class="note"><strong>Hinweis:</strong> Das Pseudoelement <code>::-moz-placeholder</code> wurde eingeführt, um die Pseudoklasse {{cssxref(":-moz-placeholder")}}, die in Firefox 19 als veraltet eingestuft wurde, zu ersetzen.</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Das <code>::-moz-placeholder</code> <a href="/de/docs/Web/CSS/Pseudo-elements">Pseudoelement</a> repräsentiert Formularelemente, die <a href="/de/docs/Web/HTML/Formulare_in_HTML#Das_placeholder_Attribut">Platzhaltertexte</a> anzeigen. Damit können Webentwickler und Theme Designer die Darstellung von Platzhaltertexten anpassen.</p> + +<p>Standardmäßig wird <code>{{cssxref("opacity")}}: 0.54</code> verwendet. Sollten Sie die Hintergrundfarbe der Formularelemente angepasst haben (beispielsweise in einen ähnlichen Farbton), so kann es sein, dass der Platzhaltertext nicht gut sichtbar ist. In diesem Fall können Sie mit <code>::-moz-placeholder</code> die Textdarstellung des Platzhaltertextes ändern.</p> + +<h2 id="Beispiel">Beispiel</h2> + +<p>Das folgende Beispiel färbt den Platzhaltertext grün.</p> + +<h3 id="HTML_Inhalt">HTML Inhalt</h3> + +<pre class="brush:html"><input id="test" placeholder="Platzhaltertext!"> +</pre> + +<h3 id="CSS_Inhalt">CSS Inhalt</h3> + +<pre class="brush:html">input::-moz-placeholder { + color: green; +} +</pre> + +<p>Das Ergebnis sieht folgendermaßen aus:</p> + +<p>{{EmbedLiveSample('Beispiel')}}</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<p>Nicht Teil einer Spezifikation.</p> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("19.0")}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("19.0")}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Firefox verwendet standardmäßig <code>{{cssxref("opacity")}}: 0.54</code> für Platzhaltertexte. Siehe {{Bug("556145")}}. Die meisten anderen Browser verwenden momentan andere Standards für ihre Platzhalter Pseudoelemente oder Pseudoklassen.</p> + +<p>Gecko hat dies zuvor als {{cssxref(":-moz-placeholder")}} Pseudoklasse implementiert. Siehe {{Bug("737786")}}.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/HTML/Formulare_in_HTML">Formulare in HTML</a></li> + <li>{{HTMLElement("input")}}</li> + <li>{{HTMLElement("textarea")}}</li> +</ul> diff --git a/files/de/web/css/_doublecolon_-moz-progress-bar/index.html b/files/de/web/css/_doublecolon_-moz-progress-bar/index.html new file mode 100644 index 0000000000..858c79c319 --- /dev/null +++ b/files/de/web/css/_doublecolon_-moz-progress-bar/index.html @@ -0,0 +1,36 @@ +--- +title: '::-moz-progress-bar' +slug: 'Web/CSS/::-moz-progress-bar' +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - NeedsLiveSample + - Non-standard +translation_of: 'Web/CSS/::-moz-progress-bar' +--- +<div>{{Non-standard_header}}{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Das <code>::-moz-progress-bar</code> <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Pseudo-elements">Pseudoelement</a> betrifft den Bereich eines HTML {{HTMLElement("progress")}} Elements, der den erreichten Fortschritt darstellt. Dies erlaubt es beispielsweise, die Farbe von Fortschrittsbalken ändern.</p> + +<p>Die Möglichkeiten, den Stil des Balkens anzupassen, sind recht groß. Dies kann besonders für unbestimmte Balken nützlich sein (über die {{cssxref(":indeterminate")}} <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a>), bei denen es möglich ist, die Darstellung grundlegend zu ändern; es können z. B. die Breite und die Positionierung des Balkens verändert werden. (Was die gesamten Ausmaße des Elements und seine Position meint, nicht nur den gefüllten Teil des Elements, wie im Screenshot unten verdeutlicht.)</p> + +<h2 id="Beispiele">Beispiele</h2> + +<p>Dieses Beispiel gestaltet den Fortschrittszähler des Fortschrittbalkens mit der ID <code>redbar</code> in rot.</p> + +<pre class="brush: css">#redbar::-moz-progress-bar { + background-color: red; +}</pre> + +<p>Ein Balken, der diesen Stil verwendet, könnte so aussehen:</p> + +<p><img alt="Benutzerdefiniert gestalteter Fortschrittsbalken" class="default internal" src="/@api/deki/files/5387/=redbar.png"></p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{HTMLElement("progress")}}</li> +</ul> diff --git a/files/de/web/css/_doublecolon_-moz-scrolled-page-sequence/index.html b/files/de/web/css/_doublecolon_-moz-scrolled-page-sequence/index.html new file mode 100644 index 0000000000..7f1fe71354 --- /dev/null +++ b/files/de/web/css/_doublecolon_-moz-scrolled-page-sequence/index.html @@ -0,0 +1,81 @@ +--- +title: '::-moz-scrolled-page-sequence' +slug: 'Web/CSS/::-moz-scrolled-page-sequence' +tags: + - CSS + - CSS Referenz + - NeedsBrowserCompatibility + - NeedsContent + - NeedsExample + - NeedsMobileBrowserCompatibility + - Non-standard +translation_of: 'Web/CSS/::-moz-scrolled-page-sequence' +--- +<div>{{CSSRef}}{{non-standard_header}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Das <code>::-moz-scrolled-page-sequence</code> CSS <a href="/de/docs/Web/CSS/Pseudo-elements">Pseudoelement</a> repräsentiert den Hintergrund der Druckvorschau.</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<p>Nicht Teil einer Spezifikation.</p> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Android</th> + <th>Chrome für Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{cssxref("::-moz-page")}}</li> + <li>{{cssxref("::-moz-page-sequence")}}</li> +</ul> diff --git a/files/de/web/css/_doublecolon_-ms-browse/index.html b/files/de/web/css/_doublecolon_-ms-browse/index.html new file mode 100644 index 0000000000..06b3002488 --- /dev/null +++ b/files/de/web/css/_doublecolon_-ms-browse/index.html @@ -0,0 +1,79 @@ +--- +title: '::-ms-browse' +slug: 'Web/CSS/::-ms-browse' +tags: + - CSS + - NeedsBrowserCompatibility + - NeedsContent + - NeedsExample + - NeedsMobileBrowserCompatibility + - Non-standard + - Pseudoelement + - Referenz +translation_of: 'Archive/Web/CSS/::-ms-browse' +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Das <code>::-ms-browse</code> CSS <a href="/de/docs/Web/CSS/Pseudo-elements">Pseudoelement</a> repräsentiert die Schaltfläche eines {{HTMLElement("input")}} Elements mit <code>type="file"</code>, die die Dateiauswahl öffnet.</p> + +<p>Diese Schaltfläche und dieses Pseudoelement sind nicht standardisiert und spezifisch für Internet Explorer 10+, daher das Herstellerpräfix.</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<p>Nicht Teil einer Spezifikation.</p> + +<p>Microsoft hat eine <a href="https://msdn.microsoft.com/en-us/library/windows/apps/Hh779844.aspx">Beschreibung von <code>::-ms-browse</code> auf MSDN</a>.</p> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>10</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/de/web/css/_doublecolon_-ms-check/index.html b/files/de/web/css/_doublecolon_-ms-check/index.html new file mode 100644 index 0000000000..3f5c0e1b87 --- /dev/null +++ b/files/de/web/css/_doublecolon_-ms-check/index.html @@ -0,0 +1,23 @@ +--- +title: '::-ms-check' +slug: 'Web/CSS/::-ms-check' +tags: + - CSS + - NeedsCompatTable + - NeedsExample + - Non-standard + - Pseudoelement + - Referenz +translation_of: 'Archive/Web/CSS/::-ms-check' +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Das <strong><code>::-ms-check</code></strong> CSS <a href="/de/docs/Web/CSS/Pseudo-elements">Pseudoelement</a> repräsentiert den Haken eines {{HTMLElement("input")}} mit <code>type="checkbox"</code> oder <code>type="radio"</code>.</p> + +<h2 id="Spezifikation">Spezifikation</h2> + +<p>Nicht Teil einer Spezifikation.</p> + +<p>Microsoft hat eine <a href="https://msdn.microsoft.com/en-us/library/windows/apps/hh465739.aspx">Beschreibung auf MSDN</a>.</p> diff --git a/files/de/web/css/_doublecolon_-ms-fill-lower/index.html b/files/de/web/css/_doublecolon_-ms-fill-lower/index.html new file mode 100644 index 0000000000..80bc10efe4 --- /dev/null +++ b/files/de/web/css/_doublecolon_-ms-fill-lower/index.html @@ -0,0 +1,90 @@ +--- +title: '::-ms-fill-lower' +slug: 'Web/CSS/::-ms-fill-lower' +tags: + - CSS + - CSS Pseudoelement + - NeedsBrowserCompatibility + - NeedsExample + - NeedsMobileBrowserCompatibility + - Non-standard + - Pseudoelement + - Referenz +translation_of: 'Archive/Web/CSS/::-ms-fill-lower' +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Das <strong><code>::-ms-fill-lower</code></strong> <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Pseudo-elements">Pseudoelement</a> repräsentiert den Teil des "Tracks" (die Spur, in der der sich der Indikator, alias Thumb, bewegt) eines {{HTMLElement("input")}} Elements mit <code>type="range"</code>, welcher den Werten entspricht, die kleiner sind als der aktuell vom Thumb markierte.</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<p>Nicht Teil einer Spezifikation.</p> + +<p>Microsoft hat eine <a href="https://msdn.microsoft.com/en-us/library/windows/apps/hh465745.aspx">Beschreibung auf MSDN</a>.</p> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Die Pseudoelemente, die von IE/Edge verwendet werden, um andere Teile des Forschrittelements zu stylen: + <ul> + <li>{{cssxref("::-ms-fill-upper")}}</li> + <li>{{cssxref("::-ms-track")}}</li> + <li>{{cssxref("::-ms-thumb")}}</li> + </ul> + </li> + <li>{{cssxref("::-moz-range-progress")}}</li> + <li><a href="https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/">CSS-Tricks: Styling Cross-Browser Compatible Range Inputs with CSS</a></li> + <li><a href="http://www.quirksmode.org/blog/archives/2015/11/styling_and_scr.html">QuirksMode: Styling and scripting sliders</a></li> +</ul> diff --git a/files/de/web/css/_doublecolon_-ms-fill-upper/index.html b/files/de/web/css/_doublecolon_-ms-fill-upper/index.html new file mode 100644 index 0000000000..c897657ac2 --- /dev/null +++ b/files/de/web/css/_doublecolon_-ms-fill-upper/index.html @@ -0,0 +1,90 @@ +--- +title: '::-ms-fill-upper' +slug: 'Web/CSS/::-ms-fill-upper' +tags: + - CSS + - CSS Pseudoelement + - NeedsBrowserCompatibility + - NeedsExample + - NeedsMobileBrowserCompatibility + - Non-standard + - Pseudoelement + - Referenz +translation_of: 'Archive/Web/CSS/::-ms-fill-upper' +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Das <strong><code>::-ms-fill-upper</code></strong> <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Pseudo-elements">Pseudoelement</a> repräsentiert den Teil des "Tracks" (die Spur, in der der sich der Indikator, alias Thumb, bewegt) eines {{HTMLElement("input")}} Elements mit <code>type="range"</code>, welcher den Werten entspricht, die größer sind als der aktuell vom Thumb markierte.</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<p>Nicht Teil einer Spezifikation.</p> + +<p>Microsoft hat eine <a href="https://msdn.microsoft.com/en-us/library/windows/apps/hh465748.aspx">Beschreibung auf MSDN</a>.</p> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Die Pseudoelemente, die von IE/Edge verwendet werden, um andere Teile des Forschrittelements zu stylen: + <ul> + <li>{{cssxref("::-ms-fill-lower")}}</li> + <li>{{cssxref("::-ms-track")}}</li> + <li>{{cssxref("::-ms-thumb")}}</li> + </ul> + </li> + <li>{{cssxref("::-moz-range-progress")}}</li> + <li><a href="https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/">CSS-Tricks: Styling Cross-Browser Compatible Range Inputs with CSS</a></li> + <li><a href="http://www.quirksmode.org/blog/archives/2015/11/styling_and_scr.html">QuirksMode: Styling and scripting sliders</a></li> +</ul> diff --git a/files/de/web/css/_doublecolon_-ms-fill/index.html b/files/de/web/css/_doublecolon_-ms-fill/index.html new file mode 100644 index 0000000000..972cd7a224 --- /dev/null +++ b/files/de/web/css/_doublecolon_-ms-fill/index.html @@ -0,0 +1,71 @@ +--- +title: '::-ms-fill' +slug: 'Web/CSS/::-ms-fill' +tags: + - CSS + - NeedsExample + - Pseudoelement + - Referenz +translation_of: 'Archive/Web/CSS/::-ms-fill' +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Das <strong><code>::-ms-fill</code></strong> CSS <a href="/de/docs/Web/CSS/Pseudo-elements" title="en/CSS/Pseudo-elements">Pseudoelement</a> repräsentiert die gefüllte Portion eines {{HTMLElement("progress")}} Elements. Das Pseudoelement ist nicht standardisiert und wird nur von Internet Explorer 10+ unterstützt, daher das Herstellerpräfix.</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<p>Nicht Teil einer Spezifikation.</p> + +<p>Microsoft hat eine <a href="https://msdn.microsoft.com/en-us/library/windows/apps/hh465757.aspx">Beschreibung auf MSDN</a>.</p> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>10.0</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/de/web/css/_doublecolon_-ms-reveal/index.html b/files/de/web/css/_doublecolon_-ms-reveal/index.html new file mode 100644 index 0000000000..c3da23ecb9 --- /dev/null +++ b/files/de/web/css/_doublecolon_-ms-reveal/index.html @@ -0,0 +1,24 @@ +--- +title: '::-ms-reveal' +slug: 'Web/CSS/::-ms-reveal' +tags: + - CSS + - NeedsCompatTable + - NeedsContent + - NeedsExample + - Non-standard + - Pseudoelement + - Referenz +translation_of: 'Archive/Web/CSS/::-ms-reveal' +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Das <strong><code>::-ms-reveal</code></strong> CSS <a href="/de/docs/Web/CSS/Pseudo-elements">Pseudoelement</a> wird verwendet, um Stile auf den "Passwort Anzeigebutton" anzuwenden, welcher im Internet Explorer 10+ standardmäßig am Rand eines {{HTMLElement("input")}} Elements mit <code>type="password"</code> angezeigt wird. Der Passwort Anzeigebutton zeigt den Wert des Passwortfeldes im Klartext an (anstatt der normalen versteckt-wegen-Datenschutz nur-Sternchen Anzeige). Dieser Button und das Pseudoelement sind nicht standardisiert und spezifisch für Internet Explorer 10+, daher das Herstellerpräfix.</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<p>Nicht Teil einer Spezifikation.</p> + +<p>Microsoft hat eine <a href="https://msdn.microsoft.com/en-us/library/windows/apps/hh465773.aspx">Beschreibung auf MSDN</a>.</p> diff --git a/files/de/web/css/_doublecolon_-ms-thumb/index.html b/files/de/web/css/_doublecolon_-ms-thumb/index.html new file mode 100644 index 0000000000..e8736b011d --- /dev/null +++ b/files/de/web/css/_doublecolon_-ms-thumb/index.html @@ -0,0 +1,24 @@ +--- +title: '::-ms-thumb' +slug: 'Web/CSS/::-ms-thumb' +tags: + - CSS + - Pseudoelement + - Referenz +translation_of: 'Archive/Web/CSS/::-ms-thumb' +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<h3 id="Übersicht">Übersicht</h3> + +<p>Das <strong><code>::-ms-thumb</code></strong> CSS <a href="/de/docs/Web/CSS/Pseudo-elements">Pseudoelement</a> repräsentiert den Schieber, den der Benutzer innerhalb der Spur eines {{HTMLElement("input")}}s mit <code>type="range"</code> bewegen kann, um seinen numerischen Wert zu ändern.</p> + +<h3 id="Spezifikationen">Spezifikationen</h3> + +<p>Dies ist nicht Teil einer Spezifikation, jedoch hat Microsoft eine <a href="https://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh465780.aspx">Beschreibung auf MSDN</a>.</p> + +<h3 id="Siehe_auch">Siehe auch</h3> + +<ul> + <li>{{cssxref("::-ms-track")}}</li> +</ul> diff --git a/files/de/web/css/_doublecolon_after/index.html b/files/de/web/css/_doublecolon_after/index.html new file mode 100644 index 0000000000..6eca5cbd0c --- /dev/null +++ b/files/de/web/css/_doublecolon_after/index.html @@ -0,0 +1,158 @@ +--- +title: '::after (:after)' +slug: 'Web/CSS/::after' +tags: + - CSS + - CSS Pseudoelement + - Layout + - Referenz + - Web +translation_of: 'Web/CSS/::after' +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Das <code>::after</code> CSS <a href="/de/docs/Web/CSS/Pseudo-elements">Pseudoelement</a> matcht ein virtuelles letztes Kindelement des markierten Elements. Es wird typischerweise dazu verwendet, um kosmetischen Inhalt unter Verwendung der {{cssxref("content")}} CSS Eigenschaft zu einem Element hinzuzufügen. Dieses Element ist standardmäßig inline.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">/* CSS2 Syntax */ +element:after { <em>Stileigenschaften</em> } + +/* CSS3 Syntax */ +element::after { <em>Stileigenschaften</em> }</pre> + +<p>Die <code>::after</code> Notation (mit zwei Doppelpunkten) wurde in CSS 3 eingeführt, um eine Unterscheidung zwischen <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklassen</a> und <a href="/de/docs/Web/CSS/Pseudo-elements">Pseudoelementen</a> einzuführen. Browser unterstützen auch die <code>:after</code> Notation, wie sie in CSS 2 eingeführt wurde.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Einfache_Verwendung">Einfache Verwendung</h3> + +<p>Lass uns zwei Klassen erstellen: eine für langweilige Absätze und eine für aufregende. Wir können anschließend jeden Absatz markieren, indem wir ein Pseudoelement an dessen Ende setzen.</p> + +<pre class="brush: html"><p class="boring-text">Hier ist etwas alter, langweiliger Text.</p> +<p>Hier ist etwas mittelmäßiger Text, weder langweilig noch aufregend.</p> +<p class="exciting-text">An MDN mitzuwirken ist einfach und macht Spaß. +Klicke einfach auf den 'BEARBEITEN' Button und füge neue Livebeispiele hinzu oder verbessere bestehende Beispiele.</p></pre> + +<pre class="brush: css">.exciting-text::after { + content: "<- *Das* ist interessant!"; + color: green; +} + +.boring-text::after { + content: "<- LANGWEILIG!"; + color: red; +}</pre> + +<h4 id="Ausgabe">Ausgabe</h4> + +<p>{{EmbedLiveSample('Einfache_Verwendung', 500, 150)}}</p> + +<h3 id="Dekoratives_Beispiel">Dekoratives Beispiel</h3> + +<p>Wir können Text oder Bilder innerhalb der {{cssxref("content")}} Eigenschaft fast beliebig stylen.</p> + +<pre class="brush: html"><span class="ribbon">Beachte, wo die orange Box ist.</span></pre> + +<pre class="brush: css">.ribbon { + background-color: #5BC8F7; +} + +.ribbon::after { + content: "Sieh dir diese orange Box an."; + background-color: #FFBA10; + border-color: black; + border-style: dotted; +}</pre> + +<h4 id="Ausgabe_2">Ausgabe</h4> + +<p>{{EmbedLiveSample('Dekoratives_Beispiel', 450, 20)}}</p> + +<h3 id="Tooltips">Tooltips</h3> + +<p>Das folgende Beispiel zeigt die Verwendung des <code>::after</code> <a href="/en-US/docs/Web/CSS/Pseudo-elements">Pseudoelements</a> in Verbindung mit dem <a href="/en-US/docs/Web/CSS/attr"><code>attr()</code></a> CSS Ausdruck und einem <a href="/en-US/docs/Web/HTML/Global_attributes#attr-dataset">benutzerdefinierten Datenattribut</a> <code>data-descr</code>, um einen rein CSS-basierten, Wörterbuch ähnlichen <em>Tooltip</em> zu erstellen. Sieh dir die Livevorschau unten an oder das <a href="https://developer.mozilla.org/files/4591/css-only_tooltips.html">Beispiel auf einer separaten Seite</a>.</p> + +<pre class="brush: html"><p>Hier ist ein Livebeispiel des oberen Codes.<br /> + Wir haben ein <span data-descr="Sammlung von Wörtern und Interpunktion">text</span> mit ein paar + <span data-descr="kleine Popups, welche auch wieder verschwinden">Tooltips</span>.<br /> + Sei nicht schüchtern, beweg die Maus darüber, ums dir <span data-descr="nicht wörtlich nehmen">anzusehen</span>. +</p> +</pre> + +<pre class="brush: css">span[data-descr] { + position: relative; + text-decoration: underline; + color: #00F; + cursor: help; +} + +span[data-descr]:hover::after { + content: attr(data-descr); + position: absolute; + left: 0; + top: 24px; + min-width: 200px; + border: 1px #aaaaaa solid; + border-radius: 10px; + background-color: #ffffcc; + padding: 12px; + color: #000000; + font-size: 14px; + z-index: 1; +}</pre> + +<h4 id="Ausgabe_3">Ausgabe</h4> + +<p>{{EmbedLiveSample('Tooltips', 450, 120)}}</p> + +<h2 id="Spezifikationen">Spezifikationen</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('CSS4 Pseudo-Elements', '#selectordef-after', '::after')}}</td> + <td>{{Spec2('CSS4 Pseudo-Elements')}}</td> + <td>Keine wesentlichen Änderungen zur vorherigen Spezifikation.</td> + </tr> + <tr> + <td>{{Specname("CSS3 Transitions", "#animatable-properties", "Übergängen bei Pseudoelement Eigenschaften")}}</td> + <td>{{Spec2("CSS3 Transitions")}}</td> + <td>Erlaubt Übergänge bei Eigenschaften, die für Pseudoelemente definiert sind.</td> + </tr> + <tr> + <td>{{Specname("CSS3 Animations", "", "Animationen bei Pseudoelement Eigenschaften")}}</td> + <td>{{Spec2("CSS3 Animations")}}</td> + <td>Erlaubt Animationen bei Eigenschaften, die für Pseudoelemente definiert sind.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#gen-content', '::after')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Führt die Zwei-Doppelpunkte-Syntax ein.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'generate.html#before-after-content', '::after')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Ursprüngliche Definition, unter Verwendung der Ein-Doppelpunkt-Syntax</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.selectors.after")}} + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{Cssxref("::before")}}, {{cssxref("content")}}</li> +</ul> diff --git a/files/de/web/css/_doublecolon_backdrop/index.html b/files/de/web/css/_doublecolon_backdrop/index.html new file mode 100644 index 0000000000..d0edc3021e --- /dev/null +++ b/files/de/web/css/_doublecolon_backdrop/index.html @@ -0,0 +1,49 @@ +--- +title: '::backdrop' +slug: 'Web/CSS/::backdrop' +tags: + - CSS + - Layout + - NeedsContent + - Pseudoelement + - Referenz + - Vollbild + - Web +translation_of: 'Web/CSS/::backdrop' +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p>Jedes Element im Stack des <a href="https://fullscreen.spec.whatwg.org/#top-layer">Toplayer</a>s hat ein <dfn><code>::backdrop</code></dfn> {{cssxref("pseudo-elements", "pseudo-element")}}. Dieses Pseudoelement ist eine Box, die direkt unterhalb des Elements gerendert wird (und oberhalb des Elements unterhalb des Elements im Stack, falls es eines gibt), innerhalb desselben Toplayers.</p> + +<p class="note">Das <code>::backdrop</code> Pseudoelement kann dazu verwendet werden, um einen Hintergrund zu erstellen, der das dahinterliegende Dokument für ein Element im Stack des Toplayers versteckt, z. B. für das Element, das im Vollbild dargestellt wird, wie in dieser Spezifikation beschrieben.</p> + +<p>Es erbt von keinem Element und vererbt auch nicht. Es gelten keine Einschränkungen bezüglich der Eigenschaften, die auf dieses Pseudoelement angewendet werden können.</p> + +<h2 id="Spezifikationen">Spezifikationen</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('Fullscreen', '#::backdrop-pseudo-element', '::backdrop')}}</td> + <td>{{Spec2('Fullscreen')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.selectors.backdrop")}} + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{HTMLElement("dialog")}}</li> +</ul> diff --git a/files/de/web/css/_doublecolon_before/index.html b/files/de/web/css/_doublecolon_before/index.html new file mode 100644 index 0000000000..080ef608bb --- /dev/null +++ b/files/de/web/css/_doublecolon_before/index.html @@ -0,0 +1,230 @@ +--- +title: '::before (:before)' +slug: 'Web/CSS/::before' +tags: + - CSS + - CSS Pseudoelement + - Layout + - NeedsMobileBrowserCompatibility + - Referenz + - Web +translation_of: 'Web/CSS/::before' +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p><span class="seoSummary"><code>::before</code> erzeugt ein <a href="/en-US/docs/Web/CSS/Pseudo-elements">Pseudoelement</a>, dass das erste Kind des gematchten Elements ist. Es wird oft dazu verwendet, um kosmetische Inhalte unter Verwendung der {{cssxref("content")}} Eigenschaft zu einem Element hinzuzufügen. Dieses Element ist standardmäßig inline.</span></p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox notranslate">/* CSS3 Syntax */ +element::before { <em>Stileigenschaften</em> } + +/* CSS2 veraltete Syntax (nur benötigt, um IE8 zu unterstützen) */ +element:before { <em>Stileigenschaften</em> } + +/* Fügt Inhalte vor jedem <p> Element ein */ +p::before { content: "Hallo Welt!"; }</pre> + +<p>Die <code>::before</code> Notation (mit zwei Doppelpunkten) wurde in CSS 3 eingeführt, um eine Unterscheidung zwischen <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklassen</a> und <a href="/de/docs/Web/CSS/Pseudo-elements">Pseudoelementen</a> einzuführen. Browser unterstützen auch die <code>:before</code> Notation, wie sie in CSS 2 eingeführt wurde.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Hinzufügen_von_Anführungszeichen">Hinzufügen von Anführungszeichen</h3> + +<p>Ein einfaches Beispiel für die Verwendung von <code>::before</code> Pseudoelementen ist das Hinzufügen von Anführungszeichen. Hier werden <code>::before</code> und <code>::after</code> verwendet, um Anführungszeichen einzufügen.</p> + +<h4 id="HTML_Inhalt">HTML Inhalt</h4> + +<pre class="brush:html notranslate"><q>Ein paar Anführungszeichen</q>, sagte er, <q>sind besser als keine</q>.</pre> + +<h4 id="CSS_Inhalt">CSS Inhalt</h4> + +<pre class="brush:css notranslate">q::before { + content: "«"; + color: blue; +} +q::after { + content: "»"; + color: red; +}</pre> + +<h4 id="Ausgabe">Ausgabe</h4> + +<p>{{EmbedLiveSample('Hinzufügen_von_Anführungszeichen', '500', '50')}}</p> + +<h3 id="Dekoratives_Beispiel">Dekoratives Beispiel</h3> + +<p>Wir können Text oder Bilder innerhalb der {{cssxref("content")}} Eigenschaft fast beliebig stylen.</p> + +<h4 id="HTML_Inhalt_2">HTML Inhalt</h4> + +<pre class="brush: html notranslate"><span class="ribbon">Beachte, wo die orange Box ist.</span></pre> + +<h4 id="CSS_content">CSS content</h4> + +<pre class="brush: css notranslate">.ribbon { + background-color: #5BC8F7; +} + +.ribbon::before { + content: "Sieh dir diese orange Box an."; + background-color: #FFBA10; + border-color: black; + border-style: dotted; +}</pre> + +<h4 id="Ausgabe_2">Ausgabe</h4> + +<p>{{EmbedLiveSample('Dekoratives_Beispiel', 450, 60)}}</p> + +<h3 id="Todo-Liste">Todo-Liste</h3> + +<p>In diesem Beispiel erstellen wir eine einfache Todo-Liste mit Hilfe von Pseudoelementen. Diese Methode kann oft dazu verwendet werden, kleine Änderungen an der Benutzerschnittstelle hinzuzufügen und die User Experience zu verbessern.</p> + +<h4 id="HTML_Inhalt_3">HTML Inhalt</h4> + +<pre class="brush: html notranslate"><ul> + <li>Milch kaufen</li> + <li>Mit Hund Gassi gehen</li> + <li>Trainieren</li> + <li>Code schreiben</li> + <li>Musik spielen</li> + <li>Entspannen</li> +</ul> +</pre> + +<h4 id="CSS_Inhalt_2">CSS Inhalt</h4> + +<pre class="brush: css notranslate">li { + list-style-type: none; + position: relative; + margin: 2px; + padding: 0.5em 0.5em 0.5em 2em; + background: lightgrey; + font-family: sans-serif; +} + +li.done { + background: #CCFF99; +} + +li.done::before { + content: ''; + position: absolute; + border-color: #009933; + border-style: solid; + border-width: 0 0.3em 0.25em 0; + height: 1em; + top: 1.3em; + left: 0.6em; + margin-top: -1em; + transform: rotate(45deg); + width: 0.5em; +}</pre> + +<h4 id="JavaScript_Inhalt">JavaScript Inhalt</h4> + +<pre class="brush: js notranslate">var list = document.querySelector('ul'); +list.addEventListener('click', function(ev) { + if( ev.target.tagName === 'LI') { + ev.target.classList.toggle('done'); + } +}, false); +</pre> + +<p>Das obige Beispiel ist ein Livebeispiel. Beachte, dass keine Symbole verwendet werden und dass der Haken in Wirklichkeit das <code>::before</code> ist, dass durch CSS dargestellt wird.</p> + +<h4 id="Ausgabe_3">Ausgabe</h4> + +<p>{{EmbedLiveSample('Todo-Liste', 400, 300)}}</p> + +<h2 id="Hinweise">Hinweise</h2> + +<p>Obwohl die Fehlerbehebungen in Firefox 3.5 bzgl. Positionierung es nicht erlauben, Inhalte als ein separates, vorheriges Geschwisterelement zu erstellen (wie die <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#before-after-content">CSS Spezifikation</a> sagt "The :before and :after pseudo-elements elements interact with other boxes [...] as if they were real elements inserted just inside their associated element.", etwa: "Die :before- und :after-Pseudo-Elemente interagieren mit anderen Boxen [...] so als wären sie reale Elemente, die in dem dazugehörigen Element eingefügt wären), können Sie dennoch eingesetzt werden um leichte Verbesserungen in tabellenlosen Layouts (z.B. um ein Element zu zentrieren) zu erhalten. Solange der zu zentrierende Inhalt ein Kindelement ist, können eine vorhergehende und nachfolgende Spalte eingefügt werden ohne eigene Elemente dafür zu verwenden (d.h., es ist eventuell semantisch korrekter, wie unten in dem Beispiel, ein zusätzliches span-Element anstelle jeweils eines leeres div-Elements davor und danach einzufügen). (Und denke immer daran, einem gefloateten Element eine Breite zu geben, andernfalls wird es nicht floaten!)</p> + +<h4 id="HTML_Inhalt_4">HTML Inhalt</h4> + +<pre class="brush: html notranslate"><div class="example"> +<span id="floatme">"Davor umflossen" sollte links vom Viewport erstellt werden +und Umfluss in dieser Zeile nicht erlauben, sie unterhalb zu umfließen. Genauso sollte +"Danach umflossen" rechts vom Viewport erscheinen und dieser Zeile nicht erlauben, es unterhalb zu umfließen.</span> +</div></pre> + +<h4 id="CSS_Inhalt_3">CSS Inhalt</h4> + +<pre class="brush: css notranslate">#floatme { + float: left; width: 50%; +} + +/* Um eine leere Spalte zu erhalten, einfach den hexadezimalen Wert für einen nicht umbrechenden Leerraum angeben: \a0 als Attributwert für content (verwende \0000a0 wenn weitere Zeichen folgen) */ +.example::before { + content: "Davor umflossen"; + float: left; + width: 25% +} +.example::after { + content: "Danach umflossen"; + float: right; + width:25% +} + +/* For styling */ +.example::before, .example::after, .first { + background: yellow; + color: red; +}</pre> + +<h4 id="Ausgabe_4">Ausgabe</h4> + +<p>{{EmbedLiveSample("Hinweise")}}</p> + +<h2 id="Spezifikationen">Spezifikationen</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('CSS4 Pseudo-Elements', '#selectordef-before', '::before')}}</td> + <td>{{Spec2('CSS4 Pseudo-Elements')}}</td> + <td>Keine wesentlichen Änderungen zur vorherigen Spezifikation.</td> + </tr> + <tr> + <td>{{Specname("CSS3 Transitions", "#animatable-properties", "Übergänge bei Pseudoelement Eigenschaften")}}</td> + <td>{{Spec2("CSS3 Transitions")}}</td> + <td>Erlaubt Übergänge bei Eigenschaften, die für Pseudoelemente definiert sind.</td> + </tr> + <tr> + <td>{{Specname("CSS3 Animations", "", "Animationen bei Pseudoelement Eigenschaften")}}</td> + <td>{{Spec2("CSS3 Animations")}}</td> + <td>Erlaubt Animationen bei Eigenschaften, die für Pseudoelemente definiert sind.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#gen-content', '::before')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Führt die Zwei-Doppelpunkte-Syntax ein.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'generate.html#before-after-content', '::before')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Ursprüngliche Definition, unter Verwendung der Ein-Doppelpunkt-Syntax</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibililtät">Browser Kompatibililtät</h2> + +<p>{{Compat("css.selectors.before")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{Cssxref("::after")}}, {{cssxref("content")}}</li> +</ul> diff --git a/files/de/web/css/_doublecolon_placeholder/index.html b/files/de/web/css/_doublecolon_placeholder/index.html new file mode 100644 index 0000000000..d63f9b7cc7 --- /dev/null +++ b/files/de/web/css/_doublecolon_placeholder/index.html @@ -0,0 +1,150 @@ +--- +title: '::placeholder' +slug: 'Web/CSS/::placeholder' +tags: + - CSS + - Referenz +translation_of: 'Web/CSS/::placeholder' +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p>Das <strong><code>::placeholder</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-elements">Pseudo-Element</a> stellt den <a href="/en-US/docs/Web/HTML/Forms_in_HTML#The_placeholder_attribute">Platzhaltertext</a> eines <a href="/en-US/docs/Learn/HTML/Forms">Formular-</a>Elements dar.</p> + +<pre class="brush: css no-line-numbers">::placeholder { + color: blue; + font-size: 1.5em; +}</pre> + +<p>Only the subset of CSS properties that apply to the {{cssxref("::first-line")}} pseudo-element can be used in a rule using <code>::placeholder</code> in its selector.</p> + +<div class="note"> +<p><strong>Note:</strong> In Firefox, the appearance of placeholder text is a translucent gray color by default.</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Red_text">Red text</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush:html line-numbers language-html"><input placeholder="Type something here!"></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">input::placeholder { + color: red; + font-size: 1.2em; + font-style: italic; +}</pre> + +<h4 id="Ergebnis">Ergebnis</h4> + +<p>{{EmbedLiveSample("Red_text", 200, 60)}}</p> + +<h3 id="Green_text">Green text</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush:html line-numbers language-html"><input placeholder="Type something here..."></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">input::placeholder { + color: green; +} +</pre> + +<h4 id="Ergebnis_2">Ergebnis</h4> + +<p>{{EmbedLiveSample("Green_text", 200, 60)}}</p> + +<h2 id="Accessibility_concerns">Accessibility concerns</h2> + +<h3 id="Color_contrast">Color contrast</h3> + +<h4 id="Contrast_Ratio">Contrast Ratio</h4> + +<p>Placeholder text typically has a lighter color treatment to indicate that it is a suggestion for what kind of input will be valid, and is not actual input of any kind.</p> + +<p>It is important to ensure that the contrast ratio between the color of the placeholder text and the background of the input is high enough that people experiencing low vision conditions will be able to read it while also making sure there is enough of a difference between the placeholder text and input text color that users do not mistake the placeholder for inputed data.</p> + +<p>Color contrast ratio is determined by comparing the luminosity of the placeholder text and the input background color values. In order to meet current <a href="https://www.w3.org/WAI/intro/wcag">Web Content Accessibility Guidelines (WCAG)</a>, a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings. Large text is defined as 18.66px and bold or larger, or 24px or larger.</p> + +<ul> + <li><a href="https://webaim.org/resources/contrastchecker/" rel="noopener">WebAIM: Color Contrast Checker</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html" rel="noopener">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h4 id="Usability">Usability</h4> + +<p>Placeholder text with sufficient color contrast may be interpreted as entered input. Placeholder text will also disappear when a person enters content into an {{htmlelement("input")}} element. Both of these circumstances can interfere with successful form completion, especially for people with cognitive concerns.</p> + +<p>An alternate approach to providing placeholder information is to include it outside of the input in close visual proximity, then use <code><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute">aria-describedby</a></code> to programmatically associate the {{HTMLElement("input")}} with its hint.</p> + +<p>With this implementation, the hint content is available even if information is entered into the input field, and the input appears free of preexisting input when the page is loaded. Most screen reading technology will use <code>aria-describedby</code> to read the hint after the input's label text is announced, and the person using the screen reader can mute it if they find the extra information unnecessary.</p> + +<pre class="brush:html line-numbers language-html"><label for="user-email">Your email address</label> +<span id="user-email-hint" class="input-hint">Example: jane@sample.com</span> +<input id="user-email" aria-describedby="user-email-hint" name="email" type="email"> +</pre> + +<ul> + <li><a href="https://www.nngroup.com/articles/form-design-placeholders/">Placeholders in Form Fields Are Harmful — Nielsen Norman Group</a></li> +</ul> + +<h3 id="Windows_High_Contrast_Mode">Windows High Contrast Mode</h3> + +<p>Placeholder text will appear with the same styling as user-entered text content when rendered in <a href="/en-US/docs/Web/CSS/-ms-high-contrast">Windows High Contrast Mode</a>. This will make it difficult for some people to determine which content has been entered, and which content is placeholder text.</p> + +<ul> + <li><a href="http://www.gwhitworth.com/blog/2017/04/how-to-use-ms-high-contrast">Greg Whitworth — How to use -ms-high-contrast</a></li> +</ul> + +<h3 id="Labels">Labels</h3> + +<p>Placeholders are not a replacement for the {{htmlelement("label")}} element. Without a label that has been programmatically associated with an input using a combination of the {{htmlattrxref("for", "label")}} and {{htmlattrxref("id")}} attributes, assistive technology such as screen readers cannot parse {{htmlelement("input")}} elements.</p> + +<ul> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/forms/Basic_form_hints">MDN Basic form hints</a></li> + <li><a href="https://www.nngroup.com/articles/form-design-placeholders/">Placeholders in Form Fields Are Harmful — Nielsen Norman Group</a></li> +</ul> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Pseudo-Elements', '#placeholder-pseudo', '::placeholder')}}</td> + <td>{{Spec2('CSS4 Pseudo-Elements')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("css.selectors.placeholder")}}</p> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>The {{cssxref(":placeholder-shown")}} pseudo-class styles an element that <em>has</em> an active placeholder.</li> + <li>Related HTML elements: {{HTMLElement("input")}}, {{HTMLElement("textarea")}}</li> + <li><a href="/en-US/docs/Learn/HTML/Forms">HTML forms</a></li> +</ul> diff --git a/files/de/web/css/_doublecolon_selection/index.html b/files/de/web/css/_doublecolon_selection/index.html new file mode 100644 index 0000000000..d8d1197db3 --- /dev/null +++ b/files/de/web/css/_doublecolon_selection/index.html @@ -0,0 +1,86 @@ +--- +title: '::selection' +slug: 'Web/CSS/::selection' +tags: + - CSS + - CSS Pseudoelement + - Layout + - Referenz + - Web +translation_of: 'Web/CSS/::selection' +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Das <code>::selection</code> <a href="/de/docs/Web/CSS">CSS</a> Pseudoelement weist dem durch den Benutzer ausgewählten Bereich (z. B. mit der Maus oder einem anderen Zeigegerät) eines Dokuments Regeln zu.</p> + +<p>Nur ein kleiner Teil der CSS Eigenschaften kann innerhalb einer Regel benutzt werden, die <code>::selection</code> in ihrem Selektor verwendet: {{cssxref("color")}}, {{cssxref("background")}}, {{cssxref("background-color")}} und {{cssxref("text-shadow")}}. Zu beachten ist insbesondere, dass {{cssxref("background-image")}} ignoriert wird, sowie alle anderen Eigenschaften.</p> + +<div class="note"> +<p>{{cssxref("text-shadow")}} in <code>::selection</code> wird von Chrome, Safari und Firefox 17+ unterstützt.</p> +</div> + +<p class="note">Obwohl dieses Pseudoelement in Entwürfen von CSS Selektoren Level 3 war, wurde es während der Candidate Recommendation Phase entfernt, da sein Verhalten nicht genau definiert erschien, besonders in Beziehung zu verschachtelten Elementen, und Interoperabilität war nicht gegeben <a class="external" href="http://lists.w3.org/Archives/Public/www-style/2008Oct/0268.html">(auf Grundlage einer Diskussion in der W3C Style Mailingliste)</a>.<br> + <br> + Das <code>::selection</code> Pseudoelement wurde in <a href="http://dev.w3.org/csswg/css-pseudo-4/">Pseudo-Elements Level 4</a> wieder hinzugefügt.</p> + +<h2 id="Beispiel">Beispiel</h2> + +<p>Gecko ist die einzige Engine, die einen Präfix benötigt. Dadurch, dass die CSS Parsingregeln verlangen, dass die gesamte Regel verworfen wird, falls ein ungültiges Pseudoelement gefunden wird, müssen zwei separate Regeln geschrieben werden: <code>::-moz-selection, ::selection {...}</code>. Die Regel würde von nicht-Gecko Browsern verworfen werden, da <code>::-moz-selection</code> für sie ungültig ist.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div>Dies ist etwas Text für dich, um CSS' ::selection Pseudoklasse zu testen.</div> +<p>Versuche auch, etwas Text in diesem &lt;p&gt;</p> zu markieren</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">/* Zeichnet jeden markierten Text gelb auf rotem Hintergrund */ +::-moz-selection { + color: gold; background: red; +} + +::selection { + color: gold; background: red; +} + +/* Zeichnet markierten Text innerhalb von Absätzen weiß auf schwarz */ +p::-moz-selection { + color: white; + background: black; +} + +p::selection { + color: white; + background: black; +}</pre> + +<h4 id="Output">Output</h4> + +<p>{{EmbedLiveSample('Beispiel')}}</p> + +<h2 id="Spezifikationen">Spezifikationen</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('CSS4 Pseudo-Elements', '#selectordef-selection', '::selection')}}</td> + <td>{{Spec2('CSS4 Pseudo-Elements')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<p>Das <code>::selection</code> CSS Pseudoelement wurde für <em>CSS Selectors Level 3</em> entworfen, aber entfernt bevor die Spezifikation Empfehlungsstatus erreicht hat. Es wurde als Teil des <em>Pseudo-Elements Level 4</em> Entwurfs wieder hinzugefügt.</p> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{Compat("css.selectors.selection")}}</p> diff --git a/files/de/web/css/alias/index.html b/files/de/web/css/alias/index.html new file mode 100644 index 0000000000..992dcda304 --- /dev/null +++ b/files/de/web/css/alias/index.html @@ -0,0 +1,10 @@ +--- +title: alias +slug: Web/CSS/Alias +tags: + - CSS +translation_of: Web/CSS/cursor +--- +<p>Der <code>alias</code> {{cssxref("cursor")}} Wert wird verwendet, um einen Alias oder ein Kürzel zu etwas, das erstellt wird, zu kennzeichnen. Der Aliaszeiger wird als ein Pfeil mit einem kleinen kurvigen Pfeil daneben dargestellt.</p> + +<p>In Windows könnte der <code>alias</code> Zeiger so aussehen: <img alt="Image:Cursor-moz_alias.png" class="internal" src="/@api/deki/files/160/=Cursor-moz_alias.png" style="border: medium dotted;"></p> diff --git a/files/de/web/css/align-content/index.html b/files/de/web/css/align-content/index.html new file mode 100644 index 0000000000..d899a26cfd --- /dev/null +++ b/files/de/web/css/align-content/index.html @@ -0,0 +1,212 @@ +--- +title: align-content +slug: Web/CSS/align-content +tags: + - CSS + - CSS Eigenschaft + - CSS Flexible Boxes + - Layout + - Referenz +translation_of: Web/CSS/align-content +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>align-content</code> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft richtet Flexcontainer Zeilen innerhalb des Flexcontainers aus, falls zusätzlicher Leerraum auf der Querachse zur Verfügung steht.</p> + +<p>Diese Eigenschaft hat keine Auswirkung auf einzeilige Flexboxen.</p> + +<div>{{cssinfo}}</div> + +<p>Siehe die <a href="/de/docs/Web/Guide/CSS/Flexible_boxes" title="/en/CSS/Using_CSS_flexible_boxes">Verwendung von flexiblen Boxen</a> für mehr Informationen.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: css">/* Packe Zeilen an den Start der Querachse */ +align-content: flex-start; + +/* Packe Zeilen an das Ende der Querachse */ +align-content: flex-end; + +/* Packe Zeilen um die Mitte der Querachse */ +align-content: center; + +/* Verteile Zeilen entlang der Querachse, Start und Ende */ +align-content: space-between; + +/* Verteile Zeilen gleichmäßig entlang der Querachse */ +align-content: space-around; + +/* Strecke Zeilen, um die gesamte Querachse auszufüllen */ +align-content: stretch; + +/* Globale Werte */ +align-content: inherit; +align-content: initial; +align-content: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code>flex-start</code></dt> + <dd>Zeilen werden an den Start der Querachse gepackt. Der Querachsenstartrand der ersten Zeile und des Flexcontainers grenzen aneinander. Jede folgende Zeile grenzt die vorherige.</dd> + <dt><code>flex-end</code></dt> + <dd>Zeilen werden an das Ende der Querachse gepackt. Der Querachsenstartrand der letzten Zeile und des Flexcontainers grenzen aneinander. Jede vorhergehende Zeile grenzt die nächste.</dd> + <dt><code>center</code></dt> + <dd>Zeilen werden in die Mitte der Querachse gepackt. Die Zeilen grenzen aneinander und werden mittig innerhalb des des Flexcontainers ausgerichtet. Leerräume zwischen dem Querachsenstartrand des Flexcontainers und der ersten Zeile und zwischen dem Querachsenendrand des Flexcontainers und der letzten Zeile sind gleich.</dd> + <dt><code>space-between</code></dt> + <dd>Zeilen werden gleichmäßig innerhalb des Flexcontainers verteilt. Die Abstände werden so verteilt, dass sie zwischen zwei angrenzenden Elementen gleich sind. Querachsenstartrand und -endrand des Flexcontainers grenzen an den Rand der ersten bzw. letzten Zeile.</dd> + <dt><code>space-around</code></dt> + <dd>Zeilen werden gleichmäßig innerhalb des Flexcontainers verteilt, sodass die Leerräume zwischen zwei angrenzenden Zeilen gleich sind. Der Leerraum vor der ersten und nach der letzten Zeile entspricht der Hälfte des Leerraums zwischen zwei angrenzenden Zeilen.</dd> + <dt><code>stretch</code></dt> + <dd>Zeilen dehnen sich aus, um den verbleibenden Leerraum auszunutzen. Der Freiraum wird gleichmäßig auf alle Zeilen aufgeteilt.</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<p><strong>HTML:</strong></p> + +<pre class="brush: html"><div id="container"> + <p>align-content: flex-start</p> + <div id="flex-start"> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + </div> + <p>align-content: center</p> + <div id="center"> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + </div> + <p>align-content: flex-end</p> + <div id="flex-end"> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + </div> + <p>align-content: space-between</p> + <div id="space-between"> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + </div> + <p>align-content: space-around</p> + <div id="space-around"> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + </div> + <p>align-content: stretch</p> + <div id="stretch"> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + </div> +</div></pre> + +<p><strong>CSS:</strong></p> + +<pre class="brush: css">#container > div { + display: flex; + flex-flow: row wrap; + width: 140px; + height: 140px; + background: linear-gradient(-45deg, #78ff8c, #b4ffc8); +} + +#container > div > div { + margin: 2px; + width: 30px; + min-height: 30px; + background: linear-gradient(-45deg, #788cff, #b4c8ff); +} + +#flex-start { + align-content: flex-start; +} + +#center { + align-content: center; +} + +#flex-end { + align-content: flex-end; +} + +#space-between { + align-content: space-between; +} + +#space-around { + align-content: space-around; +} + +#stretch { + align-content: stretch; +}</pre> + +<p>Ergibt:</p> + +<p>{{ EmbedLiveSample('Beispiele', 600, 550) }}</p> + +<h2 id="Spezifikationen">Spezifikationen</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 Flexbox', '#align-content', 'align-content')}}</td> + <td>{{Spec2('CSS3 Flexbox')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<h3 id="Support_im_Flex-Layout">Support im Flex-Layout</h3> + +<p>{{Compat("css.properties.align-content.flex_context")}}</p> + +<h3 id="Support_im_Grid-Layout">Support im Grid-Layout</h3> + +<p>{{Compat("css.properties.align-content.grid_context")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/Guide/CSS/Flexible_boxes" title="CSS/Using_CSS_flexible_boxes">Verwenden von CSS Flexible Boxes</a></li> +</ul> + +<div>{{CSSRef}}</div> diff --git a/files/de/web/css/align-items/index.html b/files/de/web/css/align-items/index.html new file mode 100644 index 0000000000..169081934b --- /dev/null +++ b/files/de/web/css/align-items/index.html @@ -0,0 +1,107 @@ +--- +title: align-items +slug: Web/CSS/align-items +tags: + - CSS + - CSS Eigenschaft + - CSS Flexible Boxes + - Layout + - NeedsExample + - Referenz + - Web +translation_of: Web/CSS/align-items +--- +<p>{{ CSSRef("CSS Flexible Boxes") }}</p> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>align-items</code> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft richtet Flexelemente der aktuellen Flexlinie genauso wie {{cssxref("justify-content")}} aus, jedoch in senkrechter Richtung.</p> + +<p>{{cssinfo}}</p> + +<p>Siehe die <a class="new" href="https://developer.mozilla.org/de/docs/Web/Guide/CSS/Flexible_boxes">Verwendung von CSS Flexible Boxes</a> für weitere Eigenschaften und Informationen.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">/* Am Kreuzungsstart ausrichten */ +align-items: flex-start; + +/* Am Kreuzungsende ausrichten */ +align-items: flex-end; + +/* Elemente um die Kreuzungsachse zentrieren */ +align-items: center; + +/* Basislinien der Elemente ausrichten */ +align-items: baseline; + +/* Elemente dehnen, um sie einzupassen */ +align-items: stretch; + +/* Globale Werte */ +align-items: inherit; +align-items: initial; +align-items: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code>flex-start</code></dt> + <dd>Der Rand der Querachse des Flexelements grenzt an den Startrand der Querachse der Zeile.</dd> + <dt><code>flex-end</code></dt> + <dd>Der Rand der Querachse des Flexelements grenzt an den Endrand der Querachse der Zeile.</dd> + <dt><code>center</code></dt> + <dd>Die Außenabstandsbox des Flexelements wird innerhalb der Zeile auf der Querachse zentriert. Falls die vertikale Größe des Elements größer ist als der Flexcontainer, überragt es die Ränder gleichmäßig in beiden Richtungen.</dd> + <dt><code>baseline</code></dt> + <dd>Alle Flexelemente werden an deren Grundlinien ausgerichtet. Das Element mit dem größten Abstand zwischen seinem Startrand der Querachse und der Grundlinie grenzt an den Startrand der Zeile.</dd> + <dt><code>stretch</code></dt> + <dd>Flexelemente werden gedehnt, sodass die horizontale Größe der Außenabstandsbox des Elements mit der Zeile übereinstimmt, wobei Breiten- und Höhenbegrenzungen berücksichtigt werden.</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<p>{{ TODO() }}</p> + +<h2 id="Specifications" name="Specifications">Spezifikationen</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 Flexbox', '#align-items', 'align-items') }}</td> + <td>{{ Spec2('CSS3 Flexbox') }}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<h3 id="Support_im_Flex-Layout">Support im Flex-Layout</h3> + +<p>{{Compat("css.properties.align-items.flex_context")}}</p> + +<h3 id="Support_im_Grid-Layout">Support im Grid-Layout</h3> + +<p>{{Compat("css.properties.align-items.grid_context")}}</p> + +<p>[1] Firefox unterstützt bis Version 28 nur einzeiliges Flexbox Layout. Um Flexbox Unterstützung für Firefox 18 und 19 zu aktivieren, muss die Einstellung <code>layout.css.flexbox.enabled</code> in <code>about:config</code> auf <code>true</code> gesetzt werden.</p> + +<p>[2] In Internet Explorer 10-11 (aber nicht 12+), falls Spaltenflexelemente <code>align-items: center;</code> gesetzt haben und ihr Inhalt zu groß ist, überfließen sie die Grenzen ihres Containers. Siehe <a href="https://github.com/philipwalton/flexbugs#2-column-flex-items-set-to-align-itemscenter-overflow-their-container">Flexbug #2</a> für mehr Informationen.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a class="new" href="https://developer.mozilla.org/de/docs/Web/Guide/CSS/Flexible_boxes" title="CSS/Using_CSS_flexible_boxes">Verwendung von CSS Flexible Boxes</a></li> +</ul> diff --git a/files/de/web/css/align-self/index.html b/files/de/web/css/align-self/index.html new file mode 100644 index 0000000000..6f20312ee8 --- /dev/null +++ b/files/de/web/css/align-self/index.html @@ -0,0 +1,95 @@ +--- +title: align-self +slug: Web/CSS/align-self +tags: + - CSS + - CSS Eigenschaft + - CSS Flexible Boxes + - Layout + - NeedsExample + - Referenz +translation_of: Web/CSS/align-self +--- +<p>{{CSSRef}}</p> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>align-self</code> <a href="/de/docs/Web/CSS" title="CSS">CSS</a> Eigenschaft richtet Flexelemente der aktuellen Flexzeile aus und überschreibt dabei den Wert von {{cssxref("align-items")}}. Falls der Querachsenabstand irgendeines Flexelements auf <code>auto</code> gesetzt ist, wird <code>align-self</code> ignoriert.</p> + +<p>{{cssinfo}}</p> + +<p>Siehe die <a class="new" href="/de/docs/Web/Guide/CSS/Flexible_boxes">Verwendung von CSS Flexible Boxes</a> für weitere Eigenschaften und Informationen.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">/* Schlüsselwort Werte */ +align-self: auto +align-self: flex-start +align-self: flex-end +align-self: center +align-self: baseline +align-self: stretch + +/* Globale Werte */ +align-self: inherit; +align-self: initial; +align-self: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>Verwendet den {{cssxref("align-items") }} Wert des Elternelements oder <code>stretch</code>, falls das Element kein Elternelement besitzt.</dd> + <dt><code>flex-start</code></dt> + <dd>Der Rand der Querachse des Flexelements grenzt an den Startrand der Querachse der Zeile.</dd> + <dt><code>flex-end</code></dt> + <dd>Der Rand der Querachse des Flexelements grenzt an den Endrand der Querachse der Zeile.</dd> + <dt><code>center</code></dt> + <dd>Die Außenabstandsbox des Flexelements wird innerhalb der Zeile auf der Querachse zentriert. Falls die vertikale Größe des Elements größer ist als der Flexcontainer, überragt es die Ränder gleichmäßig in beiden Richtungen.</dd> + <dt><code>baseline</code></dt> + <dd>Alle Flexelemente werden an deren Grundlinien ausgerichtet. Das Element mit dem größten Abstand zwischen seinem Startrand der Querachse und der Grundlinie grenzt an den Startrand der Zeile.</dd> + <dt><code>stretch</code></dt> + <dd>Flexelemente werden gedehnt, sodass die horizontale Größe der Außenabstandsbox des Elements mit der Zeile ist übereinstimmt, wobei Breiten- und Höhenbegrenzungen berücksichtigt werden.</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Spezifikationen">Spezifikationen</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 Box Alignment', '#align-self-property', 'align-self') }}</td> + <td>{{ Spec2('CSS3 Box Alignment') }}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<h3 id="Support_im_Flex-Layout">Support im Flex-Layout</h3> + +<p>{{Compat("css.properties.align-self.flex_context")}}</p> + +<h3 id="Support_im_Grid-Layout">Support im Grid-Layout</h3> + +<p>{{Compat("css.properties.align-self.grid_context")}}</p> + +<p>[1] Firefox unterstützt bis Version 28 nur einzeiliges Flexbox Layout. Um Flexbox Unterstützung für Firefox 18 und 19 zu aktivieren, muss die Einstellung <code>layout.css.flexbox.enabled</code> in <code>about:config</code> auf <code>true</code> gesetzt werden.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a class="new" href="/de/docs/Web/Guide/CSS/Flexible_boxes" title="CSS/Using_CSS_flexible_boxes">Verwendung von CSS Flexible Boxes</a></li> +</ul> diff --git a/files/de/web/css/all/index.html b/files/de/web/css/all/index.html new file mode 100644 index 0000000000..5e2b7191e8 --- /dev/null +++ b/files/de/web/css/all/index.html @@ -0,0 +1,140 @@ +--- +title: all +slug: Web/CSS/all +tags: + - CSS + - CSS Cascade + - CSS Eigenschaft + - Layout + - Referenz +translation_of: Web/CSS/all +--- +<p>{{CSSRef}}</p> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>all</code> <a href="/de/docs/Web/CSS" title="CSS">CSS</a> Kurzform Eigenschaft setzt alle Eigenschaften mit Ausnahme von {{cssxref("unicode-bidi")}} und {{cssxref("direction")}} auf ihren ursprünglichen oder vererbten Wert zurück.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">all: initial; +all: inherit; +all: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code>initial</code></dt> + <dd>Dieses Schlüsselwort gibt an, dass alle dem Element oder dem Elternelement zugewiesenen Eigenschaften auf deren ursprünglichen Wert geändert werden sollen. {{cssxref("unicode-bidi")}} und {{cssxref("direction")}} Werte sind davon nicht betroffen.</dd> + <dt><code>inherit</code></dt> + <dd>Dieses Schlüsselwort gibt an, dass alle dem Element oder dem Elternelement zugewiesenen Eigenschaften auf den Wert des Elternelements geändert werden sollen. {{cssxref("unicode-bidi")}} und {{cssxref("direction")}} Werte sind davon nicht betroffen.</dd> + <dt><code>unset</code></dt> + <dd>Dieses Schlüsselwort gibt an, dass alle dem Element oder dem Elternelement zugewiesenen Eigenschaften auf den Wert des Elternelements geändert werden sollen, falls sie vererbbar sind, ansonsten auf ihren ursprünglichen Wert. {{cssxref("unicode-bidi")}} und {{cssxref("direction")}} Werte sind davon nicht betroffen.</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<p id="HTML"><strong>HTML</strong></p> + +<pre class="brush: html"><blockquote id="quote">Lorem ipsum dolor sit amet.</blockquote> Phasellus eget velit sagittis.</pre> + +<p id="CSS"><strong>CSS</strong></p> + +<pre class="brush: css">html { + font-size: small; + background-color: #F0F0F0; + color: blue; +} + +blockquote { + background-color: skyblue; + color: red; +} +</pre> + +<p>Ergibt:</p> + +<div id="Beispiel0" style="display: inline-block; width: 225px; vertical-align: top;"> +<h4 id="Keine_all_Eigenschaft">Keine <code>all</code> Eigenschaft</h4> + +<pre class="brush: html" style="display: none;"><blockquote id="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> Phasellus eget velit sagittis.</pre> + +<pre class="brush: css" style="display: none;">html { font-size: small; background-color: <span class="st">#F0F0F0</span>; color:blue; } +blockquote { background-color: skyblue; color: red; }</pre> +{{EmbedLiveSample("Beispiel0", "200", "125")}} + +<p>Das {{HTMLElement("blockquote")}} Element verwendet die Standarddarstellung des Browsers zusammen mit einer angepassten Hintergrund- und Textfarbe. Es verhält sich auch wie ein <em>Blockelement</em>: Der Text, der ihm folgt, wird unter ihm angezeigt.</p> +</div> + +<div id="Beispiel1" style="display: inline-block; width: 225px; vertical-align: top;"> +<h4 id="allunset"><code>all:unset</code></h4> + +<pre class="brush: html" style="display: none;"><blockquote id="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> Phasellus eget velit sagittis.</pre> + +<pre class="brush: css" style="display: none;">html { font-size: small; background-color: <span class="st">#F0F0F0</span>; color:blue; } +blockquote { background-color: skyblue; color: red; } +blockquote { all: unset; }</pre> +{{EmbedLiveSample("Beispiel1", "200", "125")}} + +<p>Das {{HTMLElement("blockquote")}} Element verwendet nicht die Standarddarstellung des Browsers: Es ist jetzt ein <em>Inlineelement</em> (ursprünglicher Wert), seine {{cssxref("background-color")}} Eigenschaft ist <code>transparent</code> (ursprünglicher Wert), aber seine {{cssxref("font-size")}} Eigenschaft ist immer noch <code>small</code> (vererbter Wert) und seine {{cssxref("color")}} Eigenschaft ist <code>blue</code> (vererbter Wert).</p> +</div> + +<div id="Beispiel2" style="display: inline-block; width: 225px; vertical-align: top;"> +<h4 id="allinitial"><code>all:initial</code></h4> + +<pre class="brush: html" style="display: none;"><blockquote id="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> Phasellus eget velit sagittis.</pre> + +<pre class="brush: css" style="display: none;">html { font-size: small; background-color: <span class="st">#F0F0F0</span>; color:blue; } +blockquote { background-color: skyblue; color: red; } +blockquote { all: initial; }</pre> +{{EmbedLiveSample("Beispiel2", "200", "125")}} + +<p>Das {{HTMLElement("blockquote")}} Element verwendet nicht die Standarddarstellung des Browsers: Es ist jetzt ein <em>Inlineelement</em> (ursprünglicher Wert), seine {{cssxref("background-color")}} Eigenschaft ist <code>transparent</code> (ursprünglicher Wert), seine {{cssxref("font-size")}} Eigenschaft ist <code>normal</code> (ursprünglicher Wert) und seine {{cssxref("color")}} Eigenschaft ist <code>black</code> (ursprünglicher Wert).</p> +</div> + +<div id="Beispiel3" style="display: inline-block; width: 225px; vertical-align: top;"> +<h4 id="allinherit"><code>all:inherit</code></h4> + +<pre class="brush: html" style="display: none;"><blockquote id="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> Phasellus eget velit sagittis.</pre> + +<pre class="brush: css" style="display: none;">html { font-size: small; background-color: <span class="st">#F0F0F0</span>; color:blue; } +blockquote { background-color: skyblue; color: red; } +blockquote { all: inherit; }</pre> +{{EmbedLiveSample("Beispiel3", "200", "125")}} + +<p>Das {{HTMLElement("blockquote")}} Element verwendet nicht die Standarddarstellung des Browsers: Es ist jetzt ein <em>Blockelement</em> (vererbter Wert seines beinhaltenden {{HTMLElement("div")}}), seine {{cssxref("background-color")}} Eigenschaft ist <code>transparent</code> (vererbter Wert), seine {{cssxref("font-size")}} Eigenschaft ist <code>small</code> (vererbter Wert) und seine {{cssxref("color")}} Eigenschaft ist <code>blue</code> (vererbter Wert).</p> +</div> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Anmerkung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Cascade', '#all-shorthand', 'all') }}</td> + <td>{{ Spec2('CSS3 Cascade') }}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{Compat("css.properties.all")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<p>Die CSS-weiten Eigenschaften {{cssxref("initial")}}, {{cssxref("inherit")}} und {{cssxref("unset")}}.</p> diff --git a/files/de/web/css/alternative_style_sheets/index.html b/files/de/web/css/alternative_style_sheets/index.html new file mode 100644 index 0000000000..c03fa0ba1e --- /dev/null +++ b/files/de/web/css/alternative_style_sheets/index.html @@ -0,0 +1,47 @@ +--- +title: Alternative Style Sheets +slug: Web/CSS/Alternative_style_sheets +tags: + - CSS + - NeedsCompatTable +translation_of: Web/CSS/Alternative_style_sheets +--- +<p>Firefox unterstützt <em>alternative Stylesheets</em>. Seiten, die alternative Stylesheets anbieten, erlauben es dem Benutzer, über das Untermenü <em>Ansicht</em> > <em>Webseiten-Stil</em> den Stil auszuwählen, in dem die Seite angezeigt werden soll. Dies ermöglicht es Benutzern, basierend auf deren Bedürfnissen oder Vorlieben mehrere Versionen einer Seite zu sehen.</p> + +<p>Eine Webseite kann das {{HTMLElement("link")}} verwenden, um alternative Stylesheets zu einem Dokument hinzuzufügen.</p> + +<p>Zum Beispiel:</p> + +<pre class="eval"> <link href="default.css" rel="stylesheet" type="text/css" title="Standardstil"> + <link href="fancy.css" rel="alternate stylesheet" type="text/css" title="Modisch"> + <link href="basic.css" rel="alternate stylesheet" type="text/css" title="Schlicht"> +</pre> + +<p>Mittels dieser drei Stylesheets werden die Stile "Standardstil", "Modisch" und "Schlicht" im Webseiten-Stil Untermenü aufgelistet. Wenn der Benutzer einen Stil auswählt, wird die Darstellung der Seite sofort anhand des Stylesheets neu aufgebaut.</p> + +<p>Wenn Stylesheets über ein <code>title</code> Attribut im {{HTMLElement("link")}} oder {{HTMLElement("style")}} Element referenziert werden, wird der Titel dem Benutzer als Auswahlmöglichkeit angeboten. Stylesheets, die mit demselben Titel eingebunden werden, sind Teil der gleichen Auswahl. Stylesheets, die ohne ein <code>title</code> Attribut eingebunden werden, werden immer angewandt.</p> + +<p><code>rel="stylesheet"</code> kann dazu verwendet werden, zum Standardstil zu verlinken, und <code>rel="alternate stylesheet"</code>, um alternative Stylesheets zu verlinken. Dies teilt Firefox mit, welcher Stylesheet Titel standardmäßig ausgewählt werden soll und weist diese Standardauswahl in Browsern zu, die alternative Stylesheets nicht unterstützen.</p> + +<h2 id="Livebeispiel">Livebeispiel</h2> + +<p><a href="/samples/cssref/altstyles/index.html">Hier klicken</a>, um ein funktionierendes Beispiel auszuprobieren.</p> + +<h2 id="Spezifikationen">Spezifikationen</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("HTML4.01", "present/styles.html#h-14.3", "Alternative style sheets")}}</td> + <td>{{Spec2("HTML4.01")}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> diff --git a/files/de/web/css/angle-percentage/index.html b/files/de/web/css/angle-percentage/index.html new file mode 100644 index 0000000000..6c6f726144 --- /dev/null +++ b/files/de/web/css/angle-percentage/index.html @@ -0,0 +1,50 @@ +--- +title: <angle-percentage> +slug: Web/CSS/angle-percentage +tags: + - CSS + - CSS Datentyp + - Einheiten + - Werte + - angle-percentage +translation_of: Web/CSS/angle-percentage +--- +<div>{{CSSRef}}</div> + +<p>Der <strong><code><angle-percentage></code></strong> <a href="/de/docs/Web/CSS">CSS</a>-<a href="/de/docs/Web/CSS/CSS_Types">Datentyp</a> stellt einen Wert dar, der entweder {{Cssxref("angle")}} oder ein {{Cssxref("percentage")}} sein kann.</p> + +<h2 id="Syntax">Syntax</h2> + +<p>Für <code><angle-percentage></code>-Werte sind alle Werte syntaktisch gültig, die auch bei {{Cssxref("angle")}} oder {{Cssxref("percentage")}} syntaktisch gültig sind.</p> + +<h2 id="Verwendung_mit_calc">Verwendung mit calc()</h2> + +<p>Wenn <code><angle-percentage></code> ein zulässiger Typ ist, dann wird aus einem Prozentwert ein einfacher {{Cssxref("angle")}} errechnet. Daher kann <code><angle-percentage></code> in einem {{Cssxref("calc()")}}-Ausdruck verwendet werden.</p> + +<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', '#mixed-percentages', '<angle-percentage>')}}</td> + <td>{{Spec2('CSS4 Values')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('CSS3 Values', '#mixed-percentages', '<angle-percentage>')}}</td> + <td>{{Spec2('CSS3 Values')}}</td> + <td>Definiert <code><angle-percentage></code>. <code>calc()</code> hinzugefügt.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2> + +<p>{{Compat("css.types.angle-percentage")}}</p> diff --git a/files/de/web/css/angle/index.html b/files/de/web/css/angle/index.html new file mode 100644 index 0000000000..4003605ed4 --- /dev/null +++ b/files/de/web/css/angle/index.html @@ -0,0 +1,86 @@ +--- +title: <angle> +slug: Web/CSS/angle +tags: + - CSS + - CSS Data Type + - Layout + - NeedsMobileBrowserCompatibility + - Referenz + - Web +translation_of: Web/CSS/angle +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Der <a href="/de/CSS" title="CSS">CSS</a> Datentyp <code><angle></code> steht für einen Winkel. Dieser kann positiv (rechts, im Uhrzeigersinn) oder negativ (links, gegen den Uhrzeigersinn) sein. Ein Winkel besteht immer aus einer {{cssxref("<number>")}}, gefolgt von einer Einheit (<code>deg</code>, <code>grad</code>, <code>rad</code> or <code>turn</code>). Wie auch bei anderen Werten mit Einheiten darf dazwischen kein Leerschlag sein.</p> + +<p>Für statische Elemente können mehrere Schreibweisen zum selben Ergebnis führen (bspw. <code>90deg</code> und <code>-270deg</code> oder <code>1turn</code> und <code>4turn</code>), bei dynamischen Eigenschaften wie zum Beispiel {{ cssxref("transition") }} kann die Schreibweise jedoch eine Auswirkung auf die Animation haben.</p> + +<p>Die folgenden Einheiten können verwendet werden:</p> + +<dl> + <dt><code><a id="deg">deg</a></code></dt> + <dd>definiert einen Winkel in <a class="external" href="https://de.wikipedia.org/wiki/Grad_(Winkel)" title="http://en.wikipedia.org/wiki/Degree_%28angle%29">Grad</a>. Ein voller Kreis hat <code>360deg</code>.</dd> + <dt><code><a id="grad">grad</a></code></dt> + <dd>definiert einen Winkel in <a class="external" href="https://de.wikipedia.org/wiki/Gon" title="http://en.wikipedia.org/wiki/Gradian">Gon</a>. Ein voller Kreis hat <code>400grad</code>. + <div class="warning"><strong>Achtung:</strong> Nicht zu verwechseln mit <a href="/de/docs/Web/CSS/angle#deg">Grad (siehe <code>deg</code>)</a>.</div> + </dd> + <dt><code><a id="rad">rad</a></code></dt> + <dd>definiert einen Winkel in <a class="external" href="https://de.wikipedia.org/wiki/Radiant_%28Einheit%29" title="http://en.wikipedia.org/wiki/Radian">Radiant</a>en. Ein voller Kreis hat 2π Radianten, das entspricht etwa <code>6.2832rad</code>. <code>1rad</code> entspricht 180/π Grad.</dd> + <dt><code><a id="turn">turn</a></code></dt> + <dd>definiert einen Winkel in der Anzahl Umdrehungen. Ein voller Kreis besteht aus <code>1turn</code>.</dd> +</dl> + +<p>Alle Einheiten können auch den Wert <code>0</code> (oder <code>0deg</code>, <code>0grad</code>, <code>0rad</code>, <code>0turn</code>) annehmen, welcher unabhängig der Einheit immer dasselbe Ergebnis erzielt.</p> + +<h2 id="Specifications" name="Specifications">Beispiele</h2> + +<table style="width: 100%;"> + <tbody> + <tr> + <td><img alt="Angle90.png" class="default internal" src="/@api/deki/files/5704/=Angle90.png"></td> + <td> + <p>Ein rechter Winkel (nach rechts, im Uhrzeigersinn): <code>90deg = 100grad = 0.25turn</code> <code style="white-space: nowrap;">≈</code><code> 1.5708rad</code></p> + </td> + </tr> + <tr> + <td><img alt="Angle180.png" class="default internal" src="/@api/deki/files/5706/=Angle180.png"></td> + <td>Ein flacher Winkel: <code>180deg = 200grad = 0.5turn</code><code> </code><code style="white-space: nowrap;">≈</code><code> 3.1416rad</code></td> + </tr> + <tr> + <td><img alt="AngleMinus90.png" class="default internal" src="/@api/deki/files/5707/=AngleMinus90.png"></td> + <td>Ein rechter Winkel (nach links, gegen den Uhrzeigersinn): <code>-90deg = -100grad = -0.25turn</code> <code style="white-space: nowrap;">≈</code><code> -1.5708rad</code></td> + </tr> + <tr> + <td><img alt="Angle0.png" class="default internal" src="/@api/deki/files/5708/=Angle0.png"></td> + <td> + <p>Ein Nullwinkel: <code>0 = 0deg = 0grad = 0turn</code><code> </code><code style="white-space: nowrap;">=</code><code> 0rad</code></p> + </td> + </tr> + </tbody> +</table> + +<h2 id="Specifications" name="Specifications">Spezifikation</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Anmerkung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Values', '#angles', '<angle>') }}</td> + <td>{{ Spec2('CSS3 Values') }}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{Compat("css.types.angle")}}</p> diff --git a/files/de/web/css/angrenzende_geschwisterselektoren/index.html b/files/de/web/css/angrenzende_geschwisterselektoren/index.html new file mode 100644 index 0000000000..b5ff92dda2 --- /dev/null +++ b/files/de/web/css/angrenzende_geschwisterselektoren/index.html @@ -0,0 +1,88 @@ +--- +title: Angrenzende Geschwisterselektoren +slug: Web/CSS/Angrenzende_Geschwisterselektoren +tags: + - CSS + - CSS Referenz + - NeedsMobileBrowserCompatibility + - Selectors + - Selektoren +translation_of: Web/CSS/Adjacent_sibling_combinator +--- +<p>{{CSSRef("Selectors")}}</p> + +<p>Dies wird Nachbar- oder Nächstes-Geschwister-Element-Selektor genannt. Er selektiert nur das angegebene Element, das dem zuvor angegebenen Element direkt folgt.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>vorheriges_Element</var> + <var>Zielelement</var> { <em>Stileigenschaften</em> } +</pre> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush: css">li:first-of-type + li { + color: red; +} +</pre> + +<pre class="brush: html"><ul> + <li>One</li> + <li>Two</li> + <li>Three</li> +</ul></pre> + +<p>{{EmbedLiveSample('Beispiel', 200, 100)}}</p> + +<p>Ein weiterer Anwendungsfall ist das Stylen von "Beschriftungs-spans" der darauffolgenden {{HTMLElement("img")}} Elemente:</p> + +<pre class="brush: css">img + span.caption { + font-style: italic; +} +</pre> + +<p>matcht die folgenden {{HTMLElement("span")}} Elemente:</p> + +<pre class="brush: html"><img src="photo1.jpg"><span class="caption">The first photo</span> +<img src="photo2.jpg"><span class="caption">The second photo</span> +</pre> + +<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 Selectors', '#adjacent-sibling-combinators', 'next-sibling combinator')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#adjacent-sibling-combinators', 'Adjacent sibling combinator')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#adjacent-selectors', 'Adjacent sibling selectors')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.selectors.adjacent_sibling")}} + +<p>[1] Internet Explorer 7 aktualisiert den Style nicht korrekt, wenn ein Element dynamisch vor einem Element platziert wurde, das auf den Selektor gepasst hat. Wenn in Internet Explorer 8 ein Element durch Klick auf einen Link dynamisch eingefügt wird, wird der <code>:first-child</code>-Stil nicht angewandt bis der Link den Fokus verliert.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/CSS/Allgemeine_Geschwisterselektoren">Allgemeine Geschwisterselektoren</a></li> +</ul> diff --git a/files/de/web/css/animation-delay/index.html b/files/de/web/css/animation-delay/index.html new file mode 100644 index 0000000000..d6dd7702b9 --- /dev/null +++ b/files/de/web/css/animation-delay/index.html @@ -0,0 +1,78 @@ +--- +title: animation-delay +slug: Web/CSS/animation-delay +tags: + - CSS + - CSS Animationen + - CSS Eigenschaft + - Experimentell + - Layout + - Referenz + - Web +translation_of: Web/CSS/animation-delay +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>animation-delay</code> <a href="/en-US/docs/CSS" title="CSS">CSS</a> Eigenschaft gibt an, wann eine Animation starten soll. Dies lässt die Animationssequenz einige Zeit später starten nachdem sie einem Element zugewiesen wurde.</p> + +<p>Ein Wert von <code>0s</code>, welcher der Standardwert für die Eigenschaft ist, gibt an, dass die Animation starten soll sobald sie zugewiesen wird. Andernfalls legt der Wert eine Verzögerung von dem Moment fest, an dem die Animation dem Element zugewiesen wird; die Animation startet um diesen Wert verzögert nachdem sie zugewiesen wurde.</p> + +<p>Falls ein negativer Wert für die Animationsverzögerung zugewiesen wird, wird die Animation sofort ausgeführt. Jedoch wird sie so dargestellt, als ob sie vor dem Animationszyklus begonnen hat. Zum Beispiel, wenn Sie <code>-1s</code> als die Animationsverzögerungszeit angeben, wird die Animation sofort starten, allerdings 1 Sekunde innerhalb der Animationssequenz.</p> + +<p>Falls Sie einen negativen Wert für die Animationsverzögerung angeben, der Startwert jedoch implizit ist, wird der Moment, an dem die Animation dem Element zugewiesen wird, als Startwert verwendet.</p> + +<p>Es ist oft einfacher, die Kurzform Eigenschaft {{cssxref("animation")}} zu verwenden, um alle Animationseigenschaften auf einmal zu setzen.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="twopartsyntaxbox">{{csssyntax}} +</pre> + +<pre>animation-delay: 3s +animation-delay: 2s, 4ms +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code><time></code></dt> + <dd>Der Zeitversatz von dem Zeitpunkt, an dem die Animation dem Element zugewiesen wird, nach dem die Animation starten soll. Dieser kann entweder in Sekunden angegeben werden (mittels <code>s</code> als Einheit) oder in Millisekunden (mittels <code>ms</code> als Einheit). Falls keine Einheit angegeben wird, ist der Ausdruck ungültig.</dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<p>Siehe <a href="/de/docs/Web/Guide/CSS/CSS_Animationen_nutzen" title="CSS/CSS_animations">CSS Animationen</a> für Beispiele.</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 Animations', '#animation-delay', 'animation-delay')}}</td> + <td>{{Spec2('CSS3 Animations')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser-Kompatibilität</h2> + +{{Compat("css.properties.animation-delay")}} + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/Guide/CSS/CSS_Animationen_nutzen" title="Tutorial about CSS animations">CSS Animationen nutzen</a></li> + <li>{{domxref("AnimationEvent", "AnimationEvent")}}</li> +</ul> diff --git a/files/de/web/css/animation-direction/index.html b/files/de/web/css/animation-direction/index.html new file mode 100644 index 0000000000..0f62a3b74f --- /dev/null +++ b/files/de/web/css/animation-direction/index.html @@ -0,0 +1,91 @@ +--- +title: animation-direction +slug: Web/CSS/animation-direction +tags: + - CSS + - CSS Animationen + - CSS Eigenschaft + - Experimentell + - Layout + - Referenz + - Web +translation_of: Web/CSS/animation-direction +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>animation-direction</code> CSS Eigenschaft gibt an, ob die Animation rückwärts oder in Wechelzyklen abgespielt werden soll.</p> + +<p>Es ist oft einfacher, die Kurzschreibweise {{cssxref("animation")}} zu verwenden, um alle Animationseigenschaften auf einmal zu setzen.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">/* Einzelne Animation */ +animation-direction: normal; +animation-direction: reverse; +animation-direction: alternate; +animation-direction: alternate-reverse; + +/* Mehrere Animationen */ +animation-direction: normal, reverse; +animation-direction: alternate, reverse, normal; + +/* Globale Werte */ +animation-direction: inherit; +animation-direction: initial; +animation-direction: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code>normal</code></dt> + <dd>Die Animation wird in jedem Durchlauf vorwärts abgespielt. In anderen Worten, jedesmal, wenn der nächste Zyklus der Animation beginnt, wird die Animation auf den Anfangszustand zurückgesetzt und beginnt erneut. Dies ist die Standardeinstellung der Animationsrichtung.</dd> + <dt><code>alternate</code></dt> + <dd>Die Animation ändert in jedem Durchlauf die Richtung. Wenn die Animation umgekehrt abgespielt wird, werden die Animationsschritte rückwärts ausgeführt. Des weiteren werden Timingfunktionen ebenfalls umgekehrt; zum Beispiel wird eine <code>ease-in</code> Animation durch eine <code>ease-out</code> Animation ersetzt, wenn sie rückwärts abgespielt wird. Die Zählung zur Bestimmung, ob es sich um eine gerade oder ungerade Iteration handelt, beginnt bei eins.</dd> + <dt><code>reverse</code></dt> + <dd>Die Animation wird in jedem Durchlauf rückwärts abgespielt. Jedes Mal, wenn der nächste Zyklus der Animation beginnt, wird die Animation auf den Endzustand zurückgesetzt und beginnt erneut.</dd> + <dt><code>alternate-reverse</code></dt> + <dd>Die Animation wird beim ersten Durchlauf rückwärts abgespielt, beim nächsten vorwärts und fährt danach abwechselnd fort. Die Zählung zur Bestimmung, ob es sich um eine gerade oder ungerade Iteration handelt, beginnt bei eins.</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<p>Siehe <a href="/de/docs/Web/Guide/CSS/CSS_Animationen_nutzen" title="CSS/CSS_animations">CSS Animationen</a> für Beispiele.</p> + +<h2 id="Spezifikationen">Spezifikationen</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 Animations', '#animation-direction', 'animation-direction')}}</td> + <td>{{Spec2('CSS3 Animations')}}</td> + <td>For the two new values, see the <a href="http://lists.w3.org/Archives/Public/www-style/2011May/0090.html">W3C discussion</a>.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{Compat("css.properties.animation-direction")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/Guide/CSS/CSS_Animationen_nutzen" title="Tutorial about CSS animations">CSS Animationen nutzen</a></li> + <li>{{domxref("AnimationEvent", "AnimationEvent")}}</li> +</ul> diff --git a/files/de/web/css/animation-duration/index.html b/files/de/web/css/animation-duration/index.html new file mode 100644 index 0000000000..e602ec194d --- /dev/null +++ b/files/de/web/css/animation-duration/index.html @@ -0,0 +1,79 @@ +--- +title: animation-duration +slug: Web/CSS/animation-duration +tags: + - CSS + - CSS Animationen + - CSS Eigenschaft + - Experimentell + - Layout + - Referenz +translation_of: Web/CSS/animation-duration +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>animation-duration</code> CSS Eigenschaft bestimmt die Ablaufdauer einer Animation.</p> + +<p>Der Standartwert ist <code>0s</code>, somit wird keine Animation ausgeführt.</p> + +<p>Anstelle von <code>animation-duration</code> kann auch die Kurzschreibweise {{ cssxref("animation") }} verwendet werden.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: css">animation-duration: 6s; +animation-duration: 120ms; +animation-duration: 1s, 15s; +animation-duration: 10s, 30s, 230ms; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code><time></code></dt> + <dd>Die Ablaufdauer der Animation wird in Sekunden (<code>s</code>) oder Millisekunden (<code>ms</code>) angegeben. Ohne Angabe einer Masseinheit ist der Wert ungültig. Negative Werte sind nicht zulässig.</dd> +</dl> + +<div class="note"><strong>Hinweis:</strong> Einige ältere Implementierungen mit Präfix interpretieren negative Werte als <code>0s</code>.</div> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<p>Siehe <a href="/en/CSS/CSS_animations" title="en/CSS/CSS_animations">CSS animations</a></p> + +<h2 id="Specifications" name="Specifications">Spezifikation</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Anmerkung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Animations', '#animation-duration', 'animation-duration') }}</td> + <td>{{ Spec2('CSS3 Animations') }}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{Compat("css.properties.animation-duration")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/Guide/CSS/CSS_Animationen_nutzen" title="Tutorial about CSS animations">CSS Animationen nutzen</a></li> + <li>{{domxref("AnimationEvent")}}</li> +</ul> diff --git a/files/de/web/css/animation-fill-mode/index.html b/files/de/web/css/animation-fill-mode/index.html new file mode 100644 index 0000000000..adfb23a43a --- /dev/null +++ b/files/de/web/css/animation-fill-mode/index.html @@ -0,0 +1,145 @@ +--- +title: animation-fill-mode +slug: Web/CSS/animation-fill-mode +tags: + - CSS + - CSS Animationen + - CSS Eigenschaft + - Experimentell + - Referenz +translation_of: Web/CSS/animation-fill-mode +--- +<div>{{ CSSRef() }}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p><code>animation-fill-mode</code> definiert den Zustand einer Animation vor und nach deren Ablauf.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="twopartsyntaxbox">{{csssyntax}} +</pre> + +<pre>animation-fill-mode: none +animation-fill-mode: forwards +animation-fill-mode: backwards +animation-fill-mode: both + +<strong>The # indicates that several values may be given, separated by commas. +Each applies to the animation defined in the same order in </strong>animation-name<code>.</code> +animation-fill-mode: none, backwards +animation-fill-mode: both, forwards, none +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code>none</code></dt> + <dd>Das Element nimmt keine Werte der Animation an.</dd> + <dt><code>forwards</code></dt> + <dd>Das Element nimmt nach Ablauf die Werte des letzten Animationsschrittes an, unter der Berücksichtigung von {{ cssxref("animation-direction") }} und {{ cssxref("animation-iteration-count") }}: + <table class="standard-table"> + <thead> + <tr> + <th scope="col"><code>animation-direction</code></th> + <th scope="col"><code>animation-iteration-count</code></th> + <th scope="col">Letzte keyframe Regel</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>normal</code></td> + <td>gerade oder ungerade</td> + <td><code>100%</code> oder <code>to</code></td> + </tr> + <tr> + <td><code>reverse</code></td> + <td>gerade oder ungerade</td> + <td><code>0%</code> oder <code>from</code></td> + </tr> + <tr> + <td><code>alternate</code></td> + <td>gerade</td> + <td><code>0%</code> oder <code>from</code></td> + </tr> + <tr> + <td><code>alternate</code></td> + <td>ungerade</td> + <td><code>100%</code> oder <code>to</code></td> + </tr> + <tr> + <td><code>alternate-reverse</code></td> + <td>gerade</td> + <td><code>100%</code> oder <code>to</code></td> + </tr> + <tr> + <td><code>alternate-reverse</code></td> + <td>ungerade</td> + <td><code>0%</code> oder <code>from</code></td> + </tr> + </tbody> + </table> + </dd> + <dt><code>backwards</code></dt> + <dd>Das Element nimmt die Werte des ersten Animationsschrittes an und behält diesen auch während der {{ cssxref("animation-delay") }} Zeit. {{ cssxref("animation-direction") }} wird wie folgt gehandhabt: + <table class="standard-table"> + <thead> + <tr> + <th scope="col"><code>animation-direction</code></th> + <th scope="col">Erste keyframe Regel</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>normal</code> oder <code>alternate</code></td> + <td><code>0%</code> oder <code>from</code></td> + </tr> + <tr> + <td><code>reverse</code> oder <code>alternate-reverse</code></td> + <td><code>100%</code> oder <code>to</code></td> + </tr> + </tbody> + </table> + </dd> + <dt><code>both</code></dt> + <dd>Vereint die Werte <span id="cke_bm_70S" style="display: none;"> </span><code>backwards</code><span id="cke_bm_70E" style="display: none;"> </span> und <code>forwards</code>.</dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush: css">h1 { + animation-fill-mode: forwards; +} +</pre> + +<h2 id="Specifications" name="Specifications">Spezifikation</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Anmerkung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Animations', '#animation-fill-mode', 'animation-fill-mode') }}</td> + <td>{{ Spec2('CSS3 Animations') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser Kompatibilität</h2> + +<p>{{Compat("css.properties.animation-fill-mode")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/en-US/docs/CSS/Tutorials/Using_CSS_animations" title="Tutorial about CSS animations">Using CSS animations</a></li> + <li>{{ domxref("AnimationEvent", "AnimationEvent") }}</li> +</ul> diff --git a/files/de/web/css/animation-iteration-count/index.html b/files/de/web/css/animation-iteration-count/index.html new file mode 100644 index 0000000000..a1e7d3c3e9 --- /dev/null +++ b/files/de/web/css/animation-iteration-count/index.html @@ -0,0 +1,75 @@ +--- +title: animation-iteration-count +slug: Web/CSS/animation-iteration-count +tags: + - CSS + - CSS Animationen + - CSS Eigenschaft + - Experimentell + - Referenz +translation_of: Web/CSS/animation-iteration-count +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft <code>animation-iteration-count</code> legt die Anzahl Wiederholungen der Animation fest.</p> + +<p>Meistens wird die Kurzform {{ cssxref("animation") }} genutzt, um alle Eigenschaften der Animation auf einen Blick zu haben.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="twopartsyntaxbox">{{csssyntax}} +</pre> + +<pre>animation-iteration-count: infinite +animation-iteration-count: 3 +animation-iteration-count: 2.3 + +animation-iteration-count: 2, 0, infinite +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code>infinite</code></dt> + <dd>Die Animation wird unbegrenzt wiederholt.</dd> + <dt><code><number></code></dt> + <dd>Die Anzahl Wiederholungen der Animation. Standartmässig ist dieser Wet <code>1</code>. Negative Werte sind nicht zulässig. Es können auch Dezimalzahlen genutzt werden um nur einen Teil der Animation abzuspielen (z. B. <code>0.5</code> spielt die nur die Halbe Animation ab).</dd> +</dl> + +<h2 id="Beispiel">Beispiel</h2> + +<p>Siehe <a href="/en-US/docs/CSS/Using_CSS_animations">CSS Animationen</a>.</p> + +<h2 id="Specifications" name="Specifications">Spezifikation</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Anmerkung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Animations', '#animation-iteration-count', 'animation-iteration-count') }}</td> + <td>{{ Spec2('CSS3 Animations') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser Kompatibilität</h2> + +<p>{{Compat("css.properties.animation-iteration-count")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/en-US/docs/CSS/Tutorials/Using_CSS_animations" title="Tutorial about CSS animations">Using CSS animations</a></li> + <li>{{ domxref("AnimationEvent", "AnimationEvent") }}</li> +</ul> diff --git a/files/de/web/css/animation-name/index.html b/files/de/web/css/animation-name/index.html new file mode 100644 index 0000000000..5b755b8b35 --- /dev/null +++ b/files/de/web/css/animation-name/index.html @@ -0,0 +1,86 @@ +--- +title: animation-name +slug: Web/CSS/animation-name +tags: + - CSS + - CSS Animationen + - CSS Eigenschaft + - Experimentell + - Layout + - Referenz + - Web +translation_of: Web/CSS/animation-name +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>animation-name</code> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft definiert eine Liste von Animationen, welche dem Element zugeortnet werden sollen. Jeder name steht für eine {{cssxref("@keyframes")}} Regel, welche den Ablauf der Animation definiert.</p> + +<p>Meistens wird die Kurzform {{cssxref("animation")}} genutzt, um alle Eigenschaften der Animation auf einen Blick zu haben.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">animation-name: none; +animation-name: test_05; +animation-name: -specific; +animation-name: sliding-vertically; + +animation-name: test1; +animation-name: test1, animation4; +animation-name: none, -moz-specific, sliding; + +/* Globale Werte */ +animation-name: initial; +animation-name: inherit; +animation-name: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code>none</code></dt> + <dd>Keine Animation soll abgespielt werden. Dieser Wert ermöglicht das deaktivieren einer Animation, ohne die dazugehörigen Eigenschaften und Regeln zu ändern.</dd> + <dt><code>IDENT</code></dt> + <dd>Eine beliebige Zeichenkette aus den Buchstaben <code>a</code> bis <code>z</code>, Zahlen <code>0</code> bis <code>9</code>, Bodenstriche (<code>_</code>), und oder Bindestriche (<code>-</code>). Das erste Zeichen muss ein Buchstabe oder einer der beiden zugelassenen Striche sein. Es dürfen nicht zwei hintereinandeflogende Striche am Anfang stehen.</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<p>Siehe <a href="/de/docs/Web/Guide/CSS/CSS_Animationen_nutzen" title="CSS/CSS_animations">CSS Animationen</a> für Beispiele.</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Anmerkung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Animations', '#animation-name', 'animation-name')}}</td> + <td>{{Spec2('CSS3 Animations')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{Compat("css.properties.animation-name")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/Guide/CSS/CSS_Animationen_nutzen" title="Tutorial about CSS animations">CSS Animationen nutzen</a></li> + <li>{{domxref("AnimationEvent", "AnimationEvent")}}</li> +</ul> diff --git a/files/de/web/css/animation-play-state/index.html b/files/de/web/css/animation-play-state/index.html new file mode 100644 index 0000000000..7520037251 --- /dev/null +++ b/files/de/web/css/animation-play-state/index.html @@ -0,0 +1,84 @@ +--- +title: animation-play-state +slug: Web/CSS/animation-play-state +tags: + - CSS + - CSS Animationen + - CSS Eigenschaft + - Experimentell + - Layout + - Referenz + - Web +translation_of: Web/CSS/animation-play-state +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>animation-play-state</code> <a href="/de/docs/Web/CSS" title="CSS">CSS</a> Eigenschaft bestimmt, ob eine Animation abläuft oder pausiert ist. Der Wert dieser Eigenschaft kann abgefragt werden, um festzustellen, ob die Animation gerade abläuft oder nicht; darüber hinaus kann der Wert auch gesetzt werden, um die das Abspielen der Animation anzuhalten und fortzusetzen.</p> + +<p>Wenn eine pausierte Animation fortgesetzt wird, wird sie dort gestartet, wo sie angehalten wurde, nicht vom Anfang der Animationssequenz.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: css notranslate">/* Einzelne Animation */ +animation-play-state: running; +animation-play-state: paused; + +/* Mehrere Animationen */ +animation-play-state: paused, running, running; + +/* Globale Werte */ +animation-play-state: inherit; +animation-play-state: initial; +animation-play-state: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code>running</code></dt> + <dd>Die Animation läuft aktuell ab.</dd> + <dt><code>paused</code></dt> + <dd>Die Animation ist aktuell pausiert.</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<p>Siehe <a href="/de/docs/Web/Guide/CSS/CSS_Animationen_nutzen" title="CSS/CSS_animations">CSS Animationen</a> für Beispiele.</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Anmerkung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Animations', '#animation-play-state', 'animation-play-state')}}</td> + <td>{{Spec2('CSS3 Animations')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{Compat("css.properties.animation-play-state")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/Guide/CSS/CSS_Animationen_nutzen" title="Tutorial about CSS animations">CSS Animationen nutzen</a></li> + <li>{{domxref("AnimationEvent", "AnimationEvent")}}</li> +</ul> diff --git a/files/de/web/css/animation-timing-function/index.html b/files/de/web/css/animation-timing-function/index.html new file mode 100644 index 0000000000..8f73828d74 --- /dev/null +++ b/files/de/web/css/animation-timing-function/index.html @@ -0,0 +1,93 @@ +--- +title: animation-timing-function +slug: Web/CSS/animation-timing-function +tags: + - CSS + - CSS Animationen + - CSS Eigenschaft + - Layout + - Referenz +translation_of: Web/CSS/animation-timing-function +--- +<p>{{CSSRef}}</p> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>animation-timing-function</code> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft gibt an, wie eine CSS Animation über die Dauer eines Zyklus verlaufen soll. Die möglichen Werte sind eine oder mehrere {{cssxref("<timing-function>")}}.</p> + +<p>Für Schlüsselbildanimationen wird die Timingfunktion zwischen den <a href="/de/docs/Web/CSS/@keyframes">Schlüsselbildern</a> angewandt, anstatt über die gesamte Animation. Mit anderen Worten, die Timingfunktion wird auf den Start des Schlüsselbildes und an dessen Ende angewandt.</p> + +<p>Eine Animationstimingfunktion, die innerhalb eines Schlüsselbildblocks definiert wurde, wird auf dieses Schlüsselbild angewandt. Falls keine Timingfunktion für das Schlüsselbild angegeben wurde, wird die Timingfunktion verwendet, die für die gesamte Animation definiert wurde.</p> + +<p>Es ist oftmals einfacher, die Kurzform Eigenschaft {{cssxref("animation")}} zu verwenden, um alle Animationseigenschaften auf einmal zu setzen.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: css notranslate">/* Schlüsselwortwerte */ +animation-timing-function: ease; +animation-timing-function: ease-in; +animation-timing-function: ease-out; +animation-timing-function: ease-in-out; +animation-timing-function: linear; +animation-timing-function: step-start; +animation-timing-function: step-end; + +/* Funktionswerte */ +animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); +animation-timing-function: steps(4, end); + +/* Mehrere Animationen */ +animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1); + +/* Globale Werte */ +animation-timing-function: inherited; +animation-timing-function: initial; +animation-timing-function: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code><timingfunction></code></dt> + <dd>Jeder {{cssxref("<timing-function>")}} Wert repräsentiert die Timingfunktion, die mit der dazugehörigen zu animierenden Eigenschaft verknüpft wird, die in {{ cssxref("animation-property") }} definiert wird.</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<p>Siehe <a href="/de/docs/Web/Guide/CSS/CSS_Animationen_nutzen" title="CSS/CSS_animations">CSS Animationen</a> für Beispiele</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Anmerkung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Animations', '#animation-timing-function', 'animation-timing-function')}}</td> + <td>{{Spec2('CSS3 Animations')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{Compat("css.properties.animation-timing-function")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/Guide/CSS/CSS_Animationen_nutzen" title="Tutorial about CSS animations">CSS Animationen nutzen</a></li> + <li>{{ domxref("AnimationEvent") }}</li> +</ul> diff --git a/files/de/web/css/animation/index.html b/files/de/web/css/animation/index.html new file mode 100644 index 0000000000..77ff733e13 --- /dev/null +++ b/files/de/web/css/animation/index.html @@ -0,0 +1,125 @@ +--- +title: animation +slug: Web/CSS/animation +tags: + - CSS + - CSS Animationen + - CSS Eigenschaft + - Experimentell + - Referenz +translation_of: Web/CSS/animation +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft <code>animation</code> fasst die folgenden Werte zusammen: {{cssxref("animation-name")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-timing-function")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-iteration-count")}} und {{cssxref("animation-direction")}}.</p> + +<p>Eine <a href="/de/docs/Web/CSS/CSS_animierbare_Eigenschaften" title="CSS/CSS_transitions#Properties_that_can_be_animated">Beschreibung der animierbaren CSS Eigenschaften</a> ist verfügbar; es sollte auch angemerkt werden, dass diese Beschreibung auch für <a href="/de/docs/Web/Guide/CSS/Verwendung_von_CSS_Übergängen">CSS Übergänge</a> gilt.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">/* @keyframes Dauer | Timingfunktion | Verzögerung | + Anzahl der Iterationen | Richtung | Füllmodus | Abspielstatus | Name */ + animation: 3s ease-in 1s 2 reverse both paused slidein; + +/* @keyframes Dauer | Timingfunktion | Verzögerung | Name */ + animation: 3s linear 1s slidein; + +/* @keyframes Dauer | Name */ + animation: 3s slidein; +</pre> + +<p>Die Reihenfolge innerhalb jeder Animationsdefinition ist wichtig: Der erste Wert in der Einheit {{cssxref("<time>")}} wird als {{cssxref("animation-duration")}} interpretiert, der zweite als {{cssxref("animation-delay")}}.</p> + +<p>Beachte, dass die Reihenfolge auch innerhalb jeder Animationsdefinition wichtig ist, um {{cssxref("animation-name")}} Werte von anderen Schlüsselwörtern zu unterscheiden. Beim Parsen müssen Werte von Schlüsselwörtern, die für Eigenschaften außer {{cssxref("animation-name")}} gültig sind und nicht zuvor in der Kurzschreibweiseeigenschaft gefunden wurden, für diese Eigenschaften anstatt für {{cssxref("animation-name")}} verwendet werden. Zudem müssen bei der Serialisierung die Standardwerte anderer Eigenschaften zumindest in den Fällen ausgegeben werden, in denen es nötig ist, einen {{cssxref("animation-name")}}, der ein gültiger Wert einer anderen Eigenschaft sein könnte, zu unterscheiden, und können in zusätzlichen Fällen ausgegeben werden.</p> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<p>Siehe <a href="/de/docs/Web/Guide/CSS/CSS_Animationen_nutzen" title="CSS/CSS_animations">CSS Animationen</a>.</p> + +<h3 id="Zylonenauge">Zylonenauge</h3> + +<p>Unter Berücksichtigung aller browserspezifischen Präfixe ist hier eine Zylonenauge-Animation, die lineare Farbverläufe und Animationen verwendet, die in allen Browsern funktioniert:</p> + +<pre class="brush: html"><div class="view_port"> + <div class="polling_message"> + Warte auf Nachrichten + </div> + <div class="cylon_eye"></div> +</div> +</pre> + +<pre class="brush: css">.polling_message { + color: white; + float: left; + margin-right: 2%; +} + +.view_port { + background-color: black; + height: 25px; + width: 100%; + overflow: hidden; +} + +.cylon_eye { + background-color: red; + background-image: -webkit-linear-gradient( left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%); + background-image: -moz-linear-gradient( left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%); + background-image: -o-linear-gradient( left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%); + background-image: linear-gradient(to right, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%); + color: white; + height: 100%; + width: 20%; + + -webkit-animation: move_eye 4s linear 0s infinite alternate; + -moz-animation: move_eye 4s linear 0s infinite alternate; + -o-animation: move_eye 4s linear 0s infinite alternate; + animation: move_eye 4s linear 0s infinite alternate; +} + +@-webkit-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; } } + @-moz-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; } } + @-o-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; } } + @keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; } } +</pre> + +<p>{{EmbedLiveSample('Zylonenauge')}}</p> + +<h2 id="Spezifikationen">Spezifikationen</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 Animations', '#animation', 'animation')}}</td> + <td>{{Spec2('CSS3 Animations')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität"><nobr>Browser Kompatibilität</nobr></h2> + +{{Compat("css.properties.animation")}} + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/Guide/CSS/CSS_Animationen_nutzen" title="Tutorial about CSS animations">CSS Animationen nutzen</a></li> + <li>{{domxref("AnimationEvent", "AnimationEvent")}}</li> +</ul> diff --git a/files/de/web/css/appearance/index.html b/files/de/web/css/appearance/index.html new file mode 100644 index 0000000000..12a67f3f60 --- /dev/null +++ b/files/de/web/css/appearance/index.html @@ -0,0 +1,1532 @@ +--- +title: '-moz-appearance (-webkit-appearance)' +slug: Web/CSS/appearance +tags: + - CSS + - CSS Referenz + - nicht Standard +translation_of: Web/CSS/appearance +--- +<div>{{non-standard_header}}{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die CSS-Eigenschaft <code>-moz-appearance</code> wird von Gecko (Firefox) dazu verwendet, um ein Element mit dem nativen Stil der Plattform anzuzeigen, wie er im Betriebssystem eingestellt ist.</p> + +<p>Diese Eigenschaft wird häufig in <a href="/de/docs/Mozilla/Tech/XUL" title="en/XUL">XUL</a>-Stylesheets verwendet, um individuelle Eingabefelder passend zur Plattform zu gestalten. Auch die <a href="/de/docs/XBL" title="en/XBL">XBL</a>-Implementierungen der in Mozilla enthaltenen Bedienelemente verwenden diese Eigenschaft.</p> + +<div class="note"> +<p>Verwende diese Eigenschaft <em>nicht</em> für Websites: Sie entspricht nicht den Webstandards und ihre Auswirkungen unterscheiden sich von einem Browser zum anderen. Sogar der Wert <code>none</code> hat in den verschiedenen Browsern kein einheitliches Verhalten für alle Formularelemente, und teilweise wird sie überhaupt nicht unterstützt.</p> +</div> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: css">/* Partielle Liste verfügbarer Werte in Gecko */ +-moz-appearance: none; +-moz-appearance: button; +-moz-appearance: checkbox; +-moz-appearance: scrollbarbutton-up; + +/* Partielle Liste verfügbarer Werte in WebKit/Blink */ +-webkit-appearance: none; +-webkit-appearance: button; +-webkit-appearance: checkbox; +-webkit-appearance: scrollbarbutton-up; +</pre> + +<h3 id="Werte">Werte</h3> + +<p><code><appearance></code> ist eines der folgenden Schlüsselwörter:</p> + +<table class="standard-table"> + <tbody> + <tr> + <th>Wert</th> + <th>Demo</th> + <th>Beschreibung</th> + </tr> + <tr> + <td><code>none</code></td> + <td> + <div id="sampleNone" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: none; -webkit-appearance: none; color: black;}</pre> + + <pre class="brush:html"> + <div>Lorem</div> +</pre> + </div> + {{EmbedLiveSample("sampleNone",100,50,"","", "nobutton")}}</td> + <td>Keine besondere Formatierung wird angewandt. Dies ist der Standardwert. Beachten Sie aber {{ bug(649849) }} und {{ bug(605985) }}.</td> + </tr> + <tr> + <td><code>button</code></td> + <td> + <div id="sampleButton" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: button; -webkit-appearance: button; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleButton",100,50,"","", "nobutton")}}</td> + <td>Das Element wird wie eine Schaltfläche gezeichnet.</td> + </tr> + <tr> + <td><code>button-arrow-down</code></td> + <td> + <div id="sampleButtonArrowDown" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: button-arrow-down; -webkit-appearance: button-arrow-down; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleButtonArrowDown",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>button-arrow-next</code></td> + <td> + <div id="sampleButtonArrowNext" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: button-arrow-next; -webkit-appearance: button-arrow-next; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleButtonArrowNext",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>button-arrow-previous</code></td> + <td> + <div id="sampleButtonArrowPrevious" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: button-arrow-previous; -webkit-appearance: button-arrow-previous; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleButtonArrowPrevious",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>button-arrow-up</code></td> + <td> + <div id="sampleButtonArrowUp" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: button-arrow-up; -webkit-appearance: button-arrow-up; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleButtonArrowUp",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>button-bevel</code></td> + <td> + <div id="sampleButtonBevel" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: button-bevel; -webkit-appearance: button-bevel; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleButtonBevel",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>button-focus</code></td> + <td> + <div id="sampleButtonFocus" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: button-focus; -webkit-appearance: button-focus; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleButtonFocus",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>caret</code></td> + <td> + <div id="sampleCaret" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: caret; -webkit-appearance: caret; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleCaret",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>checkbox</code></td> + <td> + <div id="sampleCheckbox" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: checkbox; -webkit-appearance: checkbox; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleCheckbox",100,50,"","", "nobutton")}}</td> + <td>Das Element wird wie der innere Teil einer Checkbox gezeichnet.</td> + </tr> + <tr> + <td><code>checkbox-container</code></td> + <td> + <div id="sampleCheckboxContainer" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: checkbox-container; -webkit-appearance: checkbox-container; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleCheckboxContainer",100,50,"","", "nobutton")}}</td> + <td>Das Element wird wie ein Container für eine Checkbox gezeichnet, was einen vorilluminierenden Hintergrundeffekt unter bestimmten Plattformen beinhaltet. Normalerweise beinhaltet er ein Label und eine Checkbox.</td> + </tr> + <tr> + <td><code>checkbox-label</code></td> + <td> + <div id="sampleCheckboxLabel" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: checkbox-label; -webkit-appearance: checkbox-label; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleCheckboxLabel",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>checkmenuitem</code></td> + <td> + <div id="sampleCheckmenuitem" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: checkmenuitem; -webkit-appearance: checkmenuitem; height: 20px; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleCheckmenuitem",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>dualbutton</code></td> + <td> + <div id="sampleDualButton" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: dualbutton; -webkit-appearance: dualbutton; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleDualButton",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>groupbox</code></td> + <td> + <div id="sampleGroupbox" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: groupbox; -webkit-appearance: groupbox; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleGroupbox",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>listbox</code></td> + <td> + <div id="sampleListBox" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: listbox; -webkit-appearance: listbox; height:20px; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleListBox",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>listitem</code></td> + <td> + <div id="sampleListItem" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: listitem; -webkit-appearance: listitem; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleListItem",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>menuarrow</code></td> + <td> + <div id="sampleMenuArrow" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: menuarrow; -webkit-appearance: menuarrow; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleMenuArrow",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>menubar</code></td> + <td> + <div id="sampleMenubar" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: menubar; -webkit-appearance: menubar; color: balck; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleMenubar",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>menucheckbox</code></td> + <td> + <div id="sampleMenuCheckbox" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: menucheckbox; -webkit-appearance: menucheckbox; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleMenuCheckbox",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>menuimage</code></td> + <td> + <div id="sampleMenuImage" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: menuimage; -webkit-appearance: menuimage; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleMenuImage",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>menuitem</code></td> + <td> + <div id="sampleMenuItem" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: menuitem; -webkit-appearance: menuitem; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleMenuItem",100,50,"","", "nobutton")}}</td> + <td>Das Element wird wie ein Menüeintrag dargestellt, wobei der Eintrag hervorgehoben wird, wenn sich der Mauscursor darüber befindet.</td> + </tr> + <tr> + <td><code>menuitemtext</code></td> + <td> + <div id="sampleMenuItemText" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: menuitemtext; -webkit-appearance: menuitemtext; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleMenuItemText",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>menulist</code></td> + <td> + <div id="sampleMenuList" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: menulist; -webkit-appearance: menulist; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleMenuList",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>menulist-button</code></td> + <td> + <div id="sampleMenuListButton" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: menulist-button; -webkit-appearance: menulist-button; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleMenuListButton",100,50,"","", "nobutton")}}</td> + <td>Das Element wird wie eine Schaltfläche dargestellt, die eine Menüliste darstellt, die geöffnet werden kann.</td> + </tr> + <tr> + <td><code>menulist-text</code></td> + <td> + <div id="sampleMenuListText" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: menulist-text; -webkit-appearance: menulist-text; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleMenuListText",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>menulist-textfield</code></td> + <td> + <div id="sampleMenuListTextfield" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: menulist-textfield; -webkit-appearance: menulist-textfield; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleMenuListTextfield",100,50,"","", "nobutton")}}</td> + <td>Dieses Element wird wie ein Texteingabefeld einer Menüliste dargestellt. (Nicht für die Windows Plattform implementiert.)</td> + </tr> + <tr> + <td><code>menupopup</code></td> + <td> + <div id="sampleMenuPopup" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: menupopup; -webkit-appearance: menupopup; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleMenuPopup",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>menuradio</code></td> + <td> + <div id="sampleMenuRadio" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: menuradio; -webkit-appearance: menuradio; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleMenuRadio",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>menuseparator</code></td> + <td> + <div id="sampleMenuSeparator" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: menuseparator; -webkit-appearance: menuseparator; color: transparent; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleMenuSeparator",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>meterbar</code></td> + <td> + <div id="sampleMeterbar" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: meterbar; -webkit-appearance: meterbar; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleMeterbar",100,50,"","", "nobutton")}}</td> + <td>Neu in Firefox 16</td> + </tr> + <tr> + <td><code>meterchunk</code></td> + <td> + <div id="sampleMeterchunk" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: meterchunk; -webkit-appearance: meterchunk; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleMeterchunk",100,50,"","", "nobutton")}}</td> + <td>Neu in Firefox 16</td> + </tr> + <tr> + <td><code>progressbar</code></td> + <td> + <div id="sampleProgressBar" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: progressbar; -webkit-appearance: progressbar; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleProgressBar",100,50,"","", "nobutton")}}</td> + <td>Das Element wird wie ein Fortschrittsbalken dargestellt.</td> + </tr> + <tr> + <td><code>progressbar-vertical</code></td> + <td> + <div id="sampleProgressBarVertical" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: progressbar-vertical; -webkit-appearance: preogressbar-vertical; color: transparent; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleProgressBarVertical",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>progresschunk</code></td> + <td> + <div id="sampleProgressChunk" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: progresschunk; -webkit-appearance: progresschunk; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleProgressChunk",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>progresschunk-vertical</code></td> + <td> + <div id="sampleProgressChunkVertical" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: progresschunk-vertical; -webkit-appearance: progresschunk-vertical; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleProgressChunkVertical",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>radio</code></td> + <td> + <div id="sampleRadio" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: radio; -webkit-appearance: radio; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleRadio",100,50,"","", "nobutton")}}</td> + <td>Das Element wird wie der innere Teil eines Radiobuttons gezeichnet.</td> + </tr> + <tr> + <td><code>radio-container</code></td> + <td> + <div id="sampleRadioContainer" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: radio-container; -webkit-appearance: radio-container; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleRadioContainer",100,50,"","", "nobutton")}}</td> + <td>Das Element wird wie ein Container für einen Radiobutton gezeichnet, was einen vorilluminierenden Hintergrundeffekt unter bestimmten Plattformen beinhaltet. Normalerweise beinhaltet er ein Label und einen Radiobutton.</td> + </tr> + <tr> + <td><code>radio-label</code></td> + <td> + <div id="sampleRadioLabel" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: radio-label; -webkit-appearance: radio-label; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleRadioLabel",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>radiomenuitem</code></td> + <td> + <div id="sampleRadioMenuItem" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: radiomenuitem; -webkit-appearance: radiomenuitem; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleRadioMenuItem",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>resizer</code></td> + <td> + <div id="sampleResizer" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: resizer; -webkit-appearance: resizer; color: transparent; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleResizer",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>resizerpanel</code></td> + <td> + <div id="sampleResizerPanel" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: resizerpanel; -webkit-appearance: resizerpanel; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleResizerPanel",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>scale-horizontal</code></td> + <td> + <div id="sampleScaleHorizontal" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: scale-horizontal; -webkit-appearance: scale-horizontal; color: transparent; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleScaleHorizontal",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>scalethumbend</code></td> + <td> + <div id="sampleThumbEnd" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: scalethumbend; -webkit-appearance: scalethumbend; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleThumbEnd",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>scalethumb-horizontal</code></td> + <td> + <div id="sampleScaleThumbHorizontal" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: scalethumb-horizontal; -webkit-appearance: scalethumb-horizontal; color: transparent; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleScaleThumbHorizontal",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>scalethumbstart</code></td> + <td> + <div id="sampleScaleThumbStart" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: scalethumbstart; -webkit-appearance: scalethumbstart; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleScaleThumbStart",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>scalethumbtick</code></td> + <td> + <div id="sampleScaleThumbTick" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: scalethumbtick; -webkit-appearance: scalethumbtick; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleScaleThumbTick",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>scalethumb-vertical</code></td> + <td> + <div id="sampleScaleThumbVertical" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: scalethumb-vertical; -webkit-appearance: scalethumb-vertical; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleScaleThumbVertical",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>scale-vertical</code></td> + <td> + <div id="sampleScaleVertical" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: scale-vertical; -webkit-appearance: scale-vertical; color: transparent; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleScaleVertical",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>scrollbarbutton-down</code></td> + <td> + <div id="sampleScrollbarButtonDown" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: scrollbarbutton-down; -webkit-appearance: scrollbarbutton-down; color: black; }</pre> + + <pre class="bruh: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleScrollbarButtonDown",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>scrollbarbutton-left</code></td> + <td> + <div id="sampleScrollbarButtonLeft" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: scrollbarbutton-left; -webkit-appearance: scrollbarbutton-left; color: black; }</pre> + + <pre class="bruh: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleScrollbarButtonLeft",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>scrollbarbutton-right</code></td> + <td> + <div id="sampleScrollbarButtonRight" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: scrollbarbutton-right; -webkit-appearance: scrollbarbutton-right; color: black; }</pre> + + <pre class="bruh: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleScrollbarButtonRight",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>scrollbarbutton-up</code></td> + <td> + <div id="sampleScrollbarButtonUp" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: scrollbarbutton-up; -webkit-appearance: scrollbarbutton-up; color: black; }</pre> + + <pre class="bruh: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleScrollbarButtonUp",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>scrollbarthumb-horizontal</code></td> + <td> + <div id="sampleScrollbarThumbHorizontal" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: scrollbarthumb-horizontal; -webkit-appearance: scrollbarthumb-horizontal; color: black; }</pre> + + <pre class="bruh: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleScrollbarThumbHorizontal",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>scrollbarthumb-vertical</code></td> + <td> + <div id="sampleScrollbarThumbVertical" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: scrollbarthumb-vertical; -webkit-appearance: scrollbarthumb-vertical; color: black; }</pre> + + <pre class="bruh: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleScrollbarThumbVertical",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>scrollbartrack-horizontal</code></td> + <td> + <div id="sampleScrollbarTrackHorizontal" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: scrollbartrack-horizontal; -webkit-appearance: scrollbartrack-horizontal; color: black; }</pre> + + <pre class="bruh: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleScrollbarTrackHorizontal",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>scrollbartrack-vertical</code></td> + <td> + <div id="sampleScrollbarTrackVertical" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: scrollbartrack-vertical; -webkit-appearance: scrollbarbartrack-vertical; color: black; }</pre> + + <pre class="bruh: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleScrollbarTrackVertical",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>searchfield</code></td> + <td> + <div id="sampleSearchField" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: searchfield; -webkit-appearance: searchfield; color: black; }</pre> + + <pre class="bruh: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleSearchField",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>separator</code></td> + <td> + <div id="sampleSeparator" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: separator; -webkit-appearance: separator; color: transparent; }</pre> + + <pre class="bruh: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleSeparator",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>sheet</code></td> + <td> + <div id="sampleSheet" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: sheet; -webkit-appearance: sheet; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleSheet",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>spinner</code></td> + <td> + <div id="sampleSpinner" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: spinner; -webkit-appearance: spinner; color: transparent; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleSpinner",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>spinner-downbutton</code></td> + <td> + <div id="sampleSpinnerDownbutton" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: spinner-downbutton; -webkit-appearance: spinner-downbutton; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleSpinnerDownbutton",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>spinner-textfield</code></td> + <td> + <div id="sampleSpinnerTextfield" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: spinner-textfield; -webkit-appearance: spinner-textfield; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleSpinnerTextfield",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>spinner-upbutton</code></td> + <td> + <div id="sampleSpinnerUpbutton" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: spinner-upbutton; -webkit-appearance: spinner-upbutton; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleSpinnerUpbutton",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>splitter</code></td> + <td> + <div id="sampleSplitter" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: splitter; -webkit-appearance: splitter; color: transparent; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleSplitter",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>statusbar</code></td> + <td> + <div id="sampleStatusBar" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: statusbar; -webkit-appearance: statusbar; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleStatusBar",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>statusbarpanel</code></td> + <td> + <div id="sampleStatusBarPanel" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: statusbarpanel; -webkit-appearance: statusbarpanel; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleStatusBarPanel",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>tab</code></td> + <td> + <div id="sampleTab" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: tab; -webkit-appearance: tab; height: 20px; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleTab",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>tabpanel</code></td> + <td> + <div id="sampleTabPanel" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: tabpanel; -webkit-appearance: tabpanel; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleTabPanel",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>tabpanels</code></td> + <td> + <div id="sampleTabPanels" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: tabpanels; -webkit-appearance: tabpanels; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleTabPanels",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>tab-scroll-arrow-back</code></td> + <td> + <div id="sampleTabScrollArrowBack" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: tab-scroll-arrow-back; -webkit-appearance: tab-scroll-arrow-back; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleTabScrollArrowBack",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>tab-scroll-arrow-forward</code></td> + <td> + <div id="sampleTabScrollArrowForward" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: tab-scroll-arrow-forward; -webkit-appearance: tab-scroll-arrow-forward; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleTabScrollArrowForward",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>textfield</code></td> + <td> + <div id="sampleTextField" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: textfield; -webkit-appearance: textfield; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleTextField",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>textfield-multiline</code></td> + <td> + <div id="sampleTextfieldMultiline" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: textfield-multiline; -webkit-appearance: textfield-multiline; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleTextfieldMultiline",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>toolbar</code></td> + <td> + <div id="sampleToolbar" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: toolbar; -webkit-appearance: toolbar; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleToolbar",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>toolbarbutton</code></td> + <td> + <div id="sampleToolbarButton" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: toolbarbutton; -webkit-appearance: toolbarbutton; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleToolbarButton",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>toolbarbutton-dropdown</code></td> + <td> + <div id="sampleToolbarButtonDropdown" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: toolbarbutton-dropdown; -webkit-appearance: toolbarbutton-dropdown; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleToolbarButtonDropdown",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>toolbargripper</code></td> + <td> + <div id="sampleToolbarGripper" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: toolbargripper; -webkit-appearance: toolbargripper; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleToolbarGripper",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>toolbox</code></td> + <td> + <div id="sampleToolbox" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: toolbox; -webkit-appearance: toolbox; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleToolbox",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>tooltip</code></td> + <td> + <div id="sampleTooltip" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: tooltip; -webkit-appearance: tooltip; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleTooltip",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>treeheader</code></td> + <td> + <div id="sampleTreeHeader" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: treeheader; -webkit-appearance: treeheader; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleTreeHeader",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>treeheadercell</code></td> + <td> + <div id="sampleTreeHeaderCell" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: treeheadercell; -webkit-appearance: treeheadercell; height:20px; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleTreeHeaderCell",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>treeheadersortarrow</code></td> + <td> + <div id="sampleTreeHeaderSortArrow" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: treeheadersortarrow; -webkit-appearance: treeheadersortarrow; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleTreeHeaderSortArrow",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>treeitem</code></td> + <td> + <div id="sampleTreeItem" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: treeitem; -webkit-appearance: treeitem; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleTreeItem",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>treeline</code></td> + <td> + <div id="sampleTreeLine" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: treeline; -webkit-appearance: treeline; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleTreeLine",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>treetwisty</code></td> + <td> + <div id="sampleTreeTwisty" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: treetwisty; -webkit-appearance: treetwisty; color: transparent; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleTreeTwisty",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>treetwistyopen</code></td> + <td> + <div id="sampleTreeTwistyOpen" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: treetwistyopen; -webkit-appearance: treetwistyopen; color: transparent; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleTreeTwistyOpen",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>treeview</code></td> + <td> + <div id="sampleTreeView" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: treeview; -webkit-appearance: treeview; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleTreeView",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>-moz-mac-unified-toolbar</code></td> + <td> + <div id="sampleMacUnifiedToolbar" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: -moz-mac-unified-toolbar; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleMacUnifiedToolbar",100,50,"","", "nobutton")}}</td> + <td><strong>Nur Mac OS X</strong>. Dies ermöglicht die Darstellung von Toolbar und Titelleiste unter Verwendung des einheitlichen Toolbarstils, wie er in Anwendungen unter Mac OS X 10.4 und neuer zu sehen ist.</td> + </tr> + <tr> + <td>{{ gecko_minversion_inline("2.0") }} <code>-moz-win-borderless-glass</code></td> + <td> + <div id="sampleWinBorderlessGlass" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: -moz-win-borderless-glass; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleWinBorderlessGlass",100,50,"","", "nobutton")}}</td> + <td><strong>Nur Windows Vista und neuer</strong>. Dieser Stil wendet den Aero Glass Effekt - aber ohne einen Rahmen - auf das Element an.</td> + </tr> + <tr> + <td><code>-moz-win-browsertabbar-toolbox</code></td> + <td> + <div id="sampleWinBrowsertabbarToolbox" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: -moz-win-browsertabbar-toolbox; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleWinBrowsertabbarToolbox",100,50,"","", "nobutton")}}</td> + <td><strong>Nur Windows Vista und neuer</strong>. Dieser Toolboxstil ist dazu gedacht, um für die Tableiste in einem Browser verwendet zu werden.</td> + </tr> + <tr> + <td><code>-moz-win-communicationstext</code></td> + <td> + <div id="sampleWinCommunicationstext" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: -moz-win-communicationstext; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleWinCommunicationstext",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>-moz-win-communications-toolbox</code></td> + <td> + <div id="sampleWinCommunicationsToolbox" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: -moz-win-communications-toolbox; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleWinCommunicationsToolbox",100,50,"","", "nobutton")}}</td> + <td><strong>Nur Windows Vista und neuer</strong>. Dieser Toolboxstil ist dazu gedacht, in Kommunikations- und Produktivitätsanwendungen verwendet zu werden. Die entsprechende Vordergrundfarbe ist <code>-moz-win-communicationstext</code>.</td> + </tr> + <tr> + <td>{{gecko_minversion_inline("6.0")}} <code>-moz-win-exclude-glass</code></td> + <td> + <div id="sampleWinExcludeGlass" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: -moz-win-exclude-glass; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleWinExcludeGlass",100,50,"","", "nobutton")}}</td> + <td><strong>Nur Windows Vista und neuer</strong>. Dieser Stil wird dazu verwendet, um den Aero Glass Effekt für das Element auszuschließen.</td> + </tr> + <tr> + <td><code>-moz-win-glass</code></td> + <td> + <div id="sampleWinGlass" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: -moz-win-glass; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleWinGlass",100,50,"","", "nobutton")}}</td> + <td><strong>Nur Windows Vista und neuer</strong>. Dieser Stil wendet den Aero Glass Effekt auf das Element an.</td> + </tr> + <tr> + <td><code>-moz-win-mediatext</code></td> + <td> + <div id="sampleWinMediaText" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: -moz-win-mediatext; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleWinMediaText",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>-moz-win-media-toolbox</code></td> + <td> + <div id="sampleWinMediaToolbox" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: -moz-win-media-toolbox; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleWinMediaToolbox",100,50,"","", "nobutton")}}</td> + <td><strong>Nur Windows Vista und neuer</strong>. Dieser Toolboxstil ist dazu gedacht, um in Anwendungen verwendet zu werden, die Medienobjekte verwalten. Die Entsprechende Vordergrundfarbe ist <code>-moz-win-mediatext</code>.</td> + </tr> + <tr> + <td><code>-moz-window-button-box</code></td> + <td> + <div id="sampleWindowButtonBox" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: -moz-window-button-box; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleWindowButtonBox",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>-moz-window-button-box-maximized</code></td> + <td> + <div id="sampleWindowButtonBoxMaximized" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: -moz-window-button-box-maximized; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleWindowButtonBoxMaximized",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>-moz-window-button-close</code></td> + <td> + <div id="sampleWindowButtonClose" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: -moz-window-button-close; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleWindowButtonClose",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>-moz-window-button-maximize</code></td> + <td> + <div id="sampleWindowButtonMaximize" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: -moz-window-button-maximize; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleWindowButtonMaximize",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>-moz-window-button-minimize</code></td> + <td> + <div id="sampleWindowButtonMinimize" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: -moz-window-button-minimize; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleWindowButtonMinimize",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>-moz-window-button-restore</code></td> + <td> + <div id="sampleWindowButtonRestore" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: -moz-window-button-restore; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleWindowButtonRestore",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>-moz-window-frame-bottom</code></td> + <td> + <div id="sampleWindowFrameBottom" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: -moz-window-frame-bottom; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleWindowFrameBottom",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>-moz-window-frame-left</code></td> + <td> + <div id="sampleWindowFrameLeft" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: -moz-window-frame-left; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleWindowFrameLeft",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>-moz-window-frame-right</code></td> + <td> + <div id="sampleWindowFrameRight" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: -moz-window-frame-right; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleWindowFrameRight",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>-moz-window-titlebar</code></td> + <td> + <div id="sampleWindowTitlebar" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: -moz-window-titlebar; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleWindowTitlebar",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>-moz-window-titlebar-maximized</code></td> + <td> + <div id="sampleWindowTitlebarMaximized" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: -moz-window-titlebar-maximized; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleWindowTitlebarMaximized",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Formale_Syntax">Formale Syntax</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush:css">.exampleone { + -moz-appearance: toolbarbutton; +} +</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<p>{The <code>appearance</code> property is currently not present in any newer CSS specification.</p> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}{{property_prefix("-moz")}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>3.0{{property_prefix("-webkit")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>11.0{{property_prefix("-webkit")}}<sup>[2]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Nicht vollständig unterstützt.</p> + +<p>[2] Nur die Werte <code>none</code>, <code>button</code>, und <code>textfield</code> werden unterstützt. Siehe die <a href="https://msdn.microsoft.com/en-us/library/ie/dn793580%28v=vs.85%29.aspx">Dokumentation auf MSDN</a>.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/2004/CR-css3-ui-20040511/#appearance">Definition von <code>appearance</code> in CSS 3 Basic User Interface</a> (Candidate Recommendation vom 2004-05-11), veraltet (Die <code>appearance</code> Eigenschaft wurde in neueren Versionen dieser Spezifikation verworfen.)</li> + <li><a class="external" href="https://wiki.csswg.org/spec/css4-ui#dropped-css3-features">Verworfene CSS3 Features der UI Spezifikation</a></li> +</ul> diff --git a/files/de/web/css/at-rule/index.html b/files/de/web/css/at-rule/index.html new file mode 100644 index 0000000000..f32e9daee6 --- /dev/null +++ b/files/de/web/css/at-rule/index.html @@ -0,0 +1,61 @@ +--- +title: '@-Regel' +slug: Web/CSS/At-rule +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/At-rule +--- +<div>{{cssref}}</div> + +<p><span class="seoSummary">Eine <strong>@-Regel</strong> ist ein <a href="/de/docs/Web/CSS/Syntax#CSS_Statements">CSS Statement</a>, das mit einem At-Zeichen beginnt, '<code>@</code>' (<code>U+0040 COMMERCIAL AT</code>), gefolgt von einem Bezeichner und das beim ersten Semikolon, '<code>;</code>' (<code>U+003B SEMICOLON</code>), außerhalb eines <a href="/de/docs/Web/CSS/Syntax#CSS_Deklarationsblöcke">CSS Blocks</a> endet oder am Ende des ersten Blocks.</span></p> + +<p>Es gibt verschiedene @-Regeln, bestimmt durch deren Bezeichner, jede mit einer unterschiedlichen Syntax:</p> + +<ul> + <li>{{cssxref("@charset")}} — Definiert den Zeichensatz, der vom Stylesheet verwendet wird.</li> + <li>{{cssxref("@import")}} — Teilt der CSS Engine mit, ein externes Stylesheet einzubinden.</li> + <li>{{cssxref("@namespace")}} — Teilt der CSS Engine mit, dass sie alle Inhalte mit einem XML Namespace als Präfix betrachten soll.</li> + <li><strong><em>Verschachtelte @-Regeln</em></strong> — Eine Untermenge an verschachtelten Statements, welche als Statement eines Stylesheets als auch innerhalb von bedingten Gruppenregeln verwendet werden können: + <ul> + <li>{{cssxref("@media")}} — Eine bedingte Gruppenregel, die ihren Inhalt anwendet, falls das Gerät die Kriterien der Bedingung erfüllt, die durch eine <em>Media Query</em> definiert wird.</li> + <li>{{cssxref("@supports")}} {{experimental_inline}} — Eine bedingte Gruppenregel, die ihren Inhalt anwendet, falls der Browser die Kriterien der angegebenen Bedingung erfüllt.</li> + <li>{{cssxref("@document")}} {{experimental_inline}} — Eine bedingte Gruppenregel, die ihren Inhalt anwendet, falls das Dokument, auf das das Stylesheet angewendet wird, die Kriterien der angegebenen Bedingung erfüllt. <em>(verschoben nach Level 4 der CSS Spezifikation)</em></li> + <li>{{cssxref("@page")}} — Beschreibt den Aspekt von Layoutänderungen, welche angewendet werden, wenn das Dokument gedruckt wird.</li> + <li>{{cssxref("@font-face")}} — Beschreibt den Aspekt einer externen Schrift, die heruntergeladen werden soll.</li> + <li>{{cssxref("@keyframes")}} {{experimental_inline}} — Beschreibt den Aspekt von Zwischenschritten in einer CSS Animationssequenz.</li> + <li>{{cssxref("@viewport")}} {{experimental_inline}} — Beschreibt die Aspekte des Viewports auf Geräten mit kleinem Bildschirm. <em>(aktuell im Arbeitsentwurfsstadium)</em></li> + </ul> + </li> +</ul> + +<h2 id="Bedingte_Gruppenregeln">Bedingte Gruppenregeln</h2> + +<p>Ähnlich wie die Werte von Eigenschaften hat jede @-Regel eine andere Syntax. Trotzdem können einige von ihnen zu einer speziellen Kategorie zusammengefasst werden, <strong>bedingte Gruppenregeln</strong> genannt. Diese Statements teilen sich eine gemeinsame Syntax und jedes von ihnen kann <em>verschachtelte Statements</em> — entweder <em>Regelsets</em> oder <em>verschachtelte @-Regeln</em> — beinhalten. Darüber hinaus vermitteln sie alle die gleiche semantische Bedeutung — sie alle verbindet eine Art Bedingung, welche immer entweder <strong>true</strong> oder <strong>false</strong> ergibt. Falls die Bedingung <strong>true</strong> ergibt, werden alle Statements innerhalb der Gruppe angewandt.</p> + +<p>Bedingte Gruppenregeln werden in <a href="https://drafts.csswg.org/css-conditional-3/">CSS Conditionals Level 3</a> definiert und sind:</p> + +<ul> + <li>{{cssxref("@media")}},</li> + <li>{{cssxref("@supports")}},</li> + <li>{{cssxref("@document")}}. <em>(verschoben nach Level 4 der Spezifikation) </em></li> +</ul> + +<p>Da jede bedingte Gruppe auch verschachtelte Statements beinhalten kann, kann es eine undefinierte Anzahl von Verschachtelungen geben.</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('CSS3 Conditional')}}</td> + <td>{{Spec2('CSS3 Conditional')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> diff --git a/files/de/web/css/attr()/index.html b/files/de/web/css/attr()/index.html new file mode 100644 index 0000000000..8da73fd80c --- /dev/null +++ b/files/de/web/css/attr()/index.html @@ -0,0 +1,189 @@ +--- +title: attr +slug: Web/CSS/attr() +tags: + - CSS + - CSS Funktion + - Layout + - Referenz + - Web +translation_of: Web/CSS/attr() +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>attr()</code> <a href="/de/docs/Web/CSS">CSS</a> Funktion wird verwendet, um einen Wert eines Attributs des ausgewählten Elements abzurufen und innerhalb des Stylesheets zu verwenden. Sie kann auch für <a href="/de/docs/Web/CSS/Pseudo-elements">Pseudoelemente</a> verwendet werden. In diesem Fall wird der Wert des Attributs seines ursprünglichen Elements zurückgegeben.</p> + +<p>Die <code>attr()</code> Funktion kann innerhalb jeder CSS Eigenschaft verwendet werden. {{ experimental_inline() }}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox notranslate"><a href="/de/docs/Web/CSS/Wertdefinitionssyntax" title="CSS/Value_definition_syntax">Formale Syntax</a>: attr( attribute-name <type-or-unit>? [, <fallback> ]? ) +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code>attribute-name</code></dt> + <dd>Entspricht dem Namen des Attributs des HTML Elements, das durch CSS referenziert wird.</dd> + <dt><code><type-</code>or-unit></dt> + <dd>Ist ein Schlüsselwort, das den Typ oder die Einheit des Attributwerts angibt, da in HTML einige Attribute implizite Einheiten haben. Falls die Verwendung von <code><type-or-unit></code> als Wert für das angegebene Attribut ungültig ist, ist der <code>attr()</code> Ausdruck ebenfalls ungültig. Falls nicht angegeben, wird standardmäßig <code>string</code> verwendet. Nachfolgend ist eine Liste aller Werte aufgeführt: + <table class="standard-table"> + <thead> + <tr> + <th scope="col">Schlüsselwort</th> + <th scope="col">Assoziierter Typ</th> + <th scope="col">Anmerkung</th> + <th scope="col">Standardwert</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>string</code></td> + <td>{{cssxref("<string>")}}</td> + <td>Der Attributwert wird als CSS {{cssxref("<string>")}} Wert behandelt. Er wird nicht erneut geparst, insbesondere werden die Zeichen wie angegeben verwendet, anstatt dass CSS Escapes zu anderen Zeichen umgewandelt werden.</td> + <td>An empty string</td> + </tr> + <tr> + <td><code>color</code> {{ experimental_inline() }}</td> + <td>{{cssxref("<color>")}}</td> + <td>Der Attributwert wird als Hash (3- oder 6-Werthash) oder als Schlüsselwort interpretiert. Er muss ein gültiger CSS {{cssxref("<string>")}} Wert sein.<br> + Voran- und nachgestellte Leerzeichen werden abgeschnitten.</td> + <td><code>currentColor</code></td> + </tr> + <tr> + <td><code>url</code> {{ experimental_inline() }}</td> + <td>{{ cssxref("<uri>") }}</td> + <td>Der Attributwert wird als ein String interpretiert, wie er in einer <code>url()</code> Funktion verwendet wird. Relative URLs werden relativ zum ursprünglichen Dokument interpretiert, nicht relativ zum Stylesheet.<br> + Voran- und nachgestellte Leerzeichen werden abgeschnitten.</td> + <td>Die URL <code>about:invalid</code>, die auf ein nicht existierendes Dokument mit einer allgemeinen Fehlermeldung verweist.</td> + </tr> + <tr> + <td><code>integer</code> {{ experimental_inline() }}</td> + <td>{{cssxref("<integer>")}}</td> + <td>Der Attributwert wird als CSS {{cssxref("<integer>")}} Wert interpretiert. Falls er nicht gültig ist, d. h. keine Ganzzahl oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.<br> + Voran- und nachgestellte Leerzeichen werden abgeschnitten.</td> + <td><code>0</code> oder, falls <code>0</code> kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.</td> + </tr> + <tr> + <td><code>number</code> {{ experimental_inline() }}</td> + <td>{{cssxref("<number>")}}</td> + <td>Der Attributwert wird als CSS {{cssxref("<number>")}} Wertinterpretiert. Falls er nicht gültig ist, d. h. keine Zahl oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.<br> + Voran- und nachgestellte Leerzeichen werden abgeschnitten.</td> + <td><code>0</code> oder, falls <code>0</code> kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.</td> + </tr> + <tr> + <td><code>length</code> {{ experimental_inline() }}</td> + <td>{{cssxref("<length>")}}</td> + <td>Der Attributwert wird als CSS {{cssxref("<length>")}} Wert interpretiert, der die Einheit beinhaltet (z. B. <code>12.5em</code>). Falls er ungültig ist, d. h. keine Länge oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.<br> + Falls die angegebene Einheit eine relative Länge ist, wandelt <code>attr()</code>sie in eine absolute Länge um.<br> + Voran- und nachgestellte Leerzeichen werden abgeschnitten.</td> + <td><code>0</code> oder, falls <code>0</code> kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.</td> + </tr> + <tr> + <td><code>em</code>, <code>ex</code>, <code>px</code>, <code>rem</code>, <code>vw</code>, <code>vh</code>, <code>vmin</code>, <code>vmax</code>, <code>mm</code>, <code>cm</code>, <code>in</code>, <code>pt</code>, oder <code>pc</code> {{ experimental_inline() }}</td> + <td>{{cssxref("<length>")}}</td> + <td>Der Attributwert wird als CSS {{cssxref("<number>")}} Wert ohne Einheit interpretiert (z. B. <code>12.5</code>) und in einen {{cssxref("<length>")}} Wert mit der angegebenen Einheit umgewandelt. Falls er nicht gültig ist, d. h. keine Zahl oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.<br> + Falls die angegebene Einheit eine relative Länge ist, wandelt <code>attr()</code>sie in eine absolute Länge um.<br> + Voran- und nachgestellte Leerzeichen werden abgeschnitten.</td> + <td><code>0</code> oder, falls <code>0</code> kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.</td> + </tr> + <tr> + <td><code>angle</code> {{ experimental_inline() }}</td> + <td>{{ cssxref("<angle>") }}</td> + <td>Der Attributwert wird als CSS {{ cssxref("<angle>") }} Wert interpretiert, der die Einheit beinhaltet (z. B. <code>30.5deg</code>). Falls er ungültig ist, d. h. kein Winkel oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.<br> + Voran- und nachgestellte Leerzeichen werden abgeschnitten.</td> + <td><code>0deg</code> oder, falls <code>0deg</code> kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.</td> + </tr> + <tr> + <td><code>deg</code>, <code>grad</code>, <code>rad</code> {{ experimental_inline() }}</td> + <td>{{ cssxref("<angle>") }}</td> + <td>Der Attributwert wird als CSS {{cssxref("<number>")}} Wert ohne Einheit interpretiert (z. B. <code>12.5</code>) und in einen {{ cssxref("<angle>") }} Wert mit der angegebenen Einheit umgewandelt. Falls er nicht gültig ist, d. h. keine Zahl oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.<br> + Voran- und nachgestellte Leerzeichen werden abgeschnitten.</td> + <td><code>0deg</code> oder, falls <code>0deg</code> kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.</td> + </tr> + <tr> + <td><code>time</code> {{ experimental_inline() }}</td> + <td>{{cssxref("<time>")}}</td> + <td>Der Attributwert wird als CSS {{cssxref("<time>")}} Wert interpretiert, der die Einheit beinhaltet (z. B. <code>30.5ms</code>). Falls er ungültig ist, d. h. keine Zeit oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.<br> + Voran- und nachgestellte Leerzeichen werden abgeschnitten.</td> + <td><code>0s</code> oder, falls <code>0s</code> kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.</td> + </tr> + <tr> + <td><code>s</code>, <code>ms</code> {{ experimental_inline() }}</td> + <td>{{cssxref("<time>")}}</td> + <td>Der Attributwert wird als CSS {{cssxref("<number>")}} Wert ohne Einheit interpretiert (z. B. <code>12.5</code>) und in einen {{cssxref("<time>")}} Wert mit der angegebenen Einheit umgewandelt. Falls er nicht gültig ist, d. h. keine Zeit oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.<br> + Voran- und nachgestellte Leerzeichen werden abgeschnitten.</td> + <td><code>0s</code> oder, falls <code>0s</code> kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.</td> + </tr> + <tr> + <td><code>frequency</code> {{ experimental_inline() }}</td> + <td>{{cssxref("<frequency>")}}</td> + <td>Der Attributwert wird als CSS {{cssxref("<frequency>")}} Wert interpretiert, der die Einheit beinhaltet (z. B. <code>30.5kHz</code>). Falls er ungültig ist, d. h. keine Frequenz oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.<br> + Voran- und nachgestellte Leerzeichen werden abgeschnitten.</td> + <td><code>0Hz</code> oder, falls <code>0Hz</code> kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.</td> + </tr> + <tr> + <td><code>Hz</code>, <code>kHz</code> {{ experimental_inline() }}</td> + <td>{{cssxref("<frequency>")}}</td> + <td>Der Attributwert wird als CSS {{cssxref("<number>")}} Wert ohne Einheit interpretiert (z. B. <code>12.5</code>) und in einen {{cssxref("<frequency>")}} Wert mit der angegebenen Einheit umgewandelt. Falls er nicht gültig ist, d. h. keine Frequenz oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.<br> + Voran- und nachgestellte Leerzeichen werden abgeschnitten.</td> + <td><code>0Hz</code> oder, falls <code>0Hz</code> kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.</td> + </tr> + <tr> + <td><code>%</code> {{ experimental_inline() }}</td> + <td>{{cssxref("<percentage>")}}</td> + <td>Der Attributwert wird als CSS {{cssxref("<number>")}} Wert ohne Einheit interpretiert (z. B. <code>12.5</code>) und in einen {{cssxref("<percentage>")}} Wert umgewandelt. Falls er nicht gültig ist, d. h. keine Zahl oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.<br> + Falls der Wert als Länge verwendet wird, wandelt <code>attr()</code>ihn in eine absolute Länge um.<br> + Voran- und nachgestellte Leerzeichen werden abgeschnitten.</td> + <td><code>0%</code> oder, falls <code>0%</code> kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.</td> + </tr> + </tbody> + </table> + </dd> + <dt><code><fallback></code></dt> + <dd>Der Wert, der verwendet wird, falls das zugehörige Attribut fehlt oder einen ungültigen Wert beinhaltet. Der Fallbackwert muss gültig sein, auch wenn er nicht verwendet wird, und darf keinen weiteren <code>attr()</code> Ausdruck beinhalten. Falls <code>attr()</code> nicht der einzige Wert einer Eigenschaft ist, muss dessen <code><fallback></code> Wert von dem Typ sein, der durch <code><type-or-unit></code> definiert wird. Falls nicht angegeben, wird CSS den Standardwert verwenden, der für jeden <code><type-or-unit></code> Wert angegeben ist.</dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush: css notranslate">p:before { + content:attr(data-foo) " "; +} +</pre> + +<pre class="brush: html notranslate"><p data-foo="Hallo">Welt</p> +</pre> + +<h3 id="Ergebnis">Ergebnis</h3> + +<p>{{ EmbedLiveSample("Beispiele", '100%', '60') }}</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Anmerkung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Values', '#attr', 'attr()') }}</td> + <td>{{ Spec2('CSS3 Values') }}</td> + <td>Fügt zwei optionale Parameter hinzu; kann in allen Eigenschaften verwendet werden; kann andere Werte als {{cssxref("<string>")}} zurückliefern. Diese Änderungen sind als experimentell {{ experimental_inline() }} markiert und können jederzeit während der CR Phase verworfen werden, falls die Browserunterstützung nicht groß genug ist.</td> + </tr> + <tr style="vertical-align: top;"> + <td style="vertical-align: top;">{{ SpecName('CSS2.1', 'generate.html#x18', 'attr()') }}</td> + <td style="vertical-align: top;">{{ Spec2('CSS2.1') }}</td> + <td style="vertical-align: top;">Beschränkt auf die {{ cssxref("content") }} Eigenschaft; gibt immer {{cssxref("<string>")}} zurück.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.types.attr")}} diff --git a/files/de/web/css/attributselektoren/index.html b/files/de/web/css/attributselektoren/index.html new file mode 100644 index 0000000000..a4b6449af3 --- /dev/null +++ b/files/de/web/css/attributselektoren/index.html @@ -0,0 +1,122 @@ +--- +title: Attributselektoren +slug: Web/CSS/Attributselektoren +tags: + - Anfänger + - CSS + - Reference + - Selectors +translation_of: Web/CSS/Attribute_selectors +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p><span class="seoSummary">Attributselektoren wählen Elemente anhand des Vorhandenseins oder Wertes eines Attributs aus.</span></p> + +<dl> + <dt><code>[<em>attr</em>]</code></dt> + <dd>Repräsentiert ein Element mit einem Attribut attr.</dd> + <dt><code>[<em>attr</em>=<em>wert</em>]</code></dt> + <dd>Repräsentiert ein Element mit einem Attribut attr, welches exakt den Wert „wert“ enthält.</dd> + <dt><code>[<em>attr</em>~=<em>wert</em>]</code></dt> + <dd>Repräsentiert ein Element mit einem Attribut attr, welches eine Liste mit durch Leerraum getrennten Wörtern enthält, von denen eines exakt dem Wert „wert“ entspricht.</dd> + <dt><code>[<em>attr</em>|=<em>wert</em>]</code></dt> + <dd>Repräsentiert ein Element mit einem Attribut attr. Es kann exakt den Wert „wert“ enthalten oder mit einem Wert „wert“ beginnen, dem ein „-“ (U+002D) folgt. Es kann benutzt werden, um anhand von Sprachsubcodes Elemente auszuwählen.</dd> + <dt><code>[<em>attr</em>^=<em>wert</em>]</code></dt> + <dd>Repräsentiert ein Element mit einem Attribut attr, dessen Wert mit „wert“ beginnt.</dd> + <dt><code>[<em>attr</em>$=<em>wert</em>]</code></dt> + <dd>Repräsentiert ein Element mit einem Attribut attr, dessen Wert mit „wert“ endet.</dd> + <dt><code>[<em>attr</em>*=<em>wert</em>]</code></dt> + <dd>Repräsentiert ein Element mit einem Attribut attr, dessen Wert mindestens einmal „wert“ enthält.</dd> + <dt><code>[<em>attr operator wert i</em>]</code></dt> + <dd>Wenn ein i vor der schließenden Klammer eingefügt wird, wird ein Vergleich ohne Berücksichtigung der Groß-/Kleinschreibung (für Zeichen innerhalb des ASCII Bereichs) durchgeführt.</dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush: css">/* Alle span-Elemente mit dem „lang“-Attribut sind fett */ +span[lang] {font-weight:bold;} + +/* Alle span-Elemente in Portugiesisch sind grün */ +span[lang="pt"] {color:green;} + +/* Alle span-Elemente in amerikanischem Englisch sind blau */ +span[lang~="en-us"] {color: blue;} + +/* Alle span-Elemente sowohl in vereinfachtem (zh-CN) als auch traditionellem (zh-TW) Chinesisch sind rot */ +span[lang|="zh"] {color: red;} + +/* Alle internen Links haben einen goldenen Hintergrund */ +a[href^="#"] {background-color:gold} + +/* Alle Links zu mit „.cn“ endenden URLs sind rot */ +a[href$=".cn"] {color: red;} + +/* Alle Links zu URLs, die „beispiel“ enthalten, haben einen grauen Hintergrund */ +a[href*="beispiel"] {background-color: #CCCCCC;} + +/* Alle email Eingabefelder haben einen blauen Rahmen */ +/* Das matcht jede Großschreibung von "email", z. B. "email", "EMAIL", "eMaIL", etc. */ +input[type="email" i] {border-color: blue;} +</pre> + +<pre class="brush: html"><div class="hallo-beispiel"> + <a href="http://example.com">English:</a> + <span lang="en-us en-gb en-au en-nz">Hallo Welt!</span> +</div> +<div class="hallo-beispiel"> + <a href="#portugiesisch">Portugiesisch:</a> + <span lang="pt">Olá Mundo!</span> +</div> +<div class="hallo-beispiel"> + <a href="http://example.cn">Chinesisch (Vereinfacht):</a> + <span lang="zh-CN">世界您好！</span> +</div> +<div class="hallo-beispiel"> + <a href="http://example.cn">Chinesisch (Traditionell):</a> + <span lang="zh-TW">世界您好！</span> +</div> +</pre> + +<p>{{EmbedLiveSample('Beispiele', 250, 100)}}</p> + +<h2 id="Spezifikationen">Spezifikationen</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('CSS4 Selectors', '#attribute-selectors', 'attribute selectors')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Hat den Modifizierer für ASCII schreibungsunabhängige Attributwertselektierung hinzugefügt.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#attribute-selectors', 'attribute selectors')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#attribute-selectors', 'attribute selectors')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.selectors.attribute")}} + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="https://dev.l-c-n.com/CSS3-selectors/browser-support.php" rel="noreferrer">CSS Selektoren: Grundlegende Browserunterstützung</a></li> + <li><a href="https://kimblim.dk/css-tests/selectors/" rel="noreferrer">CSS Selektoren und Pseudoselektoren Browserkompatibilität</a></li> +</ul> diff --git a/files/de/web/css/aural/index.html b/files/de/web/css/aural/index.html new file mode 100644 index 0000000000..37d115443e --- /dev/null +++ b/files/de/web/css/aural/index.html @@ -0,0 +1,17 @@ +--- +title: aural +slug: Web/CSS/Aural +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/@media/aural +--- +<div>{{CSSRef}}{{obsolete_header("6.0")}}</div> + +<p>Eine <a href="/de/docs/Web/CSS/@media#Mediengruppen">Mediengruppe</a> definiert durch die <a href="/de/docs/Web/CSS">CSS</a> Standards.</p> + +<div class="note"> +<p><strong>Hinweis:</strong> Diese Mediengruppe wurde in Gecko nie vollständig implementiert und wurde in {{Gecko("6.0")}} entfernt.</p> +</div> + +<p> </p> diff --git a/files/de/web/css/auto/index.html b/files/de/web/css/auto/index.html new file mode 100644 index 0000000000..1827bb39d6 --- /dev/null +++ b/files/de/web/css/auto/index.html @@ -0,0 +1,26 @@ +--- +title: auto +slug: Web/CSS/auto +translation_of: Web/CSS/width +--- +<div> + {{CSSRef}}</div> +<h2 id="Summary" name="Summary">Übersicht</h2> +<p><code>auto</code> ist ein Wert, der vom jeweiligen user agent definiert wird. Das Ergebnies variert von Eigenschaft zu Eigenschaft.</p> +<h2 id="Used_in" name="Used_in">Verwendet in</h2> +<ul> + <li>{{ Cssxref("overflow") }}</li> + <li>{{ Cssxref("overflow-x") }}</li> + <li>{{ Cssxref("overflow-y") }}</li> + <li>{{ Cssxref("cursor") }}</li> + <li>{{ Cssxref("width") }}</li> + <li>{{ Cssxref("height") }}</li> + <li>{{ Cssxref("marker-offset") }}</li> + <li>{{ Cssxref("margin") }}</li> + <li>margin-* (left|bottom|top|right|start|end)</li> + <li>{{ Cssxref("bottom") }}</li> + <li>{{ Cssxref("left") }}</li> + <li>{{ Cssxref("table-layout") }}</li> + <li>{{ Cssxref("z-index") }}</li> + <li>{{ Cssxref("column-width") }}</li> +</ul> diff --git a/files/de/web/css/backdrop-filter/index.html b/files/de/web/css/backdrop-filter/index.html new file mode 100644 index 0000000000..910ecc40f8 --- /dev/null +++ b/files/de/web/css/backdrop-filter/index.html @@ -0,0 +1,97 @@ +--- +title: backdrop-filter +slug: Web/CSS/backdrop-filter +tags: + - CSS + - CSS Eigenschaft + - Grafik + - Layout + - NeedsContent + - NeedsLiveSample + - NeedsMobileBrowserCompatibility + - Referenz + - SVG + - SVG Filter + - Web +translation_of: Web/CSS/backdrop-filter +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>backdrop-filter</code> CSS Eigenschaft beschreibt den Bereich hinter einem Element für Effekte wie Unschärfe oder Farbverschiebung, welcher anschließend durch das Element gesehen werden kann, indem die Transparenz/Deckkraft des Elements angepasst wird.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: css">/* Schlüsselwortwert */ +backdrop-filter: none; + +/* URL zu SVG-Filter */ +backdrop-filter: url(commonfilters.svg#filter); + +/* Filterfunktionen */ +backdrop-filter: blur(2px); +backdrop-filter: brightness(60%); +backdrop-filter: contrast(40%); +backdrop-filter: drop-shadow(4px 4px 10px blue); +backdrop-filter: grayscale(30%); +backdrop-filter: hue-rotate(120deg); +backdrop-filter: invert(70%); +backdrop-filter: opacity(20%); +backdrop-filter: sepia(90%); +backdrop-filter: saturate(80%); + +/* Mehrere Filterfunktionen */ +backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%); + +/* Globale Werte */ +backdrop-filter: inherit; +backdrop-filter: initial; +backdrop-filter: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<p>TODO</p> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush: css">backdrop-filter: blur(10px); +</pre> + +<h2 id="Spezifikationen">Spezifikationen</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('Filters 2.0', '#BackdropFilterProperty', 'backdrop-filter')}}</td> + <td>{{Spec2('Filters 2.0')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.properties.backdrop-filter")}} + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{cssxref("filter")}}</li> + <li><a href="http://www.domneill.com/blog/posts/2015/07/28/my-favourite-new-features-in-webkit-and-safari/">Blog Post von Dom Neill mit Beispielen</a></li> + <li><a href="http://product.voxmedia.com/til/2015/2/17/8053347/css-ios-transparency-with-webkit-backdrop-filter">Erstellen von iOS-ähnlichen Transparenzeffekten in CSS mit backdrop-filter</a></li> +</ul> diff --git a/files/de/web/css/backface-visibility/index.html b/files/de/web/css/backface-visibility/index.html new file mode 100644 index 0000000000..f69c76b4d3 --- /dev/null +++ b/files/de/web/css/backface-visibility/index.html @@ -0,0 +1,208 @@ +--- +title: backface-visibility +slug: Web/CSS/backface-visibility +tags: + - CSS + - CSS Eigenschaft + - Experimentell + - Referenz +translation_of: Web/CSS/backface-visibility +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>backface-visibility</code> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft bestimmt, ob die Rückfläche eines Elements sichtbar ist, wenn diese dem Benutzer zugewandt ist. Die Rückfläche eines Elements ist immer ein transparenter Hintergrund, der, wenn sichtbar, ein Spiegelbild der Vorderfläche zeigt.</p> + +<p>Es gibt Fälle, in denen es nicht gewollt ist, die Vorderfläche eines Elements durch die Rückfläche sehen zu können, wie beispielsweise bei einem Kartenumdreheffekt, bei dem zwei Elemente Seite an Seite gelegt werden.</p> + +<p>Diese Eigenschaft hat keine Auswirkung auf 2D-Transformationen, da es bei diesen keine Perspektive gibt.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="brush:css">backface-visibility: visible; +backface-visibility: hidden; +</pre> + +<h3 id="Werte">Werte</h3> + +<p>Diese Eigenschaft kann zwei verschiedene (exclusive) Werte annehmen:</p> + +<ul> + <li><code>visible</code> bedeutet, dass die Rückfläche sichtbar ist, sodass sie die Vorderfläche gespiegelt darstellt;</li> + <li><code>hidden</code> bedeutet, dass die Rückfläche nicht sichtbar ist und damit die Vorderfläche versteckt wird.</li> +</ul> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Würfel_mit_transparenten_Flächen">Würfel mit transparenten Flächen</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><table> + <tbody> + <tr> + <th><code>backface-visibility: visible;</code></th> + <th><code>backface-visibility: hidden;</code></th> + </tr> + <tr> + <td> + <div class="container"> + <div class="cube showbf"> + <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> + </div> + </div> + <p>Alle Flächen sind transparent und die drei Rückflächen sind durch die Vorderflächen sichtbar.</p> + </td> + <td> + <div class="container"> + <div class="cube hidebf"> + <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> + </div> + </div> + <p>Obwohl die Flächen halbtransparent sind, sind die drei Rückflächen nun nicht sichtbar.</p> + </td> + </tr> + </tbody> +</table></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">/* Klassen, die die drei Rückflächen des "Würfels" entweder zeigen oder verstecken */ +.hidebf div { + backface-visibility: hidden; + -webkit-backface-visibility: hidden; +} + +.showbf div { + backface-visibility: visible; + -webkit-backface-visibility: visible; +} + +/* Definiert den Container-DIV, den Würfel-DIV und allgemeine Fläche */ +.container { + width: 150px; + height: 150px; + margin: 75px 0 0 75px; + border: none; +} + +.cube { + width: 100%; + height: 100%; + perspective: 550px; + perspective-origin: 150% 150%; + transform-style: preserve-3d; + -webkit-perspective: 300px; + -webkit-perspective-origin: 150% 150%; + -webkit-transform-style: preserve-3d; +} + +.face { + display: block; + position: absolute; + width: 100px; + height: 100px; + border: none; + line-height: 100px; + font-family: sans-serif; + font-size: 60px; + color: white; + text-align: center; +} + +/* Definiert jede Fläche basierend auf deren Position */ +.front { + background: rgba(0, 0, 0, 0.3); + transform: translateZ(50px); + -webkit-transform: translateZ(50px); +} + +.back { + background: rgba(0, 255, 0, 1); + color: black; + transform: rotateY(180deg) translateZ(50px); + -webkit-transform: rotateY(180deg) translateZ(50px); +} + +.right { + background: rgba(196, 0, 0, 0.7); + transform: rotateY(90deg) translateZ(50px); + -webkit-transform: rotateY(90deg) translateZ(50px); +} + +.left { + background: rgba(0, 0, 196, 0.7); + transform: rotateY(-90deg) translateZ(50px); + -webkit-transform: rotateY(-90deg) translateZ(50px); +} + +.top { + background: rgba(196, 196, 0, 0.7); + transform: rotateX(90deg) translateZ(50px); + -webkit-transform: rotateX(90deg) translateZ(50px) +} + +.bottom { + background: rgba(196, 0, 196, 0.7); + transform: rotateX(-90deg) translateZ(50px); + -webkit-transform: rotateX(-90deg) translateZ(50px); +} + +/* Verschönert die Tabelle ein wenig */ +th, p, td { + background-color: #EEEEEE; + margin: 0px; + padding: 6px; + font-family: sans-serif; + text-align: left; +}</pre> + +<h4 id="Ergebnis">Ergebnis</h4> + +<p>{{ EmbedLiveSample('Beispiele', 620, 460) }}</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Anmerkung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Transforms', '#backface-visibility-property', 'backface-visibility')}}</td> + <td>{{Spec2('CSS3 Transforms')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.properties.backface-visibility")}} + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/Guide/CSS/CSS_Transformationen_verwenden" title="/en-US/docs/CSS/Using_CSS_transforms">CSS Transformationen verwenden</a></li> +</ul> diff --git a/files/de/web/css/background-attachment/index.html b/files/de/web/css/background-attachment/index.html new file mode 100644 index 0000000000..fe0d426df2 --- /dev/null +++ b/files/de/web/css/background-attachment/index.html @@ -0,0 +1,158 @@ +--- +title: background-attachment +slug: Web/CSS/background-attachment +tags: + - CSS + - CSS Background + - CSS Eigenschaft + - CSS Hintergrund + - CSS Referenz + - Referenz +translation_of: Web/CSS/background-attachment +--- +<div>{{CSSRef}}</div> + +<p>Die <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> Eigenschaft <strong><code>background-attachment</code></strong>legt fest, ob die Position eines Hintergrundbildes innerhalb des {{glossary("viewport")}} fixiert ist, oder ob es mit seinem enthaltenden Block scrollt.</p> + +<div>{{EmbedInteractiveExample("pages/css/background-attachment.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> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="brush: css no-line-numbers notranslate">/* Keyword values */ +background-attachment: scroll; +background-attachment: fixed; +background-attachment: local; + +/* Global values */ +background-attachment: inherit; +background-attachment: initial; +background-attachment: unset; +</pre> + +<p>Die Eigenschaft <code>background-attachment</code> wird als einer der Schlüsselwortwerte aus der folgenden Liste angegeben.</p> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code>fixed</code></dt> + <dd>Der Hintergrund ist relativ zum Ansichtsfenster fixiert. Selbst wenn ein Element über einen Bildlaufmechanismus verfügt, bewegt sich der Hintergrund nicht mit dem Element. (Dies ist nicht kompatibel mit {{cssxref("background-clip", "background-clip: text", "#text")}}.)</dd> + <dt><code>local</code></dt> + <dd>Der Hintergrund ist relativ zum Inhalt des Elements fixiert. Wenn das Element über einen Bildlaufmechanismus verfügt, wird der Hintergrund mit dem Inhalt des Elements gescrollt, und der Hintergrundmalbereich und der Hintergrundpositionierungsbereich sind relativ zum scrollbaren Bereich des Elements und nicht zum Rand, der sie umrahmt.</dd> + <dt><code>scroll</code></dt> + <dd>Der Hintergrund ist relativ zum Element selbst fixiert und scrollt nicht mit seinem Inhalt. (Er ist effektiv an den Rand des Elements gebunden).</dd> + <dt>{{cssxref("<initial>")}}</dt> + <dd>Setzt den Standardwert für diese Eigenschaft</dd> + <dt>{{cssxref("<inherit>")}}</dt> + <dd>Diese Eigenschaft erbt den Wert von seinem Elternelement.</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="Beispiele">Beispiele</h2> + +<h3 id="Simple_example" name="Simple_example">Einfaches Beispiel</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><p> + There were doors all round the hall, but they were all locked; and when + Alice had been all the way down one side and up the other, trying every + door, she walked sadly down the middle, wondering how she was ever to + get out again. +</p></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush:css; highlight:[3]; notranslate">p { + background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"); + background-attachment: fixed; +}</pre> + +<h4 id="Ergebnis">Ergebnis</h4> + +<p>{{EmbedLiveSample("Simple_example")}}</p> + +<h3 id="Multiple_background_images" name="Multiple_background_images">Mehrere Hintergründe</h3> + +<p>Diese Eigenschaft unterstützt mehrere Hintergrundbilder. Sie können für jeden Hintergrund ein anderes <code><attachment></code> , durch Kommata getrennt, angeben. Jedes Bild, vom ersten bis zum letzten, wird dem entsprechenden <code><attachment></code> Typ zugeordnet.</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html notranslate"><p> + There were doors all round the hall, but they were all locked; and when + Alice had been all the way down one side and up the other, trying every + door, she walked sadly down the middle, wondering how she was ever to + get out again. + + Suddenly she came upon a little three-legged table, all made of solid + glass; there was nothing on it except a tiny golden key, and Alice's + first thought was that it might belong to one of the doors of the hall; + but, alas! either the locks were too large, or the key was too small, + but at any rate it would not open any of them. However, on the second + time round, she came upon a low curtain she had not noticed before, and + behind it was a little door about fifteen inches high: she tried the + little golden key in the lock, and to her great delight it fitted! +</p></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush:css; highlight:[3]; notranslate">p { + background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"), + url("https://mdn.mozillademos.org/files/12059/startransparent.gif"); + background-attachment: fixed, scroll; + background-repeat: no-repeat, repeat-y; +}</pre> + +<h4 id="Ergebnis_2">Ergebnis</h4> + +<p>{{EmbedLiveSample("Multiple_background_images")}}</p> + +<h2 id="Spezifikationen">Spezifikationen</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 Backgrounds', '#the-background-attachment', 'background-attachment')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>Das Kurzformat-Eigenschaft wurde erweitert, um mehrere Hintergründe und den <code>local</code> Wert zu unterstützen.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-attachment', 'background-attachment')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Keine wesentliche Änderung.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#background-attachment', 'background-attachment')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Keine wesentliche Änderung.</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 https://github.com/mdn/browser-compat-data und senden Sie uns eine Pull-Anfrage.</div> + +<p>{{Compat("css.properties.background-attachment")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/CSS/background" title="de/CSS/background"><code>background</code></a>, <a href="/de/CSS/background-clip" title="de/CSS/background-clip"><code>background-clip</code></a>, <a href="/de/CSS/background-color" title="de/CSS/background-color"><code>background-color</code></a>, <a href="/de/CSS/background-image" title="de/CSS/background-image"><code>background-image</code></a>, <a href="/de/CSS/background-origin" title="de/CSS/background-origin"><code>background-origin</code></a>, <a href="/de/CSS/background-position" title="de/CSS/background-position"><code>background-position</code></a>, <a href="/de/CSS/background-repeat" title="de/CSS/background-repeat"><code>background-repeat</code></a>, <a href="/de/CSS/background-size" title="de/CSS/background-size"><code>background-size</code></a></li> + <li><a href="/de/CSS/-moz-background-inline-policy" title="de/CSS/-moz-background-inline-policy"><code>-moz-background-inline-policy</code></a></li> +</ul> diff --git a/files/de/web/css/background-blend-mode/index.html b/files/de/web/css/background-blend-mode/index.html new file mode 100644 index 0000000000..2423929b79 --- /dev/null +++ b/files/de/web/css/background-blend-mode/index.html @@ -0,0 +1,129 @@ +--- +title: background-blend-mode +slug: Web/CSS/background-blend-mode +tags: + - CSS + - CSS Compositing + - CSS Eigenschaft + - Referenz +translation_of: Web/CSS/background-blend-mode +--- +<div>{{CSSRef}}</div> + +<p>Die <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft <code>background-blend-mode</code> beschreibt, wie sich die Hintergrundbilder eines Elementes, sowie dessen Hintergrundfarbe, miteinander vemischen</p> + +<div>{{EmbedInteractiveExample("pages/css/background-blend-mode.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>Die Blending-Verfahren sollten in der selben Reihenfolge wie die Bilder der <code>background-image</code> Eigenschaft definiert werden. Wenn die Anzahl der Blending-Verfahren nicht mit der Anzahl der Hintergrundbilder übereinstimmt, werden sie wiederholt oder abgeschnitten, bis jedem Hintergrundbild ein Blending-Verfahren zugeordnet werden kann.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css notranslate">/* Ein Wert */ +background-blend-mode: normal; + +/* Zwei Werte, einer pro Hintergrund */ +background-blend-mode: darken, luminosity; + +/* Globale Werte */ +background-blend-mode: initial; +background-blend-mode: inherit; +background-blend-mode: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt>{{cssxref("<blend-mode>")}}</dt> + <dd>Ein {{cssxref("<blend-mode>")}} welcher das Verfahren zur Vermischung von Hintergrundbildern und -farbe beschreibt. Es können mehrere Werte mit Kommas getrennt angegeben werden.</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="Beispiele">Beispiele</h2> + +<h3 id="Einfaches_Beispiel">Einfaches Beispiel</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: css notranslate">.item { + width: 300px; + height: 300px; + background: url('image1.png'),url('image2.png'); + background-blend-mode: screen; +}</pre> + +<h3 id="Examples" name="Examples">Probieren Sie verschiedene Mischmodi aus</h3> + +<pre class="brush: html hidden notranslate"><div id="div"></div> +<select id="select"> + <option>normal</option> + <option>multiply</option> + <option selected>screen</option> + <option>overlay</option> + <option>darken</option> + <option>lighten</option> + <option>color-dodge</option> + <option>color-burn</option> + <option>hard-light</option> + <option>soft-light</option> + <option>difference</option> + <option>exclusion</option> + <option>hue</option> + <option>saturation</option> + <option>color</option> + <option>luminosity</option> +</select></pre> + +<pre class="brush: css hidden notranslate">#div { + width: 300px; + height: 300px; + background: url('https://mdn.mozillademos.org/files/8543/br.png'),url('https://mdn.mozillademos.org/files/8545/tr.png'); + background-blend-mode: screen; +}</pre> + +<pre class="brush: js hidden notranslate">document.getElementById("select").onchange = function(event) { + document.getElementById("div").style.backgroundBlendMode = document.getElementById("select").selectedOptions[0].innerHTML; +} +console.log(document.getElementById('div'));</pre> + +<h4 id="Ergebnis">Ergebnis</h4> + +<p>{{ EmbedLiveSample('Examples', "330", "330") }}</p> + +<h2 id="Spezifikationen">Spezifikationen</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('Compositing', '#background-blend-mode', 'background-blend-mode')}}</td> + <td>{{Spec2('Compositing')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{Compat("css.properties.background-blend-mode")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{cssxref("<blend-mode>")}}</li> + <li>{{cssxref("mix-blend-mode")}}</li> +</ul> diff --git a/files/de/web/css/background-clip/index.html b/files/de/web/css/background-clip/index.html new file mode 100644 index 0000000000..c627b66ce2 --- /dev/null +++ b/files/de/web/css/background-clip/index.html @@ -0,0 +1,110 @@ +--- +title: background-clip +slug: Web/CSS/background-clip +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/background-clip +--- +<p>{{ CSSRef() }}</p> +<h2 id="Übersicht">Übersicht</h2> +<p>Die <code>background-clip</code> Eigenschaft legt fest, ob ein Hintergrundbild oder eine Hintergrundfarbe auch unterhalb des <a href="/de/CSS/border" title="de/CSS/border">Elementrahmens</a> erweitert werden soll. Es können mehrere Werte (durch Kommata getrennt) definiert werden, um unterschiedliche Einstellungen für mehrere Hintergrundbilder festzulegen.<br> + Die Eigenschaft <code>-moz-background-clip</code> wird bis einschließlich Gecko 1.9.2 (Firefox 3.6) unterstützt.</p> +<div class="note"> + <strong>Hinweis</strong>: Um ältere und neuere Versionen von Gecko (Firefox) zu unterstützen, sollten Sie beide Eigenschaften (mit und ohne <code>-moz-</code>) im Stylesheet notieren. Siehe <a href="#Beispiele">Beispiele</a>.</div> +<p>Wenn kein <code>background-image</code> vorhanden ist, hat diese Eigenschaft nur einen sichtbaren Effekt, wenn der Rahmen über transparente oder teilweise transparente Bereiche verfügt (siehe <a href="/de/CSS/border-style" title="de/CSS/border-style">border-style</a>). Andernfalls sind nur die Effekte des Rahmens selbst zu sehen.</p> +<ul> + <li>Standardwert: <code>border-box</code></li> + <li>Anwendbar auf: alle Elemente</li> + <li>Vererbbar: Nein</li> + <li>Prozentwerte: Nein</li> + <li>Medium: visuell</li> + <li>berechneter Wert: wie festgelegt</li> +</ul> +<h2 id="Syntax">Syntax</h2> +<pre class="eval">background-clip: [ border-box | padding-box | content-box][, [ border-box | padding-box | content-box]]* + +-moz-background-clip: [border | padding][, [border | padding]]* /* Gecko 1.2-1.9.2 (Firefox 1.0-3.6) */ +</pre> +<h2 id="Werte">Werte</h2> +<dl> + <dt> + border-box {{ gecko_minversion_inline("2.0") }} bzw. border <small>(Firefox 1.0-3.6)</small></dt> + <dd> + Standardwert.Der Hintergrund erstreckt sich bis zur äußeren Ecke des Rahmens (aber unterhalb des Rahmens auf der Z-Achse).</dd> + <dt> + padding-box {{ gecko_minversion_inline("2.0") }} bzw. padding <small>(Firefox 1.0-3.6)</small></dt> + <dd> + Es wird kein Hintergrund unterhalb des Rahmens gezeichnet (der Hintergrund erstreckt sich bis zur äußeren Ecke des Innenabstands (padding).</dd> + <dt> + content-box {{ gecko_minversion_inline("2.0") }}</dt> + <dd> + Der Hintergrund wird innerhalb des Inhalts (content box) gezeichnet.</dd> +</dl> +<h2 id="Beispiele">Beispiele</h2> +<pre style="overflow: visible; border: 1em navy; border-style: dotted double; background: tomato; background-clip: padding-box;">pre { + border: 1em navy; + border-style: dotted double; + background: tomato; + /* Der rote Hintergrund wird nicht unter den Rahmen wandern */ + -moz-background-clip: padding; /* Firefox 1.0-3.6 */ + -webkit-background-clip: padding-box; /* Safari, Chrome */ + background-clip: padding-box; /* Firefox 4.0+, Opera */ +} +</pre> +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> +<table class="standard-table"> + <tbody> + <tr> + <th>Browser</th> + <th>ab Version</th> + <th>Unterstützung von</th> + </tr> + <tr> + <td>Chrome</td> + <td>1.0</td> + <td><code>background-clip: padding-box | border-box | content-box</code></td> + </tr> + <tr> + <td rowspan="2">Firefox (Gecko)</td> + <td>1.0-3.6 (1.2-1.9.2)</td> + <td><code>-moz-background-clip: padding | border</code></td> + </tr> + <tr> + <td>4.0 (2.0)</td> + <td><code>background-clip: padding-box | border-box | content-box</code></td> + </tr> + <tr> + <td>Internet Explorer</td> + <td>9.0</td> + <td><code>background-clip: padding-box | border-box | content-box</code></td> + </tr> + <tr> + <td>Opera</td> + <td>10.5</td> + <td><code>background-clip: padding-box | border-box</code></td> + </tr> + <tr> + <td>Safari (WebKit)</td> + <td>3.0 (522)</td> + <td><code>-webkit-background-clip: padding | border | content</code><br> + <code>-webkit-background-clip: padding-box | border-box | content-box</code></td> + </tr> + </tbody> +</table> +<ul> + <li>[*]: Der IE 7 (keine anderen IE-Versionen) verhält sich wie <code>background-clip:padding</code> wenn <code>overflow: hidden | auto | scroll</code> festgelegt wurde.</li> + <li>Konqueror 3.5.4 unterstützt <code>-khtml-background-clip</code>.</li> +</ul> +<h2 id="Spezifikation">Spezifikation</h2> +<ul> + <li><a class="external" href="http://www.w3.org/TR/css3-background/#the-background-clip" lang="en">CSS 3 Backgrounds and Borders #background-clip</a></li> + <li><a class="external" href="http://dev.w3.org/csswg/css3-background/#the-background-clip" lang="en">CSS 3 Editor's Draft </a> (enthält <code>content-box</code>)</li> +</ul> +<h2 id="Siehe_auch">Siehe auch</h2> +<ul> + <li><a href="/de/CSS/background" title="de/CSS/background"><code>background</code></a>, <a href="/de/CSS/background-attachment" title="de/CSS/background-attachment"><code>background-attachment</code></a>, <a href="/de/CSS/background-color" title="de/CSS/background-color"><code>background-color</code></a>, <a href="/de/CSS/background-image" title="de/CSS/background-image"><code>background-image</code></a>, <a href="/de/CSS/background-origin" title="de/CSS/background-origin"><code>background-origin</code></a>, <a href="/de/CSS/background-position" title="de/CSS/background-position"><code>background-position</code></a>, <a href="/de/CSS/background-repeat" title="de/CSS/background-repeat"><code>background-repeat</code></a>, <a href="/de/CSS/background-size" title="de/CSS/background-size"><code>background-size</code></a></li> + <li><a href="/de/CSS/-moz-background-inline-policy" title="de/CSS/-moz-background-inline-policy"><code>-moz-background-inline-policy</code></a></li> + <li><a href="/de/CSS/clip" title="de/CSS/clip"><code>clip</code></a></li> +</ul> +<p>{{ languages( { "en": "en/CSS/background-clip", "fr": "fr/CSS/-moz-background-clip", "ja": "ja/CSS/-moz-background-clip", "pl": "pl/CSS/-moz-background-clip" } ) }}</p> diff --git a/files/de/web/css/background-color/index.html b/files/de/web/css/background-color/index.html new file mode 100644 index 0000000000..6db5caa387 --- /dev/null +++ b/files/de/web/css/background-color/index.html @@ -0,0 +1,133 @@ +--- +title: background-color +slug: Web/CSS/background-color +tags: + - CSS + - CSS Eigenschaft + - CSS Hintergrund + - Grafik + - Layout + - Referenz +translation_of: Web/CSS/background-color +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <strong><code>background-color</code></strong> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft setzt die Hintergrundfarbe eines Elements, entweder durch einen Farbwert oder das Schlüsselwort <code>transparent</code>.</p> + +<div>{{cssinfo}}</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: css notranslate">/* Schlüsselwortwerte */ +background-color: red; + +/* Hexadezimalwert */ +background-color: #bbff00; + +/* RGB-Wert */ +background-color: rgb(255, 255, 128); + +/* HSLA-Wert */ +background-color: hsla(50, 33%, 25%, 0.75); + +/* Spezielle Schlüsselwortwerte */ +background-color: currentColor; +background-color: transparent; + +/* Globale Werte */ +background-color: inherit; +background-color: initial; +background-color: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code><color></code></dt> + <dd>Ist ein CSS {{cssxref("<color>")}} Wert, der die einheitliche Farbe des Hintergrunds beschreibt. Sogar wenn ein oder mehrere {{cssxref("background-image")}} definiert sind, kann diese Farbe die Darstellung durch Transparenzen in den Bildern beeinflussen. In CSS ist <code>transparent</code> eine Farbe.</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><div class="exampleone"> + Lorem ipsum dolor sit amet, consectetuer +</div> + +<div class="exampletwo"> + Lorem ipsum dolor sit amet, consectetuer +</div> + +<div class="examplethree"> + Lorem ipsum dolor sit amet, consectetuer +</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css; highlight:[2,7,12,17]; notranslate">.exampleone { + background-color: teal; + color: white; +} + +.exampletwo { + background-color: rgb(153,102,153); + color: rgb(255,255,204); +} + +.examplethree { + background-color: #777799; + color: #FFFFFF; +} +</pre> + +<h3 id="Ergebnis">Ergebnis</h3> + +<p>{{EmbedLiveSample("Beispiele","200","150")}}</p> + +<h2 id="Spezifikationen">Spezifikationen</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 Backgrounds', '#background-color', 'background-color')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>Obwohl das Schlüsselwort <code>transparent</code> technisch entfernt wurde, ändert dies nichts, da es als echter {{cssxref("<color>")}} integriert wurde.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-color', 'background-color')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Keine Änderung</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#background-color', 'background-color')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{Compat("css.properties.background-color")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li> + <p><a href="/de/docs/Web/Guide/CSS/mehrere_Hintergründe_verwenden">Mehrere Hintergründe</a></p> + </li> +</ul> diff --git a/files/de/web/css/background-image/index.html b/files/de/web/css/background-image/index.html new file mode 100644 index 0000000000..2c49b17489 --- /dev/null +++ b/files/de/web/css/background-image/index.html @@ -0,0 +1,155 @@ +--- +title: background-image +slug: Web/CSS/background-image +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/background-image +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>background-image</code>-Eigenschaft legt ein oder mehrere Hintergrundbilder für ein Element fest. Die einzelnen Bilder werden übereinander gestapelt, wobei die erste Schicht so dargestellt wird, dass sie dem Benutzer am nächsten erscheint. Hintergrundbilder werden immer über Hintergrundfarben gelegt.</p> + +<p>Um bei ausgeschalteten Grafiken oder Fehlern beim Laden des Bildes einen ausreichenden Kontrast zu gewährleisten, ist es deshalb sinnvoll, immer eine Hintergrundfarbe mittels <a href="/de/CSS/background-color" title="de/CSS/background-color"><code>background-color</code></a> anzugeben. Die Kurzform <a href="/de/CSS/background" title="de/CSS/background"><code>background</code></a> bietet sich an, um beides zu notieren.</p> + +<div class="note">Ab Gecko 1.9.2 (Firefox 3.6) können mehrere Hintergrundbilder, durch Kommata getrennt, definiert werden.<br> +Das zuerst definierte Hintergrundbild ist dabei das Oberste.</div> + +<ul> + <li>Standardwert: <code>none</code></li> + <li>Anwendbar auf: Alle Elemente</li> + <li>Vererbbar: Nein</li> + <li>Prozentwerte: Nein</li> + <li>Medium: visuell</li> + <li>berechneter Wert: absolute URI oder <code>none</code></li> +</ul> + +<h2 id="Syntax">Syntax</h2> + +<pre class="eval">background-image: <Hintergrundbild>[, <Hintergrundbild>]* + +<strong><Hintergrundbild></strong>: +none | url | inherit | -moz-linear-gradient() | -moz-radial-gradient() + +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt>none</dt> + <dd>Standardwert. Es wird kein Hintergrundbild verwendet.</dd> + <dt>url</dt> + <dd>Der Pfad des Bildes, das als Hintergrund angezeigt werden soll.</dd> + <dt>inherit</dt> + <dd>Der Wert des Elternelements wird geerbt.</dd> +</dl> + +<h4 id="Mozilla_Erweiterungen">Mozilla Erweiterungen:</h4> + +<dl> + <dt><a href="/de/CSS/-moz-linear-gradient" title="de/CSS/-moz-linear-gradient"><code>-moz-linear-gradient()</code></a> {{ gecko_minversion_inline("1.9.2") }}</dt> + <dd>Linearer Verlauf</dd> + <dt><a href="/de/CSS/-moz-radial-gradient" title="de/CSS/-moz-radial-gradient"><code>-moz-radial-gradient()</code></a> {{ gecko_minversion_inline("1.9.2") }}</dt> + <dd>Radialer Verlauf</dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<p>Es ist zu beachten, dass das Bild des Sterns teilweise transparent ist und das Katzenbild überlagert. </p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div> + <p class="catsandstars"> + This paragraph is full of cats<br />and stars. + </p> + <p>This paragraph is not.</p> + <p class="catsandstars"> + Here are more cats for you.<br />Look at them! + </p> + <p>And no more.</p> +</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">pre, p { + font-size: 1.5em; + color: #FE7F88; + background-color: transparent; +} + +div { + background-image: url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png"); +} + +p { + background-image: none; +} + +.catsandstars { + background-image: url("https://mdn.mozillademos.org/files/11991/startransparent.gif"), + url("https://mdn.mozillademos.org/files/7693/catfront.png"); + background-color: transparent; +} +</pre> + +<h3 id="Ergebnis">Ergebnis</h3> + +<p>{{EmbedLiveSample('Beispiele')}}</p> + +<h2 id="Browser_Kompatibilität">Browser <span>Kompatibilität</span></h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Browser</th> + <th>ab Version</th> + <th>mehrere Hintergrundbilder</th> + <th>Verläufe</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>4.0</td> + <td>---</td> + <td>---</td> + </tr> + <tr> + <td>Firefox (Gecko)</td> + <td>1.0 (1.0)</td> + <td>3.6 (1.9.2)</td> + <td>3.6 (1.9.2) [-moz-]</td> + </tr> + <tr> + <td>Opera</td> + <td>3.5</td> + <td>10.5</td> + <td>---</td> + </tr> + <tr> + <td>Safari (WebKit)</td> + <td>1.0 (85)</td> + <td>1.3 (312)</td> + <td>4.0 (528) [<a class="external" href="http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariCSSRef/Articles/Functions.html#//apple_ref/doc/uid/TP40007955-SW25">-webkit-</a>]</td> + </tr> + </tbody> +</table> + +<h2 id="Spezifikation">Spezifikation</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/css3-background/#background-image" lang="en">CSS 3 Background and Borders #background-image</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-image" lang="en">CSS 2.1 Colors and Backgrounds #background-image</a></li> + <li><a class="external" href="http://dev.w3.org/csswg/css3-images/#gradients-" lang="en">CSS 3 Images #gradients</a> (Editor's Draft)</li> +</ul> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/CSS/background" title="de/CSS/background"><code>background</code></a>, <a href="/de/CSS/background-attachment" title="de/CSS/background-attachment"><code>background-attachment</code></a>, <a href="/de/CSS/background-clip" title="de/CSS/background-clip"><code>background-clip</code></a>, <a href="/de/CSS/background-color" title="de/CSS/background-color"><code>background-color</code></a>, <a href="/de/CSS/background-origin" title="de/CSS/background-origin"><code>background-origin</code></a>, <a href="/de/CSS/background-position" title="de/CSS/background-position"><code>background-position</code></a>, <a href="/de/CSS/background-repeat" title="de/CSS/background-repeat"><code>background-repeat</code></a>, <a href="/de/CSS/background-size" title="de/CSS/background-size"><code>background-size</code></a></li> + <li><a href="/de/CSS/-moz-background-inline-policy" title="de/CSS/-moz-background-inline-policy"><code>-moz-background-inline-policy</code></a></li> + <li><a href="/de/CSS/-moz-linear-gradient" title="de/CSS/-moz-linear-gradient"><code>-moz-linear-gradient</code></a>, <a href="/de/CSS/-moz-radial-gradient" title="de/CSS/-moz-radial-gradient"><code>-moz-radial-gradient</code></a>, <a href="/de/CSS/-moz-repeating-linear-gradient" title="de/CSS/-moz-repeating-linear-gradient"><code>-moz-repeating-linear-gradient</code></a>, <a href="/de/CSS/-moz-repeating-radial-gradient" title="de/CSS/-moz-repeating-radial-gradient"><code>-moz-repeating-radial-gradient</code></a></li> +</ul> + +<p>{{ languages( {"en": "en/CSS/background-image", "fr": "fr/CSS/background-image", "pl": "pl/CSS/background-image", "es": "es/CSS/background-image" } ) }}</p> diff --git a/files/de/web/css/background-origin/index.html b/files/de/web/css/background-origin/index.html new file mode 100644 index 0000000000..694b12b3e4 --- /dev/null +++ b/files/de/web/css/background-origin/index.html @@ -0,0 +1,60 @@ +--- +title: background-origin +slug: Web/CSS/background-origin +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/background-origin +--- +<p>{{ CSSRef() }}</p> +<h3 id="Übersicht">Übersicht</h3> +<p>Die <code>background-origin</code> Eigenschaft legt den Bereich des Hintergrundbildes fest (bzw. den Ausgangspunkt eines <a href="/de/CSS/background-image" title="de/CSS/background-image"><code>background-image</code></a>). <code>background-origin</code> hat keinen Effekt, wenn <a href="/de/CSS/background-attachment" title="de/CSS/background-attachment"><code>background-attachment</code></a> auf <code>fixed</code> gesetzt wurde. Es können mehrere Werte (durch Kommata getrennt) definiert werden, um unterschiedliche Einstellungen für mehrere Hintergrundbilder festzulegen.</p> +<p>Die Eigenschaft <code>-moz-background-origin</code> wird bis einschließlich Gecko 1.9.2 (Firefox 3.6) unterstützt.</p> +<p> </p> +<div class="note"><strong>Hinweis</strong>: Um ältere und neuere Versionen von Gecko (Firefox) zu unterstützen, sollten Sie beide Eigenschaften (mit und ohne <code>-moz-</code>) im Stylesheet notieren. Siehe <a href="/de/CSS/background-origin#Beispiele" title="de/CSS/background-origin#Beispiele">Beispiele</a>.</div> +<p>Der Wert dieser Eigenschaft wird durch die Kurzformeigenschaft <a href="/de/CSS/background" title="de/CSS/background"><code>background</code></a> auf den Standardwert (<code>padding-box</code>) zurückgesetzt.</p> +<ul> <li>Standardwert: <code>padding-box</code></li> <li>Anwendbar auf: alle Elemente</li> <li>Vererbbar: Nein</li> <li>Prozentwerte: Nein</li> <li>Medium: visuell</li> <li>berechneter Wert: wie festgelegt</li> +</ul> +<h3 id="Syntax">Syntax</h3> +<pre class="eval">/* seit Gecko 2.0 (Firefox 4.0) */ +background-origin: [padding-box | border-box | content-box][, [border-box | padding-box | content-box]]* + +/* ältere Versionen (mehrere Hintergründe seit Gecko 1.9.2 / Firefox 3.6) */ +-moz-background-origin: [padding | border | content][, [border | padding | content]]* +</pre> +<h3 id="Werte">Werte</h3> +<dl> <dt>padding-box {{ gecko_minversion_inline("2.0") }} bzw. padding <small>(Firefox 1.0-3.6)</small></dt> <dd>Standardwert. Die Hintergrundposition ist relativ zum <code>padding</code>. (Für einzelne Boxen ist "<code>0 0</code>" die obere linke Ecke der <em>padding edge</em> und "<code>100% 100%</code>" ist die untere rechte Ecke.)</dd> <dt>border-box {{ gecko_minversion_inline("2.0") }} bzw. border <small>(Firefox 1.0-3.6)</small></dt> <dd>Die Hintergrundposition ist relativ zum Rahmen (<code>border</code>), sodass sich das Hintergrundbild hinter dem Rahmen befinden kann.</dd> <dt>content-box {{ gecko_minversion_inline("2.0") }} bzw. content <small>(Firefox 1.0-3.6)</small></dt> <dd>Die Hintergrundposition ist relativ zum Inhalt.</dd> +</dl> +<h3 id="Beispiele">Beispiele</h3> +<h4 id="Hintergrundbild_im_padding-Bereich">Hintergrundbild im padding-Bereich</h4> +<pre> .example { + border: 10px double; + padding: 10px; + background: url('image.jpg'); + background-position: center left; + -moz-background-origin: content; /* Firefox 1.0-3.6 */ + -webkit-background-origin: content-box; /* Safari, Chrome */ + background-origin: content-box; /* Firefox 4.0+ */ +} +</pre> +<h4 id="Mehrere_Hintergrundbilder_gecko_minversion_inline(1.9.2)">Mehrere Hintergrundbilder {{ gecko_minversion_inline("1.9.2") }}</h4> +<pre>div { + background-image: url('mainback.png'), url('logo.jpg'); + background-position: 0px 0px, top right; + -moz-background-origin: padding, content; + -webkit-background-origin: padding-box, content-box; + background-origin: padding-box, content-box; +} +</pre> +<h3 id="Browser_Kompatibilität">Browser Kompatibilität</h3> +<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>ab Version</th> <th>Unterstützung von</th> </tr> <tr> <td>Internet Explorer</td> <td>---</td> <td>--- [*]</td> </tr> <tr> <td rowspan="2">Firefox (Gecko)</td> <td>1.0-3.6 (1.2-1.9.2)</td> <td><code>-moz-background-origin: padding | border | content</code></td> </tr> <tr> <td>4.0 (1.9.3)</td> <td><code>background-origin: padding-box | border-box | content-box</code></td> </tr> <tr> <td>Opera</td> <td>10.5</td> <td><code>background-origin: padding-box | border-box | content-box</code></td> </tr> <tr> <td>Safari (WebKit)</td> <td>3.0 (522)</td> <td><code>-webkit-background-origin: padding | border | content </code><br> <code>-webkit-background-origin: padding-box | border-box | content-box</code></td> </tr> </tbody> +</table> +<ul> <li>[*]: Der Standardwert ist bis einschließlich IE7 <code>border-box</code>.</li> <li>Der IE8 kennt <code>padding-box</code> als Standard.</li> <li>Konqueror 3.5.4 unterstützt <code>-khtml-background-origin</code>.</li> +</ul> +<h3 id="Spezifikation">Spezifikation</h3> +<ul> <li><a class="external" href="http://www.w3.org/TR/css3-background/#background-origin" lang="en">CSS 3 Backgrounds and Borders #background-origin</a> <br> (Standardisiert sind <code>padding-box</code>, <code>border-box</code>, und <code>content-box</code>)</li> +</ul> +<h3 id="Siehe_auch">Siehe auch</h3> +<ul> <li><a href="/de/CSS/background" title="de/CSS/background"><code>background</code></a>, <a href="/de/CSS/background-attachment" title="de/CSS/background-attachment"><code>background-attachment</code></a>, <a href="/de/CSS/background-color" title="de/CSS/background-color"><code>background-color</code></a>, <a href="/de/CSS/background-clip" title="de/CSS/background-clip"><code>background-clip</code></a>, <a href="/de/CSS/background-image" title="de/CSS/background-image"><code>background-image</code></a>, <a href="/de/CSS/background-position" title="de/CSS/background-position"><code>background-position</code></a>, <a href="/de/CSS/background-repeat" title="de/CSS/background-repeat"><code>background-repeat</code></a>, <a href="/de/CSS/background-size" title="de/CSS/background-size"><code>background-size</code></a></li> <li><a href="/de/CSS/-moz-background-inline-policy" title="de/CSS/-moz-background-inline-policy"><code>-moz-background-inline-policy</code></a></li> +</ul> +<p>{{ languages( { "en": "en/CSS/background-origin", "fr": "fr/CSS/-moz-background-origin", "ja": "ja/CSS/-moz-background-origin", "pl": "pl/CSS/-moz-background-origin" } ) }}</p> diff --git a/files/de/web/css/background-position/index.html b/files/de/web/css/background-position/index.html new file mode 100644 index 0000000000..03c3c64c4e --- /dev/null +++ b/files/de/web/css/background-position/index.html @@ -0,0 +1,86 @@ +--- +title: background-position +slug: Web/CSS/background-position +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/background-position +--- +<p>{{ CSSRef() }}</p> +<h3 id="Übersicht">Übersicht:</h3> +<p>Die <code>background-position</code> Eigenschaft bestimmt die Position des Hintergrundbildes</p> +<div class="note">Ab Gecko 1.9.2 (Firefox 3.6) können mehrere Hintergrundpositionen, durch Kommata getrennt, definiert werden.<br> +Vorherige Versionen unterstützen nur einen Wert.</div> +<ul> <li>Standardwert: <code>0% 0%</code></li> <li>Anwendbar auf: Alle Elemente</li> <li>Vererbbar: Nein</li> <li>Prozentwerte: Beziehen sich auf den Positionierungsbereich (z.B. Größe eines <code><div></code>) minus der Bildgröße</li> <li>Medium: visuell</li> <li>berechneter Wert: für <Länge> der absolute Wert; sonst eine Prozentzahl</li> +</ul> +<h3 id="Syntax">Syntax</h3> +<pre class="eval">background-position: <Hintergrundposition>[, <Hintergrundposition>]* + +<strong><Hintergrundposition></strong>: + [ [ <Prozentzahl> | <Länge> | left | center | right ] ] + [ [ <Prozentzahl> | <Länge> | top | center | bottom ] ]? +| + [ center | [ left | right ] [ <Prozentzahl> | <Länge> ]? ] || [ center | [ top | bottom ] [ <Prozentzahl> | <Länge> ]? ] ] +| + inherit +</pre> +<h3 id="Werte">Werte</h3> +<p>Möglich sind ein oder zwei Werte. Negative <a href="/de/CSS/Einheiten#Prozent" title="de/CSS/Einheiten#Prozent"><Prozentzahlen></a> und <a href="/de/CSS/Einheiten#L.c3.a4ngen" title="de/CSS/Einheiten#L.c3.a4ngen"><Längen></a> sind erlaubt. <br> +Wenn nur ein Wert angegeben wird, ist der zweite automatisch <code>center</code>.<br> +Der erste Wert gibt die horizontale, der zweite die vertikale Position an (Es sei denn, mindestens ein Wert ist ein Schlüsselwort).</p> +<dl> <dt><Prozentwert></dt> <dd>Mit einem Wert von <code>0% 0%</code> (gleichbedeutend zu <code>0 0</code>) wird das Bild an der oberen linken Ecke ausgerichtet. <br> Mit einem Wert von <code>100% 100%</code> wird das Bild an der unteren rechten Ecke ausgerichtet. <br> Mit einem Wert von <code>50% 50%</code> wird das Bild horizontal und vertikal zentriert. <br> Die absoluten Werte werden aus der Größe des Postionierungsbereichs minus der Bildgröße berechnet (Siehe <a href="#Berechnung_der_Prozentwerte">Berechnung der Prozentwerte</a>).</dd> <dt><Länge></dt> <dd>Verschiebung vom Ursprung (obere linke Ecke)</dd> <dt>left</dt> <dd>Gleichbedeutend für <code>0%</code> für die horizontale Postion</dd> <dt>center</dt> <dd>Gleichbedeutend für <code>50%</code> für die horizontale Position, wenn diese nicht festgelegt ist, sonst gleichbedeutend für <code>50%</code> für die vertikale Postion.</dd> <dt>right</dt> <dd>Gleichbedeutend für <code>100%</code> für die horizontale Postion</dd> <dt>top</dt> <dd>Gleichbedeutend für <code>0%</code> für die vertikale Postion</dd> <dt>bottom</dt> <dd>Gleichbedeutend für <code>100%</code> für die vertikale Postion</dd> <dt>inherit</dt> <dd>Der Wert des Elternelements wird geerbt.</dd> +</dl> +<h3 id="Beispiele">Beispiele</h3> +<h4 id="Berechnung_der_Prozentwerte">Berechnung der Prozentwerte</h4> +<pre>.beispielNull { + width: 320px; /* 50% der Bereichsbreite = 160px */ + height: 320px; /* 50% Bereichshöhe = 160px */ + + background-image: url(32x32.jpg)/* 50% der Bildbreite/Bildhöhe = 16px */ + + background-position: 50% 50%; /* 160px-16px = 144px */ + /* 50% 50% entspricht also: 144px 144px /* +} +</pre> +<h4 id="Positionen_für_einzelne_Hintergrundbilder">Positionen für einzelne Hintergrundbilder</h4> +<pre>.beispielEins { + background-image: url("logo.png"); + background-position: top; +} + +.beispielZwei { + background-image: url("logo.png"); + background-position: 25% 75%; +} + +.beispielDrei { + background: url("logo.png") 2cm bottom; +} + +.beispielVier { + background-image: url("logo.png"); + background-position: center 10%; +} + +.beispielFuenf { + background: url("logo.png") 3em 50%; +} + +</pre> +<h4 id="Positionen_für_mehrere_Hintergrundbilder_gecko_minversion_inline(1.9.2)">Positionen für mehrere Hintergrundbilder {{ gecko_minversion_inline("1.9.2") }}</h4> +<pre>.beispielSechs { + background-image: url("img1.png"), url("img2.png"); + background-position: 0px 0px, center; +} + +</pre> +<h3 id="Browser_Kompatibilität">Browser <span>Kompatibilität</span></h3> +<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>ab Version</th> <th>mehrere Hintergrundbilder</th> </tr> <tr> <td>Internet Explorer</td> <td>4.0</td> <td>---</td> </tr> <tr> <td>Firefox (Gecko)</td> <td>1.0 (1.0)</td> <td>3.6 (1.9.2)</td> </tr> <tr> <td>Opera</td> <td>3.5</td> <td>10.5</td> </tr> <tr> <td>Safari (WebKit)</td> <td>1.0 (85)</td> <td>1.3 (312)</td> </tr> </tbody> +</table> +<h3 id="Spezifikation">Spezifikation</h3> +<ul> <li><a class="external" href="http://www.w3.org/TR/css3-background/#background-position" lang="en">CSS 3 Background and Borders #background-position</a></li> <li><a class="external" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-position" lang="en">CSS 2.1 Colors and Backgrounds #background-position</a></li> +</ul> +<h3 id="Siehe_auch">Siehe auch</h3> +<ul> <li><a href="/de/CSS/background" title="de/CSS/background"><code>background</code></a>, <a href="/de/CSS/background-attachment" title="de/CSS/background-attachment"><code>background-attachment</code></a>, <a href="/de/CSS/background-clip" title="de/CSS/background-clip"><code>background-clip</code></a>, <a href="/de/CSS/background-color" title="de/CSS/background-color"><code>background-color</code></a>, <a href="/de/CSS/background-image" title="de/CSS/background-image"><code>background-image</code></a>, <a href="/de/CSS/background-origin" title="de/CSS/background-origin"><code>background-origin</code></a>, <a href="/de/CSS/background-repeat" title="de/CSS/background-repeat"><code>background-repeat</code></a>, <a href="/de/CSS/background-size" title="de/CSS/background-size"><code>background-size</code></a></li> <li><a href="/de/CSS/-moz-background-inline-policy" title="de/CSS/-moz-background-inline-policy"><code>-moz-background-inline-policy</code></a></li> +</ul> +<p>{{ languages( { "en": "en/CSS/background-position", "fr": "fr/CSS/background-position", "pl": "pl/CSS/background-position", "es": "es/CSS/background-position" } ) }}</p> diff --git a/files/de/web/css/background-repeat/index.html b/files/de/web/css/background-repeat/index.html new file mode 100644 index 0000000000..7dd8a25693 --- /dev/null +++ b/files/de/web/css/background-repeat/index.html @@ -0,0 +1,166 @@ +--- +title: background-repeat +slug: Web/CSS/background-repeat +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/background-repeat +--- +<p>{{ CSSRef() }}</p> + +<h3 id="Übersicht">Übersicht:</h3> + +<p>Die <code>background-repeat</code> Eigenschaft bestimmt, ob und wie Hintergrundbilder wiederholt werden.</p> + +<div class="note">Ab Gecko 1.9.2 (Firefox 3.6) können mehrere Hintergrundwiederholungen, durch Kommata getrennt, definiert werden.<br> +Vorherige Versionen unterstützen nur einen Wert.</div> + +<ul> + <li>Standardwert: <code>repeat</code></li> + <li>Anwendbar auf: Alle Elemente</li> + <li>Vererbbar: Nein</li> + <li>Prozentwerte: Nein</li> + <li>Medium: visuell</li> + <li>berechneter Wert: wie festgelegt</li> +</ul> + +<h3 id="Syntax">Syntax</h3> + +<pre class="eval">background-repeat: <Hintergrundwiederholung>[, <Hintergrundwiederholung>]* + +<strong><Hintergrundwiederholung></strong>: +repeat | repeat-x | repeat-y | no-repeat | round | space | inherit +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt>repeat</dt> + <dd>Das Hintergrundbild wird horizontal und vertikal wiederholt.</dd> + <dt>repeat-x</dt> + <dd>Das Hintergrundbild wird nur horizontal wiederholt.</dd> + <dt>repeat-y</dt> + <dd>Das Hintergrundbild wird nur vertikal wiederholt.</dd> + <dt>no-repeat</dt> + <dd>Das Hintergrundbild wird nicht wiederholt. Nur ein Exemplar wird angezeigt.</dd> + <dt>round</dt> + <dd>{{ unimplemented_inline() }} Das Hintergrundbild wird so oft wiederholt, wie es in das Element hinein passt. Dabei kann das Hintergrundbild in seiner Größe angepasst werden, um auf die volle Breite bzw. Höhe des Elements ausgestreckt zu werden.</dd> + <dt>space</dt> + <dd>{{ unimplemented_inline() }} Das Hintergrundbild wird so oft wiederholt, wie es in das Element hinein passt. Allerdings wird die Bildgröße nicht angepasst, sondern soviel Platz zwischen den Hintergrundbildern gelassen, sodass sich der Hintergrund auf das gesamte Element verteilt.</dd> + <dt>inherit</dt> + <dd>Der Wert des Elternelements wird geerbt.</dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><ol> + <li>no-repeat + <div class="one">&nbsp;</div> + </li> + <li>repeat + <div class="two">&nbsp;</div> + </li> + <li>repeat-x + <div class="three">&nbsp;</div> + </li> + <li>repeat-y + <div class="four">&nbsp;</div> + </li> + <li>repeat-x, repeat-y (multiple images) + <div class="five">&nbsp;</div> + </li> +</ol></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">/* Shared for all DIVS in example */ +li {margin-bottom: 12px;} +div { + background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif); + width: 144px; + height: 84px; +} + +/* background repeat CSS */ +.one { + background-repeat: no-repeat; +} +.two { + background-repeat: repeat; +} +.three { + background-repeat: repeat-x; +} +.four { + background-repeat: repeat-y; +} + +/* Multiple images */ +.five { + background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif), + url(https://developer.cdn.mozilla.net/media/redesign/img/favicon32.png); + background-repeat: repeat-x, + repeat-y; + height: 144px; +}</pre> + +<h3 id="Result">Result</h3> + +<p>In this example, each list item is matched with a different value of <code>background-repeat</code>.</p> + +<p>{{EmbedLiveSample('Beispiele', 240, 360)}}</p> + +<h3 id="Browser_Kompatibilität">Browser <span>Kompatibilität</span></h3> + +<table class="standard-table"> + <tbody> + <tr> + <th>Browser</th> + <th>ab Version</th> + <th>mehrere Hintergrundbilder</th> + <th><code>round</code> und <code>space</code> Werte</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>4.0</td> + <td>---</td> + <td>---</td> + </tr> + <tr> + <td>Firefox (Gecko)</td> + <td>1.0 (1.0)</td> + <td>3.6 (1.9.2)</td> + <td>---</td> + </tr> + <tr> + <td>Opera</td> + <td>3.5</td> + <td>10.5</td> + <td>10.5</td> + </tr> + <tr> + <td>Safari (WebKit)</td> + <td>1.0 (85)</td> + <td>1.3 (312)</td> + <td>---</td> + </tr> + </tbody> +</table> + +<h3 id="Spezifikation">Spezifikation</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/css3-background/#background-repeat" lang="en">CSS 3 Background and Borders #background-repeat</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-repeat" lang="en">CSS 2.1 Colors and Backgrounds #background-repeat</a></li> +</ul> + +<h3 id="Siehe_auch">Siehe auch</h3> + +<ul> + <li><a href="/de/CSS/background" title="de/CSS/background"><code>background</code></a>, <a href="/de/CSS/background-attachment" title="de/CSS/background-attachment"><code>background-attachment</code></a>, <a href="/de/CSS/background-clip" title="de/CSS/background-clip"><code>background-clip</code></a>, <a href="/de/CSS/background-color" title="de/CSS/background-color"><code>background-color</code></a>, <a href="/de/CSS/background-image" title="de/CSS/background-image"><code>background-image</code></a>, <a href="/de/CSS/background-origin" title="de/CSS/background-origin"><code>background-origin</code></a>, <a href="/de/CSS/background-position" title="de/CSS/background-position"><code>background-position</code></a>, <a href="/de/CSS/background-size" title="de/CSS/background-size"><code>background-size</code></a></li> + <li><a href="/de/CSS/-moz-background-inline-policy" title="de/CSS/-moz-background-inline-policy"><code>-moz-background-inline-policy</code></a></li> +</ul> + +<p>{{ languages( { "en": "en/CSS/background-repeat", "es": "es/CSS/background-repeat", "fr": "fr/CSS/background-repeat", "pl": "pl/CSS/background-repeat" } ) }}</p> diff --git a/files/de/web/css/background-size/index.html b/files/de/web/css/background-size/index.html new file mode 100644 index 0000000000..de6629ef6b --- /dev/null +++ b/files/de/web/css/background-size/index.html @@ -0,0 +1,151 @@ +--- +title: background-size +slug: Web/CSS/background-size +tags: + - CSS + - CSS Eigenschaft + - CSS Hintergrund + - NeedsMobileBrowserCompatibility + - Referenz +translation_of: Web/CSS/background-size +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code style="font-size: 14px; line-height: inherit;">background-size</code><span style="line-height: inherit;"> </span><a href="/en-US/docs/CSS" style="line-height: inherit;" title="CSS">CSS</a> Eigenschaft definiert die Abmessungen eines Hintergrundbildes. Die Abmessungen des Bildes können komplett festgelegt werden oder nur teilweise, um das eigentliche Seitenverhältnis zu erhalten.</p> + +<div class="note"><strong>Hinweis:</strong> Folgt auf <code>background-size</code> die {{cssxref("background")}} Kurzform und es wird in ihr kein Wert für diese Eigenschaft angegeben, wird der Wert auf den Standardwert zurückgesetzt.</div> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">/* Schlüsselwort Syntax */ +background-size: cover; +background-size: contain; + +/* Ein-Wert Syntax: Der Wert definiert die Bildbreite, + die Höhe wird auf 'auto' gesetzt */ +background-size: 50%; +background-size: 3em; +background-size: 12px; +background-size: auto; + +/* Zwei-Wert Syntax: Der erste Wert definiert die Bildbreite, + der Zweite die Höhe */ +background-size: 50% auto; +background-size: 3em 25%; +background-size: auto 6px; +background-size: auto auto; + +/* Werte für mehrere Hintergründe, die durch background-image definiert wurden, + können kommagetrennt aufgelistet werden */ +background-size: auto, auto /* Nicht zu verwechseln mit background-size: auto auto */ +background-size: 50%, 25%, 25%; +background-size: 6px, auto, contain; + +/* Globale Werte */ +background-size: inherit; +background-size: initial; +background-size: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code><length></code></dt> + <dd>Ein <code>{{cssxref("<length>")}}</code> Wert, der das Hintergrundbild auf die angegebene Länge in der entsprechenden Maßeinheit skaliert. Negative Werte sind nicht erlaubt.</dd> + <dt><code><percentage></code></dt> + <dd>Ein {{cssxref("<percentage>")}} Wert, der das Hintergrundbild auf den angegebenen Prozentwert des Hintergrund-Positionierungsbereich skaliert (angegeben durch {{cssxref("background-origin")}}). Standardmäßig umfasst der Positionierungsbereich den Inhalt des Elements und dessen Innenabstand (Padding), kann aber auch so abgeändert werden, dass er nur den Inhalt umfasst oder Inhalt, Innenabstand und Rahmen. Ist die {{cssxref("background-attachment","attachment")}} Eigenschaft auf <code>fixed</code> gesetzt, entspricht der Positionierungsbereich dem Browser-Fenster abzüglich des von eventuellen Scroll-Leisten genutzten Bereichs. Negative Prozentwerte sind nicht erlaubt.</dd> + <dt><code>auto</code></dt> + <dd>Das <code>auto</code> Schlüsselwort skaliert das Hintergrundbild so in die entsprechende Richtung, dass das ursprüngliche Seitenverhältnis beibehalten wird.</dd> + <dt><code>cover</code></dt> + <dd>Das <code>cover</code> Schlüsselwort behält das Seitenverhältnis des Hintergrundbildes bei und skaliert es so, dass es so klein wie möglich ist, aber den Hintergrund-Positionierungsbereichs vollständig abdeckt.</dd> + <dt><code>contain</code></dt> + <dd>Das contain Schlüsselwort behält das Seitenverhältnis des Hintergrundbildes bei und skaliert es so, dass es so groß wie möglich ist, aber vollständig im Hintergrund-Positionierungsbereichs enthalten ist.</dd> +</dl> + +<p>Die Interpretation möglicher Werte hängt von den Maßen (Breite und Höhe) und der Proportion (Verhältnis von Breite zu Höhe) des Bildes ab. Eine Rastergrafik hat immer eigene Maße und eine eigene Proportion. Eine Vektorgrafik kann beide eigenen Maße haben (und somit auch eine eigene Proportion). Sie kann aber auch nur ein oder kein eigenes Maß haben. In beiden Fällen kann sie (muss aber nicht) eine eigen Proportion haben. Farbverläufe werden als Grafiken ohne eigene Maße und eigener Proportion behandelt.</p> + +<div class="note"><strong>Hinweis:</strong> Dieses Verhalten hat sich in Gecko 8.0 {{geckoRelease("8.0")}} geändert. Vorher wurden Farbverläufe als Grafiken ohne eigene Maße, aber mit einer eigenen Proportion behandelt. Die Proportion entsprach dabei derjenigen des Positionierungsbereich des Hintergrunds.</div> + +<p>Hintergrundbilder, die mittels {{cssxref("-moz-element")}} generiert wurden, werden momentan als Bilder mit den Maßen des Elements behandelt. Außer es handelt sich um ein SVG-Element, dann werden die Maße des Hintergrund-Positionierungsbereich mit der eigenen Proportion verwendet.</p> + +<div class="note"><strong>Hinweis:</strong> Die entspricht nicht dem spezifizierten Verhalten, wonach die Maße und die Proportion stets denjenigen Werten des Elements entsprechen müssen.</div> + +<p>Die gerenderte Größe des Hintergrundbildes wird folgendermaßen berechnet:</p> + +<dl> + <dt>Falls beide Werte von <code>background-size</code> angegeben werden und nicht <code>auto</code> sind:</dt> + <dd>Das Hintergrundbild wird mit den angegebenen Werten gerendert.</dd> + <dt>Falls die Schlüsselwörter <code>contain</code> oder <code>cover</code> gesetzt werden:</dt> + <dd>Das Bild behält seine eigene Proportion bei, wobei die Maße so berechnet werden, dass das Bild im Hintergrund-Positionierungsbereich enthalten ist beziehungsweise ihn abdeckt. Besitzt das Bild keine eigene Proportion, wird es auf die Größe des Hintergrund-Positionierungsbereichs gerendert.</dd> + <dt>Falls <code>background-size </code><code>auto</code> oder <code>auto auto</code> ist:</dt> + <dd>Besitzt das Bild beide Maße, wird es in dieser Größe gerendert. Hat es keine eigenen Maße und keine eigene Proportion, wird es in der Größe des Hintergrund-Positionierungsbereich gerendert. Hat es keine Maße, aber eine Proportion, wird es so gerendert als ob <code>contain</code> angegeben wurde. Hat es ein Maß angegeben und besitzt eine Proportion, wird es entsprechend dieser Angaben gerendert. Hat es ein Maß und keine Proportion, wird es mit diesem eigenen Maß und dem entsprechenden Maß des Hintergrund-Positionierungsbereichs gerendert.</dd> + <dt>Falls <code>background-size</code> ein <code>auto</code> und ein nicht-<code>auto</code> Wert besitzt:</dt> + <dd>Hat das Bild eine eigene Proportion, wird das nicht spezifizierte Maß aus dem angegebenen Maß und der Proportion berechnet. Hat das Bild keine eigene Proportion, wird das angebene Maß und das entsprechende eigene Maß des Bilds verwendet, falls vorhanden. Existiert kein eigenes Maß, wird dasjenige des Hintergrund-Positionierungsbereichs verwendet. </dd> +</dl> + +<p>Es ist zu beachten, dass Vektorgrafiken ohne Maße oder Proportion noch nicht vollständig in allen Browsern implementiert sind. Aus diesem Grund sollte man nicht zu sehr auf das oben beschriebene Verhalten vertrauen. Tests in unterschiedlichen Browsern (insbesondere Firefox 7 oder älter und Firefox 8 oder neuer) sind nötig, um festzustellen, ob die verschiedenen Darstellungen akzeptabel sind.</p> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<p><a href="http://whereswalden.com/files/mozilla/background-size/page-cover.html">Diese Demonstration von <code>background-size: cover</code></a> und <a href="http://whereswalden.com/files/mozilla/background-size/page-contain.html">diese Demonstration von <code>background-size: contain</code></a> sollten in einem neuen Fenster geöffnet werden, damit man das Verhalten von <code>cover</code> und <code>contain</code> bei ändernder Größe des Hintergrund-Positionierungsbereichs beobachten kann. <a href="http://whereswalden.com/files/mozilla/background-size/more-examples.html">Diese Demos</a> zeigen das Zusammenspiel von <code>background-size</code> mit anderen <code>background-*</code> Attributen.</p> + +<h2 id="Hinweise">Hinweise</h2> + +<p>Wird ein Farbverlauf als HIntergrund und zusätzliche eine <code>background-size</code> angegeben, ist es empfehlenswert, die Hintergrund-Größe nicht mit einem einzelnen <code>auto</code> Wert oder nur mit einer Breite zu definieren (zum Beispiel <code>background-size: 50%</code>). Das Rendern solcher Farbverläufe hat sich mit Firefox 8 geändert und führt generell zu einer inkonsistenten Darstellung in Browsern, die die beiden Spezifikationen <a href="http://www.w3.org/TR/css3-background/#the-background-size" title="http://www.w3.org/TR/css3-background/#the-background-size">the CSS3 <code>background-size</code> specification</a> und <a href="http://dev.w3.org/csswg/css3-images/#gradients" title="http://dev.w3.org/csswg/css3-images/#gradients">the CSS3 Image Values gradient specification</a> nicht vollständig implementieren.</p> + +<pre class="brush: css">.bar { + width: 50px; height: 100px; + background-image: gradient(...); + + /* NICHT EMPFOHLEN */ + background-size: 25px; + background-size: 50%; + background-size: auto 50px; + background-size: auto 50%; + + /* OKAY */ + background-size: 25px 50px; + background-size: 50% 50%; +} +</pre> + +<p>Insbesondere ist es nicht empfohlen, ein Pixel-Wert und ein <code>auto</code> Wert zusammen mit einem Farbverlauf zu verwenden, da die Darstellung in Firefox-Versionen vor 8 oder in anderen Browsern, die nicht das Firefox 8 Rendering verwenden nicht nachzuvollziehen ist, wenn die genaue Größe des Elements nicht bekannt ist.</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">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 Backgrounds', '#the-background-size', 'background-size')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser Kompatibilität</h2> + +{{Compat("css.properties.background-size")}} + +<h2 id="See_also" name="See_also">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/CSS/CSS_Referenz" title="CSS Reference">CSS Referenz</a></li> + <li><a href="/de/docs/Web/Guide/CSS/Using_multiple_backgrounds" title="CSS/Multiple backgrounds">Mehrere Hintergründe</a></li> + <li><a href="/de/docs/Web/Guide/CSS/Scaling_background_images" title="CSS/Scaling_background_images">HIntergrundbilder skalieren</a></li> +</ul> diff --git a/files/de/web/css/background/index.html b/files/de/web/css/background/index.html new file mode 100644 index 0000000000..d4e50112d0 --- /dev/null +++ b/files/de/web/css/background/index.html @@ -0,0 +1,182 @@ +--- +title: background +slug: Web/CSS/background +tags: + - CSS + - CSS Background + - CSS Eigenschaft + - CSS Hintergrund + - Referenz +translation_of: Web/CSS/background +--- +<div> +<p>{{CSSRef("CSS Background")}}</p> + +<p><span class="seoSummary">Die <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Kurzformat_Eigenschaft">Kurzformat</a>-Eigenschaft <strong><code>background</code></strong>setzt alle Hintergrundstileigenschaften auf einmal, wie Farbe, Bild, Ursprung und Größe oder Wiederholungsmethode.</span></p> + +<div>{{EmbedInteractiveExample("pages/css/background.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> + +<h2 id="Eigenschaftsbestandteile">Eigenschaftsbestandteile</h2> + +<p>Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:</p> + +<ul> + <li>{{cssxref("background-attachment")}}</li> + <li>{{cssxref("background-clip")}}</li> + <li>{{cssxref("background-color")}}</li> + <li>{{cssxref("background-image")}}</li> + <li>{{cssxref("background-origin")}}</li> + <li>{{cssxref("background-position")}}</li> + <li>{{cssxref("background-repeat")}}</li> + <li>{{cssxref("background-size")}}</li> +</ul> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: css notranslate">/* Verwendung von <background-color> */ +background: green; + +/* Verwendung von <bg-image> und <repeat-style> */ +background: url("test.jpg") repeat-y; + +/* Verwendung von <box> und <background-color> */ +background: border-box red; + +/* Ein einzelnes Bild, zentriert und skaliert */ +background: no-repeat center/80% url("../img/image.png"); +</pre> + +<p>Die Eigenschaft <code>background</code> wird als eine oder mehrere Hintergrundebenen, durch Kommata getrennt, angegeben.</p> + +<p>Die Syntax der einzelnen Schichten ist wie folgt:</p> + +<ul> + <li> Jede Schicht kann null oder ein Vorkommen eines der folgenden Werte enthalten: + <ul> + <li><code><a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS/background$edit#<attachment>"><attachment></a></code></li> + <li><code><a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS/background$edit#<bg-image>"><bg-image></a></code></li> + <li><code><a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS/background$edit#<position>"><position></a></code></li> + <li><code><a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS/background$edit#<bg-size>"><bg-size></a></code></li> + <li><code><a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS/background$edit#<repeat-style>"><repeat-style></a></code></li> + </ul> + </li> + <li>Der Wert <code><a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS/background$edit#<bg-size>"><bg-size></a></code> darf nur unmittelbar nach <code><a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS/background$edit#<position>"><position></a></code>, getrennt durch das Zeichen '/', wie folgt eingefügt werden: "<code>center/80%</code>".</li> + <li>Der Wert <code><a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS/background$edit#<box>"><box></a></code> kann Null, eins oder zwei Mal eingeschlossen werden. Wenn er einmal eingeschlossen wird, setzt er sowohl {{cssxref("background-origin")}} als auch {{cssxref("background-clip")}}. Bei zweimaligem Einschließen setzt das erste Vorkommen {{cssxref("background-origin")}} und das zweite Vorkommen {{cssxref("background-clip")}}.</li> + <li>Der Wert <code><a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS/background$edit#<background-color>"><background-color></a></code> darf nur in der zuletzt angegebenen Ebene enthalten sein.</li> +</ul> + +<div class="note"><strong>Hinweis:</strong> Die {{cssxref("background-color")}} kann nur für den letzten Hintergrund definiert werden, da es nur eine Hintergrundfarbe für das gesamte Element gibt.</div> + +<h3 id="Werte">Werte</h3> + +<p>Einer oder mehrere der folgenden Werte, in beliebiger Reihenfolge:</p> + +<dl> + <dt><code><attachment></code></dt> + <dd>Siehe {{cssxref("background-attachment")}}</dd> + <dt><code><box></code></dt> + <dd>Siehe {{cssxref("background-clip")}} and {{cssxref("background-origin")}}</dd> + <dt><code><background-color></code></dt> + <dd>Siehe {{cssxref("background-color")}}</dd> + <dt><code><bg-image></code></dt> + <dd>See {{Cssxref("background-image")}}</dd> + <dt><code><position></code></dt> + <dd>Siehe {{cssxref("background-position")}}</dd> + <dt><code><repeat-style></code></dt> + <dd>Siehe {{cssxref("background-repeat")}}</dd> + <dt><code><bg-size></code></dt> + <dd>Siehe {{cssxref("background-size")}}.</dd> +</dl> + +<h2 id="Bedenken_zur_Zugänglichkeit">Bedenken zur Zugänglichkeit</h2> + +<p>Browser bieten keine speziellen Informationen über Hintergrundbilder zu unterstützenden Technologien. Dies ist vor allem für Bildschirmleseprogramme wichtig, da ein Bildschirmleseprogramm seine Anwesenheit nicht ankündigt und seinen Benutzern daher nichts vermittelt. Wenn das Bild Informationen enthält, die für das Verständnis des Gesamtzwecks der Seite entscheidend sind, ist es besser, diese im Dokument semantisch zu beschreiben.</p> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">MDN Understanding WCAG, Guideline 1.1 explanations</a></li> + <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html">Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<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="Beispiele">Beispiele</h2> + +<h3 id="Setting_backgrounds_with_color_keywords_and_images" name="Setting_backgrounds_with_color_keywords_and_images">Hintergründe mit farbigen Schlüsselwörtern und Bildern setzen</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><p class="topbanner"> + Starry sky<br/> + Twinkle twinkle<br/> + Starry sky +</p> +<p class="warning">Here is a paragraph<p></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush:css' highlight:[2,6]; notranslate">.warning { + background: pink; +} + +.topbanner { + background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #99f repeat-y fixed; +} +</pre> + +<h4 id="Ergebnis">Ergebnis</h4> + +<p>{{EmbedLiveSample("Setting_backgrounds_with_color_keywords_and_images")}}</p> + +<h2 id="Spezifikationen">Spezifikationen</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 Backgrounds', '#the-background', 'background')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>Die Kurzformat-Eigenschaft wurde erweitert, sodass sie mehrere Hintergründe und die neuen Eigenschaften {{cssxref("background-size")}}, {{cssxref("background-origin")}} und {{cssxref("background-clip")}} unterstützt.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'colors.html#propdef-background', 'background')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Keine wesentlichen Änderungen</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#background', 'background')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2> + +<div> +<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.properties.background")}}</p> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{cssxref("-moz-background-inline-policy")}}</li> + <li><a href="/de/docs/Farbverläufe_in_CSS">Verwendung von CSS Farbverläufen</a></li> + <li><a href="/de/docs/Web/Guide/CSS/mehrere_Hintergründe_verwenden">Mehrere Hintergründe in CSS verwenden</a></li> +</ul> diff --git a/files/de/web/css/basic-shape/index.html b/files/de/web/css/basic-shape/index.html new file mode 100644 index 0000000000..9c53920461 --- /dev/null +++ b/files/de/web/css/basic-shape/index.html @@ -0,0 +1,176 @@ +--- +title: <basic-shape> +slug: Web/CSS/basic-shape +tags: + - CSS + - CSS Datentyp + - CSS Formen + - Referenz +translation_of: Web/CSS/basic-shape +--- +<p>{{CSSRef}}</p> + +<p>Der <code><basic-shape></code> <a href="/de/docs/Web/CSS">CSS</a> Datentyp stellt eine geometrische Grundform dar. Er kann in den {{cssxref("clip-path")}}, {{cssxref("shape-outside")}} und {{cssxref("offset-path")}} CSS-Eigenschaften verwendet werden.</p> + +<h2 id="Syntax">Syntax</h2> + +<p>Die unten aufgelisteten Funktionen definieren <code><basic-shape></code> -Werte.</p> + +<p>Wenn eine Form erstellt wird, definiert sich der Referenzrahmen durch jede CSS-Eigenschaft, die <code><basic-shape></code> -Werte benutzt. Der Koordinatenursprung für die Form liegt in der oberen linken Ecke des Referenzrahmens, wobei die x-Achse nach rechts und die y-Achse nach unten verläuft. Dieses Koordinatensystem ist in vielen Computergrafiksystemen üblich.</p> + +<h3 id="Form-Funktionen">Form-Funktionen</h3> + +<p>Die folgenden Formen werden unterstützt. Alle <code><basic-shape></code> Werte verwenden die funktionale Schreibweise und werden mithilfe der <a href="/de/docs/Web/CSS/Wertdefinitionssyntax">Wertdefinitionssyntax</a> definiert.</p> + +<dl> + <dt><code>inset()</code></dt> + <dd> + <pre class="syntaxbox"><code>inset( <shape-arg>{1,4} [round <border-radius>]? )</code></pre> + + <p>Definiert ein nach innen versetztes Rechteck.</p> + + <p>Wenn alle vier ersten Argumente vorhanden sind, stellen sie den Versatz des Rechtecks oben, links, rechts und unten dar. Der Versatz bezieht sich auf den Referenzrahmen. Wie auch bei der {{cssxref("margin")}}-Eigenschaft können weniger als vier Werte als Kurzform angegeben werden.</p> + + <p>Die optionalen {{cssxref("<border-radius>")}}-Argumente definieren abgerundete Ecken für das Rechteck. Auch hier ist die <code><border-radius></code>-Kurzform-Syntax zulässig.</p> + </dd> + <dt><code>circle(</code>)</dt> + <dd> + <pre class="syntaxbox"><code><code><code>circle( [<shape-radius>]? [at <position>]? )</code></code></code></pre> + + <p>Definiert einen Kreis.</p> + + <p>Das <code><shape-radius></code>-Argument stellt den Radius r des Kreises dar, negative Werte sind verboten. Ein Prozentwert bezieht sich auf <code>sqrt(a^2+b^2)/sqrt(2)</code>, wobei a und b Höhe und Breite des Referenzrahmens darstellen. Dieser Referenzwert ist die Länge einer Seite eines Quadrats, das dieselbe Fläche wie der Referenzrahmen hat.</p> + + <p>Das {{cssxref("<position>")}}-Argument definiert den Mittelpunkt des Kreises. Standardmäßig wird der Kreis in der Mitte des Referenzrahmens platziert.</p> + </dd> + <dt><code>ellipse()</code></dt> + <dd> + <pre class="syntaxbox"><code><code><code>ellipse( [<shape-radius>{2}]? [at <position>]? )</code></code></code></pre> + + <p>Definiert eine Ellipse, deren Hauptachse und Nebenachse entlang der x- oder y-Achsen verlaufen.</p> + + <p>Das <code><shape-radius></code> Argument repräsentiert den Radius entlang der x- bzw. y-Achse. Negative Werte sind ungültig. Prozentwerte werden im Verhältnis zur Breite (für die x-Achse) und Höhe (für die y-Achse) des Referenzrahmens bestimmt.</p> + + <p>Das {{cssxref("<position>")}}-Argument definiert den Mittelpunkt der Ellipse. Standardmäßig wird die Ellipse in der Mitte des Referenzrahmens platziert.</p> + </dd> +</dl> + +<dl> + <dt><code>polygon()</code></dt> + <dd> + <pre><code>polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )</code></pre> + + <p>Definiert ein Vieleck (Polygon).</p> + + <p><code><fill-rule></code> definiert die <a href="https://developer.mozilla.org/de/docs/Web/SVG/Attribute/fill-rule">Füllregel</a>, die zur Bestimmung der Innenfläche des Polygons verwendet werden soll. Mögliche Werte sind <code>nonzero</code> und <code>evenodd</code>. Der Standardwert ist <code>nonzero</code>.</p> + + <p>Jedes Argumentpaar der Liste stellt die x- und y-Koordinate einer Ecke des Vielecks dar.</p> + </dd> + <dt><code>path()</code></dt> + <dd> + <pre><code>path( [<fill-rule>,]? <string>)</code></pre> + + <p>Definiert einen <a href="https://developer.mozilla.org/de/docs/Web/SVG/Attribute/d">SVG-Pfad</a>, also eine Kombination aus Kurven, Strecken und Punkten.</p> + + <p><code><fill-rule></code> definiert die <a href="https://developer.mozilla.org/de/docs/Web/SVG/Attribute/fill-rule">Füllregel</a>, die zur Bestimmung der Innenfläche des Polygons verwendet werden soll. Mögliche Werte sind <code>nonzero</code> und <code>evenodd</code>. Der Standardwert ist <code>nonzero</code>.</p> + + <p><code><string></code> entspricht dem <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">d</span></font>-Attribut des SVG-Pfades und ist der SVG-Pfad-Text in Anführungszeichen.</p> + </dd> +</dl> + +<p>Die Argumente, die oben nicht definiert sind, werden folgendermaßen definiert:</p> + +<pre class="syntaxbox"><code><shape-arg> = <length> | <percentage> +<shape-radius> = <length> | <percentage> | closest-side | farthest-side</code></pre> + +<p><code>closest-side</code> verwendet den Abstand des Mittelpunkts der Form zur nächsten Seite des Referenzrahmens. Für Kreise ist dies die nächste Seite in beliebiger Richtung. Für Ellipsen ist dies die nächste Seite in Radiusrichtung.</p> + +<p><code>farthest-side</code> verwendet die Länge vom Mittelpunkt der Form zur entferntesten Seite der Referenzrahmens. Für Kreise ist dies die entfernteste Seite in beliebiger Richtung. Für Ellipsen ist dies die entfernteste Seite in Radiusrichtung.</p> + +<h2 id="Berechnete_Werte_von_Grundformen">Berechnete Werte von Grundformen</h2> + +<p>Die Werte in einer <code><basic-shape></code> Funktion werden wie angegeben berechnet, mit folgenden Ausnahmen:</p> + +<ul> + <li>Anstelle von ausgelassenen Werten werden Standardwerte verwendet.</li> + <li>Ein {{cssxref("<position>")}}-Wert in <code>circle()</code> oder <code>ellipse()</code> wird als ein Versatzpaar (horizontal, dann vertikal) vom Ursprung berechnet, wobei jeder Versatz als Kombination einer absoluten Länge und einem Prozentwert angegeben wird.</li> + <li>Ein <a href="/de/docs/Web/CSS/border-radius"><code><border-radius></code></a> Wert in <code>inset()</code> wird als eine erweiterte Liste aller acht {{cssxref("<length>")}}-Werte oder Prozentwerte berechnet.</li> +</ul> + +<h2 id="Interpolation_von_Grundformen">Interpolation von Grundformen</h2> + +<div>Zur Interpolation zwischen zwei Grundformen werden die folgenden Regeln angewandt. In den Formfunktionen werden alle Werte als Liste interpoliert. Die Listenwerte werden, soweit möglich, als {{cssxref("<length>")}}, {{cssxref("<percentage>")}} oder {{cssxref("calc")}}-Ausdruck interpoliert. Falls die Listenwerte nicht diesen Typen entsprechen, jedoch identisch sind (wie beispielsweise Zahlen ungleich null an der gleichen Position innerhalb beider Listen), werden diese Werte interpoliert.</div> + +<div></div> + +<ul> + <li>Beide Formen müssen den gleichen Referenzrahmen verwenden.</li> + <li>Falls beide Formen vom gleichen Typ sind, d. h. vom Typ <code>ellipse()</code> oder <code>circle()</code>, und keiner der Radien die Schlüsselwörter <code>closest-side</code> oder <code>farthest-side</code> verwendt, wird zwischen jedem Wert der Formfunktionen interpoliert.</li> + <li>Falls beide Formen vom Typ <code>inset()</code> sind, wird zwischen jedem Wert der Formfunktionen interpoliert.</li> + <li>Falls beide Formen vom Typ <code>polygon()</code> sind, beide Vielecke die gleiche Anzahl an Eckpunkten haben und die gleiche <a href="/de/docs/Web/SVG/Attribute/fill-rule"><code><fill-rule></code></a> verwenden, wird zwischen jedem Wert der Formfunktionen interpoliert.</li> + <li>In allen anderen Fällen findet keine Interpolation statt.</li> +</ul> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Animiertes_Polygon">Animiertes Polygon</h3> + +<p>In diesem Beispiel nutzten wir eine <a href="/de/docs/Web/CSS/@keyframes">@keyframes</a> Regel, um den Pfad zwischen zwei Vielecken zu animieren. (In diesem Beispiel müssen beide Vielecke dieselbe Anzahl Kanten haben.)</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div></div></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">div { + width: 300px; + height: 300px; + background: repeating-linear-gradient(red, orange 50px); + clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%); + animation: 4s poly infinite alternate ease-in-out; + margin: 10px auto; +} + +@keyframes poly { + from { + clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%); + } + + to { + clip-path: polygon(50% 30%, 100% 0%, 70% 50%, 100% 100%, 50% 70%, 0% 100%, 30% 50%, 0% 0%); + } +}</pre> + +<h4 id="Ergebnis">Ergebnis</h4> + +<p>{{EmbedLiveSample('Animated_polygon','340', '340')}}</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Anmerkung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS Shapes', '#basic-shape-functions', '<basic-shape>') }}</td> + <td>{{ Spec2('CSS Shapes') }}</td> + <td>Ursprüngliche Definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{Compat("css.types.basic-shape")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{cssxref("shape-outside")}}</li> +</ul> diff --git a/files/de/web/css/berechneter_wert/index.html b/files/de/web/css/berechneter_wert/index.html new file mode 100644 index 0000000000..d98a8be023 --- /dev/null +++ b/files/de/web/css/berechneter_wert/index.html @@ -0,0 +1,32 @@ +--- +title: Berechneter Wert +slug: Web/CSS/berechneter_Wert +tags: + - CSS + - Guide + - Web +translation_of: Web/CSS/computed_value +--- +<div> + {{cssref}}</div> +<h2 id="Übersicht">Übersicht</h2> +<p>Der <strong>berechnete Wert</strong> einer CSS Eigenschaft wird aus dem angegebenen Wert berechnet durch:</p> +<ul> + <li>Verarbeitung der speziellen Werte {{ cssxref("inherit") }} und {{ cssxref("initial") }} und</li> + <li>durch die Berechnung, die benötigt wird, um den Wert zu erreichen, der in der Zeile "Berechneter Wert" in der Übersicht der Eigenschaft beschrieben wird.</li> +</ul> +<p>Die Berechnung, die benötigt wird, um den "berechneten Wert" für die Eigenschaft zu erreichen, beinhaltet typischerweise die Konvertierung relativer Werte (wie die in <code>em</code> Einheiten oder Prozentangaben) zu absoluten Werten.</p> +<p>Wenn zum Beispiel ein Element einen Wert <code>font-size:16px</code> und <code>padding-top:2em</code> definiert hat, dann ist der berechnete Wert von <code>padding-top</code> gleich <code>32px</code> (zweimal die Schriftgröße).</p> +<p>Für einige Eigenschaften jedoch (jene, für die Prozentangaben relativ zu etwas sind, das Layout zur Bestimmung benötigt, wie <code>width</code>, <code>margin-right</code>, <code>text-indent</code> und <code>top</code>), werden definierte Prozentwerte zu berechneten Prozentwerten. Des weiteren werden in <code>line-height</code> definierte einheitenlose Zahlen zu berechneten Werten, wie angegeben. Diese relativen Werte, die im berechneten Wert gleich bleiben, werden absolut sobald der <a href="/de/docs/Web/CSS/benutzter_Wert">benutzte Wert</a> ermittelt wird.</p> +<p>Der Hauptnutzen des <em>berechneten Wertes</em> (außer als ein Schritt zwischen dem <a href="/de/docs/Web/CSS/angegebener_Wert" title="en/CSS/specified_value">angegebenen Wert</a> und dem <a href="/de/docs/Web/CSS/benutzter_Wert" title="en/CSS/used_value">benutzten Wert</a>) ist <a class="internal" href="/de/docs/Web/CSS/Vererbung" title="en/CSS/inheritance">Vererbung</a> inklusive dem {{ cssxref("inherit") }} Schlüsselwort.</p> +<h2 id="Hinweis">Hinweis</h2> +<p>Die {{domxref("Window.getComputedStyle", "getComputedStyle()")}} DOM API gibt den <a href="/de/docs/Web/CSS/aufgelöster_Wert">aufgelösten Wert</a> zurück, welcher abhängig von der Eigenschaft entweder der berechnete Wert oder der <a href="/de/docs/Web/CSS/benutzter_Wert">benutzte Wert</a> ist.</p> +<h2 id="Spezifikation">Spezifikation</h2> +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS21/cascade.html#computed-value%20" title="http://www.w3.org/TR/CSS21/cascade.html#computed-value ">CSS 2.1 Assigning property values #computed-value </a></li> +</ul> +<h2 id="Siehe_auch">Siehe auch</h2> +<ul> + <li><a href="/de/docs/Web/CSS/CSS_Referenz" title="CSS Reference">CSS Referenz</a></li> + <li>{{ CSS_key_concepts() }}</li> +</ul> diff --git a/files/de/web/css/border-bottom-color/index.html b/files/de/web/css/border-bottom-color/index.html new file mode 100644 index 0000000000..86561e834a --- /dev/null +++ b/files/de/web/css/border-bottom-color/index.html @@ -0,0 +1,99 @@ +--- +title: border-bottom-color +slug: Web/CSS/border-bottom-color +tags: + - CSS + - CSS Eigenschaft + - CSS Rahmen + - Referenz +translation_of: Web/CSS/border-bottom-color +--- +<p>{{CSSRef}}</p> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>border-bottom-color</code> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft legt die Farbe des unteren Rahmens eines Elements fest. Beachte, dass in vielen Fällen die Kurzschreibweisen {{cssxref("border-color")}} oder {{cssxref("border-bottom")}} geeigneter und daher zu bevorzugen sind.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: css">border-bottom-color: yellow; +border-bottom-color: #F5F6F7; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code><color></code></dt> + <dd>Ist ein {{cssxref("<color>")}} CSS Wert, der die Farbe des unteren Rahmens beschreibt.</dd> + <dt><code>inherit</code></dt> + <dd>Ist ein Schlüsselwort, das die Farbe des unteren Rahmens des Elternelements kennzeichnet (welche sich vom Standardwert von <code>border-bottom-color</code> unterscheiden kann).</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Ein_einfacher_div_mit_einem_Rahmen">Ein einfacher div mit einem Rahmen</h3> + +<h4 id="HTML_Inhalt">HTML Inhalt</h4> + +<pre class="brush: html"><div class="mybox"> + <p>Dies ist eine Box mit einem Rahmen außenrum. + Beachte welche Seite der Box + <span class="redtext">rot</span> ist.</p> +</div></pre> + +<h4 id="CSS_Inhalt">CSS Inhalt</h4> + +<pre class="brush: css">.mybox { + border: solid 0.3em gold; + border-bottom-color: red; + width: auto; +} +.redtext { + color: red; +}</pre> + +<h4 id="Ergebnis">Ergebnis</h4> + +<p>{{EmbedLiveSample("Ein_einfacher_div_mit_einem_Rahmen")}}</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Anmerkung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS3 Backgrounds", "#border-bottom-color", "border-bottom-color")}}</td> + <td>{{Spec2("CSS3 Backgrounds")}}</td> + <td>Keine nennenswerten Änderungen, jedoch wurde das Schlüsselwort <code>transparent</code> entfernt, das nun in {{cssxref("<color>")}} beinhaltet ist, welcher erweitert wurde.</td> + </tr> + <tr> + <td>{{SpecName("CSS2.1", "box.html#border-color-properties", "border-bottom-color")}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Erstmalige Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.properties.border-bottom-color")}} + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Die rahmenbezogenen CSS Kurzschreibweise Eigenschaften {{Cssxref("border")}}, {{Cssxref("border-bottom")}} und {{Cssxref("border-color")}}.</li> + <li>Die farbbezogenen CSS Eigenschaften, die sich auf die anderen Ränder beziehen: {{Cssxref("border-right-color")}}, {{Cssxref("border-top-color")}} und {{Cssxref("border-left-color")}}.</li> + <li>Die anderen rahmenbezogenen CSS Eigenschaften, die sich auf denselben Rand beziehen: {{cssxref("border-bottom-style")}} und {{cssxref("border-bottom-width")}}.</li> +</ul> diff --git a/files/de/web/css/border-bottom-left-radius/index.html b/files/de/web/css/border-bottom-left-radius/index.html new file mode 100644 index 0000000000..ad1aea03ac --- /dev/null +++ b/files/de/web/css/border-bottom-left-radius/index.html @@ -0,0 +1,51 @@ +--- +title: border-bottom-left-radius +slug: Web/CSS/border-bottom-left-radius +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/border-bottom-left-radius +--- +<p>{{CSSRef}}</p> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die CSS Eigenschaft <code>border-bottom-left-radius</code> legt die Abrundung der unteren, linken Ecke eines Elements fest. Vor Gecko 2.0 (Firefox) war diese Eigenschaft unter dem Namen <code>-moz-border-radius-bottomleft</code> bekannt.</p> + +<p>Weitere Informationen sind unter <a href="/de/CSS/border-top-left-radius" title="de/CSS/border-top-left-radius"><code>border-top-left-radius</code></a> verfügbar.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="twopartsyntaxbox"><a href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax" title="/en-US/docs/CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("border-bottom-left-radius")}}</pre> + +<pre>border-bottom-left-radius: <em>radius</em> /* the corner is a circle */ E.g. border-bottom-left-radius: 3px +border-bottom-left-radius: <em>horizontal</em> <em>vertical</em> /* the corner is an ellipsis */ E.g. border-bottom-left-radius: 0.5em 1em + +border-bottom-left-radius: inherit</pre> + +<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 Backgrounds', '#border-bottom-left-radius', 'border-bottom-left-radius')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{Compat("css.properties.border-bottom-left-radius")}}</p> diff --git a/files/de/web/css/border-bottom-right-radius/index.html b/files/de/web/css/border-bottom-right-radius/index.html new file mode 100644 index 0000000000..786a7a21a7 --- /dev/null +++ b/files/de/web/css/border-bottom-right-radius/index.html @@ -0,0 +1,56 @@ +--- +title: border-bottom-right-radius +slug: Web/CSS/border-bottom-right-radius +tags: + - CSS + - CSS Eigenschaft + - CSS Referenz + - CSS Ränder + - Layout + - NeedsContent +translation_of: Web/CSS/border-bottom-right-radius +--- +<p>{{CSSRef}}</p> + +<p>Die CSS Eigenschaft <code>border-bottom-right-radius</code> legt die Abrundung der unteren rechten Ecke eines Elements fest. Vor Gecko 2.0 (Firefox 4) war diese Eigenschaft unter dem Namen <code>-moz-border-radius-bottomright</code> bekannt.</p> + +<p>Weitere Informationen sind unter <a href="/de/CSS/border-top-left-radius" title="de/CSS/border-top-left-radius"><code>border-top-left-radius</code></a> verfügbar.</p> + +<p>{{cssinfo("border-bottom-right-radius")}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">border-bottom-right-radius: <em>radius</em> /* the corner is a circle */ E.g. border-bottom-right-radius: 3px +border-bottom-right-radius: <em>horizontal</em> <em>vertical</em> /* the corner is an ellipsis */ E.g. border-bottom-right-radius: 0.5em 1em + +border-bottom-right-radius: inherit +</pre> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<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 Backgrounds', '#border-bottom-right-radius', 'border-bottom-right-radius')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{Compat("css.properties.border-bottom-right-radius")}}</p> diff --git a/files/de/web/css/border-bottom-style/index.html b/files/de/web/css/border-bottom-style/index.html new file mode 100644 index 0000000000..bfd0ec4249 --- /dev/null +++ b/files/de/web/css/border-bottom-style/index.html @@ -0,0 +1,99 @@ +--- +title: border-bottom-style +slug: Web/CSS/border-bottom-style +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/border-bottom-style +--- +<p>{{CSSRef}}</p> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>border-bottom-style</code> Eigenschaft legt die Rahmenart des unteren Rahmens fest.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="eval">border-bottom-style: {{csssyntax("border-bottom-style")}} +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt>none</dt> + <dd>Standardwert. Es wird kein unterer Rahmen gezeichnet und die Breite wird auf '0' zurückgesetzt.</dd> + <dt>hidden</dt> + <dd>Genau wie bei <code>none</code> wird kein Rahmen angezeigt. Das Verhalten unterscheidet sich jedoch beim "Collapsing Border Model" innerhalb von Tabellen.<br> + Wenn <a href="/de/CSS/border-collapse" title="de/CSS/border-collapse"><code>border-collapse: collapse</code></a> gesetzt wurde, wird auch an den angrenzenden Nachbarzellen kein Rahmen dargestellt.</dd> + <dt>dotted</dt> + <dd>Punktierte Linie.</dd> + <dt>dashed</dt> + <dd>Gestrichelte Linie.</dd> + <dt>solid</dt> + <dd>Durchgehende Linie.</dd> + <dt>double</dt> + <dd>Zwei durchgehende Linien mit Zwischenraum. Die zwei Linien und der Zwischenraum sind jeweils ein Drittel der <a href="/De/CSS/Border-bottom-width" title="De/CSS/Border-bottom-width"><code>border-bottom-width</code></a> Angabe groß.</dd> + <dt>groove</dt> + <dd>Der Rahmen wirkt eingekerbt (3D-Effekt).</dd> + <dt>ridge</dt> + <dd>Der Rahmen wirkt wie eine Kante (3D-Effekt).</dd> + <dt>inset</dt> + <dd>Durch den Rahmen wirkt das ganze Element eingetieft (3D-Effekt).</dd> + <dt>outset</dt> + <dd>Durch den Rahmen wirkt das ganze Element herausgehoben (3D-Effekt).</dd> + <dt>inherit</dt> + <dd>Der Wert des Elternelements wird geerbt.</dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<pre>.beispielEins { + border-bottom-style: dashed; /* gestrichelt */ +} + +.beispielZwei { + border-bottom-style: groove; /* Einkerbung */ +} + +.beispielDrei { + border-bottom-style: hidden; /* Collapsing Border Model */ + border-collapse: collapse; +} +</pre> + +<h2 id="Specifications" name="Specifications">Spezifikation</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Anmerkung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Backgrounds', '#border-bottom-style', 'border-bottom-style') }}</td> + <td>{{ Spec2('CSS3 Backgrounds') }}</td> + <td>keine Änderung</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'box.html#border-style-properties', 'border-bottom-style') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Standardwert definiert</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser Kompatibilität</h2> + +{{Compat("css.properties.border-bottom-style")}} + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{ Cssxref("border-bottom") }}, {{ Cssxref("border-bottom-color") }}, and {{ Cssxref("border-bottom-width") }}</li> + <li>{{ Cssxref("border-left-style") }}, {{ Cssxref("border-right-style") }}, {{ Cssxref("border-top-style") }}, and {{ Cssxref("border-style") }}</li> +</ul> diff --git a/files/de/web/css/border-bottom-width/index.html b/files/de/web/css/border-bottom-width/index.html new file mode 100644 index 0000000000..6f67816001 --- /dev/null +++ b/files/de/web/css/border-bottom-width/index.html @@ -0,0 +1,82 @@ +--- +title: border-bottom-width +slug: Web/CSS/Border-bottom-width +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/border-bottom-width +--- +<p>{{CSSRef}}</p> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>border-bottom-width</code> Eigenschaft legt die Breite des unteren Rahmens fest.</p> + +<p>{{cssinfo("border-bottom-width")}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="eval">border-bottom-width: {{csssyntax("border-bottom-width")}} + +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><Länge></dt> + <dd>Eine <a href="/de/CSS/Einheiten#L.c3.a4ngen" title="de/CSS/Einheiten#L.c3.a4ngen">Längenangabe</a> die, die Rahmenstärke explizit angibt. Es sind keine negativen Werte erlaubt.</dd> + <dt>thin</dt> + <dd>Eine dünne Rahmenlinie (1px).</dd> + <dt>medium</dt> + <dd>Standardwert. Eine mitteldicke Rahmenlinie (3px).</dd> + <dt>thick</dt> + <dd>Eine dicke Rahmenlinie (5px).</dd> + <dt>inherit</dt> + <dd>Der Wert des Elternelements wird geerbt.</dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<pre>.beispielEins { + border-bottom-width: 10px; +} + +.beispielZwei { + border-bottom-width: thin; +} +</pre> + +<h2 id="Specifications" name="Specifications">Spezifikation</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Anmerkung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Backgrounds', '#the-border-width', 'border-bottom-width') }}</td> + <td>{{ Spec2('CSS3 Backgrounds') }}</td> + <td>Keine Änderung</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'box.html#border-width-properties', 'border-bottom-width') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Standardwert definiert</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser Kompatibilität</h2> + +{{Compat("css.properties.border-bottom-width")}} + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{Cssxref("border")}}, {{Cssxref("border-bottom")}}, {{Cssxref("border-bottom-style")}} und {{Cssxref("border-bottom-color")}}</li> + <li>{{Cssxref("border-left-width")}}, {{Cssxref("border-right-width")}}, {{Cssxref("border-top-width")}} und {{Cssxref("border-width")}}</li> +</ul> diff --git a/files/de/web/css/border-bottom/index.html b/files/de/web/css/border-bottom/index.html new file mode 100644 index 0000000000..8d93a330f4 --- /dev/null +++ b/files/de/web/css/border-bottom/index.html @@ -0,0 +1,89 @@ +--- +title: border-bottom +slug: Web/CSS/border-bottom +tags: + - CSS + - CSS Eigenschaft + - CSS Rahmen + - Referenz +translation_of: Web/CSS/border-bottom +--- +<p>{{ CSSRef("CSS Borders") }}</p> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>border-bottom</code> Eigenschaft legt den unteren Rahmen eines Elementes fest und ist eine Kurzform für<br> + <a href="/de/CSS/border-bottom-color" title="de/CSS/border-bottom-color"><code>border-bottom-color</code></a>, <a href="/de/CSS/border-bottom-style" title="de/CSS/border-bottom-style"><code>border-bottom-style</code></a> und <a href="/De/CSS/Border-bottom-width" title="De/CSS/Border-bottom-width"><code>border-bottom-width</code></a>. Die Werte der drei Eigenschaften können in beliebiger Reihenfolge angegeben werden.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><Rahmenbreite></dt> + <dd>Optional. Wenn nichts festgelegt ist, wird <code>medium</code> verwendet. Siehe: <a href="/De/CSS/Border-bottom-width" title="De/CSS/Border-bottom-width"><code>border-bottom-width</code></a>.</dd> + <dt><Rahmenstil></dt> + <dd>Erforderlich. Wenn nichts festgelegt ist, wird <code>none</code> verwendet. Siehe: <a href="/de/CSS/border-bottom-style" title="de/CSS/border-bottom-style"><code>border-bottom-style</code></a>.</dd> + <dt><Rahmenfarbe></dt> + <dd>Optional. Wenn nichts festgelegt ist, wird der Wert der <code>color</code> Eigenschaft des Elements genommen. Siehe: <a href="/de/CSS/border-bottom-color" title="de/CSS/border-bottom-color"><code>border-bottom-color</code></a>.</dd> + <dt>inherit</dt> + <dd>Der Wert des Elternelements wird geerbt.</dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<pre>.beispielEins { + border-bottom: 1px solid #000; +} + +.beispielZwei { + border-bottom-style: dotted; + border-bottom: thick green; + + /* Bedeutet das gleiche wie: */ + + border-bottom-style: dotted; + border-bottom: none thick green; + + /* border-bottom-style wird nach Angabe von border-bottom ignoriert. + Es wird kein unterer Rahmen gezeichnet. */ +} +</pre> + +<h2 id="Spezifikation">Spezifikation</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Backgrounds', '#border-bottom', 'border-bottom') }}</td> + <td>{{ Spec2('CSS3 Backgrounds') }}</td> + <td>No direct changes, though the modification of values for the {{ cssxref("border-bottom-color") }} do apply to it.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'box.html#propdef-border-bottom', 'border-bottom') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>No significant changes</td> + </tr> + <tr> + <td>{{ SpecName('CSS1', '#border-bottom', 'border-bottom') }}</td> + <td>{{ Spec2('CSS1') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.properties.border-bottom")}} diff --git a/files/de/web/css/border-collapse/index.html b/files/de/web/css/border-collapse/index.html new file mode 100644 index 0000000000..52a2fcb4f1 --- /dev/null +++ b/files/de/web/css/border-collapse/index.html @@ -0,0 +1,155 @@ +--- +title: border-collapse +slug: Web/CSS/border-collapse +tags: + - CSS + - CSS Border + - CSS Rahmen + - CSS Referenz + - CSS Table + - Referenz +translation_of: Web/CSS/border-collapse +--- +<p>{{CSSRef}}</p> + +<p>Die <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft <code>border-collapse</code> bestimmt, ob die Zellen innerhalb einer Tabelle mite einem gemeinsamen oder getrennten Rahmen dargestellt werden.</p> + +<div>{{EmbedInteractiveExample("pages/css/border-collapse.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> + +<div class="note"><strong>Hinweis:</strong> Wenn der Wert auf collapsed gesetzt ist, so verhält sich der Wert <code>inset</code> für {{cssxref("border-style")}} wie der Wert <code>groove</code> und der Wert <code>outset</code> wie <code>ridge</code>.</div> + +<div class="note"><strong>Hinweis:</strong> When cells are separated, the distance between cells is defined by the {{cssxref("border-spacing")}} property.</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: css no-line-numbers notranslate">/* Keyword values */ +border-collapse: collapse; +border-collapse: separate; + +/* Global values */ +border-collapse: inherit; +border-collapse: initial; +border-collapse: unset; +</pre> + +<p>Die Eigenschaft <code>border-collapse</code> wird als ein einziges Schlüsselwort angegeben, das aus der folgenden Liste ausgewählt werden kann.</p> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code>separate</code></dt> + <dd>Standardwert. Jede Zelle besitzt ihre eigenen Rahmen, deren Abstand mit <a href="/de/CSS/border-spacing" title="de/CSS/border-spacing"><code>border-spacing</code></a> angegeben wird.</dd> + <dt><code>collapse</code></dt> + <dd>Benachbarte Zellen haben einen gemeinsame Rahmen.</dd> + <dt>inherit</dt> + <dd>Der Wert des Elternelements wird geerbt.</dd> +</dl> + +<h2 id="Formal_definition">Formal definition</h2> + +<p>{{CSSInfo}}</p> + +<h2 id="Formal_syntax">Formal syntax</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + + + +<h3 id="A_colorful_table_of_browser_engines">A colorful table of browser engines</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><table class="separate"> + <caption><code>border-collapse: separate</code></caption> + <tbody> + <tr><th>Browser</th> <th>Layout Engine</th></tr> + <tr><td class="fx">Firefox</td> <td class="gk">Gecko</td></tr> + <tr><td class="ed">Edge</td> <td class="tr">EdgeHTML</td></tr> + <tr><td class="sa">Safari</td> <td class="wk">Webkit</td></tr> + <tr><td class="ch">Chrome</td> <td class="bk">Blink</td></tr> + <tr><td class="op">Opera</td> <td class="bk">Blink</td></tr> + </tbody> +</table> +<table class="collapse"> + <caption><code>border-collapse: collapse</code></caption> + <tbody> + <tr><th>Browser</th> <th>Layout Engine</th></tr> + <tr><td class="fx">Firefox</td> <td class="gk">Gecko</td></tr> + <tr><td class="ed">Edge</td> <td class="tr">EdgeHTML</td></tr> + <tr><td class="sa">Safari</td> <td class="wk">Webkit</td></tr> + <tr><td class="ch">Chrome</td> <td class="bk">Blink</td></tr> + <tr><td class="op">Opera</td> <td class="bk">Blink</td></tr> + </tbody> +</table></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">.collapse { + border-collapse: collapse; +} + +.separate { + border-collapse: separate; +} + +table { + display: inline-table; + margin: 1em; + border: dashed 5px; +} + +table th, +table td { + border: solid 3px; +} + +.fx { border-color: orange blue; } +.gk { border-color: black red; } +.ed { border-color: blue gold; } +.tr { border-color: aqua; } +.sa { border-color: silver blue; } +.wk { border-color: gold blue; } +.ch { border-color: red yellow green blue; } +.bk { border-color: navy blue teal aqua; } +.op { border-color: red; }</pre> + +<h4 id="Ergebnis">Ergebnis</h4> + +<p>{{ EmbedLiveSample('A_colorful_table_of_browser_engines', 400, 300) }}</p> + + + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Anmerkung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS2.1', 'tables.html#borders', 'border-collapse') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser <span>Kompatibilität</span></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.properties.border-collapse")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{cssxref("border-spacing")}}, {{cssxref("border-style")}}, {{cssxref("caption-side")}}, {{cssxref("empty-cells")}}, {{cssxref("table-layout")}}</li> +</ul> diff --git a/files/de/web/css/border-color/index.html b/files/de/web/css/border-color/index.html new file mode 100644 index 0000000000..bfac86d3ca --- /dev/null +++ b/files/de/web/css/border-color/index.html @@ -0,0 +1,107 @@ +--- +title: border-color +slug: Web/CSS/border-color +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/border-color +--- +<p>{{CSSRef}}</p> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>border-color</code> Eigenschaft legt die Farbe des oberen, rechten, unteren und linken Rahmens fest.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="eval">border-color: {{csssyntax("border-color")}} +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><Farbe></dt> + <dd><a href="/de/CSS/Farben" rel="internal">Farbangabe</a> [ Hexadezimalwert, Farbname, Systemfarbe, rgb(), rgba(), hsl() oder hlsa() ]</dd> + <dt>transparent</dt> + <dd>Der Rahmen hat keine Farbe. Es wird die Farbe des dahinter liegenden Elementes angezeigt.</dd> + <dt>inherit</dt> + <dd>Der Wert des Elternelements wird geerbt.</dd> + <dt>Ein Wert</dt> + <dd>Gilt für alle vier Seiten: <a href="/de/CSS/border-top-color" rel="internal">border-top-color</a>, <a href="/de/CSS/border-right-color" rel="internal">border-right-color</a>, <a href="/de/CSS/border-bottom-color" rel="internal">border-bottom-color</a> und <a href="/de/CSS/border-left-color" rel="internal">border-left-color</a>.</dd> + <dt>Zwei Werte</dt> + <dd>Der erste Wert gilt für <a href="/de/CSS/border-top-color" rel="internal">border-top-color</a> und <a href="/de/CSS/border-bottom-color" rel="internal">border-bottom-color</a>, der zweite Wert für <a href="/de/CSS/border-right-color" rel="internal">border-right-color</a> und <a href="/de/CSS/border-left-color" rel="internal">border-left-color</a>.</dd> + <dt>Drei Werte</dt> + <dd>Der erste Wert gilt für <a href="/de/CSS/border-top-color" rel="internal">border-top-color</a>, der zweite Wert für <a href="/de/CSS/border-right-color" rel="internal">border-right-color</a> und <a href="/de/CSS/border-left-color" rel="internal">border-left-color</a> und der dritte Wert für <a href="/de/CSS/border-bottom-color" rel="internal">border-bottom-color</a>.</dd> + <dt>Vier Werte</dt> + <dd>Der erste Wert gilt für <a href="/de/CSS/border-top-color" rel="internal">border-top-color</a>, der zweite Wert für <a href="/de/CSS/border-right-color" rel="internal">border-right-color</a>, der dritte Wert für <a href="/de/CSS/border-bottom-color" rel="internal">border-bottom-color</a> und der vierte Wert für <a href="/de/CSS/border-left-color" rel="internal">border-left-color</a>.</dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<pre style="border: solid; border-color: blue;">.beispielEins { + border: solid; + border-color: blue; +} +</pre> + +<pre style="border: solid; border-color: blue #f00;">.beispielZwei { + border: solid; + border-color: blue #f00; +} +</pre> + +<pre style="border: solid; border-color: blue #f00 rgb(0,150,0);">.beispielDrei { + border: solid; + border-color: blue #f00 rgb(0,150,0); +} +</pre> + +<pre style="border: solid; border-color: blue #f00 rgb(0,150,0) transparent;">.beispielVier { + border: solid; + border-color: blue #f00 rgb(0,150,0) transparent; +} +</pre> + +<h2 id="Spezifikation">Spezifikation</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Anmerkung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Backgrounds', '#border-color', 'border-color') }}</td> + <td>{{ Spec2('CSS3 Backgrounds') }}</td> + <td>The <code>transparent</code> keyword has been removed as it is now a part of the {{cssxref("<color>")}} data type.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'box.html#border-color-properties', 'border-color') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>The property is now a shorthand property</td> + </tr> + <tr> + <td>{{ SpecName('CSS1', '#border-color', 'border-color') }}</td> + <td>{{ Spec2('CSS1') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.properties.border-color")}} + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{CSSxRef("border")}}</li> + <li>{{CSSxRef("border-top-color")}}, {{CSSxRef("border-right-color")}}, {{CSSxRef("border-bottom-color")}}, {{CSSxRef("border-left-color")}}</li> + <li>{{CSSxRef("<color>")}}</color></li> + <li>{{CSSxRef("color")}}, {{CSSxRef("background-color")}}, {{CSSxRef("outline-color")}}, {{CSSxRef("text-decoration-color")}}, {{CSSxRef("text-emphasis-color")}}, {{CSSxRef("text-shadow")}}, {{CSSxRef("caret-color")}}, and {{CSSxRef("column-rule-color")}}</li> +</ul> diff --git a/files/de/web/css/border-image-outset/index.html b/files/de/web/css/border-image-outset/index.html new file mode 100644 index 0000000000..7cd1f0410c --- /dev/null +++ b/files/de/web/css/border-image-outset/index.html @@ -0,0 +1,77 @@ +--- +title: border-image-outset +slug: Web/CSS/border-image-outset +tags: + - CSS + - CSS Eigenschaft + - CSS Rahmen + - Grafik + - Layout + - Referenz + - Web +translation_of: Web/CSS/border-image-outset +--- +<div>{{CSSRef("CSS Borders")}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>border-image-outset</code> CSS Eigenschaft beschreibt, um welchem Wert der Randbildbereich über die Borderbox hinausragt.</p> + +<div>{{cssinfo}}</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="twopartsyntaxbox">{{csssyntax}} +</pre> + +<pre>border-image-outset: <em>Seiten</em> <em> /* Ein-Wert Syntax */</em> z. B. border-image-outset: 30%; +border-image-outset: <em>vertikal</em> <em>horizontal</em> <em> /* Zwei-Werte Syntax */ </em> z. B. border-image-outset: 10% 30%; +border-image-outset: <em>oben</em> <em>horizontal</em> <em>unten</em><em> /* Drei-Werte Syntax */ </em> z. B. border-image-outset: 30px 30% 45px; +border-image-outset: <em>oben</em> rechts unten links<em> /* Vier-Werte syntax */ </em> z. B. border-image-outset: 7px 12px 14px 5px; + +border-image-repeat: inherit +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><em>Seiten</em></dt> + <dd>Ist ein {{cssxref("<length>")}} oder ein {{cssxref("<percentage>")}} Wert, der den Betrag angibt, um welchen der Randbildbereich die Borderbox in allen vier Richtungen überragt.</dd> + <dt><em>horizontal</em></dt> + <dd>Ist ein {{cssxref("<length>")}} oder ein {{cssxref("<percentage>")}} Wert, der den Betrag angibt, um welchen der Randbildbereich die Borderbox in beiden horizontalen Richtungen überragt.</dd> + <dt><em>vertikal</em></dt> + <dd>Ist ein {{cssxref("<length>")}} oder ein {{cssxref("<percentage>")}} Wert, der den Betrag angibt, um welchen der Randbildbereich die Borderbox in beiden vertikalen Richtungen überragt.</dd> + <dt><em>oben</em></dt> + <dd>Ist ein {{cssxref("<length>")}} oder ein {{cssxref("<percentage>")}} Wert, der den Betrag angibt, um welchen der Randbildbereich über den oberen Rand der Borderbox hinausragt.</dd> + <dt><em>unten</em></dt> + <dd>Ist ein {{cssxref("<length>")}} oder ein {{cssxref("<percentage>")}} Wert, der den Betrag angibt, um welchen der Randbildbereich über den unteren Rand der Borderbox hinausragt.</dd> + <dt><em>rechts</em></dt> + <dd>Ist ein {{cssxref("<length>")}} oder ein {{cssxref("<percentage>")}} Wert, der den Betrag angibt, um welchen der Randbildbereich über den rechten Rand der Borderbox hinausragt.</dd> + <dt><em>links</em></dt> + <dd>Ist ein {{cssxref("<length>")}} oder ein {{cssxref("<percentage>")}} Wert, der den Betrag angibt, um welchen der Randbildbereich über den linken Rand der Borderbox hinausragt.</dd> + <dt><code>inherit</code></dt> + <dd>Ist ein Schlüsselwort, das angibt, dass alle vier Werte vom berechneten Wert des Elternelements geerbt werden.</dd> +</dl> + +<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 Backgrounds', '#border-image-outset', 'border-image-outset')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.properties.border-image-outset")}} diff --git a/files/de/web/css/border-image-repeat/index.html b/files/de/web/css/border-image-repeat/index.html new file mode 100644 index 0000000000..b721074674 --- /dev/null +++ b/files/de/web/css/border-image-repeat/index.html @@ -0,0 +1,83 @@ +--- +title: border-image-repeat +slug: Web/CSS/border-image-repeat +tags: + - CSS + - CSS Eigenschaft + - CSS Ränder + - Grafik + - Layout + - Referenz +translation_of: Web/CSS/border-image-repeat +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>border-image-repeat</code> CSS Eigenschaft definiert, wie der mittlere Teil eines Randbildes gehandhabt wird, sodass es in die Ausmaße des Randes passt. Sie hat eine Einwert-Syntax, welche das Verhalten aller Seiten beschreibt, und eine Zweiwert-Syntax, welche unterschiedliche Werte für das horizontale und vertikale Verhalten setzt.</p> + +<div>{{cssinfo}}</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">/* border-image-repeat: <em>Typ</em> */ +border-image-repeat: stretch; + +/* border-image-repeat: <em>horizontal</em> <em>vertikal</em> */ +border-image-repeat: round stretch; + +/* Globale Werte */ +border-image-repeat: inherit; +border-image-repeat: initial; +border-image-repeat: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><em>type</em></dt> + <dd>Eins der Schlüsselwörter <code>stretch</code>, <code>repeat</code>, <code>round</code> oder <code>space</code>, die angeben, wie das Bild wiederholt wird. Dies wird nur in der Einwert-Syntax verwendet.</dd> + <dt><em>horizontal</em></dt> + <dd>Eins der Schlüsselwörter <code>stretch</code>, <code>repeat</code>, <code>round</code> oder <code>space</code>, die angeben, wie das Bild horizontal wiederholt wird. Dies wird nur in der Zweiwert-Syntax verwendet.</dd> + <dt><em>vertical</em></dt> + <dd>Eins der Schlüsselwörter <code>stretch</code>, <code>repeat</code>, <code>round</code> oder <code>space</code>, die angeben, wie das Bild vertikal wiederholt wird. Dies wird nur in der Zweiwert-Syntax verwendet.</dd> + <dt><code>stretch</code></dt> + <dd>Schlüsselwort, das angibt, dass das Bild gedehnt werden soll, um den Leerraum zwischen beiden Rändern zu füllen.</dd> + <dt><code>repeat</code></dt> + <dd>Schlüsselwort, das angibt, dass das Bild wiederholt werden soll, um den Leerraum zwischen beiden Rändern zu füllen.</dd> + <dt><code>round</code></dt> + <dd>Schlüsselwort, das angibt, dass das Bild wiederholt werden soll bis es den Leerraum zwischen beiden Rändern füllt. Falls das Bild nach einer ganzzahligen Wiederholung nicht den gesamten Leerraum ausfüllt, wird es skaliert, damit es passt.</dd> + <dt><code>inherit</code></dt> + <dd>Schlüsselwort, das angibt, dass die Werte vom berechneten Wert des Elternelements geerbt werden sollen.</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<p>Siehe {{cssxref("border-image")}} für Beispiele, welche Auswirkungen Wiederholungswerte haben.</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Anmerkung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Backgrounds', '#border-image-repeat', 'border-image-repeat')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.properties.border-image-repeat")}} diff --git a/files/de/web/css/border-image-slice/index.html b/files/de/web/css/border-image-slice/index.html new file mode 100644 index 0000000000..c52c885c16 --- /dev/null +++ b/files/de/web/css/border-image-slice/index.html @@ -0,0 +1,102 @@ +--- +title: border-image-slice +slug: Web/CSS/border-image-slice +tags: + - CSS + - CSS Eigenschaft + - CSS Ränder + - Grafik + - Layout + - NeedsExample + - Referenz +translation_of: Web/CSS/border-image-slice +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>border-image-slice</code> CSS Eigenschaft teilt das Bild, welches von {{cssxref("border-image-source")}} spezifiziert wird, in neun Regionen ein: Die vier Ecken, die vier Kanten und die Mitte. Diese werden von 4 Werten festgelegt.</p> + +<p><a href="/files/3814/border-image-slice.png" style="float: left;"><img alt="The nine slices defined by the CSS border-image shorthand or border-image-slice longhand properties" src="/files/3814/border-image-slice.png" style="height: 132px; margin: 1px; padding: 1em; width: 250px;"></a>Vier Werte kontrollieren die Position der Schneidelinien, die das Bild einteilen. Werden nicht alle Werte definiert, werden sie von den anderen angegebenen, mit der üblichen 4-Werte CSS Syntax, abgeleitet.</p> + +<p>Die Mitte des Bildes wird nicht im Rand verwendet, kann allerdings als Hintergrundbild benutzt werden, wenn das Schlüsselwort <code>fill</code> gesetzt wurde. Dies kann an jeder Position der CSS-Eigenschaft geschehen (vor, hinter oder zwischen anderen Werten).</p> + +<p>Die Eigenschaften {{cssxref("border-image-repeat")}}, {{cssxref("border-image-width")}}, {{cssxref("border-image-outset")}} definieren die weitere Verwendung des Bildes.</p> + +<p>Die Kurzschreibweise {{cssxref("border-image")}} kann diese Eigenschaft zu ihrem Standardwert zurücksetzen.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">/* border-image-slice: <em>slice</em> */ +border-image-slice: 30%; + +/* border-image-slice: <em>horizontal</em> <em>vertikal</em> */ +border-image-slice: 10% 30%; + +/* border-image-slice: <em>oben</em> <em>vertikal</em> <em>unten</em> */ +border-image-slice: 30 30% 45; + +/* border-image-slice: <em>oben</em> <em>rechts</em> <em>unten</em> <em>links</em> */ +border-image-slice: 7 12 14 5; + +/* border-image-slice: … fill */ +/* Der fill Wert kann zwischen beliebigen Werten platziert werden */ +border-image-slice: 10% fill 7 12; + +/* Globale Werte */ +border-image-slice: inherit; +border-image-slice: initial; +border-image-slice: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code><em>slice</em></code></dt> + <dd>ist eine {{cssxref("<number>")}} oder eine {{cssxref("<percentage>")}}, welche den Abstand der vier Schneidelinien vom Rand festlegt. {{cssxref("<length>")}} Werte sind nicht erlaubt. Die {{cssxref("<number>")}} wird bei Rastergrafiken als <em>Pixel</em>, bei Vektorgrafiken als <em>Koordinaten</em> angesehen. Des Weiteren sind {{cssxref("<percentage>")}} Werte relativ zu der Höhe, beziehungsweise der Breite des Bildes. Negative Werte sind nicht erlaubt und größere Werte als die Bildgröße werden zu <code>100%</code> konvertiert.</dd> + <dt><em>horizontal</em></dt> + <dd>ist eine {{cssxref("<number>")}} oder eine {{cssxref("<percentage>")}}, welche den Abstand der zwei horizontalen Schneidelinien, die von oben und unten, vom Rand festlegt. {{cssxref("<length>")}} Werte sind nicht erlaubt. Die {{cssxref("<number>")}} wird bei Rastergrafiken als <em>Pixel</em>, bei Vektorgrafiken als <em>Koordinaten</em> angesehen. Des Weiteren sind {{cssxref("<percentage>")}} Werte relativ zu der Höhe, beziehungsweise der Breite des Bildes. Negative Werte sind nicht erlaubt und größere Werte als die Bildgröße werden zu <code>100%</code> konvertiert.</dd> + <dt><em>vertical</em></dt> + <dd>ist eine {{cssxref("<number>")}} oder eine {{cssxref("<percentage>")}}, welche den Abstand der zwei vertikalen Schneidelinien, die von rechts und links, vom Rand festlegt. {{cssxref("<length>")}} Werte sind nicht erlaubt. Die {{cssxref("<number>")}} wird bei Rastergrafiken als <em>Pixel</em>, bei Vektorgrafiken als <em>Koordinaten</em> angesehen. Des Weiteren sind {{cssxref("<percentage>")}} Werte relativ zu der Höhe, beziehungsweise der Breite des Bildes. Negative Werte sind nicht erlaubt und größere Werte als die Bildgröße werden zu <code>100%</code> konvertiert.</dd> + <dt><em>top</em></dt> + <dd>ist eine {{cssxref("<number>")}} oder eine {{cssxref("<percentage>")}}, welche den Abstand der oberen Schneidelinie vom Rand festlegt. {{cssxref("<length>")}} Werte sind nicht erlaubt. Die {{cssxref("<number>")}} wird bei Rastergrafiken als <em>Pixel</em>, bei Vektorgrafiken als <em>Koordinaten</em> angesehen. Des Weiteren sind {{cssxref("<percentage>")}} Werte relativ zu der Höhe, beziehungsweise der Breite des Bildes. Negative Werte sind nicht erlaubt und größere Werte als die Bildgröße werden zu <code>100%</code> konvertiert.</dd> + <dt><em>bottom</em></dt> + <dd>ist eine {{cssxref("<number>")}} oder eine {{cssxref("<percentage>")}}, welche den Abstand der unteren Schneidelinie vom Rand festlegt. {{cssxref("<length>")}} Werte sind nicht erlaubt. Die {{cssxref("<number>")}} wird bei Rastergrafiken als <em>Pixel</em>, bei Vektorgrafiken als <em>Koordinaten</em> angesehen. Des Weiteren sind {{cssxref("<percentage>")}} Werte relativ zu der Höhe, beziehungsweise der Breite des Bildes. Negative Werte sind nicht erlaubt und größere Werte als die Bildgröße werden zu <code>100%</code> konvertiert.</dd> + <dt><em>right</em></dt> + <dd>ist eine {{cssxref("<number>")}} oder eine {{cssxref("<percentage>")}}, welche den Abstand der rechten Schneidelinie vom Rand festlegt. {{cssxref("<length>")}} Werte sind nicht erlaubt. Die {{cssxref("<number>")}} wird bei Rastergrafiken als <em>Pixel</em>, bei Vektorgrafiken als <em>Koordinaten</em> angesehen. Des Weiteren sind {{cssxref("<percentage>")}} Werte relativ zu der Höhe, beziehungsweise der Breite des Bildes. Negative Werte sind nicht erlaubt und größere Werte als die Bildgröße werden zu <code>100%</code> konvertiert.</dd> + <dt><em>left</em></dt> + <dd>ist eine {{cssxref("<number>")}} oder eine {{cssxref("<percentage>")}}, welche den Abstand der linken Schneidelinie vom Rand festlegt. {{cssxref("<length>")}} Werte sind nicht erlaubt. Die {{cssxref("<number>")}} wird bei Rastergrafiken als <em>Pixel</em>, bei Vektorgrafiken als <em>Koordinaten</em> angesehen. Des Weiteren sind {{cssxref("<percentage>")}} Werte relativ zu der Höhe, beziehungsweise der Breite des Bildes. Negative Werte sind nicht erlaubt und größere Werte als die Bildgröße werden zu <code>100%</code> konvertiert.</dd> + <dt><code>fill</code></dt> + <dd>ist ein Schlüsselwort, das die mittlere Region des Bildes über dem Hintergrundbild abbildet. Seine Größe wird dabei jeweils an die der oberen und linken Bildregionen angepasst.</dd> + <dt><code>inherit</code></dt> + <dd>ist ein Schlüsselwort, welches bewirkt, dass alle vier Werte von den berechneten Werten des Elternelements übernommen (vererbt) werden.</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Spezifikationen">Spezifikationen</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 Backgrounds', '#border-image-slice', 'border-image-slice')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.properties.border-image-slice")}} diff --git a/files/de/web/css/border-image-source/index.html b/files/de/web/css/border-image-source/index.html new file mode 100644 index 0000000000..1ec0a50134 --- /dev/null +++ b/files/de/web/css/border-image-source/index.html @@ -0,0 +1,67 @@ +--- +title: border-image-source +slug: Web/CSS/border-image-source +tags: + - CSS + - CSS Eigenschaft + - CSS Ränder + - Referenz +translation_of: Web/CSS/border-image-source +--- +<div>{{CSSRef("CSS Borders")}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>border-image-source</code> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft definiert den {{cssxref("<image>")}} Wert, der anstatt dem Stil des Randes verwendet wird. Falls diese Eigenschaft auf <code>none</code> gesetzt wird, wird der Stil verwendet, der durch {{cssxref("border-style")}} definiert wird.</p> + +<div class="note"><strong>Hinweis:</strong> Obwohl jeder {{cssxref("<image>")}} Wert innerhalb dieser CSS Eigenschaft verwendet werden kann, ist die Browserunterstützung bisher noch begrenzt und einige Browser unterstützen nur Bilder, die über die <code>url()</code> Funktion angegeben werden.</div> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">/* Kein Randbild, stattdessen wird der angegebene border-style verwendet */ +border-image-source: none; + +/* image.jpg wird als Bild verwendet */ +border-image-source: url(image.jpg); + +/* Farbverlauf wird als Bild verwendet */ +border-image-source: linear-gradient(to top, red, yellow); + +/* Globale Werte */ +border-image-source: inherit; +border-image-source: initial; +border-image-source: unset; +</pre> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<p>Siehe {{cssxref("border-image")}} für Beispiele, welchen Einfluss die verschiedenen Werte haben.</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Anmerkung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Backgrounds', '#border-image-source', 'border-image-source')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.properties.border-image-source")}} diff --git a/files/de/web/css/border-image-width/index.html b/files/de/web/css/border-image-width/index.html new file mode 100644 index 0000000000..e367bc1406 --- /dev/null +++ b/files/de/web/css/border-image-width/index.html @@ -0,0 +1,119 @@ +--- +title: border-image-width +slug: Web/CSS/border-image-width +tags: + - CSS + - CSS Eigenschaft + - CSS Ränder + - Grafik + - Layout + - Referenz +translation_of: Web/CSS/border-image-width +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die CSS Eigenschaft <code>border-image-width</code> definiert die Breite des Randbilds. Wenn sie definiert wird, wird die Eigenschaft {{cssxref("border-width")}} durch ihren Wert überschrieben.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">/* border-image-width: <em>all</em> */ +border-image-width: 3; + +/* border-image-width: <em>vertical horizontal</em> */ +border-image-width: 2em 3em; + +/* border-image-width: <em>top horizontal bottom</em> */ +border-image-width: 5% 15% 10%; + +/* border-image-width: <em>top</em> <em>right</em> <em>bottom</em> <em>left</em> */ +border-image-width: 5% 2em 10% auto; + +/* Globale Werte */ +border-image-width: inherit; +border-image-width: initial; +border-image-width: unset; +</pre> + +<p>wobei:</p> + +<dl> + <dt><em>width</em></dt> + <dd>Ist ein Wert, der die Breite des Bildes angibt, das als Rand für alle vier Ränder verwendet wird. Er wird ausschließlich in der Einwert-Syntax verwendet.</dd> + <dt><em>vertical</em></dt> + <dd>Ist ein Wert, der die Breite des Bildes angibt, das für alle vertikalen Ränder, d. h. den oberen und unteren Rand, verwendet wird. Er wird ausschließlich in der Zweiwert-Syntax verwendet.</dd> + <dt><em>horizontal</em></dt> + <dd>Ist ein Wert, der die Breite des Bildes angibt, das für alle horizontalen Ränder, d. h. den rechten und linken Rand, verwendet wird. Er wird ausschließlich in der Zweiwert-Syntax verwendet.</dd> + <dt><em>top</em></dt> + <dd>Ist ein Wert, der die Breite des Bildes angibt, das für den oberen Rand verwendet wird. Er wird ausschließlich für die Dreiwert- und Vierwert-Syntax verwendet.</dd> + <dt><em>bottom</em></dt> + <dd>Ist ein Wert, der die Breite des Bildes angibt, das für den unteren Rand verwendet wird. Er wird ausschließlich für die Dreiwert- und Vierwert-Syntax verwendet.</dd> + <dt><em>right</em></dt> + <dd>Ist ein Wert, der die Breite des Bildes angibt, das für den rechten Rand verwendet wird. Er wird ausschließlich für die Dreiwert- und Vierwert-Syntax verwendet.</dd> + <dt><em>left</em></dt> + <dd>Ist ein Wert, der die Breite des Bildes angibt, das für den linken Rand verwendet wird. Er wird ausschließlich für die Dreiwert- und Vierwert-Syntax verwendet.</dd> + <dt><code>inherit</code></dt> + <dd>Ist ein Schlüsselwort, welches bewirkt, dass alle vier Werte von den berechneten Werten des Elternelements geerbt werden.</dd> +</dl> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code><length></code></dt> + <dd>Repräsentiert die Länge des Teilbilds. Sie kann eine absolute oder relative Länge sein. Dieser Wert darf nicht negativ sein.</dd> + <dt><code><percentage></code></dt> + <dd>Repräsentiert den Prozentwert des Teilbilds relativ zur Höhe oder Breite des Randbildbereichs. Dieser Wert darf nicht negativ sein.</dd> + <dt><code><number></code></dt> + <dd>Repräsentiert ein Vielfaches des berechneten Wertes der {{cssxref("border-width")}} Eigenschaft des Elements dar, die als Teilbildgröße verwendet wird. Dieser Wert darf nicht negativ sein.</dd> + <dt><code>auto</code></dt> + <dd>Gibt an, dass die Breite oder Höhe des Bildes die tatsächliche Größe dieser Dimension sein muss.</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="HTML-Inhalt">HTML-Inhalt</h3> + +<pre class="brush: html"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> +</pre> + +<h3 id="CSS-Inhalt">CSS-Inhalt</h3> + +<pre class="brush: css">p{ + border-image-source: url("https://mdn.mozillademos.org/files/10470/border.png"); + border-image-slice:30; + border-image-width:20px; + border-image-repeat: round; + padding:40px +}</pre> + +<p>{{ EmbedLiveSample('Beispiele', '480', '320') }}</p> + +<h2 id="Specifications" name="Specifications">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Anmerkung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Backgrounds', '#border-image-width', 'border-image-width')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>Ursprüngliche Spezifikation</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.properties.border-image-width")}} diff --git a/files/de/web/css/border-image/index.html b/files/de/web/css/border-image/index.html new file mode 100644 index 0000000000..d489fa343d --- /dev/null +++ b/files/de/web/css/border-image/index.html @@ -0,0 +1,101 @@ +--- +title: border-image +slug: Web/CSS/border-image +tags: + - CSS + - CSS Eigenschaft + - CSS Ränder + - Grafik + - Layout + - Referenz + - Web +translation_of: Web/CSS/border-image +--- +<div>{{CSSRef("CSS Borders")}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>border-image</code> CSS Eigenschaft ermöglicht das Zeichnen eines Bildes an den Rändern eines Elements. Dies vereinfacht das Zeichnen von komplex wirkenden Widgets deutlich und macht den Gebrauch von neun Kästen um das Element für einige Fälle überflüssig.<br> + <br> + <code>border-image</code> wird anstatt der Randstile benutzt, die durch die {{cssxref("border-style")}} Eigenschaft definiert werden. Es ist wichtig anzumerken, dass, wenn der berechnete Wert von {{cssxref("border-image-source")}}, welcher entweder durch <code>border-image-source</code> oder die Kurzschreibweise <code>border-image</code> gesetzt werden kann, <code>none</code> ist, oder falls das Bild nicht angezeigt werden kann, die Randstile verwendet werden.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h3 id="Werte">Werte</h3> + +<p>Siehe die entsprechenden Eigenschaften der verschiedenen Werte.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Bild_wiederholt_(repeat)">Bild wiederholt (repeat)</h3> + +<p>Das Bild wird aufgeteilt und einfach gekachelt, um den Randbereich zu füllen.</p> + +<pre class="brush:css">.beispiel { + border: 30px solid transparent; + -moz-border-image:url("/files/4127/border.png") 30 30 repeat; /* Old firefox */ + -webkit-border-image:url("/files/4127/border.png") 30 30 repeat; /* Safari */ + -o-border-image:url("/files/4127/border.png") 30 30 repeat; /* Opera */ + border-image:url("/files/4127/border.png") 30 30 repeat; +} +</pre> + +<p>Ergibt:<br> + <img alt="Beispiel für border-image: repeat" src="https://mdn.mozillademos.org/files/8199/borderRepeat.png" style="height: 120px; width: 350px;"></p> + +<h3 id="Bild_wiederholt_(round)">Bild wiederholt (round)</h3> + +<p>Die Option <code>round</code> ist eine Variante der <code>repeat</code> Option, die die Kacheln so verteilt, dass die Enden sauber verbunden sind.</p> + +<pre class="brush: css">.beispiel { + border: 30px solid transparent; + -moz-border-image:url("/files/4127/border.png") 30 30 round; /* Old firefox */ + -webkit-border-image:url("/files/4127/border.png") 30 30 round; /* Safari */ + -o-border-image:url("/files/4127/border.png") 30 30 round; /* Opera */ + border-image:url("/files/4127/border.png") 30 30 round; +}</pre> + +<p>Ergibt:<br> + <img alt="Beispiel für border-image: round" src="https://mdn.mozillademos.org/files/8201/borderRound.png" style="height: 180px; width: 350px;"></p> + +<h3 id="Bild_gestreckt">Bild gestreckt</h3> + +<p>Die <code>stretch</code> Option streckt die Bilder, um den Randbereich zu füllen.</p> + +<pre class="brush:css">.beispiel { + border: 30px solid transparent; + -moz-border-image:url("/files/4127/border.png") 30 30 stretch; /* Old firefox */ + -webkit-border-image:url("/files/4127/border.png") 30 30 stretch; /* Safari */ + -o-border-image:url("/files/4127/border.png") 30 30 stretch; /* Opera */ + border-image:url("/files/4127/border.png") 30 30 stretch; +}</pre> + +<p>Ergibt:<br> + <img alt="Beispiel für border-image: stretch" src="https://mdn.mozillademos.org/files/8203/borderStretch.png" style="height: 120px; width: 350px;"></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 Backgrounds', '#border-image', 'border-image')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.properties.border-image")}} diff --git a/files/de/web/css/border-left-color/index.html b/files/de/web/css/border-left-color/index.html new file mode 100644 index 0000000000..270f7b1cd6 --- /dev/null +++ b/files/de/web/css/border-left-color/index.html @@ -0,0 +1,36 @@ +--- +title: border-left-color +slug: Web/CSS/border-left-color +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/border-left-color +--- +<p>{{ CSSRef() }}</p> +<h3 id="Übersicht">Übersicht:</h3> +<p>Die <code>border-left-color</code> Eigenschaft legt die Farbe des linken Rahmens fest. Da der Standardwert für die Rahmenart <code>none</code> ist, muss eine Angabe der <a href="/de/CSS/border-left-style" title="de/CSS/border-left-style"><code>border-left-style</code></a> Eigenschaft erfolgen, damit ein linker Rahmen sichtbar werden kann. Es ist daher sinnvoll mit der Kurzform <a href="/de/CSS/border-left" title="de/CSS/border-left"><code>border-left</code></a> gleich die Farbe und die Art des linken Rahmens festzulegen.</p> +<ul> <li>Standardwert: Wert der <a href="/de/CSS/color" title="de/CSS/color"><code>color</code></a> Eigenschaft</li> <li>Anwendbar auf: Alle Elemente</li> <li>Vererbbar: Nein</li> <li>Prozentwerte: Nein</li> <li>Medium: visuell</li> <li>berechneter Wert: wie festgelegt</li> +</ul> +<h3 id="Syntax">Syntax</h3> +<pre class="eval">border-left-color: <Farbe> | transparent | inherit +</pre> +<h3 id="Werte">Werte</h3> +<dl> <dt><Farbe></dt> <dd><a href="/de/CSS/Farben" title="de/CSS/Farben">Farbangabe</a> [ Hexadezimalwert, Farbname, Systemfarbe, rgb(), rgba(), hsl() oder hlsa() ]</dd> <dt>transparent</dt> <dd>Das Element hat keine Farbe. Es wird die Farbe des dahinter liegenden Elementes angezeigt.</dd> <dt>inherit</dt> <dd>Der Wert des Elternelements wird geerbt.</dd> +</dl> +<h3 id="Beispiele">Beispiele</h3> +<pre style="border-left-style: solid;">pre { + border-left-style: solid; + border-left-color: red; + +} +</pre> +<h3 id="Browser_Kompatibilität">Browser <span>Kompatibilität</span></h3> +<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>ab Version</th> </tr> <tr> <td>Internet Explorer</td> <td>4.0</td> </tr> <tr> <td>Firefox (Gecko)</td> <td>1.0 (1.0)</td> </tr> <tr> <td>Opera</td> <td>3.5</td> </tr> <tr> <td>Safari (WebKit)</td> <td>1.0 (85)</td> </tr> </tbody> +</table> +<h3 id="Spezifikation">Spezifikation</h3> +<ul> <li><a class="external" href="http://www.w3.org/TR/css3-background/#border-left-color" lang="en">CSS 3 Background and Borders #border-left-color</a></li> <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#propdef-border-left-color" lang="en">CSS 2.1 Box #border-left-color</a></li> +</ul> +<h3 id="Siehe_auch">Siehe auch</h3> +<ul> <li><a href="/de/CSS/border-left" title="de/CSS/border-left"><code>border-left</code></a>, <a href="/de/CSS/border-left-style" title="de/CSS/border-left-style"><code>border-left-style</code></a>, <a href="/De/CSS/Border-left-width" title="De/CSS/Border-left-width"><code>border-left-width</code></a></li> <li><a href="/de/CSS/border-bottom" title="de/CSS/border-bottom"><code>border-bottom</code></a>, <a href="/de/CSS/border-right" title="de/CSS/border-right"><code>border-right</code></a>, <a href="/de/CSS/border-top" title="de/CSS/border-top"><code>border-top</code></a></li> <li><a href="/de/CSS/-moz-border-left-colors" title="de/CSS/-moz-border-left-colors"><code>-moz-border-left-colors</code></a></li> +</ul> +<p>{{ languages( { "en": "en/CSS/border-left-color", "fr": "fr/CSS/border-left-color", "ja": "ja/CSS/border-left-color", "pl": "pl/CSS/border-left-color" } ) }}</p> diff --git a/files/de/web/css/border-left-style/index.html b/files/de/web/css/border-left-style/index.html new file mode 100644 index 0000000000..30b17926a9 --- /dev/null +++ b/files/de/web/css/border-left-style/index.html @@ -0,0 +1,120 @@ +--- +title: border-left-style +slug: Web/CSS/border-left-style +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/border-left-style +--- +<p>{{ CSSRef() }}</p> +<h2 id="Übersicht">Übersicht</h2> +<p>Die <code>border-left-style</code> Eigenschaft legt die Rahmenart des linken Rahmens fest.</p> +<ul> + <li>Standardwert: <code>none</code></li> + <li>Anwendbar auf: Alle Elemente</li> + <li>Vererbbar: Nein</li> + <li>Prozentwerte: Nein</li> + <li>Medium: visuell</li> + <li>berechneter Wert: wie festgelegt</li> +</ul> +<h2 id="Syntax">Syntax</h2> +<pre class="eval">border-left-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit +</pre> +<h2 id="Werte">Werte</h2> +<dl> + <dt> + none</dt> + <dd> + Standardwert. Es wird kein linker Rahmen gezeichnet und die Breite wird auf '0' zurückgesetzt.</dd> + <dt> + hidden</dt> + <dd> + Genau wie bei <code>none</code> wird kein Rahmen angezeigt. Das Verhalten unterscheidet sich jedoch beim "Collapsing Border Model" innerhalb von Tabellen.<br> + Wenn <a href="/de/CSS/border-collapse" title="de/CSS/border-collapse"><code>border-collapse: collapse</code></a> gesetzt wurde, wird auch an den angrenzenden Nachbarzellen kein Rahmen dargestellt.</dd> + <dt> + dotted</dt> + <dd> + Punktierte Linie.</dd> + <dt> + dashed</dt> + <dd> + Gestrichelte Linie.</dd> + <dt> + solid</dt> + <dd> + Durchgehende Linie.</dd> + <dt> + double</dt> + <dd> + Zwei durchgehende Linien mit Zwischenraum. Die zwei Linien und der Zwischenraum sind jeweils ein Drittel der <a href="/De/CSS/Border-left-width" title="De/CSS/Border-left-width"><code>border-left-width</code></a> Angabe groß.</dd> + <dt> + groove</dt> + <dd> + Der Rahmen wirkt eingekerbt (3D-Effekt).</dd> + <dt> + ridge</dt> + <dd> + Der Rahmen wirkt wie eine Kante (3D-Effekt).</dd> + <dt> + inset</dt> + <dd> + Durch den Rahmen wirkt das ganze Element eingetieft (3D-Effekt).</dd> + <dt> + outset</dt> + <dd> + Durch den Rahmen wirkt das ganze Element herausgehoben (3D-Effekt).</dd> + <dt> + inherit</dt> + <dd> + Der Wert des Elternelements wird geerbt.</dd> +</dl> +<h2 id="Beispiele">Beispiele</h2> +<pre>.beispielEins { + border-left-style: dashed; /* gestrichelt */ +} + +.beispielZwei { + border-left-style: groove; /* Einkerbung */ +} + +.beispielDrei { + border-left-style: hidden; /* Collapsing Border Model */ + border-collapse: collapse; +} +</pre> +<h2 id="Browser_Kompatibilität">Browser <span>Kompatibilität</span></h2> +<table class="standard-table"> + <tbody> + <tr> + <th>Browser</th> + <th>ab Version</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>4.0</td> + </tr> + <tr> + <td>Firefox (Gecko)</td> + <td>1.0 (1.0)</td> + </tr> + <tr> + <td>Opera</td> + <td>3.5</td> + </tr> + <tr> + <td>Safari (WebKit)</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +<h2 id="Spezifikation">Spezifikation</h2> +<ul> + <li><a class="external" href="http://www.w3.org/TR/css3-background/#border-left-style" lang="en">CSS 3 Background and Borders #border-left-style</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#propdef-border-left-style" lang="en">CSS 2.1 Box #border-left-style</a></li> +</ul> +<h2 id="Siehe_auch">Siehe auch</h2> +<ul> + <li><a href="/de/CSS/border-left" title="de/CSS/border-left"><code>border-left</code></a>, <a href="/de/CSS/border-left-color" title="de/CSS/border-left-color"><code>border-left-color</code></a>, <a href="/De/CSS/Border-left-width" title="De/CSS/Border-left-width"><code>border-left-width</code></a></li> + <li><a href="/de/CSS/border-style" title="de/CSS/border-style"><code>border-style</code></a>, <a href="/de/CSS/border-bottom-style" title="de/CSS/border-bottom-style"><code>border-bottom-style</code></a>, <a href="/de/CSS/border-right-style" title="de/CSS/border-right-style"><code>border-right-style</code></a>, <a href="/de/CSS/border-top-style" title="de/CSS/border-top-style"><code>border-top-style</code></a></li> +</ul> +<p>{{ languages( { "en": "en/CSS/border-left-style", "fr": "fr/CSS/border-left-style", "ja": "ja/CSS/border-left-style", "pl": "pl/CSS/border-left-style" } ) }}</p> diff --git a/files/de/web/css/border-left-width/index.html b/files/de/web/css/border-left-width/index.html new file mode 100644 index 0000000000..05734d57da --- /dev/null +++ b/files/de/web/css/border-left-width/index.html @@ -0,0 +1,38 @@ +--- +title: border-left-width +slug: Web/CSS/Border-left-width +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/border-left-width +--- +<p>{{ CSSRef() }}</p> +<h3 id="Übersicht">Übersicht</h3> +<p>Die <code>border-left-width</code> Eigenschaft legt die Breite des linken Rahmens fest.</p> +<ul> <li>Standardwert: <code>medium</code></li> <li>Anwendbar auf: Alle Elemente</li> <li>Vererbbar: Nein</li> <li>Prozentwerte: Nein</li> <li>Medium: visuell</li> <li>berechneter Wert: absolute Länge; <code>0</code> wenn <code>none</code> oder <code>hidden</code> festgelegt wurde</li> +</ul> +<h3 id="Syntax">Syntax</h3> +<pre class="eval">border-left-width: <Länge> | thin | medium | thick | inherit +</pre> +<h3 id="Werte">Werte</h3> +<dl> <dt><Länge></dt> <dd>Eine <a href="/de/CSS/Einheiten#L.c3.a4ngen" title="de/CSS/Einheiten#L.c3.a4ngen">Längenangabe</a> die, die Rahmenstärke explizit angibt. Es sind keine negativen Werte erlaubt.</dd> <dt>thin</dt> <dd>Eine dünne Rahmenlinie (1px).</dd> <dt>medium</dt> <dd>Standardwert. Eine mitteldicke Rahmenlinie (3px).</dd> <dt>thick</dt> <dd>Eine dicke Rahmenlinie (5px).</dd> <dt>inherit</dt> <dd>Der Wert des Elternelements wird geerbt.</dd> +</dl> +<h3 id="Beispiele">Beispiele</h3> +<pre>.beispielEins { + border-left-width: 10px; +} + +.beispielZwei { + border-left-width: thin; +} +</pre> +<h3 id="Browser_Kompatibilität">Browser <span>Kompatibilität</span></h3> +<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>ab Version</th> </tr> <tr> <td>Internet Explorer</td> <td>4.0</td> </tr> <tr> <td>Firefox (Gecko)</td> <td>1.0 (1.0)</td> </tr> <tr> <td>Opera</td> <td>3.5</td> </tr> <tr> <td>Safari (WebKit)</td> <td>1.0 (85)</td> </tr> </tbody> +</table> +<h3 id="Spezifikation">Spezifikation</h3> +<ul> <li><a class="external" href="http://www.w3.org/TR/css3-background/#border-left-width" lang="en">CSS 3 Background and Borders #border-left-width</a></li> <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#propdef-border-left-width" lang="en">CSS 2.1 Box #border-left-width</a></li> +</ul> +<h3 id="Siehe_auch">Siehe auch</h3> +<ul> <li><a href="/de/CSS/border-left" title="de/CSS/border-left"><code>border-left</code></a>, <a href="/de/CSS/border-left-color" title="de/CSS/border-left-color"><code>border-left-color</code></a>, <a href="/de/CSS/border-left-style" title="de/CSS/border-left-style"><code>border-left-style</code></a></li> <li><a href="/de/CSS/border-width" title="de/CSS/border-width"><code>border-width</code></a>, <a href="/De/CSS/Border-bottom-width" title="De/CSS/Border-bottom-width"><code>border-bottom-width</code></a>, <a href="/De/CSS/Border-right-width" title="De/CSS/Border-right-width"><code>border-right-width</code></a>, <a href="/De/CSS/Border-top-width" title="De/CSS/Border-top-width"><code>border-top-width</code></a></li> +</ul> +<p>{{ languages( { "en": "en/CSS/border-left-width", "fr": "fr/CSS/border-left-width", "ja": "ja/CSS/border-left-width", "pl": "pl/CSS/border-left-width" } ) }}</p> diff --git a/files/de/web/css/border-left/index.html b/files/de/web/css/border-left/index.html new file mode 100644 index 0000000000..f4fb458b27 --- /dev/null +++ b/files/de/web/css/border-left/index.html @@ -0,0 +1,48 @@ +--- +title: border-left +slug: Web/CSS/border-left +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/border-left +--- +<p>{{ CSSRef() }}</p> +<h3 id="Übersicht">Übersicht:</h3> +<p>Die <code>border-left</code> Eigenschaft legt den linken Rahmen eines Elementes fest und ist eine Kurzform für <br> +<a href="/de/CSS/border-left-color" title="de/CSS/border-left-color"><code>border-left-color</code></a>, <a href="/de/CSS/border-left-style" title="de/CSS/border-left-style"><code>border-left-style</code></a> und <a href="/De/CSS/Border-left-width" title="De/CSS/Border-left-width"><code>border-left-width</code></a>. Die Werte der drei Eigenschaften können in beliebiger Reihenfolge angegeben werden.</p> +<ul> <li>Standardwert: siehe einzelne Eigenschaften</li> <li>Anwendbar auf: Alle Elemente</li> <li>Vererbbar: Nein</li> <li>Prozentwerte: Nein</li> <li>Medium: visuell</li> <li>berechneter Wert: siehe einzelne Eigenschaften</li> +</ul> +<h3 id="Syntax">Syntax</h3> +<pre class="eval">border-left: [ <Rahmenbreite> || <Rahmenstil> || <Rahmenfarbe> ] | inherit +</pre> +<h3 id="Werte">Werte</h3> +<dl> <dt><Rahmenbreite></dt> <dd>Optional. Wenn nichts festgelegt ist, wird <code>medium</code> verwendet. Siehe: <a href="/De/CSS/Border-left-width" title="De/CSS/Border-left-width"><code>border-left-width</code></a>.</dd> <dt><Rahmenstil></dt> <dd>Erforderlich. Wenn nichts festgelegt ist, wird <code>none</code> verwendet. Siehe: <a href="/de/CSS/border-left-style" title="de/CSS/border-left-style"><code>border-left-style</code></a>.</dd> <dt><Rahmenfarbe></dt> <dd>Optional. Wenn nichts festgelegt ist, wird der Wert der <code>color</code> Eigenschaft des Elements genommen. Siehe: <a href="/de/CSS/border-left-color" title="de/CSS/border-left-color"><code>border-left-color</code></a>.</dd> <dt>inherit</dt> <dd>Der Wert des Elternelements wird geerbt.</dd> +</dl> +<h3 id="Beispiele">Beispiele</h3> +<pre>.beispielEins { + border-left: 1px solid #000; +} + +.beispielZwei { + border-left-style: dotted; + border-left: thick green; + + /* Bedeutet das gleiche wie: */ + + border-left-style: dotted; + border-left: none thick green; + + /* border-left-style wird nach Angabe von border-left ignoriert. + Es wird kein linker Rahmen gezeichnet. */ +} +</pre> +<h3 id="Browser_Kompatibilität">Browser <span>Kompatibilität</span></h3> +<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>ab Version</th> </tr> <tr> <td>Internet Explorer</td> <td>4.0</td> </tr> <tr> <td>Firefox (Gecko)</td> <td>1.0 (1.0)</td> </tr> <tr> <td>Opera</td> <td>3.5</td> </tr> <tr> <td>Safari (WebKit)</td> <td>1.0 (85)</td> </tr> </tbody> +</table> +<h3 id="Spezifikation">Spezifikation</h3> +<ul> <li><a class="external" href="http://www.w3.org/TR/css3-background/#border-left" lang="en">CSS 3 Background and Borders #border-left</a></li> <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#propdef-border-left" lang="en">CSS 2.1 Box #border-left</a></li> +</ul> +<h3 id="Siehe_auch">Siehe auch</h3> +<ul> <li><a href="/de/CSS/border-left-color" title="de/CSS/border-left-color"><code>border-left-color</code></a>, <a href="/de/CSS/border-left-style" title="de/CSS/border-left-style"><code>border-left-style</code></a>, <a href="/De/CSS/Border-left-width" title="De/CSS/Border-left-width"><code>border-left-width</code></a></li> <li><a href="/de/CSS/border-bottom" title="de/CSS/border-bottom"><code>border-bottom</code></a>, <a href="/de/CSS/border-top" title="de/CSS/border-top"><code>border-top</code></a>, <a href="/de/CSS/border-right" title="de/CSS/border-right"><code>border-right</code></a></li> <li><a href="/de/CSS/-moz-border-left-colors" title="de/CSS/-moz-border-left-colors"><code>-moz-border-left-colors</code></a></li> <li><a href="/de/CSS/-moz-border-image" title="de/CSS/-moz-border-image"><code>-moz-border-image</code></a>, <a href="/de/CSS/border-radius" title="de/CSS/-moz-border-radius"><code>-moz-border-radius</code></a></li> +</ul> +<p>{{ languages( { "en": "en/CSS/border-left", "es": "es/CSS/border-left", "fr": "fr/CSS/border-left", "ja": "ja/CSS/border-left", "pl": "pl/CSS/border-left" } ) }}</p> diff --git a/files/de/web/css/border-radius/index.html b/files/de/web/css/border-radius/index.html new file mode 100644 index 0000000000..a4674ee265 --- /dev/null +++ b/files/de/web/css/border-radius/index.html @@ -0,0 +1,141 @@ +--- +title: border-radius +slug: Web/CSS/border-radius +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/border-radius +--- +<p>{{CSSRef}}</p> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die Eigenschaft <code>border-radius</code> kann verwendet werden, um <a href="/de/CSS/border" title="de/CSS/border">Rahmen</a> mit abgerundeten Ecken zu versehen. Der Radius wird auch auf <a href="/de/CSS/background" title="de/CSS/background">Hintergründe</a> und <a href="/de/CSS/box-shadow" title="De/CSS/-moz-box-shadow">Schatteneffekte</a> angewendet, selbst wenn das Element über keinen Rahmen verfügt.</p> + +<p><code>border-radius</code> ist die Kurzform für die für Eigenschaften {{ Cssxref("border-top-left-radius") }}, {{ Cssxref("border-top-right-radius") }}, {{ Cssxref("border-bottom-right-radius") }} und {{ Cssxref("border-bottom-left-radius") }}.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="eval">border-radius: {{csssyntax("border-radius")}} + +bzw. + +border-radius: [ <Länge> | <Prozentzahl> ]{1,4} + [ / [ <Länge> | <Prozentzahl> ]{1,4} ]? +</pre> + +<h2 id="Werte">Werte</h2> + +<p>Es werden bis zu vier Angaben akzeptiert und nach einem Slash ("<code>/</code>") können vier weitere Angaben folgen.</p> + +<dl> + <dt><Länge></dt> + <dd>Siehe {{cssxref("<length>")}} für mögliche Einheiten.</dd> + <dt><Prozentzahl></dt> + <dd>Ab Gecko 2.0 (Firefox 4.0):<br> + Prozentuale Angaben für den horizontalen Radius beziehen sich auf die Breite der Box. Die Prozentzahl für den vertikalen Radius ist allerdings relativ zur Höhe der Box.<br> + In vorherigen Gecko- & Firefox-Versionen:<br> + {{ non-standard_inline() }} Eine prozentuale Angabe, die sich auf die Breite der Box bezieht. Die Prozentzahl ist auch dann relativ zur Breite, wenn ein Radius für die Höhe festgelegt wird.</dd> + <dt>Ein Wert</dt> + <dd>Gilt für alle vier Ecken.</dd> + <dt>Zwei Werte</dt> + <dd>Der erste Wert bestimmt die Ecken oben links und unten rechts, der zweite Wert legt die Ecken oben rechts und unten links fest.</dd> + <dt>Drei Werte</dt> + <dd>Der erste Wert bestimmt die Ecke oben links, der zweite Wert legt die Ecke für oben rechts und unten links zusammen fest und der dritte Wert bestimmt die Ecke unten rechts.</dd> + <dt>Vier Werte</dt> + <dd>Für jede Seite können die Abstände einzeln festgelegt werden. In der Reihenfolge: oben links, oben rechts, unten rechts, unten links.</dd> + <dt>Slash ("/") Schreibweise</dt> + <dd>Wenn weitere Werte nach einem Slash ("/") folgen, werden die Werte vor dem Slash verwendet, um den horizontalen Radius festzulegen, während die Werte nach dem Slash für vertikalen Radius benutzt werden. Wird der Slash weggelassen, werden die festgelegten Werte für horizontale und vertikale Radien verwendet.</dd> +</dl> + +<p>Beispiel zur Slash-Notation:</p> + +<pre class="brush: css">-moz-border-radius: 1em/5em; + border-radius: 1em/5em; + +/* ist gleichbedeutend zu: */ + +-moz-border-radius-topleft: 1em 5em; +-moz-border-radius-topright: 1em 5em; +-moz-border-radius-bottomright: 1em 5em; +-moz-border-radius-bottomleft: 1em 5em; + border-top-left-radius: 1em 5em; + border-top-right-radius: 1em 5em; + border-bottom-right-radius: 1em 5em; + border-bottom-left-radius: 1em 5em; +</pre> + +<pre class="brush: css">-moz-border-radius: 4px 3px 6px / 2px 4px; + border-radius: 4px 3px 6px / 2px 4px; + +/* ist gleichbedeutend zu: */ + +-moz-border-radius-topleft: 4px 2px; +-moz-border-radius-topright: 3px 4px; +-moz-border-radius-bottomright: 6px 2px; +-moz-border-radius-bottomleft: 3px 4px; + border-top-left-radius: 4px 2px; + border-top-right-radius: 3px 4px; + border-bottom-right-radius: 6px 2px; + border-bottom-left-radius: 3px 4px; +</pre> + +<div class="note"><strong>Hinweis: </strong>Elliptische Rahmen (Slash mit erweitertem border-radius Syntax) werden von Versionen vor Gecko 1.9.1 (Firefox 3.5) nicht unterstützt.</div> + +<h2 id="Beispiele">Beispiele</h2> + +<pre style="float: left; margin: 10px; border: solid 10px; border-radius: 0 50px 50px 0;">border: solid 10px; + + /* Der Rahmen ergibt ein 'D' */ + -moz-border-radius: 0 50px 50px 0; + border-radius: 0 50px 50px 0; +</pre> + +<pre style="float: left; margin: 10px; border: groove 1em red; -webkit-border-radius: 2em; border-radius: 2em;"> border: groove 1em red; + + -moz-border-radius: 2em; + -webkit-border-radius: 2em; + border-radius: 2em; +</pre> + +<pre class="eval" style="float: left; margin: 10px; background: gold; border: ridge gold; -webkit-border-radius: 13em 3em; border-radius: 13em/3em;"> <span style="font-family: arial,helvetica,sans-serif;">{{ fx_minversion_inline(3.5) }}</span> + background: gold; + border: ridge gold; + + -moz-border-radius: 13em/3em; + -webkit-border-radius: 13em 3em; + border-radius: 13em/3em; +</pre> + +<pre style="float: left; border: none; margin: 10px; background: gold; border-radius: 40px 10px;"> background: gold; + + -moz-border-radius: 40px 10px; + border-radius: 40px 10px; +</pre> + +<pre style="float: left; border: none; margin: 10px; background: black; color: gray; border-radius: 50%;">background: black; +color: gray; +border-radius: 50%; +</pre> + +<p style=""> </p> + +<h2 id="Hinweise">Hinweise</h2> + +<ul> + <li>Gepunktete und gestrichelte Rahmenecken werden als durchgehende Linie gerendert. Siehe {{ bug("382721") }}.</li> + <li><code>border-radius</code> wird nicht auf Tabellen angewendet, wenn <a href="/de/CSS/border-collapse" title="de/CSS/border-collapse"><code>border-collapse</code></a> auf <code>collapse</code> gesetzt ist.</li> + <li>Safari/WebKit behandelt mehrere mehrere Werte anders (siehe unten).</li> +</ul> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.properties.border-radius")}} + +<h2 id="Spezifikation">Spezifikation</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/css3-background/#the-border-radius" lang="en">CSS 3 Backgrounds and Borders #border-radius</a></li> +</ul> diff --git a/files/de/web/css/border-right-color/index.html b/files/de/web/css/border-right-color/index.html new file mode 100644 index 0000000000..b70d0ade28 --- /dev/null +++ b/files/de/web/css/border-right-color/index.html @@ -0,0 +1,36 @@ +--- +title: border-right-color +slug: Web/CSS/border-right-color +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/border-right-color +--- +<p>{{ CSSRef() }}</p> +<h3 id="Übersicht">Übersicht:</h3> +<p>Die <code>border-right-color</code> Eigenschaft legt die Farbe des rechten Rahmens fest. Da der Standardwert für die Rahmenart <code>none</code> ist, muss eine Angabe der <a href="/de/CSS/border-right-style" title="de/CSS/border-right-style"><code>border-right-style</code></a> Eigenschaft erfolgen, damit ein rechter Rahmen sichtbar werden kann. Es ist daher sinnvoll mit der Kurzform <a href="/de/CSS/border-right" title="de/CSS/border-right"><code>border-right</code></a> gleich die Farbe und die Art des rechten Rahmens festzulegen.</p> +<ul> <li>Standardwert: Wert der <a href="/de/CSS/color" title="de/CSS/color"><code>color</code></a> Eigenschaft</li> <li>Anwendbar auf: Alle Elemente</li> <li>Vererbbar: Nein</li> <li>Prozentwerte: Nein</li> <li>Medium: visuell</li> <li>berechneter Wert: wie festgelegt</li> +</ul> +<h3 id="Syntax">Syntax</h3> +<pre class="eval">border-right-color: <Farbe> | transparent | inherit +</pre> +<h3 id="Werte">Werte</h3> +<dl> <dt><Farbe></dt> <dd><a href="/de/CSS/Farben" title="de/CSS/Farben">Farbangabe</a> [ Hexadezimalwert, Farbname, Systemfarbe, rgb(), rgba(), hsl() oder hlsa() ]</dd> <dt>transparent</dt> <dd>Das Element hat keine Farbe. Es wird die Farbe des dahinter liegenden Elementes angezeigt.</dd> <dt>inherit</dt> <dd>Der Wert des Elternelements wird geerbt.</dd> +</dl> +<h3 id="Beispiele">Beispiele</h3> +<pre style="border-right-style: solid;">pre { + border-right-style: solid; + border-right-color: red; + +} +</pre> +<h3 id="Browser_Kompatibilität">Browser <span>Kompatibilität</span></h3> +<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>ab Version</th> </tr> <tr> <td>Internet Explorer</td> <td>4.0</td> </tr> <tr> <td>Firefox (Gecko)</td> <td>1.0 (1.0)</td> </tr> <tr> <td>Opera</td> <td>3.5</td> </tr> <tr> <td>Safari (WebKit)</td> <td>1.0 (85)</td> </tr> </tbody> +</table> +<h3 id="Spezifikation">Spezifikation</h3> +<ul> <li><a class="external" href="http://www.w3.org/TR/css3-background/#border-right-color" lang="en">CSS 3 Background and Borders #border-right-color</a></li> <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#propdef-border-right-color" lang="en">CSS 2.1 Box #border-right-color</a></li> +</ul> +<h3 id="Siehe_auch">Siehe auch</h3> +<ul> <li><a href="/de/CSS/border-right" title="de/CSS/border-right"><code>border-right</code></a>, <a href="/de/CSS/border-right-style" title="de/CSS/border-right-style"><code>border-right-style</code></a>, <a href="/De/CSS/Border-right-width" title="De/CSS/Border-right-width"><code>border-right-width</code></a></li> <li><a href="/de/CSS/border-bottom" title="de/CSS/border-bottom"><code>border-bottom</code></a>, <a href="/de/CSS/border-left" title="de/CSS/border-left"><code>border-left</code></a>, <a href="/de/CSS/border-top" title="de/CSS/border-top"><code>border-top</code></a></li> <li><a href="/de/CSS/-moz-border-right-colors" title="de/CSS/-moz-border-right-colors"><code>-moz-border-right-colors</code></a></li> +</ul> +<p>{{ languages( { "en": "en/CSS/border-right-color", "fr": "fr/CSS/border-right-color", "ja": "ja/CSS/border-right-color", "pl": "pl/CSS/border-right-color" } ) }}</p> diff --git a/files/de/web/css/border-right-style/index.html b/files/de/web/css/border-right-style/index.html new file mode 100644 index 0000000000..eee81bd976 --- /dev/null +++ b/files/de/web/css/border-right-style/index.html @@ -0,0 +1,120 @@ +--- +title: border-right-style +slug: Web/CSS/border-right-style +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/border-right-style +--- +<p>{{ CSSRef() }}</p> +<h2 id="Übersicht">Übersicht</h2> +<p>Die <code>border-right-style</code> Eigenschaft legt die Rahmenart des rechten Rahmens fest.</p> +<ul> + <li>Standardwert: <code>none</code></li> + <li>Anwendbar auf: Alle Elemente</li> + <li>Vererbbar: Nein</li> + <li>Prozentwerte: Nein</li> + <li>Medium: visuell</li> + <li>berechneter Wert: wie festgelegt</li> +</ul> +<h2 id="Syntax">Syntax</h2> +<pre class="eval">border-right-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit +</pre> +<h2 id="Werte">Werte</h2> +<dl> + <dt> + none</dt> + <dd> + Standardwert. Es wird kein rechter Rahmen gezeichnet und die Breite wird auf '0' zurückgesetzt.</dd> + <dt> + hidden</dt> + <dd> + Genau wie bei <code>none</code> wird kein Rahmen angezeigt. Das Verhalten unterscheidet sich jedoch beim "Collapsing Border Model" innerhalb von Tabellen.<br> + Wenn <a href="/de/CSS/border-collapse" title="de/CSS/border-collapse"><code>border-collapse: collapse</code></a> gesetzt wurde, wird auch an den angrenzenden Nachbarzellen kein Rahmen dargestellt.</dd> + <dt> + dotted</dt> + <dd> + Punktierte Linie.</dd> + <dt> + dashed</dt> + <dd> + Gestrichelte Linie.</dd> + <dt> + solid</dt> + <dd> + Durchgehende Linie.</dd> + <dt> + double</dt> + <dd> + Zwei durchgehende Linien mit Zwischenraum. Die zwei Linien und der Zwischenraum sind jeweils ein Drittel der <a href="/De/CSS/Border-right-width" title="De/CSS/Border-right-width"><code>border-right-width</code></a> Angabe groß.</dd> + <dt> + groove</dt> + <dd> + Der Rahmen wirkt eingekerbt (3D-Effekt).</dd> + <dt> + ridge</dt> + <dd> + Der Rahmen wirkt wie eine Kante (3D-Effekt).</dd> + <dt> + inset</dt> + <dd> + Durch den Rahmen wirkt das ganze Element eingetieft (3D-Effekt).</dd> + <dt> + outset</dt> + <dd> + Durch den Rahmen wirkt das ganze Element herausgehoben (3D-Effekt).</dd> + <dt> + inherit</dt> + <dd> + Der Wert des Elternelements wird geerbt.</dd> +</dl> +<h2 id="Beispiele">Beispiele</h2> +<pre>.beispielEins { + border-right-style: dashed; /* gestrichelt */ +} + +.beispielZwei { + border-right-style: groove; /* Einkerbung */ +} + +.beispielDrei { + border-right-style: hidden; /* Collapsing Border Model */ + border-collapse: collapse; +} +</pre> +<h2 id="Browser_Kompatibilität">Browser <span>Kompatibilität</span></h2> +<table class="standard-table"> + <tbody> + <tr> + <th>Browser</th> + <th>ab Version</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>4.0</td> + </tr> + <tr> + <td>Firefox (Gecko)</td> + <td>1.0 (1.0)</td> + </tr> + <tr> + <td>Opera</td> + <td>3.5</td> + </tr> + <tr> + <td>Safari (WebKit)</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +<h2 id="Spezifikation">Spezifikation</h2> +<ul> + <li><a class="external" href="http://www.w3.org/TR/css3-background/#border-right-style" lang="en">CSS 3 Background and Borders #border-right-style</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#propdef-border-right-style" lang="en">CSS 2.1 Box #border-right-style</a></li> +</ul> +<h2 id="Siehe_auch">Siehe auch</h2> +<ul> + <li><a href="/de/CSS/border-right" title="de/CSS/border-right"><code>border-right</code></a>, <a href="/de/CSS/border-right-color" title="de/CSS/border-right-color"><code>border-right-color</code></a>, <a href="/De/CSS/Border-right-width" title="De/CSS/Border-right-width"><code>border-right-width</code></a></li> + <li><a href="/de/CSS/border-style" title="de/CSS/border-style"><code>border-style</code></a>, <a href="/de/CSS/border-bottom-style" title="de/CSS/border-bottom-style"><code>border-bottom-style</code></a>, <a href="/de/CSS/border-left-style" title="de/CSS/border-left-style"><code>border-left-style</code></a>, <a href="/de/CSS/border-top-style" title="de/CSS/border-top-style"><code>border-top-style</code></a></li> +</ul> +<p>{{ languages( { "en": "en/CSS/border-right-style", "fr": "fr/CSS/border-right-style", "ja": "ja/CSS/border-right-style", "pl": "pl/CSS/border-right-style" } ) }}</p> diff --git a/files/de/web/css/border-right-width/index.html b/files/de/web/css/border-right-width/index.html new file mode 100644 index 0000000000..c3aa02724f --- /dev/null +++ b/files/de/web/css/border-right-width/index.html @@ -0,0 +1,90 @@ +--- +title: border-right-width +slug: Web/CSS/Border-right-width +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/border-right-width +--- +<p>{{ CSSRef() }}</p> +<h2 id="Übersicht">Übersicht</h2> +<p>Die <code>border-right-width</code> Eigenschaft legt die Breite des rechten Rahmens fest.</p> +<ul> + <li>Standardwert: <code>medium</code></li> + <li>Anwendbar auf: Alle Elemente</li> + <li>Vererbbar: Nein</li> + <li>Prozentwerte: Nein</li> + <li>Medium: visuell</li> + <li>berechneter Werte: absolute Länge; <code>0</code> wenn <code>none</code> oder <code>hidden</code> festgelegt wurde</li> +</ul> +<h2 id="Syntax">Syntax</h2> +<pre class="eval">border-right-width: <Länge> | thin | medium | thick | inherit +</pre> +<h2 id="Werte">Werte</h2> +<dl> + <dt> + <Länge></dt> + <dd> + Eine <a href="/de/CSS/Einheiten#L.c3.a4ngen" title="de/CSS/Einheiten#L.c3.a4ngen">Längenangabe</a> die, die Rahmenstärke explizit angibt. Es sind keine negativen Werte erlaubt.</dd> + <dt> + thin</dt> + <dd> + Eine dünne Rahmenlinie (1px).</dd> + <dt> + medium</dt> + <dd> + Standardwert. Eine mitteldicke Rahmenlinie (3px).</dd> + <dt> + thick</dt> + <dd> + Eine dicke Rahmenlinie (5px).</dd> + <dt> + inherit</dt> + <dd> + Der Wert des Elternelements wird geerbt.</dd> +</dl> +<h2 id="Beispiele">Beispiele</h2> +<pre>.beispielEins { + border-right-width: 10px; +} + +.beispielZwei { + border-right-width: thin; +} +</pre> +<h2 id="Browser_Kompatibilität">Browser <span>Kompatibilität</span></h2> +<table class="standard-table"> + <tbody> + <tr> + <th>Browser</th> + <th>ab Version</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>4.0</td> + </tr> + <tr> + <td>Firefox (Gecko)</td> + <td>1.0 (1.0)</td> + </tr> + <tr> + <td>Opera</td> + <td>3.5</td> + </tr> + <tr> + <td>Safari (WebKit)</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +<h2 id="Spezifikation">Spezifikation</h2> +<ul> + <li><a class="external" href="http://www.w3.org/TR/css3-background/#border-right-width" lang="en">CSS 3 Background and Borders #border-right-width</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#propdef-border-right-width" lang="en">CSS 2.1 Box #border-right-width</a></li> +</ul> +<h2 id="Siehe_auch">Siehe auch</h2> +<ul> + <li><a href="/de/CSS/border-right" title="de/CSS/border-right"><code>border-right</code></a>, <a href="/de/CSS/border-right-color" title="de/CSS/border-right-color"><code>border-right-color</code></a>, <a href="/de/CSS/border-right-style" title="de/CSS/border-right-style"><code>border-right-style</code></a></li> + <li><a href="/de/CSS/border-width" title="de/CSS/border-width"><code>border-width</code></a>, <a href="/De/CSS/Border-bottom-width" title="De/CSS/Border-bottom-width"><code>border-bottom-width</code></a>, <a href="/De/CSS/Border-left-width" title="De/CSS/Border-left-width"><code>border-left-width</code></a>, <a href="/De/CSS/Border-top-width" title="De/CSS/Border-top-width"><code>border-top-width</code></a></li> +</ul> +<p>{{ languages( { "en": "en/CSS/border-right-width", "fr": "fr/CSS/border-right-width", "ja": "ja/CSS/border-right-width", "pl": "pl/CSS/border-right-width" } ) }}</p> diff --git a/files/de/web/css/border-right/index.html b/files/de/web/css/border-right/index.html new file mode 100644 index 0000000000..664b3ded4d --- /dev/null +++ b/files/de/web/css/border-right/index.html @@ -0,0 +1,48 @@ +--- +title: border-right +slug: Web/CSS/border-right +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/border-right +--- +<p>{{ CSSRef() }}</p> +<h3 id="Übersicht">Übersicht:</h3> +<p>Die <code>border-right</code> Eigenschaft legt den rechten Rahmen eines Elementes fest und ist eine Kurzform für <br> +<a href="/de/CSS/border-right-color" title="de/CSS/border-right-color"><code>border-right-color</code></a>, <a href="/de/CSS/border-right-style" title="de/CSS/border-right-style"><code>border-right-style</code></a> und <a href="/De/CSS/Border-right-width" title="De/CSS/Border-right-width"><code>border-right-width</code></a>. Die Werte der drei Eigenschaften können in beliebiger Reihenfolge angegeben werden.</p> +<ul> <li>Standardwert: siehe einzelne Eigenschaften</li> <li>Anwendbar auf: Alle Elemente</li> <li>Vererbbar: Nein</li> <li>Prozentwerte: Nein</li> <li>Medium: visuell</li> <li>berechneter Wert: siehe einzelne Eigenschaften</li> +</ul> +<h3 id="Syntax">Syntax</h3> +<pre class="eval">border-right: [ <Rahmenbreite> || <Rahmenstil> || <Rahmenfarbe> ] | inherit +</pre> +<h3 id="Werte">Werte</h3> +<dl> <dt><Rahmenbreite></dt> <dd>Optional. Wenn nichts festgelegt ist, wird <code>medium</code> verwendet. Siehe: <a href="/De/CSS/Border-right-width" title="De/CSS/Border-right-width"><code>border-right-width</code></a>.</dd> <dt><Rahmenstil></dt> <dd>Erforderlich. Wenn nichts festgelegt ist, wird <code>none</code> verwendet. Siehe: <a href="/de/CSS/border-right-style" title="de/CSS/border-right-style"><code>border-right-style</code></a>.</dd> <dt><Rahmenfarbe></dt> <dd>Optional. Wenn nichts festgelegt ist, wird der Wert der <code>color</code> Eigenschaft des Elements genommen. Siehe: <a href="/de/CSS/border-right-color" title="de/CSS/border-right-color"><code>border-right-color</code></a>.</dd> <dt>inherit</dt> <dd>Der Wert des Elternelements wird geerbt.</dd> +</dl> +<h3 id="Beispiele">Beispiele</h3> +<pre>.beispielEins { + border-right: 1px solid #000; +} + +.beispielZwei { + border-right-style: dotted; + border-right: thick green; + + /* Bedeutet das gleiche wie: */ + + border-right-style: dotted; + border-right: none thick green; + + /* border-right-style wird nach Angabe von border-right ignoriert. + Es wird kein rechter Rahmen gezeichnet. */ +} +</pre> +<h3 id="Browser_Kompatibilität">Browser <span>Kompatibilität</span></h3> +<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>ab Version</th> </tr> <tr> <td>Internet Explorer</td> <td>4.0</td> </tr> <tr> <td>Firefox (Gecko)</td> <td>1.0 (1.0)</td> </tr> <tr> <td>Opera</td> <td>3.5</td> </tr> <tr> <td>Safari (WebKit)</td> <td>1.0 (85)</td> </tr> </tbody> +</table> +<h3 id="Spezifikation">Spezifikation</h3> +<ul> <li><a class="external" href="http://www.w3.org/TR/css3-background/#border-right" lang="en">CSS 3 Background and Borders #border-right</a></li> <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#propdef-border-right" lang="en">CSS 2.1 Box #border-right</a></li> +</ul> +<h3 id="Siehe_auch">Siehe auch</h3> +<ul> <li><a href="/de/CSS/border-right-color" title="de/CSS/border-right-color"><code>border-right-color</code></a>, <a href="/de/CSS/border-right-style" title="de/CSS/border-right-style"><code>border-right-style</code></a>, <a href="/De/CSS/Border-right-width" title="De/CSS/Border-right-width"><code>border-right-width</code></a></li> <li><a href="/de/CSS/border-bottom" title="de/CSS/border-bottom"><code>border-bottom</code></a>, <a href="/de/CSS/border-top" title="de/CSS/border-top"><code>border-top</code></a>, <a href="/de/CSS/border-left" title="de/CSS/border-left"><code>border-left</code></a></li> <li><a href="/de/CSS/-moz-border-right-colors" title="de/CSS/-moz-border-right-colors"><code>-moz-border-right-colors</code></a></li> <li><a href="/de/CSS/-moz-border-image" title="de/CSS/-moz-border-image"><code>-moz-border-image</code></a>, <a href="/de/CSS/border-radius" title="de/CSS/-moz-border-radius"><code>-moz-border-radius</code></a></li> +</ul> +<p>{{ languages( { "en": "en/CSS/border-right", "fr": "fr/CSS/border-right", "ja": "ja/CSS/border-right", "pl": "pl/CSS/border-right" } ) }}</p> diff --git a/files/de/web/css/border-spacing/index.html b/files/de/web/css/border-spacing/index.html new file mode 100644 index 0000000000..e20300171a --- /dev/null +++ b/files/de/web/css/border-spacing/index.html @@ -0,0 +1,143 @@ +--- +title: border-spacing +slug: Web/CSS/border-spacing +tags: + - CSS + - CSS Eigenschaft + - CSS Referenz + - CSS Tabellen + - Referenz +translation_of: Web/CSS/border-spacing +--- +<div>{{CSSRef}}</div> + +<p>Die <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft <strong><code>border-spacing</code></strong> legt die Abstände zwischen Tabellenzellen fest.<br> + Die Eigenschaft hat nur dann Auswirkungen, wenn <a href="/de/CSS/border-collapse" title="de/CSS/border-collapse"><code>border-collapse: separate</code></a> definiert ist.</p> + +<div>{{EmbedInteractiveExample("pages/css/border-spacing.html")}}</div> + + + +<p>Der Wert für <code>border-spacing </code>wird auch entlang der Außenkante der Tabelle verwendet, wobei der Abstand zwischen dem Rand der Tabelle und den Zellen in der ersten/letzten Spalte oder Zeile die Summe des relevanten Randabstands (horizontalen oder vertikalen) <code>border-spacing</code> und des relevanten (oben, rechts, unten oder links) {{cssxref("padding")}} in der Tabelle ist.</p> + +<p>value is also used along the outside edge of the table, where the distance between the table's border and the cells in the first/last column or row is the sum of the relevant (horizontal or vertical) <code>border-spacing</code> and the relevant (top, right, bottom, or left) {{cssxref("padding")}} on the table.</p> + +<div class="note"> +<p><strong>Hinweis:</strong> Die <code>border-spacing</code> Eigenschaft entspricht demveraltetem <code><table></code> Attribut <code>cellspacing</code>, mit der Ausnahme, dass es einen optionalen zweiten Wert hat, mit dem unterschiedliche horizontale und vertikale Abstände eingestellt werden können.</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: css no-line-numbers notranslate">/* <length> */ +border-spacing: 2px; + +/* horizontal <length> | vertical <length> */ +border-spacing: 1cm 2em; + +/* Global values */ +border-spacing: inherit; +border-spacing: initial; +</pre> + +<p>Die Eigenschaft <code>border-spacing</code> kann entweder als ein oder zwei Werte angegeben werden.</p> + +<ul> + <li>Wenn <strong>ein</strong> <code><length></code> Wert angegeben wird, definiert er sowohl die horizontalen als auch die vertikalen Abstände zwischen den Zellen.</li> + <li>Wenn <strong>zwei</strong> <code><length></code> Werte angegeben werden, definiert der erste Wert den horizontalen Abstand zwischen Zellen (d.h. den Abstand zwischen Zellen in benachbarten Spalten) und der zweite Wert den vertikalen Abstand zwischen Zellen (d.h. den Abstand zwischen Zellen in benachbarten Zeilen).</li> +</ul> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt>{{cssxref("<length>")}}</dt> + <dd>Die Größe des Abstands als fester Wert.</dd> + <dt>{{cssxref("<initial>")}}</dt> + <dd>Setzt den Standardwert für diese Eigenschaft</dd> + <dt>{{cssxref("<inherit>")}}</dt> + <dd>Diese Eigenschaft erbt den Wert von seinem Elternelement.</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="Beispiele">Beispiele</h2> + +<h3 id="Spacing_and_padding_table_cells" name="Spacing_and_padding_table_cells">Abstände und Padding von Tabellenzellen</h3> + +<div class="translate-buttons"> +<p>In diesem Beispiel wird ein Abstand von <code>.5em</code> vertikal und <code>1em</code> horizontal zwischen den Zellen einer Tabelle angewendet. Beachten Sie, wie die <code>padding</code> Werte der Tabelle entlang ihrer Außenkanten zu ihren Randabstandswerten <code>border-spacing</code> addiert werden.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><table> + <tr> + <td>1</td><td>2</td><td>3</td> + </tr> + <tr> + <td>4</td><td>5</td><td>6</td> + </tr> + <tr> + <td>7</td><td>8</td><td>9</td> + </tr> +</table> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">table { + border-spacing: 1em .5em; + padding: 0 2em 1em 0; + border: 1px solid orange; +} + +td { + width: 1.5em; + height: 1.5em; + background: #d2d2d2; + text-align: center; + vertical-align: middle; +} +</pre> + +<h4 id="Ergebnis">Ergebnis</h4> + +<p>{{ EmbedLiveSample('Spacing_and_padding_table_cells', 400, 200) }}</p> + +<h2 id="Spezifikationen">Spezifikationen</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('CSS2.1', 'tables.html#separated-borders', 'border-spacing') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2> + + + +<p>{{Compat("css.properties.border-spacing")}}</p> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/CSS/border-collapse" title="de/CSS/border-collapse"><code>border-collapse</code></a>, <a href="/de/CSS/caption-side" title="de/CSS/caption-side"><code>caption-side</code></a>, <a href="/de/CSS/empty-cells" title="de/CSS/empty-cells"><code>empty-cells</code></a>, <a href="/de/CSS/table-layout" title="de/CSS/table-layout"><code>table-layout</code></a></li> +</ul> + +<p>{{ languages( { "en": "en/CSS/border-spacing", "fr": "fr/CSS/border-spacing", "pl": "pl/CSS/border-spacing", "es": "es/CSS/border-spacing" } ) }}</p> diff --git a/files/de/web/css/border-style/index.html b/files/de/web/css/border-style/index.html new file mode 100644 index 0000000000..32aa331b10 --- /dev/null +++ b/files/de/web/css/border-style/index.html @@ -0,0 +1,219 @@ +--- +title: border-style +slug: Web/CSS/border-style +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/border-style +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <strong><code>border-style</code></strong> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft ist eine Kurzschreibweise zum Setzen des Linienstils für alle vier Seiten des Elementrands.</p> + +<div class="note"><strong>Hinweis:</strong> Der Standardwert von <code>border-style</code> ist <code>none</code>. Das bedeutet, falls die {{cssxref("border-width")}} und die {{cssxref("border-color")}} geändert werden, wird der Rand nicht angezeigt, solange diese Eigenschaft nicht auf etwas anderes als <code>none</code> oder <code>hidden</code> gesetzt wird.</div> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: css notranslate">/* Auf alle vier Seiten anwenden */ +border-style: dashed; + +/* horizontal | vertikal */ +border-style: dotted solid; + +/* open | horizontal | vertikal */ +border-style: hidden double dashed; + +/* open | rechts | unten | links */ +border-style: none solid dotted dashed; + +/* Global values */ +border-style: inherit; +border-style: initial; +border-style: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code><br-style></code></dt> + <dd>Ist ein Schlüsselwort, das den Stil des unteren Rahmens beschreibt. Es kann die folgenden Werte annehmen: + <table class="standard-table"> + <tbody> + <tr> + <td style="vertical-align: middle;"><code>none</code></td> + <td style="vertical-align: middle;"> + <div style="border-width: 3px; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div> + </td> + <td style="vertical-align: middle;">Wie beim <code>hidden</code> Schlüsselwort wird kein Rahmen angezeigt. In diesem Fall sind die berechneten Werte von {{cssxref("border-width")}} <code>0</code>, außer ein Hintergrundbild ist gesetzt, auch wenn die Eigenschaft anders gesetzt wurde. Im Fall von Zusammenfallen von Tabellenzellen und Rahmen hat der <code>none</code> Wert die niedrigste Priorität: Das bedeutet, dass falls irgendein anderer, gegensätzlicher Rahmen gesetzt ist, wird er angezeigt.</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>hidden</code></td> + <td style="vertical-align: middle;"> + <div style="border-width: 3px; border-style: hidden; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div> + </td> + <td style="vertical-align: middle;">Wie beim <code>none</code> Schlüsselwort wird kein Rahmen angezeigt. In diesem Fall sind die berechneten Werte von {{cssxref("border-width")}} <code>0</code>, außer ein Hintergrundbild ist gesetzt, auch wenn die Eigenschaft anders gesetzt wurde. Im Fall von Zusammenfallen von Tabellenzellen und Rahmen hat der <code>hidden</code> Wert die höchste Priorität: Das bedeutet, dass falls irgendein anderer, gegensätzlicher Rahmen gesetzt ist, wird er nicht angezeigt.</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>dotted</code></td> + <td style="vertical-align: middle;"> + <div style="border-width: 3px; border-style: dotted; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div> + </td> + <td style="vertical-align: middle;">Zeigt eine Reihe von runden Punkten an. Die Abstände der Punkte werden nicht durch die Spezifikation bestimmt und sind implementationsspezifisch. Der Radius der Punkte ist die halbe {{cssxref("border-width")}}.</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>dashed</code></td> + <td style="vertical-align: middle;"> + <div style="border-width: 3px; border-style: dashed; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div> + </td> + <td style="vertical-align: middle;">Zeigt eine Reihe von kurzen Strichen mit quadratischen Enden oder Liniensegmenten an. Die exakte Größe und Länger der Segmente werden nicht durch die Spezifikation bestimmt und sind implementationsspezifisch.</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>solid</code></td> + <td style="vertical-align: middle;"> + <div style="border-width: 3px; border-style: solid; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div> + </td> + <td style="vertical-align: middle;">Zeigt eine einfache, gerade, ausgefüllte Linie an.</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>double</code></td> + <td style="vertical-align: middle;"> + <div style="border-width: 3px; border-style: double; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div> + </td> + <td style="vertical-align: middle;">Zeigt zwei gerade Linien an, die zum Pixelwert hinzugefügt werden, der durch {{cssxref("border-width")}} definiert wird.</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>groove</code></td> + <td style="vertical-align: middle;"> + <div style="border-width: 3px; border-style: groove; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div> + </td> + <td style="vertical-align: middle;">Zeigt einen Rahmen an, der zu einem eingeritzten Effekt führt. Er ist das Gegenteil von <code>ridge</code>.</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>ridge</code></td> + <td style="vertical-align: middle;"> + <div style="border-width: 3px; border-style: ridge; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div> + </td> + <td style="vertical-align: middle;">Zeigt einen Rahmen mit einem 3D-Effekt an, so als ob es aus der Seite herauskommt. Er ist das Gegenteil von <code>groove</code>.</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>inset</code></td> + <td style="vertical-align: middle;"> + <div style="border-width: 3px; border-style: inset; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div> + </td> + <td style="vertical-align: middle;">Zeigt einen Rahmen an, der die Box so darstellt, als wäre sie eingelassen. Es ist das Gegenteil von <code>outset</code>. Auf eine Tabellenzelle mit {{cssxref("border-collapse")}} auf collapsed gesetzt angewendet, verhält sich dieser Wert wie groove.</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>outset</code></td> + <td style="vertical-align: middle;"> + <div style="border-width: 3px; border-style: outset; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div> + </td> + <td style="vertical-align: middle;"> + <p>Zeigt einen Rahmen an, der die Box in 3D wie geprägt darstellt. Es ist das Gegenteil von <code>inset</code>. Auf eine Tabellenzelle mit {{cssxref("border-collapse")}} auf <code>collapsed</code> gesetzt angewendet, verhält sich dieser Wert wie <code>ridge</code>.</p> + </td> + </tr> + </tbody> + </table> + </dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Tabelle_mit_allen_Eigenschaftswerten">Tabelle mit allen Eigenschaftswerten</h3> + +<p>Hier ist ein Beispiel aller Eigenschaftswerte.</p> + +<h4 id="HTML_Inhalt">HTML Inhalt</h4> + +<pre class="brush: html notranslate"><table> + <tr> + <td class="b1">none</td> + <td class="b2">hidden</td> + <td class="b3">dotted</td> + <td class="b4">dashed</td> + </tr> + <tr> + <td class="b5">solid</td> + <td class="b6">double</td> + <td class="b7">groove</td> + <td class="b8">ridge</td> + </tr> + <tr> + <td class="b9">inset</td> + <td class="b10">outset</td> + </tr> +</table></pre> + +<h4 id="CSS_Inhalt">CSS Inhalt</h4> + +<pre class="brush: css notranslate">/* Definiert das Aussehen der Tabelle */ +table { + border-width: 3px; + background-color: #52E396; +} + +tr, td { + padding: 2px; +} + +/* border-style Beispielklassen */ +.b1 { border-style: none; } +.b2 { border-style: hidden; } +.b3 { border-style: dotted; } +.b4 { border-style: dashed; } +.b5 { border-style: solid; } +.b6 { border-style: double; } +.b7 { border-style: groove; } +.b8 { border-style: ridge; } +.b9 { border-style: inset; } +.b10 { border-style: outset; }</pre> + +<h4 id="Ausgabe">Ausgabe</h4> + +<p>{{EmbedLiveSample('Tabelle_mit_allen_Eigenschaftswerten', 300, 200)}}</p> + +<h2 id="Spezifikationen">Spezifikationen</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 Backgrounds', '#border-style', 'border-style')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>Keine Änderung</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'box.html#propdef-border-style', 'border-style')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>2-, 3- und 4-Wert-Syntaxen hinzugefügt</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#border-style', 'border-style')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{Compat("css.properties.border-style")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Die Rahmen-bezogenen Kurzschreibweise CSS Eigenschaften: {{cssxref("border")}}, {{cssxref("border-width")}}, {{cssxref("border-color")}}, {{cssxref("border-radius")}}</li> +</ul> diff --git a/files/de/web/css/border-top-color/index.html b/files/de/web/css/border-top-color/index.html new file mode 100644 index 0000000000..3bf2e95cb2 --- /dev/null +++ b/files/de/web/css/border-top-color/index.html @@ -0,0 +1,81 @@ +--- +title: border-top-color +slug: Web/CSS/border-top-color +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/border-top-color +--- +<p>{{ CSSRef() }}</p> +<h2 id="Übersicht">Übersicht</h2> +<p>Die <code>border-top-color</code> Eigenschaft legt die Farbe des oberen Rahmens fest. Da der Standardwert für die Rahmenart <code>none</code> ist, muss eine Angabe der <a href="/de/CSS/border-top-style" title="de/CSS/border-top-style"><code>border-top-style</code></a> Eigenschaft erfolgen, damit ein oberer Rahmen sichtbar werden kann. Es ist daher sinnvoll mit der Kurzform <a href="/de/CSS/border-top" title="de/CSS/border-top"><code>border-top</code></a> gleich die Farbe und die Art des oberen Rahmens festzulegen.</p> +<ul> + <li>Standardwert: Wert der <a href="/de/CSS/color" title="de/CSS/color"><code>color</code></a> Eigenschaft</li> + <li>Anwendbar auf: Alle Elemente</li> + <li>Vererbbar: Nein</li> + <li>Prozentwerte: Nein</li> + <li>Medium: visuell</li> + <li>berechneter Wert: die berechnete Farbe</li> +</ul> +<h2 id="Syntax">Syntax</h2> +<pre class="eval">border-top-color: <Farbe> | transparent | inherit +</pre> +<h2 id="Werte">Werte</h2> +<dl> + <dt> + <Farbe></dt> + <dd> + <a href="/de/CSS/Farben" title="de/CSS/Farben">Farbangabe</a> [ Hexadezimalwert, Farbname, Systemfarbe, rgb(), rgba(), hsl() oder hlsa() ]</dd> + <dt> + transparent</dt> + <dd> + Das Element hat keine Farbe. Es wird die Farbe des dahinter liegenden Elementes angezeigt.</dd> + <dt> + inherit</dt> + <dd> + Der Wert des Elternelements wird geerbt.</dd> +</dl> +<h2 id="Beispiele">Beispiele</h2> +<pre style="border-top-style: solid;">pre { + border-top-style: solid; + border-top-color: red; + +} +</pre> +<h2 id="Browser_Kompatibilität">Browser <span>Kompatibilität</span></h2> +<table class="standard-table"> + <tbody> + <tr> + <th>Browser</th> + <th>ab Version</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>4.0</td> + </tr> + <tr> + <td>Firefox (Gecko)</td> + <td>1.0 (1.0)</td> + </tr> + <tr> + <td>Opera</td> + <td>3.5</td> + </tr> + <tr> + <td>Safari (WebKit)</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +<h2 id="Spezifikation">Spezifikation</h2> +<ul> + <li><a class="external" href="http://www.w3.org/TR/css3-background/#border-top-color" lang="en">CSS 3 Background and Borders #border-top-color</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#propdef-border-top-color" lang="en">CSS 2.1 Box #border-top-color</a></li> +</ul> +<h2 id="Siehe_auch">Siehe auch</h2> +<ul> + <li><a href="/de/CSS/border-top" title="de/CSS/border-top"><code>border-top</code></a>, <a href="/de/CSS/border-top-style" title="de/CSS/border-top-style"><code>border-top-style</code></a>, <a href="/De/CSS/Border-top-width" title="De/CSS/Border-top-width"><code>border-top-width</code></a></li> + <li><a href="/de/CSS/border-bottom" title="de/CSS/border-bottom"><code>border-bottom</code></a>, <a href="/de/CSS/border-left" title="de/CSS/border-left"><code>border-left</code></a>, <a href="/de/CSS/border-right" title="de/CSS/border-right"><code>border-right</code></a></li> + <li><a href="/de/CSS/-moz-border-top-colors" title="de/CSS/-moz-border-top-colors"><code>-moz-border-top-colors</code></a></li> +</ul> +<p>{{ languages( { "en": "en/CSS/border-top-color", "fr": "fr/CSS/border-top-color", "ja": "ja/CSS/border-top-color", "pl": "pl/CSS/border-top-color" } ) }}</p> diff --git a/files/de/web/css/border-top-left-radius/index.html b/files/de/web/css/border-top-left-radius/index.html new file mode 100644 index 0000000000..9c3408d8a5 --- /dev/null +++ b/files/de/web/css/border-top-left-radius/index.html @@ -0,0 +1,91 @@ +--- +title: border-top-left-radius +slug: Web/CSS/border-top-left-radius +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/border-top-left-radius +--- +<p>{{ CSSRef }}</p> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>border-top-left-radius</code> Eigenschaft die Abrundung der oberen, linken Ecke eines Elements fest.</p> + +<p>Vor Gecko 2.0 (Firefox 4.0) war diese Eigenschaft als <code>-moz-border-radius-topleft</code> bekannt. Diese Eigenschaft wird weiterhin übergangsweise unterstützt.</p> + +<p>Weitere Informationen sind unter <a href="/de/CSS/border-radius" title="de/CSS/border-radius"><code>border-radius</code></a> verfügbar.</p> + +<p>{{cssinfo("border-top-left-radius")}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="eval"><a href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax" title="/en-US/docs/CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("border-top-left-radius")}} +-moz-border-radius-topleft: [ <Länge> | <Prozentzahl> ] [ <Länge> | <Prozentzahl> ]? + border-top-left-radius:[ <Länge> | <Prozentzahl> ] [ <Länge> | <Prozentzahl> ]? +</pre> + +<h2 id="Werte">Werte</h2> + +<p>Seit Gecko 1.9.1 (Firefox 3.5) wird ein zweiter, optionaler Wert unterstützt, welcher Längenwerte für elliptische Ecken akzeptiert. Es gibt zwei Werte, die die Form der Ecke beschreiben: Der erste Wert ist der horizontale, der zweite Wert der vertikale Radius. Wird nur ein Wert angegeben, gilt dieser für beide Richtungen (horizontal und vertikal).</p> + +<dl> + <dt><Länge></dt> + <dd>Siehe <a href="/de/CSS/Einheiten#L.c3.a4ngen" title="de/CSS/Einheiten#L.c3.a4ngen">Längen</a> für mögliche Einheiten.</dd> + <dt><Prozentzahl></dt> + <dd>In Gecko 2.0 (Firefox 4.0):<br> + Prozentuale Angaben für den horizontalen Radius beziehen sich auf die Breite der Box. Die Prozentzahl für den vertikalen Radius ist allerdings relativ zur Höhe der Box.<br> + In vorherigen Gecko- & Firefox-Versionen:<br> + {{ non-standard_inline() }} Eine prozentuale Angabe, die sich auf die Breite der Box bezieht. Die Prozentzahl ist selbst dann relativ zur Breite, wenn ein Radius für die Höhe festgelegt wird.</dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<pre>div { -moz-border-radius-topleft: 20px; /* Firefox bis Version 3.6 */ + -webkit-border-top-left-radius: 20px; /* Safari, Chrome (vor WebKit Version 533) */ + border-top-left-radius: 20px; /* Firefox 4; Browser mit CSS3 Unterstützung */ +} +</pre> + +<pre>/* Elliptische Ecke (unterstützt seit Firefox 3.5 [Gecko 1.9.1]) */ + +div { -moz-border-radius-topleft: 20px; /* Runde Ecke, Fallback für Firefox 1-3.0 */ + -moz-border-radius-topleft: 20px 10px; /* elliptischer Rahmen für Firefox 3.5-3.6 */ + -webkit-border-top-left-radius: 20px 10px; /* Safari, Chrome (vor WebKit Version 532.5) */ + border-top-left-radius: 20px 10px; /* Firefox 4; Browser mit CSS3 Unterstützung */ +} +</pre> + + +<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 Backgrounds', '#border-top-left-radius', 'border-top-left-radius')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{Compat("css.properties.border-top-left-radius")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/CSS/border-radius" title="de/CSS/border-radius"><code>border-radius</code></a></li> +</ul> + +<p>{{ languages( { "en": "en/CSS/border-top-left-radius", "fr": "fr/CSS/border-top-left-radius", "ja": "ja/CSS/border-top-left-radius", "pl": "pl/CSS/-moz-border-radius-topleft" } ) }}</p> diff --git a/files/de/web/css/border-top-right-radius/index.html b/files/de/web/css/border-top-right-radius/index.html new file mode 100644 index 0000000000..dd04ae2d87 --- /dev/null +++ b/files/de/web/css/border-top-right-radius/index.html @@ -0,0 +1,47 @@ +--- +title: border-top-right-radius +slug: Web/CSS/border-top-right-radius +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/border-top-right-radius +--- +<p>{{CSSRef}}</p> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die CSS Eingenschaft <code>border-top-right-radius</code> legt die Abrundung der oberen rechten Ecke eines Elements fest. Vor Gecko 2.0 (Firefox 4) war diese Eigenschaft unter dem Namen <code>-moz-border-radius-topright</code> bekannt.</p> + +<p>Weitere Informationen sind unter <a href="/de/CSS/border-top-left-radius" title="de/CSS/border-top-left-radius"><code>border-top-left-radius</code></a> verfügbar.</p> + +<p>{{cssinfo("border-top-right-radius")}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="twopartsyntaxbox language-html"><a href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax" title="/en-US/docs/CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("border-top-right-radius")}} </pre> + + +<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 Backgrounds', '#border-top-right-radius', 'border-top-right-radius')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{Compat("css.properties.border-top-right-radius")}}</p> diff --git a/files/de/web/css/border-top-style/index.html b/files/de/web/css/border-top-style/index.html new file mode 100644 index 0000000000..10fbe13a5b --- /dev/null +++ b/files/de/web/css/border-top-style/index.html @@ -0,0 +1,120 @@ +--- +title: border-top-style +slug: Web/CSS/border-top-style +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/border-top-style +--- +<p>{{ CSSRef() }}</p> +<h2 id="Übersicht">Übersicht</h2> +<p>Die <code>border-top-style</code> Eigenschaft legt die Rahmenart des oberen Rahmens fest.</p> +<ul> + <li>Standardwert: <code>none</code></li> + <li>Anwendbar auf: Alle Elemente</li> + <li>Vererbbar: Nein</li> + <li>Prozentwerte: Nein</li> + <li>Medium: visuell</li> + <li>berechneter Wert: wie festgelegt</li> +</ul> +<h2 id="Syntax">Syntax</h2> +<pre class="eval">border-top-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit +</pre> +<h2 id="Werte">Werte</h2> +<dl> + <dt> + none</dt> + <dd> + Standardwert. Es wird kein oberer Rahmen gezeichnet und die Breite wird auf '0' zurückgesetzt.</dd> + <dt> + hidden</dt> + <dd> + Genau wie bei <code>none</code> wird kein Rahmen angezeigt. Das Verhalten unterscheidet sich jedoch beim "Collapsing Border Model" innerhalb von Tabellen.<br> + Wenn <a href="/de/CSS/border-collapse" title="de/CSS/border-collapse"><code>border-collapse: collapse</code></a> gesetzt wurde, wird auch an den angrenzenden Nachbarzellen kein Rahmen dargestellt.</dd> + <dt> + dotted</dt> + <dd> + Punktierte Linie.</dd> + <dt> + dashed</dt> + <dd> + Gestrichelte Linie.</dd> + <dt> + solid</dt> + <dd> + Durchgehende Linie.</dd> + <dt> + double</dt> + <dd> + Zwei durchgehende Linien mit Zwischenraum. Die zwei Linien und der Zwischenraum sind jeweils ein Drittel der <a href="/De/CSS/Border-top-width" title="De/CSS/Border-top-width"><code>border-top-width</code></a> Angabe groß.</dd> + <dt> + groove</dt> + <dd> + Der Rahmen wirkt eingekerbt (3D-Effekt).</dd> + <dt> + ridge</dt> + <dd> + Der Rahmen wirkt wie eine Kante (3D-Effekt).</dd> + <dt> + inset</dt> + <dd> + Durch den Rahmen wirkt das ganze Element eingetieft (3D-Effekt).</dd> + <dt> + outset</dt> + <dd> + Durch den Rahmen wirkt das ganze Element herausgehoben (3D-Effekt).</dd> + <dt> + inherit</dt> + <dd> + Der Wert des Elternelements wird geerbt.</dd> +</dl> +<h2 id="Beispiele">Beispiele</h2> +<pre>.beispielEins { + border-top-style: dashed; /* gestrichelt */ +} + +.beispielZwei { + border-top-style: groove; /* Einkerbung */ +} + +.beispielDrei { + border-top-style: hidden; /* Collapsing Border Model */ + border-collapse: collapse; +} +</pre> +<h2 id="Browser_Kompatibilität">Browser <span>Kompatibilität</span></h2> +<table class="standard-table"> + <tbody> + <tr> + <th>Browser</th> + <th>ab Version</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>4.0</td> + </tr> + <tr> + <td>Firefox (Gecko)</td> + <td>1.0 (1.0)</td> + </tr> + <tr> + <td>Opera</td> + <td>3.5</td> + </tr> + <tr> + <td>Safari (WebKit)</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +<h2 id="Spezifikation">Spezifikation</h2> +<ul> + <li><a class="external" href="http://www.w3.org/TR/css3-background/#border-top-style" lang="en">CSS 3 Background and Borders #border-top-style</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#propdef-border-top-style" lang="en">CSS 2.1 Box #border-top-style</a></li> +</ul> +<h2 id="Siehe_auch">Siehe auch</h2> +<ul> + <li><a href="/de/CSS/border-top" title="de/CSS/border-top"><code>border-top</code></a>, <a href="/de/CSS/border-top-color" title="de/CSS/border-top-color"><code>border-top-color</code></a>, <a href="/De/CSS/Border-top-width" title="De/CSS/Border-top-width"><code>border-top-width</code></a></li> + <li><a href="/de/CSS/border-style" title="de/CSS/border-style"><code>border-style</code></a>, <a href="/de/CSS/border-bottom-style" title="de/CSS/border-bottom-style"><code>border-bottom-style</code></a>, <a href="/de/CSS/border-left-style" title="de/CSS/border-left-style"><code>border-left-style</code></a>, <a href="/de/CSS/border-right-style" title="de/CSS/border-right-style"><code>border-right-style</code></a></li> +</ul> +<p>{{ languages( { "en": "en/CSS/border-top-style", "fr": "fr/CSS/border-top-style", "ja": "ja/CSS/border-top-style", "pl": "pl/CSS/border-top-style" } ) }}</p> diff --git a/files/de/web/css/border-top-width/index.html b/files/de/web/css/border-top-width/index.html new file mode 100644 index 0000000000..b740149b3c --- /dev/null +++ b/files/de/web/css/border-top-width/index.html @@ -0,0 +1,90 @@ +--- +title: border-top-width +slug: Web/CSS/Border-top-width +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/border-top-width +--- +<p>{{ CSSRef() }}</p> +<h2 id="Übersicht">Übersicht</h2> +<p>Die <code>border-top-width</code> Eigenschaft legt die Breite des oberen Rahmens fest.</p> +<ul> + <li>Standardwert: <code>medium</code></li> + <li>Anwendbar auf: Alle Elemente</li> + <li>Vererbbar: Nein</li> + <li>Prozentwerte: Nein</li> + <li>Medium: visuell</li> + <li>berechneter Wert: absolute Länge; <code>0</code> wenn <code>none</code> oder <code>hidden</code> festgelegt wurde</li> +</ul> +<h2 id="Syntax">Syntax</h2> +<pre class="eval">border-top-width: <Länge> | thin | medium | thick | inherit +</pre> +<h2 id="Werte">Werte</h2> +<dl> + <dt> + <Länge></dt> + <dd> + Eine <a href="/de/CSS/Einheiten#L.c3.a4ngen" title="de/CSS/Einheiten#L.c3.a4ngen">Längenangabe</a> die, die Rahmenstärke explizit angibt. Es sind keine negativen Werte erlaubt.</dd> + <dt> + thin</dt> + <dd> + Eine dünne Rahmenlinie (1px).</dd> + <dt> + medium</dt> + <dd> + Standardwert. Eine mitteldicke Rahmenlinie (3px).</dd> + <dt> + thick</dt> + <dd> + Eine dicke Rahmenlinie (5px).</dd> + <dt> + inherit</dt> + <dd> + Der Wert des Elternelements wird geerbt.</dd> +</dl> +<h2 id="Beispiele">Beispiele</h2> +<pre>.beispielEins { + border-top-width: 10px; +} + +.beispielZwei { + border-top-width: thin; +} +</pre> +<h2 id="Browser_Kompatibilität">Browser <span>Kompatibilität</span></h2> +<table class="standard-table"> + <tbody> + <tr> + <th>Browser</th> + <th>ab Version</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>4.0</td> + </tr> + <tr> + <td>Firefox (Gecko)</td> + <td>1.0 (1.0)</td> + </tr> + <tr> + <td>Opera</td> + <td>3.5</td> + </tr> + <tr> + <td>Safari (WebKit)</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +<h2 id="Spezifikation">Spezifikation</h2> +<ul> + <li><a class="external" href="http://www.w3.org/TR/css3-background/#border-top-width" lang="en">CSS 3 Background and Borders #border-top-width</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#propdef-border-top-width" lang="en">CSS 2.1 Box #border-top-width</a></li> +</ul> +<h2 id="Siehe_auch">Siehe auch</h2> +<ul> + <li><a href="/de/CSS/border-top" title="de/CSS/border-top"><code>border-top</code></a>, <a href="/de/CSS/border-top-color" title="de/CSS/border-top-color"><code>border-top-color</code></a>, <a href="/de/CSS/border-top-style" title="de/CSS/border-top-style"><code>border-top-style</code></a></li> + <li><a href="/de/CSS/border-width" title="de/CSS/border-width"><code>border-width</code></a>, <a href="/De/CSS/Border-bottom-width" title="De/CSS/Border-bottom-width"><code>border-bottom-width</code></a>, <a href="/De/CSS/Border-left-width" title="De/CSS/Border-left-width"><code>border-left-width</code></a>, <a href="/De/CSS/Border-right-width" title="De/CSS/Border-right-width"><code>border-right-width</code></a></li> +</ul> +<p>{{ languages( { "en": "en/CSS/border-top-width", "fr": "fr/CSS/border-top-width", "ja": "ja/CSS/border-top-width", "pl": "pl/CSS/border-top-width" } ) }}</p> diff --git a/files/de/web/css/border-top/index.html b/files/de/web/css/border-top/index.html new file mode 100644 index 0000000000..4724a57ad7 --- /dev/null +++ b/files/de/web/css/border-top/index.html @@ -0,0 +1,98 @@ +--- +title: border-top +slug: Web/CSS/border-top +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/border-top +--- +<p>{{ CSSRef() }}</p> +<h2 id="Übersicht">Übersicht:</h2> +<p>Die <code>border-top</code> Eigenschaft legt den oberen Rahmen eines Elementes fest und ist eine Kurzform für<br> + <a href="/de/CSS/border-top-color" title="de/CSS/border-top-color"><code>border-top-color</code></a>, <a href="/de/CSS/border-top-style" title="de/CSS/border-top-style"><code>border-top-style</code></a> und <a href="/De/CSS/Border-top-width" title="De/CSS/Border-top-width"><code>border-top-width</code></a>. Die Werte der drei Eigenschaften können in beliebiger Reihenfolge angegeben werden.</p> +<ul> + <li>Standardwert: siehe einzelne Eigenschaften</li> + <li>Anwendbar auf: Alle Elemente</li> + <li>Vererbbar: Nein</li> + <li>Prozentwerte: Nein</li> + <li>Medium: visuell</li> + <li>berechneter Wert: siehe einzelne Eigenschaften</li> +</ul> +<h2 id="Syntax">Syntax</h2> +<pre class="eval">border-top: [ <Rahmenbreite> || <Rahmenstil> || <Rahmenfarbe> ] | inherit +</pre> +<h2 id="Werte">Werte</h2> +<dl> + <dt> + <Rahmenbreite></dt> + <dd> + Optional. Wenn nichts festgelegt ist, wird <code>medium</code> verwendet. Siehe: <a href="/De/CSS/Border-top-width" title="De/CSS/Border-top-width"><code>border-top-width</code></a>.</dd> + <dt> + <Rahmenstil></dt> + <dd> + Erforderlich. Wenn nichts festgelegt ist, wird <code>none</code> verwendet. Siehe: <a href="/de/CSS/border-top-style" title="de/CSS/border-top-style"><code>border-top-style</code></a>.</dd> + <dt> + <Rahmenfarbe></dt> + <dd> + Optional. Wenn nichts festgelegt ist, wird der Wert der <code>color</code> Eigenschaft des Elements genommen. Siehe: <a href="/de/CSS/border-top-color" title="de/CSS/border-top-color"><code>border-top-color</code></a>.</dd> + <dt> + inherit</dt> + <dd> + Der Wert des Elternelements wird geerbt.</dd> +</dl> +<h2 id="Beispiele">Beispiele</h2> +<pre>.beispielEins { + border-top: 1px solid #000; +} + +.beispielZwei { + border-top-style: dotted; + border-top: thick green; + + /* Bedeutet das gleiche wie: */ + + border-top-style: dotted; + border-top: none thick green; + + /* border-top-style wird nach Angabe von border-top ignoriert. + Es wird kein oberer Rahmen gezeichnet. */ +} +</pre> +<h2 id="Browser_Kompatibilität">Browser <span>Kompatibilität</span></h2> +<table class="standard-table"> + <tbody> + <tr> + <th>Browser</th> + <th>ab Version</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>4.0</td> + </tr> + <tr> + <td>Firefox (Gecko)</td> + <td>1.0 (1.0)</td> + </tr> + <tr> + <td>Opera</td> + <td>3.5</td> + </tr> + <tr> + <td>Safari (WebKit)</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +<h2 id="Spezifikation">Spezifikation</h2> +<ul> + <li><a class="external" href="http://www.w3.org/TR/css3-background/#border-top" lang="en">CSS 3 Background and Borders #border-top</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#propdef-border-top" lang="en">CSS 2.1 Box #border-top</a></li> +</ul> +<h2 id="Siehe_auch">Siehe auch</h2> +<ul> + <li><a href="/de/CSS/border-top-color" title="de/CSS/border-top-color"><code>border-top-color</code></a>, <a href="/de/CSS/border-top-style" title="de/CSS/border-top-style"><code>border-top-style</code></a>, <a href="/De/CSS/Border-top-width" title="De/CSS/Border-top-width"><code>border-top-width</code></a></li> + <li><a href="/de/CSS/border-bottom" title="de/CSS/border-bottom"><code>border-bottom</code></a>, <a href="/de/CSS/border-left" title="de/CSS/border-left"><code>border-left</code></a>, <a href="/de/CSS/border-right" title="de/CSS/border-right"><code>border-right</code></a></li> + <li><a href="/de/CSS/-moz-border-top-colors" title="de/CSS/-moz-border-top-colors"><code>-moz-border-top-colors</code></a></li> + <li><a href="/de/CSS/-moz-border-image" title="de/CSS/-moz-border-image"><code>-moz-border-image</code></a>, <a href="/de/CSS/border-radius" title="de/CSS/-moz-border-radius"><code>-moz-border-radius</code></a></li> +</ul> +<p>{{ languages( { "en": "en/CSS/border-top", "fr": "fr/CSS/border-top", "ja": "ja/CSS/border-top", "pl": "pl/CSS/border-top" } ) }}</p> diff --git a/files/de/web/css/border-width/index.html b/files/de/web/css/border-width/index.html new file mode 100644 index 0000000000..fe0e129bfa --- /dev/null +++ b/files/de/web/css/border-width/index.html @@ -0,0 +1,118 @@ +--- +title: border-width +slug: Web/CSS/border-width +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/border-width +--- +<p>{{ CSSRef() }}</p> +<h2 id="Übersicht">Übersicht</h2> +<p>Die <code>border-width</code> Eigenschaft legt die Breite des oberen, rechten, unteren und linken Rahmens fest.</p> +<ul> + <li>Standardwert: <code>medium</code></li> + <li>Anwendbar auf: Alle Elemente</li> + <li>Vererbbar: Nein</li> + <li>Prozentwerte: Nein</li> + <li>Medium: visuell</li> + <li>berechneter Wert: absolute Länge; <code>0</code> wenn <code>none</code> oder <code>hidden</code> festgelegt wurde</li> +</ul> +<h2 id="Syntax">Syntax</h2> +<pre class="eval">border-width: [<Länge> | thin | medium | thick] {1,4} | inherit +</pre> +<h2 id="Werte">Werte</h2> +<dl> + <dt> + <Länge></dt> + <dd> + Eine <a href="/de/CSS/Einheiten#L.c3.a4ngen" title="de/CSS/Einheiten#L.c3.a4ngen">Längenangabe</a> die, die Rahmenstärke explizit angibt. Es sind keine negativen Werte erlaubt.</dd> + <dt> + thin</dt> + <dd> + Eine dünne Rahmenlinie (1px; IE 4-7: 2px).</dd> + <dt> + medium</dt> + <dd> + Standardwert. Eine mitteldicke Rahmenlinie (3px; IE 4-7: 4px).</dd> + <dt> + thick</dt> + <dd> + Eine dicke Rahmenlinie (5px; IE 4-7: 6px).</dd> + <dt> + inherit</dt> + <dd> + Der Wert des Elternelements wird geerbt.</dd> + <dt> + Ein Wert</dt> + <dd> + Gilt für alle vier Seiten: <a href="/de/CSS/border-top-width" rel="internal">border-top-width</a>, <a href="/de/CSS/border-right-width" rel="internal">border-right-width</a>, <a href="/de/CSS/border-bottom-width" rel="internal">border-bottom-width</a> und <a href="/de/CSS/border-left-width" rel="internal">border-left-width</a>.</dd> + <dt> + Zwei Werte</dt> + <dd> + Der erste Wert gilt für <a href="/de/CSS/border-top-width" rel="internal">border-top-width</a> und <a href="/de/CSS/border-bottom-width" rel="internal">border-bottom-width</a>, der zweite Wert für <a href="/de/CSS/border-right-width" rel="internal">border-right-width</a> und <a href="/de/CSS/border-left-width" rel="internal">border-left-width</a>.</dd> + <dt> + Drei Werte</dt> + <dd> + Der erste Wert gilt für <a href="/de/CSS/border-top-width" rel="internal">border-top-width</a>, der zweite Wert für <a href="/de/CSS/border-right-width" rel="internal">border-right-width</a> und <a href="/de/CSS/border-left-width" rel="internal">border-left-width</a> und der dritte Wert für <a href="/de/CSS/border-bottom-width" rel="internal">border-bottom-width</a>.</dd> + <dt> + Vier Werte</dt> + <dd> + Der erste Wert gilt für <a href="/de/CSS/border-top-width" rel="internal">border-top-width</a>, der zweite Wert für <a href="/de/CSS/border-right-width" rel="internal">border-right-width</a>, der dritte Wert für <a href="/de/CSS/border-bottom-width" rel="internal">border-bottom-width</a> und der vierte Wert für <a href="/de/CSS/border-left-width" rel="internal">border-left-width</a>.</dd> +</dl> +<h2 id="Beispiele">Beispiele</h2> +<pre style="border: solid #ccc; border-width: 3px;">.beispielEins { + border: solid #ccc; + border-width: 3px; +} +</pre> +<pre style="border: solid #ccc; border-width: thin thick;">.beispielZwei { + border: solid #ccc; + border-width: thin thick; +} +</pre> +<pre style="border: solid #ccc; border-width: thin thick 10px;">.beispielDrei { + border: solid #ccc; + border-width: thin thick 10px; +} +</pre> +<pre style="border: solid #ccc; border-width: thin thick 10px 2em;">.beispielVier { + border: solid #ccc; + border-width: thin thick 10px 2em; +} +</pre> +<h2 id="Browser_Kompatibilität">Browser <span>Kompatibilität</span></h2> +<table class="standard-table"> + <tbody> + <tr> + <th>Browser</th> + <th>ab Version</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>4.0</td> + </tr> + <tr> + <td>Firefox (Gecko)</td> + <td>1.0 (1.0)</td> + </tr> + <tr> + <td>Opera</td> + <td>3.5</td> + </tr> + <tr> + <td>Safari (WebKit)</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +<h2 id="Spezifikation">Spezifikation</h2> +<ul> + <li><a class="external" href="http://www.w3.org/TR/css3-background/#border-width" lang="en">CSS 3 Background and Borders #border-width</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#propdef-border-width" lang="en">CSS 2.1 Box #border-width</a></li> +</ul> +<h2 id="Siehe_auch">Siehe auch</h2> +<ul> + <li><a href="/de/CSS/border" title="de/CSS/border"><code>border</code></a></li> + <li><a href="/De/CSS/Border-bottom-width" title="De/CSS/Border-bottom-width"><code>border-bottom-width</code></a>, <a href="/De/CSS/Border-left-width" title="De/CSS/Border-left-width"><code>border-left-width</code></a>, <a href="/De/CSS/Border-right-width" title="De/CSS/Border-right-width"><code>border-right-width</code></a>, <a href="/De/CSS/Border-top-width" title="De/CSS/Border-top-width"><code>border-top-width</code></a></li> +</ul> +<p>{{ languages( { "en": "en/CSS/border-width", "fr": "fr/CSS/border-width", "ja": "ja/CSS/border-width", "pl": "pl/CSS/border-width", "es": "es/CSS/border-width" } ) }}</p> diff --git a/files/de/web/css/border/index.html b/files/de/web/css/border/index.html new file mode 100644 index 0000000000..ffcf4c2631 --- /dev/null +++ b/files/de/web/css/border/index.html @@ -0,0 +1,99 @@ +--- +title: border +slug: Web/CSS/border +tags: + - CSS + - CSS Eigenschaft + - CSS Rahmen + - Layout + - NeedsMobileBrowserCompatibility + - Referenz + - Web +translation_of: Web/CSS/border +--- +<div>{{CSSRef("CSS Borders")}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>border</code> Eigenschaft legt den kompletten Rahmen eines Elementes fest und ist eine Kurzform für<br> + <a href="/de/CSS/border-color" title="de/CSS/border-color"><code>border-color</code></a>, <a href="/de/CSS/border-style" title="de/CSS/border-style"><code>border-style</code></a> und <a href="/de/CSS/border-width" title="de/CSS/border-width"><code>border-width</code></a>. Die Werte der drei Eigenschaften können in beliebiger Reihenfolge angegeben werden.<br> + Unterschiedliche Einstellungen für den oberen, unteren, linken und rechten Rahmen können nur unter den Kurzformen<br> + <a href="/de/CSS/border-bottom" title="de/CSS/border-bottom"><code>border-bottom</code></a>, <a href="/de/CSS/border-top" title="de/CSS/border-top"><code>border-top</code></a>, <a href="/de/CSS/border-left" title="de/CSS/border-left"><code>border-left</code></a> und <a href="/de/CSS/border-right" title="de/CSS/border-right"><code>border-right</code></a> festgelegt werden.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="eval">border: <code>1px;</code> +border: 2px dotted; +border: medium dashed green;</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><Rahmenbreite></dt> + <dd>Optional. Wenn nichts festgelegt ist, wird <code>medium</code> verwendet. Siehe: <a href="/de/CSS/border-width" title="de/CSS/border-width"><code>border-width</code></a>.</dd> + <dt><Rahmenstil></dt> + <dd>Erforderlich. Wenn nichts festgelegt ist, wird <code>none</code> verwendet. Siehe: <a href="/de/CSS/border-style" title="de/CSS/border-style"><code>border-style</code></a>.</dd> + <dt><Rahmenfarbe></dt> + <dd>Optional. Wenn nichts festgelegt ist, wird der Wert der <code>color</code> Eigenschaft des Elements genommen. Siehe: <a href="/de/CSS/border-color" title="de/CSS/border-color"><code>border-color</code></a>.</dd> + <dt>inherit</dt> + <dd>Der Wert des Elternelements wird geerbt.</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<p><a class="external" href="/samples/cssref/border.html" rel="external nofollow">Live Beispiel</a></p> + +<pre> border: dashed; /* gestrichelter Rahmen mit mittlerer Breite und gleicher Farbe wie der Text */ + border: dotted 1.5em; /* gestrichelt, 1.5em breit, gleiche Farbe wie der Text */ + border: solid red; /* durchgezogener, roter Rahmen mit mittelgroßer Breite */ + border: solid blue 10px; /* durchgezogene Linie, blaue Farbe, 10px Breite */ +</pre> + +<h2 id="Specifications" name="Specifications">Spezifikation</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Argument</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Backgrounds', '#the-border-shorthands', 'border')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>Technically removes the support for <code>transparent</code> as it is now a valid {{cssxref("<color>")}}; this has no practical influence.<br> + Though it cannot be set to another value using the shorthand, <code>border</code> does now reset {{cssxref("border-image")}} to its initial value (<code>none</code>).</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'box.html#border-shorthand-properties', 'border')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Accepts the <code>inherit</code> keyword. Also accepts <code>transparent</code> as a valid color.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#border', 'border')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.properties.border")}} + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/CSS/border-color" title="de/CSS/border-color"><code>border-color</code></a>, <a href="/de/CSS/border-style" title="de/CSS/border-style"><code>border-style</code></a>, <a href="/de/CSS/border-width" title="de/CSS/border-width"><code>border-width</code></a></li> + <li><a href="/de/CSS/border-bottom" title="de/CSS/border-bottom"><code>border-bottom</code></a>, <a href="/de/CSS/border-top" title="de/CSS/border-top"><code>border-top</code></a>, <a href="/de/CSS/border-left" title="de/CSS/border-left"><code>border-left</code></a>, <a href="/de/CSS/border-right" title="de/CSS/border-right"><code>border-right</code></a></li> + <li><a href="/de/CSS/-moz-border-bottom-colors" title="de/CSS/-moz-border-bottom-colors"><code>-moz-border-bottom-colors</code></a>, <a href="/de/CSS/-moz-border-top-colors" title="de/CSS/-moz-border-top-colors"><code>-moz-border-top-colors</code></a>, <a href="/de/CSS/-moz-border-left-colors" title="de/CSS/-moz-border-left-colors"><code>-moz-border-left-colors</code></a>, <a href="/de/CSS/-moz-border-right-colors" title="de/CSS/-moz-border-right-colors"><code>-moz-border-right-colors</code></a>,</li> + <li><a href="/de/CSS/-moz-border-image" title="de/CSS/-moz-border-image"><code>-moz-border-image</code></a>, <a href="/de/CSS/border-radius" title="de/CSS/-moz-border-radius"><code>-moz-border-radius</code></a></li> +</ul> diff --git a/files/de/web/css/bottom/index.html b/files/de/web/css/bottom/index.html new file mode 100644 index 0000000000..5f9ed69a02 --- /dev/null +++ b/files/de/web/css/bottom/index.html @@ -0,0 +1,74 @@ +--- +title: bottom +slug: Web/CSS/Bottom +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/bottom +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>bottom</code> Eigenschaft macht eine Angabe zur Position von Elementen und wird daher zusammen mit der <a href="/de/CSS/position" title="de/CSS/position"><code>position</code></a> Eigenschaft notiert, wenn für die Positionsart der Wert <code>absolute</code>, <code>fixed</code> oder <code>relative</code> definiert wurde.</p> + +<p>Bei absolut positionierten Elementen (<code>position: absolute</code> oder <code>position: fixed</code>) wird der Abstand zwischen der unteren, äußeren Kante (<em>margin edge</em>) des Elements und der unteren Kante des umschließenden Blocks definiert.</p> + +<p>Bei relativ positionierten Elementen (<code>position: relative</code>) wird das Element aus seiner normalen Position im Elementfluss verschoben. Dabei gilt: Wenn die <a href="/De/CSS/Top" title="De/CSS/Top"><code>top</code></a> Eigenschaft definiert wurde, überschreibt diese den Wert der <code>bottom</code> Eigenschaft. Wenn <a href="/De/CSS/Top" title="De/CSS/Top"><code>top</code></a> den Wert <code>auto</code> besitzt, ist der berechnete Wert für <code>bottom</code> gleich dem Wert der <a href="/De/CSS/Top" title="De/CSS/Top"><code>top</code></a> Eigenschaft mit umgedrehtem Vorzeichen.<br> + Wenn beide Eigenschaften nicht den Wert <code>auto</code> besitzen, wird <code>bottom</code> ignoriert und auf <code>auto</code> gesetzt.</p> + +<ul> + <li>Standardwert: <code>auto</code></li> + <li>Anwendbar auf: <a href="/de/CSS/position" title="de/CSS/position">positionierte Elemente</a></li> + <li>Vererbbar: Nein</li> + <li>Prozentwerte: Beziehen sich auf die Höhe des umschließenden Blocks</li> + <li>Medium: visuell</li> + <li>berechneter Wert: absolute Länge, Prozentwert oder <code>auto</code></li> +</ul> + +<h2 id="Syntax">Syntax</h2> + +<pre class="eval">bottom: <Länge> | <Prozentzahl> | auto | inherit +</pre> + +<h2 id="Werte">Werte</h2> + +<dl> + <dt><Länge></dt> + <dd>Eine <a href="/de/CSS/Einheiten#L.c3.a4ngen">Längenangabe</a>, die positive und negative Werte sowie Null erlaubt.</dd> + <dt><Prozentzahl></dt> + <dd>Eine <a href="/de/CSS/Einheiten#Prozent">prozentuale Angabe</a>, die sich auf den umschließenden Block bezieht. Die Prozentangabe kann nur berücksichtigt werden, wenn die Höhe des umschließenden Blocks festgelegt wurde, andernfalls wird die definierte Prozentzahl wie <code>auto</code> behandelt.</dd> + <dt>auto</dt> + <dd>Standardwert. Die vertikale Position des Elementes wird nicht weiter beeinflusst, es sei denn durch <a href="/De/CSS/Top" title="De/CSS/Top"><code>top</code></a>, <a href="/de/CSS/margin" title="de/CSS/margin"><code>margin</code></a>, <a href="/de/CSS/padding" title="de/CSS/padding"><code>padding</code></a> oder durch die <a href="/de/CSS/height" title="de/CSS/height">Höhe</a>.</dd> + <dt>inherit</dt> + <dd>Der Wert des Elternelements wird geerbt.</dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<pre>element { + position: absolute; + bottom: 20px; + height: 200px; + border: 1px solid #000; +} +</pre> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.properties.bottom")}} + +<h2 id="Spezifikation">Spezifikation</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom" lang="en">CSS 2.1 Visual formatting model #bottom</a></li> +</ul> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/CSS/position" title="de/CSS/position"><code>position</code></a></li> + <li><a href="/De/CSS/Top" title="De/CSS/Top"><code>top</code></a>, <a href="/De/CSS/Left" title="De/CSS/Left"><code>left</code></a>, <a href="/De/CSS/Right" title="De/CSS/Right"><code>right</code></a></li> +</ul> + +<p>{{ languages( { "en": "en/CSS/bottom", "fr": "fr/CSS/bottom", "pl": "pl/CSS/bottom", "es": "es/CSS/bottom" } ) }}</p> diff --git a/files/de/web/css/box-decoration-break/index.html b/files/de/web/css/box-decoration-break/index.html new file mode 100644 index 0000000000..d1f0261fc2 --- /dev/null +++ b/files/de/web/css/box-decoration-break/index.html @@ -0,0 +1,136 @@ +--- +title: box-decoration-break +slug: Web/CSS/box-decoration-break +tags: + - CSS + - CSS Fragmentation + - CSS Property + - Experimental + - Reference +translation_of: Web/CSS/box-decoration-break +--- +<p>{{CSSRef}}{{SeeCompatTable}}</p> + +<h2 id="Summary">Summary</h2> + +<p>The <strong><code>box-decoration-break</code></strong> CSS property specifies how the {{ Cssxref("background") }}, {{ Cssxref("padding") }}, {{ Cssxref("border") }}, {{ Cssxref("border-image") }}, {{ Cssxref("box-shadow") }}, {{ Cssxref("margin") }} and {{ Cssxref("clip") }} of an element is applied when the box for the element is fragmented. Fragmentation occurs when an inline box wraps onto multiple lines, or when a block spans more than one column inside a column layout container, or spans a page break when printed. Each piece of the rendering for the element is called a fragment.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">box-decoration-break: slice; +box-decoration-break: clone; + +box-decoration-break: initial; +box-decoration-break: inherit; +box-decoration-break: unset; +</pre> + +<h3 id="Values">Values</h3> + +<dl> + <dt><code>slice</code></dt> + <dd>The element is rendered as if its box were not fragmented, and then the rendering for this hypothetical box is sliced into pieces for each line/column/page. Note that the hypothetical box can be different for each fragment since it uses its own height if the break occurs in the inline direction, and its own width if the break occurs in the block direction. See the CSS specification for details.</dd> + <dt><code>clone</code></dt> + <dd>Each box fragment is rendered independently with the specified border, padding and margin wrapping each fragment. The {{ Cssxref("border-radius") }}, {{ Cssxref("border-image") }} and {{ Cssxref("box-shadow") }}, are applied to each fragment independently. The background is drawn independently in each fragment which means that a background image with {{ Cssxref("background-repeat") }}: <code>no-repeat</code> may be repeated multiple times.</dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples">Examples</h2> + +<h3 id="Inline_box_fragments">Inline box fragments</h3> + +<p>An inline element that contains line-breaks styled with:</p> + +<pre class="brush:css">.example { + background: linear-gradient(to bottom right, yellow, green); + box-shadow: + 8px 8px 10px 0px deeppink, + -5px -5px 5px 0px blue, + 5px 5px 15px 0px yellow; + padding: 0em 1em; + border-radius: 16px; + border-style: solid; + margin-left: 10px; + font: 24px sans-serif; + line-height: 2; +} + +... +<span class="example">The<br>quick<br>orange fox</span></pre> + +<p>Results in:</p> + +<p><img alt="A screenshot of the rendering of an inline element styled with box-decoration-break:slice and styles given in the example." src="https://mdn.mozillademos.org/files/8167/box-decoration-break-inline-slice.png" style="height: 177px; width: 191px;"></p> + +<p>Adding <code>box-decoration-break:clone</code> to the above styles:</p> + +<pre class="brush:css"> -webkit-box-decoration-break: clone; + -o-box-decoration-break: clone; + box-decoration-break: clone; +</pre> + +<p>Results in:</p> + +<p><img alt="A screenshot of the rendering of an inline element styled with box-decoration-break:clone and styles given in the example" src="https://mdn.mozillademos.org/files/8169/box-decoration-break-inline-clone.png" style="height: 180px; width: 231px;"></p> + +<p>You can <a href="https://mdn.mozillademos.org/files/8179/box-decoration-break-inline.html">try the two inline examples above</a> in your browser.</p> + +<p>Here's an example of an inline element using a large <code>border-radius</code> value. The second <code>"iM"</code> has a line-break between the <code>"i"</code> and the <code>"M"</code>. For comparison, the first <code>"iM"</code> is without line-breaks. Note that if you stack the rendering of the two fragments horizontally next to each other it will result in the non-fragmented rendering.</p> + +<p><img alt="A screenshot of the rendering of the second inline element example." src="https://mdn.mozillademos.org/files/8189/box-decoration-break-slice-inline-2.png" style="height: 184px; width: 108px;"></p> + +<p><a href="https://mdn.mozillademos.org/files/8191/box-decoration-break-inline-extreme.html">Try the above example</a> in your browser.</p> + +<h3 id="Block_box_fragments">Block box fragments</h3> + +<p>A block element with similar styles as above, first without any fragmentation:</p> + +<p><img alt="A screenshot of the rendering of the block element used in the examples without any fragmentation." src="https://mdn.mozillademos.org/files/8181/box-decoration-break-block.png" style="height: 149px; width: 333px;"></p> + +<p>Fragmenting the above block into three columns results in:</p> + +<p><img alt="A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:slice." src="https://mdn.mozillademos.org/files/8183/box-decoration-break-block-slice.png" style="height: 55px; max-width: none; width: 1025px;"></p> + +<p>Note that stacking these pieces vertically will result in the non-fragmented rendering.</p> + +<p>Now the same example styled with <code>box-decoration-break:clone</code></p> + +<p><img alt="A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:clone." src="https://mdn.mozillademos.org/files/8185/box-decoration-break-block-clone.png" style="height: 61px; max-width: none; width: 1023px;"></p> + +<p>Note here that each fragment has an identical replicated border, box-shadow and background.</p> + +<p>You can <a href="https://mdn.mozillademos.org/files/8187/box-decoration-break-block.html">try the block examples above</a> in your browser.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Fragmentation', '#break-decoration', 'box-decoration-break') }}</td> + <td>{{ Spec2('CSS3 Fragmentation') }}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +{{Compat("css.properties.box-decoration-break")}} + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/CSS/CSS_Reference" title="CSS Reference">CSS Reference</a></li> +</ul> diff --git a/files/de/web/css/box-shadow/index.html b/files/de/web/css/box-shadow/index.html new file mode 100644 index 0000000000..637e204327 --- /dev/null +++ b/files/de/web/css/box-shadow/index.html @@ -0,0 +1,107 @@ +--- +title: box-shadow +slug: Web/CSS/box-shadow +tags: + - CSS + - CSS Eigenschaft + - CSS Hintergrund + - Referenz +translation_of: Web/CSS/box-shadow +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p><span class="seoSummary">Die <a href="/de/docs/Web/CSS">CSS</a>-Eigenschaft <code>box-shadow </code>beschreibt einen oder mehrere Schatteneffekte als eine kommaseparierte Liste.</span> Sie erlaubt es, den Rahmen fast jedes Elements einen Schatten werfen zu lassen. Falls ein {{cssxref("border-radius")}} für das Element mit einem Schlagschatten angegeben ist, übernimmt der Schatten diese abgerundeten Ecken. Die z-Anordnung mehrerer Schlagschatten ist die gleiche wie bei mehreren <a href="/en-US/docs/Web/CSS/text-shadow">Textschatten</a> (der zuerst angegebene Schatten ist der oberste).</p> + +<p><a href="/de/docs/Web/CSS/CSS_Boxmodell/Box-shadow_Generator">Box-shadow-Generator</a> ist ein interaktives Werkzeug, das es erlaubt, einen Schlagschatten zu generieren.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: css">/* offset-x | offset-y | color */ +box-shadow: 60px -16px teal; + +/* offset-x | offset-y | blur-radius | color */ +box-shadow: 10px 5px 5px black; + +/* offset-x | offset-y | blur-radius | spread-radius | color */ +box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); + +/* inset | offset-x | offset-y | color */ +box-shadow: inset 5em 1em gold; + +/* Beliebige Anzahl an Schatten, durch Kommas getrennt */ +box-shadow: 3px 3px red, -1em 0 0.4em olive; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code>inset</code></dt> + <dd>Falls nicht angegeben (Standardwert), wird angenommen, dass der Schatten ein Schlagschatten ist (als ob die Box über dem Inhalt schweben würde).<br> + Die Angabe des Schlüsselworts <code>inset </code>ändert den Schatten so, dass er innerhalb des Rahmens angezeigt wird (als ob der Inhalt innerhalb der Box nach innen gedrückt wäre). Innere Schatten werden innerhalb des Randes (sogar transparenten) gezeichnet, über dem Hintergrund aber unterhalb des Inhalts.</dd> + <dt><code><offset-x></code> <code><offset-y></code></dt> + <dd>Diese zwei {{cssxref("<length>")}}-Werte setzen den Schattenabstand. <code><offset-x></code> beschreibt die horizontale Distanz. Negative Werte platzieren den Schatten links des Elements. <code><offset-y></code> beschreibt die vertikale Distanz. Negative Werte platzieren den Schatten oberhalb des Elements. Siehe {{cssxref("<length>")}} für mögliche Einheiten.<br> + Falls beide Werte <code>0</code> sind, wird der Schatten hinter dem Element platziert (und können einen Unschärfeeffekt erzeugen, falls <code><blur-radius></code> und/oder <code><spread-radius></code> gesetzt sind).</dd> + <dt><code><blur-radius></code></dt> + <dd>Dies ist ein dritter {{cssxref("<length>")}}-Wert. Je größer dieser Wert ist, desto größer ist die Unschärfe, sodass der Schatten größer und schwächer wird. Negative Werte sind nicht erlaubt. Falls nicht angegeben, ist der Wert <code>0</code> (der Rand des Schattens wird scharf dargestellt).</dd> + <dt><code><spread-radius></code></dt> + <dd>Dies ist ein vierter {{cssxref("<length>")}}-Wert. Positive Werte erweitern den Schatten und machen ihn größer, negative Werte verkleinern den Schatten. Falls nicht angegeben, ist der Wert <code>0</code> (der Schatten hat die gleiche Größe wie das Element).</dd> + <dt><code><color></code></dt> + <dd>Siehe {{cssxref("<color>")}}-Werte für mögliche Schlüsselwörter und Notationen.<br> + Falls nicht angegeben, hängt die Farbe vom Browser ab – sie ist normalerweise der Wert der {{cssxref("color")}}-Eigenschaft, aber Safari zeichnet in diesem Fall aktuell einen transparenten Schatten.</dd> +</dl> + +<h3 id="Interpolation">Interpolation</h3> + +<p>Jeder Schatten innerhalb der Liste (<code>none</code> wird als eine leere Liste interpretiert) wird über die Farbkomponente (als Farbe) interpoliert und x-, y-, Unschärfe- und (falls zutreffend) Ausbreitungskomponenten (als Länge). Für jeden Schatten gilt, falls beide angegebenen Schatten <code>inset</code> sind oder nicht, muss der interpolierte Schatten diesbezüglich mit den angegebenen Schatten übereinstimmen. Falls ein Schatten eines beliebigen Paares von angegebenen Schatten <code>inset</code> ist und der andere nicht, ist die gesamte Schattenliste nicht interpolierbar. Falls die Listen von Schatten verschiedene Längen haben, wird die kürzere Liste mit Schatten aufgefüllt, deren Farbe <code>transparent</code> ist, alle Längen <code>0</code> und dessen <code>inset</code> (oder nicht) mit dem der längeren Liste übereinstimmt.</p> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Live-Beispiele">Live-Beispiele</h2> + +<ul> + <li><a href="http://www.elektronotdienst-nuernberg.de/bugs/box-shadow_inset.html">box-shadow-Test</a></li> + <li><a href="http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows/">box-shadow-Tutorial und -Beispiele</a></li> +</ul> + +<pre style="-moz-box-shadow: 60px -16px teal; -webkit-box-shadow: 60px -16px teal; box-shadow: 60px -16px teal; float: left; margin: 1em;">box-shadow: 60px -16px teal;</pre> + +<pre style="-moz-box-shadow: 10px 5px 5px black; -webkit-box-shadow: 10px 5px 5px black; box-shadow: 10px 5px 5px black; float: left; margin: 1em;">box-shadow: 10px 5px 5px black;</pre> + +<pre style="-moz-box-shadow: 3px 3px red, -1em 0pt 0.4em olive; -webkit-box-shadow: 3px 3px red, -1em 0 0.4em olive; box-shadow: 3px 3px red, -1em 0 0.4em olive; float: left; margin: 1em;">box-shadow: 3px 3px red, -1em 0 0.4em olive;</pre> + +<pre style="-moz-box-shadow: 5em 1em gold inset; -webkit-box-shadow: inset 5em 1em gold; box-shadow: inset 5em 1em gold; float: left; margin: 1em;">box-shadow: inset 5em 1em gold;</pre> + +<pre style="-moz-box-shadow: 0 0 1em gold; -webkit-box-shadow: 0 0 1em gold; box-shadow: 0 0 1em gold; float: left; margin: 1em;">box-shadow: 0 0 1em gold;</pre> + +<pre style="-moz-box-shadow: 0 0 1em gold inset; -webkit-box-shadow: inset 0 0 1em gold; box-shadow: inset 0 0 1em gold; float: left; margin: 1em;">box-shadow: inset 0 0 1em gold;</pre> + +<pre style="-moz-box-shadow: 0 0 1em gold inset, 0 0 1em red; -webkit-box-shadow: inset 0 0 1em gold, 0 0 1em red; box-shadow: inset 0 0 1em gold, 0 0 1em red; float: left; margin: 1em;">box-shadow: inset 0 0 1em gold, 0 0 1em red;</pre> + +<h2 id="Spezifikationen">Spezifikationen</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 Backgrounds', '#box-shadow', 'box-shadow')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2> + +{{Compat("css.properties.box-shadow")}} diff --git a/files/de/web/css/box-sizing/index.html b/files/de/web/css/box-sizing/index.html new file mode 100644 index 0000000000..7c07a9c554 --- /dev/null +++ b/files/de/web/css/box-sizing/index.html @@ -0,0 +1,137 @@ +--- +title: box-sizing +slug: Web/CSS/box-sizing +tags: + - CSS + - CSS Eigenschaft + - Experimentell + - Referenz +translation_of: Web/CSS/box-sizing +--- +<div> +<p>{{CSSRef}}</p> + +<p><span class="seoSummary">Die <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> Eigenschaft <strong><code>box-sizing</code></strong> </span>legt fest, wie die Gesamtbreite und -höhe eines Elements berechnet wird.</p> + +<div>{{EmbedInteractiveExample("pages/css/box-sizing.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>Im <a href="/de/docs/Web/CSS/CSS_Boxmodell/Einführung_in_das_CSS_Boxmodell">CSS box model</a> wird die Breite <code>width</code> und die Höhe <code>height</code>, die Sie einem Element zuweisen, standardmäßig nur auf die Inhaltsbox des Elements angewendet. Wenn das Element über einen Rahmen <code>border</code> oder Innenabstände <code>padding</code> verfügt, wird diese zu der Breite <code>width</code> und Höhe <code>height</code> hinzugefügt, um die Größe der Box zu erreichen, die auf dem Bildschirm angezeigt wird. Das bedeutet, dass Sie bei der Einstellung von Breite <code>width</code> und Höhe <code>height</code> den Wert anpassen müssen, um einen eventuell hinzugefügten Rahmen oder Auffüllen zu berücksichtigen. Wenn Sie z.B. vier Boxen mit einer Breite <code>width: 25%;</code> haben, wenn eine davon einen linken oder rechten Rand oder einen linken oder rechten Rand hat, passen sie standardmäßig nicht auf eine Zeile innerhalb der Beschränkungen des Elterncontainers.</p> + +<p>Die <code>box-sizing</code> Eigenschaft kann verwendet werden, um dieses Verhalten anzupassen:</p> + +<ul> + <li><code>content-box</code> gibt Ihnen das standardmäßige CSS-Box-Größenverhalten. Wenn Sie die Breite eines Elements auf 100 Pixel setzen, dann wird die Inhaltsbox des Elements 100 Pixel breit sein, und die Breite von Rahmen oder Auffüllungen wird zur endgültigen gerenderten Breite hinzugefügt, wodurch das Element breiter als 100px wird.</li> + <li><code>border-box</code> + <p>weist den Browser an, bei den Werten, die Sie für die Breite und Höhe eines Elements angeben, alle Ränder und Auffüllungen zu berücksichtigen. Wenn Sie die Breite eines Elements auf 100 Pixel festlegen, werden diese 100 Pixel alle von Ihnen hinzugefügten Ränder oder Füllungen enthalten, und das Inhaltsfeld wird verkleinert, um diese zusätzliche Breite zu absorbieren. Dadurch wird die Größenanpassung von Elementen normalerweise viel einfacher.</p> + </li> +</ul> + +<div class="blockIndicator note"> +<p><strong>Hinweis:</strong> Es ist oft nützlich, bei Layoutelementen die <code>box-sizing</code> auf <code>border-box</code> zu setzen. Dies erleichtert den Umgang mit der Größe von Elementen erheblich und eliminiert im Allgemeinen eine Reihe von Fallstricken, auf die Sie beim Layouten Ihres Inhalts stoßen können. Bei der Verwendung von <code>position: relative</code> oder <code>position: absolute</code> und der Nutzung von <code>box-sizing: content-box</code> können die Positionswerte relativ zum Inhalt und unabhängig von Änderungen der Rahmen- und Füllungsgrößen eingestellt werden, was manchmal wünschenswert ist.</p> +</div> +</div> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<p>Das <code>box-sizing</code> Eigenschaft wird als ein einzelnes Schlüsselwort angegeben, das aus der untenstehenden Liste von Werten ausgewählt wird.</p> + +<pre class="brush:css notranslate">/* Schlüsselwortwerte */ +box-sizing: content-box; +box-sizing: border-box; + +/* Globale Werte */ +box-sizing: inherit; +box-sizing: initial; +box-sizing: unset; +</pre> + +<h3 id="Values" name="Values">Werte</h3> + +<dl> + <dt><code>content-box</code></dt> + <dd>Dies ist der Standard-Stil, der vom CSS Standard definiert wurde. Die Werte {{Cssxref("width")}} und {{Cssxref("height")}} berechnen sich nur aus dem Inhalt des Elementes und enthalten weder <code>border</code>, <code>margin</code> oder <code>padding</code>.</dd> + <dt><code>border-box</code></dt> + <dd>Die Werte {{Cssxref("width")}} und {{Cssxref("height")}} enthalten <code>padding</code> und <code>border</code>, aber nicht <code>margin</code>. Das ist das <a href="/de/docs/Web/CSS/Boxmodell" title="CSS/Box_model">Boxmodell</a>, das der Internet Explorer im Quirks mode verwendet.</dd> +</dl> + +<h2 id="Formale_Definition">Formale Definition</h2> + +<p>{{cssinfo}}</p> + +<h2 id="Formal_syntax">Formal syntax</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Box_sizes_with_content-box_and_border-box" name="Box_sizes_with_content-box_and_border-box">Box sizes mit content-box und border-box</h3> + +<p>Dieses Beispiel zeigt, wie unterschiedliche <code>box-sizing</code> Werte die gerenderte Größe von zwei ansonsten identischen Elementen verändern.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><div class="content-box">Content box</div> +<br> +<div class="border-box">Border box</div></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">div { + width: 160px; + height: 80px; + padding: 20px; + border: 8px solid red; + background: yellow; +} + +.content-box { + box-sizing: content-box; + /* Total width: 160px + (2 * 20px) + (2 * 8px) = 216px + Total height: 80px + (2 * 20px) + (2 * 8px) = 136px + Content box width: 160px + Content box height: 80px */ +} + +.border-box { + box-sizing: border-box; + /* Total width: 160px + Total height: 80px + Content box width: 160px - (2 * 20px) - (2 * 8px) = 104px + Content box height: 80px - (2 * 20px) - (2 * 8px) = 24px */ +} +</pre> + +<h4 id="Result">Result</h4> + +<p>{{EmbedLiveSample('Box_sizes_with_content-box_and_border-box', 'auto', 300)}}</p> + +<h2 id="Spezifikationen">Spezifikationen</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 Basic UI', '#box-sizing', 'box-sizing')}}</td> + <td>{{Spec2('CSS3 Basic UI')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompabilität">Browser Kompabilität</h2> + +<p>{{Compat("css.properties.box-sizing")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/CSS/Boxmodell" title="CSS/Box model">CSS Boxmodell</a></li> +</ul> diff --git a/files/de/web/css/break-after/index.html b/files/de/web/css/break-after/index.html new file mode 100644 index 0000000000..6bbcdb52d2 --- /dev/null +++ b/files/de/web/css/break-after/index.html @@ -0,0 +1,114 @@ +--- +title: break-after +slug: Web/CSS/break-after +tags: + - CSS + - CSS Eigenschaft + - CSS Fragmentierung + - NeedsExample + - Referenz +translation_of: Web/CSS/break-after +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>break-after</code> <a href="/en-US/docs/CSS">CSS</a> Eigenschaft gibt an, wie die Seite, die Spalte oder der Abschnitt nach der generierten Box umbricht. Wenn es keine generierte Box gibt, wird die Eigenschaft ignoriert.</p> + +<p>Jeder mögliche Brechpunkt, das sind alle Begrenzungen des Elements, ist unter dem Einfluss von drei Eigenschaften: dem <code>break-after</code> Wert des vorhergehenden Elements, dem {{cssxref("break-before")}} des nächsten Elements und dem {{cssxref("break-inside")}} Wert von dem beinhaltenden Elements.</p> + +<p>Um zu ermitteln ob ein Umbruch erfolgen muss, werden folgende Regeln angwendet:</p> + +<ol> + <li>Wenn einer der drei Betroffenen Werte ein <em>forced break value</em> ist (das sind <code>always</code>, <code>left</code>, <code>right</code>, <code>page</code>, <code>column</code> oder <code>region</code>), hat er Vorrang. Wenn mehrere der betroffenen Werte solch ein Umbruch sind, wird der Wert des Elements, welches als letztes im Flow auftritt, verwendet (der {{cssxref("break-before")}} hat Vorrang gegenüber dem <code>break-after</code> Wert, welches wiederum Vorrang gegebüber dem {{cssxref("break-inside")}} Wert hat).</li> + <li>Wenn einer der drei betroffenen Werte ein <em>avoid break value</em> ist (das sind <code>avoid</code>, <code>avoid-page</code>, <code>avoid-region</code> oder <code>avoid-column</code>), wird kein Umbruch gemacht.</li> +</ol> + +<p>Wenn einmal ein gezwungener Umbruch gemacht worden ist, werden bei Bedarf weiche Umbrüche hinzugefügt. Aber nicht auf Elementbegrenzungen, welche zu einem entsprechenden avoid Wert führen.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">break-after: auto; +break-after: always; +break-after: left; +break-after: right; +break-after: recto; +break-after: verso; +break-after: page; +break-after: column; +break-after: region; +break-after: avoid; +break-after: avoid-page; +break-after: avoid-column; +break-after: avoid-region; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>Initialwert. Erlaubt (bedeutet kein Verbot oder Zwang) das Einfügen jeden Umbruchs (entweder Seite, Spalte oder Abschnitt) nach der hauptsächlichen Box.</dd> + <dt><code>always</code></dt> + <dd>Erzwingt immer Umbrüche nach der hauptsächlichen Box. Das ist ein Synonym für <code>page</code>, welches beibehalten wurde, um Übergänge von {{cssxref("page-break-after")}} zu ermöglichen, welche eine Teilmenge dieser Eigenschaft sind.</dd> + <dt><code>avoid</code></dt> + <dd>Verhindert das Einfügen jeglicher Umbrüche für page, column oder region nach der hauptsächlichen Box.</dd> + <dt><code>left</code></dt> + <dd>Erzwingt immer einen oder zwei Seitenumbrüche direkt nach der hauptsächlichen Box, damit die nächste Seite als linke Seite formatiert wird.</dd> + <dt><code>right</code></dt> + <dd>Erzwingt immer einen oder zwei Seitenumbrüche direkt nach der hauptsächlichen Box, damit die nächste Seite als rechte Seite formatiert wird.</dd> + <dt><code>page</code></dt> + <dd>Erzwingt immer einen Seitenumbruch direkt nach der hauptsächlichen Box.</dd> + <dt><code>column</code></dt> + <dd>Erzwingt immer einen Spaltenumbruch direkt nach der hauptsächlichen Box.</dd> + <dt><code>region </code>{{experimental_inline}}</dt> + <dd>Erzwing immer einen Abschnittsumbruch direkt nach der hauptsächlichen Box.</dd> + <dt><code>recto</code> {{experimental_inline}}</dt> + <dd>Erzwingt einen oder zwei Seitenumbrüche direkt nach der hauptsächlichen Box, damit die nächste Seite als eine recto Seite (eine rechte Seite in einer links-nach-rechts Ausdehnung oder eine linke Seite in einer rechts-nach-links Ausdehnung) formatiert wird.</dd> + <dt><code>verso </code>{{experimental_inline}}</dt> + <dd>Erzwingt einen oder zwei Seitenumbrüche direkt nach der hauptsächlichen Box, damit die nächste Seite als eine verso Seite (eine linke Seite in einer links-nach-rechts Ausdehnung oder eine rechte Seite in einer rechts-nach-links Ausdehnung) formatiert wird.</dd> + <dt><code>avoid-page</code></dt> + <dd>Verhindert jeden Seitenumbruch direkt nach der hauptsächlichen Box.</dd> + <dt><code>avoid-column</code></dt> + <dd>Verhindert jeden Spaltenumbruch direkt nach der hauptsächlichen Box.</dd> + <dt><code>avoid-region </code>{{experimental_inline}}</dt> + <dd>Verhindert jeden Anschnittsumbruch direkt nach der hauptsächlichen Box.</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Bemerkung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Fragmentation', '#break-after', 'break-after')}}</td> + <td>{{Spec2('CSS3 Fragmentation')}}</td> + <td>Fügt die Schlüsselwörter <code>recto</code> und <code>verso</code> hinzu. Ändert dne Medientyp dieser Eigenschaft von <code>paged</code> zu {{xref_cssvisual}}. Präzisiert den Algorithmus für verschiedene Arten von Umbrüchen.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Regions', '#region-flow-break', 'break-after')}}</td> + <td>{{Spec2('CSS3 Regions')}}</td> + <td>Erweitert die Eigenschaft, um Abschnittsumbrüche handhaben zu können. Für die Schlüsselwörter <code>avoid-region</code> und <code>region</code> hinzu.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Multicol', '#break-after', 'break-after')}}</td> + <td>{{Spec2('CSS3 Multicol')}}</td> + <td>Initiale Spezifikation. Erweitert die CSS 2.1 {{cssxref("page-break-after")}} Eigenschaft, um Seiten- und Spaltenumbrüche handhaben zu können.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Webbrowserkompatibilität</h2> + +{{Compat("css.properties.break-after")}} diff --git a/files/de/web/css/break-inside/index.html b/files/de/web/css/break-inside/index.html new file mode 100644 index 0000000000..8090a69267 --- /dev/null +++ b/files/de/web/css/break-inside/index.html @@ -0,0 +1,127 @@ +--- +title: break-inside +slug: Web/CSS/break-inside +translation_of: Web/CSS/break-inside +--- +<div>{{CSSRef}}</div> + +<p>Die <a href="/en-US/docs/Web/CSS">CSS</a>-Eigenschaft <strong><code>break-inside</code></strong> gibt an, wie Seiten, Spalten oder Abschnitte innerhalb einer generierten Box umbrechen. Wenn es keine generierte Box gibt, wird die Eigenschaft ignoriert.</p> + +<pre class="brush:css no-line-numbers">/* Spezifische Werte */ +break-inside: auto; +break-inside: avoid; +break-inside: avoid-page; +break-inside: avoid-column; +break-inside: avoid-region; + +/* Globale Werte */ +break-inside: inherit; +break-inside: initial; +break-inside: unset; +</pre> + +<p>Alle Begrenzungen eines Elements sind ein möglicher Brechpunkt. Dieser wird von drei Eigenschaften beeinflusst:</p> + +<ul> + <li>Dem Wert für {{cssxref("break-after")}} des vorherigen Elements.</li> + <li>Dem Wert für {{cssxref("break-before")}} des nachfolgenden Elements.</li> + <li>Dem Wert für <code>break-inside</code> des Elternelements.</li> +</ul> + +<p>Um zu ermitteln, ob ein Umbruch erfolgen muss, werden folgende Regeln angewendet:</p> + +<ol> + <li>Besitzt eine der drei Eigenschaften einen <em>forced break value</em> (<code>always</code>, <code>left</code>, <code>right</code>, <code>page</code>, <code>column</code>, oder <code>region</code>), so hat sie Vorrang. Wenn mehrere Eigenschaften einen <em>forced break value</em> besitzen, gewinnt das Element, welches als letztes im Flow auftritt. Das heißt: <code>break-before</code> überwiegt <code>break-after</code>, welches wiederum <code>break-inside</code> überwiegt.</li> + <li>Besitzt eine der drei Eigenschaften einen <em>avoid break value</em> (<code>avoid</code>, <code>avoid-page</code>, <code>avoid-region</code>, or <code>avoid-column</code>), so erfolgt kein Umbruch.</li> +</ol> + +<p>Nachdem erzwungene Umbrüche gemacht wurden, werden bei Bedarf weiche Umbrüche hinzugefügt. Davon ausgenommen sind Elementbegrenzungen, für die der Wert <code>avoid</code> gilt.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<p>Die <code>break-inside</code>-Eigenschaft wird durch einen der folgenden Werte spezifiziert.</p> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>Initialwert. Erlaubt jede Art von Umbruch (Seiten-, Spalten- oder Abschnittsumbruch) innerhalb der Box, erzwingt ihn aber nicht.</dd> + <dt><code>avoid</code></dt> + <dd>Vermeidet jede Art von Umbruch (Seiten-, Spalten- oder Abschnittsumbruch) innerhalb der Box.</dd> + <dt><code>avoid-page</code></dt> + <dd>Vermeidet Seitenumbrüche innerhalb der Box.</dd> + <dt><code>avoid-column</code></dt> + <dd>Vermeidet Spaltenumbrüche innerhalb der Box.</dd> + <dt><code>avoid-region</code> {{experimental_inline}}</dt> + <dd>Vermeidet Regionsumbrüche innerhalb der Box.</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Page-break-Aliasse">Page-break-Aliasse</h2> + +<p>Aus Gründen der Kompatibilität soll die veraltete Eigenschaft {{cssxref("page-break-inside")}} von Browsern als ein Alias für <code>break-inside</code> behandelt werden. So wird sichergestellt, dass Projekte mit <code>page-break-inside</code> sich weiterhin wie konzipiert verhalten. Für folgende Werte sollen die aufgeführten Aliasse gelten:</p> + +<table> + <thead> + <tr> + <th scope="col">page-break-inside</th> + <th scope="col">break-inside</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>auto</code></td> + <td><code>auto</code></td> + </tr> + <tr> + <td><code>avoid</code></td> + <td><code>avoid</code></td> + </tr> + </tbody> +</table> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Bemerkung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Fragmentation', '#break-within', 'break-inside')}}</td> + <td>{{Spec2('CSS3 Fragmentation')}}</td> + <td>Keine Änderungen.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Regions', '#region-flow-break', 'break-inside')}}</td> + <td>{{Spec2('CSS3 Regions')}}</td> + <td>Erweitert die Eigenschaft um Regionsumbrüche.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Multicol', '#break-before-break-after-break-inside', 'break-inside')}}</td> + <td>{{Spec2('CSS3 Multicol')}}</td> + <td>Initiale Spezifikation.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser-Kompatibilität</h2> + + + +<p>{{Compat("css.properties.break-inside", 4)}}</p> + +<h3 id="Anmerkungen_zur_Kompatibilität">Anmerkungen zur Kompatibilität</h3> + +<p>Vor Firefox 65 kann die veraltete {{cssxref("page-break-inside")}}-Eigenschaft zur Vermeidung von Spalten- und Seitenumbrüchen genutzt werden. Verwenden Sie für Rückwärtskompatibilität beide Eigenschaften.</p> + +<p>Für ältere WebKit-basierte Browser können Sie die Präfix-Eigenschaft <code>-webkit-column-break-inside</code> verwenden, um Spaltenumbrüche zu steuern.</p> diff --git a/files/de/web/css/calc()/index.html b/files/de/web/css/calc()/index.html new file mode 100644 index 0000000000..357b7d1036 --- /dev/null +++ b/files/de/web/css/calc()/index.html @@ -0,0 +1,106 @@ +--- +title: calc +slug: Web/CSS/calc() +tags: + - CSS + - CSS Funktion + - Referenz +translation_of: Web/CSS/calc() +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Mit der CSS-Funktion calc() lassen sich Werte für CSS-Eigenschaften berechnen.</p> + +<p>calc() kann überall verwendet werden, wo {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<number>")}} und {{cssxref("<integer>")}} eingesetzt werden dürfen.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<pre class="syntaxbox notranslate">/* Eigenschaft: calc(<em>Ausdruck</em>) */ +width: calc(100% - 80px);</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt>Ausdruck</dt> + <dd>Ein mathematischer Ausdruck, dessen Ergebnis als Wert verwendet wird.</dd> +</dl> + +<h3 id="Ausdrücke">Ausdrücke</h3> + +<p>Der Ausdruck kann eine beliebige Kombination der folgenden Operatoren sein:</p> + +<dl> + <dt><strong>+</strong></dt> + <dd>Addition.</dd> + <dt><strong>-</strong></dt> + <dd>Subtraktion.</dd> + <dt><strong>*</strong></dt> + <dd>Multiplikation (muss mindestens eine {{cssxref("<number>")}} enthalten).</dd> + <dt><strong>/</strong></dt> + <dd>Division (Divisor muss eine {{cssxref("<number>")}} sein).</dd> +</dl> + +<p>Bei den Operanden darf es sich um jeden Wert vom Typ {{cssxref("<length>")}} handeln, insbesondere können auch verschiedene Einheiten miteinander verrechnet werden.<br> + Das Setzen von Klammern ist ebenfalls möglich.</p> + +<p><code>calc()</code>-Funktionen können ineinander verschachtelt werden.</p> + +<div class="note"><strong>Hinweis:</strong> Die Operatoren + und - erfordern zwingend ein Leerzeichen zwischen dem Operator und den Werten. Zum Beispiel würde <code>calc(50% -8px)</code> als Prozentwert, gefolgt von einer negativen Pixel-Länge interpretiert. Eine korrekte Subtraktion ergibt sich nur mit einem Leerzeichen zwischen - und 8px: <code>calc(50% - 8px)</code><br> +Bei einer Multiplikation oder Division spielen Leerzeichen keine Rolle, sind aber der Lesbarkeit wegen empfohlen.</div> + +<div class="note">Berechnungen für die Breite oder Höhe von Tabellenspalten und -spaltengruppen sowie Tabellenzeilen und -zeilengruppen, sowie Tabellenzellen <em>können</em> vom Browser als Wert <code>auto</code> behandelt werden. Dies gilt für Tabellen mit dem Typ auto oder fixed.</div> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Relative_Größe_eines_Objekts_mit_einer_absoluten_Positionierung">Relative Größe eines Objekts mit einer absoluten Positionierung</h3> + +<p>Mit <code>calc()</code> ist es kein Problem mehr, die Maße eines Objekts in Abhängigkeit anderer Maße festzulegen.</p> + +<p>In diesem Beispiel wurde ein Banner erstellt, das die gesamte verfügbare Breite einnehmen, dabei jedoch auf beiden Seiten einen Abstand einnehmen soll, der exakt 40 Pixeln beträgt.</p> + +<p>Links ist die Position mit <code>left: 40px</code> definiert. Mit <code>calc(100% - 80px)</code> werden von der Gesamtbreite 80 Pixel abgezogen (2 * 40 Pixel), so verbleibt am rechten Rand ein Abstand von ebenfalls exakt 40 Pixeln.</p> + +<pre class="brush: css notranslate">.banner { + position: absolute; + left: 40px; + width: 90%; /* fallback for browsers without support for calc() */ + width: calc(100% - 80px); +} +</pre> + +<pre class="brush: html notranslate"><div class="banner">This is a banner!</div></pre> + +<p>{{ EmbedLiveSample('Relative_Gr%C3%B6sse_eines_Objekts_mit_einer_absoluten_Positionierung', '100%', '60') }}</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">Anmerkung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Values', '#calc-notation', 'calc()')}}</td> + <td>{{Spec2('CSS3 Values')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<p>{{Compat("css.types.calc")}}</p> + +<h2 id="See_also" name="See_also">Siehe auch</h2> + +<ul> + <li><a href="https://hacks.mozilla.org/2010/06/css3-calc/" title="Firefox 4: CSS3 calc() ✩ Mozilla Hacks – the Web developer blog"><u><font color="#0066cc">Firefox 4: CSS3 calc() ✩ Mozilla Hacks – the Web developer blog</font></u></a></li> +</ul> diff --git a/files/de/web/css/caption-side/index.html b/files/de/web/css/caption-side/index.html new file mode 100644 index 0000000000..042981c576 --- /dev/null +++ b/files/de/web/css/caption-side/index.html @@ -0,0 +1,153 @@ +--- +title: caption-side +slug: Web/CSS/caption-side +tags: + - CSS + - CSS Eigenschaft + - CSS Tabellen + - Layout + - Referenz +translation_of: Web/CSS/caption-side +--- +<div>{{CSSRef}}</div> + +<p>Die <a href="/de/docs/Web/CSS" title="CSS">CSS</a> Eigenschaft <strong><code>caption-side</code></strong> positioniert den Inhalt einer {{HTMLElement("caption") }} einer Tabelle auf der angegebenen Seite.</p> + +<div>{{EmbedInteractiveExample("pages/css/caption-side.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> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="brush:css no-line-numbers notranslate">/* Directional values */ +caption-side: top; +caption-side: bottom; + +/* Warning: non-standard values */ +caption-side: left; +caption-side: right; +caption-side: top-outside; +caption-side: bottom-outside; + +/* Global values */ +caption-side: inherit; +caption-side: initial; +caption-side: unset; +</pre> + +<p>Die Eigenschaft <code>caption-side</code> property wird als einer der unten aufgeführten Schlüsselwortwerte angegeben.</p> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code>top</code></dt> + <dd>Die Überschriftenbox soll oberhalb der Tabelle positioniert werden.</dd> + <dt><code>bottom</code></dt> + <dd>Die Überschriftenbox soll unterhalb der Tabelle positioniert werden.</dd> + <dt><code>left</code> {{ non-standard_inline() }}</dt> + <dd>Die Überschriftenbox soll links von der Tabelle positioniert werden.</dd> + <dd> + <div class="note"><strong>Hinweis:</strong> Dieser Wert wurde für CSS 2 vorgeschlagen, aber aus der endgültigen CSS 2.1-Spezifikation entfernt. Er ist nicht standardisiert.</div> + </dd> + <dt><code>right</code> {{ non-standard_inline() }}</dt> + <dd>Die Überschriftenbox soll rechts von der Tabelle positioniert werden.</dd> + <dd> + <div class="note"><strong>Hinweis:</strong> Dieser Wert wurde für CSS 2 vorgeschlagen, aber aus der endgültigen CSS 2.1-Spezifikation entfernt. Er ist nicht standardisiert.</div> + </dd> + <dt><code>top-outside</code> {{non-standard_inline}}</dt> + <dd>Das Überschriftenbox sollte oberhalb der Tabelle positioniert werden, während die Breite und das horizontale Ausrichtungsverhalten nicht an das horizontale Layout der Tabelle gebunden sind.</dd> + <dd> + <div class="note">Die CSS 2.1-Spezifikation stellt fest, dass die CSS 2-Spezifikation ein anderes Verhalten für den <code>top</code> Wert beschrieben hat, der in einer zukünftigen Spezifikation durch diesen Wert wieder eingeführt wird.</div> + </dd> + <dt><code>bottom-outside</code> {{non-standard_inline}}</dt> + <dd>Das Überschriftenbox sollte unterhalb der Tabelle positioniert werden, während die Breite und das horizontale Ausrichtungsverhalten nicht an das horizontale Layout der Tabelle gebunden sind.</dd> + <dd> + <div class="note">Die CSS 2.1-Spezifikation stellt fest, dass die CSS 2-Spezifikation ein anderes Verhalten für den <code>bottom</code> Wert beschrieben hat, der in einer zukünftigen Spezifikation durch diesen Wert wieder eingeführt wird</div> + </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="Beispiele">Beispiele</h2> + +<h3 id="Setting_captions_above_and_below" name="Setting_captions_above_and_below">Setzen von Beschriftungen oben und unten</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><table class="top"> + <caption>Caption ABOVE the table</caption> + <tr> + <td>Some data</td> + <td>Some more data</td> + </tr> +</table> + +<br> + +<table class="bottom"> + <caption>Caption BELOW the table</caption> + <tr> + <td>Some data</td> + <td>Some more data</td> + </tr> +</table> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">.top caption { + caption-side: top; +} + +.bottom caption { + caption-side: bottom; +} + +table { + border: 1px solid red; +} + +td { + border: 1px solid blue; +} +</pre> + +<h4 id="Ergebnis">Ergebnis</h4> + +<p>{{EmbedLiveSample('Setting_captions_above_and_below', 'auto', 160)}}</p> + +<h2 id="Spezifikationen">Spezifikationen</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 Logical Properties', '#caption-side', 'caption-side') }}</td> + <td>{{ Spec2('CSS Logical Properties') }}</td> + <td>Definiert die oberen <code>top</code> und unteren <code>bottom</code> Werte relativ zum Schreibmodus <code>writing-mode</code> Wert.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'tables.html#caption-position', 'caption-side') }}</td> + <td>{{ Spec2('CSS2.1') }}</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.properties.caption-side")}}</p> diff --git a/files/de/web/css/clear/index.html b/files/de/web/css/clear/index.html new file mode 100644 index 0000000000..9d2be4ab3c --- /dev/null +++ b/files/de/web/css/clear/index.html @@ -0,0 +1,250 @@ +--- +title: clear +slug: Web/CSS/clear +tags: + - CSS + - CSS Eigenschaft + - CSS Positionierung + - Layout + - Referenz +translation_of: Web/CSS/clear +--- +<div>{{CSSRef}}</div> + +<p>Die <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft <strong><code>clear</code></strong> legt fest, ob ein Element unter einem fließenden (<a href="/de/docs/Web/CSS/float">float</a>) Element verschoben werden muss, die ihm vorausgehen. Die <code>clear</code> Eigenschaft gilt für fließende und nicht fließenden Elemente.</p> + +<div>{{EmbedInteractiveExample("pages/css/clear.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>Wenn sie auf nicht fließende Blöcke angewendet wird, verschiebt sie den Rahmen (<a href="/de/docs/Web/CSS/CSS_Boxmodell/Einführung_in_das_CSS_Boxmodell">border edge</a>) des Elements nach unten, bis sie unter den Rand (<a href="/de/docs/Web/CSS/CSS_Boxmodell/Einführung_in_das_CSS_Boxmodell" title="CSS/box_model">margin edge</a>) aller relevanten fließende Elemente liegt. Der obere Rand (<a href="/en-US/docs/Web/CSS/margin" title="CSS/box_model">margin</a>) des nicht fließenden Blocks kollabiert.</p> + +<p>Vertikale Ränder (<code>margins</code>) zwischen zwei fließenden Elementen hingegen kollabieren nicht. Wenn sie auf fließenden Elemente angewendet werden, wird der Rand des unteren Elements unter den Rand aller relevanten fließenden Elementen verschoben. Dies wirkt sich auf die Position späterer fließenden Elementen aus, da spätere fließende Elemente nicht höher positioniert werden können als frühere.</p> + +<p>Die relevanen fließenden Elemente, deren Fließeigenschaft beendet werden soll, sind die früheren fließenden Elemente mit der selben <a href="/de/docs/Web/Guide/CSS/Block_formatting_context">Blockformatierungskontexts</a> .</p> + +<div class="note"> +<p><strong>Hinweis: </strong>Wenn ein Element nur fließenden (<a href="/de/docs/Web/CSS/float">float</a>) Elemente enthält, kollabiert seine Höhe zu null. Wenn Sie möchten, dass es immer in der Lage ist, seine Größe zu ändern, so dass es in seinem Inneren schwebende Elemente enthält, müssen Sie das <code>float</code> für seine Kinder selbst beenden. Dies wird <strong>clearfix</strong> genannt, und eine Weg, besteht darin, ein <code>clear</code> zu einem ersetzten {{cssxref("::after")}} <a href="/de/docs/Web/CSS/Pseudo-elements">Pseudoelement</a> hinzuzufügen.</p> + +<pre class="language-html notranslate">#container:after { + content: ""; + display: block; + clear: both; +} +</pre> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="twopartsyntaxbox notranslate"></pre> + +<pre class="brush: css no-line-numbers notranslate">/* Keyword values */ +clear: none; +clear: left; +clear: right; +clear: both; +clear: inline-start; +clear: inline-end; + +/* Global values */ +clear: inherit; +clear: initial; +clear: unset; +</pre> + +<h3 id="Values" name="Values">Werte</h3> + +<dl> + <dt><code>none</code></dt> + <dd>Der Umfluss von vorherigen Elementen wird nicht beendet.</dd> + <dt><code>left</code></dt> + <dd>Der Umfluss von vorherigen Elementen wird auf der linken Seite beendet.</dd> + <dt><code>right</code></dt> + <dd>Der Umfluss von vorherigen Elementen wird auf der rechten Seite beendet.</dd> + <dt><code>both</code></dt> + <dd>Der Umfluss von vorherigen Elementen wird auf beiden Seiten beendet.</dd> + <dt><code>inline-start</code></dt> + <dd>Beendet die Fließeigenschaft des Elementes, das nach unten an den Startrand eines seines enthaltenden Blocks verschoben wird. Wenn die Textrichtung <code>ltr</code> (von links nach rechts) ist, dann wird es linksseitig sein. Falls die Textrichtung <code>rtl</code> (von rechts nach links) ist, dann wird es rechtsseitig sein.</dd> + <dt><code>inline-end</code></dt> + <dd>Beendet die Fließeigenschaft des Elementes, das nach unten an den Endrand eines seines enthaltenden Blocks verschoben wird. Wenn die Textrichtung <code>ltr</code> (von links nach rechts) ist, dann wird es linksseitig sein. Falls die Textrichtung <code>rtl</code> (von rechts nach links) ist, dann wird es rechtsseitig sein.</dd> + <dt><code>inherit</code></dt> + <dd>Der Wert des Elternelements wird geerbt.</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="Beispiele">Beispiele</h2> + +<h3 id="clear-left" name="clear-left">clear: left</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><div class="wrapper"> + <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p> + <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> + <p class="left">This paragraph clears left.</p> +</div> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">.wrapper{ + border:1px solid black; + padding:10px; +} +.left { + border: 1px solid black; + clear: left; +} +.black { + float: left; + margin: 0; + background-color: black; + color: #fff; + width: 20%; +} +.red { + float: left; + margin: 0; + background-color: pink; + width:20%; +} +p { + width: 50%; +} +</pre> + +<h4 id="Ergebnis">Ergebnis</h4> + +<p>{{ EmbedLiveSample('clear-left','100%','250') }}</p> + +<h3 id="clear-right" name="clear-right">clear: right</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html notranslate"><div class="wrapper"> + <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p> + <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> + <p class="right">This paragraph clears right.</p> +</div> +</pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css notranslate">.wrapper{ + border:1px solid black; + padding:10px; +} +.right { + border: 1px solid black; + clear: right; +} +.black { + float: right; + margin: 0; + background-color: black; + color: #fff; + width:20%; +} +.red { + float: right; + margin: 0; + background-color: pink; + width:20%; +} +p { + width: 50%; +}</pre> + +<h4 id="Ergebnis_2">Ergebnis</h4> + +<p>{{ EmbedLiveSample('clear-right','100%','250') }}</p> + +<h3 id="clear-both" name="clear-both">clear: both</h3> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: html notranslate"><div class="wrapper"> + <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor. Fusce pulvinar lacus ac dui.</p> + <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p> + <p class="both">This paragraph clears both.</p> +</div> +</pre> + +<h4 id="CSS_3">CSS</h4> + +<pre class="brush: css notranslate">.wrapper{ + border:1px solid black; + padding:10px; +} +.both { + border: 1px solid black; + clear: both; +} +.black { + float: left; + margin: 0; + background-color: black; + color: #fff; + width:20%; +} +.red { + float: right; + margin: 0; + background-color: pink; + width:20%; +} +p { + width: 45%; +}</pre> + +<h4 id="Ergebnis_3">Ergebnis</h4> + +<p>{{ EmbedLiveSample('clear-both','100%','300') }}</p> + +<h2 id="Spezifikationen">Spezifikationen</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 Logical Properties', '#float-clear', 'float and clear')}}</td> + <td>{{Spec2('CSS Logical Properties')}}</td> + <td>Die Werte <code>inline-start</code> und <code>inline-end</code> hinzugefügt.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'visuren.html#flow-control', 'clear')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Keine signifikanten Änderungen, jedoch werden Details geklärt.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#clear', 'clear')}}</td> + <td>{{Spec2('CSS1')}}</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.properties.clear")}}</p> + +<h2 id="See_also" name="See_also">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/CSS/Boxmodell" title="CSS/box_model">Boxmodell</a></li> +</ul> diff --git a/files/de/web/css/clip-path/index.html b/files/de/web/css/clip-path/index.html new file mode 100644 index 0000000000..63df0e6248 --- /dev/null +++ b/files/de/web/css/clip-path/index.html @@ -0,0 +1,128 @@ +--- +title: clip-path +slug: Web/CSS/clip-path +tags: + - CSS + - Experimentell + - Layout + - NeedsBrowserCompatibility + - Referenz + - Web +translation_of: Web/CSS/clip-path +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <strong>clip-path</strong> CSS Eigenschaft verhindert, dass ein Teil eines Elements angezeigt wird, indem es einen Schnittbereich definiert, der angezeigt werden soll, d. h. nur ein bestimmter Bereich des Elements wird angezeigt.</p> + +<p>Der Schnittbereich ist ein Pfad, der als URL, die eine Inline- oder externe SVG-Grafik oder eine Formfunktion wie <a href="/de/docs/Web/SVG/Element/circle">circle()</a> definiert wird. Die <code>clip-path</code> Eigenschaft ersetzt die nun als veraltet geltende <a href="/de/docs/Web/CSS/clip">clip</a> Eigenschaft.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">/* Schlüsselwortwerte */ +clip-path: none; +clip-path: fill-box; +clip-path: stroke-box; +clip-path: view-box; + +/* Bildwerte */ +clip-path: url(resources.svg#c1); +clip-path: linear-gradient(blue, transparent); + +/* Geometriewerte */ +clip-path: inset(100px 50px); +clip-path: circle(50px at 0 100px); +clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); + +/* Globale Werte */ +clip-path: inherit; +clip-path: initial; +clip-path: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code><clip-source></code></dt> + <dd>Repräsentiert eine URL, die ein Schnittpfad Element referenziert.</dd> + <dt><code><basic-shape></code></dt> + <dd>Eine Grundform Funktion, wie sie in der <a href="/en-US/docs/Web/CSS/basic-shape">CSS Shapes Specifikation</a> definiert wird. Eine Grundform macht Gebrauch von der angegebenen Referenzbox, um die Grundform zu skalieren und positionieren. Falls keine Referenzbox angegeben wurde, wird <code>border-box</code> als Referenzbox verwendet.</dd> + <dt><code><geometry-box></code></dt> + <dd> + <p>Falls in Kombination mit <code><basic-shape></code> angegeben, gibt dieser Wert die Referenzbox für die Grundform an. Falls alleine angegeben, werden die Ränder der angegebenen Box inklusive etwaiger Randformen (z. B. definiert durch {{cssxref("border-radius")}}) als Schnittpfad verwendet.</p> + </dd> + <dt><code>fill-box</code></dt> + <dd> + <p>Verwendet den Objektrahmen als Referenzbox.</p> + </dd> + <dt><code>stroke-box</code></dt> + <dd> + <p>Verwendet die Strichrahmenbox als Referenzbox.</p> + </dd> + <dt><code>view-box</code></dt> + <dd> + <p>Verwendet den nähesten SVG-Viewport als Referenzbox. Falls ein {{SVGAttr("viewBox")}} Attribut für das den SVG-Viewport erstellende Element angegeben wurde, wird die Referenzbox am Ursprung des Koordinatensystems positioniert, das durch das <code>viewBox</code> Attribut erzeugt wird und die Ausmaße der Referenzbox werden auf die Breite und Höhe des <code>viewBox</code> Attributs gesetzt.</p> + </dd> + <dt><code>none</code></dt> + <dd>Es wird kein Schnittpfad erzeugt.</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush:css">/* Inline-SVG */ +.target { + clip-path: url(#c1); +} + +/* externes SVG */ +.anothertarget { + clip-path: url(resources.svg#c1); +} + +/* Kreis */ +.circleClass { + clip-path: circle(15px at 20px 20px); +}</pre> + +<h2 id="Spezifikationen">Spezifikationen</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 Masks", "#the-clip-path", 'clip-path')}}</td> + <td>{{Spec2('CSS Masks')}}</td> + <td>Erweitert die Anwendung auf HTML Elemente</td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'masking.html#ClipPathProperty', 'clip-path')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>Ursprüngliche Definition (gilt nur für SVG Elemente)</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.properties.clip-path")}} + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{cssxref("clip-rule")}}, {{cssxref("mask")}}, {{cssxref("filter")}}</li> + <li><a href="/de/docs/SVG_Elemente_auf_HTML_Inhalt_anwenden">SVG Elemente auf HTML Inhalt anwenden</a></li> + <li>{{SVGAttr("clip-path")}} SVG Attribut</li> +</ul> diff --git a/files/de/web/css/clip/index.html b/files/de/web/css/clip/index.html new file mode 100644 index 0000000000..a23c3ec708 --- /dev/null +++ b/files/de/web/css/clip/index.html @@ -0,0 +1,131 @@ +--- +title: clip +slug: Web/CSS/clip +tags: + - CSS + - CSS Eigenschaft + - NeedsMobileBrowserCompatibility + - Referenz + - Veraltet +translation_of: Web/CSS/clip +--- +<div>{{CSSRef}}{{deprecated_header}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>clip</code> CSS Eigenschaft definiert, welcher Teil eines Elements sichtbar ist. Sie gilt nur für Elemente mit {{cssxref("position","position:absolute")}}.</p> + +<div class="warning"> +<p><strong>Warnung:</strong> Diese Eigenschaft ist veraltet. Es sollte stattdessen {{cssxref("clip-path")}} verwendet werden.</p> +</div> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">/* Schlüsselwortwert */ +clip: auto; + +/* <shape> Werte */ +clip: rect(1px 10em 3rem 2ch); +clip: rect(1px, 10em, 3rem, 2ch); + +/* Globale Werte */ +clip: inherit; +clip: initial; +clip: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code><shape></code></dt> + <dd>Ein rechteckiger {{cssxref("<shape>")}} Wert der Form <code>rect(<top>, <right>, <bottom>, <left>)</code> oder <code> rect(<top> <right> <bottom> <left>)</code> wobei <code><top></code> und <code><bottom></code> Versätze von der <em>Innenseite des oberen Randes</em> der Box angeben und <code><right></code> und <code><left></code> Versätze von der <em>Innenseite des linken Randes</em> der Box — d. h. die Ausmaße der Innenabstandsbox.</dd> + <dd><code><top></code>, <code><right></code>, <code><bottom></code> und <code><left></code> können entweder einen {{cssxref("<length>")}} Wert haben oder <code>auto</code>. Falls der Wert irgendeiner Seite <code>auto</code> ist, wird das Element an der <em>Innenseite des Randes</em> dieser Seite abgeschnitten.</dd> + <dt><code>auto</code></dt> + <dd>Das Element wird nicht abgeschnitten (Standardwert). Zu beachten ist, dass sich dies von <code>rect(auto, auto, auto, auto)</code> unterscheidet, welches das Element an den Innenseiten der Ränder des Elements abschneidet.</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush:css">.dotted-border { + border: dotted; + position: relative; + width: 536px; + height: 350px; +} + +#top-left, #middle, #bottom-right { + position: absolute; + top: 0px; +} + +#top-left { + left: 360px; + clip: rect(0px, 175px, 113px, 0px); +} + + +#middle { + left: 280px; + clip: rect(119px, 255px, 229px, 80px); + /* Standardsyntax, nicht unterstützt von Internet Explorer 4-7 */ +} + +#bottom-right { + left: 200px; + clip: rect(235px 335px 345px 160px); + /* Nicht-standardisierte Syntax, jedoch von allen gängigen Browsern unterstützt */ +}</pre> + +<pre class="brush:html"><p class="dotted-border"> + <img src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Originalgrafik" /> + <img id="top-left" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Grafik, die oben links abgeschnitten ist"> + <img id="middle" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Grafik, die zur Mitte hin abgeschnitten ist"> + <img id="bottom-right" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Grafik, die unten rechts abgeschnitten ist"> +</p></pre> + +<p>{{EmbedLiveSample('Beispiele', '689px', '410px')}}</p> + +<h2 id="Spezifikationen">Spezifikationen</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 Masks', '#clip-property', 'clip')}}</td> + <td>{{Spec2('CSS Masks')}}</td> + <td>Markiert die <code>clip</code> Eigenschaft als veraltet, schlägt {{cssxref("clip-path")}} als Ersatz vor.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'clip')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Definiert <code>clip</code> als animierbar.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'visufx.html#clipping', 'clip')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.properties.clip")}} + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Verwandte CSS Eigenschaften: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{Cssxref("overflow-x")}}, {{Cssxref("overflow-y")}}, {{Cssxref("overflow")}}, {{Cssxref("display")}}, {{Cssxref("position")}}</li> +</ul> diff --git a/files/de/web/css/color/index.html b/files/de/web/css/color/index.html new file mode 100644 index 0000000000..1465dd3a1f --- /dev/null +++ b/files/de/web/css/color/index.html @@ -0,0 +1,121 @@ +--- +title: color +slug: Web/CSS/color +tags: + - CSS + - CSS Eigenschaft + - Layout + - Referenz + - Web +translation_of: Web/CSS/color +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft <strong><code>color</code></strong> setzt die Vordergrund<a href="/de/docs/Web/CSS/Farben">farbe</a> des Textinhalts eines Elements und seiner <a href="/de/docs/Web/CSS/text-decoration">Dekorationen</a>. Sie hat keinen Einfluss auf andere Charakteristiken des Elements; sie sollte eigentlich <code>text-color</code> genannt werden, jedoch wurde sie aus historischen Gründen und ihrem Auftreten in CSS Level 1 so genannt.</p> + +<p>Beachte, dass der Farbwert eine gleichmäßige Farbe sein muss, welche seit CSS3 einen Transparenzwert beinhalten kann. Sie kann kein {{cssxref("<gradient>")}} sein, welcher in CSS ein {{cssxref("<image>")}} ist.</p> + +<div>{{cssinfo}}</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: css">/* Eine CSS Level 1 Farbe */ +color: red; + +/* Die einzige in CSS Level 2 (Revision 1) hinzugefügte Farbe */ +color: <code>orange;</code> + +/* CSS Level 3 Farbe, manchmal SVG- oder X11-Farbe genannt */ +color: <code>antiquewhite;</code> + +/* Die Farbe lindgrün in der 3-Zeichen-Notation */ +color: #0f0; + +/* Die Farbe lindgrün in der 6-Zeichen-Notation */ +color: #00ff00; + +/* Eine Farbe, die die verfügbaren funktionalen Notationen verwendet */ +color: rgba(34, 12, 64, 0.3); + +/* Verwende die Farbe des direkten Vorfahren des Elements */ +color: currentcolor; + +/* Globale Werte */ +color: inherit; +color: initial; +color: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code><color></code></dt> + <dd>Ist ein {{cssxref("<color>")}} Wert, der die Farbe von Textelementen innerhalb des Elements bestimmt.</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<p>Die folgenden Zeilen sind Beispiele, wie der Text des Elements rot eingefärbt werden kann:</p> + +<pre class="brush: css">element { color: red; } +element { color: #f00; } +element { color: #ff0000; } +element { color: rgb(255, 0, 0); } +element { color: rgb(100%, 0%, 0%); } +element { color: hsl(0, 100%, 50%); } + +/* 50% translucent */ +element { color: rgba(255, 0, 0, 0.5); } +element { color: hsla(0, 100%, 50%, 0.5); } +</pre> + +<h2 id="Spezifikationen">Spezifikationen</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 Transitions', '#animatable-css', 'color')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Definiert <code>color</code> als animierbar.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Colors', '#color', 'color')}}</td> + <td>{{Spec2('CSS3 Colors')}}</td> + <td>Markiert Systemfarben als veraltet; fügt SVG-Farben hinzu; fügt die funktionalen Notationen <code>rgba()</code>, <code>hsl()</code>, <code>hsla()</code> hinzu.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'colors.html#colors', 'color')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Fügt die Farbe <code>orange</code> und die Systemfarben hinzu.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#color', 'color')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.properties.color")}} + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Der {{cssxref("<color>")}} Datentyp</li> + <li>Weitere Farbeigenschaften: {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, {{cssxref("column-rule-color")}} und {{cssxref("color-adjust")}}</li> +</ul> diff --git a/files/de/web/css/column-count/index.html b/files/de/web/css/column-count/index.html new file mode 100644 index 0000000000..0e7117c49b --- /dev/null +++ b/files/de/web/css/column-count/index.html @@ -0,0 +1,106 @@ +--- +title: column-count +slug: Web/CSS/column-count +translation_of: Web/CSS/column-count +--- +<div>{{CSSRef("CSS Multi-columns")}}</div> + +<h2 id="Summary" name="Summary">Übersicht</h2> + +<p>Die <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft <code>column-count</code> bestimmt die Spaltenanzahl innerhalb eines Elements.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("column-count")}} +</pre> + +<pre>column-count: 3 +column-count: auto</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>Besagt, dass die Anzahl Spalten von anderen Werten Abhängig ist, wie z. B. {{cssxref("column-width")}}.</dd> + <dt><code><number></code></dt> + <dd>Ein positiver {{cssxref("<integer>")}}, welcher die Anzahl der Spalten genau festlegt. Falls der Wert von {{cssxref("column-width")}} nicht auto ist, stellt dieser Wert die maximale Anzahl an Spalten dar.</dd> +</dl> + +<h2 id="Examples" name="Examples">Beispiel</h2> + +<pre class="brush: css">.content-box { + border: 10px solid #000000; + column-count:3; +} +</pre> + +<h2 id="Specifications" name="Specifications">Spezifikations</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Anmerkung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Multicol', '#column-count', 'column-count')}}</td> + <td>{{Spec2('CSS3 Multicol')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser Kompatibilität</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}{{property_prefix('-webkit')}}</td> + <td>1.5 (1.8){{property_prefix('-moz')}}</td> + <td>10</td> + <td>11.1</td> + <td>3.0 (522){{property_prefix('-webkit')}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/de/web/css/column-fill/index.html b/files/de/web/css/column-fill/index.html new file mode 100644 index 0000000000..3750096c9f --- /dev/null +++ b/files/de/web/css/column-fill/index.html @@ -0,0 +1,74 @@ +--- +title: column-fill +slug: Web/CSS/column-fill +tags: + - CSS + - CSS Eigenschaft + - CSS Mehrspalten + - NeedsBrowserCompatibility + - Referenz +translation_of: Web/CSS/column-fill +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft <code>column-fill</code> bestimmt die Aufteilung von Inhalten auf Spalten. Inhalte können entweder gleichmäßig verteilt werden, damit alle Spalten dieselbe Höhe haben, oder sie nehmen den Raum ein, den der Inhalt benötigt, sofern <code>auto</code> verwendet wird.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">/* Schlüsselwortwerte */ +column-fill: auto; +column-fill: balance; + +/* Globale Werte */ +column-fill: inherit; +column-fill: initial; +column-fill: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>Die Spalten werden fortlaufend gefüllt.</dd> + <dt><code>balance</code></dt> + <dd>Der Inhalt wird gleichmäßig aufgeteilt.</dd> +</dl> + +<h3 id="csssyntax">{{csssyntax}}</h3> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush:css">.content-box { + column-count: 4; + column-rule: 1px solid black; + column-fill: balance; + height: 200px; +} +</pre> + +<h2 id="Spezifikationen">Spezifikationen</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 Multicol', '#column-fill', 'column-fill')}}</td> + <td>{{Spec2('CSS3 Multicol')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.properties.column-fill")}} diff --git a/files/de/web/css/column-gap/index.html b/files/de/web/css/column-gap/index.html new file mode 100644 index 0000000000..9e41194a52 --- /dev/null +++ b/files/de/web/css/column-gap/index.html @@ -0,0 +1,94 @@ +--- +title: column-gap +slug: Web/CSS/column-gap +tags: + - CSS + - CSS Eigenschaft + - CSS Mehrspalten + - NeedsMobileBrowserCompatibility + - Referenz +translation_of: Web/CSS/column-gap +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die CSS Eigenschaft <code>column-gap</code> bestimmt die Größe der Lücke zwischen den Spalten für Elemente, die als mehrspaltige Elemente dargestellt werden.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">/* Schlüsselwortwert */ +column-gap: normal; + +/* <length> Werte */ +column-gap: 3px; +column-gap: 2.5em; + +/* Globale Werte */ +column-gap: inherit; +column-gap: initial; +column-gap: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code>normal</code></dt> + <dd>Übernimmt den vom Browser vordefinierten Wert. Laut Spezifikation sollte dieser Wert <code>1em</code> entsprechen.</dd> + <dt><code><length></code></dt> + <dd>Ein {{cssxref("<length>")}} Wert, welcher den Abstand der Lücke festlegt. Der Wert darf nicht negativ sein, <code>0</code> ist jedoch zulässig.</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush:css; highlight:[4]">.content-box { + border: 10px solid #000000; + column-count: 3; + column-gap: 20px; +} +</pre> + +<h2 id="Spezifikationen">Spezifikationen</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 Multicol', '#column-gap', 'column-gap')}}</td> + <td>{{Spec2('CSS3 Multicol')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<h3 id="Support_im_Flex_Layout">Support im Flex Layout</h3> + +<p>{{Compat("css.properties.column-gap.flex_context")}}</p> + +<h3 id="Support_im_Grid_Layout">Support im Grid Layout</h3> + +<p>{{Compat("css.properties.column-gap.grid_context")}}</p> + +<h3 id="Support_im_Multi-column_Layout">Support im Multi-column Layout</h3> + +<p>{{Compat("css.properties.column-gap.multicol_context")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/CSS/CSS_Referenz">CSS Referenz</a></li> +</ul> diff --git a/files/de/web/css/column-rule-color/index.html b/files/de/web/css/column-rule-color/index.html new file mode 100644 index 0000000000..750321ff5e --- /dev/null +++ b/files/de/web/css/column-rule-color/index.html @@ -0,0 +1,67 @@ +--- +title: column-rule-color +slug: Web/CSS/column-rule-color +tags: + - CSS + - CSS Eigenschaft + - CSS Mehrspaltiges Layout + - Layout + - Referenz + - Web +translation_of: Web/CSS/column-rule-color +--- +<div>{{CSSRef("CSS Multi-columns")}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>column-rule-color</code> CSS Eigenschaft definiert die Farbe der Linie, die zwischen den Spalten in mehrspaltigen Layouts gezeichnet wird.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="twopartsyntaxbox"><a href="/de/docs/Web/CSS/Wertdefinitionssyntax" title="CSS/Value_definition_syntax">Formale Syntax</a>: {{csssyntax("column-rule-color")}} +</pre> + +<pre>column-rule-color: red +column-rule-color: rgb(192, 56, 78) +column-rule-color: transparent +column-rule-color: hsla(0, 100%, 50%, 0.6) + +column-rule-color: inherit +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><color></dt> + <dd>Ist ein {{cssxref("<color>")}} Wert, der die Farbe der Linie angibt, die die Spalten trennt.</dd> +</dl> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush:css">#header { column-rule-color: blue; } +</pre> + +<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 Multicol', '#crc', 'column-rule-color')}}</td> + <td>{{Spec2('CSS3 Multicol')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.properties.column-rule-color")}} diff --git a/files/de/web/css/column-rule-style/index.html b/files/de/web/css/column-rule-style/index.html new file mode 100644 index 0000000000..612ec4008b --- /dev/null +++ b/files/de/web/css/column-rule-style/index.html @@ -0,0 +1,72 @@ +--- +title: column-rule-style +slug: Web/CSS/column-rule-style +tags: + - CSS + - CSS Eigenschaft + - CSS Mehrspaltiges Layout + - Layout + - Referenz + - Web +translation_of: Web/CSS/column-rule-style +--- +<p>{{ CSSRef("CSS Multi-columns") }}</p> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>column-rule-style</code> CSS Eigenschaft definiert den Stil der Linie, die zwischen den Spalten in mehrspaltigen Layouts gezeichnet wird.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="twopartsyntaxbox"><a href="/de/docs/Web/CSS/Wertdefinitionssyntax" title="CSS/Value_definition_syntax">Formale Syntax</a>: {{csssyntax("column-rule-style")}} +</pre> + +<pre>column-rule-style: none +column-rule-style: hidden +column-rule-style: dotted +column-rule-style: dashed +column-rule-style: solid +column-rule-style: double +column-rule-style: groove +column-rule-style: ridge +column-rule-style: inset +column-rule-style: outset + +column-rule-style: inherit +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><br-style> </dt> + <dd>Ist ein Schlüsselwort, das durch {{ cssxref("border-style") }} definiert wird und der den Stil der Linie angibt, die die Spalten trennt. Die Gestaltung muss wie im zusammenfallenden Border Model interpretiert werden.</dd> +</dl> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush: css">#header {-moz-column-rule-style: inset;}</pre> + +<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 Multicol', '#crs', 'column-rule-style') }}</td> + <td>{{ Spec2('CSS3 Multicol') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.properties.column-rule-style")}} diff --git a/files/de/web/css/column-rule-width/index.html b/files/de/web/css/column-rule-width/index.html new file mode 100644 index 0000000000..b087970e95 --- /dev/null +++ b/files/de/web/css/column-rule-width/index.html @@ -0,0 +1,78 @@ +--- +title: column-rule-width +slug: Web/CSS/column-rule-width +tags: + - CSS + - CSS Eigenschaft + - CSS Mehrspaltiges Layout + - Layout + - NeedsLiveSample + - NeedsMobileBrowserCompatibility + - Referenz +translation_of: Web/CSS/column-rule-width +--- +<p>{{ CSSRef}}</p> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>column-rule-width</code> CSS Eigenschaft definiert die Breite der Linie, die zwischen den Spalten in mehrspaltigen Layouts gezeichnet wird.</p> + +<p>{{cssinfo('column-rule-width')}}</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="brush:css">/* Schlüsselwortwerte */ +column-rule-width: thin; +column-rule-width: medium; +column-rule-width: thick; + +/* Längenwerte */ +column-rule-width: 1px; +column-rule-width: 2.5em; + +/* Globale Werte */ +column-rule-width: inherit; +column-rule-width: initial; +column-rule-width: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><'border-width'> </dt> + <dd>Ist ein {{cssxref("border-width")}} Wert oder eines der Schlüsselwörter <code>thin</code>, <code>medium</code> oder <code>thick</code>, und beschreibt die Breite der Linie, die zwei Spalten trennt.</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax('column-rule-width')}}</pre> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush: css">#header { + column-rule-width: thick; +} +</pre> + +<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 Multicol', '#crw', 'column-rule-width') }}</td> + <td>{{ Spec2('CSS3 Multicol') }}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{Compat("css.properties.column-rule-width")}}</p> diff --git a/files/de/web/css/column-rule/index.html b/files/de/web/css/column-rule/index.html new file mode 100644 index 0000000000..5df71109ef --- /dev/null +++ b/files/de/web/css/column-rule/index.html @@ -0,0 +1,74 @@ +--- +title: column-rule +slug: Web/CSS/column-rule +tags: + - CSS + - CSS Eigenschaft + - CSS Mehrspaltenlayout + - Layout + - Referenz + - Web +translation_of: Web/CSS/column-rule +--- +<div>{{CSSRef("CSS Multi-columns")}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>In mehrspaltigen Layouts beschreibt die <code>column-rule</code> CSS Eigenschaft eine gerade Linie, welche zwischen jeder Spalte dargestellt wird. Sie ist eine komfortable Kurzform, um das separate Setzen der einzelnen <code>column-rule-*</code> Eigenschaften zu vermeiden: {{Cssxref("column-rule-width")}}, {{Cssxref("column-rule-style")}} und {{Cssxref("column-rule-color")}}.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><a href="/de/docs/Web/CSS/Wertdefinitionssyntax" title="CSS/Value_definition_syntax">Formale Syntax</a>: {{csssyntax("column-rule")}} +</pre> + +<h3 id="Werte">Werte</h3> + +<p>Akzeptiert einen, zwei oder drei Werte in beliebiger Reihenfolge:</p> + +<dl> + <dt><code><column-rule-width></code></dt> + <dd>Ist eine {{cssxref("<length>")}} oder eins der drei Schlüsselwörter <code>thin</code>, <code>medium</code> oder <code>thick</code>. Siehe {{cssxref("border-width")}} für Details.</dd> + <dt><code><column-rule-style></code></dt> + <dd>Siehe {{cssxref("border-style")}} für mögliche Werte und Details.</dd> + <dt><code><column-rule-color></code></dt> + <dd>Ist ein {{cssxref("<color>")}} Wert.</dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<pre>p.foo { column-rule: dotted; } /* entspricht "medium dotted currentColor" */ +p.bar { column-rule: solid blue; } /* entspricht "medium solid blue" */ +p.baz { column-rule: solid 8px; } /* entspricht "8px solid currentColor" */ +p.abc { column-rule: thick inset blue; } +</pre> + +<h3 id="Live_Beispiel">Live Beispiel</h3> + +<div style="padding: 0.3em; background: gold; border: groove 2px gold; -moz-column-rule: inset 2px gold; -moz-column-width: 17em; -webkit-columns: 17em; -webkit-column-rule: inset 2px gold; columns: 17em; column-rule: inset 2px gold;"> +<p>padding:0.3em; background:gold; border:groove 2px gold; <strong>column-rule: inset 2px gold;</strong> <strong>column-width:17em;</strong></p> +</div> + +<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 Multicol', '#column-rule', 'column-rule')}}</td> + <td>{{Spec2('CSS3 Multicol')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.properties.column-rule")}} diff --git a/files/de/web/css/column-span/index.html b/files/de/web/css/column-span/index.html new file mode 100644 index 0000000000..c441af6d43 --- /dev/null +++ b/files/de/web/css/column-span/index.html @@ -0,0 +1,67 @@ +--- +title: column-span +slug: Web/CSS/column-span +tags: + - CSS + - CSS Eigenschaft + - CSS Mehrspalten + - Referenz +translation_of: Web/CSS/column-span +--- +<div>{{CSSRef("CSS Multi-columns")}}</div> + +<h2 id="Summary" name="Summary">Übersicht</h2> + +<p>Die <a href="/en-US/docs/CSS" title="/en-US/docs/CSS">CSS</a> Eigenschaft <code>column-span</code> bestimmt die Laufweite eines Elements inerhalb eines Mehrspaltigen Containers.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="twopartsyntaxbox">{{csssyntax}} +</pre> + +<pre>column-span: none +column-span: all + +column-span: inherit +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code>none</code></dt> + <dd>Das Element fliesst nicht über mehrere Spalten hinweg.</dd> + <dt><code>all</code></dt> + <dd>Das Element fliesst über sämtliche Spalten hinweg. Der Inhalt davor wird automatisch zwischen den Spalten ausgeglichen.</dd> +</dl> + +<h2 id="Examples" name="Examples">Beispiele</h2> + +<pre class="brush:css">h1, h2 { + column-span: all; +} +</pre> + +<h2 id="Specifications" name="Specifications">Spezifikation</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Anmerkung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Multicol', '#column-span0', 'column-width') }}</td> + <td>{{ Spec2('CSS3 Multicol') }}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser Kompatibilität</h2> + +{{Compat("css.properties.column-span")}} diff --git a/files/de/web/css/column-width/index.html b/files/de/web/css/column-width/index.html new file mode 100644 index 0000000000..2ba1dc5e11 --- /dev/null +++ b/files/de/web/css/column-width/index.html @@ -0,0 +1,99 @@ +--- +title: column-width +slug: Web/CSS/column-width +tags: + - CSS + - CSS Eigenschaft + - CSS Mehrspalten + - Referenz +translation_of: Web/CSS/column-width +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <strong><code>column-width</code></strong> CSS Eigenschaft schlägt eine optimale Spaltenbreite vor. Dies ist kein absoluter Wert, sondern lediglich ein Hinweis an den Browser, welcher die Breite der Spalte anhand des vorgeschlagenen Wertes anpasst, was skalierbare Designs ermöglicht, die sich verschiedenen Bildschirmgrößen anpassen. Besonders wenn die {{cssxref("column-count")}} CSS Eigenschaft angegeben ist, welche Vorrang hat, wenn es darum geht, eine exakte Spaltenbreite zu setzen, müssen alle Längenwerte angegeben werden. In horizontalem Text sind dies {{cssxref('width')}}, {{cssxref('column-width')}}, {{cssxref('column-gap')}} und {{cssxref('column-rule-width')}}.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">/* Schlüsselwortwert */ +column-width: auto; + +/* Verschiedene <length> Werte */ +column-width: 6px; +column-width: 25em; +column-width: 0.3vw; + +/* Globale Werte */ +column-width: inherit; +column-width: initial; +column-width: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code><length></code></dt> + <dd>Ist ein {{cssxref("<length>")}} Wert, der einen Hinweis auf die optimale Breite der Spalte gibt. Die tatsächliche Spaltenbreite kann größer (um den verfügbaren Platz auszufüllen) oder schmaler (nur, falls der verfügbare Platz kleiner als die angegebene Spaltenbreite ist) sein. Die Länge muss positiv sein, ansonsten ist sie ungültig.</dd> + <dt><code>auto</code></dt> + <dd>Ist ein Schlüsselwort, das angibt, dass die Breite der Spalte durch andere CSS Eigenschaften wie {{cssxref("column-count")}} bestimmt werden soll.</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="HTML_Inhalt">HTML Inhalt</h3> + +<pre class="brush: html"><div class="content-box"> +Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. +</div></pre> + +<h3 id="CSS_Inhalt">CSS Inhalt</h3> + +<pre class="brush: css">.content-box { + border: 10px solid #0ff; + + /* Chrome, Safari, Opera Präfix */ + -webkit-column-width: 100px; + + /* Mozilla Firefox Präfix */ + -moz-column-width: 100px; + + column-width: 100px; +} +</pre> + +<p>{{EmbedLiveSample('Beispiele', '300px', '200px')}}</p> + +<h2 id="Spezifikationen">Spezifikationen</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 Writing Modes', '#multicol-intrinsic', 'column-width')}}</td> + <td>{{Spec2('CSS3 Writing Modes')}}</td> + <td>Fügt innere Größen über die Schlüsselwörter <code>min-content</code>, <code>max-content</code>, <code>fill-available</code> und <code>fit-content</code> hinzu.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Multicol', '#cw', 'column-width')}}</td> + <td>{{Spec2('CSS3 Multicol')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{Compat("css.properties.column-width")}}</p> diff --git a/files/de/web/css/columns/index.html b/files/de/web/css/columns/index.html new file mode 100644 index 0000000000..5a243ed703 --- /dev/null +++ b/files/de/web/css/columns/index.html @@ -0,0 +1,113 @@ +--- +title: columns +slug: Web/CSS/columns +tags: + - CSS + - CSS Eigenschaft + - CSS Mehrspalten Layout + - Layout + - Referenz + - Web +translation_of: Web/CSS/columns +--- +<div>{{CSSRef}}</div> + +<p>Die <a href="/de/docs/Web/CSS" title="CSS">CSS</a> Eigenschaft <strong><code>columns</code></strong> ist eine Kurzform Eigenschaft, die es erlaubt, sowohl die {{ cssxref('column-width') }} als auch die {{ cssxref("column-count") }} Eigenschaft auf einmal zu setzen.</p> + +<div>{{EmbedInteractiveExample("pages/css/columns.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="/de/docs/">https://github.com/mdn/interactive-examples</a> und senden Sie uns eine Pull-Anfrage.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css no-line-numbers notranslate">/* Column width */ +columns: 18em; + +/* Column count */ +columns: auto; +columns: 2; + +/* Both column width and count */ +columns: 2 auto; +columns: auto 12em; +columns: auto auto; + +/* Global values */ +columns: inherit; +columns: initial; +columns: unset;</pre> + +<p>Die Eigenschaft <code>columns</code> kann mit einem oder mit zwei von den unten aufgelisteten Werten in beliebiger Reihenfolge spezifiziert.</p> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code><column-width></code></dt> + <dd>The ideal column width, defined as a {{cssxref("<length>")}} or the keyword <code>auto</code>. The actual width may be wider or narrower to fit the available space. See {{cssxref("column-width")}}.</dd> + <dt><code><column-count></code></dt> + <dd>The ideal number of columns into which the element's content should be flowed, defined as an {{cssxref("<integer>")}} or the keyword <code>auto</code>. If neither this value nor the column's width are <code>auto</code>, it merely indicates the maximum allowable number of columns. See {{cssxref("column-count")}}.</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="Beispiel">Beispiel</h2> + +<h3 id="Setting_three_equal_columns" name="Setting_three_equal_columns">Sets drei gleiche Spalten</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><p class="content-box"> + This is a bunch of text split into three columns + using the CSS `columns` property. The text + is equally distributed over the columns. +</p> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css; notranslate">.content-box { + columns: 3 auto; +}</pre> + +<h4 id="Ergebnis">Ergebnis</h4> + +<p>{{EmbedLiveSample('Setting_three_equal_columns', 'auto', 120)}}</p> + +<h2 id="Specifications" name="Specifications">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 Multicol', '#columns', 'columns') }}</td> + <td>{{ Spec2('CSS3 Multicol') }}</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.properties.columns")}}</p> + +<h2 id="See_also" name="See_also">Siehe auch</h2> + +<ul> + <li>{{cssxref("widows")}}</li> + <li>{{cssxref("orphans")}}</li> + <li><a href="https://developer.mozilla.org/de/docs/Web/CSS/Paged_Media">Seitennummerierte Medien</a></li> +</ul> diff --git a/files/de/web/css/content/index.html b/files/de/web/css/content/index.html new file mode 100644 index 0000000000..686e098723 --- /dev/null +++ b/files/de/web/css/content/index.html @@ -0,0 +1,238 @@ +--- +title: content +slug: Web/CSS/content +tags: + - CSS + - CSS Eigenschaft + - Referenz +translation_of: Web/CSS/content +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Zusammenfassung">Zusammenfassung</h2> + +<p>Die <code>content</code> CSS Eigenschaft wird mit {{ cssxref("::before") }} und {{ cssxref("::after") }} Pseudo-elementen genutzt um Inhalte in einen Element zu generieren. Die Inhalte die in <code>content</code> eingefügt werden sind Anonym, sie werden nur gerendert und sind nicht im DOM vorhanden. Siehe:<em> <a href="/en-US/docs/CSS/Replaced_element" title="CSS/Replaced_element">replaced elements</a>.</em></p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("content")}} +</pre> + +<pre>content: normal /* Keywords die nicht mit anderen Werten kombiniert werden können */ +content: none + +content: 'prefix' /* <string> Wert, nicht-lateinische Zeichen müssen codiert werden z.B. \00A0 for &nbsp; */ +content: url(http://www.example.com/test.html) /* <uri> <span style="font-size: 1rem;">Wert</span><span style="font-size: 1rem;"> */</span> +content: chapter_counter /* <counter> <span style="font-size: 1rem;">Werte</span><span style="font-size: 1rem;"> */</span> +content: attr(value string) /* attr() Wert verbunden mit dem HTML Attribut Wert */ +content: open-quote /* Sprach- und positionsabhängige Keywords */ +content: close-quote +content: no-open-quote +content: no-close-quote + +content: open-quote chapter_counter /* Außer für normal und none, können mehrere Werte gleichzeitig verwendet werden */ + +content: inherit +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code>none</code></dt> + <dd>Das Pseudo-Element wird nicht erzeugt.</dd> + <dt><code>normal</code></dt> + <dd>Berechnet auf <code>none</code> für <code>:before</code> und <code>:after</code> Pseudo-elemente.</dd> + <dt><string></dt> + <dd>Text Inhalt.</dd> + <dt><uri><code> url()</code></dt> + <dd>Der Wert ist ein URI, die eine externe Ressource bezeichnet (beispielsweise ein Bild). Wenn die Ressource oder das Bild nicht angezeigt werden kann, wird es entweder ignoriert oder ein Platzhalter wird angezeigt.</dd> + <dt><counter></dt> + <dd>Die Zähler (Counters) können mit zwei verschiedenen Funktionen angegeben werden: 'counter()' oder 'counters()'. Ersteres hat zwei Formen: 'counter(name) "oder" counter(name, style). Der erzeugte Text ist der Wert des counter innersten, im Scope dieses Pseudoelements; es wird in der angegebenen Art ('dezimal' als Standard) formatiert. Die letztere Funktion hat auch zwei Formen: "counter(name, string) 'oder' counters(name, string, style) '. Der erzeugte Text ist der Wert aller Zähler mit dem angegebenen Namen im Scope dieses Pseudoelements, von außen nach innen, durch den angegebenen String getrennt. Die counter werden in der angegebenen Art ('dezimal' als Standard) wiedergegeben. Siehe den Abschnitt über automatische Counter und Nummerierung für weitere Informationen. Der Name darf nicht "none", "inherit" oder "initial" sein. Ein solcher Name bewirkt, dass die Deklaration ignoriert wird.</dd> + <dt><code>attr(X)</code></dt> + <dd>Gibt den Wert des Elementen Attributes X als String zurück. Gibt es kein Attribut X wird ein leerer String zurückgegeben. Die Groß- und Kleinschreibung von Attributnamen hängt von der Dokumentsprache ab.</dd> + <dt><code>open-quote</code> | <code>close-quote</code></dt> + <dd>Diese Werte werden durch die entsprechende Zeichenfolge aus der {{ cssxref("quotes") }} Eigenschaft ersetzt. </dd> + <dt><code>no-open-quote</code> | <code>no-close-quote</code></dt> + <dd>Stellt keine Inhalte, sondern erhöht (verringert) die Ebene der Schachtelung für Zitate.</dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Code_sample_-_headings_and_quotes" name="Code_sample_-_headings_and_quotes">Code Beispiele - Überschriften und Zitate</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><h1>5</h1> +<p> We shall start this with a quote from Sir Tim Berners-Lee, + <q cite="http://www.w3.org/People/Berners-Lee/FAQ.html#Internet"> + I was lucky enough to invent the Web at the time when the Internet already existed - and had for a decade and a half.</q> We must understand that there is nothing fundamentally wrong with building on the contributions of others. +</p> + +<h1>6</h1> +<p> Here we shall quote the Mozilla Manifesto, + <q cite="http://www.mozilla.org/en-US/about/manifesto/"> + Individuals must have the ability to shape the Internet and their own experiences on the Internet.</q> And so, we can infer that contributing to the open web, can protect our own individual experiences on it. +</p></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">q { + color: #00008B; + font-style: italic; +} + +q::before { content: open-quote } +q::after { content: close-quote } + +h1::before { content: "Chapter "; }</pre> + +<h4 id="Ausgabe">Ausgabe</h4> + +<p>{{ EmbedLiveSample('Code_sample_-_headings_and_quotes', 460, 100) }}</p> + +<h3 id="Code_sample_-_content_with_multiple_values" name="Code_sample_-_content_with_multiple_values">Code sample - content with multiple values adding an icon before a link</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><a href="http://www.mozilla.org/en-US/">Home Page</a></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">a::before{ + content: url(http://www.mozilla.org/favicon.ico) " MOZILLA: "; + font: x-small Arial,freeSans,sans-serif; + color: gray; +}</pre> + +<h4 id="Ausgabe_2">Ausgabe</h4> + +<p>{{ EmbedLiveSample('Code_sample_-_content_with_multiple_values', 200, 60) }}</p> + +<h3 id="Code_sample_-_adding_an_icon_after_text" name="Code_sample_-_adding_an_icon_after_text">Code sample - adding an icon after text in a custom list</h3> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: html"><div> + <ul class="brightIdea"> + <li>This is my first idea</li> + <li>and another good idea</li> + </ul> +</div></pre> + +<h4 id="CSS_3">CSS</h4> + +<pre class="brush: css">/* first import the icon from a suitable site */ +@import url(http://weloveiconfonts.com/api/?family=entypo); + +.brightIdea li::after{ + content: '\1f4a1'; + font-family: 'entypo', sans-serif; +}</pre> + +<h4 id="Ausgabe_3">Ausgabe</h4> + +<p>{{ EmbedLiveSample('Code_sample_-_adding_an_icon_after_text', 300, 100) }}</p> + +<h3 id="Code_sample_-_class_based_example" name="Code_sample_-_class_based_example">Code sample - class based example</h3> + +<h4 id="HTML_4">HTML</h4> + +<pre class="brush: html"><h2>Paperback best sellers</h2> +<ol> + <li>Political thriller</li> + <li class="newEntry">Halloween Stories</li> + <li>My Biography</li> + <li class="newEntry">Vampire Romance</li> +</ol></pre> + +<h4 id="CSS_4">CSS</h4> + +<pre class="brush: css">/* use a class rather that an element selector to give more flexibility. +Simple string example, but don't forget add a leading space in the text string +for spacing purposes */ + +.newEntry::after { + content: " New!"; + color: red; +}</pre> + +<h4 id="Ausgabe_4">Ausgabe</h4> + +<p>{{ EmbedLiveSample('Code_sample_-_class_based_example', 300, 200) }}</p> + +<h3 id="Code_sample_-_rich_link_styling" name="Code_sample_-_rich_link_styling">Code sample - rich link styling</h3> + +<h4 id="HTML_5">HTML</h4> + +<pre class="brush: html"><ul> + <li><a id="moz" href="http://www.mozilla.org/"> + Mozilla Home Page</a></li> + <li><a id="mdn" href="https://developer.mozilla.org/"> + Mozilla Developer Network</a></li> + <li><a id="w3c" href="http://www.w3c.org/"> + World Wide Web Consortium</a></li> +</ul></pre> + +<h4 id="CSS_5">CSS</h4> + +<pre class="brush: css">a { + text-decoration: none; + border-bottom: 3px dotted navy; +} + +a::after { + content: " (" attr(id) ")"; +} + +#moz::before { + content:url(https://mozorg.cdn.mozilla.net/media/img/favicon.ico) ; +} + +#mdn::before { + content:url(https://mdn.mozillademos.org/files/7691/mdn-favicon16.png) ; +} + +#w3c::before { + content:url(http://w3c.org/2008/site/images/favicon.ico) ; +} + +li { + margin: 1em; +} + +</pre> + +<h4 id="Ausgabe_5">Ausgabe</h4> + +<p>{{ EmbedLiveSample('Code_sample_-_rich_link_styling', 340, 200) }}</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('CSS2.1', 'generate.html#content', 'content') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2> + +<p>{{Compat("css.properties.content")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{ Cssxref("::after") }}, {{ Cssxref("::before") }}, {{ Cssxref("quotes") }}</li> +</ul> diff --git a/files/de/web/css/counter-increment/index.html b/files/de/web/css/counter-increment/index.html new file mode 100644 index 0000000000..07c649e290 --- /dev/null +++ b/files/de/web/css/counter-increment/index.html @@ -0,0 +1,99 @@ +--- +title: counter-increment +slug: Web/CSS/counter-increment +tags: + - CSS + - CSS Eigenschaft + - CSS Liste + - NeedsMobileBrowserCompatibility + - Referenz +translation_of: Web/CSS/counter-increment +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <strong><code>counter-increment</code></strong> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft wird verwendet, um den Wert von <a href="/de/docs/Web/CSS/CSS_Lists_and_Counters/CSS_Zähler_verwenden">CSS Zählern</a> um einen bestimmten Wert zu erhöhen. Der Wert des Zählers kann durch die {{cssxref("counter-reset")}} CSS Eigenschaft zurückgesetzt werden.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">/* Erhöht 'counter-name' um 1 */ +counter-increment: counter-name; + +/* Verringert 'counter-name' um 1 */ +counter-increment: counter-name -1; + +/* Erhöht 'counter1' um 1 und verringert 'counter2' um 4 */ +counter-increment: counter1 counter2 -4; + +/* Belässt die Zähler unverändert: wird verwendet, um weniger spezifische Werte zu verstecken */ +counter-increment: none; + +/* Globale Werte */ +counter-increment: inherit; +counter-increment: initial; +counter-increment: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt>{{cssxref("custom-ident", "<custom-ident>")}}</dt> + <dd>Der Name des Zählers, der erhöht bzw. verringert werden soll. Dieser Bezeichner besteht aus einer Kombination von den schreibungsunabhängigen Buchstaben <code>a</code> bis <code>z</code>, den Zahlen <code>0</code> bis <code>9</code>, Unterstrichen (<code>_</code>), und/oder Bindestrichen (<code>-</code>). Das erste Zeichen, das kein Bindestrich ist, muss ein Buchstabe sein (d. h. am Anfang darf keine Zahl stehen, auch nicht, wenn davor ein Bindestrich steht). Zudem sind zwei Bindestriche am Anfang des Bezeichners verboten. Er darf weder <code>none</code>, <code>unset</code>, <code>initial</code> oder <code>inherit</code> unabhängig von Groß- und Kleinschreibung sein.</dd> + <dt>{{cssxref("<integer>")}}</dt> + <dd>Der Wert, der dem Zähler hinzugefügt wird. Falls nicht angegeben, wird <code>1</code> verwendet.</dd> + <dt><code>none</code></dt> + <dd>Keiner der Zähler wird verändert. Dieser Wert wird als Standardwert verwendet oder um eine Erhöhung bzw. Verringerung in spezifischeren Regeln zurückzusetzen.</dd> +</dl> + +<p>Es können beliebig viele Zähler erhöht bzw. verringert werden, jeder durch ein Leerzeichen getrennt.</p> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush: css">h1 { + counter-increment: chapter section 2 page; + /* Erhöht den Wert der 'chapter' und 'page' Zähler um 1 + und den 'section' Zähler um 2. */ +} +</pre> + +<h2 id="Spezifikationen">Spezifikationen</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 Lists", "#counter-increment", "counter-increment")}}</td> + <td>{{Spec2("CSS3 Lists")}}</td> + <td>Keine Änderung</td> + </tr> + <tr> + <td>{{SpecName("CSS2.1", "generate.html#propdef-counter-increment", "counter-increment")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.properties.counter-increment")}} + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/CSS/CSS_Lists_and_Counters/CSS_Zähler_verwenden">CSS Zähler verwenden</a></li> + <li>{{cssxref("counter-reset")}}</li> +</ul> diff --git a/files/de/web/css/counter-reset/index.html b/files/de/web/css/counter-reset/index.html new file mode 100644 index 0000000000..3b35441a61 --- /dev/null +++ b/files/de/web/css/counter-reset/index.html @@ -0,0 +1,100 @@ +--- +title: counter-reset +slug: Web/CSS/counter-reset +tags: + - CSS + - CSS Eigenschaft + - CSS Liste + - NeedsMobileBrowserCompatibility + - Referenz +translation_of: Web/CSS/counter-reset +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>counter-reset</code> <a href="/de/docs/Web/CSS" title="CSS">CSS</a> Eigenschaft wird verwendet, um <a href="/de/docs/Web/CSS/CSS_Lists_and_Counters/CSS_Zähler_verwenden" title="CSS_Counters">CSS Zähler</a> auf einen bestimmten Wert zurückzusetzen.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">/* Setzt 'counter-name' auf 0 */ +counter-reset: counter-name; + +/* Setzt 'counter-name' auf -1 */ +counter-reset: counter-name -1; + +/* Setzt 'counter1' auf 1 und 'counter2' auf 4 */ +counter-reset: counter1 1 counter2 4; + +/* Bricht alle Rücksetzungen ab, die in weniger spezifischen Regeln gesetzt würden */ +counter-reset: none; + +/* Globale Werte */ +counter-reset: inherit; +counter-reset: initial; +counter-reset: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt>{{cssxref("custom-ident", "<custom-ident>")}}</dt> + <dd>Der Name des Zählers, der zurückgesetzt werden soll. Dieser Bezeichner besteht aus einer Kombination von den schreibungsunabhängigen Buchstaben <code>a</code> bis <code>z</code>, den Zahlen <code>0</code> bis <code>9</code>, Unterstrichen (<code>_</code>), und/oder Bindestrichen (<code>-</code>). Das erste Zeichen, das kein Bindestrich ist, muss ein Buchstabe sein (d. h. am Anfang darf keine Zahl stehen, auch nicht, wenn davor ein Bindestrich steht). Zudem sind zwei Bindestriche am Anfang des Bezeichners verboten. Er darf weder <code>none</code>, <code>unset</code>, <code>initial</code> oder <code>inherit</code> unabhängig von Groß- und Kleinschreibung sein.</dd> + <dt>{{cssxref("<integer>")}}</dt> + <dd>Der Wert, auf den der Zähler bei jedem Vorkommen des Elements zurückgesetzt werden soll. Falls nicht angegeben, wird <code>0</code> verwendet.</dd> + <dt><code>none</code></dt> + <dd>Ist ein Schlüsselwort, das angibt, dass keiner der Zähler zurückgesetzt wird. Es kann dazu verwendet werden, um <code>counter-reset</code> Werte zu verstecken, die in weniger spezifischen Regeln definiert wurden.</dd> +</dl> + +<p>Es können beliebig viele Zähler zurückgesetzt werden, jeder durch ein Leerzeichen getrennt.</p> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush:css">h1 { + counter-reset: chapter section 1 page; + /* Setzt den 'chapter' und 'page' Zähler auf 0 + und den 'section' Zähler auf 1. */ +} +</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Anmerkung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Lists', '#counter-reset', 'counter-reset')}}</td> + <td>{{Spec2('CSS3 Lists')}}</td> + <td>Keine Änderung</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'generate.html#propdef-counter-reset', 'counter-reset')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.properties.counter-reset")}} + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a class="new" href="/de/docs/Web/CSS/CSS_Lists_and_Counters/CSS_Zähler_verwenden" title="CSS Counters">CSS Zähler</a></li> + <li>{{Cssxref("counter-increment")}}</li> + <li>{{cssxref("@counter-style")}}</li> +</ul> diff --git a/files/de/web/css/css_animations/css_animationen_nutzen/index.html b/files/de/web/css/css_animations/css_animationen_nutzen/index.html new file mode 100644 index 0000000000..ea0dc4e7de --- /dev/null +++ b/files/de/web/css/css_animations/css_animationen_nutzen/index.html @@ -0,0 +1,365 @@ +--- +title: CSS Animationen nutzen +slug: Web/CSS/CSS_Animations/CSS_Animationen_nutzen +translation_of: Web/CSS/CSS_Animations/Using_CSS_animations +--- +<p>{{SeeCompatTable}}{{CSSRef}}</p> + +<p><span class="seoSummary"><strong>CSS Animationen</strong> ermöglichen animierte Übergänge von einem CSS Style-Konfiguration zur nächsten. Die Animationen bestehen aus zwei Komponenten: Einem Style, der die Animation beschreibt, sowie einer Menge von Keyframes, die Start, Ende und mögliche Zwischenpositionen der Animation festlegt.</span></p> + +<p>Es gibt drei zentrale Vorteile von CSS-Animationen gegenüber traditionellen skriptgetriebenen Animationstechniken:</p> + +<ol> + <li>Sie sind einfach zu nutzen für simple Animationen; man kann sie ohne Javascript-Kenntnisse erstellen. </li> + <li>Die Animationen laufen performant, sogar unter mäßiger Systemauslastung. Im Gegensatz dazu fallen selbst simple Javascript-Animationen durch schlechte Performance auf. Die Engine kann einzelne Frames überspringen und kennt weitere Techniken, um die Ausführung so sauber wie möglich zu gestalten. </li> + <li>Da der Browser die Animation kontrolliert, kann er selbstständig die Performance optimieren, zum Beispiel durch das Drosseln der Freqenz von Animationen in aktuell nicht sichtbaren Browser-Tabs.</li> +</ol> + +<h2 id="Konfigurieren_der_Animation">Konfigurieren der Animation</h2> + +<p>Um eine CSS-Animation zu erstellen, fügt man dem zu animierenden Element die {{ cssxref("animation") }}-Eigenschaft oder seine Sub-Eigenschaften zu. So lassen sich Timing und Dauer der Animation sowie weitere Details des Animationsablaufes bestimmen. Man legt damit <strong>nicht </strong>die eigentliche Darstellung der Animation fest, die mittels {{ cssxref("@keyframes") }} definiert wird. Siehe {{ anch("Definieren der Animationssequenz mittels Keyframes") }} weiter unten.</p> + +<p>Die Sub-Eigenschaften der {{ cssxref("animation") }}-Eigenschaft sind:</p> + +<dl> + <dt>{{ cssxref("animation-name") }}</dt> + <dd>Spezifiziert den Namen der {{ cssxref("@keyframes") }}-at-Regel, welche die einzelnen Keyframes beschreibt.</dd> + <dt>{{ cssxref("animation-duration") }}</dt> + <dd>Legt die Dauer der Animation für einen kompletten Durchgang fest.</dd> + <dt>{{ cssxref("animation-timing-function") }}</dt> + <dd>Konfiguriert das Timing der Animation. Konkret werden die Übergänge zwischen den einzelnen Keyframes mittels Beschleunigungskurven festgelegt.</dd> + <dt>{{ cssxref("animation-delay") }}</dt> + <dd>Setzt den Abstand zwischen dem Zeitpunkt, an dem die Animation vollständig geladen ist und dem Start der Animationssequenz.</dd> + <dt>{{ cssxref("animation-iteration-count") }}</dt> + <dd>Konfiguriert wie oft die Animation wiederholt wird; mittels <code>infinite</code> wird die Animation unendlich wiederholt.</dd> + <dt>{{ cssxref("animation-direction") }}</dt> + <dd>Legt fest, ob die Animation nach jedem Durchgang die Abspielrichtung wechselt oder zum Startpunkt zurückspringt und sich wiederholt. </dd> + <dt>{{ cssxref("animation-fill-mode") }}</dt> + <dd>Legt fest, welche Styles vor und nach dem Ausführen der Animation auf das animierte Element angewendet werden.</dd> + <dt>{{ cssxref("animation-play-state") }}</dt> + <dd>Ermöglicht das Pausieren und Wiederaufnehmen einer Animationssequenz.</dd> + <dt> + <h2 id="Definieren_der_Animationssequenz_mittels_Keyframes">Definieren der Animationssequenz mittels Keyframes</h2> + </dt> +</dl> + +<p>Nachdem Sie den zeitlichen Ablauf der Animation festgelegt haben, müssen Sie die Erscheinung der Animation festlegen. Sie erreichen dies, indem Sie zwei oder mehr Keyframes mit Hilfe der {{ cssxref("@keyframes") }} at-Regel erstellen. Jeder Keyframe beschreibt den Darstellungszustand des animierten Elements zum gegebenen Zeitpunkt der Animationssequenz.</p> + +<p>Da der zeitliche Ablauf der Animation im CSS-Style, welcher die Animation konfiguriert, festgelegt ist, verwenden Keyframes {{ cssxref("percentage") }} um den Zeitpunkt festzulegen, wann die Animationssequenz beginnen soll. 0% steht für den ersten Moment der Animationssequenz, wohingegen 100% den letzten Zustand der Animation beschreibt. Weil diese beiden Keyframes so wichtg sind gibt es zwei Wörter für sie: <code>from</code> und <code>to</code>. Sie sind beide optional. Falls <code>from/0%</code> oder <code>to/100%</code> nicht definiert sind , startet oder stoppt der Browser die Animation gemäß der berechneten Werte aller Attribute.</p> + +<p>Sie können optional zusätzliche Keyframes einfügen, die jeweils Zwischenschritte auf dem Weg vom Start- zum Endpunkt der Animation beschreiben.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<div class="note"><strong>Hinweis:</strong> Einige ältere Browser (vor 2017) benötigen unter Umständen Präfixe; die Live-Beispiele, welche durch einen Klick im Browser betrachtet werden können, beinhalten die <code>-webkit</code> Präfix-Syntax.</div> + +<h3 id="Einen_Text_übers_Fenster_gleiten_lassen.">Einen Text übers Fenster gleiten lassen.</h3> + +<p>Dieses einfache Beispiel an einem {{ HTMLElement("p") }}-Element lässt einen Text von rechts über das Browserfenster gleiten.</p> + +<p>Beachte, dass solche Animationen dafür sorgen können, dass die Seite breiter als das Browser-Fenster wird. Um dieses Problem zu umgehen, wird das zu animierende Element in einen Container gepackt. Der Container erhält anschließend die {{cssxref("overflow")}}<code>:hidden</code> Eigenschaft.</p> + +<pre class="brush: css">p { + animation-duration: 3s; + animation-name: slidein; +} + +@keyframes slidein { + from { + margin-left: 100%; + width: 300%; + } + + to { + margin-left: 0%; + width: 100%; + } +} +</pre> + +<p>In diesem Beispiel, bestimmt der Style für das {{ HTMLElement("p") }}-Element, dass durch den Einsatz von {{ cssxref("animation-duration") }} die Animation von Anfang bis Ende in drei Sekunden ausgeführt werden soll. Der Name der {{ cssxref("@keyframes") }} at-Regel, welche die Keyframes der Animation beschreibt, lautet "slidein".</p> + +<p>Falls Sie weitere angepasste Styles auf das {{ HTMLElement("p") }}-Element anwenden wollen, die keine CSS-Animationen unterstützen, würden diese hier ebenfalls eingefügt werden. In diesem Falle wollen wir aber außer der Animation keine weiteren Styles festlegen.</p> + +<p>Die Keyframes werden anhand der {{ cssxref("@keyframes") }} at-Regel festgelegt. In diesem Beispiel haben wir nur zwei Keyframes. Der erste tritt bei 0% (aufgrund des Aliases <code>from</code>) ein. Hier bestimmen wir einen linken Außenabstand des Elements von 100% (das heißt, am rechten äußeren Rand des umschließenden Elements). Darüberhinaus wird die Breite des Elements auf 300% gesetzt (oder drei Mal der Breite des umgebenden Elements). Dadurch wird der Header im ersten Frame der Animation außerhalb des rechten Randes des Browser-Fensters gezeichnet.</p> + +<p>Der zweite (und letzte) Keyframe tritt bei 100% ein (aufgrund des Aliases <code>to</code>). Der linke Außenabstand wird auf 0% gesetzt und die Breite des Elements auf 100% aktualisiert. Dadurch beendet der Header seine Animation mit einer Ausrichtung am linken Rand des Inhaltsbereichs.</p> + +<pre class="brush: html"><p>The Caterpillar and Alice looked at each other for some time in silence: +at last the Caterpillar took the hookah out of its mouth, and addressed +her in a languid, sleepy voice.</p> +</pre> + +<div class="blockIndicator note"> +<p><strong>Hinweis</strong>: Laden Sie die Seite neu, um die Animation zu sehen. Oder klicken Sie auf den CodePen-Knopf, um die Animation innerhalb der CodePen-Umgebung zu betrachten.</p> +</div> + +<p>{{EmbedLiveSample("Making_text_slide_across_the_browser_window","100%","250")}}</p> + +<h3 id="Hinzufügen_eines_weiteren_Keyframes">Hinzufügen eines weiteren Keyframes</h3> + +<p>Lassen Sie uns eine weitere Keyframe zur Animation des vorigen Beispiels hinzufügen. Sagen wir, wir wollen zunächst für eine Weile die Schriftgröße des Headers erhöhen, während er sich von rechts nach links bewegt. Am Ende soll sie wieder auf ihre ursprüngliche Größe schrumpfen. Das ist so einfach wie das Hinzufügen dieser Keyframe:</p> + +<pre class="brush: css">75% { + font-size: 300%; + margin-left: 25%; + width: 150%; +} +</pre> + +<p>Der vollständige Code sieht nun so aus:</p> + +<pre class="brush: css">p { + animation-duration: 3s; + animation-name: slidein; +} + +@keyframes slidein { + from { + margin-left: 100%; + width: 300%; + } + + 75% { + font-size: 300%; + margin-left: 25%; + width: 150%; + } + + to { + margin-left: 0%; + width: 100%; + } +}</pre> + +<pre class="brush: html"><p>The Caterpillar and Alice looked at each other for some time in silence: +at last the Caterpillar took the hookah out of its mouth, and addressed +her in a languid, sleepy voice.</p></pre> + +<p>Dies teilt dem Browser mit, dass nach 75% der Animationssequenz der linke Außenabstand des Headers bei 25% und die Breite bei 150% liegen sollte.</p> + +<div class="blockIndicator note"> +<p><strong>Hinweis</strong>: Laden Sie die Seite neu, um die Animation zu sehen. Oder klicken Sie auf den CodePen-Knopf, um die Animation innerhalb der CodePen-Umgebung zu betrachten.</p> +</div> + +<p>{{EmbedLiveSample("Adding_another_keyframe","100%","250")}}</p> + +<h3 id="Lass_es_sich_wiederholen">Lass es sich wiederholen</h3> + +<p>Damit die Animation sich wiederholt, nutzen Sie die {{ cssxref("animation-iteration-count") }}-Eigenschaft, um festzulegen, wie oft sich die Animation wiederholen soll. In diesem Beispiel setzen wir sie auf <code>infinite</code>, damit sich die Animation unendlich oft wiederholt:</p> + +<pre class="brush: css">p { + animation-duration: 3s; + animation-name: slidein; + animation-iteration-count: infinite; +} +</pre> + +<p>Nach Hinzufügen zum bisherigen Code:</p> + +<pre class="brush: css">@keyframes slidein { + from { + margin-left: 100%; + width: 300%; + } + + to { + margin-left: 0%; + width: 100%; + } +}</pre> + +<pre class="brush: html"><p>The Caterpillar and Alice looked at each other for some time in silence: +at last the Caterpillar took the hookah out of its mouth, and addressed +her in a languid, sleepy voice.</p></pre> + +<p>{{EmbedLiveSample("Making_it_repeat","100%","250")}}</p> + +<h3 id="Lassen_Sie_es_sich_vor-_und_zurück_bewegen">Lassen Sie es sich vor- und zurück bewegen</h3> + +<p>Die vorige Anpassung sorgte dafür, dass sich die Animation wiederholte. Aber es ist sehr eigenartig, dass die Animation jedes Mal zum Anfang zurückspringt, wenn sie sich wiederholt. Was wir wirklich wollen ist ein Vor- und Zurückbewegen über den Bildschirm. Dazu muss die {{ cssxref("animation-direction") }}-Eigenschaft auf <code>alternate</code> gesetzt werden:</p> + +<pre class="brush: css">p { + animation-duration: 3s; + animation-name: slidein; + animation-iteration-count: infinite; + animation-direction: alternate; +} +</pre> + +<p>Damit sieht der übrige Code folgendermaßen aus:</p> + +<pre class="brush: css">@keyframes slidein { + from { + margin-left: 100%; + width: 300%; + } + + to { + margin-left: 0%; + width: 100%; + } +}</pre> + +<pre class="brush: html"><p>The Caterpillar and Alice looked at each other for some time in silence: +at last the Caterpillar took the hookah out of its mouth, and addressed +her in a languid, sleepy voice.</p></pre> + +<p>{{EmbedLiveSample("Making_it_move_back_and_forth","100%","250")}}</p> + +<h3 id="Benutzen_der_Animation_Kurzversion">Benutzen der Animation Kurzversion</h3> + +<p>Die {{cssxref("animation")}}-Kurzversion ist hilfreich, um Platz zu sparen. Zum Beispiel haben wir diese Regel während dieses Artikels genutzt:</p> + +<pre class="brush: css">p { + animation-duration: 3s; + animation-name: slidein; + animation-iteration-count: infinite; + animation-direction: alternate; +} +</pre> + +<p>Sie könnte durch Folgendes ersetzt werden:</p> + +<pre class="brush: css">p { + animation: 3s infinite alternate slidein; +} +</pre> + +<div class="note"> +<p><strong>Hinweis</strong>: Sie können weitere Beispiele auf der Referenzseite von {{cssxref("animation")}} finden.</p> +</div> + +<h3 id="Setzen_mehrere_Animationseigenschaftswerte">Setzen mehrere Animationseigenschaftswerte</h3> + +<p>Die Langversion der CSS-Animation akzeptiert mehrere durch Komma getrennte Werte — eine Eigenschaft, die genutzt werden kann, um mehrere Animationen in einer einzigen Regel anzuwenden. Daneben lassen sich für die verschiedenen Animationen die Dauer, Anzahl der Wiederholungen usw. einzeln festlegen. Sehen Sie sich die folgenden kurzen Beispiele an, die die verschiedenen Kombinationen erklären:</p> + +<p>In diesem ersten Beispiel wurden drei Animations-Namen gesetzt, aber nur eine Dauer und Anzahl der Wiederholungen gesetzt. In diesem Falle erhalten alle drei Animationen die gleiche Dauer und Anzahl der Wiederholungen:</p> + +<pre class="brush: css">animation-name: fadeInOut, moveLeft300px, bounce; +animation-duration: 3s; +animation-iteration-count: 1;</pre> + +<p>In diesem zweiten Beispiel wurden drei Werte für drei Eigenschaften gesetzt. In diesem Falle entsprechen die Werte an der selben Position jeder Eigenschaft der jeweiligen Animation. So hat die <code>fadeInOut</code> Animation beispielsweise eine Dauer von 2.5s und wiederholt sich zwei Mal usw.</p> + +<pre class="brush: css">animation-name: fadeInOut, moveLeft300px, bounce; +animation-duration: 2.5s, 5s, 1s; +animation-iteration-count: 2, 1, 5;</pre> + +<p>In diesem dritten Beispiel wurden drei Animationen festgelegt, aber nur zwei Dauern und Anzahl der Wiederholungen. In Fällen wie diesen, in denen es nicht genug Werte gibt, um jeder Animation ihren eigenen Wert zuzuweisen, wiederholt sich der Wertze-Zyklus von Anfang bis Ende. Beispielsweise erhält fadeInOut eine Dauer von 2.5s und moveLeft300px eine von 5s. Damit sind wir am Ende der verfügbaren Werte für die Dauer angelangt, also fangen wir von vorne an — bounce bekommt daher eine dauer von 2.5s zugewiesen. Die Anzahl der Wiederholungen (und alle weiteren Eigenschaften, die Sie so festlegen), werden auf die selbe Weise zugewiesen.</p> + +<pre class="brush: css">animation-name: fadeInOut, moveLeft300px, bounce; +animation-duration: 2.5s, 5s; +animation-iteration-count: 2, 1;</pre> + +<h3 id="Benutzen_von_Animations-Ereignissen">Benutzen von Animations-Ereignissen</h3> + +<p>Sie können zusätzliche Kontrolle über Animationen — sowie mehr nützliche Informationen — erhalten, indem sie Animations-Ereignisse nutzen. Diese Ereignisse werden durch das {{domxref("AnimationEvent")}}-Objekt repräsentiert. Es kann genutzt werden, um den Start, das Ende oder den Beginn einer Wiederholung zu erkennen. Jedes Ereignis beinhaltet die Zeit, an der es auftrat sowie den Namen der Animation, welche es getriggert hat.</p> + +<p>Wir passen das Beispiel mit dem gleitenden Text an, um einige Informationen über jedes Animations-Ereignis bei Eintritt auszugeben, um zu sehen, wie sie funktionieren.</p> + +<h4 id="Hinzufügen_des_CSS">Hinzufügen des CSS</h4> + +<p>Wir beginnen mit dem Schreiben des CSS für die Animation. Diese Animation wird drei Sekunden dauern, “slidein” genannt werden, sich drei Mal wiederholen, und dabei jedes Mal die Richtung ändern. In den {{cssxref("@keyframes")}} wird die Breite under linke Außenabstand manipuliert, um das Element über den Bildschirm gleiten zu lassen.</p> + +<pre class="brush: css">.slidein { + animation-duration: 3s; + animation-name: slidein; + animation-iteration-count: 3; + animation-direction: alternate; +} + +@keyframes slidein { + from { + margin-left:100%; + width:300% + } + + to { + margin-left:0%; + width:100%; + } +}</pre> + +<h4 id="Hinzufügen_der_Animations-Ereignis-Listener">Hinzufügen der Animations-Ereignis-Listener</h4> + +<p>Wir verwenden JavaScript-Code, um auf alle drei möglichen Animationsereignisse zu aluschen. Der folgende Code konfiguriert unsere Event Listener. Wir rufen ihn auf, wenn das Dokument das erste Mal geladen wurde, um die Dinge einzurichten.</p> + +<pre class="brush: js">var element = document.getElementById("watchme"); +element.addEventListener("animationstart", listener, false); +element.addEventListener("animationend", listener, false); +element.addEventListener("animationiteration", listener, false); + +element.className = "slidein"; +</pre> + +<p>Dies ist ziemlich üblicher Code; Sie können mehr über die Details der Funktionsweise in der Dokumentation zu {{domxref("eventTarget.addEventListener()")}} erfahren. Als letztes setzt dieser Code die <code>class</code> des Elements, welches wir animieren wollen, auf “slidein”, um die Animation damit zu starten.</p> + +<p>Warum? Weil das <code>animationstart</code> Ereignis mit dem Beginn der Animation gestartet wird. In unserem Falle vor Ausführung des Codes. Daher starten wir die Animation selber durch das Setzen von class auf dem Element zu dem Werte, welches die Animation steuert.</p> + +<h4 id="Empfangen_von_Ereignissen">Empfangen von Ereignissen</h4> + +<p>Die Ereignisse werden an die untenstehende <code>listener()</code> Funktion durchgereicht.</p> + +<pre class="brush: js">function listener(event) { + var l = document.createElement("li"); + switch(event.type) { + case "animationstart": + l.innerHTML = "Started: elapsed time is " + event.elapsedTime; + break; + case "animationend": + l.innerHTML = "Ended: elapsed time is " + event.elapsedTime; + break; + case "animationiteration": + l.innerHTML = "New loop started at time " + event.elapsedTime; + break; + } + document.getElementById("output").appendChild(l); +} +</pre> + +<p>Auch dieser Code ist sehr einfach. Es schaut auf den {{domxref("event.type")}}, um zu bestimmen, welche Art von Animation eingetreten ist. Danach fügt es die entsprechende Notiz zur {{HTMLElement("ul")}} (ungeordneten Liste) hinzu, welche wir benutzen, um die Ereignisse mitzuschneiden.</p> + +<p>Schlussendlich sieht die Ausgabe in etwa folgendermaßen aus:</p> + +<ul> + <li>Started: elapsed time is 0</li> + <li>New loop started at time 3.01200008392334</li> + <li>New loop started at time 6.00600004196167</li> + <li>Ended: elapsed time is 9.234000205993652</li> +</ul> + +<p>Beachten Sie, dass die Zeiten ziemlich nah, aber nicht exakt denen entsprechen, die wir in der Animation konfiguriert haben. Beachten Sie außerdem, dass bei der letzten Animation, das <code>animationiteration</code> Ereignis nicht gesetzt wurde. Stattdessen wurde ein <code>animationend</code> Ereignis gesendet.</p> + +<h4 id="Das_HTML">Das HTML</h4> + +<p>Der Vollständigkeit halber ist hier das HTML, welches den Seiteninhalt darstellt und die Liste beinhaltet, welche vom Skript mit Informationen über empfangene Ereignisse gefüllt wird:</p> + +<pre class="brush: html"><h1 id="watchme">Watch me move</h1> +<p> + This example shows how to use CSS animations to make <code>H1</code> + elements move across the page. +</p> +<p> + In addition, we output some text each time an animation event fires, + so you can see them in action. +</p> +<ul id="output"> +</ul> +</pre> + +<p>Hier gibt es eine Live-Ausgabe:</p> + +<div class="blockIndicator note"> +<p><strong>Hinweis</strong>: Laden Sie die Seite neu, um die Animation zu sehen. Oder klicken Sie auf den CodePen-Knopf, um die Animation innerhalb der CodePen-Umgebung zu betrachten.</p> +</div> + +<p>{{EmbedLiveSample('Using_animation_events', '600', '300')}}</p> + +<h2 id="Zum_Weiterlesen">Zum Weiterlesen</h2> + +<ul> + <li>{{domxref("AnimationEvent", "AnimationEvent")}}</li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/CSS/CSS_animations/Detecting_CSS_animation_support" title="en/CSS/CSS animations/Detecting CSS animation support">Detecting CSS animation support</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">Using CSS transitions</a></li> +</ul> diff --git a/files/de/web/css/css_animations/index.html b/files/de/web/css/css_animations/index.html new file mode 100644 index 0000000000..35df3692b4 --- /dev/null +++ b/files/de/web/css/css_animations/index.html @@ -0,0 +1,79 @@ +--- +title: CSS Animations +slug: Web/CSS/CSS_Animations +tags: + - CSS + - CSS Animations + - Experimental + - Overview + - Reference +translation_of: Web/CSS/CSS_Animations +--- +<p>{{CSSRef}}{{SeeCompatTable}}</p> + +<p><strong>CSS Animations</strong> is a module of CSS that defines how to animate the values of CSS properties over time, using keyframes. The behavior of these keyframe animations can be controlled by specifying their duration, their number of repetitions, and how they repeat.</p> + +<h2 id="Reference">Reference</h2> + +<h3 id="CSS_Properties">CSS Properties</h3> + +<div class="index"> +<ul> + <li>{{cssxref("animation")}}</li> + <li>{{cssxref("animation")}}</li> + <li>{{cssxref("animation-delay")}}</li> + <li>{{cssxref("animation-direction")}}</li> + <li>{{cssxref("animation-duration")}}</li> + <li>{{cssxref("animation-fill-mode")}}</li> + <li>{{cssxref("animation-iteration-count")}}</li> + <li>{{cssxref("animation-name")}}</li> + <li>{{cssxref("animation-play-state")}}</li> + <li>{{cssxref("animation-timing-function")}}</li> +</ul> +</div> + +<h3 id="CSS_At-rules">CSS At-rules</h3> + +<div class="index"> +<ul> + <li>{{cssxref("@keyframes")}}</li> +</ul> +</div> + +<h2 id="Guides">Guides</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/CSS_Animations/Detecting_CSS_animation_support">Detecting CSS animation support</a></dt> + <dd>Describes a technique for detecting if the browser supports CSS animations.</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations">Using CSS animations</a></dt> + <dd>Step-by-step tutorial about how to create animations using CSS, this article describes each relevant CSS property and at-rule and explains how they interact.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Animations') }}</td> + <td>{{ Spec2('CSS3 Animations') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +{{Compat("css.properties.animation")}} + +<h2 id="See_also">See also</h2> + +<ul> + <li>Related to CSS Animations, <a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS Transitions</a> can trigger animations on user actions.</li> +</ul> diff --git a/files/de/web/css/css_background_and_borders/border-image_generator/index.html b/files/de/web/css/css_background_and_borders/border-image_generator/index.html new file mode 100644 index 0000000000..ff2740480a --- /dev/null +++ b/files/de/web/css/css_background_and_borders/border-image_generator/index.html @@ -0,0 +1,2626 @@ +--- +title: Border-image Generator +slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator +tags: + - CSS + - Werkzeuge +translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator +--- +<p>Dieses Werkzeug kann dazu verwendet werden, CSS3 {{cssxref("border-image")}} Werte zu erzeugen.</p> + +<div style="display: none;"> +<h2 id="Border_Image_Generator" name="Border_Image_Generator">Border Image Generator</h2> + +<h3 id="HTML_Content">HTML Content</h3> + +<pre class="brush: html"> <div id="container"> + + <div id="gallery"> + <div id="image-gallery"> + <img class="image" src="https://mdn.mozillademos.org/files/6007/border-image-1.png" data-stateID="border1"/> + <img class="image" src="https://mdn.mozillademos.org/files/6009/border-image-2.png" data-stateID="border2"/> + <img class="image" src="https://mdn.mozillademos.org/files/6011/border-image-3.png" data-stateID="border3"/> + <img class="image" src="https://mdn.mozillademos.org/files/6013/border-image-4.png" data-stateID="border4"/> + <img class="image" src="https://mdn.mozillademos.org/files/6015/border-image-5.png" data-stateID="border5"/> + <img class="image" src="https://mdn.mozillademos.org/files/6017/border-image-6.svg" data-stateID="border6"/> + </div> + </div> + + <div id="load-actions" class="group section"> + <div id="toggle-gallery" data-action="hide"> </div> + <div id="load-image" class="button"> Upload image </div> + <input id="remote-url" type="text" placeholder="Load an image from URL"/> + <div id="load-remote" class="button"> </div> + </div> + + <div id="general-controls" class="group section"> + <div class="name"> Control Box </div> + <div class="separator"></div> + <div class="property"> + <div class="name">scale</div> + <div class="ui-input-slider" data-topic="scale" + data-unit="%" data-max="300" data-sensivity="10"> + </div> + </div> + <div class="separator"></div> + <div class="property"> + <div class="name">draggable</div> + <div class="ui-checkbox" data-topic='drag-subject'></div> + </div> + <div class="property right"> + <div class="name">section height</div> + <div class="ui-input-slider" data-topic="preview-area-height" + data-min="400" data-max="1000"> + </div> + </div> + </div> + + <div id="preview_section" class="group section"> + <div id="subject"> + <div class="guideline" data-axis="Y" data-topic="slice-top"></div> + <div class="guideline" data-axis="X" data-topic="slice-right"></div> + <div class="guideline" data-axis="Y" data-topic="slice-bottom"></div> + <div class="guideline" data-axis="X" data-topic="slice-left"></div> + </div> + <div id="preview"> </div> + </div> + + <!-- controls --> + <div id="controls" class="group section"> + + <!-- border-image-slice --> + <div id="border-slice-control" class="category"> + <div class="title"> border-image-slice </div> + <div class="property"> + <div class="name">fill</div> + <div class="ui-checkbox" data-topic='slice-fill'></div> + </div> + </div> + + <!-- border-image-width --> + <div id="border-width-control" class="category"> + <div class="title"> border-image-width </div> + </div> + + <!-- border-image-outset --> + <div id="border-outset-control" class="category"> + <div class="title"> border-image-outset </div> + </div> + + <!-- other-settings --> + <div id="aditional-properties" class="category"> + <div class="title"> aditional-properties </div> + <div class="property"> + <div class="name"> repeat-x </div> + <div class="ui-dropdown border-repeat" data-topic="image-repeat-X" data-selected="2"> + <div data-value="0">repeat</div> + <div data-value="0">stretch</div> + <div data-value="0">round</div> + </div> + </div> + <div class="property"> + <div class="name"> repeat-y </div> + <div class="ui-dropdown border-repeat" data-topic="image-repeat-Y" data-selected="2"> + <div data-value="1">repeat</div> + <div data-value="1">stretch</div> + <div data-value="1">round</div> + </div> + </div> + <div class="property"> + <div class="ui-input-slider" data-topic="font-size" data-info="em size" + data-unit="px" data-value="12" data-sensivity="3"> + </div> + </div> + + <div class="property"> + <div class="ui-input-slider" data-topic="preview-width" data-info="width" + data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"></div> + </div> + <div class="property"> + <div class="ui-input-slider" data-topic="preview-height" data-info="height" + data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"> + </div> + </div> + </div> + + + <div id="output" class="category"> + <div class="title"> CSS Code </div> + <div class="css-property"> + <span class="name"> border-image-slice: </span> + <span id="out-border-slice" class="value"> </span> + </div> + <div class="css-property"> + <span class="name"> border-image-width: </span> + <span id="out-border-width" class="value"> </span> + </div> + <div class="css-property"> + <span class="name"> border-image-outset: </span> + <span id="out-border-outset" class="value"> </span> + </div> + <div class="css-property"> + <span class="name"> border-image-repeat: </span> + <span id="out-border-repeat" class="value"> </span> + </div> + <div class="css-property"> + <span class="name"> border-image-source: </span> + <span id="out-border-source" class="value"> </span> + </div> + </div> + + </div> + </div></pre> + +<h3 id="CSS_Content">CSS Content</h3> + +<pre class="brush: css">/* GRID OF TWELVE + * ========================================================================== */ + +.span_12 { + width: 100%; +} + +.span_11 { + width: 91.46%; +} + +.span_10 { + width: 83%; +} + +.span_9 { + width: 74.54%; +} + +.span_8 { + width: 66.08%; +} + +.span_7 { + width: 57.62%; +} + +.span_6 { + width: 49.16%; +} + +.span_5 { + width: 40.7%; +} + +.span_4 { + width: 32.24%; +} + +.span_3 { + width: 23.78%; +} + +.span_2 { + width: 15.32%; +} + +.span_1 { + width: 6.86%; +} + + +/* SECTIONS + * ========================================================================== */ + +.section { + clear: both; + padding: 0px; + margin: 0px; +} + +/* GROUPING + * ========================================================================== */ + + +.group:before, .group:after { + content: ""; + display: table; +} + +.group:after { + clear:both; +} + +.group { + zoom: 1; /* For IE 6/7 (trigger hasLayout) */ +} + +/* GRID COLUMN SETUP + * ========================================================================== */ + +.col { + display: block; + float:left; + margin: 1% 0 1% 1.6%; +} + +.col:first-child { + margin-left: 0; +} /* all browsers except IE6 and lower */ + + + +/* + * UI Component + */ + +.ui-input-slider { + height: 20px; + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + -moz-user-select: none; + user-select: none; +} + +.ui-input-slider * { + float: left; + height: 100%; + line-height: 100%; +} + +/* Input Slider */ + +.ui-input-slider > input { + margin: 0; + padding: 0; + width: 50px; + text-align: center; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +.ui-input-slider-info { + width: 90px; + padding: 0px 10px 0px 0px; + text-align: right; + text-transform: lowercase; +} + +.ui-input-slider-left, .ui-input-slider-right { + width: 16px; + cursor: pointer; + background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat; +} + +.ui-input-slider-right { + background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat; +} + +.ui-input-slider-name { + width: 90px; + padding: 0 10px 0 0; + text-align: right; + text-transform: lowercase; +} + +.ui-input-slider-btn-set { + width: 25px; + background-color: #2C9FC9; + border-radius: 5px; + color: #FFF; + font-weight: bold; + line-height: 14px; + text-align: center; +} + +.ui-input-slider-btn-set:hover { + background-color: #379B4A; + cursor: pointer; +} + +/*************************************************************************************/ +/*************************************************************************************/ + +/* + * UI DropDown + */ + +/* Dropdown */ + +.ui-dropdown { + height: 2em; + width: 120px; + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + font-size: 12px; + + background-image: url("https://mdn.mozillademos.org/files/6037/drop_arrow_icon.png"); + background-position: right center; + background-repeat: no-repeat; + background-color: #359740; + + position: relative; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.ui-dropdown:hover { + cursor: pointer; + background-color: #208B20; +} + +/* Dropdown Select Button */ + +.ui-dropdown-select { + height: inherit; + padding: 0 0.75em; + color: #FFF; + line-height: 2em; +} + +/* Dropdown List */ + +.ui-dropdown-list { + width: 100%; + height: 150px; + max-height: 150px; + margin: 0; + padding: 0 0.3em; + + border: 3px solid #3490D2; + border-color: #208B20; + background: #666; + background-color: #EEF1F5; + color: #000; + + position: absolute; + top: 2em; + left: 0; + z-index: 100; + + overflow: hidden; + transition: all 0.3s; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +.ui-dropdown-list:hover { + overflow: auto; +} + +.ui-dropdown-list[data-hidden='true'] { + height: 0 !important; + opacity: 0; + visibility: hidden; +} + +.ui-dropdown[data-position='left'] .ui-dropdown-list { + left: -100%; + top: 0; +} + +.ui-dropdown[data-position='right'] .ui-dropdown-list { + left: 100%; + top: 0; +} + +.ui-dropdown-list > div { + width: 100%; + height: 1.6em; + margin: 0.3em 0; + padding: 0.3em; + line-height: 1em; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +.ui-dropdown-list > div:hover { + background: #3490D2; + color:#FFF; + border-radius: 2px; + cursor: pointer; +} + + +/*************************************************************************************/ +/*************************************************************************************/ + +/* + * UI Button + */ + +/* Checkbox */ + +.ui-checkbox { + text-align: center; + font-size: 16px; + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + line-height: 1.5em; + color: #FFF; + + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.ui-checkbox > input { + display: none; +} + +.ui-checkbox > label { + font-size: 12px; + padding: 0.333em 1.666em 0.5em; + height: 1em; + line-height: 1em; + + background-color: #888; + background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png"); + background-position: center center; + background-repeat: no-repeat; + + color: #FFF; + border-radius: 2px; + font-weight: bold; + float: left; +} + +.ui-checkbox .text { + padding-left: 34px; + background-position: center left 10px; +} + +.ui-checkbox .left { + padding-right: 34px; + padding-left: 1.666em; + background-position: center right 10px; +} + +.ui-checkbox > label:hover { + cursor: pointer; +} + +.ui-checkbox > input:checked + label { + background-image: url("https://mdn.mozillademos.org/files/5681/checked.png"); + background-color: #379B4A; +} + +/*************************************************************************************/ +/*************************************************************************************/ + +/* + * BORDER IMAGE GENERATOR TOOL + */ + +body { + width: 100%; + margin: 0 auto; + padding: 0 0 20px 0; + + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + + /*background: url("https://mdn.mozillademos.org/files/6025/grain.png");*/ + border: 1px solid #EEE; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; +} + +body[data-move='X'] { + cursor: w-resize !important; +} + +body[data-move='Y'] { + cursor: s-resize !important; +} + +#container { + width: 100%; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +[data-draggable='true']:hover { + cursor: move; +} + +[data-draggable='true']:hover > * { + cursor: default; +} + + + +/******************************************************************************/ +/******************************************************************************/ + +/* + * Border Image Picker + */ + +#gallery { + box-shadow: 0 0 3px 0 #BABABA; +} + +#image-gallery { + width: 600px; + height: 100px; + margin: 0 auto; + transition: margin 0.4s; +} + +#image-gallery .image { + height: 80px; + float: left; + margin: 10px; + opacity: 0.5; + background-color: #FFF; + box-shadow: 0px 0px 3px 1px #BABABA; +} + +#image-gallery .image[selected="true"] { + box-shadow: 0px 0px 3px 1px #3BBA52; + opacity: 1; +} + +#image-gallery .image:hover { + cursor: pointer; + box-shadow: 0px 0px 3px 1px #30ACE5; + opacity: 1; +} + +#image-gallery[data-collapsed='true'] { + margin-top: -100px; +} + +/* Load Menu */ + +#load-actions { + margin: 10px 0; +} + +#toggle-gallery { + width: 30px; + height: 25px; + margin: 10px; + color: #FFF; + + background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png'); + background-repeat: no-repeat; + background-position: top 4px center; + background-color: #888888 !important; + + border-radius: 2px; + float: left; +} + +#toggle-gallery:hover { + cursor: pointer; +} + +#toggle-gallery[data-action='show'] { + background-image: url('https://mdn.mozillademos.org/files/6001/arrow-down-white.png'); + background-color: #888888 !important; +} + +#toggle-gallery[data-action='hide'] { + background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png'); +} + +.button { + width: 100px; + height: 25px; + margin: 10px; + color: #FFF; + text-align: center; + font-size: 12px; + line-height: 25px; + background-color: #379B4A; + border-radius: 2px; + float: left; +} + +.button:hover { + cursor: pointer; + background-color: #3380C4; +} + +#load-image { + float: left; +} + +#load-remote { + width: 30px; + background-image: url('https://mdn.mozillademos.org/files/6003/arrow-right-white.png'); + background-repeat: no-repeat; + background-position: center center; +} + +#remote-url { + width: 200px; + height: 23px; + margin: 10px; + padding: 0 5px; + border: 1px solid #379B4A; + border-radius: 2px; + float: left; + + transition: width 0.5s; +} + +#remote-url:focus { + box-shadow: 0px 0px 3px -1px #379B4A; /*#68ACE8; */ + border-color: rgba(55, 155, 74, 0.5); + width: 450px; +} + +/* + * Visible Area + */ + +#preview_section { + position: relative; + min-height: 400px; +} + +/* Image Control */ + +#subject { + width: 300px; + height: 300px; + background-repeat: no-repeat; + background-size: 100%; + background-color: #FFF; + border: 1px solid #CCC; + + position: absolute; + z-index: 10; + top: 15%; + left: 10%; + + box-shadow: 0 0 3px 0 #BABABA; + transition-property: width, height; + transition-duration: 0.1s; +} + +#subject .guideline { + background-color: rgba(255, 255, 255, 0.7); + border: 1px solid rgba(0, 0, 0, 0.3); + position: absolute; +} + +#subject .guideline:hover { + background-color: #F00; +} + +#subject .guideline[data-active] { + background-color: #F00; + z-index: 10; +} + +#subject .guideline[data-axis='X'] { + width: 1px; + height: 100%; + top: -1px; +} + +#subject .guideline[data-axis='Y'] { + width: 100%; + height: 1px; + left: -1px; +} + +#subject .guideline[data-axis='X']:hover { + cursor: w-resize; +} + +#subject .guideline[data-axis='Y']:hover { + cursor: s-resize; +} + + +#subject .relative { + position: relative; + font-size: 12px; +} + +#subject .tooltip, #subject .tooltip2 { + width: 40px; + height: 20px; + line-height: 20px; + font-size: 12px; + text-align: center; + + position: absolute; + opacity: 0.5; + transition: opacity 0.25s; +} + +#subject .tooltip { + background: #EEE; + border-radius: 2px; + border: 1px solid #CCC; +} + +#subject .tooltip2{ + color: #555; +} + +#subject [data-active] > * { + opacity: 1; +} + +#subject .tooltip[data-info='top'] { + top: -10px; + right: -50px; +} + +#subject .tooltip[data-info='right'] { + bottom: -30px; + right: -20px; +} + +#subject .tooltip[data-info='bottom'] { + top: -10px; + left: -50px; +} + +#subject .tooltip[data-info='left'] { + top: -30px; + right: -20px; +} + +#subject .tooltip2[data-info='top'] { + top: -10px; + left: -50px; +} + +#subject .tooltip2[data-info='right'] { + top: -30px; + right: -20px; +} + +#subject .tooltip2[data-info='bottom'] { + top: -10px; + right: -50px; +} + +#subject .tooltip2[data-info='left'] { + bottom: -30px; + right: -20px; +} + +/* Preview */ + +#preview { + width: 30%; + height: 50%; + background-color: #FFF; + text-align: center; + overflow: hidden; + position: absolute; + z-index: 10; + + left: 60%; + top: 15%; + + border-radius: 2px; + border-image-width: 20px; + border-image-repeat: round; + box-shadow: 0 0 3px 0 #BABABA; +} + +#preview .resize-handle { + width: 10px; + height: 10px; + background: url("https://mdn.mozillademos.org/files/6027/resize.png") center center no-repeat; + position: absolute; + bottom: 0; + right: 0; +} + +#preview .resize-handle:hover { + cursor: nw-resize; +} + + +/* + * General controls MENU + */ + +#general-controls { + padding: 10px 30px; + background-color: #FFF; + opacity: 0.95; + color: #888; + /*border-radius: 2px;*/ + box-shadow: 0 0 3px 0 #BABABA; +} + +#general-controls .property { + width: 130px; + float: left; +} + +#general-controls .name { + height: 20px; + margin: 0 10px 0 0; + line-height: 100%; + text-align: right; + float: left; +} + +#general-controls .right { + width: 200px; + float: right; +} + +#general-controls .ui-checkbox label { + height: 10px; +} + +#general-controls .separator { + height: 40px; + width: 1px; + margin: -10px 15px; + background-color: #EEE; + float: left; +} + +/* + * Controls + */ + +#controls { + color: #444; + margin: 10px 0 0 0; +} + +#controls .category { + height: 190px; + min-width: 260px; + margin: 10px; + padding: 10px; + border: 1px solid #CCC; + border-radius: 3px; + float: left; + + box-shadow: 0 0 3px 0 #BABABA; + transition: all 0.25s; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +@media (min-width: 880px) { + #controls .category { + width: 30%; + margin-left: 1.66%; + margin-right: 1.66%; + } +} + +@media (max-width: 879px) { + #controls .category { + width: 37%; + margin-left: 6.5%; + margin-right: 6.5%; + } +} + +#controls .category .title { + width: 100%; + height: 30px; + margin: 0 0 10px 0; + line-height: 25px; + + text-align: center; + color: #AAA; +} + +#controls .category:hover .title { + color: #777; +} + +#controls .category > .group { + border: 1px solid #CCC; + border-radius: 2px; +} + + +/* property */ + +#controls .property { + width: 250px; + height: 20px; + margin: 5px auto; +} + +#controls .property .ui-input-slider { + margin: 0; + float: left; +} + +#controls .property .ui-input-slider-info { + width: 60px; +} + +#controls .property .ui-input-slider-left { + transition: opacity 0.15s; + opacity: 0; +} + +#controls .property .ui-input-slider-right { + transition: opacity 0.15s; + opacity: 0; +} + +#controls .property .name { + width: 60px; + height: 20px; + padding: 0px 10px 0px 0px; + text-align: right; + line-height: 100%; + float: left; +} + +#controls .property .config { + width: 20px; + height: 20px; + float: left; + background: url("https://mdn.mozillademos.org/files/6021/config.png") center center no-repeat; + opacity: 0.5; +} + +#controls .property .config:hover { + cursor: pointer; + opacity: 1; +} + +#controls .ui-input-slider:hover .ui-input-slider-right { + opacity: 1; +} + +#controls .ui-input-slider:hover .ui-input-slider-left { + opacity: 1; +} + +#controls .property .ui-dropdown { + margin: 0 10px; + float: left; +} + + +#controls .property .ui-checkbox { + margin: 0 0 0 16px; + float: left; +} + +#controls .property .ui-checkbox label { + height: 0.85em; + width: 10px; +} + +/* dropdowns */ +#controls .ui-dropdown { + width: 50px; + height: 1.7em; + border-radius: 2px; +} + +#controls .ui-dropdown-select { + line-height: 1.6em; +} + +#controls .ui-dropdown-list { + top: 20px; +} + +#controls .ui-dropdown-list { + border-width: 1px; + text-align: center; +} + +#controls .ui-dropdown-list:hover { + overflow: hidden; +} + +#controls .border-repeat { + margin: 0 0 0 16px !important; + width: 80px; +} + +#controls .border-repeat .ui-dropdown-list { + height: 6.2em; + border-width: 1px; + text-align: center; +} + +/* border-image-slice */ + + +#border-slice-control .ui-dropdown-list { + height: 4.3em; +} + +/* border-image-width */ + +#border-width-control .ui-dropdown-list { + height: 6.2em; +} + +/* border-image-outset */ + +#border-outset-control .ui-dropdown-list { + height: 4.3em; +} + +#aditional-properties .property { + width: 200px; +} + +#aditional-properties .ui-input-slider > input { + width: 80px !important; +} + +/* unit settings panel */ + +#unit-settings { + padding: 10px; + position: absolute; + + background: #FFF; + + font-size: 12px; + border-radius: 3px; + border: 1px solid #CCC; + text-align: center; + color: #555; + + position: absolute; + z-index: 1000; + + box-shadow: 0 0 3px 0 #BABABA; + transition: all 0.25s; +} + +#unit-settings .title { + width: 100%; + margin: -5px auto 0; + + color: #666; + font-size: 14px; + font-weight: bold; + line-height: 25px; + border-bottom: 1px solid #E5E5E5; +} + +#unit-settings .ui-input-slider { + margin: 10px 0 0 0; +} + +#unit-settings .ui-input-slider-info { + width: 50px; + line-height: 1.5em; +} + +#unit-settings input { + font-size: 12px; + width: 40px !important; +} + +#unit-settings .close { + width: 16px; + height: 16px; + background: url('https://mdn.mozillademos.org/files/6019/close.png') no-repeat center center; + background-size: 75%; + + position: absolute; + top: 4px; + right: 4px; + opacity: 0.5; +} + +#unit-settings .close:hover { + cursor: pointer; + opacity: 1; +} + +#unit-settings[data-active='true'] { + opacity: 1; +} + +#unit-settings[data-active='false'] { + opacity: 0; + top: -100px !important; +} + +/* + * CSS Output Code + */ + +#output { + padding: 10px; + border: 2px dashed #888 !important; + box-shadow: none !important; + border-radius: 3px; + overflow: hidden; + + -moz-user-select: text; + -webkit-user-select: text; + -ms-user-select: text; + user-select: text; +} + + +@media (min-width: 880px) { + #output { + width: 63.33% !important; + } +} + +@media (max-width: 879px) { + #output { + width: 87% !important; + } +} + + +#output .title { + width: 100%; + height: 30px; + margin: 0 0 10px 0; + line-height: 25px; + + text-align: center; + color: #AAA; +} + +#output .css-property { + width: 100%; + margin: 0; + color: #555; + font-size: 14px; + line-height: 18px; + float: left; +} + +#output .css-property .name { + width: 30%; + font-weight: bold; + text-align: right; + float: left; +} + +#output .css-property .value { + width: 65%; + padding: 0 2.5%; + word-break: break-all; + float: left; +} + +</pre> + +<h3 id="JavaScript_Content">JavaScript Content</h3> + +<pre class="brush: js">'use strict'; + +/** + * UI-SlidersManager + */ + +var InputSliderManager = (function InputSliderManager() { + + var subscribers = {}; + var sliders = []; + + var InputComponent = function InputComponent(obj) { + var input = document.createElement('input'); + input.setAttribute('type', 'text'); + input.style.width = 50 + obj.precision * 10 + 'px'; + + input.addEventListener('click', function(e) { + this.select(); + }); + + input.addEventListener('change', function(e) { + var value = parseFloat(e.target.value); + + if (isNaN(value) === true) + setValue(obj.topic, obj.value); + else + setValue(obj.topic, value); + }); + + return input; + }; + + var SliderComponent = function SliderComponent(obj, sign) { + var slider = document.createElement('div'); + var startX = null; + var start_value = 0; + + slider.addEventListener("click", function(e) { + document.removeEventListener("mousemove", sliderMotion); + setValue(obj.topic, obj.value + obj.step * sign); + }); + + slider.addEventListener("mousedown", function(e) { + startX = e.clientX; + start_value = obj.value; + document.body.style.cursor = "e-resize"; + + document.addEventListener("mouseup", slideEnd); + document.addEventListener("mousemove", sliderMotion); + }); + + var slideEnd = function slideEnd(e) { + document.removeEventListener("mousemove", sliderMotion); + document.body.style.cursor = "auto"; + slider.style.cursor = "pointer"; + }; + + var sliderMotion = function sliderMotion(e) { + slider.style.cursor = "e-resize"; + var delta = (e.clientX - startX) / obj.sensivity | 0; + var value = delta * obj.step + start_value; + setValue(obj.topic, value); + }; + + return slider; + }; + + var InputSlider = function(node) { + var min = parseFloat(node.getAttribute('data-min')); + var max = parseFloat(node.getAttribute('data-max')); + var step = parseFloat(node.getAttribute('data-step')); + var value = parseFloat(node.getAttribute('data-value')); + var topic = node.getAttribute('data-topic'); + var unit = node.getAttribute('data-unit'); + var name = node.getAttribute('data-info'); + var sensivity = node.getAttribute('data-sensivity') | 0; + var precision = node.getAttribute('data-precision') | 0; + + this.min = isNaN(min) ? 0 : min; + this.max = isNaN(max) ? 100 : max; + this.precision = precision >= 0 ? precision : 0; + this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision); + this.topic = topic; + this.node = node; + this.unit = unit === null ? '' : unit; + this.sensivity = sensivity > 0 ? sensivity : 5; + value = isNaN(value) ? this.min : value; + + var input = new InputComponent(this); + var slider_left = new SliderComponent(this, -1); + var slider_right = new SliderComponent(this, 1); + + slider_left.className = 'ui-input-slider-left'; + slider_right.className = 'ui-input-slider-right'; + + if (name) { + var info = document.createElement('span'); + info.className = 'ui-input-slider-info'; + info.textContent = name; + node.appendChild(info); + } + + node.appendChild(slider_left); + node.appendChild(input); + node.appendChild(slider_right); + + this.input = input; + sliders[topic] = this; + setValue(topic, value); + }; + + InputSlider.prototype.setInputValue = function setInputValue() { + this.input.value = this.value.toFixed(this.precision) + this.unit; + }; + + var setValue = function setValue(topic, value, send_notify) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + value = parseFloat(value.toFixed(slider.precision)); + + if (value > slider.max) value = slider.max; + if (value < slider.min) value = slider.min; + + slider.value = value; + slider.node.setAttribute('data-value', value); + + slider.setInputValue(); + + if (send_notify === false) + return; + + notify.call(slider); + }; + + var setMax = function setMax(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + slider.max = value; + setValue(topic, slider.value); + }; + + var setMin = function setMin(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + slider.min = value; + setValue(topic, slider.value); + }; + + var setUnit = function setUnit(topic, unit) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + slider.unit = unit; + setValue(topic, slider.value); + }; + + var setStep = function setStep(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + slider.step = parseFloat(value); + setValue(topic, slider.value); + }; + + var setPrecision = function setPrecision(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + value = value | 0; + slider.precision = value; + + var step = parseFloat(slider.step.toFixed(value)); + if (step === 0) + slider.step = 1 / Math.pow(10, value); + + setValue(topic, slider.value); + }; + + var setSensivity = function setSensivity(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + value = value | 0; + + slider.sensivity = value > 0 ? value : 5; + }; + + var getNode = function getNode(topic) { + return sliders[topic].node; + }; + + var getPrecision = function getPrecision(topic) { + return sliders[topic].precision; + }; + + var getStep = function getStep(topic) { + return sliders[topic].step; + }; + + var subscribe = function subscribe(topic, callback) { + if (subscribers[topic] === undefined) + subscribers[topic] = []; + subscribers[topic].push(callback); + }; + + var unsubscribe = function unsubscribe(topic, callback) { + subscribers[topic].indexOf(callback); + subscribers[topic].splice(index, 1); + }; + + var notify = function notify() { + if (subscribers[this.topic] === undefined) + return; + for (var i = 0; i < subscribers[this.topic].length; i++) + subscribers[this.topic][i](this.value); + }; + + var createSlider = function createSlider(topic, label) { + var slider = document.createElement('div'); + slider.className = 'ui-input-slider'; + slider.setAttribute('data-topic', topic); + + if (label !== undefined) + slider.setAttribute('data-info', label); + + new InputSlider(slider); + return slider; + }; + + var init = function init() { + var elem = document.querySelectorAll('.ui-input-slider'); + var size = elem.length; + for (var i = 0; i < size; i++) + new InputSlider(elem[i]); + }; + + return { + init : init, + setMax : setMax, + setMin : setMin, + setUnit : setUnit, + setStep : setStep, + getNode : getNode, + getStep : getStep, + setValue : setValue, + subscribe : subscribe, + unsubscribe : unsubscribe, + setPrecision : setPrecision, + setSensivity : setSensivity, + getPrecision : getPrecision, + createSlider : createSlider, + }; + +})(); + + +/** + * UI-DropDown Select + */ + +var DropDownManager = (function DropdownManager() { + + var subscribers = {}; + var dropdowns = []; + var active = null; + + var visbility = ["hidden", "visible"]; + + + var DropDown = function DropDown(node) { + var topic = node.getAttribute('data-topic'); + var label = node.getAttribute('data-label'); + var selected = node.getAttribute('data-selected') | 0; + + var select = document.createElement('div'); + var list = document.createElement('div'); + var uval = 0; + var option = null; + var option_value = null; + + list.className = 'ui-dropdown-list'; + select.className = 'ui-dropdown-select'; + + while (node.firstElementChild !== null) { + option = node.firstElementChild; + option_value = option.getAttribute('data-value'); + + if (option_value === null) + option.setAttribute('data-value', uval); + + list.appendChild(node.firstElementChild); + uval++; + } + + node.appendChild(select); + node.appendChild(list); + + select.onclick = this.toggle.bind(this); + list.onclick = this.updateValue.bind(this); + document.addEventListener('click', clickOut); + + this.state = 0; + this.time = 0; + this.dropmenu = list; + this.select = select; + this.toggle(false); + this.value = {}; + this.topic = topic; + + if (label) + select.textContent = label; + else + this.setNodeValue(list.children[selected]); + + dropdowns[topic] = this; + + }; + + DropDown.prototype.toggle = function toggle(state) { + if (typeof(state) === 'boolean') + this.state = state === false ? 0 : 1; + else + this.state = 1 ^ this.state; + + if (active !== this) { + if (active) + active.toggle(false); + active = this; + } + + if (this.state === 0) + this.dropmenu.setAttribute('data-hidden', 'true'); + else + this.dropmenu.removeAttribute('data-hidden'); + + }; + + var clickOut = function clickOut(e) { + if (active.state === 0 || + e.target === active.dropmenu || + e.target === active.select) + return; + + active.toggle(false); + }; + + DropDown.prototype.updateValue = function updateValue(e) { + + if (Date.now() - this.time < 500) + return; + + if (e.target.className !== "ui-dropdown-list") { + this.setNodeValue(e.target); + this.toggle(false); + } + + this.time = Date.now(); + }; + + DropDown.prototype.setNodeValue = function setNodeValue(node) { + this.value['name'] = node.textContent; + this.value['value'] = node.getAttribute('data-value'); + + this.select.textContent = node.textContent; + this.select.setAttribute('data-value', this.value['value']); + + notify.call(this); + }; + + var createDropDown = function createDropDown(topic, options) { + + var dropdown = document.createElement('div'); + dropdown.setAttribute('data-topic', topic); + dropdown.className = 'ui-dropdown'; + + for (var i in options) { + var x = document.createElement('div'); + x.setAttribute('data-value', i); + x.textContent = options[i]; + dropdown.appendChild(x); + } + + new DropDown(dropdown); + + return dropdown; + }; + + var setValue = function setValue(topic, index) { + if (dropdowns[topic] === undefined || + index >= dropdowns[topic].dropmenu.children.length) + return; + + dropdowns[topic].setNodeValue(dropdowns[topic].dropmenu.children[index]); + }; + + var subscribe = function subscribe(topic, callback) { + if (subscribers[topic] === undefined) + subscribers[topic] = []; + subscribers[topic].push(callback); + }; + + var unsubscribe = function unsubscribe(topic, callback) { + var index = subscribers[topic].indexOf(callback); + subscribers[topic].splice(index, 1); + }; + + var notify = function notify() { + if (subscribers[this.topic] === undefined) + return; + + for (var i in subscribers[this.topic]) { + subscribers[this.topic][i](this.value); + } + }; + + var init = function init() { + var elem, size; + + elem = document.querySelectorAll('.ui-dropdown'); + size = elem.length; + for (var i = 0; i < size; i++) + new DropDown(elem[i]); + + }; + + return { + init : init, + setValue : setValue, + subscribe : subscribe, + unsubscribe : unsubscribe, + createDropDown : createDropDown + }; + +})(); + + +/** + * UI-ButtonManager + */ + +var ButtonManager = (function CheckBoxManager() { + + var subscribers = []; + var buttons = []; + + var CheckBox = function CheckBox(node) { + var topic = node.getAttribute('data-topic'); + var state = node.getAttribute('data-state'); + var name = node.getAttribute('data-label'); + var align = node.getAttribute('data-text-on'); + + state = (state === "true"); + + var checkbox = document.createElement("input"); + var label = document.createElement("label"); + + var id = 'checkbox-' + topic; + checkbox.id = id; + checkbox.setAttribute('type', 'checkbox'); + checkbox.checked = state; + + label.setAttribute('for', id); + if (name) { + label.className = 'text'; + if (align) + label.className += ' ' + align; + label.textContent = name; + } + + node.appendChild(checkbox); + node.appendChild(label); + + this.node = node; + this.topic = topic; + this.checkbox = checkbox; + + checkbox.addEventListener('change', function(e) { + notify.call(this); + }.bind(this)); + + buttons[topic] = this; + }; + + var getNode = function getNode(topic) { + return buttons[topic].node; + }; + + var setValue = function setValue(topic, value) { + var obj = buttons[topic]; + if (obj === undefined) + return; + + obj.checkbox.checked = value; + notify.call(obj); + }; + + var subscribe = function subscribe(topic, callback) { + if (subscribers[topic] === undefined) + subscribers[topic] = []; + + subscribers[topic].push(callback); + }; + + var unsubscribe = function unsubscribe(topic, callback) { + subscribers[topic].indexOf(callback); + subscribers[topic].splice(index, 1); + }; + + var notify = function notify() { + if (subscribers[this.topic] === undefined) + return; + for (var i = 0; i < subscribers[this.topic].length; i++) + subscribers[this.topic][i](this.checkbox.checked); + }; + + var init = function init() { + var elem = document.querySelectorAll('.ui-checkbox'); + var size = elem.length; + for (var i = 0; i < size; i++) + new CheckBox(elem[i]); + }; + + return { + init : init, + setValue : setValue, + subscribe : subscribe, + unsubscribe : unsubscribe + }; + +})(); + +window.addEventListener("load", function() { + BorderImage.init(); +}); + +var BorderImage = (function BorderImage() { + + var getElemById = document.getElementById.bind(document); + + var subject; + var preview; + var guidelines = []; + var positions = ['top', 'right', 'bottom', 'left']; + + var makeDraggable = function makeDraggable(elem) { + + var offsetTop; + var offsetLeft; + + elem.setAttribute('data-draggable', 'true'); + + var dragStart = function dragStart(e) { + if (e.target.getAttribute('data-draggable') !== 'true' || + e.target !== elem || e.button !== 0) + return; + + offsetLeft = e.clientX - elem.offsetLeft; + offsetTop = e.clientY - elem.offsetTop; + + document.addEventListener('mousemove', mouseDrag); + document.addEventListener('mouseup', dragEnd); + }; + + var dragEnd = function dragEnd(e) { + if (e.button !== 0) + return; + + document.removeEventListener('mousemove', mouseDrag); + document.removeEventListener('mouseup', dragEnd); + }; + + var mouseDrag = function mouseDrag(e) { + + elem.style.left = e.clientX - offsetLeft + 'px'; + elem.style.top = e.clientY - offsetTop + 'px'; + }; + + elem.addEventListener('mousedown', dragStart, false); + }; + + var PreviewControl = function PreviewControl() { + + var dragging = false; + var valueX = null; + var valueY = null; + + var dragStart = function dragStart(e) { + if (e.button !== 0) + return; + + valueX = e.clientX - preview.clientWidth; + valueY = e.clientY - preview.clientHeight; + dragging = true; + + document.addEventListener('mousemove', mouseDrag); + }; + + var dragEnd = function dragEnd(e) { + if (e.button !== 0 || dragging === false) + return; + + document.removeEventListener('mousemove', mouseDrag); + dragging = false; + }; + + var mouseDrag = function mouseDrag(e) { + InputSliderManager.setValue('preview-width', e.clientX - valueX); + InputSliderManager.setValue('preview-height', e.clientY - valueY); + }; + + var init = function init() { + + makeDraggable(preview); + makeDraggable(subject); + + var handle = document.createElement('div'); + handle.className = 'resize-handle'; + + handle.addEventListener('mousedown', dragStart); + document.addEventListener('mouseup', dragEnd); + + preview.appendChild(handle); + + }; + + return { + init: init + }; + + }(); + + var ImageReader = (function ImageReader() { + + var fReader = new FileReader(); + var browse = document.createElement('input'); + + var loadImage = function loadImage(e) { + if (browse.files.length === 0) + return; + + var file = browse.files[0]; + + if (file.type.slice(0, 5) !== 'image') + return; + + fReader.readAsDataURL(file); + + return false; + }; + + fReader.onload = function(e) { + ImageControl.loadRemoteImage(e.target.result); + }; + + var load = function load() { + browse.click(); + }; + + browse.setAttribute('type', 'file'); + browse.style.display = 'none'; + browse.onchange = loadImage; + + return { + load: load + }; + + })(); + + var ImageControl = (function ImageControl() { + + var scale = 0.5; + var imgSource = new Image(); + var imgState = null; + var selected = null; + + + var topics = ['slice', 'width', 'outset']; + var properties = {}; + properties['border1'] = { + fill : false, + + slice_values : [27, 27, 27, 27], + width_values : [20, 20, 20, 20], + outset_values : [0, 0, 0, 0], + + slice_units : [0, 0, 0, 0], + width_units : [0, 0, 0, 0], + outset_units : [0, 0, 0, 0], + + repeat : [1, 1], + size : [300, 200], + preview_area : 400 + }; + + properties['border2'] = { + fill : false, + + slice_values : [33, 33, 33, 33], + width_values : [1.5, 1.5, 1.5, 1.5], + outset_values : [0, 0, 0, 0], + + slice_units : [1, 1, 1, 1], + width_units : [2, 2, 2, 2], + outset_units : [0, 0, 0, 0], + + repeat : [2, 2], + size : [300, 200], + preview_area : 400 + }; + + properties['border3'] = { + fill : true, + + slice_values : [15, 15, 15, 15], + width_values : [10, 10, 10, 10], + outset_values : [0, 0, 0, 0], + + slice_units : [0, 0, 0, 0], + width_units : [0, 0, 0, 0], + outset_units : [0, 0, 0, 0], + + repeat : [2, 2], + size : [300, 200], + preview_area : 400 + }; + + properties['border4'] = { + fill : false, + + slice_values : [13, 13, 13, 13], + width_values : [13, 13, 13, 13], + outset_values : [13, 13, 13, 13], + + slice_units : [0, 0, 0, 0], + width_units : [0, 0, 0, 0], + outset_units : [0, 0, 0, 0], + + repeat : [0, 0], + size : [300, 200], + preview_area : 400 + }; + + properties['border5'] = { + fill : false, + + slice_values : [0, 12, 0, 12], + width_values : [0, 12, 0, 12], + outset_values : [0, 0, 0, 0], + + slice_units : [0, 0, 0, 0], + width_units : [0, 0, 0, 0], + outset_units : [0, 0, 0, 0], + + repeat : [0, 0], + size : [300, 200], + preview_area : 400, + }; + + properties['border6'] = { + fill : false, + + slice_values : [42, 42, 42, 42], + width_values : [42, 42, 42, 42], + outset_values : [0, 0, 0, 0], + + slice_units : [0, 0, 0, 0], + width_units : [0, 0, 0, 0], + outset_units : [0, 0, 0, 0], + + repeat : [2, 2], + size : [350, 350], + preview_area : 500, + }; + + + var loadLocalImage = function loadLocalImage(source) { + var location = "images/" + source; + imgSource.src = location; + }; + + var loadRemoteImage = function loadRemoteImage(source) { + imgSource.src = source; + if (selected) + selected.removeAttribute('selected'); + Tool.setOutputCSS('source', 'url("' + source + '")'); + }; + + var pickImage = function pickImage(e) { + if (e.target.className === 'image') { + selected = e.target; + selected.setAttribute('selected', 'true'); + loadRemoteImage(e.target.src); + imgState = e.target.getAttribute('data-stateID'); + } + }; + + var loadImageState = function loadImageState(stateID) { + if (properties[stateID] === undefined) + return; + + var prop = properties[stateID]; + var topic; + var unit_array; + var value_array; + + for (var i in topics) { + for (var j=0; j<4; j++) { + topic = topics[i] + '-' + positions[j]; + unit_array = topics[i] + '_units'; + value_array = topics[i] + '_values'; + InputSliderManager.setValue(topic, prop[value_array][j]); + DropDownManager.setValue(topic, prop[unit_array][j]); + } + } + + ButtonManager.setValue('slice-fill', prop['fill']); + DropDownManager.setValue('image-repeat-X', prop['repeat'][0]); + DropDownManager.setValue('image-repeat-Y', prop['repeat'][1]); + InputSliderManager.setValue('preview-width', prop['size'][0]); + InputSliderManager.setValue('preview-height', prop['size'][1]); + InputSliderManager.setValue('preview-area-height', prop['preview_area']); + }; + + var update = function update() { + scale = Math.min(300, (30000 / this.width) | 0); + setScale(scale); + InputSliderManager.setValue('scale', scale, false); + + subject.style.backgroundImage = 'url("' + this.src + '")'; + preview.style.borderImageSource = 'url("' + this.src + '")'; + + guidelines['slice-top'].setMax(this.height); + guidelines['slice-right'].setMax(this.width); + guidelines['slice-bottom'].setMax(this.height); + guidelines['slice-left'].setMax(this.width); + + if (imgState) + loadImageState(imgState); + }; + + var setScale = function setScale(value) { + scale = value; + var w = imgSource.width * scale / 100 | 0; + var h = imgSource.height * scale / 100 | 0; + subject.style.width = w + 'px'; + subject.style.height = h + 'px'; + + for (var i = 0; i < positions.length; i++) + guidelines['slice-' + positions[i]].updateGuidelinePos(); + }; + + var getScale = function getScale() { + return scale/100; + }; + + var toggleGallery = function toggleGallery() { + var gallery = getElemById('image-gallery'); + var button = getElemById('toggle-gallery'); + var state = 1; + button.addEventListener('click', function() { + state = 1 ^ state; + if (state === 0) { + gallery.setAttribute('data-collapsed', 'true'); + button.setAttribute('data-action', 'show'); + } + else { + gallery.removeAttribute('data-collapsed'); + button.setAttribute('data-action', 'hide'); + } + }); + }; + + var init = function init() { + var gallery = getElemById('image-gallery'); + var browse = getElemById('load-image'); + var remote = getElemById('remote-url'); + var load_remote = getElemById('load-remote'); + + remote.addEventListener('change', function(){ + loadRemoteImage(this.value); + }); + + load_remote.addEventListener('click', function(){ + loadRemoteImage(remote.value); + }); + + browse.addEventListener('click', ImageReader.load); + gallery.addEventListener('click', pickImage); + imgSource.addEventListener('load', update); + + InputSliderManager.subscribe('scale', setScale); + InputSliderManager.setValue('scale', scale); + imgState = 'border1'; + loadRemoteImage('https://mdn.mozillademos.org/files/6007/border-image-1.png'); + toggleGallery(); + }; + + return { + init: init, + getScale : getScale, + loadRemoteImage: loadRemoteImage + }; + + })(); + + var GuideLine = function GuideLine(node) { + var topic = node.getAttribute('data-topic'); + var axis = node.getAttribute('data-axis'); + + this.node = node; + this.topic = topic; + this.axis = axis; + this.info = topic.split('-')[1]; + + this.position = 0; + this.value = 0; + this.unit = 0; + this.max = 0; + this.pos = positions.indexOf(this.info); + + guidelines[topic] = this; + + var relative_container = document.createElement('div'); + var tooltip = document.createElement('div'); + var tooltip2 = document.createElement('div'); + + tooltip.className = 'tooltip'; + tooltip.setAttribute('data-info', this.info); + + tooltip2.className = 'tooltip2'; + tooltip2.textContent = this.info; + tooltip2.setAttribute('data-info', this.info); + + this.tooltip = tooltip; + + relative_container.appendChild(tooltip); + relative_container.appendChild(tooltip2); + node.appendChild(relative_container); + + var startX = 0; + var startY = 0; + var start = 0; + + var startDrag = function startDrag(e) { + startX = e.clientX; + startY = e.clientY; + start = guidelines[topic].position; + document.body.setAttribute('data-move', axis); + relative_container.setAttribute('data-active', ''); + node.setAttribute('data-active', ''); + + document.addEventListener('mousemove', updateGuideline); + document.addEventListener('mouseup', endDrag); + }; + + var endDrag = function endDrag() { + document.body.removeAttribute('data-move'); + relative_container.removeAttribute('data-active'); + node.removeAttribute('data-active'); + + document.removeEventListener('mousemove', updateGuideline); + }; + + var updateGuideline = function updateGuideline(e) { + var value; + if (topic === 'slice-top') + value = e.clientY - startY + start; + + if (topic === 'slice-right') + value = startX - e.clientX + start; + + if (topic === 'slice-bottom') + value = startY - e.clientY + start; + + if (topic === 'slice-left') + value = e.clientX - startX + start; + + if (this.unit === 0) + InputSliderManager.setValue(topic, value * 1 / ImageControl.getScale() | 0); + else { + InputSliderManager.setValue(topic, (value * 100 / (this.max * ImageControl.getScale())) | 0); + } + + }.bind(this); + + node.addEventListener("mousedown", startDrag); + + InputSliderManager.subscribe(topic, this.setPosition.bind(this)); + InputSliderManager.setValue(topic, this.position); + }; + + + GuideLine.prototype.updateGuidelinePos = function updateGuidelinePos() { + if (this.unit === 0) + this.position = this.value * ImageControl.getScale() | 0; + else + this.position = this.value * this.max * ImageControl.getScale() / 100 | 0; + + this.node.style[this.info] = this.position + 'px'; + }; + + GuideLine.prototype.setPosition = function setPosition(value) { + this.value = value; + this.tooltip.textContent = value; + this.updateGuidelinePos(); + Tool.setBorderSlice(this.pos, value); + }; + + GuideLine.prototype.setMax = function setMax(max) { + this.max = max; + this.updateLimit(); + }; + + GuideLine.prototype.updateLimit = function updateLimit() { + if (this.unit === 1) + InputSliderManager.setMax(this.topic, 100); + else + InputSliderManager.setMax(this.topic, this.max); + }; + + GuideLine.prototype.setUnit = function setUnit(type) { + if (type === '%') this.unit = 1; + if (type === '') this.unit = 0; + this.updateLimit(); + }; + + /* + * Unit panel + */ + var UnitPanel = (function UnitPanel () { + + var panel; + var title; + var precision; + var step; + var unit_topic = null; // settings are made for this topic + var step_option = [1, 0.1, 0.01]; + + var updatePrecision = function updatePrecision(value) { + InputSliderManager.setPrecision('unit-step', value); + InputSliderManager.setStep('unit-step', step_option[value]); + InputSliderManager.setMin('unit-step', step_option[value]); + + if (unit_topic) + InputSliderManager.setPrecision(unit_topic, value); + }; + + var updateUnitSettings = function updateUnitSettings(value) { + if (unit_topic) + InputSliderManager.setStep(unit_topic, value); + }; + + var show = function show(e) { + var topic = e.target.getAttribute('data-topic'); + var precision = InputSliderManager.getPrecision(topic); + var step = InputSliderManager.getStep(topic); + + unit_topic = topic; + title.textContent = topic; + + panel.setAttribute('data-active', 'true'); + panel.style.top = e.target.offsetTop - 40 + 'px'; + panel.style.left = e.target.offsetLeft + 30 + 'px'; + + InputSliderManager.setValue('unit-precision', precision); + InputSliderManager.setValue('unit-step', step); + }; + + var init = function init() { + panel = document.createElement('div'); + title = document.createElement('div'); + var close = document.createElement('div'); + + step = InputSliderManager.createSlider('unit-step', 'step'); + precision = InputSliderManager.createSlider('unit-precision', 'precision'); + + InputSliderManager.setStep('unit-precision', 1); + InputSliderManager.setMax('unit-precision', 2); + InputSliderManager.setValue('unit-precision', 2); + InputSliderManager.setSensivity('unit-precision', 20); + + InputSliderManager.setValue('unit-step', 1); + InputSliderManager.setStep('unit-step', 0.01); + InputSliderManager.setPrecision('unit-step', 2); + + InputSliderManager.subscribe('unit-precision', updatePrecision); + InputSliderManager.subscribe('unit-step', updateUnitSettings); + + close.addEventListener('click', function () { + panel.setAttribute('data-active', 'false'); + }); + + title.textContent = 'Properties'; + title.className = 'title'; + close.className = 'close'; + panel.id = 'unit-settings'; + panel.setAttribute('data-active', 'false'); + panel.appendChild(title); + panel.appendChild(precision); + panel.appendChild(step); + panel.appendChild(close); + document.body.appendChild(panel); + }; + + return { + init : init, + show : show + }; + + })(); + + /** + * Tool Manager + */ + var Tool = (function Tool() { + var preview_area; + var dropdown_unit_options = [ + { '' : '--', '%' : '%'}, + { 'px' : 'px', '%' : '%', 'em' : 'em'}, + { 'px' : 'px', 'em' : 'em'}, + ]; + + var border_slice = []; + var border_width = []; + var border_outset = []; + + var border_slice_values = []; + var border_width_values = []; + var border_outset_values = []; + + var border_slice_units = ['', '', '', '']; + var border_width_units = ['px', 'px', 'px', 'px']; + var border_outset_units = ['px', 'px', 'px', 'px']; + + var border_fill = false; + var border_repeat = ['round', 'round']; + var CSS_code = { + 'source' : null, + 'slice' : null, + 'width' : null, + 'outset' : null, + 'repeat' : null + }; + + var setBorderSlice = function setBorderSlice(positionID, value) { + border_slice[positionID] = value + border_slice_units[positionID]; + updateBorderSlice(); + }; + + var updateBorderSlice = function updateBorderSlice() { + var value = border_slice.join(' '); + if (border_fill === true) + value += ' fill'; + + preview.style.borderImageSlice = value; + setOutputCSS('slice', value); + }; + + var setBorderFill = function setBorderFill(value) { + border_fill = value; + var bimgslice = border_slice.join(' ');; + if (value === true) + bimgslice += ' fill'; + + preview.style.borderImageSlice = bimgslice; + }; + + var updateBorderWidth = function updateBorderWidth() { + var value = border_width.join(' '); + preview.style.borderImageWidth = value; + setOutputCSS('width', value); + }; + + var updateBorderOutset = function updateBorderOutset() { + var value = border_outset.join(' '); + preview.style.borderImageOutset = border_outset.join(' '); + setOutputCSS('outset', value); + }; + + var setBorderRepeat = function setBorderRepeat(obj) { + border_repeat[obj.value] = obj.name; + var value = border_repeat.join(' '); + preview.style.borderImageRepeat = value; + setOutputCSS('repeat', value); + }; + + var setOutputCSS = function setOutputCSS(topic, value) { + CSS_code[topic].textContent = value + ';'; + }; + + var setPreviewFontSize = function setPreviewFontSize(value) { + preview.style.fontSize = value + 'px'; + }; + + var setPreviewWidth = function setPreviewWidth(value) { + preview.style.width = value + 'px'; + }; + + var setPreviewHeight = function setPreviewHeight(value) { + preview.style.height = value + 'px'; + }; + + var setPreviewAreaHeight = function setPreviewAreaHeight(value) { + preview_area.style.height = value + 'px'; + }; + + var updateDragOption = function updateDragOption(value) { + if (value === true) + subject.setAttribute('data-draggable', 'true'); + else + subject.removeAttribute('data-draggable'); + }; + + var createProperty = function createProperty(topic, labelID, optionsID) { + + var slider = InputSliderManager.createSlider(topic, positions[labelID]); + var dropdown = DropDownManager.createDropDown(topic, dropdown_unit_options[optionsID]); + + InputSliderManager.setSensivity(topic, 3); + InputSliderManager.setPrecision(topic, 1); + + var property = document.createElement('div'); + var config = document.createElement('div'); + + property.className = 'property'; + config.className = 'config'; + config.setAttribute('data-topic', topic); + config.addEventListener('click', UnitPanel.show); + + property.appendChild(slider); + property.appendChild(dropdown); + property.appendChild(config); + + return property; + }; + + var initBorderSliceControls = function initBorderSliceControls() { + var container = getElemById('border-slice-control'); + + var listenForChanges = function listenForChanges(topic, id) { + InputSliderManager.subscribe(topic, function(value) { + border_slice_values[id] = value; + border_slice[id] = value + border_slice_units[id]; + updateBorderSlice(); + }); + + DropDownManager.subscribe(topic, function(obj) { + guidelines[topic].setUnit(obj.value); + border_slice_units[id] = obj.value; + border_slice[id] = border_slice_values[id] + obj.value; + updateBorderSlice(); + }); + }; + + for (var i = 0; i < positions.length; i++) { + var topic = 'slice-' + positions[i]; + var property = createProperty(topic, i, 0); + listenForChanges(topic, i); + + container.appendChild(property); + } + + container.appendChild(container.children[1]); + + }; + + var initBorderWidthControls = function initBorderWidthControls() { + var container = getElemById('border-width-control'); + + var listenForChanges = function listenForChanges(topic, id) { + InputSliderManager.subscribe(topic, function(value) { + border_width_values[id] = value; + border_width[id] = value + border_width_units[id]; + updateBorderWidth(); + }); + + DropDownManager.subscribe(topic, function(obj) { + if (obj.value === '%') + InputSliderManager.setMax(topic, 100); + else + InputSliderManager.setMax(topic, 1000); + + border_width_units[id] = obj.value; + border_width[id] = border_width_values[id] + obj.value; + updateBorderWidth(); + }); + }; + + for (var i = 0; i < positions.length; i++) { + var topic = 'width-' + positions[i]; + var property = createProperty(topic, i, 1); + InputSliderManager.setMax(topic, 1000); + listenForChanges(topic, i); + + container.appendChild(property); + } + }; + + var initBorderOutsetControls = function initBorderOutsetControls() { + + var container = getElemById('border-outset-control'); + + var listenForChanges = function listenForChanges(topic, id) { + InputSliderManager.subscribe(topic, function(value) { + border_outset_values[id] = value; + border_outset[id] = value + border_outset_units[id]; + updateBorderOutset(); + }); + + DropDownManager.subscribe(topic, function(obj) { + border_outset_units[id] = obj.value; + border_outset[id] = border_outset_values[id] + obj.value; + updateBorderOutset(); + }); + }; + + for (var i = 0; i < positions.length; i++) { + var topic = 'outset-' + positions[i]; + var property = createProperty(topic, i, 2); + InputSliderManager.setMax(topic, 1000); + listenForChanges(topic, i); + + container.appendChild(property); + } + }; + + var init = function init() { + + var gallery = + subject = getElemById('subject'); + preview = getElemById("preview"); + preview_area = getElemById("preview_section"); + + + CSS_code['source'] = getElemById("out-border-source"); + CSS_code['slice'] = getElemById("out-border-slice"); + CSS_code['width'] = getElemById("out-border-width"); + CSS_code['outset'] = getElemById("out-border-outset"); + CSS_code['repeat'] = getElemById("out-border-repeat"); + + initBorderSliceControls(); + initBorderWidthControls(); + initBorderOutsetControls(); + + var elem = document.querySelectorAll('.guideline'); + var size = elem.length; + for (var i = 0; i < size; i++) + new GuideLine(elem[i]); + + PreviewControl.init(); + + ButtonManager.subscribe('slice-fill',setBorderFill); + ButtonManager.subscribe('drag-subject', updateDragOption); + ButtonManager.setValue('drag-subject', false); + + DropDownManager.subscribe('image-repeat-X', setBorderRepeat); + DropDownManager.subscribe('image-repeat-Y', setBorderRepeat); + + InputSliderManager.subscribe('preview-area-height', setPreviewAreaHeight); + InputSliderManager.subscribe('preview-width', setPreviewWidth); + InputSliderManager.subscribe('preview-height', setPreviewHeight); + InputSliderManager.subscribe('font-size', setPreviewFontSize); + InputSliderManager.setValue('preview-width', 300); + InputSliderManager.setValue('preview-height', 200); + }; + + return { + init: init, + setOutputCSS: setOutputCSS, + setBorderSlice: setBorderSlice + }; + + })(); + + /** + * Init Tool + */ + var init = function init() { + InputSliderManager.init(); + DropDownManager.init(); + ButtonManager.init(); + UnitPanel.init(); + Tool.init(); + ImageControl.init(); + }; + + return { + init : init + }; + +})(); + +</pre> +</div> + +<p>{{EmbedLiveSample('Border_Image_Generator', '100%', '1270px')}}</p> diff --git a/files/de/web/css/css_background_and_borders/border-radius_generator/index.html b/files/de/web/css/css_background_and_borders/border-radius_generator/index.html new file mode 100644 index 0000000000..0193a207e7 --- /dev/null +++ b/files/de/web/css/css_background_and_borders/border-radius_generator/index.html @@ -0,0 +1,1600 @@ +--- +title: Border-radius Generator +slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator +tags: + - CSS + - Werkzeuge +translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator +--- +<p>Dieses Werkzeug kann dazu verwendet werden, CSS3 {{cssxref("border-radius")}} Effekte zu erzeugen.</p> + +<div style="display: none;"> +<h2 id="border-radius-generator" name="border-radius-generator">border-radius</h2> + +<h3 id="HTML_Content">HTML Content</h3> + +<pre class="brush: html"><div id="container"> + <div class="group section"> + <div id="preview" class="col span_12"> + <div id="subject"> + <div id="top-left" class="radius-container" + data-X="left" data-Y="top"> + </div> + <div id="top-right" class="radius-container" + data-X="right" data-Y="top"> + </div> + <div id="bottom-right" class="radius-container" + data-X="right" data-Y="bottom"> + </div> + <div id="bottom-left" class="radius-container" + data-X="left" data-Y="bottom"> + </div> + + <div id="radius-ui-sliders"> + <div id="tlr" class="ui-input-slider" data-topic="top-left" + data-unit=" px" data-sensivity="2"></div> + + <div id="tlw" class="ui-input-slider" data-topic="top-left-w" + data-unit=" px" data-sensivity="2"></div> + + <div id="tlh" class="ui-input-slider" data-topic="top-left-h" + data-unit=" px" data-sensivity="2"></div> + + <div id="trr" class="ui-input-slider" data-topic="top-right" + data-unit=" px" data-sensivity="2"></div> + + <div id="trw" class="ui-input-slider" data-topic="top-right-w" + data-unit=" px" data-sensivity="2"></div> + + <div id="trh" class="ui-input-slider" data-topic="top-right-h" + data-unit=" px" data-sensivity="2"></div> + + <div id="brr" class="ui-input-slider" data-topic="bottom-right" + data-unit=" px" data-sensivity="2"></div> + + <div id="brw" class="ui-input-slider" data-topic="bottom-right-w" + data-unit=" px" data-sensivity="2"></div> + + <div id="brh" class="ui-input-slider" data-topic="bottom-right-h" + data-unit=" px" data-sensivity="2"></div> + + <div id="blr" class="ui-input-slider" data-topic="bottom-left" + data-unit=" px" data-sensivity="2"></div> + + <div id="blw" class="ui-input-slider" data-topic="bottom-left-w" + data-unit=" px" data-sensivity="2"></div> + + <div id="blh" class="ui-input-slider" data-topic="bottom-left-h" + data-unit=" px" data-sensivity="2"></div> + </div> + </div> + </div> + </div> + <div id="controls" class="group section"> + + <div class="group section"> + <div id="dimensions"> + <div class="ui-input-slider" data-topic="width" data-info="width" + data-unit=" px" data-min="150" data-max="700" data-sensivity="1"></div> + + <div class="ui-input-slider" data-topic="height" data-info="height" + data-unit=" px" data-min="75" data-max="350" data-sensivity="1"></div> + </div> + + <div id="output"></div> + </div> + + <div class="group section"> + <div id="radius-lock"> + <div class="info"> rounded corner </div> + <div class="ui-checkbox" data-topic='top-left'></div> + <div class="ui-checkbox" data-topic='top-right'></div> + <div class="ui-checkbox" data-topic='bottom-right'></div> + <div class="ui-checkbox" data-topic='bottom-left'></div> + </div> + + <div id="unit-selection"> + <div class="info"> select border units </div> + </div> + </div> + + </div> +</div> +</pre> + +<h3 id="CSS_Content">CSS Content</h3> + +<pre class="brush: css">/* GRID OF TEN + * ========================================================================== */ + +.span_12 { + width: 100%; +} + +.span_11 { + width: 91.46%; +} + +.span_10 { + width: 83%; +} + +.span_9 { + width: 74.54%; +} + +.span_8 { + width: 66.08%; +} + +.span_7 { + width: 57.62%; +} + +.span_6 { + width: 49.16%; +} + +.span_5 { + width: 40.7%; +} + +.span_4 { + width: 32.24%; +} + +.span_3 { + width: 23.78%; +} + +.span_2 { + width: 15.32%; +} + +.span_1 { + width: 6.86%; +} + + + + +/* SECTIONS + * ========================================================================== */ + +.section { + clear: both; + padding: 0px; + margin: 0px; +} + +/* GROUPING + * ========================================================================== */ + + +.group:before, .group:after { + content: ""; + display: table; +} + +.group:after { + clear:both; +} + +.group { + zoom: 1; /* For IE 6/7 (trigger hasLayout) */ +} + +/* GRID COLUMN SETUP + * ========================================================================== */ + +.col { + display: block; + float:left; + margin: 1% 0 1% 1.6%; +} + +.col:first-child { + margin-left: 0; +} /* all browsers except IE6 and lower */ + + +/* + * UI Component + */ + +.ui-input-slider-container { + height: 20px; + margin: 10px 0; + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + -moz-user-select: none; + user-select: none; +} + +.ui-input-slider-container * { + float: left; + height: 100%; + line-height: 100%; +} + +/* Input Slider */ + +.ui-input-slider > input { + margin: 0; + padding: 0; + width: 50px; + text-align: center; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +.ui-input-slider-info { + width: 90px; + padding: 0px 10px 0px 0px; + text-align: right; + text-transform: lowercase; +} + +.ui-input-slider-left, .ui-input-slider-right { + width: 16px; + cursor: pointer; + background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat; +} + +.ui-input-slider-right { + background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat; +} + +.ui-input-slider-name { + width: 90px; + padding: 0 10px 0 0; + text-align: right; + text-transform: lowercase; +} + +.ui-input-slider-btn-set { + width: 25px; + background-color: #2C9FC9; + border-radius: 5px; + color: #FFF; + font-weight: bold; + line-height: 14px; + text-align: center; +} + +.ui-input-slider-btn-set:hover { + background-color: #379B4A; + cursor: pointer; +} + +/* + * UI Component + */ + +/* Checkbox */ + +.ui-checkbox { + text-align: center; + font-size: 16px; + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + line-height: 1.5em; + color: #FFF; + + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.ui-checkbox > input { + display: none; +} + +.ui-checkbox > label { + font-size: 12px; + padding: 0.333em 1.666em 0.5em; + height: 1em; + line-height: 1em; + + background-color: #888; + background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png"); + background-position: center center; + background-repeat: no-repeat; + + color: #FFF; + border-radius: 3px; + font-weight: bold; + float: left; +} + +.ui-checkbox .text { + padding-left: 34px; + background-position: center left 10px; +} + +.ui-checkbox .left { + padding-right: 34px; + padding-left: 1.666em; + background-position: center right 10px; +} + +.ui-checkbox > label:hover { + cursor: pointer; +} + +.ui-checkbox > input:checked + label { + background-image: url("https://mdn.mozillademos.org/files/5681/checked.png"); + background-color: #379B4A; +} + +body { + max-width: 1000px; + margin: 0 auto; + + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; +} + +#container { + width: 100%; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +/******************************************************************************/ +/******************************************************************************/ +/* + * Preview Area + */ + +#preview { + height: 500px; + border: 1px solid #CCC; + border-radius: 3px; + text-align: center; + overflow: hidden; + position: relative; +} + +#preview .content { + width: 100%; + height: 100%; + display: block; +} + +#preview input { + color: #333; + border: 1px solid #CCC; + border-radius: 3px; +} + +#subject { + width: 400px; + height: 150px; + margin: 0 auto; + border: 3px solid #C60; + background: #FFF; + position: relative; +} + +.radius { + width: 50%; + height: 50%; + border: 1px solid #CCC; + display: none; + position: absolute; + z-index: 1; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +.handle { + width: 16px; + height: 16px; + position: absolute; + z-index: 2; +} + +.handle-top-left { + top: -12px; + left: -12px; + cursor: se-resize; + background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top left no-repeat; +} + +.handle-top-right { + top: -12px; + right: -12px; + cursor: sw-resize; + background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top right no-repeat; +} + +.handle-bottom-right { + bottom: -12px; + right: -12px; + cursor: nw-resize; + background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom right no-repeat; +} + +.handle-bottom-left { + bottom: -12px; + left: -12px; + cursor: ne-resize; + background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom left no-repeat; +} + + +.radius-container { + position: absolute; + display : block; + z-index: 1; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + + +/* TOP LEFT */ +#top-left { + top: 0; + left: 0; +} + +#top-left .radius { + border-top-left-radius: 100%; + top: 0; + left: 0; +} + +/* TOP RIGHT */ +#top-right { + top: 0; + right: 0; +} + +#top-right .radius { + border-top-right-radius: 100%; + top: 0; + right: 0; +} + +/* BOTTOM RIGHT */ +#bottom-right { + bottom: 0; + right: 0; +} + +#bottom-right .radius { + border-bottom-right-radius: 100%; + bottom: 0; + right: 0; +} + +/* BOTTOM lEFT */ +#bottom-left { + bottom: 0; + left: 0; +} + +#bottom-left .radius { + border-bottom-left-radius: 100%; + bottom: 0; +} + +/* INPUT SLIDERS */ + +#preview .ui-input-slider { + margin: 10px; + position: absolute; + z-index: 10; +} + +#radius-ui-sliders { + width: 100%; + height: 100%; + min-height: 75px; + min-width: 150px; + padding: 20px 50px; + top: -20px; + left: -50px; + position: relative; +} + +#tlr { + top: -30px; + left: -50px; + display: none; +} + +#tlw { + top: -30px; + left: 30px; +} + +#tlh { + top: 20px; + left: -50px; +} + +#trr { + top: -30px; + right: -50px; + display: none; +} + +#trw { + top: -30px; + right: 30px; +} + +#trh { + top: 20px; + right: -50px; +} + +#brr { + bottom: -30px; + right: -50px; + display: none; +} + +#brw { + bottom: -30px; + right: 30px; +} + +#brh { + bottom: 20px; + right: -50px; +} + +#blr { + bottom: -30px; + left: -50px; + display: none; +} + +#blw { + bottom: -30px; + left: 30px; +} + +#blh { + bottom: 20px; + left: -50px; +} + +#preview .ui-input-slider-left, #preview .ui-input-slider-right { + visibility: hidden; +} + +#preview .ui-input-slider-container:hover .ui-input-slider-left { + visibility: visible; +} + +#preview .ui-input-slider-container:hover .ui-input-slider-right { + visibility: visible; +} + +/* + * + */ + +#unit-selection { + width: 200px; + height: 75px; + margin: 30px 30px 0 0; + padding: 30px; + border: 3px solid #555; + border-radius: 10px; + position: relative; + float: right; +} + +#unit-selection .info { + height: 20%; + width: 100%; + line-height: 20%; + font-size: 20px; + text-align: center; + position: relative; + top: 40%; +} + +#unit-selection .dropdown { + width: 50px; + height: 20px; + margin: 10px; + padding: 0; + border-radius: 3px; + position: absolute; + overflow: hidden; +} + +#unit-selection select { + width: 50px; + height: 20px; + marign: 0; + padding: 0 0 0 10px; + background: #555; + border: 1px solid #555; + border: none; + color: #FFF; + float: left; +} + +#unit-selection select option { + background: #FFF; + color: #333; +} + +#unit-selection select:hover { + cursor: pointer; +} + +#unit-selection .dropdown:before { + content: ""; + width: 18px; + height: 20px; + display: block; + background-color: #555; + background-image: url("https://mdn.mozillademos.org/files/5675/dropdown.png"); + background-position: center center; + background-repeat: no-repeat; + top: 0px; + right: 0px; + position: absolute; + z-index: 1; + pointer-events: none; +} + +#unit-selection .unit-top-left { + top: 0; + left: 0; + display: none; +} + +#unit-selection .unit-top-left-w { + top: -22px; + left: 30px; +} + +#unit-selection .unit-top-left-h { + top: 20px; + left: -37px; +} + +#unit-selection .unit-top-right { + top: 0; + right: 0; + display: none; +} + +#unit-selection .unit-top-right-w { + top: -22px; + right: 30px; +} + +#unit-selection .unit-top-right-h { + top: 20px; + right: -37px; +} + +#unit-selection .unit-bottom-right { + bottom: 0; + right: 0; + display: none; +} + +#unit-selection .unit-bottom-right-w { + bottom: -22px; + right: 30px; +} + +#unit-selection .unit-bottom-right-h { + bottom: 20px; + right: -37px; +} + +#unit-selection .unit-bottom-left { + bottom: 0; + left: 0; + display: none; +} + +#unit-selection .unit-bottom-left-w { + bottom: -22px; + left: 30px; +} + +#unit-selection .unit-bottom-left-h { + bottom: 20px; + left: -37px; +} + +/******************************************************************************/ +/******************************************************************************/ + + +#radius-lock { + width: 200px; + height: 75px; + margin: 30px 0 0 30px; + padding: 30px; + border: 3px solid #555; + border-radius: 10px; + position: relative; + float: left; +} + +#radius-lock .ui-checkbox { + color: #FFF; + position: absolute; +} + +#radius-lock .ui-checkbox > label { + height: 20px; + width: 34px; + padding: 0; +} + +#radius-lock .info { + height: 20%; + width: 100%; + line-height: 20%; + font-size: 20px; + text-align: center; + position: relative; + top: 40%; +} + +#radius-lock [data-topic="top-left"] { + top: 10px; + left: 10px; +} + +#radius-lock [data-topic="top-right"] { + top: 10px; + right: 10px; +} + +#radius-lock [data-topic="bottom-right"] { + bottom: 10px; + right: 10px; +} + +#radius-lock [data-topic="bottom-left"] { + bottom: 10px; + left: 10px; +} + +/** + * Controls + */ + +#dimensions { + width: 200px; + color: #444; + float:left; +} + +#dimensions input { + background: #555; + color: #FFF; + border: none; + border-radius: 3px; +} + +#output { + width: 500px; + padding: 10px 0; + margin: 10px 0; + color: #555; + text-align: center; + border: 1px dashed #999; + border-radius: 3px; + -moz-user-select: text; + -webkit-user-select: text; + -ms-user-select: text; + user-select: text; + + float: right; +} + + +</pre> + +<h3 id="JavaScript_Content">JavaScript Content</h3> + +<pre class="brush: js"><code class="language-js">'use strict'; + + +/** + * UI-InputSliderManager + */ + +var InputSliderManager = (function InputSliderManager() { + + var subscribers = {}; + var sliders = []; + + var InputComponent = function InputComponent(obj) { + var input = document.createElement('input'); + input.setAttribute('type', 'text'); + + input.addEventListener('click', function(e) { + this.select(); + }); + + input.addEventListener('change', function(e) { + var value = parseInt(e.target.value); + + if (isNaN(value) === true) + setValue(obj.topic, obj.value); + else + setValue(obj.topic, value); + }); + + subscribe(obj.topic, function(value) { + input.value = value + obj.unit; + }); + + return input; + } + + var SliderComponent = function SliderComponent(obj, sign) { + var slider = document.createElement('div'); + var startX = null; + var start_value = 0; + + slider.addEventListener("click", function(e) { + setValue(obj.topic, obj.value + obj.step * sign); + }); + + slider.addEventListener("mousedown", function(e) { + startX = e.clientX; + start_value = obj.value; + document.body.style.cursor = "e-resize"; + document.addEventListener("mousemove", sliderMotion); + }); + + document.addEventListener("mouseup", function(e) { + document.removeEventListener("mousemove", sliderMotion); + document.body.style.cursor = "auto"; + slider.style.cursor = "pointer"; + }); + + var sliderMotion = function sliderMotion(e) { + slider.style.cursor = "e-resize"; + var delta = (e.clientX - startX) / obj.sensivity | 0; + var value = delta * obj.step + start_value; + setValue(obj.topic, value); + } + + return slider; + } + + var InputSlider = function(node) { + var min = node.getAttribute('data-min') | 0; + var max = node.getAttribute('data-max') | 0; + var step = node.getAttribute('data-step') | 0; + var value = node.getAttribute('data-value') | 0; + var topic = node.getAttribute('data-topic'); + var unit = node.getAttribute('data-unit'); + var name = node.getAttribute('data-info'); + var sensivity = node.getAttribute('data-sensivity') | 0; + + this.min = min; + this.max = max > 0 ? max : 100; + this.step = step === 0 ? 1 : step; + this.topic = topic; + this.node = node; + this.unit = unit; + this.sensivity = sensivity > 0 ? sensivity : 5; + + var input = new InputComponent(this); + var slider_left = new SliderComponent(this, -1); + var slider_right = new SliderComponent(this, 1); + + slider_left.className = 'ui-input-slider-left'; + slider_right.className = 'ui-input-slider-right'; + + if (name) { + var info = document.createElement('span'); + info.className = 'ui-input-slider-info'; + info.textContent = name; + node.appendChild(info); + } + + node.appendChild(slider_left); + node.appendChild(input); + node.appendChild(slider_right); + node.className = 'ui-input-slider ui-input-slider-container'; + + this.input = input; + sliders[topic] = this; + setValue(topic, value); + } + + var setValue = function setValue(topic, value, send_notify) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + if (value > slider.max) value = slider.max; + if (value < slider.min) value = slider.min; + + slider.value = value; + slider.node.setAttribute('data-value', value); + + if (send_notify !== undefined && send_notify === false) { + slider.input.value = value + slider.unit; + return; + } + + notify.call(slider); + } + + var setMax = function setMax(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + slider.max = value; + setValue(topic, slider.value); + } + + var setMin = function setMin(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + slider.min = value; + setValue(topic, slider.value); + } + + var setUnit = function setUnit(topic, unit) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + slider.unit = unit; + setValue(topic, slider.value); + } + + var getNode = function getNode(topic) { + return sliders[topic].node; + } + + var subscribe = function subscribe(topic, callback) { + if (subscribers[topic] === undefined) + subscribers[topic] = []; + subscribers[topic].push(callback); + } + + var unsubscribe = function unsubscribe(topic, callback) { + subscribers[topic].indexOf(callback); + subscribers[topic].splice(index, 1); + } + + var notify = function notify() { + for (var i in subscribers[this.topic]) { + subscribers[this.topic][i](this.value); + } + } + + var init = function init() { + var elem = document.querySelectorAll('.ui-input-slider'); + var size = elem.length; + for (var i = 0; i < size; i++) + new InputSlider(elem[i]); + } + + return { + init : init, + setMax : setMax, + setMin : setMin, + setUnit : setUnit, + getNode : getNode, + setValue : setValue, + subscribe : subscribe, + unsubscribe : unsubscribe + } + +})(); + +/** + * UI-ButtonManager + */ + +var ButtonManager = (function CheckBoxManager() { + + var subscribers = []; + var buttons = []; + + var CheckBox = function CheckBox(node) { + var topic = node.getAttribute('data-topic'); + var state = node.getAttribute('data-state'); + var name = node.getAttribute('data-label'); + var align = node.getAttribute('data-text-on'); + + state = (state === "true"); + + var checkbox = document.createElement("input"); + var label = document.createElement("label"); + + var id = 'checkbox-' + topic; + checkbox.id = id; + checkbox.setAttribute('type', 'checkbox'); + checkbox.checked = state; + + label.setAttribute('for', id); + if (name) { + label.className = 'text'; + if (align) + label.className += ' ' + align; + label.textContent = name; + } + + node.appendChild(checkbox); + node.appendChild(label); + + this.node = node; + this.topic = topic; + this.checkbox = checkbox; + + checkbox.addEventListener('change', function(e) { + notify.call(this); + }.bind(this)); + + buttons[topic] = this; + } + + var getNode = function getNode(topic) { + return buttons[topic].node; + } + + var setValue = function setValue(topic, value) { + try { + buttons[topic].checkbox.checked = value; + } + catch(error) { + console.log(error); + } + } + + var subscribe = function subscribe(topic, callback) { + if (subscribers[topic] === undefined) + subscribers[topic] = []; + + subscribers[topic].push(callback); + } + + var unsubscribe = function unsubscribe(topic, callback) { + subscribers[topic].indexOf(callback); + subscribers[topic].splice(index, 1); + } + + var notify = function notify() { + for (var i = 0; i < subscribers[this.topic].length; i++) + subscribers[this.topic][i](this.checkbox.checked); + } + + var init = function init() { + var elem = document.querySelectorAll('.ui-checkbox'); + var size = elem.length; + for (var i = 0; i < size; i++) + new CheckBox(elem[i]); + } + + return { + init : init, + setValue : setValue, + subscribe : subscribe, + unsubscribe : unsubscribe + } + +})(); + + +window.addEventListener("load", function() { + BorderRadius.init(); +}); + +var BorderRadius = (function BorderRadius() { + + function getElemById(id) { + return document.getElementById(id); + } + + /** + * Shadow dragging + */ + var PreviewMouseTracking = (function Drag() { + var active = false; + var lastX = 0; + var lastY = 0; + var subscribers = []; + + var init = function init(id) { + var elem = getElemById(id); + elem.addEventListener('mousedown', dragStart, false); + document.addEventListener('mouseup', dragEnd, false); + } + + var dragStart = function dragStart(e) { + if (e.button !== 0) + return; + + active = true; + lastX = e.clientX; + lastY = e.clientY; + document.addEventListener('mousemove', mouseDrag, false); + } + + var dragEnd = function dragEnd(e) { + if (e.button !== 0) + return; + + if (active === true) { + active = false; + document.removeEventListener('mousemove', mouseDrag, false); + } + } + + var mouseDrag = function mouseDrag(e) { + notify(e.clientX - lastX, e.clientY - lastY); + lastX = e.clientX; + lastY = e.clientY; + } + + var subscribe = function subscribe(callback) { + subscribers.push(callback); + } + + var unsubscribe = function unsubscribe(callback) { + var index = subscribers.indexOf(callback); + subscribers.splice(index, 1); + } + + var notify = function notify(deltaX, deltaY) { + for (var i in subscribers) + subscribers[i](deltaX, deltaY); + } + + return { + init : init, + subscribe : subscribe, + unsubscribe : unsubscribe + } + + })(); + + var subject; + var units = ['px', '%']; + var output = null; + + var UnitSelector = function UnitSelector(topic) { + + this.container = document.createElement("div"); + this.select = document.createElement("select"); + for (var i in units) { + var option = document.createElement("option"); + option.value = i; + option.textContent = units[i]; + this.select.appendChild(option); + } + + this.container.className = 'dropdown ' + 'unit-' + topic; + this.container.appendChild(this.select); + } + + UnitSelector.prototype.setValue = function setValue(value) { + this.salect.value = value; + } + + + var RadiusContainer = function RadiusContainer(node) { + var radius = document.createElement('div'); + var handle = document.createElement('div'); + var x = node.getAttribute('data-x'); + var y = node.getAttribute('data-y'); + var active = false; + + this.id = node.id; + this.node = node; + this.radius = radius; + this.handle = handle; + this.width = 100; + this.height = 50; + this.size = 0; + this.rounded = false; + + this.unitX = 0; + this.unitY = 0; + this.unitR = 0; + + this.maxW = 100; + this.maxH = 100; + this.maxR = 100; + + this.topic = y + '-' + x; + + var sliderW = InputSliderManager.getNode(this.topic + '-w'); + var sliderH = InputSliderManager.getNode(this.topic + '-h'); + var sliderR = InputSliderManager.getNode(this.topic); + + this.setUnitX(this.unitX); + this.setUnitY(this.unitY); + this.setUnitR(this.unitR); + + this.updateWidth(); + this.updateHeight(); + this.updateRadius(); + + if (x === 'left') this.resizeX = 1; + if (x === 'right') this.resizeX = -1; + if (y === 'top') this.resizeY = 1; + if (y === 'bottom') this.resizeY = -1; + + radius.className = 'radius'; + + var unit_selector = document.getElementById("unit-selection"); + var unitW = new UnitSelector(this.topic + '-w'); + var unitH = new UnitSelector(this.topic + '-h'); + var unitR = new UnitSelector(this.topic); + + unit_selector.appendChild(unitW.container); + unit_selector.appendChild(unitH.container); + unit_selector.appendChild(unitR.container); + node.appendChild(radius); + subject.appendChild(handle); + + unitW.select.addEventListener('change', function(e) { + this.setUnitX(e.target.value | 0); + }.bind(this)); + + unitH.select.addEventListener('change', function(e) { + this.setUnitY(e.target.value | 0); + }.bind(this)); + + unitR.select.addEventListener('change', function(e) { + this.setUnitR(e.target.value | 0); + }.bind(this)); + + if (x === 'left' && y == 'top') handle.className = 'handle handle-top-left' + if (x === 'right' && y == 'top') handle.className = 'handle handle-top-right'; + if (x === 'right' && y == 'bottom') handle.className = 'handle handle-bottom-right'; + if (x === 'left' && y == 'bottom') handle.className = 'handle handle-bottom-left'; + + handle.addEventListener("mousedown", function(e) { + active = true; + this.radius.style.display = 'block'; + PreviewMouseTracking.subscribe(this.updateContainer.bind(this)); + }.bind(this)); + + document.addEventListener("mouseup", function(e) { + this.radius.style.display = 'none'; + if (active === true) + PreviewMouseTracking.unsubscribe(this.updateContainer.bind(this)); + }.bind(this)); + + InputSliderManager.subscribe(this.topic + '-w', this.setWidth.bind(this)); + InputSliderManager.subscribe(this.topic + '-h', this.setHeight.bind(this)); + InputSliderManager.subscribe(this.topic, this.setRadius.bind(this)); + + ButtonManager.subscribe(this.topic, function(value) { + this.rounded = value; + if (value === true) { + unitW.container.style.display = 'none'; + unitH.container.style.display = 'none'; + unitR.container.style.display = 'block'; + sliderW.style.display = 'none'; + sliderH.style.display = 'none'; + sliderR.style.display = 'block'; + this.setUnitR(this.unitR); + this.updateRadius(); + } + + if (value === false) { + unitW.container.style.display = 'block'; + unitH.container.style.display = 'block'; + unitR.container.style.display = 'none'; + sliderW.style.display = 'block'; + sliderH.style.display = 'block'; + sliderR.style.display = 'none'; + this.setUnitX(this.unitX); + this.setUnitY(this.unitY); + this.updateWidth(); + this.updateHeight(); + } + + this.updateBorderRadius(); + + }.bind(this)); + + this.updateBorderRadius(); + } + + RadiusContainer.prototype.updateWidth = function updateWidth() { + this.node.style.width = this.width + units[this.unitX]; + var value = Math.round(this.width / 2); + InputSliderManager.setValue(this.topic + '-w', value, false); + } + + RadiusContainer.prototype.updateHeight = function updateHeight() { + this.node.style.height = this.height + units[this.unitY]; + var value = Math.round(this.height / 2); + InputSliderManager.setValue(this.topic + '-h', value, false); + } + + RadiusContainer.prototype.updateRadius = function updateRadius() { + var value = Math.round(this.size / 2); + this.node.style.width = this.size + units[this.unitR]; + this.node.style.height = this.size + units[this.unitR]; + InputSliderManager.setValue(this.topic, value, false); + } + + RadiusContainer.prototype.setWidth = function setWidth(value) { + this.radius.style.display = 'block'; + this.width = 2 * value; + this.node.style.width = this.width + units[this.unitX]; + this.updateBorderRadius(); + } + + RadiusContainer.prototype.setHeight = function setHeight(value) { + this.radius.style.display = 'block'; + this.height = 2 * value; + this.node.style.height = this.height + units[this.unitY]; + this.updateBorderRadius(); + } + + RadiusContainer.prototype.setRadius = function setRadius(value) { + this.radius.style.display = 'block'; + this.size = 2 * value; + this.node.style.width = this.size + units[this.unitR]; + this.node.style.height = this.size + units[this.unitR]; + this.updateBorderRadius(); + } + + RadiusContainer.prototype.setUnitX = function setUnitX(value) { + this.unitX = value; + if (this.unitX === 0) this.maxW = 2 * subject.clientWidth; + if (this.unitX === 1) this.maxW = 200; + InputSliderManager.setUnit(this.topic + '-w', units[this.unitX]); + InputSliderManager.setMax(this.topic + '-w', this.maxW / 2); + } + + RadiusContainer.prototype.setUnitY = function setUnitY(value) { + this.unitY = value; + if (this.unitY === 0) this.maxH = 2 * subject.clientHeight; + if (this.unitY === 1) this.maxH = 200; + InputSliderManager.setUnit(this.topic + '-h', units[this.unitY]); + InputSliderManager.setMax(this.topic + '-h', this.maxH / 2); + } + + RadiusContainer.prototype.setUnitR = function setUnitR(value) { + this.unitR = value; + + if (this.unitR === 0) + this.maxR = 2 * Math.min(subject.clientHeight , subject.clientWidth); + + if (this.unitR === 1) + this.maxR = 200; + + InputSliderManager.setUnit(this.topic, units[this.unitR]); + InputSliderManager.setMax(this.topic, this.maxR / 2); + } + + RadiusContainer.prototype.updateUnits = function updateUnits(unit) { + if (this.rounded) { + this.setUnitR(this.unitR); + return; + } + + if (unit === 0) + this.setUnitX(this.unitX); + + if (unit === 1) + this.setUnitY(this.unitY); + } + + RadiusContainer.prototype.composeBorderRadius = function composeBorderRadius () { + + if (this.rounded === true) { + var unit = units[this.unitR]; + var value = Math.round(this.size / 2); + return value + unit; + } + + var unitX = units[this.unitX]; + var unitY = units[this.unitY]; + var valueX = Math.round(this.width / 2); + var valueY = Math.round(this.height / 2); + + if (valueX === valueY && this.unitX === this.unitY) + return valueX + unitX; + + return valueX + unitX + ' ' + valueY + unitY; + } + + RadiusContainer.prototype.updateBorderRadius = function updateBorderRadius () { + var radius = this.composeBorderRadius(); + var corner = 0; + + if (this.topic === 'top-left') { + subject.style.borderTopLeftRadius = radius; + corner = 0; + } + + if (this.topic === 'top-right') { + subject.style.borderTopRightRadius = radius; + corner = 1; + } + + if (this.topic === 'bottom-right') { + subject.style.borderBottomRightRadius = radius; + corner = 2; + } + + if (this.topic === 'bottom-left') { + subject.style.borderBottomLeftRadius = radius; + corner = 3; + } + + Tool.updateOutput(corner, radius); + } + + RadiusContainer.prototype.updateContainer = function updateContainer(deltaX, deltaY) { + + if (this.rounded === true) { + this.size += this.resizeX * deltaX + this.resizeY * deltaY; + if (this.size < 0) this.size = 0; + if (this.size > this.maxR) this.size = this.maxR; + this.updateRadius(); + this.updateBorderRadius(); + return; + } + + if (deltaX) { + this.width += this.resizeX * deltaX; + if (this.width < 0) this.width = 0; + if (this.width > this.maxW) this.width = this.maxW; + this.updateWidth(); + } + + if (deltaY) { + this.height += this.resizeY * deltaY; + if (this.height < 0) this.height = 0; + if (this.height > this.maxH) this.height = this.maxH; + this.updateHeight(); + } + + if (deltaX || deltaY) + this.updateBorderRadius(); + } + + + /** + * Tool Manager + */ + var Tool = (function Tool() { + var preview; + var preview_ui; + var radius_containers = []; + var border_width = 3; + var borders1 = [null, null, null, null]; + var borders2 = [0, 0, 0, 0]; + + var updateUIWidth = function updateUIWidth(value) { + var pwidth = subject.parentElement.clientWidth; + var left = (pwidth - value) / 2; + subject.style.width = value + "px"; + + for (var i = 0; i < 4; i++) + radius_containers[i].updateUnits(0); + } + + var updateUIHeight = function updateUIHeight(value) { + var pheight = subject.parentElement.clientHeight; + var top = (pheight - value) / 2; + subject.style.height = value + "px"; + subject.style.top = top - border_width + "px"; + + for (var i = 0; i < 4; i++) + radius_containers[i].updateUnits(1); + } + + var updatePreviewUIWidth = function updatePreviewUIWidth() { + var p = subject.parentElement.clientWidth; + var v = preview_ui.clientWidth; + console.log(p, v, (p - v ) / 2); + preview_ui.style.left = (p - v) / 2 + "px" ; + } + + var updatePreviewUIHeight = function updatePreviewUIHeight() { + var p = subject.parentElement.clientHeight; + var v = preview_ui.clientHeight; + console.log(p, v, (p - v ) / 2); + preview_ui.style.top = (p - v) / 2 + "px" ; + } + + var updateOutput = function updateOutput(corner, radius) { + var values = radius.split(" "); + + borders1[corner] = values[0]; + borders2[corner] = values[0]; + + if (values.length === 2) + borders2[corner] = values[1]; + + var border_1_value = borders1.join(" "); + var border_2_value = borders2.join(" "); + var border_radius = 'border-radius: ' + border_1_value; + + if (border_2_value !== border_1_value) + border_radius += ' / ' + border_2_value; + + border_radius += ';'; + output.textContent = border_radius; + } + + var init = function init() { + preview = getElemById("preview"); + subject = getElemById("subject"); + output = getElemById("output"); + preview_ui = getElemById("radius-ui-sliders"); + + var elem = document.querySelectorAll('.radius-container'); + var size = elem.length; + for (var i = 0; i < size; i++) + radius_containers[i] = new RadiusContainer(elem[i]); + + InputSliderManager.subscribe("width", updateUIWidth); + InputSliderManager.subscribe("height", updateUIHeight); + + InputSliderManager.setValue("width", subject.clientWidth); + InputSliderManager.setValue("height", subject.clientHeight); + } + + return { + init : init, + updateOutput : updateOutput + } + + })(); + + /** + * Init Tool + */ + var init = function init() { + ButtonManager.init(); + InputSliderManager.init(); + PreviewMouseTracking.init("preview"); + Tool.init(); + } + + return { + init : init + } + +})(); + + +</code></pre> +</div> + +<p>{{EmbedLiveSample('border-radius-generator', '100%', '800px')}}</p> diff --git a/files/de/web/css/css_background_and_borders/index.html b/files/de/web/css/css_background_and_borders/index.html new file mode 100644 index 0000000000..87b26bd607 --- /dev/null +++ b/files/de/web/css/css_background_and_borders/index.html @@ -0,0 +1,154 @@ +--- +title: CSS Background and Borders +slug: Web/CSS/CSS_Background_and_Borders +tags: + - CSS + - CSS Backgrounds and Borders + - CSS Reference + - NeedsTranslation + - Overview + - TopicStub +translation_of: Web/CSS/CSS_Backgrounds_and_Borders +--- +<p>{{CSSRef}}</p> + +<p><strong>CSS Background and Borders</strong> is a module of CSS that defines how background and borders of elements are described. Borders can be lines or images, boxes can have one or multiple backgrounds, have rounded corners, and shadows.</p> + +<h2 id="Reference">Reference</h2> + +<h3 id="CSS_Properties">CSS Properties</h3> + +<div class="index"> +<ul> + <li>{{cssxref("background")}}</li> + <li>{{cssxref("background-attachment")}}</li> + <li>{{cssxref("background-clip")}}</li> + <li>{{cssxref("background-color")}}</li> + <li>{{cssxref("background-image")}}</li> + <li>{{cssxref("background-origin")}}</li> + <li>{{cssxref("background-position")}}</li> + <li>{{cssxref("background-repeat")}}</li> + <li>{{cssxref("background-size")}}</li> + <li>{{cssxref("box-shadow")}}</li> + <li>{{cssxref("border")}}</li> + <li>{{cssxref("border-bottom")}}</li> + <li>{{cssxref("border-bottom-color")}}</li> + <li>{{cssxref("border-bottom-left-radius")}}</li> + <li>{{cssxref("border-bottom-right-radius")}}</li> + <li>{{cssxref("border-bottom-style")}}</li> + <li>{{cssxref("border-bottom-width")}}</li> + <li>{{cssxref("border-collapse")}}</li> + <li>{{cssxref("border-color")}}</li> + <li>{{cssxref("border-image")}}</li> + <li>{{cssxref("border-image-outset")}}</li> + <li>{{cssxref("border-image-repeat")}}</li> + <li>{{cssxref("border-image-slice")}}</li> + <li>{{cssxref("border-image-source")}}</li> + <li>{{cssxref("border-image-width")}}</li> + <li>{{cssxref("border-left")}}</li> + <li>{{cssxref("border-left-color")}}</li> + <li>{{cssxref("border-left-style")}}</li> + <li>{{cssxref("border-left-width")}}</li> + <li>{{cssxref("border-radius")}}</li> + <li>{{cssxref("border-right")}}</li> + <li>{{cssxref("border-right-color")}}</li> + <li>{{cssxref("border-right-style")}}</li> + <li>{{cssxref("border-right-width")}}</li> + <li>{{cssxref("border-style")}}</li> + <li>{{cssxref("border-top")}}</li> + <li>{{cssxref("border-top-color")}}</li> + <li>{{cssxref("border-top-left-radius")}}</li> + <li>{{cssxref("border-top-right-radius")}}</li> + <li>{{cssxref("border-top-style")}}</li> + <li>{{cssxref("border-top-width")}}</li> + <li>{{cssxref("border-width")}}</li> +</ul> +</div> + +<h2 id="Guides">Guides</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds">Using CSS multiple backgrounds</a></dt> + <dd>Explains how to set backgrounds on elements and how they will interact with it.</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Background_and_Borders/Scaling_background_images">Scaling background images</a></dt> + <dd>Describes how to change the appearance of the background images, by stretching them or repeating them, to cover the whole background of the element, or not.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Backgrounds') }}</td> + <td>{{ Spec2('CSS3 Backgrounds') }}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'box.html')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#border')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable()}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>4.0</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatGeckoMobile("1.9.2")}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/de/web/css/css_background_and_borders/mehrere_hintergründe_in_css_verwenden/index.html b/files/de/web/css/css_background_and_borders/mehrere_hintergründe_in_css_verwenden/index.html new file mode 100644 index 0000000000..4c0b1e58ec --- /dev/null +++ b/files/de/web/css/css_background_and_borders/mehrere_hintergründe_in_css_verwenden/index.html @@ -0,0 +1,69 @@ +--- +title: Mehrere Hintergründe in CSS verwenden +slug: Web/CSS/CSS_Background_and_Borders/Mehrere_Hintergründe_in_CSS_verwenden +tags: + - Beispiel + - CSS + - CSS Hintergrund + - Guide + - Intermediate +translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds +--- +<p>{{CSSRef}}</p> + +<p><span class="seoSummary">Mit <a href="/de/docs/Web/CSS/CSS3">CSS3</a> können einem Element mehrere Hintergründe zugewiesen werden. Diese werden aufeinander gestapelt wobei der erste Hintergrund zuoberst ist und der letzte zuunterst. Nur dem untersten Hintergrund kann eine Hintergrundfarbe zugewiesen werden.</span></p> + +<p>Mehrere Hintergründe festzulegen ist einfach:</p> + +<pre class="brush: css">.myclass { + background: background1, background 2, ..., background; +} +</pre> + +<p>Du kannst dies mit beiden Varianten, der verkürzten {{cssxref("background")}} Eigenschaft und dem Einzel-Eigenschafts-Selektor davon ausser {{cssxref("background-color")}}. Die folgenden Hintergrund Eigenschaften können als Liste festgelegt werden, eine pro Hintergrund: {{cssxref("background")}}, {{cssxref("background-attachment")}}, {{cssxref("background-clip")}},<code> </code>{{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}.</p> + +<h2 id="Beispiel">Beispiel</h2> + +<p>In diesem Beispiel werden drei Hintergründe übereinandergelegt: das Firefox Logo, ein <a href="/de/docs/Web/CSS/linear-gradient">linearer Farbverlauf</a> und ein Bild mit Blasen:</p> + +<pre class="brush: css">.multi_bg_example { + background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png), + url(https://mdn.mozillademos.org/files/11307/bubbles.png), + linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)); + + background-repeat: no-repeat, + no-repeat, + no-repeat; + + background-position: bottom right, + left, + right; +} +</pre> + +<div class="hidden"> +<pre class="brush: html"><div class="multi_bg_example"></div></pre> + +<pre class="brush: css">.multi_bg_example { + width:100%; + height:400px; + background: url(https://mdn.mozillademos.org/files/11305/firefox.png), + url(https://mdn.mozillademos.org/files/11307/bubbles.png), + -moz-linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), + -webkit-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), + -ms-linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), + linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)); +}</pre> +</div> + +<h2 id="Ergebnis">Ergebnis</h2> + +<p>{{EmbedLiveSample('Beispiel', '100%', '400')}}</p> + +<p>Wie oben zu erkennen ist, liegt das Firefox Logo (als erstes aufgelistet) zuoberst, gefolgt vom Hintergrund mit Blasen, welcher wiederum auf dem Farbverlauf liegt. Jede nachfolgende Untereigenschaft ({{cssxref("background-repeat")}} und {{cssxref("background-position")}}) gilt für den entsprechenden Hintergrund. Demzufolge gilt der erste aufgelistete Wert für {{cssxref("background-repeat")}} für den ersten (vordersten) Hintergrund und so weiter.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Farbverläufe_in_CSS">Verwendung von CSS Farbverläufen</a></li> +</ul> diff --git a/files/de/web/css/css_basic_user_interface/index.html b/files/de/web/css/css_basic_user_interface/index.html new file mode 100644 index 0000000000..6b0f5e652e --- /dev/null +++ b/files/de/web/css/css_basic_user_interface/index.html @@ -0,0 +1,76 @@ +--- +title: CSS Basic User Interface +slug: Web/CSS/CSS_Basic_User_Interface +tags: + - CSS + - CSS Basic User Interface + - Overview + - Reference + - Referenz + - Übersicht +translation_of: Web/CSS/CSS_Basic_User_Interface +--- +<p>{{CSSRef}}</p> + +<p><strong>CSS Basic User Interface</strong> ist ein CSS Modul, das es erlaubt, die Darstellung und Funktionalität von Benutzerschnittstellenfeatures zu definieren.</p> + +<h2 id="Referenz">Referenz</h2> + +<h3 id="Einstellungen">Einstellungen</h3> + +<div class="index"> +<ul> + <li>{{CSSxRef("appearance")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("box-sizing")}}</li> + <li>{{CSSxRef("cursor")}}</li> + <li>{{CSSxRef("ime-mode")}} {{Deprecated_Inline}}</li> + <li>{{CSSxRef("nav-down")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("nav-left")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("nav-right")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("nav-up")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("outline")}}</li> + <li>{{CSSxRef("outline-width")}}</li> + <li>{{CSSxRef("outline-style")}}</li> + <li>{{CSSxRef("outline-color")}}</li> + <li>{{CSSxRef("outline-offset")}}</li> + <li>{{CSSxRef("resize")}}</li> + <li>{{CSSxRef("text-overflow")}}</li> + <li>{{CSSxRef("user-select")}} {{Experimental_Inline}}</li> +</ul> +</div> + +<h2 id="Anleitungen">Anleitungen</h2> + +<dl> + <dt><a href="/de/docs/Web/CSS/CSS_User_Interface/Verwendung_von_URL_Werten_für_die_cursor_Eigenschaft">Verwendung von URL Werten für die <code>cursor</code> Eigenschaft</a></dt> + <dd>Erklärt und zeigt, wie ein URL für die {{cssxref('cursor')}} Eigenschaft angegeben werden kann, um benutzerdefinierte Mauszeiger zu erstellen.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezification</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS4 Basic UI")}}</td> + <td>{{Spec2("CSS4 Basic UI")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("CSS3 Basic UI")}}</td> + <td>{{Spec2("CSS3 Basic UI")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("CSS2.1", "ui.html")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td>Ursprüngliche Definition.</td> + </tr> + </tbody> +</table> diff --git a/files/de/web/css/css_boxmodell/box-shadow_generator/index.html b/files/de/web/css/css_boxmodell/box-shadow_generator/index.html new file mode 100644 index 0000000000..b087898d03 --- /dev/null +++ b/files/de/web/css/css_boxmodell/box-shadow_generator/index.html @@ -0,0 +1,2884 @@ +--- +title: Box-shadow Generator +slug: Web/CSS/CSS_Boxmodell/Box-shadow_generator +tags: + - CSS3 + - Werkzeuge + - box-shadow +translation_of: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator +--- +<p>Dieses Werkzeug erlaubt es, CSS {{cssxref("box-shadow")}} Effekte zu erstellen, um Schlagschatteneffekte zu CSS Objekten hinzuzufügen.</p> + +<div style="display: none;"> +<h2 id="box-shadow_generator" name="box-shadow_generator">box-shadow generator</h2> + +<h3 id="HTML_Content">HTML Content</h3> + +<pre class="brush: html"><div id="container"> + <div class="group section"> + <div id="layer_manager"> + <div class="group section"> + <div class="button" data-type="add"> </div> + <div class="button" data-type="move-up"> </div> + <div class="button" data-type="move-down"> </div> + </div> + <div id="stack_container"></div> + </div> + + <div id="preview_zone"> + <div id="layer_menu" class="col span_12"> + <div class="button" id="element" data-type="subject" data-title="element"> element </div> + <div class="button" id="before" data-type="subject" data-title=":before"> + :before + <span class="delete" data-type="disable"></span> + </div> + <div class="button" id="after" data-type="subject" data-title=":after"> + :after + <span class="delete" data-type="disable"></span> + </div> + <div class="ui-checkbox" data-topic='before' data-label=":before"></div> + <div class="ui-checkbox" data-topic='after' data-label=":after"></div> + </div> + + <div id="preview"> + <div id="obj-element"> + <div class="content"> </div> + <div id="obj-before"> </div> + <div id="obj-after"> </div> + </div> + </div> + </div> + </div> + + <div id="controls" class="group section"> + <div class="wrap-left"> + <div class="colorpicker category"> + <div class="title"> </div> + <div id="colorpicker" class="group"> + <div id="gradient" class="gradient"> + <div id="gradient_picker"> </div> + </div> + <div id="hue" data-topic="hue" class="hue"> + <div id="hue_selector"> </div> + </div> + <div class="info"> + <div class="input" data-topic="hue" data-title='H:' data-action="HSV"></div> + <div class="input" data-topic="saturation" data-title='S:' data-action="HSV"></div> + <div class="input" data-topic="value" data-title='V:' data-action="HSV"></div> + </div> + <div class="alpha"> + <div id="alpha" data-topic="alpha"> + <div id="alpha_selector"> </div> + </div> + </div> + <div class="info"> + <div class="input" data-topic="r" data-title='R:' data-action="RGB"></div> + <div class="input" data-topic="g" data-title='G:' data-action="RGB"></div> + <div class="input" data-topic="b" data-title='B:' data-action="RGB"></div> + </div> + <div class="preview block"> + <div id="output_color"> </div> + </div> + <div class="block info"> + <div class="input" data-topic="a" data-title='alpha:' data-action="alpha"></div> + <div class="input" data-topic="hexa" data-title='' data-action="hexa"></div> + </div> + </div> + </div> + </div> + + <div class="wrap-right"> + + <div id="shadow_properties" class="category"> + <div class="title"> Shadow properties </div> + <div class="group"> + <div class="group property"> + <div class="ui-slider-name"> inset </div> + <div class="ui-checkbox" data-topic='inset'></div> + </div> + <div class="slidergroup"> + <div class="ui-slider-name"> Position x </div> + <div class="ui-slider-btn-set" data-topic="posX" data-type="sub"></div> + <div class="ui-slider" data-topic="posX" + data-min="-500" data-max="500" data-step="1"> </div> + <div class="ui-slider-btn-set" data-topic="posX" data-type="add"></div> + <div class="ui-slider-input" data-topic="posX" data-unit="px"></div> + </div> + <div class="slidergroup"> + <div class="ui-slider-name"> Position y </div> + <div class="ui-slider-btn-set" data-topic="posY" data-type="sub"></div> + <div class="ui-slider" data-topic="posY" + data-min="-500" data-max="500" data-step="1"> </div> + <div class="ui-slider-btn-set" data-topic="posY" data-type="add"></div> + <div class="ui-slider-input" data-topic="posY" data-unit="px"></div> + </div> + <div class="slidergroup"> + <div class="ui-slider-name"> Blur </div> + <div class="ui-slider-btn-set" data-topic="blur" data-type="sub"></div> + <div class="ui-slider" data-topic="blur" + data-min="0" data-max="200" data-step="1"> </div> + <div class="ui-slider-btn-set" data-topic="blur" data-type="add"></div> + <div class="ui-slider-input" data-topic="blur" data-unit="px"></div> + </div> + <div class="slidergroup"> + <div class="ui-slider-name"> Spread </div> + <div class="ui-slider-btn-set" data-topic="spread" data-type="sub"></div> + <div class="ui-slider" data-topic="spread" + data-min="-100" data-max="100" data-step="1" data-value="50"> + </div> + <div class="ui-slider-btn-set" data-topic="spread" data-type="add"></div> + <div class="ui-slider-input" data-topic="spread" data-unit="px"></div> + </div> + </div> + </div> + + <div id="element_properties" class="category"> + <div class="title"> Class element properties </div> + <div class="group"> + <div class="group property"> + <div class="ui-slider-name"> border </div> + <div class="ui-checkbox" data-topic='border-state' data-state="true"></div> + </div> + <div id="z-index" class="slidergroup"> + <div class="ui-slider-name"> z-index </div> + <div class="ui-slider-btn-set" data-topic="z-index" data-type="sub"></div> + <div class="ui-slider" data-topic="z-index" + data-min="-10" data-max="10" data-step="1"></div> + <div class="ui-slider-btn-set" data-topic="z-index" data-type="add"></div> + <div class="ui-slider-input" data-topic="z-index"></div> + </div> + <div class="slidergroup"> + <div class="ui-slider-name"> top </div> + <div class="ui-slider-btn-set" data-topic="top" data-type="sub"></div> + <div class="ui-slider" data-topic="top" + data-min="-500" data-max="500" data-step="1"> </div> + <div class="ui-slider-btn-set" data-topic="top" data-type="add"></div> + <div class="ui-slider-input" data-topic="top" data-unit="px"></div> + </div> + <div class="slidergroup"> + <div class="ui-slider-name"> left </div> + <div class="ui-slider-btn-set" data-topic="left" data-type="sub"></div> + <div class="ui-slider" data-topic="left" + data-min="-300" data-max="700" data-step="1"> </div> + <div class="ui-slider-btn-set" data-topic="left" data-type="add"></div> + <div class="ui-slider-input" data-topic="left" data-unit="px"></div> + </div> + <div id="transform_rotate" class="slidergroup"> + <div class="ui-slider-name"> Rotate </div> + <div class="ui-slider-btn-set" data-topic="rotate" data-type="sub"></div> + <div class="ui-slider" data-topic="rotate" + data-min="-360" data-max="360" data-step="1" data-value="0"> + </div> + <div class="ui-slider-btn-set" data-topic="rotate" data-type="add"></div> + <div class="ui-slider-input" data-topic="rotate" data-unit="deg"></div> + </div> + <div class="slidergroup"> + <div class="ui-slider-name"> Width </div> + <div class="ui-slider-btn-set" data-topic="width" data-type="sub"></div> + <div class="ui-slider" data-topic="width" + data-min="0" data-max="1000" data-step="1" data-value="200"> + </div> + <div class="ui-slider-btn-set" data-topic="width" data-type="add"></div> + <div class="ui-slider-input" data-topic="width" data-unit="px"></div> + </div> + <div class="slidergroup"> + <div class="ui-slider-name"> Height </div> + <div class="ui-slider-btn-set" data-topic="height" data-type="sub"></div> + <div class="ui-slider" data-topic="height" + data-min="0" data-max="400" data-step="1" data-value="200"> + </div> + <div class="ui-slider-btn-set" data-topic="height" data-type="add"></div> + <div class="ui-slider-input" data-topic="height" data-unit="px"></div> + </div> + </div> + </div> + + <div id="output" class="category"> + <div id="menu" class="menu"></div> + <div class="title"> CSS Code </div> + <div class="group" style="border-top-left-radius: 0;"> + <div class="output" data-topic="element" data-name="element" + data-prop="width height background-color position=[relative] box-shadow"> + </div> + <div class="output" data-topic="before" data-name="element:before" + data-prop="content=[&quot;&quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform"> + </div> + <div class="output" data-topic="after" data-name="element:after" + data-prop="content=[&quot;&quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform"> + </div> + </div> + </div> + </div> + </div> +</div> +</pre> + +<h3 id="CSS_Content">CSS Content</h3> + +<pre class="brush: css">/* GRID OF TWELVE + * ========================================================================== */ + +.span_12 { + width: 100%; +} + +.span_11 { + width: 91.46%; +} + +.span_10 { + width: 83%; +} + +.span_9 { + width: 74.54%; +} + +.span_8 { + width: 66.08%; +} + +.span_7 { + width: 57.62%; +} + +.span_6 { + width: 49.16%; +} + +.span_5 { + width: 40.7%; +} + +.span_4 { + width: 32.24%; +} + +.span_3 { + width: 23.78%; +} + +.span_2 { + width: 15.32%; +} + +.span_1 { + width: 6.86%; +} + + +/* SECTIONS + * ========================================================================== */ + +.section { + clear: both; + padding: 0px; + margin: 0px; +} + +/* GROUPING + * ========================================================================== */ + + +.group:before, .group:after { + content: ""; + display: table; +} + +.group:after { + clear:both; +} + +.group { + zoom: 1; /* For IE 6/7 (trigger hasLayout) */ +} + +/* GRID COLUMN SETUP + * ========================================================================== */ + +.col { + display: block; + float:left; + margin: 1% 0 1% 1.6%; +} + +.col:first-child { + margin-left: 0; +} /* all browsers except IE6 and lower */ + +/* + * UI Slider + */ + +.slidergroup { + height: 20px; + margin: 10px 0; + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + -moz-user-select: none; + user-select: none; +} + +.slidergroup * { + float: left; + height: 100%; + line-height: 100%; +} + +/* Slider */ + +.ui-slider { + height: 10px; + width: 200px; + margin: 4px 10px; + display: block; + border: 1px solid #999; + border-radius: 3px; + background: #EEE; +} + +.ui-slider:hover { + cursor: pointer; +} + +.ui-slider-name { + width: 90px; + padding: 0 10px 0 0; + text-align: right; + text-transform: lowercase; +} + +.ui-slider-pointer { + width: 13px; + height: 13px; + background-color: #EEE; + border: 1px solid #2C9FC9; + border-radius: 3px; + position: relative; + top: -3px; + left: 0%; +} + +.ui-slider-btn-set { + width: 25px; + background-color: #2C9FC9; + border-radius: 3px; + color: #FFF; + font-weight: bold; + text-align: center; +} + +.ui-slider-btn-set:hover { + background-color: #379B4A; + cursor: pointer; +} + +.ui-slider-input > input { + margin: 0 10px; + padding: 0; + width: 50px; + text-align: center; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +/* + * UI Button + */ + +/* Checkbox */ + +.ui-checkbox { + text-align: center; + font-size: 16px; + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + line-height: 1.5em; + color: #FFF; + + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.ui-checkbox > input { + display: none; +} + +.ui-checkbox > label { + font-size: 12px; + padding: 0.333em 1.666em 0.5em; + height: 1em; + line-height: 1em; + + background-color: #888; + background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png"); + background-position: center center; + background-repeat: no-repeat; + + color: #FFF; + border-radius: 3px; + font-weight: bold; + float: left; +} + +.ui-checkbox .text { + padding-left: 34px; + background-position: center left 10px; +} + +.ui-checkbox .left { + padding-right: 34px; + padding-left: 1.666em; + background-position: center right 10px; +} + +.ui-checkbox > label:hover { + cursor: pointer; +} + +.ui-checkbox > input:checked + label { + background-image: url("https://mdn.mozillademos.org/files/5681/checked.png"); + background-color: #379B4A; +} + +/* + * BOX SHADOW GENERATOR TOOL + */ + +body { + max-width: 1000px; + height: 800px; + margin: 20px auto 0; + + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; +} + +#container { + width: 100%; + padding: 2px; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + + +/* container with shadows stacks */ +#stack_container { + height: 400px; + overflow: hidden; + position: relative; + border: 1px solid #CCC; + border-radius: 3px; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +#stack_container .container { + height: 100%; + width: 100%; + position: absolute; + left: 100%; + transition-property: left; + transition-duration: 0.5s; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + + +#stack_container .title { + text-align: center; + font-weight: bold; + line-height: 2em; + border-bottom: 1px solid #43A6E1; + color: #666; +} + + +/* + * Stack of Layers for shadow + */ + +#layer_manager { + width: 17%; + background-color: #FEFEFE; + margin: 0 1% 0 0; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + float: left; +} + + +#layer_manager .button { + width: 30%; + height: 25px; + margin:0 0 10px; + color: #333; + background-color: #EEE; + text-align: center; + font-size: 0.75em; + line-height: 1.5em; + border: 1px solid #CCC; + border-radius: 3px; + + display: block; + background-position: center center; + background-repeat: no-repeat; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + float: left; +} + +#layer_manager .button:hover { + background-color: #3380C4; + border: 1px solid #3380C4; + cursor: pointer; +} + +#layer_manager [data-type='add'] { + background-image: url("https://mdn.mozillademos.org/files/5685/add-black.png"); +} + +#layer_manager [data-type='add']:hover { + background-image: url("https://mdn.mozillademos.org/files/5687/add-white.png"); +} + +#layer_manager [data-type='move-up'] { + background-image: url("https://mdn.mozillademos.org/files/5697/up-black.png"); + margin-left: 5%; + margin-right: 5%; +} + +#layer_manager [data-type='move-up']:hover { + background-image: url("https://mdn.mozillademos.org/files/5709/up-white.png"); +} + +#layer_manager [data-type='move-down'] { + background-image: url("https://mdn.mozillademos.org/files/5693/down-black.png"); +} + +#layer_manager [data-type='move-down']:hover { + background-image: url("https://mdn.mozillademos.org/files/5695/down-white.png"); +} + +/* shadows classes */ + +#layer_manager .node { + width: 100%; + margin: 5px 0; + padding: 5px; + text-align: center; + background-color: #EEE; + border: 1px solid #DDD; + font-size: 0.75em; + line-height: 1.5em; + color: #333; + border-radius: 3px; + + position: relative; + display: block; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +#layer_manager .node:hover { + color: #FFF; + background-color: #3380C4; + cursor: pointer; +} + +/* active element styling */ + +#layer_manager [data-active='layer'] { + color: #FFF; + border: none; + background-color: #379B4A; +} + +#layer_manager [data-active='subject'] { + color: #FFF; + background-color: #467FC9; +} + +/* delete button */ + +#layer_manager .delete { + width: 1.5em; + height: 100%; + float: right; + border-radius: 3px; + background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png"); + background-position: center center; + background-repeat: no-repeat; + position: absolute; + top: 0; + right: 10px; + display: none; +} + +#layer_manager .delete:hover { + background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png"); +} + +#layer_manager .node:hover .delete { + display: block; +} + + +#layer_manager .stack { + padding: 0 5px; + max-height: 90%; + overflow: auto; + overflow-x: hidden; +} + + +/* + * Layer Menu + */ + +#layer_menu { + margin: 0 0 10px 0; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +#layer_menu .button { + width: 100px; + margin: 0 5px 0 0; + padding: 2.5px; + color: #333; + background-color: #EEE; + border: 1px solid #CCC; + border-radius: 3px; + text-align: center; + font-size: 0.75em; + line-height: 1.5em; + + position: relative; + display: block; + float: left; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +#layer_menu .button:hover { + color: #FFF; + background-color: #3380C4; + border: 1px solid #3380C4; + cursor: pointer; +} + +#layer_menu .delete { + width: 1.5em; + height: 100%; + float: right; + border-radius: 3px; + background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png"); + background-position: center center; + background-repeat: no-repeat; + position: absolute; + top: 0; + right: 5px; + display: none; +} + +#layer_menu .delete:hover { + background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png"); +} + +#layer_menu .button:hover .delete { + display: block; +} + + +/* + * active element styling + */ + +#layer_menu [data-active='subject'] { + color: #FFF; + background-color: #379B4A; + border: 1px solid #379B4A; +} + + +/* Checkbox */ + +#layer_menu .ui-checkbox > label { + height: 15px; + line-height: 17px; + font-weight: normal; + width: 46px; + margin: 0 5px 0 0; +} + +#layer_menu .ui-checkbox > input:checked + label { + display: none; +} + + +/******************************************************************************/ +/******************************************************************************/ +/* + * Preview Area + */ + +#preview_zone { + width: 82%; + float: left; + +} + + +#preview { + width: 100%; + height: 400px; + border: 1px solid #CCC; + border-radius: 3px; + text-align: center; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + cursor: move; + float: left; +} + +#preview .content { + width: 100%; + height: 100%; + display: block; +} + +#obj-element { + width: 300px; + height: 100px; + border: 1px solid #CCC; + background: #FFF; + position: relative; +} + + +#obj-before { + height: 100%; + width: 100%; + background: #999; + border: 1px solid #CCC; + text-align: left; + display : block; + position: absolute; + z-index: -1; +} + +#obj-after { + height: 100%; + width: 100%; + background: #DDD; + border: 1px solid #CCC; + text-align: right; + display : block; + position: absolute; + z-index: -1; +} + + +/******************************************************************************/ +/******************************************************************************/ + +/** + * Controls + */ + +.wrap-left { + float: left; + overflow: hidden; +} + +.wrap-right { + float: right; + overflow: hidden; +} + +.wrap-left > * { + float: left; +} + +.wrap-right > * { + float: right; +} + +@media (min-width: 960px) { + + .wrap-left { + width: 45%; + } + + .wrap-right { + width: 55%; + } +} + + +@media (max-width: 959px) { + + .wrap-left { + width: 30%; + } + + .wrap-right { + width: 70%; + } +} + + +#controls { + color: #444; + margin: 10px 0 0 0; +} + + +#controls .category { + width: 500px; + margin: 0 auto 20px; + padding: 0; + +} + +#controls .category .title { + width: 100%; + height: 1.5em; + line-height: 1.5em; + color: #AAA; + text-align: right; +} + +#controls .category > .group { + border: 1px solid #CCC; + border-radius: 3px; +} + + +/** + * Color Picker + */ + +@media (min-width: 960px) { + #controls .colorpicker { + width: 420px; + } +} + +@media (max-width: 959px) { + #controls .colorpicker { + width: 210px; + } +} + +#colorpicker { + width: 100%; + margin: 0 auto; +} + +#colorpicker .gradient { + width: 200px; + height: 200px; + margin: 5px; + background: url("https://mdn.mozillademos.org/files/5707/picker_mask_200.png"); + background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), + -moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%); + background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), + -webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%); + background-color: #F00; + float: left; +} + +#colorpicker .hue { + width: 200px; + height: 30px; + margin: 5px; + background: url("https://mdn.mozillademos.org/files/5701/hue.png"); + background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, + #00F 66.66%, #F0F 83.33%, #F00 100%); + background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, + #00F 66.66%, #F0F 83.33%, #F00 100%); + float: left; +} + +#colorpicker .alpha { + width: 200px; + height: 30px; + margin: 5px; + border: 1px solid #CCC; + float: left; + background: url("https://mdn.mozillademos.org/files/5705/alpha.png"); + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +#colorpicker #alpha { + width: 100%; + height: 100%; + background: url("https://mdn.mozillademos.org/files/5703/alpha_mask.png"); + background: -moz-linear-gradient(left, rgba(255, 0, 0, 0) 0%, rgba(255, 0, 0, 1) 100%); +} + +#colorpicker #gradient_picker { + width: 0.5em; + height: 0.5em; + border-radius: 0.4em; + border: 2px solid #CCC; + position: relative; + top: 20%; + left: 20%; +} + +#colorpicker #hue_selector, +#colorpicker #alpha_selector { + width: 3px; + height: 100%; + border: 1px solid #777; + background-color: #FFF; + position: relative; + top: -1px; + left: 0%; +} + +/* input HSV and RGB */ +#colorpicker .info { + width: 200px; + margin: 5px; + float: left; +} + +#colorpicker .info * { + float: left; +} + +#colorpicker .info input { + margin: 0; + text-align: center; + width: 30px; + -moz-user-select: text; + -webkit-user-select: text; + -ms-user-select: text; +} + +#colorpicker .info span { + height: 20px; + width: 30px; + text-align: center; + line-height: 20px; + display: block; +} + +/* Preview color */ +#colorpicker .block { + width: 95px; + height: 54px; + float: left; + position: relative; +} + +#colorpicker .preview { + margin: 5px; + border: 1px solid #CCC; + background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png"); + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +#colorpicker .preview:before { + height: 100%; + width: 50%; + left: 50%; + content: ""; + background: #FFF; + position: absolute; + z-index: 1; +} + +#colorpicker .preview > * { + width: 50%; + height: 100%; +} + +#colorpicker #output_color { + width: 100%; + height: 100%; + position: absolute; + z-index: 2; +} + +#colorpicker .block .input { + float: right; +} + +#colorpicker [data-topic="a"] > span { + width: 50px; +} + +#colorpicker [data-topic="hexa"] { + float: right; + margin: 10px 0 0 0; +} + +#colorpicker [data-topic="hexa"] > span { + display: none; +} + +#colorpicker [data-topic="hexa"] > input { + width: 85px; + padding: 2px 0; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + + +/* + * UI Components + */ + +/* Property */ + +.property { + height: 20px; + margin: 10px 0; +} + +.property * { + float: left; + height: 100%; + line-height: 100%; +} + +/* Slider */ + +#controls .ui-slider-name { + margin: 0 10px 0 0; +} + +/* + * Output code styling + */ + +#output { + position: relative; +} + +#output .menu { + max-width: 70%; + height: 20px; + position: absolute; + top: 2px; +} + +#output .button { + width: 90px; + height: 22px; + margin: 0 5px 0 0; + text-align: center; + line-height: 20px; + font-size: 14px; + color: #FFF; + background-color: #999; + border-top-left-radius: 3px; + border-top-right-radius: 3px; + bottom: -5px; + float:left; +} + +#output .button:hover { + color: #FFF; + background-color: #666; + cursor: pointer; +} + +#output .menu [data-active="true"] { + color: #777; + background-color: #FFF; + border: 1px solid #CCC; + border-bottom: none; +} + +#output .menu [data-topic="before"] { + left: 100px; +} + +#output .menu [data-topic="after"] { + left: 200px; +} + +#output .output { + width: 480px; + margin: 10px; + padding: 10px; + overflow: hidden; + color: #555; + font-size: 14px; + border: 1px dashed #CCC; + border-radius: 3px; + display: none; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + + -moz-user-select: text; + -webkit-user-select: text; + -ms-user-select: text; +} + +#output .css-property { + width: 100%; + float: left; + white-space: pre; +} + +#output .name { + width: 35%; + float: left; +} + +#output .value { + width: 65%; + float: left; +} + +</pre> + +<h3 id="JavaScript_Content">JavaScript Content</h3> + +<pre class="brush: js"><code class="language-js"> + +'use strict'; + +/** + * UI-SlidersManager + */ + +var SliderManager = (function SliderManager() { + + var subscribers = {}; + var sliders = []; + + var Slider = function(node) { + var min = node.getAttribute('data-min') | 0; + var max = node.getAttribute('data-max') | 0; + var step = node.getAttribute('data-step') | 0; + var value = node.getAttribute('data-value') | 0; + var snap = node.getAttribute('data-snap'); + var topic = node.getAttribute('data-topic'); + + this.min = min; + this.max = max > 0 ? max : 100; + this.step = step === 0 ? 1 : step; + this.value = value <= max && value >= min ? value : (min + max) / 2 | 0; + this.snap = snap === "true" ? true : false; + this.topic = topic; + this.node = node; + + var pointer = document.createElement('div'); + pointer.className = 'ui-slider-pointer'; + node.appendChild(pointer); + this.pointer = pointer; + + setMouseTracking(node, updateSlider.bind(this)); + + sliders[topic] = this; + setValue(topic, this.value); + } + + var setButtonComponent = function setButtonComponent(node) { + var type = node.getAttribute('data-type'); + var topic = node.getAttribute('data-topic'); + if (type === "sub") { + node.textContent = '-'; + node.addEventListener("click", function() { + decrement(topic); + }); + } + if (type === "add") { + node.textContent = '+'; + node.addEventListener("click", function() { + increment(topic); + }); + } + } + + var setInputComponent = function setInputComponent(node) { + var topic = node.getAttribute('data-topic'); + var unit_type = node.getAttribute('data-unit'); + + var input = document.createElement('input'); + var unit = document.createElement('span'); + unit.textContent = unit_type; + + input.setAttribute('type', 'text'); + node.appendChild(input); + node.appendChild(unit); + + input.addEventListener('click', function(e) { + this.select(); + }); + + input.addEventListener('change', function(e) { + setValue(topic, e.target.value | 0); + }); + + subscribe(topic, function(value) { + node.children[0].value = value; + }); + } + + var increment = function increment(topic) { + var slider = sliders[topic]; + if (slider === null || slider === undefined) + return; + + if (slider.value + slider.step <= slider.max) { + slider.value += slider.step; + setValue(slider.topic, slider.value) + notify.call(slider); + } + }; + + var decrement = function decrement(topic) { + var slider = sliders[topic]; + if (slider === null || slider === undefined) + return; + + if (slider.value - slider.step >= slider.min) { + slider.value -= slider.step; + setValue(topic, slider.value) + notify.call(slider); + } + } + + // this = Slider object + var updateSlider = function updateSlider(e) { + var node = this.node; + var pos = e.pageX - node.offsetLeft; + var width = node.clientWidth; + var delta = this.max - this.min; + var offset = this.pointer.clientWidth + 4; // border width * 2 + + if (pos < 0) pos = 0; + if (pos > width) pos = width; + + var value = pos * delta / width | 0; + var precision = value % this.step; + value = value - precision + this.min; + if (precision > this.step / 2) + value = value + this.step; + + if (this.snap) + pos = (value - this.min) * width / delta; + + this.pointer.style.left = pos - offset/2 + "px"; + this.value = value; + node.setAttribute('data-value', value); + notify.call(this); + } + + var setValue = function setValue(topic, value) { + var slider = sliders[topic]; + + if (value > slider.max || value < slider.min) + return; + + var delta = slider.max - slider.min; + var width = slider.node.clientWidth; + var offset = slider.pointer.clientWidth; + var pos = (value - slider.min) * width / delta; + slider.value = value; + slider.pointer.style.left = pos - offset / 2 + "px"; + slider.node.setAttribute('data-value', value); + notify.call(slider); + } + + var setMouseTracking = function setMouseTracking(elem, callback) { + elem.addEventListener("mousedown", function(e) { + callback(e); + document.addEventListener("mousemove", callback); + }); + + document.addEventListener("mouseup", function(e) { + document.removeEventListener("mousemove", callback); + }); + } + + var subscribe = function subscribe(topic, callback) { + if (subscribers[topic] === undefined) + subscribers[topic] = []; + subscribers[topic].push(callback); + } + + var unsubscribe = function unsubscribe(topic, callback) { + subscribers[topic].indexOf(callback); + subscribers[topic].splice(index, 1); + } + + var notify = function notify() { + if (subscribers[this.topic] === undefined) + return; + + for (var i in subscribers[this.topic]) { + subscribers[this.topic][i](this.value); + } + } + + var init = function init() { + var elem, size; + + elem = document.querySelectorAll('.ui-slider-btn-set'); + size = elem.length; + for (var i = 0; i < size; i++) + setButtonComponent(elem[i]); + + elem = document.querySelectorAll('.ui-slider-input'); + size = elem.length; + for (var i = 0; i < size; i++) + setInputComponent(elem[i]); + + elem = document.querySelectorAll('.ui-slider'); + size = elem.length; + for (var i = 0; i < size; i++) + new Slider(elem[i]); + } + + return { + init : init, + setValue : setValue, + subscribe : subscribe, + unsubscribe : unsubscribe + } + +})(); + +/** + * UI-ButtonManager + */ + +var ButtonManager = (function CheckBoxManager() { + + var subscribers = []; + var buttons = []; + + var CheckBox = function CheckBox(node) { + var topic = node.getAttribute('data-topic'); + var state = node.getAttribute('data-state'); + var name = node.getAttribute('data-label'); + var align = node.getAttribute('data-text-on'); + + state = (state === "true"); + + var checkbox = document.createElement("input"); + var label = document.createElement("label"); + + var id = 'checkbox-' + topic; + checkbox.id = id; + checkbox.setAttribute('type', 'checkbox'); + checkbox.checked = state; + + label.setAttribute('for', id); + if (name) { + label.className = 'text'; + if (align) + label.className += ' ' + align; + label.textContent = name; + } + + node.appendChild(checkbox); + node.appendChild(label); + + this.node = node; + this.topic = topic; + this.checkbox = checkbox; + + checkbox.addEventListener('change', function(e) { + notify.call(this); + }.bind(this)); + + buttons[topic] = this; + } + + var getNode = function getNode(topic) { + return buttons[topic].node; + } + + var setValue = function setValue(topic, value) { + try { + buttons[topic].checkbox.checked = value; + notify.call(buttons[topic]); + } + catch(error) { + console.log(error, topic, value); + } + } + + var subscribe = function subscribe(topic, callback) { + if (subscribers[topic] === undefined) + subscribers[topic] = []; + + subscribers[topic].push(callback); + } + + var unsubscribe = function unsubscribe(topic, callback) { + subscribers[topic].indexOf(callback); + subscribers[topic].splice(index, 1); + } + + var notify = function notify() { + if (subscribers[this.topic] === undefined) + return; + for (var i = 0; i < subscribers[this.topic].length; i++) + subscribers[this.topic][i](this.checkbox.checked); + } + + var init = function init() { + var elem = document.querySelectorAll('.ui-checkbox'); + var size = elem.length; + for (var i = 0; i < size; i++) + new CheckBox(elem[i]); + } + + return { + init : init, + setValue : setValue, + subscribe : subscribe, + unsubscribe : unsubscribe + } + +})(); + + +window.addEventListener("load", function(){ + BoxShadow.init(); +}); + +var BoxShadow = (function BoxShadow() { + + function getElemById(id) { + return document.getElementById(id); + } + + /** + * RGBA Color class + */ + + function Color() { + this.r = 0; + this.g = 0; + this.b = 0; + this.a = 1; + this.hue = 0; + this.saturation = 0; + this.value = 0; + } + + Color.prototype.copy = function copy(obj) { + if(obj instanceof Color !== true) { + console.log("Typeof instance not Color"); + return; + } + + this.r = obj.r; + this.g = obj.g; + this.b = obj.b; + this.a = obj.a; + this.hue = obj.hue; + this.saturation = obj.saturation; + this.value = obj.value; + } + + Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) { + if (red != undefined) + this.r = red | 0; + if (green != undefined) + this.g = green | 0; + if (blue != undefined) + this.b = blue | 0; + if (alpha != undefined) + this.a = alpha | 0; + } + + /** + * HSV/HSB (hue, saturation, value / brightness) + * @param hue 0-360 + * @param saturation 0-100 + * @param value 0-100 + */ + Color.prototype.setHSV = function setHSV(hue, saturation, value) { + this.hue = hue; + this.saturation = saturation; + this.value = value; + this.updateRGB(); + } + + Color.prototype.updateRGB = function updateRGB() { + var sat = this.saturation / 100; + var value = this.value / 100; + var C = sat * value; + var H = this.hue / 60; + var X = C * (1 - Math.abs(H % 2 - 1)); + var m = value - C; + var precision = 255; + + C = (C + m) * precision; + X = (X + m) * precision; + m = m * precision; + + if (H >= 0 && H < 1) { this.setRGBA(C, X, m); return; } + if (H >= 1 && H < 2) { this.setRGBA(X, C, m); return; } + if (H >= 2 && H < 3) { this.setRGBA(m, C, X); return; } + if (H >= 3 && H < 4) { this.setRGBA(m, X, C); return; } + if (H >= 4 && H < 5) { this.setRGBA(X, m, C); return; } + if (H >= 5 && H < 6) { this.setRGBA(C, m, X); return; } + } + + Color.prototype.updateHSV = function updateHSV() { + var red = this.r / 255; + var green = this.g / 255; + var blue = this.b / 255; + + var cmax = Math.max(red, green, blue); + var cmin = Math.min(red, green, blue); + var delta = cmax - cmin; + var hue = 0; + var saturation = 0; + + if (delta) { + if (cmax === red ) { hue = ((green - blue) / delta); } + if (cmax === green ) { hue = 2 + (blue - red) / delta; } + if (cmax === blue ) { hue = 4 + (red - green) / delta; } + if (cmax) saturation = delta / cmax; + } + + this.hue = 60 * hue | 0; + if (this.hue < 0) this.hue += 360; + this.saturation = (saturation * 100) | 0; + this.value = (cmax * 100) | 0; + } + + Color.prototype.setHexa = function setHexa(value) { + var valid = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value) + if (valid !== true) + return; + + if (value[0] === '#') + value = value.slice(1, value.length); + + if (value.length === 3) + value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,"$1$1$2$2$3$3"); + + this.r = parseInt(value.substr(0, 2), 16); + this.g = parseInt(value.substr(2, 2), 16); + this.b = parseInt(value.substr(4, 2), 16); + + this.alpha = 1; + } + + Color.prototype.getHexa = function getHexa() { + var r = this.r.toString(16); + var g = this.g.toString(16); + var b = this.b.toString(16); + if (this.r < 16) r = '0' + r; + if (this.g < 16) g = '0' + g; + if (this.b < 16) b = '0' + b; + var value = '#' + r + g + b; + return value.toUpperCase(); + } + + Color.prototype.getRGBA = function getRGBA() { + + var rgb = "(" + this.r + ", " + this.g + ", " + this.b; + var a = ''; + var v = ''; + if (this.a !== 1) { + a = 'a'; + v = ', ' + this.a; + } + + var value = "rgb" + a + rgb + v + ")"; + return value; + } + + Color.prototype.getColor = function getColor() { + if (this.a | 0 === 1) + return this.getHexa(); + return this.getRGBA(); + } + + /** + * Shadow Object + */ + function Shadow() { + this.inset = false; + this.posX = 5; + this.posY = -5; + this.blur = 5; + this.spread = 0; + this.color = new Color(); + + var hue = (Math.random() * 360) | 0; + var saturation = (Math.random() * 75) | 0; + var value = (Math.random() * 50 + 50) | 0; + this.color.setHSV(hue, saturation, value, 1); + } + + Shadow.prototype.computeCSS = function computeCSS() { + var value = ""; + if (this.inset === true) + value += "inset "; + value += this.posX + "px "; + value += this.posY + "px "; + value += this.blur + "px "; + value += this.spread + "px "; + value += this.color.getColor(); + + return value; + } + + Shadow.prototype.toggleInset = function toggleInset(value) { + if (value !== undefined || typeof value === "boolean") + this.inset = value; + else + this.inset = this.inset === true ? false : true; + } + + Shadow.prototype.copy = function copy(obj) { + if(obj instanceof Shadow !== true) { + console.log("Typeof instance not Shadow"); + return; + } + + this.inset = obj.inset; + this.posX = obj.posX; + this.posY = obj.posY; + this.blur = obj.blur; + this.spread = obj.spread; + this.color.copy(obj.color); + } + + /** + * Color Picker + */ + var ColoPicker = (function ColoPicker() { + + var colorpicker; + var hue_area; + var gradient_area; + var alpha_area; + var gradient_picker; + var hue_selector; + var alpha_selector; + var pick_object; + var info_rgb; + var info_hsv; + var info_hexa; + var output_color; + var color = new Color(); + var subscribers = []; + + var updateColor = function updateColor(e) { + var x = e.pageX - gradient_area.offsetLeft; + var y = e.pageY - gradient_area.offsetTop; + + // width and height should be the same + var size = gradient_area.clientWidth; + + if (x > size) + x = size; + if (y > size) + y = size; + + if (x < 0) x = 0; + if (y < 0) y = 0; + + var value = 100 - (y * 100 / size) | 0; + var saturation = x * 100 / size | 0; + + color.setHSV(color.hue, saturation, value); + // should update just + // color pointer location + updateUI(); + notify("color", color); + } + + var updateHue = function updateHue(e) { + var x = e.pageX - hue_area.offsetLeft; + var width = hue_area.clientWidth; + + if (x < 0) x = 0; + if (x > width) x = width; + + var hue = ((360 * x) / width) | 0; + if (hue === 360) hue = 359; + + color.setHSV(hue, color.saturation, color.value); + + // should update just + // hue pointer location + // picker area background + // alpha area background + updateUI(); + notify("color", color); + } + + var updateAlpha = function updateAlpha(e) { + var x = e.pageX - alpha_area.offsetLeft; + var width = alpha_area.clientWidth; + + if (x < 0) x = 0; + if (x > width) x = width; + + color.a = (x / width).toFixed(2); + + // should update just + // alpha pointer location + updateUI(); + notify("color", color); + } + + var setHueGfx = function setHueGfx(hue) { + var sat = color.saturation; + var val = color.value; + var alpha = color.a; + + color.setHSV(hue, 100, 100); + gradient_area.style.backgroundColor = color.getHexa(); + + color.a = 0; + var start = color.getRGBA(); + color.a = 1; + var end = color.getRGBA(); + color.a = alpha; + + var gradient = '-moz-linear-gradient(left, ' + start + '0%, ' + end + ' 100%)'; + alpha_area.style.background = gradient; + } + + var updateUI = function updateUI() { + var x, y; // coordinates + var size; // size of the area + var offset; // pointer graphic selector offset + + // Set color pointer location + size = gradient_area.clientWidth; + offset = gradient_picker.clientWidth / 2 + 2; + + x = (color.saturation * size / 100) | 0; + y = size - (color.value * size / 100) | 0; + + gradient_picker.style.left = x - offset + "px"; + gradient_picker.style.top = y - offset + "px"; + + // Set hue pointer location + size = hue_area.clientWidth; + offset = hue_selector.clientWidth/2; + x = (color.hue * size / 360 ) | 0; + hue_selector.style.left = x - offset + "px"; + + // Set alpha pointer location + size = alpha_area.clientWidth; + offset = alpha_selector.clientWidth/2; + x = (color.a * size) | 0; + alpha_selector.style.left = x - offset + "px"; + + // Set picker area background + var nc = new Color(); + nc.copy(color); + if (nc.hue === 360) nc.hue = 0; + nc.setHSV(nc.hue, 100, 100); + gradient_area.style.backgroundColor = nc.getHexa(); + + // Set alpha area background + nc.copy(color); + nc.a = 0; + var start = nc.getRGBA(); + nc.a = 1; + var end = nc.getRGBA(); + var gradient = '-moz-linear-gradient(left, ' + start + '0%, ' + end + ' 100%)'; + alpha_area.style.background = gradient; + + // Update color info + notify("color", color); + notify("hue", color.hue); + notify("saturation", color.saturation); + notify("value", color.value); + notify("r", color.r); + notify("g", color.g); + notify("b", color.b); + notify("a", color.a); + notify("hexa", color.getHexa()); + output_color.style.backgroundColor = color.getRGBA(); + } + + var setInputComponent = function setInputComponent(node) { + var topic = node.getAttribute('data-topic'); + var title = node.getAttribute('data-title'); + var action = node.getAttribute('data-action'); + title = title === null ? '' : title; + + var input = document.createElement('input'); + var info = document.createElement('span'); + info.textContent = title; + + input.setAttribute('type', 'text'); + input.setAttribute('data-action', 'set-' + action + '-' + topic); + node.appendChild(info); + node.appendChild(input); + + input.addEventListener('click', function(e) { + this.select(); + }); + + input.addEventListener('change', function(e) { + if (action === 'HSV') + inputChangeHSV(topic); + if (action === 'RGB') + inputChangeRGB(topic); + if (action === 'alpha') + inputChangeAlpha(topic); + if (action === 'hexa') + inputChangeHexa(topic); + }); + + subscribe(topic, function(value) { + node.children[1].value = value; + }); + } + + var inputChangeHSV = function actionHSV(topic) { + var selector = "[data-action='set-HSV-" + topic + "']"; + var node = document.querySelector("#colorpicker " + selector); + var value = parseInt(node.value); + + if (typeof value === 'number' && isNaN(value) === false && + value >= 0 && value < 360) + color[topic] = value; + + color.updateRGB(); + updateUI(); + } + + var inputChangeRGB = function inputChangeRGB(topic) { + var selector = "[data-action='set-RGB-" + topic + "']"; + var node = document.querySelector("#colorpicker " + selector); + var value = parseInt(node.value); + + if (typeof value === 'number' && isNaN(value) === false && + value >= 0 && value <= 255) + color[topic] = value; + + color.updateHSV(); + updateUI(); + } + + var inputChangeAlpha = function inputChangeAlpha(topic) { + var selector = "[data-action='set-alpha-" + topic + "']"; + var node = document.querySelector("#colorpicker " + selector); + var value = parseFloat(node.value); + + if (typeof value === 'number' && isNaN(value) === false && + value >= 0 && value <= 1) + color.a = value.toFixed(2); + + updateUI(); + } + + var inputChangeHexa = function inputChangeHexa(topic) { + var selector = "[data-action='set-hexa-" + topic + "']"; + var node = document.querySelector("#colorpicker " + selector); + var value = node.value; + color.setHexa(value); + color.updateHSV(); + updateUI(); + } + + var setMouseTracking = function setMouseTracking(elem, callback) { + + elem.addEventListener("mousedown", function(e) { + callback(e); + document.addEventListener("mousemove", callback); + }); + + document.addEventListener("mouseup", function(e) { + document.removeEventListener("mousemove", callback); + }); + } + + /* + * Observer + */ + var setColor = function setColor(obj) { + if(obj instanceof Color !== true) { + console.log("Typeof instance not Color"); + return; + } + color.copy(obj); + updateUI(); + } + + var subscribe = function subscribe(topic, callback) { + if (subscribers[topic] === undefined) + subscribers[topic] = []; + + subscribers[topic].push(callback); + } + + var unsubscribe = function unsubscribe(callback) { + subscribers.indexOf(callback); + subscribers.splice(index, 1); + } + + var notify = function notify(topic, value) { + for (var i in subscribers[topic]) + subscribers[topic][i](value); + } + + var init = function init() { + colorpicker = getElemById("colorpicker"); + hue_area = getElemById("hue"); + gradient_area = getElemById("gradient"); + alpha_area = getElemById("alpha"); + gradient_picker = getElemById("gradient_picker"); + hue_selector = getElemById("hue_selector"); + alpha_selector = getElemById("alpha_selector"); + output_color = getElemById("output_color"); + + var elem = document.querySelectorAll('#colorpicker .input'); + var size = elem.length; + for (var i = 0; i < size; i++) + setInputComponent(elem[i]); + + setMouseTracking(gradient_area, updateColor); + setMouseTracking(hue_area, updateHue); + setMouseTracking(alpha_area, updateAlpha); + + } + + return { + init : init, + setColor : setColor, + subscribe : subscribe, + unsubscribe : unsubscribe + } + + })(); + + /** + * Shadow dragging + */ + var PreviewMouseTracking = (function Drag() { + var active = false; + var lastX = 0; + var lastY = 0; + var subscribers = []; + + var init = function init(id) { + var elem = getElemById(id); + elem.addEventListener('mousedown', dragStart, false); + document.addEventListener('mouseup', dragEnd, false); + } + + var dragStart = function dragStart(e) { + if (e.button !== 0) + return; + + active = true; + lastX = e.clientX; + lastY = e.clientY; + document.addEventListener('mousemove', mouseDrag, false); + } + + var dragEnd = function dragEnd(e) { + if (e.button !== 0) + return; + + if (active === true) { + active = false; + document.removeEventListener('mousemove', mouseDrag, false); + } + } + + var mouseDrag = function mouseDrag(e) { + notify(e.clientX - lastX, e.clientY - lastY); + lastX = e.clientX; + lastY = e.clientY; + } + + var subscribe = function subscribe(callback) { + subscribers.push(callback); + } + + var unsubscribe = function unsubscribe(callback) { + var index = subscribers.indexOf(callback); + subscribers.splice(index, 1); + } + + var notify = function notify(deltaX, deltaY) { + for (var i in subscribers) + subscribers[i](deltaX, deltaY); + } + + return { + init : init, + subscribe : subscribe, + unsubscribe : unsubscribe + } + + })(); + + /* + * Element Class + */ + var CssClass = function CssClass(id) { + this.left = 0; + this.top = 0; + this.rotate = 0; + this.width = 300; + this.height = 100; + this.display = true; + this.border = true; + this.zIndex = -1; + this.bgcolor = new Color(); + this.id = id; + this.node = getElemById('obj-' + id); + this.object = getElemById(id); + this.shadowID = null; + this.shadows = [] + this.render = []; + this.init(); + } + + CssClass.prototype.init = function init() { + this.left = ((this.node.parentNode.clientWidth - this.node.clientWidth) / 2) | 0; + this.top = ((this.node.parentNode.clientHeight - this.node.clientHeight) / 2) | 0; + + this.setTop(this.top); + this.setLeft(this.left); + this.setHeight(this.height); + this.setWidth(this.width); + this.bgcolor.setHSV(0, 0, 100); + this.updateBgColor(this.bgcolor); + } + + CssClass.prototype.updatePos = function updatePos(deltaX, deltaY) { + this.left += deltaX; + this.top += deltaY; + this.node.style.top = this.top + "px"; + this.node.style.left = this.left + "px"; + SliderManager.setValue("left", this.left); + SliderManager.setValue("top", this.top); + } + + CssClass.prototype.setLeft = function setLeft(value) { + this.left = value; + this.node.style.left = this.left + "px"; + OutputManager.updateProperty(this.id, 'left', this.left + 'px'); + } + + CssClass.prototype.setTop = function setTop(value) { + this.top = value; + this.node.style.top = this.top + 'px'; + OutputManager.updateProperty(this.id, 'top', this.top + 'px'); + } + + CssClass.prototype.setWidth = function setWidth(value) { + this.width = value; + this.node.style.width = this.width + 'px'; + OutputManager.updateProperty(this.id, 'width', this.width + 'px'); + } + + CssClass.prototype.setHeight = function setHeight(value) { + this.height = value; + this.node.style.height = this.height + 'px'; + OutputManager.updateProperty(this.id, 'height', this.height + 'px'); + } + + // Browser support + CssClass.prototype.setRotate = function setRotate(value) { + var cssvalue = 'rotate(' + value +'deg)'; + + this.node.style.transform = cssvalue; + this.node.style.webkitTransform = cssvalue; + this.node.style.msTransform = cssvalue; + + if (value !== 0) { + if (this.rotate === 0) { + OutputManager.toggleProperty(this.id, 'transform', true); + OutputManager.toggleProperty(this.id, '-webkit-transform', true); + OutputManager.toggleProperty(this.id, '-ms-transform', true); + } + } + else { + OutputManager.toggleProperty(this.id, 'transform', false); + OutputManager.toggleProperty(this.id, '-webkit-transform', false); + OutputManager.toggleProperty(this.id, '-ms-transform', false); + } + + OutputManager.updateProperty(this.id, 'transform', cssvalue); + OutputManager.updateProperty(this.id, '-webkit-transform', cssvalue); + OutputManager.updateProperty(this.id, '-ms-transform', cssvalue); + this.rotate = value; + } + + CssClass.prototype.setzIndex = function setzIndex(value) { + this.node.style.zIndex = value; + OutputManager.updateProperty(this.id, 'z-index', value); + this.zIndex = value; + } + + CssClass.prototype.toggleDisplay = function toggleDisplay(value) { + if (typeof value !== "boolean" || this.display === value) + return; + + this.display = value; + var display = this.display === true ? "block" : "none"; + this.node.style.display = display; + this.object.style.display = display; + } + + CssClass.prototype.toggleBorder = function toggleBorder(value) { + if (typeof value !== "boolean" || this.border === value) + return; + + this.border = value; + var border = this.border === true ? "1px solid #CCC" : "none"; + this.node.style.border = border; + } + + CssClass.prototype.updateBgColor = function updateBgColor(color) { + this.bgcolor.copy(color); + this.node.style.backgroundColor = color.getColor(); + OutputManager.updateProperty(this.id, 'background-color', color.getColor()); + } + + CssClass.prototype.updateShadows = function updateShadows() { + if (this.render.length === 0) + OutputManager.toggleProperty(this.id, 'box-shadow', false); + if (this.render.length === 1) + OutputManager.toggleProperty(this.id, 'box-shadow', true); + + this.node.style.boxShadow = this.render.join(", "); + OutputManager.updateProperty(this.id, 'box-shadow', this.render.join(", \n")); + + } + + + /** + * Tool Manager + */ + var Tool = (function Tool() { + + var preview; + var classes = []; + var active = null; + var animate = false; + + /* + * Toll actions + */ + var addCssClass = function addCssClass(id) { + classes[id] = new CssClass(id); + } + + var setActiveClass = function setActiveClass(id) { + active = classes[id]; + active.shadowID = null; + ColoPicker.setColor(classes[id].bgcolor); + SliderManager.setValue("top", active.top); + SliderManager.setValue("left", active.left); + SliderManager.setValue("rotate", active.rotate); + SliderManager.setValue("z-index", active.zIndex); + SliderManager.setValue("width", active.width); + SliderManager.setValue("height", active.height); + ButtonManager.setValue("border-state", active.border); + active.updateShadows(); + } + + var disableClass = function disableClass(topic) { + classes[topic].toggleDisplay(false); + ButtonManager.setValue(topic, false); + } + + var addShadow = function addShadow(position) { + if (animate === true) + return -1; + + active.shadows.splice(position, 0, new Shadow()); + active.render.splice(position, 0, null); + } + + var swapShadow = function swapShadow(id1, id2) { + var x = active.shadows[id1]; + active.shadows[id1] = active.shadows[id2]; + active.shadows[id2] = x; + updateShadowCSS(id1); + updateShadowCSS(id2); + } + + var deleteShadow = function deleteShadow(position) { + active.shadows.splice(position, 1); + active.render.splice(position, 1); + active.updateShadows(); + } + + var setActiveShadow = function setActiveShadow(id, glow) { + active.shadowID = id; + ColoPicker.setColor(active.shadows[id].color); + ButtonManager.setValue("inset", active.shadows[id].inset); + SliderManager.setValue("blur", active.shadows[id].blur); + SliderManager.setValue("spread", active.shadows[id].spread); + SliderManager.setValue("posX", active.shadows[id].posX); + SliderManager.setValue("posY", active.shadows[id].posY); + if (glow === true) + addGlowEffect(id); + } + + var addGlowEffect = function addGlowEffect(id) { + if (animate === true) + return; + + animate = true; + var store = new Shadow(); + var shadow = active.shadows[id]; + + store.copy(shadow); + shadow.color.setRGBA(40, 125, 200, 1); + shadow.blur = 10; + shadow.spread = 10; + + active.node.style.transition = "box-shadow 0.2s"; + updateShadowCSS(id); + + setTimeout(function() { + shadow.copy(store); + updateShadowCSS(id); + setTimeout(function() { + active.node.style.removeProperty("transition"); + animate = false; + }, 100); + }, 200); + } + + var updateActivePos = function updateActivePos(deltaX, deltaY) { + if (active.shadowID === null) + active.updatePos(deltaX, deltaY); + else + updateShadowPos(deltaX, deltaY); + } + + /* + * Shadow properties + */ + var updateShadowCSS = function updateShadowCSS(id) { + active.render[id] = active.shadows[id].computeCSS(); + active.updateShadows(); + } + + var toggleShadowInset = function toggleShadowInset(value) { + if (active.shadowID === null) + return; + active.shadows[active.shadowID].toggleInset(value); + updateShadowCSS(active.shadowID); + } + + var updateShadowPos = function updateShadowPos(deltaX, deltaY) { + var shadow = active.shadows[active.shadowID]; + shadow.posX += deltaX; + shadow.posY += deltaY; + SliderManager.setValue("posX", shadow.posX); + SliderManager.setValue("posY", shadow.posY); + updateShadowCSS(active.shadowID); + } + + var setShadowPosX = function setShadowPosX(value) { + if (active.shadowID === null) + return; + active.shadows[active.shadowID].posX = value; + updateShadowCSS(active.shadowID); + } + + var setShadowPosY = function setShadowPosY(value) { + if (active.shadowID === null) + return; + active.shadows[active.shadowID].posY = value; + updateShadowCSS(active.shadowID); + } + + var setShadowBlur = function setShadowBlur(value) { + if (active.shadowID === null) + return; + active.shadows[active.shadowID].blur = value; + updateShadowCSS(active.shadowID); + } + + var setShadowSpread = function setShadowSpread(value) { + if (active.shadowID === null) + return; + active.shadows[active.shadowID].spread = value; + updateShadowCSS(active.shadowID); + } + + var updateShadowColor = function updateShadowColor(color) { + active.shadows[active.shadowID].color.copy(color); + updateShadowCSS(active.shadowID); + } + + /* + * Element Properties + */ + var updateColor = function updateColor(color) { + if (active.shadowID === null) + active.updateBgColor(color); + else + updateShadowColor(color); + } + + var init = function init() { + preview = getElemById("preview"); + + ColoPicker.subscribe("color", updateColor); + PreviewMouseTracking.subscribe(updateActivePos); + + // Affects shadows + ButtonManager.subscribe("inset", toggleShadowInset); + SliderManager.subscribe("posX", setShadowPosX); + SliderManager.subscribe("posY", setShadowPosY); + SliderManager.subscribe("blur", setShadowBlur); + SliderManager.subscribe("spread", setShadowSpread); + + // Affects element + SliderManager.subscribe("top", function(value){ + active.setTop(value); + }); + SliderManager.subscribe("left", function(value){ + active.setLeft(value); + }); + SliderManager.subscribe("rotate", function(value) { + if (active == classes["element"]) + return; + active.setRotate(value); + }); + + SliderManager.subscribe("z-index", function(value) { + if (active == classes["element"]) + return; + active.setzIndex(value); + }); + + SliderManager.subscribe("width", function(value) { + active.setWidth(value) + }); + + SliderManager.subscribe("height", function(value) { + active.setHeight(value) + }); + + // Actions + classes['before'].top = -30; + classes['before'].left = -30; + classes['after'].top = 30; + classes['after'].left = 30; + classes['before'].toggleDisplay(false); + classes['after'].toggleDisplay(false); + ButtonManager.setValue('before', false); + ButtonManager.setValue('after', false); + + ButtonManager.subscribe("before", classes['before'].toggleDisplay.bind(classes['before'])); + ButtonManager.subscribe("after", classes['after'].toggleDisplay.bind(classes['after'])); + + ButtonManager.subscribe("border-state", function(value) { + active.toggleBorder(value); + }); + + } + + return { + init : init, + addShadow : addShadow, + swapShadow : swapShadow, + addCssClass : addCssClass, + disableClass : disableClass, + deleteShadow : deleteShadow, + setActiveClass : setActiveClass, + setActiveShadow : setActiveShadow + } + + })(); + + /** + * Layer Manager + */ + var LayerManager = (function LayerManager() { + var stacks = []; + var active = { + node : null, + stack : null + } + var elements = {}; + + var mouseEvents = function mouseEvents(e) { + var node = e.target; + var type = node.getAttribute('data-type'); + + if (type === 'subject') + setActiveStack(stacks[node.id]); + + if (type === 'disable') { + Tool.disableClass(node.parentNode.id); + setActiveStack(stacks['element']); + } + + if (type === 'add') + active.stack.addLayer(); + + if (type === 'layer') + active.stack.setActiveLayer(node); + + if (type === 'delete') + active.stack.deleteLayer(node.parentNode); + + if (type === 'move-up') + active.stack.moveLayer(1); + + if (type === 'move-down') + active.stack.moveLayer(-1); + } + + var setActiveStack = function setActiveStack(stackObj) { + active.stack.hide(); + active.stack = stackObj; + active.stack.show(); + } + + /* + * Stack object + */ + var Stack = function Stack(subject) { + var S = document.createElement('div'); + var title = document.createElement('div'); + var stack = document.createElement('div'); + + S.className = 'container'; + stack.className = 'stack'; + title.className = 'title'; + title.textContent = subject.getAttribute('data-title'); + S.appendChild(title); + S.appendChild(stack); + + this.id = subject.id; + this.container = S; + this.stack = stack; + this.subject = subject; + this.order = []; + this.uid = 0; + this.count = 0; + this.layer = null; + this.layerID = 0; + } + + Stack.prototype.addLayer = function addLayer() { + if (Tool.addShadow(this.layerID) == -1) + return; + + var uid = this.getUID(); + var layer = this.createLayer(uid); + + if (this.layer === null && this.stack.children.length >= 1) + this.layer = this.stack.children[0]; + + this.stack.insertBefore(layer, this.layer); + this.order.splice(this.layerID, 0, uid); + this.count++; + this.setActiveLayer(layer); + } + + Stack.prototype.createLayer = function createLayer(uid) { + var layer = document.createElement('div'); + var del = document.createElement('span'); + + layer.className = 'node'; + layer.setAttribute('data-shid', uid); + layer.setAttribute('data-type', 'layer'); + layer.textContent = 'shadow ' + uid; + + del.className = 'delete'; + del.setAttribute('data-type', 'delete'); + + layer.appendChild(del); + return layer; + } + + Stack.prototype.getUID = function getUID() { + return this.uid++; + } + + // SOLVE IE BUG + Stack.prototype.moveLayer = function moveLayer(direction) { + if (this.count <= 1 || this.layer === null) + return; + if (direction === -1 && this.layerID === (this.count - 1) ) + return; + if (direction === 1 && this.layerID === 0 ) + return; + + if (direction === -1) { + var before = null; + Tool.swapShadow(this.layerID, this.layerID + 1); + this.swapOrder(this.layerID, this.layerID + 1); + this.layerID += 1; + + if (this.layerID + 1 !== this.count) + before = this.stack.children[this.layerID + 1]; + + this.stack.insertBefore(this.layer, before); + Tool.setActiveShadow(this.layerID, false); + } + + if (direction === 1) { + Tool.swapShadow(this.layerID, this.layerID - 1); + this.swapOrder(this.layerID, this.layerID - 1); + this.layerID -= 1; + this.stack.insertBefore(this.layer, this.stack.children[this.layerID]); + Tool.setActiveShadow(this.layerID, false); + } + } + + Stack.prototype.swapOrder = function swapOrder(pos1, pos2) { + var x = this.order[pos1]; + this.order[pos1] = this.order[pos2]; + this.order[pos2] = x; + } + + Stack.prototype.deleteLayer = function deleteLayer(node) { + var shadowID = node.getAttribute('data-shid') | 0; + var index = this.order.indexOf(shadowID); + this.stack.removeChild(this.stack.children[index]); + this.order.splice(index, 1); + this.count--; + + Tool.deleteShadow(index); + + if (index > this.layerID) + return; + + if (index == this.layerID) { + if (this.count >= 1) { + this.layerID = 0; + this.setActiveLayer(this.stack.children[0], true); + } + else { + this.layer = null; + this.show(); + } + } + + if (index < this.layerID) { + this.layerID--; + Tool.setActiveShadow(this.layerID, true); + } + + } + + Stack.prototype.setActiveLayer = function setActiveLayer(node) { + elements.shadow_properties.style.display = 'block'; + elements.element_properties.style.display = 'none'; + + if (this.layer) + this.layer.removeAttribute('data-active'); + + this.layer = node; + this.layer.setAttribute('data-active', 'layer'); + + var shadowID = node.getAttribute('data-shid') | 0; + this.layerID = this.order.indexOf(shadowID); + Tool.setActiveShadow(this.layerID, true); + } + + Stack.prototype.unsetActiveLayer = function unsetActiveLayer() { + if (this.layer) + this.layer.removeAttribute('data-active'); + + this.layer = null; + this.layerID = 0; + } + + Stack.prototype.hide = function hide() { + this.unsetActiveLayer(); + this.subject.removeAttribute('data-active'); + var style = this.container.style; + style.left = '100%'; + style.zIndex = '0'; + } + + Stack.prototype.show = function show() { + elements.shadow_properties.style.display = 'none'; + elements.element_properties.style.display = 'block'; + + if (this.id === 'element') { + elements.zIndex.style.display = 'none'; + elements.transform_rotate.style.display = 'none'; + } + else { + elements.zIndex.style.display = 'block'; + elements.transform_rotate.style.display = 'block'; + } + + this.subject.setAttribute('data-active', 'subject'); + var style = this.container.style; + style.left = '0'; + style.zIndex = '10'; + Tool.setActiveClass(this.id); + } + + function init() { + + var elem, size; + var layerManager = getElemById("layer_manager"); + var layerMenu = getElemById("layer_menu"); + var container = getElemById("stack_container"); + + elements.shadow_properties = getElemById('shadow_properties'); + elements.element_properties = getElemById('element_properties'); + elements.transform_rotate = getElemById('transform_rotate'); + elements.zIndex = getElemById('z-index'); + + elem = document.querySelectorAll('#layer_menu [data-type="subject"]'); + size = elem.length; + + for (var i = 0; i < size; i++) { + var S = new Stack(elem[i]); + stacks[elem[i].id] = S; + container.appendChild(S.container); + Tool.addCssClass(elem[i].id); + } + + active.stack = stacks['element']; + stacks['element'].show(); + + layerManager.addEventListener("click", mouseEvents); + layerMenu.addEventListener("click", mouseEvents); + + ButtonManager.subscribe("before", function(value) { + if (value === false && active.stack === stacks['before']) + setActiveStack(stacks['element']) + if (value === true && active.stack !== stacks['before']) + setActiveStack(stacks['before']) + }); + + ButtonManager.subscribe("after", function(value) { + if (value === false && active.stack === stacks['after']) + setActiveStack(stacks['element']) + if (value === true && active.stack !== stacks['after']) + setActiveStack(stacks['after']) + }); + } + + return { + init : init + } + })(); + + /* + * OutputManager + */ + var OutputManager = (function OutputManager() { + var classes = []; + var buttons = []; + var active = null; + var menu = null; + var button_offset = 0; + + var crateOutputNode = function(topic, property) { + + var prop = document.createElement('div'); + var name = document.createElement('span'); + var value = document.createElement('span'); + + var pmatch = property.match(/(^([a-z0-9\-]*)=\[([a-z0-9\-\"]*)\])|^([a-z0-9\-]*)/i); + + name.textContent = '\t' + pmatch[4]; + + if (pmatch[3] !== undefined) { + name.textContent = '\t' + pmatch[2]; + value.textContent = pmatch[3] + ';'; + } + + name.textContent += ': '; + prop.className = 'css-property'; + name.className = 'name'; + value.className = 'value'; + prop.appendChild(name); + prop.appendChild(value); + + classes[topic].node.appendChild(prop); + classes[topic].line[property] = prop; + classes[topic].prop[property] = value; + } + + var OutputClass = function OutputClass(node) { + var topic = node.getAttribute('data-topic'); + var prop = node.getAttribute('data-prop'); + var name = node.getAttribute('data-name'); + var properties = prop.split(' '); + + classes[topic] = {}; + classes[topic].node = node; + classes[topic].prop = []; + classes[topic].line = []; + classes[topic].button = new Button(topic); + + var open_decl = document.createElement('div'); + var end_decl = document.createElement('div'); + + open_decl.textContent = name + ' {'; + end_decl.textContent = '}'; + node.appendChild(open_decl); + + for (var i in properties) + crateOutputNode(topic, properties[i]); + + node.appendChild(end_decl); + } + + var Button = function Button(topic) { + var button = document.createElement('div'); + + button.className = 'button'; + button.textContent = topic; + button.style.left = button_offset + 'px'; + button_offset += 100; + + button.addEventListener("click", function() { + toggleDisplay(topic); + }) + + menu.appendChild(button); + return button; + } + + var toggleDisplay = function toggleDisplay(topic) { + active.button.removeAttribute('data-active'); + active.node.style.display = 'none'; + active = classes[topic]; + active.node.style.display = 'block'; + active.button.setAttribute('data-active', 'true'); + } + + var toggleButton = function toggleButton(topic, value) { + var display = (value === true) ? 'block' : 'none'; + classes[topic].button.style.display = display; + + if (value === true) + toggleDisplay(topic); + else + toggleDisplay('element'); + } + + var updateProperty = function updateProperty(topic, property, data) { + try { + classes[topic].prop[property].textContent = data + ';'; + } + catch(error) { + // console.log("ERROR undefined : ", topic, property, data); + } + } + + var toggleProperty = function toggleProperty(topic, property, value) { + var display = (value === true) ? 'block' : 'none'; + try { + classes[topic].line[property].style.display = display; + } + catch(error) { + // console.log("ERROR undefined : ",classes, topic, property, value); + } + } + + var init = function init() { + + menu = getElemById('menu'); + + var elem = document.querySelectorAll('#output .output'); + var size = elem.length; + for (var i = 0; i < size; i++) + OutputClass(elem[i]); + + active = classes['element']; + toggleDisplay('element'); + + ButtonManager.subscribe("before", function(value) { + toggleButton('before', value); + }); + + ButtonManager.subscribe("after", function(value) { + toggleButton('after', value); + }); + } + + return { + init : init, + updateProperty : updateProperty, + toggleProperty : toggleProperty + } + + })(); + + + /** + * Init Tool + */ + var init = function init() { + ButtonManager.init(); + OutputManager.init(); + ColoPicker.init(); + SliderManager.init(); + LayerManager.init(); + PreviewMouseTracking.init("preview"); + Tool.init(); + } + + return { + init : init + } + +})(); + + +</code></pre> +</div> + +<div>{{ EmbedLiveSample('box-shadow_generator', '100%', '1100px', '') }}</div> + +<p><strong>Related Tool: </strong><a href="https://cssgenerator.org/box-shadow-css-generator.html">Box Shadow CSS Generator</a></p> diff --git a/files/de/web/css/css_boxmodell/einführung_in_das_css_boxmodell/index.html b/files/de/web/css/css_boxmodell/einführung_in_das_css_boxmodell/index.html new file mode 100644 index 0000000000..1bf796b36b --- /dev/null +++ b/files/de/web/css/css_boxmodell/einführung_in_das_css_boxmodell/index.html @@ -0,0 +1,52 @@ +--- +title: Boxmodell +slug: Web/CSS/CSS_Boxmodell/Einführung_in_das_CSS_Boxmodell +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Eine Box hat in CSS vier Bereiche: <strong>margin edge</strong> (weiß außen), <strong>border edge</strong> (grau), <strong>padding edge</strong> (grün), und <strong>content edge</strong> (weiß mitte). Das Folgende Diagramm zeigt die unterschiedlichen Höhen und Breiten anhand der Eigenschaften, die Veränderungen an einer CSS Box zulassen:</p> + +<p><img alt="Thanks to Hannes Kraft." src="https://mdn.mozillademos.org/files/11243/%3DCSS_Boxmodell_changed.png" style="height: 501px; width: 687px;"></p> + +<p> </p> + +<h2 id="Details" name="Details">Details</h2> + +<ul> + <li>Die komplette Breite eines Elements berechnet sich wie folgt: + <dl> + <dd><code>margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right</code></dd> + </dl> + </li> + <li>Die komplette Höhe eines Elements berechnet sich wie folgt: + <dl> + <dd><code>margin-top + border-top-width + padding-top + height + padding-bottom + border-bottom-width + margin-bottom</code></dd> + </dl> + </li> + <li>Der MS Internet Explorer verwendet die <a href="/de/CSS/width" title="de/CSS/width">width</a>- und die <a href="/de/CSS/height" title="de/CSS/height">height</a>-Eigenschaft als Innenabstand des Rahmens, nicht des padding-Bereiches. + <dl> + <dd><code>width = padding-left + width + padding-right</code></dd> + <dd><code>height = padding-top + height + padding-bottom</code></dd> + </dl> + </li> +</ul> + +<h2 id="Spezifikation">Spezifikation</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#box-dimensions">CSS 2.1 #Box model</a></li> +</ul> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/CSS/width" title="de/CSS/width">width</a>, <a href="/de/CSS/height" title="de/CSS/height">height</a></li> + <li><a href="/de/CSS/padding" title="de/CSS/padding">padding</a>, <a href="/de/CSS/border" title="de/CSS/border">border</a>, <a href="/de/CSS/margin" title="de/CSS/margin">margin</a></li> + <li><a href="/De/CSS/position" title="De/CSS/position">position</a>, <a href="/De/CSS/Left" title="De/CSS/Left">left</a>, <a href="/De/CSS/Top" title="De/CSS/Top">top</a>, <a href="/De/CSS/Right" title="De/CSS/Right">right</a>, <a href="/De/CSS/Bottom" title="De/CSS/Bottom">bottom</a></li> +</ul> diff --git a/files/de/web/css/css_boxmodell/index.html b/files/de/web/css/css_boxmodell/index.html new file mode 100644 index 0000000000..37440c9523 --- /dev/null +++ b/files/de/web/css/css_boxmodell/index.html @@ -0,0 +1,165 @@ +--- +title: CSS Boxmodell +slug: Web/CSS/CSS_Boxmodell +tags: + - CSS + - CSS Boxmodell + - CSS Referenz + - Übersicht +translation_of: Web/CSS/CSS_Box_Model +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS Box Model</strong> ist ein CSS Modul, das die rechteckigen Boxen einschließlich deren Innen- und Außenabständen definiert, die für Elemente generiert werden und gemäß des visuellen Formatierungsmodells dargestellt werden.</p> + +<h2 id="Referenz">Referenz</h2> + +<h3 id="Eigenschaften">Eigenschaften</h3> + +<h4 id="Den_Inhaltsfluss_innerhalb_einer_Box_beeinflussende_Eigenschaften">Den Inhaltsfluss innerhalb einer Box beeinflussende Eigenschaften</h4> + +<div class="index"> +<ul> + <li>{{cssxref("box-decoration-break")}}</li> + <li>{{cssxref("box-sizing")}}</li> + <li>{{cssxref("overflow")}}</li> + <li>{{cssxref("overflow-x")}}</li> + <li>{{cssxref("overflow-y")}}</li> +</ul> +</div> + +<h4 id="Die_Größe_einer_Box_beeinflussende_Eigenschaften">Die Größe einer Box beeinflussende Eigenschaften</h4> + +<div class="index"> +<ul> + <li>{{cssxref("height")}}</li> + <li>{{cssxref("width")}}</li> + <li>{{cssxref("max-height")}}</li> + <li>{{cssxref("max-width")}}</li> + <li>{{cssxref("min-height")}}</li> + <li>{{cssxref("min-width")}}</li> +</ul> +</div> + +<h4 id="Außenabstände_einer_Box_beeinflussende_Eigenschaften">Außenabstände einer Box beeinflussende Eigenschaften</h4> + +<div class="index"> +<ul> + <li>{{cssxref("margin")}}</li> + <li>{{cssxref("margin-bottom")}}</li> + <li>{{cssxref("margin-left")}}</li> + <li>{{cssxref("margin-right")}}</li> + <li>{{cssxref("margin-top")}}</li> +</ul> +</div> + +<h4 id="Innenabstände_einer_Box_beeinflussende_Eigenschaften">Innenabstände einer Box beeinflussende Eigenschaften</h4> + +<div class="index"> +<ul> + <li>{{cssxref("padding")}}</li> + <li>{{cssxref("padding-bottom")}}</li> + <li>{{cssxref("padding-left")}}</li> + <li>{{cssxref("padding-right")}}</li> + <li>{{cssxref("padding-top")}}</li> +</ul> +</div> + +<h4 id="Andere_Eigenschaften">Andere Eigenschaften</h4> + +<div class="index"> +<ul> + <li>{{cssxref("box-shadow")}}</li> + <li>{{cssxref("visibility")}}</li> +</ul> +</div> + +<h2 id="Anleitungen_und_Werkzeuge">Anleitungen und Werkzeuge</h2> + +<dl> + <dt><a href="/de/docs/Web/CSS/CSS_Boxmodell/Einführung_in_das_CSS_Boxmodell">Einführung in das CSS Boxmodell</a></dt> + <dd>Erklärt eines der grundlegenden Konzepte von CSS, das Boxmodell: Beschreibt die Bedeutung von Außen- und Innenabständen als auch der verschiedenen Bereiche einer Box.</dd> + <dt><a href="/de/docs/Web/CSS/CSS_Boxmodell/Zusammenfallen_von_Außenabständen_meistern">Zusammenfallen von Außenabständen meistern</a></dt> + <dd>In mehreren Fällen werden zwei anliegende Außenabstände zu einem zusammengelegt. Dieser Artikel beschreibt, wann dies passiert und wie es gesteuert werden kann.</dd> + <dt><a href="/de/docs/Web/CSS/CSS_Boxmodell/Box-shadow_generator">Box-shadow Generator</a></dt> + <dd>Ein interaktives Werkzeug, das es erlaubt, Schatten visuell zu erstellen und die benötigte Syntax für die {{cssxref("box-shadow")}} Eigenschaft zu generieren.</dd> +</dl> + +<h2 id="Spezifikationen">Spezifikationen</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 Box")}}</td> + <td>{{Spec2("CSS3 Box")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("CSS2.1", "box.html")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("CSS1")}}</td> + <td>{{Spec2("CSS1")}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>3.0</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>1.0</td> + <td>{{CompatGeckoMobile("1")}}</td> + <td>6.0</td> + <td>6.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/de/web/css/css_boxmodell/zusammenfallen_von_außenabständen_meistern/index.html b/files/de/web/css/css_boxmodell/zusammenfallen_von_außenabständen_meistern/index.html new file mode 100644 index 0000000000..edf1fa050c --- /dev/null +++ b/files/de/web/css/css_boxmodell/zusammenfallen_von_außenabständen_meistern/index.html @@ -0,0 +1,60 @@ +--- +title: Zusammenfallen von Außenabständen meistern +slug: Web/CSS/CSS_Boxmodell/Zusammenfallen_von_Außenabständen_meistern +tags: + - CSS + - CSS Boxmodell + - Referenz +translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing +--- +<div>{{CSSRef}}</div> + +<p><a href="/de/docs/Web/CSS/margin-top">Obere</a> und <a href="/de/docs/Web/CSS/margin-bottom">untere</a> Außenabstände von Blöcken werden manchmal zu einem einzelnen Außenabstand zusammengefasst (kollabiert), dessen Größe der größte der Außenabstände ist, die in ihm zusammengefasst werden, ein Verhalten bekannt als <strong>Außenabstandszusammenfassung</strong> (engl. margin collapsing).</p> + +<p>Außenabstandszusammenfassung tritt in drei grundlegenden Fällen auf:</p> + +<dl> + <dt>Angrenzende Geschwisterelemente</dt> + <dd>Die Außenabstände von angrenzenden Geschwisterelementen werden zusammengefasst (außer, wenn des nachfolgende Geschwisterelement nach Seitenumflüssen <a href="/en-US/docs/Web/CSS/clear">freigestellt</a> ist). Zum Beispiel: + <pre class="brush: html"> <p>Der untere Außenabstand dieses Absatzes fällt ...</p> + <p>...mit dem oberen Außenabstand dieses Absatzes zusammen.</p> +</pre> + </dd> + <dt>Eltern- und erstes/letztes Kindelement</dt> + <dd>Falls es keinen Rahmen, Innenabstand, Inlineinhalt oder <em><a href="/en-US/docs/Web/CSS/clear">Freilegung</a></em> gibt, um den {{cssxref("margin-top")}} eines Blocks vom {{cssxref("margin-top")}} seines ersten Kindblocks zu trennen, oder keinen Rahmen, Innenabstand Inlineinhalt, {{cssxref("height")}}, {{cssxref("min-height")}} oder {{cssxref("max-height")}} gibt, um den {{cssxref("margin-bottom")}} des Blocks vom {{cssxref("margin-bottom")}} seines letzten Kindelements zu trennen, dann fallen diese Außenabstände zusammen. Der zusammengefallene Außenabstand verläuft dabei außerhalb des Elternelements.</dd> + <dt>Leere Blöcke</dt> + <dd>Falls es keinen Rahmen, Innenabstand, Inlineinhalt, {{cssxref("height")}} oder {{cssxref("min-height")}} gibt, um den {{cssxref("margin-top")}} des Blocks vom {{cssxref("margin-bottom")}} zu trennen, fallen sein oberer und unterer Außenabstand zusammen.</dd> +</dl> + +<p>Kompliziertere Außenabstandszusammenfassung (von mehr als zwei Außenabständen) tritt auf, wenn diese Fälle kombiniert werden.</p> + +<p>Diese Regeln gelten sogar für Außenabstände, die null sind, sodass ein Außenabstand eines ersten/letzten Kinds sich (gemäß den oben genannten Regeln) am Ende außerhalb seines Elternelements befindet, unabhängig davon, ob der Außenabstand des Elternelements null ist oder nicht.</p> + +<p>Falls negative Außenabstände involviert sind, ist die Größe des zusammengefassten Außenabstands die Summe des größten positiven Abstands und dem kleinsten (meist negativen) negativen Abstands.</p> + +<p>Außenabstände von <a href="/en-US/docs/Web/CSS/float">umfließenden</a> und <a href="/en-US/docs/Web/CSS/position">absolut positionierten</a> Elementen werden niemals zusammengefasst.</p> + +<h2 id="Spezifikationen">Spezifikationen</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("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/CSS/CSS_Referenz">CSS Referenz</a></li> +</ul> diff --git a/files/de/web/css/css_charsets/index.html b/files/de/web/css/css_charsets/index.html new file mode 100644 index 0000000000..1b12d996a6 --- /dev/null +++ b/files/de/web/css/css_charsets/index.html @@ -0,0 +1,50 @@ +--- +title: CSS Charsets +slug: Web/CSS/CSS_Charsets +tags: + - CSS + - CSS Zeichensätze + - Referenz + - Übersicht +translation_of: Web/CSS/CSS_Charsets +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS Charsets</strong> ist ein CSS Modul, das es erlaubt, den Zeichensatz zu bestimmen, der im Stylesheet verwendet wird.</p> + +<h2 id="Referenz">Referenz</h2> + +<h3 id="-Regeln">@-Regeln</h3> + +<div class="index"> +<ul> + <li>{{cssxref("@charset")}}</li> +</ul> +</div> + +<h2 id="Anleitungen">Anleitungen</h2> + +<p><em>Keine.</em></p> + +<h2 id="Spezifikationen">Spezifikationen</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('CSS2.1', 'syndata.html#x57', '@charset')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.at-rules.charset")}} diff --git a/files/de/web/css/css_colors/farbauswahl_werkzeug/index.html b/files/de/web/css/css_colors/farbauswahl_werkzeug/index.html new file mode 100644 index 0000000000..3f822f9f73 --- /dev/null +++ b/files/de/web/css/css_colors/farbauswahl_werkzeug/index.html @@ -0,0 +1,3225 @@ +--- +title: Farbauswahl-Werkzeug +slug: Web/CSS/CSS_Colors/farbauswahl_werkzeug +tags: + - CSS + - Farbauswahl + - Farbe + - Hilfsmittel + - Pipette + - Werkzeug +translation_of: Web/CSS/CSS_Colors/Color_picker_tool +--- +<div style="display: none;"> +<h2 id="ColorPicker_Tool" name="ColorPicker_Tool">ColorPicker tool</h2> + +<h3 id="HTML_Content">HTML Content</h3> + +<pre class="brush: html"> <div id="container"> + <div id="palette" class="block"> + <div id="color-palette"></div> + <div id="color-info"> + <div class="title"> CSS Color </div> + </div> + </div> + + <div id="picker" class="block"> + <div class="ui-color-picker" data-topic="picker" data-mode="HSL"></div> + <div id="picker-samples" sample-id="master"></div> + <div id="controls"> + <div id="delete"> + <div id="trash-can"></div> + </div> + <div id="void-sample" class="icon"></div> + </div> + </div> + + <div id="canvas" data-tutorial="drop"> + <div id="zindex" class="ui-input-slider" data-topic="z-index" data-info="z-index" + data-max="20" data-sensivity="10"></div> + </div> + </div> + +</pre> + +<h3 id="CSS_Content">CSS Content</h3> + +<pre class="brush: css">/* + * COLOR PICKER TOOL + */ + +.ui-color-picker { + width: 420px; + margin: 0; + border: 1px solid #DDD; + background-color: #FFF; + display: table; + + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.ui-color-picker .picking-area { + width: 198px; + height: 198px; + margin: 5px; + border: 1px solid #DDD; + position: relative; + float: left; + display: table; +} + +.ui-color-picker .picking-area:hover { + cursor: default; +} + +/* HSV format - Hue-Saturation-Value(Brightness) */ +.ui-color-picker .picking-area { + background: url('https://mdn.mozillademos.org/files/5707/picker_mask_200.png') center center; + + background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), + -moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%); + background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), + -webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%); + background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), + -ms-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%); + background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), + -o-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%); + + background-color: #F00; +} + +/* HSL format - Hue-Saturation-Lightness */ +.ui-color-picker[data-mode='HSL'] .picking-area { + background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, + hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), + -moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); + background: -webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, + hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), + -webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); + background: -ms-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, + hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), + -ms-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); + background: -o-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, + hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), + -o-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); + background-color: #F00; +} + +.ui-color-picker .picker { + width: 10px; + height: 10px; + border-radius: 50%; + border: 1px solid #FFF; + position: absolute; + top: 45%; + left: 45%; +} + +.ui-color-picker .picker:before { + width: 8px; + height: 8px; + content: ""; + position: absolute; + border: 1px solid #999; + border-radius: 50%; +} + +.ui-color-picker .hue, +.ui-color-picker .alpha { + width: 198px; + height: 28px; + margin: 5px; + border: 1px solid #FFF; + float: left; +} + +.ui-color-picker .hue { + background: url("https://mdn.mozillademos.org/files/5701/hue.png") center; + background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, + #00F 66.66%, #F0F 83.33%, #F00 100%); + background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, + #00F 66.66%, #F0F 83.33%, #F00 100%); + background: -ms-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, + #00F 66.66%, #F0F 83.33%, #F00 100%); + background: -o-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, + #00F 66.66%, #F0F 83.33%, #F00 100%); +} + +.ui-color-picker .alpha { + border: 1px solid #CCC; + background: url("https://mdn.mozillademos.org/files/5705/alpha.png"); +} + +.ui-color-picker .alpha-mask { + width: 100%; + height: 100%; + background: url("https://mdn.mozillademos.org/files/6089/alpha_mask.png"); +} + +.ui-color-picker .slider-picker { + width: 2px; + height: 100%; + border: 1px solid #777; + background-color: #FFF; + position: relative; + top: -1px; +} + +/* input HSV and RGB */ + +.ui-color-picker .info { + width: 200px; + margin: 5px; + float: left; +} + +.ui-color-picker .info * { + float: left; +} + +.ui-color-picker .input { + width: 64px; + margin: 5px 2px; + float: left; +} + +.ui-color-picker .input .name { + height: 20px; + width: 30px; + text-align: center; + font-size: 14px; + line-height: 18px; + float: left; +} + +.ui-color-picker .input input { + width: 30px; + height: 18px; + margin: 0; + padding: 0; + border: 1px solid #DDD; + text-align: center; + float: right; + + -moz-user-select: text; + -webkit-user-select: text; + -ms-user-select: text; +} + +.ui-color-picker .input[data-topic="lightness"] { + display: none; +} + +.ui-color-picker[data-mode='HSL'] .input[data-topic="value"] { + display: none; +} + +.ui-color-picker[data-mode='HSL'] .input[data-topic="lightness"] { + display: block; +} + +.ui-color-picker .input[data-topic="alpha"] { + margin-top: 10px; + width: 93px; +} + +.ui-color-picker .input[data-topic="alpha"] > .name { + width: 60px; +} + +.ui-color-picker .input[data-topic="alpha"] > input { + float: right; +} + +.ui-color-picker .input[data-topic="hexa"] { + width: auto; + float: right; + margin: 6px 8px 0 0; +} + +.ui-color-picker .input[data-topic="hexa"] > .name { + display: none; +} + +.ui-color-picker .input[data-topic="hexa"] > input { + width: 90px; + height: 24px; + padding: 2px 0; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +/* Preview color */ +.ui-color-picker .preview { + width: 95px; + height: 53px; + margin: 5px; + margin-top: 10px; + border: 1px solid #DDD; + background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png"); + float: left; + position: relative; +} + +.ui-color-picker .preview:before { + height: 100%; + width: 50%; + left: 50%; + top: 0; + content: ""; + background: #FFF; + position: absolute; + z-index: 1; +} + +.ui-color-picker .preview-color { + width: 100%; + height: 100%; + background-color: rgba(255, 0, 0, 0.5); + position: absolute; + z-index: 1; +} + +.ui-color-picker .switch_mode { + width: 10px; + height: 20px; + position: relative; + border-radius: 5px 0 0 5px; + border: 1px solid #DDD; + background-color: #EEE; + left: -12px; + top: -1px; + z-index: 1; + transition: all 0.5s; +} + +.ui-color-picker .switch_mode:hover { + background-color: #CCC; + cursor: pointer; +} + +/* + * UI Component + */ + +.ui-input-slider { + height: 20px; + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + -moz-user-select: none; + user-select: none; +} + +.ui-input-slider * { + float: left; + height: 100%; + line-height: 100%; +} + +/* Input Slider */ + +.ui-input-slider > input { + margin: 0; + padding: 0; + width: 50px; + text-align: center; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +.ui-input-slider-info { + width: 90px; + padding: 0px 10px 0px 0px; + text-align: right; + text-transform: lowercase; +} + +.ui-input-slider-left, .ui-input-slider-right { + width: 16px; + cursor: pointer; + background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat; +} + +.ui-input-slider-right { + background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat; +} + +.ui-input-slider-name { + width: 90px; + padding: 0 10px 0 0; + text-align: right; + text-transform: lowercase; +} + +.ui-input-slider-btn-set { + width: 25px; + background-color: #2C9FC9; + border-radius: 5px; + color: #FFF; + font-weight: bold; + line-height: 14px; + text-align: center; +} + +.ui-input-slider-btn-set:hover { + background-color: #379B4A; + cursor: pointer; +} + +/* + * COLOR PICKER TOOL + */ + +body { + max-width: 1000px; + margin: 0 auto; + + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + + box-shadow: 0 0 5px 0 #999; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; + +} + +/** + * Resize Handle + */ +.resize-handle { + width: 10px; + height: 10px; + background: url('https://mdn.mozillademos.org/files/6083/resize.png') center center no-repeat; + position: absolute; + bottom: 0; + right: 0; +} + +[data-resize='both']:hover { + cursor: nw-resize !important; +} + +[data-resize='width']:hover { + cursor: w-resize !important; +} + +[data-resize='height']:hover { + cursor: n-resize !important; +} + +[data-hidden='true'] { + display: none; +} + +[data-collapsed='true'] { + height: 0 !important; +} + +.block { + display: table; +} + + +/** + * Container + */ +#container { + width: 100%; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + + display: table; +} + +/** + * Picker Zone + */ + +#picker { + padding: 10px; + width: 980px; +} + +.ui-color-picker { + padding: 3px 5px; + float: left; + border-color: #FFF; +} + +.ui-color-picker .switch_mode { + display: none; +} + +.ui-color-picker .preview-color:hover { + cursor: move; +} + +/** + * Picker Container + */ + +#picker-samples { + width: 375px; + height: 114px; + max-height: 218px; + margin: 0 10px 0 30px; + overflow: hidden; + position: relative; + float: left; + + transition: all 0.2s; +} + +#picker-samples .sample { + width: 40px; + height: 40px; + margin: 5px; + border: 1px solid #DDD; + position: absolute; + float: left; + transition: all 0.2s; +} + +#picker-samples .sample:hover { + cursor: pointer; + border-color: #BBB; + transform: scale(1.15); + border-radius: 3px; +} + +#picker-samples .sample[data-active='true'] { + border-color: #999; +} + +#picker-samples .sample[data-active='true']:after { + content: ""; + position: absolute; + background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat; + width: 100%; + height: 12px; + top: -12px; + z-index: 2; +} + +#picker-samples #add-icon { + width: 100%; + height: 100%; + position: relative; + box-shadow: inset 0px 0px 2px 0px #DDD; +} + +#picker-samples #add-icon:hover { + cursor: pointer; + border-color: #DDD; + box-shadow: inset 0px 0px 5px 0px #CCC; +} + +#picker-samples #add-icon:before, +#picker-samples #add-icon:after { + content: ""; + position: absolute; + background-color: #EEE; + box-shadow: 0 0 1px 0 #EEE; +} + +#picker-samples #add-icon:before { + width: 70%; + height: 16%; + top: 42%; + left: 15%; +} + +#picker-samples #add-icon:after { + width: 16%; + height: 70%; + top: 15%; + left: 42%; +} + +#picker-samples #add-icon:hover:before, +#picker-samples #add-icon:hover:after { + background-color: #DDD; + box-shadow: 0 0 1px 0 #DDD; +} + +/** + * Controls + */ + +#controls { + width: 110px; + padding: 10px; + float: right; +} + +#controls #picker-switch { + text-align: center; + float: left; +} + +#controls .icon { + width: 48px; + height: 48px; + margin: 10px 0; + background-repeat: no-repeat; + background-position: center; + border: 1px solid #DDD; + display: table; + float: left; +} + +#controls .icon:hover { + cursor: pointer; +} + +#controls .picker-icon { + background-image: url('https://mdn.mozillademos.org/files/6081/picker.png'); +} + +#controls #void-sample { + margin-right: 10px; + background-image: url('https://mdn.mozillademos.org/files/6087/void.png'); + background-position: center left; +} + +#controls #void-sample[data-active='true'] { + border-color: #CCC; + background-position: center right; +} + +#controls .switch { + width: 106px; + padding: 1px; + border: 1px solid #CCC; + font-size: 14px; + text-align: center; + line-height: 24px; + overflow: hidden; + float: left; +} + +#controls .switch:hover { + cursor: pointer; +} + +#controls .switch > * { + width: 50%; + padding: 2px 0; + background-color: #EEE; + float: left; +} + +#controls .switch [data-active='true'] { + color: #FFF; + background-image: url('https://mdn.mozillademos.org/files/6025/grain.png'); + background-color: #777; +} + +/** + * Trash Can + */ + +#delete { + width: 100%; + height: 94px; + background-color: #DDD; + background-image: url('https://mdn.mozillademos.org/files/6025/grain.png'); + background-repeat: repeat; + + text-align: center; + color: #777; + + position: relative; + float: right; +} + +#delete #trash-can { + width: 80%; + height: 80%; + border: 2px dashed #FFF; + border-radius: 5px; + background: url('https://mdn.mozillademos.org/files/6085/trash-can.png') no-repeat center; + + position: absolute; + top: 10%; + left: 10%; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + + transition: all 0.2s; +} + +#delete[drag-state='enter'] { + background-color: #999; +} + +/** + * Color Theme + */ + +#color-theme { + margin: 0 8px 0 0; + border: 1px solid #EEE; + display: inline-block; + float: right; +} + +#color-theme .box { + width: 80px; + height: 92px; + float: left; +} + +/** + * Color info box + */ +#color-info { + width: 360px; + float: left; +} + +#color-info .title { + width: 100%; + padding: 15px; + font-size: 18px; + text-align: center; + background-image: url('https://mdn.mozillademos.org/files/6071/color-wheel.png'); + background-repeat:no-repeat; + background-position: center left 30%; +} + +#color-info .copy-container { + position: absolute; + top: -100%; +} + +#color-info .property { + min-width: 280px; + height: 30px; + margin: 10px 0; + text-align: center; + line-height: 30px; +} + +#color-info .property > * { + float: left; +} + +#color-info .property .type { + width: 60px; + height: 100%; + padding: 0 16px 0 0; + text-align: right; +} + +#color-info .property .value { + width: 200px; + height: 100%; + padding: 0 10px; + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + font-size: 16px; + color: #777; + text-align: center; + background-color: #FFF; + border: none; +} + +#color-info .property .value:hover { + color: #37994A; +} + +#color-info .property .value:hover + .copy { + background-position: center right; +} + +#color-info .property .copy { + width: 24px; + height: 100%; + padding: 0 5px; + background-color: #FFF; + background-image: url('https://mdn.mozillademos.org/files/6073/copy.png'); + background-repeat: no-repeat; + background-position: center left; + border-left: 1px solid #EEE; + text-align: right; + float: left; +} + +#color-info .property .copy:hover { + background-position: center right; +} + + +/** + * Color Palette + */ + +#palette { + width: 1000px; + padding: 10px 0; + background-image: url('https://mdn.mozillademos.org/files/6025/grain.png'); + background-repeat: repeat; + background-color: #EEE; + color: #777; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +#color-palette { + width: 640px; + font-family: Arial, Helvetica, sans-serif; + color: #777; + float: left; +} + +#color-palette .container { + width: 100%; + height: 50px; + line-height: 50px; + overflow: hidden; + float: left; + transition: all 0.5s; +} + +#color-palette .container > * { + float: left; +} + +#color-palette .title { + width: 100px; + padding: 0 10px; + text-align: right; + line-height: inherit; +} + +#color-palette .palette { + width: 456px; + height: 38px; + margin: 3px; + padding: 3px; + display: table; + background-color: #FFF; +} + +#color-palette .palette .sample { + width: 30px; + height: 30px; + margin: 3px; + position: relative; + border: 1px solid #DDD; + float: left; + transition: all 0.2s; +} + +#color-palette .palette .sample:hover { + cursor: pointer; + border-color: #BBB; + transform: scale(1.15); + border-radius: 3px; +} + +#color-palette .controls { +} + +#color-palette .controls > * { + float: left; +} + +#color-palette .controls > *:hover { + cursor: pointer; +} + +#color-palette .controls .lock { + width: 24px; + height: 24px; + margin: 10px; + padding: 3px; + background-image: url('https://mdn.mozillademos.org/files/6077/lock.png'); + background-repeat: no-repeat; + background-position: bottom right; +} + +#color-palette .controls .lock:hover { + /*background-image: url('images/unlocked-hover.png');*/ + background-position: bottom left; +} + +#color-palette .controls .lock[locked-state='true'] { + /*background-image: url('images/locked.png');*/ + background-position: top left ; +} + +#color-palette .controls .lock[locked-state='true']:hover { + /*background-image: url('images/lock-hover.png');*/ + background-position: top right; +} + +/** + * Canvas + */ + +#canvas { + width: 100%; + height: 300px; + min-height: 250px; + border-top: 1px solid #DDD; + background-image: url('https://mdn.mozillademos.org/files/6025/grain.png'); + background-repeat: repeat; + position: relative; + float: left; +} + +#canvas[data-tutorial='drop'] { + text-align: center; + font-size: 30px; + color: #777; +} + +#canvas[data-tutorial='drop']:before { + content: "Drop colors here to compare"; + width: 40%; + padding: 30px 9% 70px 11%; + + background-image: url('https://mdn.mozillademos.org/files/6075/drop.png'); + background-repeat: no-repeat; + background-position: left 35px top 60%; + + text-align: right; + + border: 3px dashed rgb(221, 221, 221); + border-radius: 15px; + + position: absolute; + top: 50px; + left: 20%; +} + +#canvas[data-tutorial='drop']:after { + content: "adjust, change or modify"; + width: 40%; + font-size: 24px; + position: absolute; + top: 130px; + left: 32%; + z-index: 2; +} + +#canvas [data-tutorial='dblclick'] { + background-color: #999 !important; +} + +#canvas [data-tutorial='dblclick']:before { + content: "double click to activate"; + width: 80px; + color: #FFF; + position: absolute; + top: 10%; + left: 20%; + z-index: 2; +} + +#canvas .sample { + width: 100px; + height: 100px; + min-width: 20px; + min-height: 20px; + position: absolute; + border: 1px solid rgba(255, 255, 255, 0.3); +} + +#canvas .sample:hover { + cursor: move; +} + +#canvas .sample[data-active='true']:after { + content: ""; + position: absolute; + background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat; + width: 100%; + height: 12px; + top: -12px; + z-index: 2; +} + +#canvas .sample:hover > * { + cursor: pointer; + display: block !important; +} + +#canvas .sample .resize-handle { + display: none; +} + +#canvas .sample .pick { + width: 10px; + height: 10px; + margin: 5px; + background: url('https://mdn.mozillademos.org/files/6079/pick.png') center no-repeat; + position: absolute; + top: 0; + left: 0; + display: none; +} + +#canvas .sample .delete { + width: 10px; + height: 10px; + margin: 5px; + background: url('https://mdn.mozillademos.org/files/6069/close.png') center no-repeat; + position: absolute; + top: 0; + right: 0; + display: none; +} + + +/** + * Canvas controls + */ + +#canvas .toggle-bg { + width: 16px; + height: 16px; + margin: 5px; + background: url("images/canvas-controls.png") center left no-repeat; + position: absolute; + top: 0; + right: 0; +} + +#canvas .toggle-bg:hover { + cursor: pointer; +} + +#canvas[data-bg='true'] { + background: none; +} + +#canvas[data-bg='true'] .toggle-bg { + background: url('https://mdn.mozillademos.org/files/6067/canvas-controls.png') center right no-repeat; +} + +#zindex { + height: 20px; + margin: 5px; + font-size: 16px; + position: absolute; + opacity: 0; + top: -10000px; + left: 0; + color: #777; + float: left; + transition: opacity 1s; +} + +#zindex input { + border: 1px solid #DDD; + font-size: 16px; + color: #777; +} + +#zindex .ui-input-slider-info { + width: 60px; +} + +#zindex[data-active='true'] { + top: 0; + opacity: 1; +} + +</pre> + +<h3 id="JavaScript_Content">JavaScript Content</h3> + +<pre class="brush: js">'use strict'; + +var UIColorPicker = (function UIColorPicker() { + + function getElemById(id) { + return document.getElementById(id); + } + + var subscribers = []; + var pickers = []; + + /** + * RGBA Color class + * + * HSV/HSB and HSL (hue, saturation, value / brightness, lightness) + * @param hue 0-360 + * @param saturation 0-100 + * @param value 0-100 + * @param lightness 0-100 + */ + + function Color(color) { + + if(color instanceof Color === true) { + this.copy(color); + return; + } + + this.r = 0; + this.g = 0; + this.b = 0; + this.a = 1; + this.hue = 0; + this.saturation = 0; + this.value = 0; + this.lightness = 0; + this.format = 'HSV'; + } + + function RGBColor(r, g, b) { + var color = new Color(); + color.setRGBA(r, g, b, 1); + return color; + } + + function RGBAColor(r, g, b, a) { + var color = new Color(); + color.setRGBA(r, g, b, a); + return color; + } + + function HSVColor(h, s, v) { + var color = new Color(); + color.setHSV(h, s, v); + return color; + } + + function HSVAColor(h, s, v, a) { + var color = new Color(); + color.setHSV(h, s, v); + color.a = a; + return color; + } + + function HSLColor(h, s, l) { + var color = new Color(); + color.setHSL(h, s, l); + return color; + } + + function HSLAColor(h, s, l, a) { + var color = new Color(); + color.setHSL(h, s, l); + color.a = a; + return color; + } + + Color.prototype.copy = function copy(obj) { + if(obj instanceof Color !== true) { + console.log('Typeof parameter not Color'); + return; + } + + this.r = obj.r; + this.g = obj.g; + this.b = obj.b; + this.a = obj.a; + this.hue = obj.hue; + this.saturation = obj.saturation; + this.value = obj.value; + this.format = '' + obj.format; + this.lightness = obj.lightness; + }; + + Color.prototype.setFormat = function setFormat(format) { + if (format === 'HSV') + this.format = 'HSV'; + if (format === 'HSL') + this.format = 'HSL'; + }; + + /*========== Methods to set Color Properties ==========*/ + + Color.prototype.isValidRGBValue = function isValidRGBValue(value) { + return (typeof(value) === 'number' && isNaN(value) === false && + value >= 0 && value <= 255); + }; + + Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) { + if (this.isValidRGBValue(red) === false || + this.isValidRGBValue(green) === false || + this.isValidRGBValue(blue) === false) + return; + + this.r = red | 0; + this.g = green | 0; + this.b = blue | 0; + + if (this.isValidRGBValue(alpha) === true) + this.a = alpha | 0; + }; + + Color.prototype.setByName = function setByName(name, value) { + if (name === 'r' || name === 'g' || name === 'b') { + if(this.isValidRGBValue(value) === false) + return; + + this[name] = value; + this.updateHSX(); + } + }; + + Color.prototype.setHSV = function setHSV(hue, saturation, value) { + this.hue = hue; + this.saturation = saturation; + this.value = value; + this.HSVtoRGB(); + }; + + Color.prototype.setHSL = function setHSL(hue, saturation, lightness) { + this.hue = hue; + this.saturation = saturation; + this.lightness = lightness; + this.HSLtoRGB(); + }; + + Color.prototype.setHue = function setHue(value) { + if (typeof(value) !== 'number' || isNaN(value) === true || + value < 0 || value > 359) + return; + this.hue = value; + this.updateRGB(); + }; + + Color.prototype.setSaturation = function setSaturation(value) { + if (typeof(value) !== 'number' || isNaN(value) === true || + value < 0 || value > 100) + return; + this.saturation = value; + this.updateRGB(); + }; + + Color.prototype.setValue = function setValue(value) { + if (typeof(value) !== 'number' || isNaN(value) === true || + value < 0 || value > 100) + return; + this.value = value; + this.HSVtoRGB(); + }; + + Color.prototype.setLightness = function setLightness(value) { + if (typeof(value) !== 'number' || isNaN(value) === true || + value < 0 || value > 100) + return; + this.lightness = value; + this.HSLtoRGB(); + }; + + Color.prototype.setHexa = function setHexa(value) { + var valid = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value); + + if (valid !== true) + return; + + if (value[0] === '#') + value = value.slice(1, value.length); + + if (value.length === 3) + value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,'$1$1$2$2$3$3'); + + this.r = parseInt(value.substr(0, 2), 16); + this.g = parseInt(value.substr(2, 2), 16); + this.b = parseInt(value.substr(4, 2), 16); + + this.alpha = 1; + this.RGBtoHSV(); + }; + + /*========== Conversion Methods ==========*/ + + Color.prototype.convertToHSL = function convertToHSL() { + if (this.format === 'HSL') + return; + + this.setFormat('HSL'); + this.RGBtoHSL(); + }; + + Color.prototype.convertToHSV = function convertToHSV() { + if (this.format === 'HSV') + return; + + this.setFormat('HSV'); + this.RGBtoHSV(); + }; + + /*========== Update Methods ==========*/ + + Color.prototype.updateRGB = function updateRGB() { + if (this.format === 'HSV') { + this.HSVtoRGB(); + return; + } + + if (this.format === 'HSL') { + this.HSLtoRGB(); + return; + } + }; + + Color.prototype.updateHSX = function updateHSX() { + if (this.format === 'HSV') { + this.RGBtoHSV(); + return; + } + + if (this.format === 'HSL') { + this.RGBtoHSL(); + return; + } + }; + + Color.prototype.HSVtoRGB = function HSVtoRGB() { + var sat = this.saturation / 100; + var value = this.value / 100; + var C = sat * value; + var H = this.hue / 60; + var X = C * (1 - Math.abs(H % 2 - 1)); + var m = value - C; + var precision = 255; + + C = (C + m) * precision | 0; + X = (X + m) * precision | 0; + m = m * precision | 0; + + if (H >= 0 && H < 1) { this.setRGBA(C, X, m); return; } + if (H >= 1 && H < 2) { this.setRGBA(X, C, m); return; } + if (H >= 2 && H < 3) { this.setRGBA(m, C, X); return; } + if (H >= 3 && H < 4) { this.setRGBA(m, X, C); return; } + if (H >= 4 && H < 5) { this.setRGBA(X, m, C); return; } + if (H >= 5 && H < 6) { this.setRGBA(C, m, X); return; } + }; + + Color.prototype.HSLtoRGB = function HSLtoRGB() { + var sat = this.saturation / 100; + var light = this.lightness / 100; + var C = sat * (1 - Math.abs(2 * light - 1)); + var H = this.hue / 60; + var X = C * (1 - Math.abs(H % 2 - 1)); + var m = light - C/2; + var precision = 255; + + C = (C + m) * precision | 0; + X = (X + m) * precision | 0; + m = m * precision | 0; + + if (H >= 0 && H < 1) { this.setRGBA(C, X, m); return; } + if (H >= 1 && H < 2) { this.setRGBA(X, C, m); return; } + if (H >= 2 && H < 3) { this.setRGBA(m, C, X); return; } + if (H >= 3 && H < 4) { this.setRGBA(m, X, C); return; } + if (H >= 4 && H < 5) { this.setRGBA(X, m, C); return; } + if (H >= 5 && H < 6) { this.setRGBA(C, m, X); return; } + }; + + Color.prototype.RGBtoHSV = function RGBtoHSV() { + var red = this.r / 255; + var green = this.g / 255; + var blue = this.b / 255; + + var cmax = Math.max(red, green, blue); + var cmin = Math.min(red, green, blue); + var delta = cmax - cmin; + var hue = 0; + var saturation = 0; + + if (delta) { + if (cmax === red ) { hue = ((green - blue) / delta); } + if (cmax === green ) { hue = 2 + (blue - red) / delta; } + if (cmax === blue ) { hue = 4 + (red - green) / delta; } + if (cmax) saturation = delta / cmax; + } + + this.hue = 60 * hue | 0; + if (this.hue < 0) this.hue += 360; + this.saturation = (saturation * 100) | 0; + this.value = (cmax * 100) | 0; + }; + + Color.prototype.RGBtoHSL = function RGBtoHSL() { + var red = this.r / 255; + var green = this.g / 255; + var blue = this.b / 255; + + var cmax = Math.max(red, green, blue); + var cmin = Math.min(red, green, blue); + var delta = cmax - cmin; + var hue = 0; + var saturation = 0; + var lightness = (cmax + cmin) / 2; + var X = (1 - Math.abs(2 * lightness - 1)); + + if (delta) { + if (cmax === red ) { hue = ((green - blue) / delta); } + if (cmax === green ) { hue = 2 + (blue - red) / delta; } + if (cmax === blue ) { hue = 4 + (red - green) / delta; } + if (cmax) saturation = delta / X; + } + + this.hue = 60 * hue | 0; + if (this.hue < 0) this.hue += 360; + this.saturation = (saturation * 100) | 0; + this.lightness = (lightness * 100) | 0; + }; + + /*========== Get Methods ==========*/ + + Color.prototype.getHexa = function getHexa() { + var r = this.r.toString(16); + var g = this.g.toString(16); + var b = this.b.toString(16); + if (this.r < 16) r = '0' + r; + if (this.g < 16) g = '0' + g; + if (this.b < 16) b = '0' + b; + var value = '#' + r + g + b; + return value.toUpperCase(); + }; + + Color.prototype.getRGBA = function getRGBA() { + + var rgb = '(' + this.r + ', ' + this.g + ', ' + this.b; + var a = ''; + var v = ''; + var x = parseFloat(this.a); + if (x !== 1) { + a = 'a'; + v = ', ' + x; + } + + var value = 'rgb' + a + rgb + v + ')'; + return value; + }; + + Color.prototype.getHSLA = function getHSLA() { + if (this.format === 'HSV') { + var color = new Color(this); + color.setFormat('HSL'); + color.updateHSX(); + return color.getHSLA(); + } + + var a = ''; + var v = ''; + var hsl = '(' + this.hue + ', ' + this.saturation + '%, ' + this.lightness +'%'; + var x = parseFloat(this.a); + if (x !== 1) { + a = 'a'; + v = ', ' + x; + } + + var value = 'hsl' + a + hsl + v + ')'; + return value; + }; + + Color.prototype.getColor = function getColor() { + if (this.a | 0 === 1) + return this.getHexa(); + return this.getRGBA(); + }; + + /*=======================================================================*/ + /*=======================================================================*/ + + /*========== Capture Mouse Movement ==========*/ + + var setMouseTracking = function setMouseTracking(elem, callback) { + elem.addEventListener('mousedown', function(e) { + callback(e); + document.addEventListener('mousemove', callback); + }); + + document.addEventListener('mouseup', function(e) { + document.removeEventListener('mousemove', callback); + }); + }; + + /*====================*/ + // Color Picker Class + /*====================*/ + + function ColorPicker(node) { + this.color = new Color(); + this.node = node; + this.subscribers = []; + + var type = this.node.getAttribute('data-mode'); + var topic = this.node.getAttribute('data-topic'); + + this.topic = topic; + this.picker_mode = (type === 'HSL') ? 'HSL' : 'HSV'; + this.color.setFormat(this.picker_mode); + + this.createPickingArea(); + this.createHueArea(); + + this.newInputComponent('H', 'hue', this.inputChangeHue.bind(this)); + this.newInputComponent('S', 'saturation', this.inputChangeSaturation.bind(this)); + this.newInputComponent('V', 'value', this.inputChangeValue.bind(this)); + this.newInputComponent('L', 'lightness', this.inputChangeLightness.bind(this)); + + this.createAlphaArea(); + + this.newInputComponent('R', 'red', this.inputChangeRed.bind(this)); + this.newInputComponent('G', 'green', this.inputChangeGreen.bind(this)); + this.newInputComponent('B', 'blue', this.inputChangeBlue.bind(this)); + + this.createPreviewBox(); + this.createChangeModeButton(); + + this.newInputComponent('alpha', 'alpha', this.inputChangeAlpha.bind(this)); + this.newInputComponent('hexa', 'hexa', this.inputChangeHexa.bind(this)); + + this.setColor(this.color); + pickers[topic] = this; + } + + /*************************************************************************/ + // Function for generating the color-picker + /*************************************************************************/ + + ColorPicker.prototype.createPickingArea = function createPickingArea() { + var area = document.createElement('div'); + var picker = document.createElement('div'); + + area.className = 'picking-area'; + picker.className = 'picker'; + + this.picking_area = area; + this.color_picker = picker; + setMouseTracking(area, this.updateColor.bind(this)); + + area.appendChild(picker); + this.node.appendChild(area); + }; + + ColorPicker.prototype.createHueArea = function createHueArea() { + var area = document.createElement('div'); + var picker = document.createElement('div'); + + area.className = 'hue'; + picker.className ='slider-picker'; + + this.hue_area = area; + this.hue_picker = picker; + setMouseTracking(area, this.updateHueSlider.bind(this)); + + area.appendChild(picker); + this.node.appendChild(area); + }; + + ColorPicker.prototype.createAlphaArea = function createAlphaArea() { + var area = document.createElement('div'); + var mask = document.createElement('div'); + var picker = document.createElement('div'); + + area.className = 'alpha'; + mask.className = 'alpha-mask'; + picker.className = 'slider-picker'; + + this.alpha_area = area; + this.alpha_mask = mask; + this.alpha_picker = picker; + setMouseTracking(area, this.updateAlphaSlider.bind(this)); + + area.appendChild(mask); + mask.appendChild(picker); + this.node.appendChild(area); + }; + + ColorPicker.prototype.createPreviewBox = function createPreviewBox(e) { + var preview_box = document.createElement('div'); + var preview_color = document.createElement('div'); + + preview_box.className = 'preview'; + preview_color.className = 'preview-color'; + + this.preview_color = preview_color; + + preview_box.appendChild(preview_color); + this.node.appendChild(preview_box); + }; + + ColorPicker.prototype.newInputComponent = function newInputComponent(title, topic, onChangeFunc) { + var wrapper = document.createElement('div'); + var input = document.createElement('input'); + var info = document.createElement('span'); + + wrapper.className = 'input'; + wrapper.setAttribute('data-topic', topic); + info.textContent = title; + info.className = 'name'; + input.setAttribute('type', 'text'); + + wrapper.appendChild(info); + wrapper.appendChild(input); + this.node.appendChild(wrapper); + + input.addEventListener('change', onChangeFunc); + input.addEventListener('click', function() { + this.select(); + }); + + this.subscribe(topic, function(value) { + input.value = value; + }); + }; + + ColorPicker.prototype.createChangeModeButton = function createChangeModeButton() { + + var button = document.createElement('div'); + button.className = 'switch_mode'; + button.addEventListener('click', function() { + if (this.picker_mode === 'HSV') + this.setPickerMode('HSL'); + else + this.setPickerMode('HSV'); + + }.bind(this)); + + this.node.appendChild(button); + }; + + /*************************************************************************/ + // Updates properties of UI elements + /*************************************************************************/ + + ColorPicker.prototype.updateColor = function updateColor(e) { + var x = e.pageX - this.picking_area.offsetLeft; + var y = e.pageY - this.picking_area.offsetTop; + var picker_offset = 5; + + // width and height should be the same + var size = this.picking_area.clientWidth; + + if (x > size) x = size; + if (y > size) y = size; + if (x < 0) x = 0; + if (y < 0) y = 0; + + var value = 100 - (y * 100 / size) | 0; + var saturation = x * 100 / size | 0; + + if (this.picker_mode === 'HSV') + this.color.setHSV(this.color.hue, saturation, value); + if (this.picker_mode === 'HSL') + this.color.setHSL(this.color.hue, saturation, value); + + this.color_picker.style.left = x - picker_offset + 'px'; + this.color_picker.style.top = y - picker_offset + 'px'; + + this.updateAlphaGradient(); + this.updatePreviewColor(); + + this.notify('value', value); + this.notify('lightness', value); + this.notify('saturation', saturation); + + this.notify('red', this.color.r); + this.notify('green', this.color.g); + this.notify('blue', this.color.b); + this.notify('hexa', this.color.getHexa()); + + notify(this.topic, this.color); + }; + + ColorPicker.prototype.updateHueSlider = function updateHueSlider(e) { + var x = e.pageX - this.hue_area.offsetLeft; + var width = this.hue_area.clientWidth; + + if (x < 0) x = 0; + if (x > width) x = width; + + // TODO 360 => 359 + var hue = ((359 * x) / width) | 0; + // if (hue === 360) hue = 359; + + this.updateSliderPosition(this.hue_picker, x); + this.setHue(hue); + }; + + ColorPicker.prototype.updateAlphaSlider = function updateAlphaSlider(e) { + var x = e.pageX - this.alpha_area.offsetLeft; + var width = this.alpha_area.clientWidth; + + if (x < 0) x = 0; + if (x > width) x = width; + + this.color.a = (x / width).toFixed(2); + + this.updateSliderPosition(this.alpha_picker, x); + this.updatePreviewColor(); + + this.notify('alpha', this.color.a); + notify(this.topic, this.color); + }; + + ColorPicker.prototype.setHue = function setHue(value) { + this.color.setHue(value); + + this.updatePickerBackground(); + this.updateAlphaGradient(); + this.updatePreviewColor(); + + this.notify('red', this.color.r); + this.notify('green', this.color.g); + this.notify('blue', this.color.b); + this.notify('hexa', this.color.getHexa()); + this.notify('hue', this.color.hue); + + notify(this.topic, this.color); + }; + + // Updates when one of Saturation/Value/Lightness changes + ColorPicker.prototype.updateSLV = function updateSLV() { + this.updatePickerPosition(); + this.updateAlphaGradient(); + this.updatePreviewColor(); + + this.notify('red', this.color.r); + this.notify('green', this.color.g); + this.notify('blue', this.color.b); + this.notify('hexa', this.color.getHexa()); + + notify(this.topic, this.color); + }; + + /*************************************************************************/ + // Update positions of various UI elements + /*************************************************************************/ + + ColorPicker.prototype.updatePickerPosition = function updatePickerPosition() { + var size = this.picking_area.clientWidth; + var value = 0; + var offset = 5; + + if (this.picker_mode === 'HSV') + value = this.color.value; + if (this.picker_mode === 'HSL') + value = this.color.lightness; + + var x = (this.color.saturation * size / 100) | 0; + var y = size - (value * size / 100) | 0; + + this.color_picker.style.left = x - offset + 'px'; + this.color_picker.style.top = y - offset + 'px'; + }; + + ColorPicker.prototype.updateSliderPosition = function updateSliderPosition(elem, pos) { + elem.style.left = Math.max(pos - 3, -2) + 'px'; + }; + + ColorPicker.prototype.updateHuePicker = function updateHuePicker() { + var size = this.hue_area.clientWidth; + var offset = 1; + var pos = (this.color.hue * size / 360 ) | 0; + this.hue_picker.style.left = pos - offset + 'px'; + }; + + ColorPicker.prototype.updateAlphaPicker = function updateAlphaPicker() { + var size = this.alpha_area.clientWidth; + var offset = 1; + var pos = (this.color.a * size) | 0; + this.alpha_picker.style.left = pos - offset + 'px'; + }; + + /*************************************************************************/ + // Update background colors + /*************************************************************************/ + + ColorPicker.prototype.updatePickerBackground = function updatePickerBackground() { + var nc = new Color(this.color); + nc.setHSV(nc.hue, 100, 100); + this.picking_area.style.backgroundColor = nc.getHexa(); + }; + + ColorPicker.prototype.updateAlphaGradient = function updateAlphaGradient() { + this.alpha_mask.style.backgroundColor = this.color.getHexa(); + }; + + ColorPicker.prototype.updatePreviewColor = function updatePreviewColor() { + this.preview_color.style.backgroundColor = this.color.getColor(); + }; + + /*************************************************************************/ + // Update input elements + /*************************************************************************/ + + ColorPicker.prototype.inputChangeHue = function inputChangeHue(e) { + var value = parseInt(e.target.value); + this.setHue(value); + this.updateHuePicker(); + }; + + ColorPicker.prototype.inputChangeSaturation = function inputChangeSaturation(e) { + var value = parseInt(e.target.value); + this.color.setSaturation(value); + e.target.value = this.color.saturation; + this.updateSLV(); + }; + + ColorPicker.prototype.inputChangeValue = function inputChangeValue(e) { + var value = parseInt(e.target.value); + this.color.setValue(value); + e.target.value = this.color.value; + this.updateSLV(); + }; + + ColorPicker.prototype.inputChangeLightness = function inputChangeLightness(e) { + var value = parseInt(e.target.value); + this.color.setLightness(value); + e.target.value = this.color.lightness; + this.updateSLV(); + }; + + ColorPicker.prototype.inputChangeRed = function inputChangeRed(e) { + var value = parseInt(e.target.value); + this.color.setByName('r', value); + e.target.value = this.color.r; + this.setColor(this.color); + }; + + ColorPicker.prototype.inputChangeGreen = function inputChangeGreen(e) { + var value = parseInt(e.target.value); + this.color.setByName('g', value); + e.target.value = this.color.g; + this.setColor(this.color); + }; + + ColorPicker.prototype.inputChangeBlue = function inputChangeBlue(e) { + var value = parseInt(e.target.value); + this.color.setByName('b', value); + e.target.value = this.color.b; + this.setColor(this.color); + }; + + ColorPicker.prototype.inputChangeAlpha = function inputChangeAlpha(e) { + var value = parseFloat(e.target.value); + + if (typeof value === 'number' && isNaN(value) === false && + value >= 0 && value <= 1) + this.color.a = value.toFixed(2); + + e.target.value = this.color.a; + this.updateAlphaPicker(); + }; + + ColorPicker.prototype.inputChangeHexa = function inputChangeHexa(e) { + var value = e.target.value; + this.color.setHexa(value); + this.setColor(this.color); + }; + + /*************************************************************************/ + // Internal Pub/Sub + /*************************************************************************/ + + ColorPicker.prototype.subscribe = function subscribe(topic, callback) { + this.subscribers[topic] = callback; + }; + + ColorPicker.prototype.notify = function notify(topic, value) { + if (this.subscribers[topic]) + this.subscribers[topic](value); + }; + + /*************************************************************************/ + // Set Picker Properties + /*************************************************************************/ + + ColorPicker.prototype.setColor = function setColor(color) { + if(color instanceof Color !== true) { + console.log('Typeof parameter not Color'); + return; + } + + if (color.format !== this.picker_mode) { + color.setFormat(this.picker_mode); + color.updateHSX(); + } + + this.color.copy(color); + this.updateHuePicker(); + this.updatePickerPosition(); + this.updatePickerBackground(); + this.updateAlphaPicker(); + this.updateAlphaGradient(); + this.updatePreviewColor(); + + this.notify('red', this.color.r); + this.notify('green', this.color.g); + this.notify('blue', this.color.b); + + this.notify('hue', this.color.hue); + this.notify('saturation', this.color.saturation); + this.notify('value', this.color.value); + this.notify('lightness', this.color.lightness); + + this.notify('alpha', this.color.a); + this.notify('hexa', this.color.getHexa()); + notify(this.topic, this.color); + }; + + ColorPicker.prototype.setPickerMode = function setPickerMode(mode) { + if (mode !== 'HSV' && mode !== 'HSL') + return; + + this.picker_mode = mode; + this.node.setAttribute('data-mode', this.picker_mode); + this.setColor(this.color); + }; + + /*************************************************************************/ + // UNUSED + /*************************************************************************/ + + var setPickerMode = function setPickerMode(topic, mode) { + if (pickers[topic]) + pickers[topic].setPickerMode(mode); + }; + + var setColor = function setColor(topic, color) { + if (pickers[topic]) + pickers[topic].setColor(color); + }; + + var getColor = function getColor(topic) { + if (pickers[topic]) + return new Color(pickers[topic].color); + }; + + var subscribe = function subscribe(topic, callback) { + if (subscribers[topic] === undefined) + subscribers[topic] = []; + + subscribers[topic].push(callback); + }; + + var unsubscribe = function unsubscribe(callback) { + subscribers.indexOf(callback); + subscribers.splice(index, 1); + }; + + var notify = function notify(topic, value) { + if (subscribers[topic] === undefined || subscribers[topic].length === 0) + return; + + var color = new Color(value); + for (var i in subscribers[topic]) + subscribers[topic][i](color); + }; + + var init = function init() { + var elem = document.querySelectorAll('.ui-color-picker'); + var size = elem.length; + for (var i = 0; i < size; i++) + new ColorPicker(elem[i]); + }; + + return { + init : init, + Color : Color, + RGBColor : RGBColor, + RGBAColor : RGBAColor, + HSVColor : HSVColor, + HSVAColor : HSVAColor, + HSLColor : HSLColor, + HSLAColor : HSLAColor, + setColor : setColor, + getColor : getColor, + subscribe : subscribe, + unsubscribe : unsubscribe, + setPickerMode : setPickerMode + }; + +})(); + + + +/** + * UI-SlidersManager + */ + +var InputSliderManager = (function InputSliderManager() { + + var subscribers = {}; + var sliders = []; + + var InputComponent = function InputComponent(obj) { + var input = document.createElement('input'); + input.setAttribute('type', 'text'); + input.style.width = 50 + obj.precision * 10 + 'px'; + + input.addEventListener('click', function(e) { + this.select(); + }); + + input.addEventListener('change', function(e) { + var value = parseFloat(e.target.value); + + if (isNaN(value) === true) + setValue(obj.topic, obj.value); + else + setValue(obj.topic, value); + }); + + return input; + }; + + var SliderComponent = function SliderComponent(obj, sign) { + var slider = document.createElement('div'); + var startX = null; + var start_value = 0; + + slider.addEventListener("click", function(e) { + document.removeEventListener("mousemove", sliderMotion); + setValue(obj.topic, obj.value + obj.step * sign); + }); + + slider.addEventListener("mousedown", function(e) { + startX = e.clientX; + start_value = obj.value; + document.body.style.cursor = "e-resize"; + + document.addEventListener("mouseup", slideEnd); + document.addEventListener("mousemove", sliderMotion); + }); + + var slideEnd = function slideEnd(e) { + document.removeEventListener("mousemove", sliderMotion); + document.body.style.cursor = "auto"; + slider.style.cursor = "pointer"; + }; + + var sliderMotion = function sliderMotion(e) { + slider.style.cursor = "e-resize"; + var delta = (e.clientX - startX) / obj.sensivity | 0; + var value = delta * obj.step + start_value; + setValue(obj.topic, value); + }; + + return slider; + }; + + var InputSlider = function(node) { + var min = parseFloat(node.getAttribute('data-min')); + var max = parseFloat(node.getAttribute('data-max')); + var step = parseFloat(node.getAttribute('data-step')); + var value = parseFloat(node.getAttribute('data-value')); + var topic = node.getAttribute('data-topic'); + var unit = node.getAttribute('data-unit'); + var name = node.getAttribute('data-info'); + var sensivity = node.getAttribute('data-sensivity') | 0; + var precision = node.getAttribute('data-precision') | 0; + + this.min = isNaN(min) ? 0 : min; + this.max = isNaN(max) ? 100 : max; + this.precision = precision >= 0 ? precision : 0; + this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision); + this.topic = topic; + this.node = node; + this.unit = unit === null ? '' : unit; + this.sensivity = sensivity > 0 ? sensivity : 5; + value = isNaN(value) ? this.min : value; + + var input = new InputComponent(this); + var slider_left = new SliderComponent(this, -1); + var slider_right = new SliderComponent(this, 1); + + slider_left.className = 'ui-input-slider-left'; + slider_right.className = 'ui-input-slider-right'; + + if (name) { + var info = document.createElement('span'); + info.className = 'ui-input-slider-info'; + info.textContent = name; + node.appendChild(info); + } + + node.appendChild(slider_left); + node.appendChild(input); + node.appendChild(slider_right); + + this.input = input; + sliders[topic] = this; + setValue(topic, value); + }; + + InputSlider.prototype.setInputValue = function setInputValue() { + this.input.value = this.value.toFixed(this.precision) + this.unit; + }; + + var setValue = function setValue(topic, value, send_notify) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + value = parseFloat(value.toFixed(slider.precision)); + + if (value > slider.max) value = slider.max; + if (value < slider.min) value = slider.min; + + slider.value = value; + slider.node.setAttribute('data-value', value); + + slider.setInputValue(); + + if (send_notify === false) + return; + + notify.call(slider); + }; + + var setMax = function setMax(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + slider.max = value; + setValue(topic, slider.value); + }; + + var setMin = function setMin(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + slider.min = value; + setValue(topic, slider.value); + }; + + var setUnit = function setUnit(topic, unit) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + slider.unit = unit; + setValue(topic, slider.value); + }; + + var setStep = function setStep(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + slider.step = parseFloat(value); + setValue(topic, slider.value); + }; + + var setPrecision = function setPrecision(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + value = value | 0; + slider.precision = value; + + var step = parseFloat(slider.step.toFixed(value)); + if (step === 0) + slider.step = 1 / Math.pow(10, value); + + setValue(topic, slider.value); + }; + + var setSensivity = function setSensivity(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + value = value | 0; + + slider.sensivity = value > 0 ? value : 5; + }; + + var getNode = function getNode(topic) { + return sliders[topic].node; + }; + + var getPrecision = function getPrecision(topic) { + return sliders[topic].precision; + }; + + var getStep = function getStep(topic) { + return sliders[topic].step; + }; + + var subscribe = function subscribe(topic, callback) { + if (subscribers[topic] === undefined) + subscribers[topic] = []; + subscribers[topic].push(callback); + }; + + var unsubscribe = function unsubscribe(topic, callback) { + subscribers[topic].indexOf(callback); + subscribers[topic].splice(index, 1); + }; + + var notify = function notify() { + if (subscribers[this.topic] === undefined) + return; + for (var i = 0; i < subscribers[this.topic].length; i++) + subscribers[this.topic][i](this.value); + }; + + var createSlider = function createSlider(topic, label) { + var slider = document.createElement('div'); + slider.className = 'ui-input-slider'; + slider.setAttribute('data-topic', topic); + + if (label !== undefined) + slider.setAttribute('data-info', label); + + new InputSlider(slider); + return slider; + }; + + var init = function init() { + var elem = document.querySelectorAll('.ui-input-slider'); + var size = elem.length; + for (var i = 0; i < size; i++) + new InputSlider(elem[i]); + }; + + return { + init : init, + setMax : setMax, + setMin : setMin, + setUnit : setUnit, + setStep : setStep, + getNode : getNode, + getStep : getStep, + setValue : setValue, + subscribe : subscribe, + unsubscribe : unsubscribe, + setPrecision : setPrecision, + setSensivity : setSensivity, + getPrecision : getPrecision, + createSlider : createSlider, + }; + +})(); + + +'use strict'; + +window.addEventListener("load", function() { + ColorPickerTool.init(); +}); + +var ColorPickerTool = (function ColorPickerTool() { + + /*========== Get DOM Element By ID ==========*/ + + function getElemById(id) { + return document.getElementById(id); + } + + function allowDropEvent(e) { + e.preventDefault(); + } + + /*========== Make an element resizable relative to it's parent ==========*/ + + var UIComponent = (function UIComponent() { + + function makeResizable(elem, axis) { + var valueX = 0; + var valueY = 0; + var action = 0; + + var resizeStart = function resizeStart(e) { + e.stopPropagation(); + e.preventDefault(); + if (e.button !== 0) + return; + + valueX = e.clientX - elem.clientWidth; + valueY = e.clientY - elem.clientHeight; + + document.body.setAttribute('data-resize', axis); + document.addEventListener('mousemove', mouseMove); + document.addEventListener('mouseup', resizeEnd); + }; + + var mouseMove = function mouseMove(e) { + if (action >= 0) + elem.style.width = e.clientX - valueX + 'px'; + if (action <= 0) + elem.style.height = e.clientY - valueY + 'px'; + }; + + var resizeEnd = function resizeEnd(e) { + if (e.button !== 0) + return; + + document.body.removeAttribute('data-resize', axis); + document.removeEventListener('mousemove', mouseMove); + document.removeEventListener('mouseup', resizeEnd); + }; + + var handle = document.createElement('div'); + handle.className = 'resize-handle'; + + if (axis === 'width') action = 1; + else if (axis === 'height') action = -1; + else axis = 'both'; + + handle.className = 'resize-handle'; + handle.setAttribute('data-resize', axis); + handle.addEventListener('mousedown', resizeStart); + elem.appendChild(handle); + }; + + /*========== Make an element draggable relative to it's parent ==========*/ + + var makeDraggable = function makeDraggable(elem, endFunction) { + + var offsetTop; + var offsetLeft; + + elem.setAttribute('data-draggable', 'true'); + + var dragStart = function dragStart(e) { + e.preventDefault(); + e.stopPropagation(); + + if (e.target.getAttribute('data-draggable') !== 'true' || + e.target !== elem || e.button !== 0) + return; + + offsetLeft = e.clientX - elem.offsetLeft; + offsetTop = e.clientY - elem.offsetTop; + + document.addEventListener('mousemove', mouseDrag); + document.addEventListener('mouseup', dragEnd); + }; + + var dragEnd = function dragEnd(e) { + if (e.button !== 0) + return; + + document.removeEventListener('mousemove', mouseDrag); + document.removeEventListener('mouseup', dragEnd); + }; + + var mouseDrag = function mouseDrag(e) { + elem.style.left = e.clientX - offsetLeft + 'px'; + elem.style.top = e.clientY - offsetTop + 'px'; + }; + + elem.addEventListener('mousedown', dragStart, false); + }; + + return { + makeResizable : makeResizable, + makeDraggable : makeDraggable + }; + + })(); + + /*========== Color Class ==========*/ + + var Color = UIColorPicker.Color; + var HSLColor = UIColorPicker.HSLColor; + + /** + * ColorPalette + */ + var ColorPalette = (function ColorPalette() { + + var samples = []; + var color_palette; + var complementary; + + var hideNode = function(node) { + node.setAttribute('data-hidden', 'true'); + }; + + var ColorSample = function ColorSample(id) { + var node = document.createElement('div'); + node.className = 'sample'; + + this.uid = samples.length; + this.node = node; + this.color = new Color(); + + node.setAttribute('sample-id', this.uid); + node.setAttribute('draggable', 'true'); + node.addEventListener('dragstart', this.dragStart.bind(this)); + node.addEventListener('click', this.pickColor.bind(this)); + + samples.push(this); + }; + + ColorSample.prototype.updateBgColor = function updateBgColor() { + this.node.style.backgroundColor = this.color.getColor(); + }; + + ColorSample.prototype.updateColor = function updateColor(color) { + this.color.copy(color); + this.updateBgColor(); + }; + + ColorSample.prototype.updateHue = function updateHue(color, degree, steps) { + this.color.copy(color); + var hue = (steps * degree + this.color.hue) % 360; + if (hue < 0) hue += 360; + this.color.setHue(hue); + this.updateBgColor(); + }; + + ColorSample.prototype.updateSaturation = function updateSaturation(color, value, steps) { + var saturation = color.saturation + value * steps; + if (saturation <= 0) { + this.node.setAttribute('data-hidden', 'true'); + return; + } + + this.node.removeAttribute('data-hidden'); + this.color.copy(color); + this.color.setSaturation(saturation); + this.updateBgColor(); + }; + + ColorSample.prototype.updateLightness = function updateLightness(color, value, steps) { + var lightness = color.lightness + value * steps; + if (lightness <= 0) { + this.node.setAttribute('data-hidden', 'true'); + return; + } + this.node.removeAttribute('data-hidden'); + this.color.copy(color); + this.color.setLightness(lightness); + this.updateBgColor(); + }; + + ColorSample.prototype.updateBrightness = function updateBrightness(color, value, steps) { + var brightness = color.value + value * steps; + if (brightness <= 0) { + this.node.setAttribute('data-hidden', 'true'); + return; + } + this.node.removeAttribute('data-hidden'); + this.color.copy(color); + this.color.setValue(brightness); + this.updateBgColor(); + }; + + ColorSample.prototype.updateAlpha = function updateAlpha(color, value, steps) { + var alpha = parseFloat(color.a) + value * steps; + if (alpha <= 0) { + this.node.setAttribute('data-hidden', 'true'); + return; + } + this.node.removeAttribute('data-hidden'); + this.color.copy(color); + this.color.a = parseFloat(alpha.toFixed(2)); + this.updateBgColor(); + }; + + ColorSample.prototype.pickColor = function pickColor() { + UIColorPicker.setColor('picker', this.color); + }; + + ColorSample.prototype.dragStart = function dragStart(e) { + e.dataTransfer.setData('sampleID', this.uid); + e.dataTransfer.setData('location', 'palette-samples'); + }; + + var Palette = function Palette(text, size) { + this.samples = []; + this.locked = false; + + var palette = document.createElement('div'); + var title = document.createElement('div'); + var controls = document.createElement('div'); + var container = document.createElement('div'); + var lock = document.createElement('div'); + + container.className = 'container'; + title.className = 'title'; + palette.className = 'palette'; + controls.className = 'controls'; + lock.className = 'lock'; + title.textContent = text; + + controls.appendChild(lock); + container.appendChild(title); + container.appendChild(controls); + container.appendChild(palette); + + lock.addEventListener('click', function () { + this.locked = !this.locked; + lock.setAttribute('locked-state', this.locked); + }.bind(this)); + + for(var i = 0; i < size; i++) { + var sample = new ColorSample(); + this.samples.push(sample); + palette.appendChild(sample.node); + } + + this.container = container; + this.title = title; + }; + + var createHuePalette = function createHuePalette() { + var palette = new Palette('Hue', 12); + + UIColorPicker.subscribe('picker', function(color) { + if (palette.locked === true) + return; + + for(var i = 0; i < 12; i++) { + palette.samples[i].updateHue(color, 30, i); + } + }); + + color_palette.appendChild(palette.container); + }; + + var createSaturationPalette = function createSaturationPalette() { + var palette = new Palette('Saturation', 11); + + UIColorPicker.subscribe('picker', function(color) { + if (palette.locked === true) + return; + + for(var i = 0; i < 11; i++) { + palette.samples[i].updateSaturation(color, -10, i); + } + }); + + color_palette.appendChild(palette.container); + }; + + /* Brightness or Lightness - depends on the picker mode */ + var createVLPalette = function createSaturationPalette() { + var palette = new Palette('Lightness', 11); + + UIColorPicker.subscribe('picker', function(color) { + if (palette.locked === true) + return; + + if(color.format === 'HSL') { + palette.title.textContent = 'Lightness'; + for(var i = 0; i < 11; i++) + palette.samples[i].updateLightness(color, -10, i); + } + else { + palette.title.textContent = 'Value'; + for(var i = 0; i < 11; i++) + palette.samples[i].updateBrightness(color, -10, i); + } + }); + + color_palette.appendChild(palette.container); + }; + + var isBlankPalette = function isBlankPalette(container, value) { + if (value === 0) { + container.setAttribute('data-collapsed', 'true'); + return true; + } + + container.removeAttribute('data-collapsed'); + return false; + }; + + var createAlphaPalette = function createAlphaPalette() { + var palette = new Palette('Alpha', 10); + + UIColorPicker.subscribe('picker', function(color) { + if (palette.locked === true) + return; + + for(var i = 0; i < 10; i++) { + palette.samples[i].updateAlpha(color, -0.1, i); + } + }); + + color_palette.appendChild(palette.container); + }; + + var getSampleColor = function getSampleColor(id) { + if (samples[id] !== undefined && samples[id]!== null) + return new Color(samples[id].color); + }; + + var init = function init() { + color_palette = getElemById('color-palette'); + + createHuePalette(); + createSaturationPalette(); + createVLPalette(); + createAlphaPalette(); + + }; + + return { + init : init, + getSampleColor : getSampleColor + }; + + })(); + + /** + * ColorInfo + */ + var ColorInfo = (function ColorInfo() { + + var info_box; + var select; + var RGBA; + var HEXA; + var HSLA; + + var updateInfo = function updateInfo(color) { + if (color.a | 0 === 1) { + RGBA.info.textContent = 'RGB'; + HSLA.info.textContent = 'HSL'; + } + else { + RGBA.info.textContent = 'RGBA'; + HSLA.info.textContent = 'HSLA'; + } + + RGBA.value.value = color.getRGBA(); + HSLA.value.value = color.getHSLA(); + HEXA.value.value = color.getHexa(); + }; + + var InfoProperty = function InfoProperty(info) { + + var node = document.createElement('div'); + var title = document.createElement('div'); + var value = document.createElement('input'); + var copy = document.createElement('div'); + + node.className = 'property'; + title.className = 'type'; + value.className = 'value'; + copy.className = 'copy'; + + title.textContent = info; + value.setAttribute('type', 'text'); + + copy.addEventListener('click', function() { + value.select(); + }); + + node.appendChild(title); + node.appendChild(value); + node.appendChild(copy); + + this.node = node; + this.value = value; + this.info = title; + + info_box.appendChild(node); + }; + + var init = function init() { + + info_box = getElemById('color-info'); + + RGBA = new InfoProperty('RGBA'); + HSLA = new InfoProperty('HSLA'); + HEXA = new InfoProperty('HEXA'); + + UIColorPicker.subscribe('picker', updateInfo); + + }; + + return { + init: init + }; + + })(); + + /** + * ColorPicker Samples + */ + var ColorPickerSamples = (function ColorPickerSamples() { + + var samples = []; + var nr_samples = 0; + var active = null; + var container = null; + var samples_per_line = 10; + var trash_can = null; + var base_color = new HSLColor(0, 50, 100); + var add_btn; + var add_btn_pos; + + var ColorSample = function ColorSample() { + var node = document.createElement('div'); + node.className = 'sample'; + + this.uid = samples.length; + this.index = nr_samples++; + this.node = node; + this.color = new Color(base_color); + + node.setAttribute('sample-id', this.uid); + node.setAttribute('draggable', 'true'); + + node.addEventListener('dragstart', this.dragStart.bind(this)); + node.addEventListener('dragover' , allowDropEvent); + node.addEventListener('drop' , this.dragDrop.bind(this)); + + this.updatePosition(this.index); + this.updateBgColor(); + samples.push(this); + }; + + ColorSample.prototype.updateBgColor = function updateBgColor() { + this.node.style.backgroundColor = this.color.getColor(); + }; + + ColorSample.prototype.updatePosition = function updatePosition(index) { + this.index = index; + this.posY = 5 + ((index / samples_per_line) | 0) * 52; + this.posX = 5 + ((index % samples_per_line) | 0) * 52; + this.node.style.top = this.posY + 'px'; + this.node.style.left = this.posX + 'px'; + }; + + ColorSample.prototype.updateColor = function updateColor(color) { + this.color.copy(color); + this.updateBgColor(); + }; + + ColorSample.prototype.activate = function activate() { + UIColorPicker.setColor('picker', this.color); + this.node.setAttribute('data-active', 'true'); + }; + + ColorSample.prototype.deactivate = function deactivate() { + this.node.removeAttribute('data-active'); + }; + + ColorSample.prototype.dragStart = function dragStart(e) { + e.dataTransfer.setData('sampleID', this.uid); + e.dataTransfer.setData('location', 'picker-samples'); + }; + + ColorSample.prototype.dragDrop = function dragDrop(e) { + e.stopPropagation(); + this.color = Tool.getSampleColorFrom(e); + this.updateBgColor(); + }; + + ColorSample.prototype.deleteSample = function deleteSample() { + container.removeChild(this.node); + samples[this.uid] = null; + nr_samples--; + }; + + var updateUI = function updateUI() { + updateContainerProp(); + + var index = 0; + var nr = samples.length; + for (var i=0; i < nr; i++) + if (samples[i] !== null) { + samples[i].updatePosition(index); + index++; + } + + AddSampleButton.updatePosition(index); + }; + + var deleteSample = function deleteSample(e) { + trash_can.parentElement.setAttribute('drag-state', 'none'); + + var location = e.dataTransfer.getData('location'); + if (location !== 'picker-samples') + return; + + var sampleID = e.dataTransfer.getData('sampleID'); + samples[sampleID].deleteSample(); + console.log(samples); + + updateUI(); + }; + + var createDropSample = function createDropSample() { + var sample = document.createElement('div'); + sample.id = 'drop-effect-sample'; + sample.className = 'sample'; + container.appendChild(sample); + }; + + var setActivateSample = function setActivateSample(e) { + if (e.target.className !== 'sample') + return; + + unsetActiveSample(active); + Tool.unsetVoidSample(); + CanvasSamples.unsetActiveSample(); + active = samples[e.target.getAttribute('sample-id')]; + active.activate(); + }; + + var unsetActiveSample = function unsetActiveSample() { + if (active) + active.deactivate(); + active = null; + }; + + var getSampleColor = function getSampleColor(id) { + if (samples[id] !== undefined && samples[id]!== null) + return new Color(samples[id].color); + }; + + var updateContainerProp = function updateContainerProp() { + samples_per_line = ((container.clientWidth - 5) / 52) | 0; + var height = 52 * (1 + (nr_samples / samples_per_line) | 0); + container.style.height = height + 10 + 'px'; + }; + + var AddSampleButton = (function AddSampleButton() { + var node; + var _index = 0; + var _posX; + var _posY; + + var updatePosition = function updatePosition(index) { + _index = index; + _posY = 5 + ((index / samples_per_line) | 0) * 52; + _posX = 5 + ((index % samples_per_line) | 0) * 52; + + node.style.top = _posY + 'px'; + node.style.left = _posX + 'px'; + }; + + var addButtonClick = function addButtonClick() { + var sample = new ColorSample(); + container.appendChild(sample.node); + updatePosition(_index + 1); + updateUI(); + }; + + var init = function init() { + node = document.createElement('div'); + var icon = document.createElement('div'); + + node.className = 'sample'; + icon.id = 'add-icon'; + node.appendChild(icon); + node.addEventListener('click', addButtonClick); + + updatePosition(0); + container.appendChild(node); + }; + + return { + init : init, + updatePosition : updatePosition + }; + })(); + + var init = function init() { + container = getElemById('picker-samples'); + trash_can = getElemById('trash-can'); + + AddSampleButton.init(); + + for (var i=0; i<16; i++) { + var sample = new ColorSample(); + container.appendChild(sample.node); + } + + AddSampleButton.updatePosition(samples.length); + updateUI(); + + active = samples[0]; + active.activate(); + + container.addEventListener('click', setActivateSample); + + trash_can.addEventListener('dragover', allowDropEvent); + trash_can.addEventListener('dragenter', function() { + this.parentElement.setAttribute('drag-state', 'enter'); + }); + trash_can.addEventListener('dragleave', function(e) { + this.parentElement.setAttribute('drag-state', 'none'); + }); + trash_can.addEventListener('drop', deleteSample); + + UIColorPicker.subscribe('picker', function(color) { + if (active) + active.updateColor(color); + }); + + }; + + return { + init : init, + getSampleColor : getSampleColor, + unsetActiveSample : unsetActiveSample + }; + + })(); + + /** + * Canvas Samples + */ + var CanvasSamples = (function CanvasSamples() { + + var active = null; + var canvas = null; + var samples = []; + var zindex = null; + var tutorial = true; + + var CanvasSample = function CanvasSample(color, posX, posY) { + + var node = document.createElement('div'); + var pick = document.createElement('div'); + var delete_btn = document.createElement('div'); + node.className = 'sample'; + pick.className = 'pick'; + delete_btn.className = 'delete'; + + this.uid = samples.length; + this.node = node; + this.color = color; + this.updateBgColor(); + this.zIndex = 1; + + node.style.top = posY - 50 + 'px'; + node.style.left = posX - 50 + 'px'; + node.setAttribute('sample-id', this.uid); + + node.appendChild(pick); + node.appendChild(delete_btn); + + var activate = function activate() { + setActiveSample(this); + }.bind(this); + + node.addEventListener('dblclick', activate); + pick.addEventListener('click', activate); + delete_btn.addEventListener('click', this.deleteSample.bind(this)); + + UIComponent.makeDraggable(node); + UIComponent.makeResizable(node); + + samples.push(this); + canvas.appendChild(node); + return this; + }; + + CanvasSample.prototype.updateBgColor = function updateBgColor() { + this.node.style.backgroundColor = this.color.getColor(); + }; + + CanvasSample.prototype.updateColor = function updateColor(color) { + this.color.copy(color); + this.updateBgColor(); + }; + + CanvasSample.prototype.updateZIndex = function updateZIndex(value) { + this.zIndex = value; + this.node.style.zIndex = value; + }; + + CanvasSample.prototype.activate = function activate() { + this.node.setAttribute('data-active', 'true'); + zindex.setAttribute('data-active', 'true'); + + UIColorPicker.setColor('picker', this.color); + InputSliderManager.setValue('z-index', this.zIndex); + }; + + CanvasSample.prototype.deactivate = function deactivate() { + this.node.removeAttribute('data-active'); + zindex.removeAttribute('data-active'); + }; + + CanvasSample.prototype.deleteSample = function deleteSample() { + if (active === this) + unsetActiveSample(); + canvas.removeChild(this.node); + samples[this.uid] = null; + }; + + CanvasSample.prototype.updatePosition = function updatePosition(posX, posY) { + this.node.style.top = posY - this.startY + 'px'; + this.node.style.left = posX - this.startX + 'px'; + }; + + var canvasDropEvent = function canvasDropEvent(e) { + var color = Tool.getSampleColorFrom(e); + + if (color) { + var offsetX = e.pageX - canvas.offsetLeft; + var offsetY = e.pageY - canvas.offsetTop; + var sample = new CanvasSample(color, offsetX, offsetY); + if (tutorial) { + tutorial = false; + canvas.removeAttribute('data-tutorial'); + var info = new CanvasSample(new Color(), 100, 100); + info.node.setAttribute('data-tutorial', 'dblclick'); + } + } + + }; + + var setActiveSample = function setActiveSample(sample) { + ColorPickerSamples.unsetActiveSample(); + Tool.unsetVoidSample(); + unsetActiveSample(); + active = sample; + active.activate(); + }; + + var unsetActiveSample = function unsetActiveSample() { + if (active) + active.deactivate(); + active = null; + }; + + var createToggleBgButton = function createToggleBgButton() { + var button = document.createElement('div'); + var state = false; + button.className = 'toggle-bg'; + canvas.appendChild(button); + + button.addEventListener('click', function() { + console.log(state); + state = !state; + canvas.setAttribute('data-bg', state); + }); + }; + + var init = function init() { + canvas = getElemById('canvas'); + zindex = getElemById('zindex'); + + canvas.addEventListener('dragover', allowDropEvent); + canvas.addEventListener('drop', canvasDropEvent); + + createToggleBgButton(); + + UIColorPicker.subscribe('picker', function(color) { + if (active) active.updateColor(color); + }); + + InputSliderManager.subscribe('z-index', function (value) { + if (active) active.updateZIndex(value); + }); + + UIComponent.makeResizable(canvas, 'height'); + }; + + return { + init : init, + unsetActiveSample : unsetActiveSample + }; + + })(); + + var StateButton = function StateButton(node, state) { + this.state = false; + this.callback = null; + + node.addEventListener('click', function() { + this.state = !this.state; + if (typeof this.callback === "function") + this.callback(this.state); + }.bind(this)); + }; + + StateButton.prototype.set = function set() { + this.state = true; + if (typeof this.callback === "function") + this.callback(this.state); + }; + + StateButton.prototype.unset = function unset() { + this.state = false; + if (typeof this.callback === "function") + this.callback(this.state); + }; + + StateButton.prototype.subscribe = function subscribe(func) { + this.callback = func; + }; + + + /** + * Tool + */ + var Tool = (function Tool() { + + var samples = []; + var controls = null; + var void_sw; + + var createPickerModeSwitch = function createPickerModeSwitch() { + var parent = getElemById('controls'); + var icon = document.createElement('div'); + var button = document.createElement('div'); + var hsv = document.createElement('div'); + var hsl = document.createElement('div'); + var active = null; + + icon.className = 'icon picker-icon'; + button.className = 'switch'; + button.appendChild(hsv); + button.appendChild(hsl); + + hsv.textContent = 'HSV'; + hsl.textContent = 'HSL'; + + active = hsl; + active.setAttribute('data-active', 'true'); + + function switchPickingModeTo(elem) { + active.removeAttribute('data-active'); + active = elem; + active.setAttribute('data-active', 'true'); + UIColorPicker.setPickerMode('picker', active.textContent); + }; + + var picker_sw = new StateButton(icon); + picker_sw.subscribe(function() { + if (active === hsv) + switchPickingModeTo(hsl); + else + switchPickingModeTo(hsv); + }); + + hsv.addEventListener('click', function() { + switchPickingModeTo(hsv); + }); + hsl.addEventListener('click', function() { + switchPickingModeTo(hsl); + }); + + parent.appendChild(icon); + parent.appendChild(button); + }; + + var setPickerDragAndDrop = function setPickerDragAndDrop() { + var preview = document.querySelector('#picker .preview-color'); + var picking_area = document.querySelector('#picker .picking-area'); + + preview.setAttribute('draggable', 'true'); + preview.addEventListener('drop', drop); + preview.addEventListener('dragstart', dragStart); + preview.addEventListener('dragover', allowDropEvent); + + picking_area.addEventListener('drop', drop); + picking_area.addEventListener('dragover', allowDropEvent); + + function drop(e) { + var color = getSampleColorFrom(e); + UIColorPicker.setColor('picker', color); + }; + + function dragStart(e) { + e.dataTransfer.setData('sampleID', 'picker'); + e.dataTransfer.setData('location', 'picker'); + }; + }; + + var getSampleColorFrom = function getSampleColorFrom(e) { + var sampleID = e.dataTransfer.getData('sampleID'); + var location = e.dataTransfer.getData('location'); + + if (location === 'picker') + return UIColorPicker.getColor(sampleID); + if (location === 'picker-samples') + return ColorPickerSamples.getSampleColor(sampleID); + if (location === 'palette-samples') + return ColorPalette.getSampleColor(sampleID); + }; + + var setVoidSwitch = function setVoidSwitch() { + var void_sample = getElemById('void-sample'); + void_sw = new StateButton(void_sample); + void_sw.subscribe( function (state) { + void_sample.setAttribute('data-active', state); + if (state === true) { + ColorPickerSamples.unsetActiveSample(); + CanvasSamples.unsetActiveSample(); + } + }); + }; + + var unsetVoidSample = function unsetVoidSample() { + void_sw.unset(); + }; + + var init = function init() { + controls = getElemById('controls'); + + var color = new Color(); + color.setHSL(0, 51, 51); + UIColorPicker.setColor('picker', color); + + setPickerDragAndDrop(); + createPickerModeSwitch(); + setVoidSwitch(); + }; + + return { + init : init, + unsetVoidSample : unsetVoidSample, + getSampleColorFrom : getSampleColorFrom + }; + + })(); + + var init = function init() { + UIColorPicker.init(); + InputSliderManager.init(); + ColorInfo.init(); + ColorPalette.init(); + ColorPickerSamples.init(); + CanvasSamples.init(); + Tool.init(); + }; + + return { + init : init + }; + +})(); + +</pre> +</div> + + +<p>{{CSSRef}}</p> + +<p><span style="line-height: 1.5;">Dieses Werkzeug vereinfacht es, beliebige Farben zu kreieren, um sie dann für das Internet zu verwenden. Außerdem erlaubt es, Farben in verschiedene von CSS unterstützte Formate zu konvertieren. Dazu zählen: HEXA-Farben, RGB (Rot/Grün/Blau) und HSL (Farbton/Sättigung/relative Helligkeit). Bei Verwendung der Farbformate RGB (rgba) und HSL (hsla) wird es auch unterstützt, den Alphakanal einzustellen.</span></p> + +<p><span style="line-height: 1.5;">Jede Farbe wird in allen drei im Internet üblichen CSS-Formaten ausgedrückt. Weiters wird für die ausgewählte Farbe jeweils eine Palette für HSL (Farbton/Sättigung/relative Helligkeit), HSV (Farbton/Sättigung/Hellwert) und den Alphakanal angezeigt. Das Spektrum des Farbauswahl-Werkzeuges kann man zwischen dem HSL- und HSV-Farbraum umschalten.</span></p> + +<p><span style="line-height: 1.5;">{{ EmbedLiveSample('ColorPicker_Tool', '100%', '900') }}</span></p> + +<p> </p> diff --git a/files/de/web/css/css_colors/index.html b/files/de/web/css/css_colors/index.html new file mode 100644 index 0000000000..b9ef3a636f --- /dev/null +++ b/files/de/web/css/css_colors/index.html @@ -0,0 +1,117 @@ +--- +title: CSS Farben +slug: Web/CSS/CSS_Colors +tags: + - CSS + - CSS Farben + - Referenz + - Übersicht +translation_of: Web/CSS/CSS_Color +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS Colors</strong> ist ein CSS Modul, das um Farben, Farbtypen und Transparenz geht.</p> + +<h2 id="Referenz">Referenz</h2> + +<h3 id="Eigenschaften">Eigenschaften</h3> + +<div class="index"> +<ul> + <li>{{cssxref("color")}}</li> + <li>{{cssxref("opacity")}}</li> +</ul> +</div> + +<h3 id="CSS_Datentypen">CSS Datentypen</h3> + +<p>{{cssxref("<color>")}}</p> + +<h2 id="Anleitungen">Anleitungen</h2> + +<p><em>Keine.</em></p> + +<h2 id="Spezifikationen">Spezifikationen</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 Colors')}}</td> + <td>{{Spec2('CSS3 Colors')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'colors.html')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS1')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>3.0</td> + <td>3.5</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>1.0</td> + <td>{{CompatGeckoMobile("1")}}</td> + <td>6.0</td> + <td>6.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>In CSS sind Farbverläufe keine Farben, sondern <a href="/de/docs/Web/CSS/CSS_Images">Bilder</a>.</li> +</ul> diff --git a/files/de/web/css/css_columns/index.html b/files/de/web/css/css_columns/index.html new file mode 100644 index 0000000000..f637773da4 --- /dev/null +++ b/files/de/web/css/css_columns/index.html @@ -0,0 +1,60 @@ +--- +title: CSS Columns +slug: Web/CSS/CSS_Columns +tags: + - CSS + - CSS Referenz + - Übersicht +translation_of: Web/CSS/CSS_Columns +--- +<div>{{CSSRef("CSS3 Multicol")}}</div> + +<p><strong>CSS Spalten</strong> ist ein CSS Modul, das ein Mehrspaltenlayout definiert, das es erlaubt, auszudrücken, wie Inhalte zwischen Spalten aufgeteilt werden und wie Lücken und Linien dazwischen gehandhabt werden.</p> + +<h2 id="Referenz">Referenz</h2> + +<h3 id="CSS_Eigenschaften">CSS Eigenschaften</h3> + +<div class="index"> +<ul> + <li>{{cssxref("break-after")}}</li> + <li>{{cssxref("break-before")}}</li> + <li>{{cssxref("break-inside")}}</li> + <li>{{cssxref("column-count")}}</li> + <li>{{cssxref("column-fill")}}</li> + <li>{{cssxref("column-gap")}}</li> + <li>{{cssxref("column-rule")}}</li> + <li>{{cssxref("column-rule-color")}}</li> + <li>{{cssxref("column-rule-style")}}</li> + <li>{{cssxref("column-rule-width")}}</li> + <li>{{cssxref("column-span")}}</li> + <li>{{cssxref("column-width")}}</li> + <li>{{cssxref("columns")}}</li> +</ul> +</div> + +<h2 id="Guides">Guides</h2> + +<dl> + <dt><a href="/de/docs/CSS3_Columns">Verwendung von mehrspaltigen Layouts</a></dt> + <dd>Schritt für Schritt Tutorial darüber, wie Layouts mit mehreren Spalten erstellt werden.</dd> +</dl> + +<h2 id="Spezifikationen">Spezifikationen</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 Multicol')}}</td> + <td>{{Spec2('CSS3 Multicol')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> diff --git a/files/de/web/css/css_compositing_and_blending/index.html b/files/de/web/css/css_compositing_and_blending/index.html new file mode 100644 index 0000000000..61e43b48e5 --- /dev/null +++ b/files/de/web/css/css_compositing_and_blending/index.html @@ -0,0 +1,98 @@ +--- +title: CSS Compositing and Blending +slug: Web/CSS/CSS_Compositing_and_Blending +tags: + - CSS + - CSS Compositing and Blending + - CSS Referenz + - Übersicht +translation_of: Web/CSS/Compositing_and_Blending +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS Compositing and Blending</strong> ist ein CSS Modul, das definiert, wie Formen verschiedener Elemente zu einem einzelnen Bild kombiniert werden.</p> + +<h2 id="Referenz">Referenz</h2> + +<h3 id="Eigenschaften">Eigenschaften</h3> + +<div class="index"> +<ul> + <li>{{cssxref("background-blend-mode")}}</li> + <li>{{cssxref("mix-blend-mode")}}</li> + <li>{{cssxref("isolation")}}</li> +</ul> +</div> + +<h2 id="Anleitungen">Anleitungen</h2> + +<p><em>Keine.</em></p> + +<h2 id="Spezifikationen">Spezifikationen</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("Compositing")}}</td> + <td>{{Spec2("Compositing")}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatChrome("41.0")}}</td> + <td>{{CompatGeckoDesktop("36.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatChrome("41.0")}}</td> + <td>{{CompatGeckoMobile("36.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/de/web/css/css_conditional_rules/index.html b/files/de/web/css/css_conditional_rules/index.html new file mode 100644 index 0000000000..a0c6192fc1 --- /dev/null +++ b/files/de/web/css/css_conditional_rules/index.html @@ -0,0 +1,100 @@ +--- +title: CSS Conditional Rules +slug: Web/CSS/CSS_Conditional_Rules +tags: + - CSS + - CSS Conditional Rules + - CSS Referenz + - Übersicht +translation_of: Web/CSS/CSS_Conditional_Rules +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS Conditional Rules</strong> ist ein CSS Modul, das es erlaubt, eine Reihe von Regeln zu definieren, die nur basierend auf den Fähigkeiten des Prozessors oder des Dokuments angewendet werden, auf das das Stylesheet angewendet wird.</p> + +<h2 id="Referenz">Referenz</h2> + +<h3 id="-Regeln">@-Regeln</h3> + +<div class="index"> +<ul> + <li>{{cssxref("@document")}}</li> + <li>{{cssxref("@media")}}</li> + <li>{{cssxref("@supports")}}</li> +</ul> +</div> + +<h2 id="Anleitungen">Anleitungen</h2> + +<p><em>Keine.</em></p> + +<h2 id="Spezifikationen">Spezifikationen</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 Conditional')}}</td> + <td>{{Spec2('CSS3 Conditional')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/de/web/css/css_device_adaptation/index.html b/files/de/web/css/css_device_adaptation/index.html new file mode 100644 index 0000000000..13b3bba03c --- /dev/null +++ b/files/de/web/css/css_device_adaptation/index.html @@ -0,0 +1,104 @@ +--- +title: CSS Device Adaptation +slug: Web/CSS/CSS_Device_Adaptation +tags: + - CSS + - CSS Device Adaption + - Referenz + - Übersicht +translation_of: Web/CSS/CSS_Device_Adaptation +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS Device Adapation</strong> ist ein CSS Modul, das es erlaubt, die Größe, den Zoomfaktor und die Ausrichtung des Viewports zu definieren.</p> + +<h2 id="Referenz">Referenz</h2> + +<h3 id="-Regeln">@-Regeln</h3> + +<div class="index"> +<ul> + <li>{{cssxref("@viewport")}}</li> +</ul> +</div> + +<h2 id="Anleitungen">Anleitungen</h2> + +<p><em>Keine.</em></p> + +<h2 id="Spezifikationen">Spezifikationen</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 Device")}}</td> + <td>{{Spec2("CSS3 Device")}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>29<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>10 {{property_prefix("-ms")}}</td> + <td>11.10<br> + {{CompatNo}}15<br> + 16<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>4.4</td> + <td>29.0</td> + <td>{{CompatNo}}</td> + <td>10{{property_prefix("-ms")}}</td> + <td>11.10<br> + {{CompatNo}}15<br> + 16<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Hinter einem Flag.</p> diff --git a/files/de/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html b/files/de/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html new file mode 100644 index 0000000000..1401a93f7f --- /dev/null +++ b/files/de/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html @@ -0,0 +1,210 @@ +--- +title: Aligning Items in a Flex Container +slug: Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container +tags: + - Flex-Container +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container +--- +<p>{{CSSRef}}</p> + +<p class="summary" style=""><font><font>Einer der Gründe, warum Flexbox das Interesse von Webentwicklern schnell geweckt hat, ist, dass es zum ersten Mal die richtigen Ausrichtungsfunktionen für das Web bereitgestellt hat.<span> </span></font><font>Es ermöglichte die richtige vertikale Ausrichtung, so dass wir endlich eine Box leicht zentrieren können.<span> </span></font><font>In diesem Handbuch werden wir uns eingehend mit der Funktionsweise der Ausrichtungs- und Ausrichtungseigenschaften in Flexbox befassen.</font></font></p> + +<p style=""><font><font>Um unsere Box zu zentrieren, verwenden wir die<span> </span></font></font><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: inherit; font-weight: inherit; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace;'>align-items</code><font><font>Eigenschaft, um unser Element auf der Querachse auszurichten, in diesem Fall der vertikal verlaufenden Blockachse.<span> </span></font><font>Wir verwenden<span> </span></font></font><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: inherit; font-weight: inherit; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace;'>justify-content</code><font><font>, um das Element auf der Hauptachse auszurichten, in diesem Fall der horizontal verlaufenden Inline-Achse.</font></font></p> + +<p><img alt="A containing element with another box centered inside it." src="https://mdn.mozillademos.org/files/15627/align1.png" style="display: block; height: 357px; margin: 0px auto; width: 616px;"></p> + +<p><font>Sie können sich den Code dieses Beispiels unten ansehen.<span> </span></font><font>Ändern Sie die Größe des Containers oder des verschachtelten Elements, und das verschachtelte Element bleibt immer zentriert.</font></p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/intro.html", '100%', 700)}}</p> + +<h2 id="Eigenschaften_die_die_Ausrichtung_steuern" style=""><font><font>Eigenschaften, die die Ausrichtung steuern</font></font></h2> + +<p><span style="">Die Eigenschaften, die wir in diesem Handbuch betrachten werden, sind wie folgt.</span></p> + +<ul> + <li>{{cssxref("justify-content")}} — <span style="">steuert die Ausrichtung aller Elemente auf der Hauptachse.</span></li> + <li>{{cssxref("align-items")}} — <span style="">steuert die Ausrichtung aller Elemente auf der Querachse.</span></li> + <li>{{cssxref("align-self")}} — <span style="">steuert die Ausrichtung eines einzelnen Flex-Elements auf der Querachse.</span></li> + <li>{{cssxref("align-content")}} — <font>in der Spezifikation als „Packing Flex Lines“ beschrieben;<span> </span></font><font>Steuert den Abstand zwischen den Flexlinien auf der Querachse.</font></li> +</ul> + +<p><span style="">Wir werden auch herausfinden, wie automatische Ränder für die Ausrichtung in der Flexbox verwendet werden können.</span></p> + +<div class="note"> +<p><strong style=""><font><font>Hinweis</font></font></strong><font><font><span> </span>: Die Ausrichtungseigenschaften in Flexbox wurden in eine eigene Spezifikation eingefügt -<span> </span></font></font><a class="external" href="https://www.w3.org/TR/css-align-3/" rel="noopener" style=""><font><font>CSS Box Alignment Level 3</font></font></a><font><font><span> </span>.<span> </span></font><font>Es wird erwartet, dass diese Spezifikation letztendlich die in Flexbox Level One definierten Eigenschaften ersetzt.</font></font></p> +</div> + +<h2 id="Die_Querachse" style=""><font><font>Die Querachse</font></font></h2> + +<p style=""><font><font>Die<span> </span></font><font>Eigenschaften<span> </span></font></font><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: inherit; font-weight: inherit; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace;'>align-items</code><font><font>und<span> </span></font></font><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: inherit; font-weight: inherit; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace;'>align-self</code><font><font>steuern die Ausrichtung unserer Flex-Elemente auf der Querachse in den Spalten if<span> </span></font></font><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: inherit; font-weight: inherit; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace;'>flex-direction</code><font><font>is<span> </span></font></font><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: inherit; font-weight: inherit; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace;'>row</code><font><font>und entlang der Zeile if<span> </span></font></font><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: inherit; font-weight: inherit; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace;'>flex-direction</code><font><font>is<span> </span></font></font><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: inherit; font-weight: inherit; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace;'>column</code><font><font>.</font></font></p> + +<p style=""><font><font>Wir verwenden die Achsenausrichtung im einfachsten Flex-Beispiel.<span> </span></font><font>Wenn wir<span> </span></font></font><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: inherit; font-weight: inherit; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace;'>display: flex</code><font><font>einem Container<span> </span></font><font>hinzufügen<span> </span></font><font>, werden alle untergeordneten Elemente zu flexiblen Elementen, die in einer Reihe angeordnet sind.<span> </span></font><font>Sie werden alle so groß wie der höchste Gegenstand, da dieser Gegenstand die Höhe der Gegenstände auf der Querachse definiert.<span> </span></font><font>Wenn für Ihren Flex-Container eine Höhe festgelegt ist, werden die Elemente auf diese Höhe gedehnt, unabhängig davon, wie viel Inhalt sich im Element befindet.</font></font></p> + +<p><img alt="Three items, one with additional text causing it to be taller than the others." src="https://mdn.mozillademos.org/files/15628/align2.png" style="display: block; height: 131px; margin: 0px auto; width: 509px;"></p> + +<p><img alt="Three items stretched to 200 pixels tall" src="https://mdn.mozillademos.org/files/15629/align3.png" style="display: block; height: 207px; margin: 0px auto; width: 637px;"></p> + +<p>The reason the items become the same height is that the initial value of <code>align-items</code>, the property that controls alignment on the cross axis, is set to <code>stretch</code>.</p> + +<p>We can use other values to control how the items align:</p> + +<ul> + <li><code>align-items: flex-start</code></li> + <li><code>align-items: flex-end</code></li> + <li><code>align-items: center</code></li> + <li><code>align-items: stretch</code></li> + <li><code>align-items: baseline</code></li> +</ul> + +<p>In the live example below, the value of <code>align-items</code> is <code>stretch</code>. Try the other values and see how all of the items align against each other in the flex container.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-items.html", '100%', 520)}} </p> + +<h3 id="Aligning_one_item_with_align-self">Aligning one item with <code>align-self</code></h3> + +<p>The <code>align-items</code> property sets the <code>align-self</code> property on all of the flex items as a group. This means you can explicitly declare the <code>align-self</code> property to target a single item. The <code>align-self</code> property accepts all of the same values as <code>align-items</code> plus a value of <code>auto</code>, which will reset the value to that which is defined on the flex container.</p> + +<p>In this next live example, the flex container has <code>align-items: flex-start</code>, which means the items are all aligned to the start of the cross axis. I have targeted the first item using a <code>first-child</code> selector and set that item to <code>align-self: stretch</code>; another item has been selected using its class of <code>selected</code> and given <code>align-self: center</code>. You can change the value of <code>align-items</code> or change the values of <code>align-self</code> on the individual items to see how this works.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self.html", '100%', 650)}}</p> + +<h3 id="Changing_the_main_axis">Changing the main axis</h3> + +<p>So far we have looked at the behaviour when our <code>flex-direction</code> is <code>row</code>, and while working in a language written top to bottom. This means that the main axis runs along the row horizontally, and our cross axis alignment moves the items up and down.</p> + +<p><img alt="Three items, the first aligned to flex-start, second to center, third to flex-end. Aligning on the vertical axis." src="https://mdn.mozillademos.org/files/15630/align4.png" style="display: block; height: 204px; margin: 0px auto; width: 671px;"></p> + +<p>If we change our <code>flex-direction</code> to column, <code>align-items</code> and <code>align-self</code> will align the items to the left and right.</p> + +<p><img alt="Three items, the first aligned to flex-start, second to center, third to flex-end. Aligning on the horizontal axis." src="https://mdn.mozillademos.org/files/15631/align5.png" style="display: block; height: 239px; margin: 0px auto; width: 687px;"></p> + +<p>You can try this out in the example below, which has a flex container with <code>flex-direction: column</code> yet otherwise is exactly the same as the previous example.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self-column.html", '100%', 730)}} </p> + +<h2 id="Aligning_content_on_the_cross_axis_—_the_align-content_property">Aligning content on the cross axis — the align-content property</h2> + +<p>So far we have been aligning the items, or an individual item inside the area defined by the flex-container. If you have a wrapped multiple-line flex container then you might also want to use the <code>align-content</code> property to control the distribution of space between the rows. In the specification this is described as <a href="https://drafts.csswg.org/css-flexbox/#align-content-property">packing flex lines</a>.</p> + +<p>For <code>align-content</code> to work you need more height in your flex container than is required to display the items. It then works on all the items as a set, and dictates what happens with that free space, and the alignment of the entire set of items within it.</p> + +<p>The <code>align-content</code> property takes the following values:</p> + +<ul> + <li><code>align-content: flex-start</code></li> + <li><code>align-content: flex-end</code></li> + <li><code>align-content: center</code></li> + <li><code>align-content: space-between</code></li> + <li><code>align-content: space-around</code></li> + <li><code>align-content: stretch</code></li> + <li><code>align-content: space-evenly</code> (not defined in the Flexbox specification)</li> +</ul> + +<p>In the live example below, the flex container has a height of 400 pixels, which is more than needed to display our items. The value of <code>align-content</code> is <code>space-between</code>, which means that the available space is shared out <em>between</em> the flex lines, which are placed flush with the start and end of the container on the cross axis.</p> + +<p>Try out the other values to see how the <code>align-content</code> property works.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content.html", '100%', 850)}} </p> + +<p>Once again we can switch our <code>flex-direction</code> to <code>column</code> in order to see how this property behaves when we are working by column. As before, we need enough space in the cross axis to have some free space after displaying all of the items.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content-column.html", '100%', 860)}} </p> + +<div class="note"> +<p><strong>Note</strong>: the value <code>space-evenly</code> is not defined in the flexbox specification and is a later addition to the Box Alignment specification. Browser support for this value is not as good as that of the values defined in the flexbox spec.</p> +</div> + +<p>See the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content">documentation for <code>justify-content</code> on MDN</a> for more details on all of these values and browser support.</p> + +<h2 id="Aligning_content_on_the_main_axis">Aligning content on the main axis</h2> + +<p>Now that we have seen how alignment works on the cross axis, we can take a look at the main axis. Here we only have one property available to us — <code>justify-content</code>. This is because we are only dealing with items as a group on the main axis. With <code>justify-content</code> we control what happens with available space, should there be more space than is needed to display the items.</p> + +<p>In our initial example with <code>display: flex</code> on the container, the items display as a row and all line up at the start of the container. This is due to the initial value of <code>justify-content</code> being <code>flex-start</code>. Any available space is placed at the end of the items.</p> + +<p><img alt="Three items, each 100 pixels wide in a 500 pixel container. The available space is at the end of the items." src="https://mdn.mozillademos.org/files/15632/align6.png" style="display: block; height: 198px; margin: 0px auto; width: 528px;"></p> + +<p>The <code>justify-content</code> property accepts the same values as <code>align-content</code>.</p> + +<ul> + <li><code>justify-content: flex-start</code></li> + <li><code>justify-content: flex-end</code></li> + <li><code>justify-content: center</code></li> + <li><code>justify-content: space-between</code></li> + <li><code>justify-content: space-around</code></li> + <li><code>justify-content: space-evenly</code> (not defined in the Flexbox specification)</li> +</ul> + +<p>In the example below, the value of <code>justify-content</code> is <code>space-between</code>. The available space after displaying the items is distributed between the items. The left and right item line up flush with the start and end.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content.html", '100%', 480)}} </p> + +<p>If the main axis is in the block direction because <code>flex-direction</code> is set to <code>column</code>, then <code>justify-content</code> will distribute space between items in that dimension as long as there is space in the flex container to distribute.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-column.html", '100%', 880)}} </p> + +<h3 id="Alignment_and_Writing_Modes">Alignment and Writing Modes</h3> + +<p>Remember that with all of these alignment methods, the values of <code>flex-start</code> and <code>flex-end</code> are writing mode-aware. If the value of <code>justify-content</code> is <code>start</code> and the writing mode is left-to-right as in English, the items will line up starting at the left side of the container.</p> + +<p><img alt="Three items lined up on the left" src="https://mdn.mozillademos.org/files/15638/Basics5.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p> + +<p>However if the writing mode is right-to-left as in Arabic, the items will line up starting at the right side of the container.</p> + +<p><img alt="Three items lined up from the right" src="https://mdn.mozillademos.org/files/15639/Basics6.png" style="display: block; height: 152px; margin: 0px auto; width: 634px;"></p> + +<p>The live example below has the <code>direction</code> property set to <code>rtl</code> to force a right-to-left flow for our items. You can remove this, or change the values of <code>justify-content</code> to see how flexbox behaves when the start of the inline direction is on the right.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-writing-mode.html", '100%', 440)}} </p> + +<h2 id="Alignment_and_flex-direction">Alignment and flex-direction</h2> + +<p>The start line will also change if you change the <code>flex-direction</code> property — for example using <code>row-reverse</code> instead of <code>row</code>.</p> + +<p>In this next example I have items laid out with <code>flex-direction: row-reverse</code> and <code>justify-content: flex-end</code>. In a left to right language the items all line up on the left. Try changing <code>flex-direction: row-reverse</code> to <code>flex-direction: row</code>. You will see that the items now move to the right hand side.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-reverse.html", '100%', 440)}} </p> + +<p>While this may all seem a little confusing, the rule to remember is that unless you do something to change it, flex items lay themselves out in the direction that words are laid out in the language of your document along the inline, row axis. <code>flex-start</code> will be where the start of a sentence of text would begin.</p> + +<p><img alt="Diagram showing start on the left and end on the right." src="https://mdn.mozillademos.org/files/15634/align8.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p> + +<p>You can switch them to display in the block direction for the language of your document by selecting <code>flex-direction: column</code>. Then <code>flex-start</code> will then be where the top of your first paragraph of text would start.</p> + +<p><img alt="Diagram showing start at the top and end at the bottom." src="https://mdn.mozillademos.org/files/15636/align10.png" style="display: block; height: 273px; margin: 0px auto; width: 709px;"></p> + +<p>If you change flex-direction to one of the reverse values, then they will lay themselves out from the end axis and in the reverse order to the way words are written in the language of your document. <code>flex-start</code> will then change to the end of that axis — so to the location where your lines would wrap if working in rows, or at the end of your last paragraph of text in the block direction.</p> + +<p><img alt="Diagram showing start on the right and end on the left." src="https://mdn.mozillademos.org/files/15635/align9.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p> + +<p><img alt="Diagram showing end at the top and start at the bottom" src="https://mdn.mozillademos.org/files/15637/align11.png" style="display: block; height: 273px; margin: 0px auto; width: 709px;"></p> + +<h2 id="Using_auto_margins_for_main_axis_alignment">Using auto margins for main axis alignment</h2> + +<p>We don’t have a <code>justify-items</code> or <code>justify-self</code> property available to us on the main axis as our items are treated as a group on that axis. However it is possible to do some individual alignment in order to separate an item or a group of items from others by using auto margins along with flexbox.</p> + +<p>A common pattern is a navigation bar where some key items are aligned to the right, with the main group on the left. You might think that this should be a use case for a <code>justify-self</code> property, however consider the image below. I have three items on one side and two on the other. If I were able to use <code>justify-self</code> on item <em>d</em>, it would also change the alignment of item <em>e</em> that follows, which may or may not be my intention.</p> + +<p><img alt="Five items, in two groups. Three on the left and two on the right." src="https://mdn.mozillademos.org/files/15633/align7.png" style="display: block; height: 84px; margin: 0px auto; width: 645px;"></p> + +<p>Instead we can target item 4 and separate it from the first three items by giving it a <code>margin-left</code> value of <code>auto</code>. Auto margins will take up all of the space that they can in their axis — it is how centering a block with margin auto left and right works. Each side tries to take as much space as it can, and so the block is pushed into the middle.</p> + +<p>In this live example, I have flex items arranged simply into a row with the basic flex values, and the class <code>push</code> has <code>margin-left: auto</code>. You can try removing this, or adding the class to another item to see how it works.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/auto-margins.html", '100%', 470)}} </p> + +<h2 id="Future_alignment_features_for_Flexbox">Future alignment features for Flexbox</h2> + +<p>At the beginning of this article I explained that the alignment properties currently contained in the Level 1 flexbox specification are also included in Box Alignment Level 3, which may well extend these properties and values in the future. We have already seen one place where this has happened, with the introduction of the <code>space-evenly</code> value for <code>align-content</code> and <code>justify-content</code> properties.</p> + +<p>The Box Alignment module also includes other methods of creating space between items, such as the <code>column-gap</code> and <code>row-gap</code> feature as seen in <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a>. The inclusion of these properties in Box Alignment means that in future we should be able to use <code>column-gap</code> and <code>row-gap</code> in flex layouts too, and in Firefox 63 you will find the first browser implementation of the gap properties in flex layout.</p> + +<p>My suggestion when exploring flexbox alignment in depth is to do so alongside looking at alignment in Grid Layout. Both specifications use the alignment properties as detailed in the Box Alignment specification. You can see how these properties behave when working with a grid in the MDN article <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box Alignment in Grid Layout</a>, and I have also compared how alignment works in these specifications in my <a href="https://rachelandrew.co.uk/css/cheatsheets/box-alignment">Box Alignment Cheatsheet</a>.</p> + +<h2 id="See_Also">See Also</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox">Box Alignment in Flexbox</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Grid_Layout">Box Alignment in Grid Layout</a></li> +</ul> diff --git a/files/de/web/css/css_flexible_box_layout/flex_elemente_sortieren/index.html b/files/de/web/css/css_flexible_box_layout/flex_elemente_sortieren/index.html new file mode 100644 index 0000000000..86354499d2 --- /dev/null +++ b/files/de/web/css/css_flexible_box_layout/flex_elemente_sortieren/index.html @@ -0,0 +1,138 @@ +--- +title: Flex Elemente Sortieren +slug: Web/CSS/CSS_Flexible_Box_Layout/Flex_Elemente_Sortieren +tags: + - Barrierefreiheit + - CSS + - Flex + - Reihenfolge + - Richtung + - flexbox + - umgekehrt +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items +--- +<p>{{CSSRef}}</p> + +<p>Neue Layout-Methoden wie z.B Flexbox und Grid geben die Möglichkeit, die Reihenfolge dessen Inhaltes zu verändern. Dieser Artikel handelt von den verschiedenen Möglichkeiten wie man die visuelle Reihenfolge des Inhalts, mithilfe von Flexbox, ändern kann. Dazu werden wir uns das Thema aus der perspektive der Barrierefreiheit betrachten.</p> + +<h2 id="Die_Anzeige_der_Elemente_umkehren">Die Anzeige der Elemente umkehren</h2> + +<p>Die {{cssxref("flex-direction")}} Eigenschaft kann einer der 4 folgenden Werte bekommen:</p> + +<ul> + <li><code>row // Reihe</code></li> + <li><code>column // Spalte</code></li> + <li><code>row-reverse // Reihe-umgekehrt</code></li> + <li><code>column-reverse // Spalte-umgekehrt</code></li> +</ul> + +<p>Bei den ersten 2 Werten, bleibt die Reihenfolge wie sie auch im Quelltext angegeben ist und zeigt diese nacheinander von der Startlinie an an. Die Elemente werden dabei entweder in einer Reihe (<code>row</code>), oder in einer Spalte (<code>column</code>) angezeigt.<br> + <img alt="The items are displayed in a row starting on the left." src="https://mdn.mozillademos.org/files/15649/Basics1.png" style="display: flex; height: 152px; margin: 0px auto; width: 522px;"></p> + +<p><img alt="The items are displayed as a column starting from the top " src="https://mdn.mozillademos.org/files/15650/align10.png" style="display: flex; height: 273px; margin: 0px auto; width: 709px;"></p> + +<p>Die letzten beiden Werte, kehren die Reihenfolge der Elemente um, indem Sie die Start und End-Linien wechseln</p> + +<p><img alt="The items are displayed in reverse order starting on the right-hand line." src="https://mdn.mozillademos.org/files/15651/align9.png" style="display: flex; height: 152px; margin: 0px auto; width: 631px;"></p> + +<p><img alt="The items are displayed in a column in reverse order starting at the bottom line." src="https://mdn.mozillademos.org/files/15652/align11.png" style="display: flex; height: 273px; margin: 0px auto; width: 709px;"></p> + +<p>Denk dran das der Start der Linie mit den Schreibmodis verbunden ist. Das Reihenbeispiel oben demonstriert wie <code>row</code> und <code>row-reverse</code> in einer links-zu-rechts Sprache wie z.B. Deutsch funktioniert. Wenn du aber in einer rechts-zu-links Sprache wie z.B. Arabisch arbeitest dann würde <code>row</code> rechts starten und <code>row-reverse</code> links.</p> + +<p><img alt="Flex containers with Arabic letters showing how row starts from the right hand side and row-reverse from the left." src="https://mdn.mozillademos.org/files/15647/order-rtl.png" style="display: flex; height: 302px; margin: 0px auto; width: 528px;"></p> + +<p>Das kann zwar nach einer schönen Möglichkeit aussehen, Elemente in einer umgekehrten Reihenfolge anzuzeigen, es sollte einem jedoch bewusst sein, das elemente nur <em>visuell</em> in einer umgekehrten Reihenfolge angezeigt werden. Die Spezifikation sagt diesbezüglich folgendes:</p> + +<blockquote> +<p>“Hinweis: Die Umsortierungs-möglichkeiten betreffen absichtlich nur die visuelle Ansicht und lassen dabei Sprech- und Navigationsbasierte Reihenfolgen außen vor. Das ermöglicht Autoren die Möglichkeit die visuelle Ansicht zu ändern, während sie die Quellen-Reihenfolge in intakt hält für nicht-CSS UAs und für lineare Modelle, wie z.B. Sprachmodelle und Sequentielle Navigationen” - <a href="https://www.w3.org/TR/css-flexbox-1/#flow-order">Reigenfolge und Orientation</a></p> +</blockquote> + +<p>Wenn die Elemente Hyperlinks sind, oder irgendwelche anderen Elemente zu denen der User hintabben kann, dann wäre die tab-reihenfolge die selbe, wie sie im Dokumenten-Quellcode vorkommt und nicht wie sie visuell angezeigt wird.</p> + +<p>Wenn man einen <code>reverse</code> Wert benuzt, oder in irgendeiner Weise die Reihenfolge der Elemente beeinflusst, dann musst du schauen, ob man nicht doch die logische Reihenfolge im Quelltext ändert. Die Spezifikitation fährt fort mit einer Warnung, das man umsortierung nicht nutzen soll um Probleme im Quellcode zu fixen.</p> + +<blockquote> +<p>“Autoren sollten die Reihenfolgen- oder Umgekehrtwerte der flex-flow/flex-direction Eigenschaften nicht als Ersatz für die tatsächliche Änderung des Dokumentes nutzen, da das die Barrierefreiheit des Dokumentes einschränkt.”</p> +</blockquote> + +<div class="note"> +<p><strong>Hinweis</strong>: Firefox hatte ein paar Jahre lang einen Bug, bei dem es versucht hatte der visuellen Reihenfolge und nicht der Quelltext-Reihenfolge zu folgen, daruch verhielt es sich anders als andere Browser. Dieser Bug ist mittlerweile gefixt. Man sollte immer Quelltext-Reihenfolge als die logische Reihenfolge für das Dokument benutzen, da alle aktuellen User Agents diesem Schema folgen.</p> +</div> + +<p>In dem Live-Beispiel unten habe ich einen focus-style hinzugefügt, damit man, wenn man mit tab von link zu link wechselt, sieht welcher link markiert wird. Wenn man die Reihenfolge mit <code>flex-direction</code> wechselst, dann sieht man wie die tab Reihenfolge immernoch der Reihenfolge der Elemente im Quelltext folgen.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/order/order.html", '100%', 500)}}</p> + +<p>Auf die gleiche Weise, wie das ändern des Wertes <code>flex-direction</code> nicht die Reihenfolge ändert, in denen zu Elementen navigiert werden, ändert es auch nicht die Reihenfolge in denen die Elemente gemalt werden. Es ist nur eine visuelle umkehrung der Elemente.</p> + +<h2 id="Die_order_Eigenschaft">Die order Eigenschaft</h2> + +<p>Zusätzlich zum umkehren der Reihenfolge, in welcher flex-elemente visuell dargestellt werden, kann man die Elemente individuell ansprechen und die visuelle Reihenfolge mit der {{cssxref("order")}} Eigenschaft.</p> + +<p>Die <code>order</code> Eigenschaft legt die Elemente in Ordnungsgruppen. Das heißt, das den Elementen eine Zahl zugewiesen werden, welche die dazugehörige Gruppe repräsentieren. Danach werden die Elemente, in die Reihenfolge gebracht, wie die Zahlen es vorgeben, der kleinste Wert zuerst. Wenn mehr als ein Element, den selben Wert besitzen, dann werden die Elemente innerhalb ihrer Gruppe so ausgelegt, wie sie im Quelltext vorkommen.</p> + +<p>Beispiel: Ich habe 5 flex-items und weise <code>order</code> Eigenschaften folgendermaßen zu:</p> + +<ul> + <li>Quellelement 1: <code>order: 2</code></li> + <li>Quellelement 2: <code>order: 3</code></li> + <li>Quellelement 3: <code>order: 1</code></li> + <li>Quellelement 4: <code>order: 3</code></li> + <li>Quellelement 5: <code>order: 1</code></li> +</ul> + +<p>Diese Elemente werden dann wie folgt dargestellt:</p> + +<ul> + <li>Quellelement 3: <code>order: 1</code></li> + <li>Quellelement 5: <code>order: 1</code></li> + <li>Quellelement 1: <code>order: 2</code></li> + <li>Quellelement 2: <code>order: 3</code></li> + <li>Quellelement 4: <code>order: 3</code></li> +</ul> + +<p><img alt="Items have a number showing their source order which has been rearranged." src="https://mdn.mozillademos.org/files/15653/order-property.png" style="display: flex; height: 100px; margin: 0px auto; width: 634px;"></p> + +<p>Um zu sehen, wie das die Reihenfolge beeinflusst, kann man im Live-Beispiel unten die Werte für <code>order</code> ändern. Man kann auch <code>flex-direction</code> zu <code>row-reverse</code> wechseln und sehen was passiert — die Start Linie ist getauscht, damit startet das sortieren von der anderen Seite.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/order/flex-direction.html", '100%', 440)}}</p> + +<p>Flex-items haben einen natürlichen <code>order</code> Wert von <code>0</code>, deshalb werden alle Elemente mit einem Zahlen-Wert größer als 0 nach Elementen angezeigt, welche noch keinen Expliziten <code>order</code> Wert erhalten haben.</p> + +<p>Man kann auch negative Zahlenwerte verwenden, das ist ziemlich hilfreich. Wenn man ein Element als erstes anzeigen lassen will, aber die Reihenfolge aller anderen Elemente so lassen will wie sie sind, dann kann man diesem Element eine Reihenfolge von <code>-1</code> geben. Da das kleiner als 0 ist, wird dieses Element als erstes angezeigt.</p> + +<p>Im Live-Code Beispiel unten habe Ich Elemente mithilfe einer Flexbox ausgelegt. Wenn man ändert welches Element die Klasse <code>active</code> besitzt, dann kann man ändern, welches Element als erstes angezeigt werden soll, mit allen anderen Elementen darunter.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/order/negative-order.html", '100%', 520)}}</p> + +<p>Die Elemente werden anhand der, wie es in der Spezifikation beschrieben ist, <em>order-modified- document order</em> angezeigt. Der Wert der order-Eigenschaft wird berücksichtigt, bevor die Elemente angezeigt werden</p> + +<p>Order ändert auch die Malreihenfolge der Elemente; Elemente mit einem geringerem <code>order</code> Wert, werden vor den Elementen mit einem höherem <code>order</code> Wert gemalt.</p> + +<h2 id="Die_order_Eigenschaft_und_Barrierefreiheit">Die order Eigenschaft und Barrierefreiheit</h2> + +<p>Wenn man die <code>order</code> Eigenschaft nutzt, dann hat man exakt die gleichen Implikationen, wenn es ums Thema Barrierefreiheit geht, wie beim ändern der <code>flex-direction</code>. Die Eigenschaft <code>order</code> ändert die Reihenfolge, in der Elemente gemalt werden und die Reihenfolge in der diese Elemente visuell auftauchen. Es ändert nichts an der sequentiellen Navigationsreihenfolge der Elemente. Deshalb könnte es passieren, dass wenn ein Benutzer auf einer Website durch die Zeilen tabbt, das dieser in einem ziemlich verwirrendem Weg durch das Layout springt.</p> + +<p>Wenn man in irgendeinem Live-Beispiel auf dieser Seite hin und her tabbt, dann kann man sehen, wie <code>order</code> das potential hat, eine seltsame Erfahrung für alle Benutzer zu schaffen, die nicht ein Zeiger-Gerät verwenden. Um mehr über dieses Thema zu erfahren, empfehle Ich folgende Ressourcen:</p> + +<ul> + <li><a href="https://tink.uk/flexbox-the-keyboard-navigation-disconnect/">Flexbox and the keyboard navigation disconnect</a></li> + <li><a href="http://adrianroselli.com/2015/10/html-source-order-vs-css-display-order.html">HTML Source Order vs CSS Display Order</a></li> + <li><a href="https://alastairc.uk/2017/06/the-responsive-order-conflict/">The Responsive Order Conflict for Keyboard Focus</a></li> +</ul> + +<h2 id="Anwendungsbeispiele_für_order">Anwendungsbeispiele für order</h2> + +<p>Manchmal gibt es Anwendungsorte, an denen es hilfreich ist, das die logische und visuelle Reihenfolge der Elemente voneinander getrennt sind. Vorsichtig eingesetzt ermöglicht die <code>order</code> Eigenschaft hilfreiche Lösungen für verbreitete Problemmuster.</p> + +<p>Man hat z.B. ein Design einer Karte, welche Neuigkeiten anzeigt. Die Überschrift der Neuigkeiten ist das Schlüsselelement und wäre das Element, zu dem der Benutzer springen würde wenn er durch die verschiedenen Überschriften tabben würde. Die Karte hat dazu auch noch ein Datum; das fertige Design sieht dann ungefähr so aus:</p> + +<p><img alt="A design component with a date, then heading and then content." src="https://mdn.mozillademos.org/files/15648/order-card.png" style="height: 400px; width: 618px;"></p> + +<p>Visually the date appears above the heading, im Quelltext. Jedoch, wenn die Karte von einem Programm vorgelesen wird, wäre es mir lieber, wenn der Titel als erstes vorgelesen wird und danach das Veröffentlichungsdatum. Das geht ganz einfach wenn man die <code>order</code> Eigenschaft nutzt.</p> + +<p>Die Karte wird unser flex-container sein, mit <code>flex-direction</code> auf column. Dann gebe ich dem Datum die <code>order:</code><code>-1</code>. Das setzt es über die Überschrift.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/order/usecase-order.html", '100%', 730)}}</p> + +<p><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Diese kleinen Veränderungen sind die Art der Fälle in denen die </span></font>order</code> Eigenschaft Sinn macht. Behalte die logische Abfolge als Lese und Tab Reihenfolge des Dokumentes und pflege das in einer Art und Weise, das es Barrierefrei strukturiert bleibt. Danach nutze <code>order</code> lediglich zur Design-Optimierung. Wenn man das tut, sollte man darauf achten, das man die Reihenfolge von Elementen, durch die der Benutzer durchtabbt, nicht durcheinander bringt. Du wirst schnell bemerken, ob deine Entwicklungs-Entscheidungen es für den Benutzer schwierig machen.</p> diff --git a/files/de/web/css/css_flexible_box_layout/grundlegende_konzepte_der_flexbox/index.html b/files/de/web/css/css_flexible_box_layout/grundlegende_konzepte_der_flexbox/index.html new file mode 100644 index 0000000000..81b1db9c4b --- /dev/null +++ b/files/de/web/css/css_flexible_box_layout/grundlegende_konzepte_der_flexbox/index.html @@ -0,0 +1,230 @@ +--- +title: Grundlegende Konzepte der Flexbox +slug: Web/CSS/CSS_Flexible_Box_Layout/Grundlegende_Konzepte_der_Flexbox +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox +--- +<div> </div> + +<div>{{CSSRef}}</div> + +<p class="summary">Das Flexible Box Modul, üblicherweise als Flexbox bezeichnet, wurde als ein eindimensionales Layoutmodell und als eine Methode entwickelt, die eine Platzverteilung zwischen Elementen in einer Schnittstelle und leistungsstarke Ausrichtungsmöglichkeiten bietet. Dieser Artikel gibt einen Überblick über die Hauptmerkmale von Flexbox, die wir im Folgenden näher erläutern werden.</p> + +<p>Wenn wir Flexbox als eindimensional bezeichnen, beschreiben wir die Tatsache, dass Flexbox sich mit dem Layout in einer Dimension zu einem Zeitpunkt beschäftigt - entweder als eine Zeile oder als eine Spalte. Dies kann mit dem zweidimensionalen Modell von <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a>, das Spalten und Zeilen zusammen steuert, kontrastiert werden.</p> + +<h2 id="Die_zwei_Achsen_der_Flexbox">Die zwei Achsen der Flexbox</h2> + +<p>Bei der Arbeit mit Flexbox muss man in zwei Achsen denken - der Hauptachse und der Querachse. Die Hauptachse wird durch die Eigenschaft {{cssxref("flex-direction")}} definiert, und die Querachse verläuft senkrecht dazu. Alles, was wir mit flexbox machen, bezieht sich auf diese Achsen, so dass es sich lohnt zu verstehen, wie sie von Anfang an funktionieren.</p> + +<h3 id="Die_Hauptachse">Die Hauptachse</h3> + +<p>Die Hauptachse wird durch <code>flex-direction</code> definiert, die vier mögliche Werte hat:</p> + +<ul> + <li><code>row</code></li> + <li><code>row-reverse</code></li> + <li><code>column</code></li> + <li><code>column-reverse</code></li> +</ul> + +<p>Wenn Sie <code>row</code> oder <code>row-reverse</code> wählen, läuft Ihre Hauptachse entlang der Zeile in <strong>Zeilenrichtung</strong>.</p> + +<p><img alt="If flex-direction is set to row the main axis runs along the row in the inline direction." src="https://mdn.mozillademos.org/files/15614/Basics1.png" style="display: block; height: 152px; margin: 0px auto; width: 522px;"></p> + +<p>Wählen Sie <code>column</code> oder <code>column-reverse</code> und Ihre Hauptachse läuft von oben nach unten - in <strong>Blockrichtung</strong>.</p> + +<p><img alt="If flex-direction is set to column the main axis runs in the block direction." src="https://mdn.mozillademos.org/files/15615/Basics2.png" style="display: block; height: 227px; margin: 0px auto; width: 709px;"></p> + +<h3 id="Die_Querachse">Die Querachse</h3> + +<p>Die Querachse (cross axis) verläuft senkrecht zur Hauptachse, d.h. wenn Ihre <code>flex-direction</code> (Hauptachse) auf <code>row</code> oder <code>row-reverse</code> eingestellt ist, läuft die Querachse die Spalten hinunter.</p> + +<p><img alt="If flex-direction is set to row then the cross axis runs in the block direction." src="https://mdn.mozillademos.org/files/15616/Basics3.png" style="display: block; height: 125px; margin: 0px auto; width: 666px;"></p> + +<p>Wenn Ihre Hauptachse <code>column</code> oder <code>column-reverse</code> ist, dann verläuft die Querachse entlang der Zeilen.</p> + +<p><img alt="If flex-direction is set to column then the cross axis runs in the inline direction." src="https://mdn.mozillademos.org/files/15617/Basics4.png" style="display: block; height: 244px; margin: 0px auto; width: 523px;"></p> + +<p>Es ist wichtig zu verstehen, welche Achse die richtige ist, wenn wir uns mit der Ausrichtung und Justierung von Flex-Elementen befassen; Flexbox bietet Eigenschaften, die den Inhalt entlang der einen oder anderen Achse ausrichtet und justiert.</p> + +<h2 id="Start-_und_Endzeilen">Start- und Endzeilen</h2> + +<p>Ein weiterer wichtiger Bereich des Verständnisses ist, wie Flexbox keine Annahmen über den Schreibmodus des Dokuments macht. In der Vergangenheit wurde CSS stark in Richtung horizontale und links-nach-rechts-Schreibweise ausgerichtet. Moderne Layoutmethoden umfassen den Bereich der Schreibmodi und so gehen wir nicht mehr davon aus, dass eine Textzeile oben links in einem Dokument beginnt und nach rechts verläuft, wobei neue Zeilen untereinander erscheinen.</p> + +<p>Sie können mehr über die Beziehung zwischen Flexbox und der Writing Modes Spezifikation in einem späteren Artikel lesen, aber die folgende Beschreibung soll helfen zu erklären, warum wir nicht über links und rechts und oben und unten sprechen, wenn wir die Richtung beschreiben, in die unsere Flex Elemente fließen.</p> + +<p>Wenn die <code>flex-direction</code> <code>row</code> ist und ich in Englisch arbeite, dann ist die Anfangskante der Hauptachse links, die Endkante rechts.</p> + +<p><img alt="Working in English the start edge is on the left." src="https://mdn.mozillademos.org/files/15618/Basics5.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p> + +<p>Wenn ich auf Arabisch arbeiten würde, dann wäre die Anfangskante meiner Hauptachse rechts und die Endkante links.</p> + +<p><img alt="The start edge in a RTL language is on the right." src="https://mdn.mozillademos.org/files/15619/Basics6.png" style="display: block; height: 152px; margin: 0px auto; width: 634px;"></p> + +<p>In beiden Fällen befindet sich die Anfangskante der Querachse oben am Flexcontainer und die Endkante unten, da beide Sprachen einen horizontalen Schreibmodus haben.</p> + +<p>Nach einer Weile wird das Nachdenken über Anfang und Ende statt links und rechts natürlich werden, und Ihnen nützlich sein, wenn Sie mit anderen Layout-Methoden arbeiten, wie CSS-Grid-Layout, die den gleichen Mustern folgen.</p> + +<h2 id="Der_Flex_Container">Der Flex Container</h2> + +<p>Ein mit Flexbox angelegter Bereich eines Dokuments wird als <strong>Flex Container</strong> bezeichnet. Um einen Flex Container zu erstellen, setzen wir den Wert der Eigenschaft {{cssxref("display")}} des Bereichscontainers auf <code>flex</code> oder <code>inline-flex</code>. Sobald wir dies tun, werden die direkten Kinder dieses Containers zu flexiblen Elementen. Wie bei allen Eigenschaften in CSS sind einige Initialwerte definiert, so dass sich beim Erstellen eines Flex Containers alle enthaltenen Flex Items wie folgt verhalten.</p> + +<ul> + <li>Elemente werden in einer Zeile angezeigt (die Standardeinstellung der Eigenschaft <code>flex-direction</code> ist <code>row</code>).</li> + <li>Die Positionen beginnen an der Startkante der Hauptachse.</li> + <li>Die Elemente dehnen sich nicht auf der Hauptdimension aus, sondern können schrumpfen.</li> + <li>Die {{cssxref("flex-basis")}} Eigenschaft wird auf <code>auto </code>gesetzt.</li> + <li>Die{{cssxref("flex-wrap")}} Eigenschaft wird auf <code>nowrap </code>gesetzt.</li> +</ul> + +<p>Dies hat zur Folge, dass Ihre Elemente in einer Reihe angeordnet werden, wobei die Größe des Inhalts als Größe in der Hauptachse verwendet wird. Wenn es mehr Elemente gibt, als in den Container passen, werden sie nicht eingepackt, sondern überlaufen. Wenn einige Elemente größer als andere sind, dehnen sich alle Elemente entlang der Querachse aus, um ihre volle Größe zu erreichen.</p> + +<p>Wie das aussieht, sehen Sie im folgenden Live-Beispiel. Versuchen Sie, die Elemente zu bearbeiten oder zusätzliche Elemente hinzuzufügen, um das anfängliche Verhalten von Flexbox zu testen.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/the-flex-container.html", '100%', 480)}} </p> + +<h3 id="Wechsel_der_flex-direction">Wechsel der flex-direction</h3> + +<p>Das Hinzufügen der Eigenschaft {{cssxref("flex-direction")}} zum Flex Container erlaubt es uns, die Richtung zu ändern, in der unsere Flex Elemente angezeigt werden. Einstellung der <code>flex-direction</code>: <code>row-reverse</code> behält die Anzeige entlang der Zeile bei, jedoch werden die Start- und Endlinien umgeschaltet.</p> + +<p>Wenn wir die <code>flex-direction</code> in eine Spalte (<code>column)</code>ändern, schaltet die Hauptachse um und unsere Elemente werden nun in einer Spalte angezeigt. Setzen Sie <code>column-reverse</code> und die Start- und Endzeilen werden wieder umgeschaltet.</p> + +<p>Das folgende Live-Beispiel hat die <code>flex-direction</code> auf <code>row-reverse</code> eingestellt. Versuchen Sie die anderen Werte - <code>row</code>, <code>column</code> and <code>column-reverse</code> - um zu sehen, was mit dem Inhalt passiert.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-direction.html", '100%', 350)}}</p> + +<h2 id="Multi-line_flex_containers_with_flex-wrap">Multi-line flex containers with flex-wrap</h2> + +<p>While flexbox is a one dimensional model, it is possible to cause our flex items to wrap onto multiple lines. In doing so, you should consider each line as a new flex container. Any space distribution will happen across that line, without reference to the lines either side.</p> + +<p>To cause wrapping behaviour add the property {{cssxref("flex-wrap")}} with a value of <code>wrap</code>. Now, should your items be too large to all display in one line, they will wrap onto another line. The live sample below contains items that have been given a width, the total width of the items being too wide for the flex container. As <code>flex-wrap</code> is set to <code>wrap</code>, the items wrap. Set it to <code>nowrap</code>, which is also the initial value, and they will instead shrink to fit the container because they are using initial flexbox values that allows items to shrink. Using <code>nowrap</code> would cause an overflow if the items were not able to shrink, or could not shrink small enough to fit.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-wrap.html", '100%', 400)}}</p> + +<p>Find out more about wrapping flex items in the guide <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">Mastering Wrapping of Flex Items</a>.</p> + +<h2 id="The_flex-flow_shorthand">The flex-flow shorthand</h2> + +<p>You can combine the two properties <code>flex-direction</code> and <code>flex-wrap</code> into the {{cssxref("flex-flow")}} shorthand. The first value specified is <code>flex-direction</code> and the second value is <code>flex-wrap</code>.</p> + +<p>In the live example below try changing the first value to one of the allowable values for <code>flex-direction</code> - <code>row</code>, <code>row-reverse</code>, <code>column</code> or <code>column-reverse</code>, and also change the second to <code>wrap</code> and <code>nowrap</code>.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-flow.html", '100%', 400)}}</p> + +<h2 id="Properties_applied_to_flex_items">Properties applied to flex items</h2> + +<p>To have more control over flex items we can target them directly. We do this by way of three properties:</p> + +<ul> + <li>{{cssxref("flex-grow")}}</li> + <li>{{cssxref("flex-shrink")}}</li> + <li>{{cssxref("flex-basis")}}</li> +</ul> + +<p>We will take a brief look at these properties in this overview, and you can gain a fuller understanding in the guide <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Controlling Ratios of Flex Items on the Main Axis</a>.</p> + +<p>Before we can make sense of these properties we need to consider the concept of <strong>available space</strong>. What we are doing when we change the value of these flex properties is to change the way that available space is distributed amongst our items. This concept of available space is also important when we come to look at aligning items.</p> + +<p>If we have three 100 pixel-wide items in a container which is 500 pixels wide, then the space we need to lay out our items is 300 pixels. This leaves 200 pixels of available space. If we don’t change the initial values then flexbox will put that space after the last item.</p> + +<p><img alt="This flex container has available space after laying out the items." src="https://mdn.mozillademos.org/files/15620/Basics7.png" style="display: block; height: 198px; margin: 0px auto; width: 528px;"></p> + +<p>If we instead would like the items to grow and fill the space, then we need to have a method of distributing the leftover space between the items. This is what the <code>flex</code> properties that we apply to the items themselves, will do.</p> + +<h3 id="The_flex-basis_property">The <code>flex-basis</code> property</h3> + +<p>The <code>flex-basis</code> is what defines the size of that item in terms of the space it leaves as available space. The initial value of this property is <code>auto</code> — in this case the browser looks to see if the items have a size. In the example above, all of the items have a width of 100 pixels and so this is used as the <code>flex-basis</code>.</p> + +<p>If the items don’t have a size then the content's size is used as the flex-basis. This is why when we just declare <code>display: flex</code> on the parent to create flex items, the items all move into a row and take only as much space as they need to display their contents.</p> + +<h3 id="The_flex-grow_property">The <code>flex-grow</code> property</h3> + +<p>With the <code>flex-grow</code> property set to a positive integer, flex items can grow along the main axis from their <code>flex-basis</code>. This will cause the item to stretch and take up any available space on that axis, or a proportion of the available space if other items are allowed to grow too.</p> + +<p>If we gave all of our items in the example above a <code>flex-grow</code> value of 1 then the available space in the flex container would be equally shared between our items and they would stretch to fill the container on the main axis.</p> + +<p>The flex-grow property can be used to distribute space in proportion. If we give our first item a <code>flex-grow</code> value of 2 and the other items a value of 1, 2 parts will be given to the first item (100px out of 200px in the case of the example above), 1 part each the other two (50px each out of the 200px total).</p> + +<h3 id="The_flex-shrink_property">The <code>flex-shrink</code> property</h3> + +<p>Where the <code>flex-grow</code> property deals with adding space in the main axis, the <code>flex-shrink</code> property controls how it is taken away. If we do not have enough space in the container to lay out our items and <code>flex-shrink</code> is set to a positive integer the item can become smaller than the <code>flex-basis</code>. As with <code>flex-grow</code> different values can be assigned in order to cause one item to shrink faster than others — an item with a higher value set for <code>flex-shrink</code> will shrink faster than its siblings that have lower values.</p> + +<p>The minimum size of the item will be taken into account while working out the actual amount of shrinkage that will happen, which means that flex-shrink has the potential to appear less consistent than flex-grow in behavior. We’ll therefore take a more detailed look at how this algorithm works in the article Controlling Ratios of items along the main axis.</p> + +<div class="note"> +<p>Note that these values for <code>flex-grow</code> and <code>flex-shrink</code> are proportions. Typically if we had all of our items set to flex: <code>1 1 200px</code> and then wanted one item to grow at twice the rate, we would set that item to flex: <code>2 1 200px</code>. However you could use flex: <code>10 1 200px</code> and flex: <code>20 1 200px</code> if you wanted.</p> +</div> + +<h3 id="Shorthand_values_for_the_flex_properties">Shorthand values for the flex properties</h3> + +<p>You will very rarely see the <code>flex-grow</code>, <code>flex-shrink</code>, and <code>flex-basis</code> properties used individually; instead they are combined into the {{cssxref("flex")}} shorthand. The <code>flex</code> shorthand allows you to set the three values in this order — <code>flex-grow</code>, <code>flex-shrink</code>, <code>flex-basis</code>.</p> + +<p>The live example below allows you to test out the different values of the flex shorthand; remember that the first value is <code>flex-grow</code>. Giving this a positive value means the item can grow. The second is <code>flex-shrink</code> — with a positive value the items can shrink, but only if their total values overflow the main axis. The final value is <code>flex-basis</code>; this is the value the items are using as their base value to grow and shrink from.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-properties.html", '100%', 510)}}</p> + +<p>There are also some predefined shorthand values which cover most of the use cases. You will often see these used in tutorials, and in many cases these are all you will need to use. The predefined values are as follows:</p> + +<ul> + <li><code>flex: initial</code></li> + <li><code>flex: auto</code></li> + <li><code>flex: none</code></li> + <li><code>flex: <positive-number></code></li> +</ul> + +<p>Setting <code>flex: initial</code> resets the item to the initial values of Flexbox. This is the same as <code>flex: 0 1 auto</code>. In this case the value of <code>flex-grow</code> is 0, so items will not grow larger than their <code>flex-basis</code> size. The value of <code>flex-shrink</code> is 1, so items can shrink if they need to rather than overflowing. The value of <code>flex-basis</code> is <code>auto</code>. Items will either use any size set on the item in the main dimension, or they will get their size from the content size.</p> + +<p>Using <code>flex: auto</code> is the same as using <code>flex: 1 1 auto</code>; everything is as with <code>flex:initial</code> but in this case the items can grow and fill the container as well as shrink if required.</p> + +<p>Using <code>flex: none</code> will create fully inflexible flex items. It is as if you wrote <code>flex: 0 0 auto</code>. The items cannot grow or shrink but will be laid out using flexbox with a <code>flex-basis</code> of <code>auto</code>.</p> + +<p>The shorthand you often see in tutorials is <code>flex: 1</code> or <code>flex: 2</code> and so on. This is as if you used <code>flex: 1 1 0</code>. The items can grow and shrink from a <code>flex-basis</code> of 0.</p> + +<p>Try these shorthand values in the live example below.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-shorthands.html", '100%', 510)}}</p> + +<h2 id="Alignment_justification_and_distribution_of_free_space_between_items">Alignment, justification and distribution of free space between items</h2> + +<p>A key feature of flexbox is the ability to align and justify items on the main- and cross-axes, and to distribute space between flex items.</p> + +<h3 id="align-items"><code>align-items</code></h3> + +<p>The {{cssxref("align-items")}} property will align the items on the cross axis.</p> + +<p>The initial value for this property is <code>stretch</code> and this is why flex items stretch to the height of the tallest one by default. They are in fact stretching to fill the flex container — the tallest item is defining the height of that.</p> + +<p>You could instead set <code>align-items</code> to <code>flex-start</code> in order to make the items line up at the start of the flex container, <code>flex-end</code> to align them to the end, or <code>center</code> to align them in the centre. Try this in the live example — I have given the flex container a height in order that you can see how the items can be moved around inside the container. See what happens if you set the value of align-items to:</p> + +<ul> + <li><code>stretch</code></li> + <li><code>flex-start</code></li> + <li><code>flex-end</code></li> + <li><code>center</code></li> +</ul> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/align-items.html", '100%', 520)}}</p> + +<h3 id="justify-content"><code>justify-content</code></h3> + +<p>The {{cssxref("justify-content")}} property is used to align the items on the main axis, the direction in which <code>flex-direction</code> has set the flow. The initial value is <code>flex-start</code> which will line the items up at the start edge of the container, but you could also set the value to <code>flex-end</code> to line them up at the end, or <code>center</code> to line them up in the centre.</p> + +<p>You can also use the value <code>space-between</code> to take all the spare space after the items have been laid out, and share it out evenly between the items so there will be an equal amount of space between each item. To cause an equal amount of space on the right and left of each item use the value <code>space-around</code>. With <code>space-around</code>, items have a half-size space on either end. Or, to cause items to have equal space around them use the value <code>space-evenly</code>. With <code>space-evenly</code>, items have a full-size space on either end.</p> + +<p>Try the following values of <code>justify-content</code> in the live example:</p> + +<ul> + <li><code>flex-start</code></li> + <li><code>flex-end</code></li> + <li><code>center</code></li> + <li><code>space-around</code></li> + <li><code>space-between</code></li> + <li><code>space-evenly</code></li> +</ul> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/justify-content.html", '100%', 380)}}</p> + +<p>In the article <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Aligning Items in a Flex Container</a> we will explore these properties in more depth, in order to have a better understanding of how they work. These simple examples however will be useful in the majority of use cases.</p> + +<h2 id="Next_steps">Next steps</h2> + +<p>After reading this article you should have an understanding of the basic features of Flexbox. In the next article we will look at <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">how this specification relates to other parts of CSS</a>.</p> diff --git a/files/de/web/css/css_flexible_box_layout/index.html b/files/de/web/css/css_flexible_box_layout/index.html new file mode 100644 index 0000000000..50a0d76329 --- /dev/null +++ b/files/de/web/css/css_flexible_box_layout/index.html @@ -0,0 +1,111 @@ +--- +title: CSS Flexible Box Layout +slug: Web/CSS/CSS_Flexible_Box_Layout +translation_of: Web/CSS/CSS_Flexible_Box_Layout +--- +<p>{{CSSRef}}</p> + +<p><strong>CSS Flexible</strong> is a module of CSS that defines a multi-column layout, allowing to express how content should flows between columns, and how gaps and rules are handled.</p> + +<h2 id="Reference">Reference</h2> + +<h3 id="CSS_Properties">CSS Properties</h3> + +<div class="index"> +<ul> + <li>{{cssxref("align-content")}}</li> + <li>{{cssxref("align-items")}}</li> + <li>{{cssxref("align-self")}}</li> + <li>{{cssxref("flex")}}</li> + <li>{{cssxref("flex-basis")}}</li> + <li>{{cssxref("flex-direction")}}</li> + <li>{{cssxref("flex-flow")}}</li> + <li>{{cssxref("flex-grow")}}</li> + <li>{{cssxref("flex-shrink")}}</li> + <li>{{cssxref("flex-wrap")}}</li> + <li>{{cssxref("justify-content")}}</li> + <li>{{cssxref("order")}}</li> +</ul> +</div> + +<h2 id="Guides">Guides</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes">Using CSS flexible boxes</a></dt> + <dd>Step-by-step tutorial about how to build layouts using this feature.</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications">Using flexbox to lay out Web applications</a></dt> + <dd>Tutorial explaining how to use flexbox in the specific context of Web applications.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Flexbox') }}</td> + <td>{{ Spec2('CSS3 Flexbox') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable()}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatGeckoDesktop("20.0")}}</td> + <td>21.0{{property_prefix("-webkit")}}<br> + 29.0</td> + <td>10.0{{property_prefix("-ms")}}<br> + 11.0</td> + <td>12.10</td> + <td>6.1{{property_prefix("-webkit")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown()}}</td> + <td>4.4</td> + <td>11</td> + <td>12.10</td> + <td><span style="font-size: 12px; line-height: 18px;">7.1{{property_prefix("-webkit")}}</span></td> + </tr> + </tbody> +</table> +</div> + +<p> </p> diff --git a/files/de/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html b/files/de/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html new file mode 100644 index 0000000000..8a66487777 --- /dev/null +++ b/files/de/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html @@ -0,0 +1,397 @@ +--- +title: Using CSS flexible boxes +slug: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox +--- +<div>{{CSSRef}}</div> + +<p>Die CSS3 Flexible Box, auch flexbox genannt, ist ein Layoutmodus, um Elemente einer Seite so anzuordnen, dass sie sich vorhersagbar verhalten, wenn sich das Layout verschiedenen Bildschirmgrößen und Ausgabegeräten anpasst. Für viele Anwendungsfälle stellt das Flexible-Box-Modell eine Verbesserung gegenüber dem Block-Modell dar, da es keine Floats nutzt. Außerdem fallen die Margins eines Containers nicht mit den Margins seines Inhalts zusammen.</p> + +<p>Viele Designer empfinden die Verwendung des Flexbox-Modells als einfacher. Kindelemente einer Flexbox können in jede Richtung ausgelegt werden sowie eine flexible Größe besitzen, um sich so an den Anzeigeplatz anzupassen. Die Positionierung von Kindelementen ist dadurch wesentlich leichter und komplexe Layouts sind nicht nur einfacher, sondern auch mit schönerem Code zu erlangen, was auf die unabhängige Platzierung der Elemente im Quellcode zurückzuführen ist. Diese Unabhängigkeit beeinflusst bewusst nur die visuelle Darstellung und lässt somit die Sprachordnung und Navigation, die auf dem Quellcode basiert, unberührt.</p> + +<div class="note"><strong>Hinweis:</strong> Obwohl sich die <a href="http://www.w3.org/TR/css3-flexbox/">Spezifikation des CSS Flexible Boxes Layouts</a> im Aufruf zum letzen Arbeitsentwurf befindet (siehe aktuellen <a href="http://dev.w3.org/csswg/css-flexbox/">Editor-Entwurf</a>), haben noch nicht alle Browser alle Eigenschaften der Flexbox implementiert. Es sei hiermit darauf verwiesen, dass es noch keine ausreichend übergreifende Unterstützung gibt. Einen Überblick über den Stand der jeweiligen Eigenschaften bietet die <a href="/en-US/docs/Web/Guide/CSS/Flexible_boxes#Browser_compatibility">Kompatibilitätsliste.</a></div> + +<h2 id="Flexible-Box-Konzept">Flexible-Box-Konzept</h2> + +<p>Ein entscheidender Aspekt des Flex-Layouts ist die Möglichkeit, die Breite und/oder Höhe der einzelnen Elemente, entsprechend des zur Verfügung stehenden Platzes, auf jedem Gerät anpassen zu können. Ein Flex-Container dehnt seine Elemente entweder aus, um den verfügbaren freien Platz zu füllen, oder verkleinert sie, um einen Overflow zu vermeiden.</p> + +<p>Der Flexbox-Layout-Algorithmus funktioniert richtungsunabhängig, anders als beim Block-Layout, das vertikal ausgerichtet ist, oder beim Inline-Layout, das horizontal ausgerichtet ist. Obwohl das Block-Layout gut auf Seiten anwendbar ist, mangelt es ihm an individuellen Richtlinien, um Applikationskomponenten zu unterstützen, die die Ausrichtung ändern, sich in ihrer Größe anpassen, je nach Benutzerprogrammen ausdehnen oder verkleinern, von der Horizontalen in die Vertikale rotieren müssen und so weiter. Das Flexbox-Layout lässt sich am besten auf Anwendungskomponenten und auf kleinere Layouts anwenden, während das (neu aufkommende) Grid-Layout für großflächigere Layouts bestimmt ist. Beide sind Bestandteil größerer Bemühungen der CSS-Arbeitsgruppe, um eine größere Interoperabilität zwischen Webanwendungen mit den unterschiedlichsten Benutzerprogrammen, den vielfältigen Schreibmethoden und anderen Anforderungen, die an die Flexibilität gestellt werden, zu ermöglichen.</p> + +<h2 id="Flexible-Box-Wortschatz">Flexible-Box-Wortschatz</h2> + +<p>Während sich die Diskussion der Flexible Boxes von Bezeichnungen wie Horizontal-/Inline-Achse und Vertikal-/Block-Achse befreit, bedarf es dennoch einer neuen Terminologie, um das Modell adäquat zu beschreiben. Folgendes Diagramm soll als Referenz, zur Erörterung des Wortschatzes, dienen. Es zeigt einen Flex Container, dessen Eigenschaft <code>flex-direction</code> den Wert <code>row</code> hat. Das bedeutet, dass die <code>flex items</code> (im weiteren Verlauf als Flex-Elemente benannt) einander auf der Horizontalen, der Hauptachse, folgen – gemäß der gängigen Schreibmethode, die der Schreibrichtung folgt – in diesem Fall von links nach rechts.</p> + +<p><img alt="flex_terms.png" class="default internal" src="/files/3739/flex_terms.png"></p> + +<dl> + <dt>Flex container (Flex-Container)</dt> + <dd>Das Elternelement, in dem die Flex-Elemente (entsprechen den <code style="font-style: normal;">flex items</code> im Diagramm) liegen. Ein Flex-Container wird durch den Wert <code style="font-style: normal;">flex</code> oder <code style="font-style: normal;">inline-flex</code> der Eigenschaft {{Cssxref("display")}} bestimmt.</dd> +</dl> + +<dl> + <dt>Flex item (Flex-Elemente)</dt> + <dd> + <p>Jedes Kindelement eines Flex-Containers wird zu einem Flex-Element. Text, der sich unmittelbar in einem Flex-Container befindet, wird von einem anonymen Flex-Element umspannt.</p> + </dd> + <dt>Achsen</dt> + <dd> + <p>Jedes Flexible-Box-Layout folgt zwei Achsen. Die Hauptachse ist die Achse, auf der die Flex-Elemente aufeinander folgen. Die Querachse ist die Achse, die senkrecht zur Hauptachse steht.</p> + + <ul> + <li>Die <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction" title="Die flex-direction Definition">flex-direction</a>-Eigenschaft bestimmt die Hauptachse.</li> + <li>Die <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content">justify-content</a>-Eigenschaft bestimmt, wie Flex-Elemente auf der Hauptachse der aktuellen Zeile ausgelegt werden.</li> + <li>Die <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-items">align-items</a>-Eigenschaft bestimmt die standardmäßige Ausrichtung der Flex-Elemente auf der Querachse der aktuellen Zeile.</li> + <li>Die <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-self">align-self</a>-Eigenschaft bestimmt die Ausrichtung einzelner Flex-Elemente auf der Querachse und überschreibt den standardmäßig durch <code>align-items</code> definierten Wert.</li> + </ul> + </dd> + <dt>Richtungen</dt> + <dd> + <p>Die Seiten <strong>main</strong> <strong>start/main end</strong> und <strong>cross start/cross end</strong> des Flex-Containers beschreiben den Anfang und den Endpunkt der Fließrichtung von Flex-Elementen. Sie folgen der Haupt- und Querachse des Flex-Containers in der durch <code>writing-mode</code> festgelegten Richtung (von links nach rechts, von rechts nach links usw.)</p> + + <ul> + <li>Die <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/order">order</a>-Eigenschaft weist Elementen Ordinalzahlen zu und legt fest, welche Elemente zuerst erscheinen.</li> + <li>Die <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-flow">flex-flow</a>-Eigenschaft fasst die <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction" title="Die flex-direction Definition">flex-direction</a>- und <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap">flex-wrap</a>-Eigenschaften zusammen, um die Flex-Elemente anzulegen.</li> + </ul> + </dd> + <dt>Lines</dt> + <dd> + <p>Die Flex-Elemente können auf eine oder mehrere Linien ausgelegt werden, gemäß der <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap">flex-wrap</a>-Eigenschaft, welche die Richtung der Querachse und die Richtung der Linien steuert, in welche diese aufgereiht werden.</p> + </dd> + <dt>Dimensions</dt> + <dd> + <p>Die richtungsunabhängigen Entsprechungen von Höhe und Breite der Flex-Elemente sind <strong>main size</strong> und <strong>cross size</strong>, die entsprechend der Haupt- bzw. Querachse des Flex-Containers folgen.</p> + + <ul> + <li>Der Standardwert der <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/min-height">min-height</a>- und <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/min-width">min-width</a>-Eigenschaften ist 0.</li> + <li>Die <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex">flex</a>-Eigenschaft fasst die <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow">flex-grow</a>-, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink">flex-shrink</a>- und <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis">flex-basis</a>-Eigenschaften zusammen, um die Flexibilität der Flex-Elemente zu gewährleisten.</li> + </ul> + </dd> +</dl> + +<h2 id="Flexible-Box-Auszeichnung">Flexible-Box-Auszeichnung</h2> + +<p>Um per CSS Elemente auszuzeichnen, die dieses Layout benutzen, setzt man die <a href="https://developer.mozilla.org/de/docs/Web/CSS/display">display</a>-Eigenschaft wie folgt:</p> + +<pre class="brush: css">display: flex</pre> + +<p>oder</p> + +<pre class="brush: css">display: inline-flex</pre> + +<p>Macht man es so, definiert man das Element als Flex-Container und seine Kindelemente als Flex-Elemente. Der <code>flex</code>-Wert macht den Flex-Container zu einem Block-level-Element. Der <code>flex-inline</code>- Wert macht den Flex-Container zu einem kleinen Inline-level-Element.</p> + +<div class="note"><strong>Hinweis:</strong> Werden anbieterspzifische Präfixe für ältere Browser verwendet, fügt man den Präfix dem display-Wert hinzu und nicht der Eigenschaft. Zum Beispiel: <code>display: -webkit-flex</code>.</div> + +<h2 id="Überlegungen_zu_Flex-Elementen">Überlegungen zu Flex-Elementen</h2> + +<p>Text, der sich unmittelbar in einem Flex-Container befindet, wird automatisch von einem anonymen Flex-Element umschlossen. Ein anonymes Flex-Element, das nur aus Leerraum besteht, wird nicht gerendert, ganz so, als ob es durch <code>display: none</code> ausgezeichnet ist.</p> + +<p>Absolut positionierte Kindelemente eines Flex-Containers werden so angeordnet, dass sich ihre statische Position auf die Hauptecke der ersten Inhaltsbox ihres Flex-Containers bezieht.</p> + +<p>Wegen eines bekannten Problems wird ein Flex-Element mit der Deklaration <code>visibility: collapse</code> gegenwärtig so behandelt, als ob es die Deklaration <code>display: none</code> besäße, und nicht, wie mit der Deklation <code>visibility: hidden</code>. Vorgeschlagener Workaround, bis zur Lösung dieses Problems, ist, die Deklaration <code>visibility: hidden</code> für Flex-Elemente zu benutzen, sodass sie sich so verhalten, als ob sie mit <code>visibility: collapse</code> ausgezeichnet wären. Für mehr Informationen siehe <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=783470">Bug 783470</a>.</p> + +<p>Die Margins benachbarter Flex-Elemente fallen nicht zusammen. Die Benutzung von Auto-Margins absorbiert überflüssigen Platz in der Vertikalen und der Horizontalen und kann zur Ausrichtung oder Trennung von benachbarten Flex-Elementen genutzt werden. Siehe <a href="http://dev.w3.org/csswg/css3-flexbox/#auto-margins">Align with ‘auto’ margins</a> in der W3C Flexible-Box-Layout-Model-Spezifikation für eine detailliertere Beschreibung.</p> + +<p><s>Um eine vernünftige, minimal Größe für ‘flex Elemente’ zu gewährleisten, benutzt man <code>min-width: auto</code> und/oder <code>min-height: auto</code>. Bei ‘flex Elementen’ berechnet der <code>auto</code> Wert die mindest Breite/Höhe seiner Elemente so, dass nicht mehr Platz zu Verfügung steht, als es durch die Breite/Höhe seines Inhaltes erforderlich ist. Dadurch ist sichergestellt, dass die Elemente groß genug gerendert werden um ihren Inhalt anzeigen zu können. Siehe <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/min-width">min-width</a> und <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/min-height">min-height</a> für eine detailliertere Beschreibung.</s></p> + +<p>Die Ausrichtungseigenschaften der Flexbox gewährleisten eine “echte” Zentrierung, entgegen anderer Zentrierungsmethoden in CSS. Dies bedeutet, dass Flex-Elemente auch dann zentriert bleiben, wenn sie ihren Container überfließen. Dies kann manchmal jedoch problematisch sein. Überfließt der Inhalt die obere Kante der Seite oder die linke Seite (in LTR-Sprachen wie dem Englischen; Bei RTL-Sprachen wie dem Arabischen tritt dieses Problem auf der rechten Seite auf), so kann man in diesem Bereich nicht mehr Scrollen auch wenn sich darin Inhalte befinden! In einer künftigen Version werden die Ausrichtungseigenschaften so erweitert, dass es auch hier eine “sichere” Möglichkeit geben wird. Sollte dies ein Problem darstellen, kann man momentan stattdessen auf Margins zurückgreifen, um eine Zentrierung zu gewährleisten, da sich diese “sicher” verhalten und bei einem Überfließen nicht mehr zentrieren. Anstelle der <code>align</code>-Deklaration kann man einfach Auto-Margins auf die zu zentrierenden Elemente anwenden. Anstelle der <code>justify</code>-Eigenschaft kann man Auto-Margins auf die äußeren Enden des ersten und letzten Flex-Elements innerhalb eines Flex-Containers setzen. Die Auto-Margins werden entsprechend des geschätzten, freien Platzes die Flex-Elemente entweder zentrieren, sollte genug Platz vorhanden sein, und zur normalen Ausrichtung wechseln, wenn kein Platz da ist. Will man jedoch <code>justify-content</code> durch eine <code>margin</code>-basierte Zentrierung in einer multi-line-Flexbox ersetzen, hat man wahrscheinlich kein Glück dabei, da man die Margins auf dem ersten und letzten Flex-Element auf jeder Zeile setzen müsste. Sofern man nicht schon im Voraus bestimmten kann, welches Element auf welcher Zeile landet, kann man <code>margin</code>-basierte Zentrierung auf der Hauptachse nicht zuverlässig benutzen, um die <code>justify-content</code>-Deklaration zu ersetzen.</p> + +<p>Man sollte sich daran erinnern, dass, auch wenn die Reihenfolge in der Darstellung von Elementen unabhängig von der Notierung im Quellcode ist, sich diese nur in der visuellen Darstellung auswirkt und sich die Sprachreihenfolge und Navigationsanordnung nach der Anordnung im Quelltext richtet. Sprach- und Navigationssequenzen werden sogar von der <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/order">order</a>-Eigenschaft unberührt gelassen. Dementsprechend müssen Entwickler dafür Sorge tragen, Elemente in der richtigen Reihenfolge anzuordnen, um die Zugänglichkeit nicht zu gefährden.</p> + +<h2 id="Flexible-Box-Eigenschaften">Flexible-Box-Eigenschaften</h2> + +<h3 id="Eigenschaften_die_Flexible_Boxes_nicht_beeinflussen">Eigenschaften, die Flexible Boxes nicht beeinflussen</h3> + +<p>Da Flexible Boxes einen anderen Darstellungsalgorithmus verwenden, ergibt die Verwendung einiger Eigenschaften bei Flex-Containern keinen Sinn:</p> + +<ul> + <li>Eigenschaften <code>column-*</code> der <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_multi-column_layouts">multiple column Modules</a> haben keinen Einfluss auf Flex-Elemente.</li> + <li>{{cssxref("float")}} und {{cssxref("clear")}} haben keinen Einfluss auf Flex -Elemente. Die Benutzung von <code>float</code> sorgt dafür, dass die <code>display</code>-Eigenschaft den errechneten Wert <code>block</code> zugewiesen bekommt.</li> + <li>{{cssxref("vertical-align")}} hat keinen Einfluss auf die Ausrichtung von Flex-Elementen.</li> +</ul> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Basis-Flex-Beispiel">Basis-Flex-Beispiel</h3> + +<p>Dieses Grundbeispiel zeigt, wie man ein Element "flexibel" macht und wie sich gleichrangige Elemente in einem flexiblen Zustand verhalten.</p> + +<pre class="brush: html"><!DOCTYPE html> +<html lang="en"> + <head> + <style> + + .flex + { + /* basic styling */ + width: 350px; + height: 200px; + border: 1px solid #555; + font: 14px Arial; + + /* flexbox setup */ + display: -webkit-flex; + -webkit-flex-direction: row; + + display: flex; + flex-direction: row; + } + + .flex > div + { + -webkit-flex: 1 1 auto; + flex: 1 1 auto; + + width: 30px; /* To make the transition work nicely. (Transitions to/from + "width:auto" are buggy in Gecko and Webkit, at least. + See http://bugzil.la/731886 for more info.) */ + + -webkit-transition: width 0.7s ease-out; + transition: width 0.7s ease-out; + } + + /* colors */ + .flex > div:nth-child(1){ background : #009246; } + .flex > div:nth-child(2){ background : #F1F2F1; } + .flex > div:nth-child(3){ background : #CE2B37; } + + .flex > div:hover + { + width: 200px; + } + + </style> + + </head> + <body> + <p>Flexbox nuovo</p> + <div class="flex"> + <div>uno</div> + <div>due</div> + <div>tre</div> + </div> + </body> +</html></pre> + +<h3 id="Holy-Grail-Layout-Beispiel">Holy-Grail-Layout-Beispiel</h3> + +<p>Dieses Beispiel demonstriert, wie Flexbox die Möglichkeit bietet, Layouts entsprechend verschiedener Auflösungen dynamisch anzupassen. Folgendes Diagramm stellt die Transformation bildlich dar.</p> + +<p><img alt="HolyGrailLayout.png" class="default internal" src="/files/3760/HolyGrailLayout.png"></p> + +<p>Hier wird das Beispiel dargestellt, dass sich eine Seite, die für einen Browser ausgelegt ist, sich an ein Smartphone-Fenster anpassen muss. Es müssen sich nicht nur die Größenverhältnisse der Elemente anpassen, sondern auch die Anordnung, in der die Elemente präsentiert werden. Das wird durch die Benutzung von Flexbox sehr vereinfacht.</p> + +<pre class="brush: html"><!DOCTYPE html> +<html lang="en"> + <head> + <style> + + body { + font: 24px Helvetica; + background: #999999; + } + + #main { + min-height: 800px; + margin: 0px; + padding: 0px; + display: -webkit-flex; + display: flex; + -webkit-flex-flow: row; + flex-flow: row; + } + + #main > article { + margin: 4px; + padding: 5px; + border: 1px solid #cccc33; + border-radius: 7pt; + background: #dddd88; + -webkit-flex: 3 1 60%; + flex: 3 1 60%; + -webkit-order: 2; + order: 2; + } + + #main > nav { + margin: 4px; + padding: 5px; + border: 1px solid #8888bb; + border-radius: 7pt; + background: #ccccff; + -webkit-flex: 1 6 20%; + flex: 1 6 20%; + -webkit-order: 1; + order: 1; + } + + #main > aside { + margin: 4px; + padding: 5px; + border: 1px solid #8888bb; + border-radius: 7pt; + background: #ccccff; + -webkit-flex: 1 6 20%; + flex: 1 6 20%; + -webkit-order: 3; + order: 3; + } + + header, footer { + display: block; + margin: 4px; + padding: 5px; + min-height: 100px; + border: 1px solid #eebb55; + border-radius: 7pt; + background: #ffeebb; + } + + /* Too narrow to support three columns */ + @media all and (max-width: 640px) { + + #main, #page { + -webkit-flex-flow: column; + flex-direction: column; + } + + #main > article, #main > nav, #main > aside { + /* Return them to document order */ + -webkit-order: 0; + order: 0; + } + + #main > nav, #main > aside, header, footer { + min-height: 50px; + max-height: 50px; + } + } + + </style> + </head> + <body> + <header>header</header> + <div id='main'> + <article>article</article> + <nav>nav</nav> + <aside>aside</aside> + </div> + <footer>footer</footer> + </body> +</html></pre> + +<h2 id="Playground_(Spielwiese)">Playground (Spielwiese)</h2> + +<p>Es gibt verschiedene, online verfügbare Spielwiesen im Internet zum Experimentieren:</p> + +<ul> + <li><a href="http://demo.agektmr.com/flexbox/">Flexbox Playground</a></li> + <li><a href="http://the-echoplex.net/flexyboxes">Flexy Boxes</a></li> +</ul> + +<h2 id="Things_to_keep_in_mind">Things to keep in mind</h2> + +<p>The algorithm describing how flex items are laid out can be pretty tricky at times. Here are a few things to consider to avoid bad surprises when designing using flexible boxes.</p> + +<p>Flexible boxes are laid out in conformance of the <a href="https://developer.mozilla.org/en-US/docs/CSS/writing-mode">writing mode</a>, which means that <strong>main start</strong> and <strong>main end</strong> are laid out according to the position of <strong>start</strong> and <strong>end</strong>.</p> + +<p><strong>cross start</strong> and <strong>cross end</strong> rely on the definition of the <strong>start</strong> or <strong>before</strong> position that depends on the value of <a href="/en-US/docs/Web/CSS/direction"><code>direction</code></a>.</p> + +<p>Page breaks are possible in flexible boxes layout as long as <code>break-</code> property allows it. CSS3 <code>break-after</code>, <code>break-before</code>, and <code>break-inside</code> as well as CSS 2.1 <code>page-break-before</code>, <code>page-break-after</code>, and <code>page-break-inside</code> properties are accepted on a flex container, flex items, and inside flex items.</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support (single-line flexbox)</td> + <td>{{CompatGeckoDesktop("18.0")}}{{property_prefix("-moz")}}<sup>[2]</sup><br> + {{CompatGeckoDesktop("22.0")}}</td> + <td>21.0{{property_prefix("-webkit")}}<br> + 29.0</td> + <td>11<sup>[3]</sup></td> + <td>12.10{{property_prefix("-webkit")}}<sup>[5]</sup></td> + <td>6.1{{property_prefix("-webkit")}}<sup>[1]</sup></td> + </tr> + <tr> + <td>Multi-line flexbox</td> + <td>{{CompatGeckoDesktop("28.0")}}</td> + <td>21.0{{property_prefix("-webkit")}}<br> + 29.0</td> + <td>11<sup>[3]</sup></td> + <td>12.10<sup>[5]</sup><br> + 15 {{property_prefix("-webkit")}}</td> + <td>6.1{{property_prefix("-webkit")}}<sup>[1]</sup></td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>Android</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support (single-line flexbox)</td> + <td>{{CompatGeckoMobile("18.0")}}{{property_prefix("-moz")}}<sup>[2]</sup><br> + {{CompatGeckoMobile("22.0")}}</td> + <td> + <p>1.0{{property_prefix("-moz")}}<sup>[2]</sup><br> + 1.1</p> + </td> + <td>2.1{{property_prefix("-webkit")}}<sup>[4]</sup><br> + 4.4</td> + <td>11</td> + <td>12.10<sup>[5]</sup><br> + 15{{property_prefix("-webkit")}}</td> + <td>7{{property_prefix("-webkit")}}<sup>[1]</sup></td> + </tr> + <tr> + <td>Multi-line flexbox</td> + <td>{{CompatGeckoMobile("28.0")}}</td> + <td>1.3</td> + <td>2.1{{property_prefix("-webkit")}}<sup>[4]</sup><br> + 4.4</td> + <td>11</td> + <td>12.10<sup>[5]</sup><br> + 15{{property_prefix("-webkit")}}</td> + <td>7{{property_prefix("-webkit")}}<sup>[1]</sup></td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Safari up to 6.0 ( 6.1 for iOS ) supported an old incompatible draft version of the specification. Safari 6.1( 7 for iOS ) has been updated to support the final version.</p> + +<p>[2] Up to Firefox 22, to activate flexbox support, the user has to change the <code>about:config</code> preference <code>layout.css.flexbox.enabled</code> to <code>true</code>. From Firefox 22 to Firefox 27, the preference is <code>true</code> by default, but the preference has been removed in Firefox 28.</p> + +<p>[3] Internet Explorer 10 supports an old incompatible draft version of the specification; Internet Explorer 11 <a href="http://msdn.microsoft.com/en-us/library/ie/dn265027%28v=vs.85%29.aspx">has been updated</a> to support the final version.</p> + +<p>[4] Android browser up to 4.3 supported an old incompatible draft version of the specification. Android 4.4 has been updated to support the final version.</p> + +<p>[5] While in the initial implementation in Opera 12.10 flexbox was not prefixed, it got prefixed in versions 15 to 16 of Opera and 15 to 19 of Opera Mobile with {{property_prefix("-webkit")}}. The prefix was removed again in Opera 17 and Opera Mobile 24.</p> + +<h3 id="See_also">See also</h3> + +<ul> + <li><a href="https://github.com/philipwalton/flexbugs">The Flexbugs project</a> for information on bugs in browsers' implementations of flexbox.</li> +</ul> diff --git a/files/de/web/css/css_fonts/index.html b/files/de/web/css/css_fonts/index.html new file mode 100644 index 0000000000..2d5b16fa9f --- /dev/null +++ b/files/de/web/css/css_fonts/index.html @@ -0,0 +1,145 @@ +--- +title: CSS Fonts +slug: Web/CSS/CSS_Fonts +tags: + - CSS + - CSS Fonts + - Referenz + - Übersicht +translation_of: Web/CSS/CSS_Fonts +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS Fonts</strong> ist ein CSS Modul, das schriftbezogene Eigenschaften definiert und wie Schriftressourcen geladen werden. Es erlaubt, den Stil einer Schrift, wie deren Schriftart, -größe und -dicke zu bestimmen als auch die Variante der verwendeten Glyphe für eine Schriftart, die mehrere Glyphen für ein Schriftzeichen bereitstellt. Es erlaubt außerdem, die Höhe einer Zeile zu definieren.</p> + +<h2 id="Referenz">Referenz</h2> + +<h3 id="Eigenschaften">Eigenschaften</h3> + +<div class="index"> +<ul> + <li>{{cssxref("font")}}</li> + <li>{{cssxref("font-family")}}</li> + <li>{{cssxref("font-feature-settings")}}</li> + <li>{{cssxref("font-kerning")}}</li> + <li>{{cssxref("font-language-override")}}</li> + <li>{{cssxref("font-size")}}</li> + <li>{{cssxref("font-size-adjust")}}</li> + <li>{{cssxref("font-stretch")}}</li> + <li>{{cssxref("font-style")}}</li> + <li>{{cssxref("font-synthesis")}}</li> + <li>{{cssxref("font-variant")}}</li> + <li>{{cssxref("font-variant-alternates")}}</li> + <li>{{cssxref("font-variant-caps")}}</li> + <li>{{cssxref("font-variant-east-asian")}}</li> + <li>{{cssxref("font-variant-ligatures")}}</li> + <li>{{cssxref("font-variant-numeric")}}</li> + <li>{{cssxref("font-variant-position")}}</li> + <li>{{cssxref("font-weight")}}</li> + <li>{{cssxref("line-height")}}</li> +</ul> +</div> + +<h3 id="-Regeln">@-Regeln</h3> + +<dl> + <dt>{{cssxref("@font-face")}}</dt> + <dd> + <div class="index"> + <ul> + <li>{{cssxref("@font-face/font-family", "font-family")}}</li> + <li>{{cssxref("@font-face/font-feature-settings", "font-feature-settings")}}</li> + <li>{{cssxref("@font-face/font-style", "font-style")}}</li> + <li>{{cssxref("@font-face/font-variant", "font-variant")}}</li> + <li>{{cssxref("@font-face/font-weight", "font-weight")}}</li> + <li>{{cssxref("@font-face/font-stretch", "font-stretch")}}</li> + <li>{{cssxref("@font-face/src", "src")}}</li> + <li>{{cssxref("@font-face/unicode-range", "unicode-range")}}</li> + </ul> + </div> + </dd> + <dt>{{cssxref("@font-feature-values")}}</dt> +</dl> + +<h2 id="Anleitungen">Anleitungen</h2> + +<p><em>Keine.</em></p> + +<h2 id="Spezifikationen">Spezifikationen</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 Fonts')}}</td> + <td>{{Spec2('CSS3 Fonts')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'fonts.html#font-shorthand', '')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#font', '')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>1.0</td> + <td>1.0 (1.0)</td> + <td>3.0</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/de/web/css/css_generated_content/index.html b/files/de/web/css/css_generated_content/index.html new file mode 100644 index 0000000000..8541394b39 --- /dev/null +++ b/files/de/web/css/css_generated_content/index.html @@ -0,0 +1,61 @@ +--- +title: CSS Generated Content +slug: Web/CSS/CSS_Generated_Content +tags: + - CSS + - CSS Generated Content + - CSS Referenz + - Übersicht +translation_of: Web/CSS/CSS_Generated_Content +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS Generated Content</strong> ist ein CSS Modul, das definiert, wie Inhalte zu einem Element hinzugefügt werden.</p> + +<h2 id="Referenz">Referenz</h2> + +<h3 id="Eigenschaften">Eigenschaften</h3> + +<div class="index"> +<ul> + <li>{{cssxref("content")}}</li> + <li>{{cssxref("quotes")}}</li> +</ul> +</div> + +<h2 id="Anleitungen">Anleitungen</h2> + +<p><em>Keine.</em></p> + +<h2 id="Spezifikationen">Spezifikationen</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('CSS2.1')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<h3 id="content"><code>content</code></h3> + +<p> </p> + +<p>{{Compat("css.properties.content")}}</p> + +<h3 id="quotes"><code>quotes</code></h3> + +<p>{{Compat("css.properties.quotes")}}</p> + +<p> </p> diff --git a/files/de/web/css/css_grid_layout/index.html b/files/de/web/css/css_grid_layout/index.html new file mode 100644 index 0000000000..d5e810da8e --- /dev/null +++ b/files/de/web/css/css_grid_layout/index.html @@ -0,0 +1,252 @@ +--- +title: CSS Grid Layout +slug: Web/CSS/CSS_Grid_Layout +tags: + - CSS + - Grid Layout + - Grids + - Layout + - NeedsTranslation + - Raster + - Referenz + - Überblick +translation_of: Web/CSS/CSS_Grid_Layout +--- +<p><strong>CSS Grid Layout</strong> zeichnet sich dadurch aus, dass eine Seite in Hauptbereiche unterteilt wird oder die Beziehung zwischen Teilen eines Steuerelements, das aus HTML-Grundelementen besteht, in Bezug auf Größe, Position und Layer definiert wird.</p> + +<p>Grid Layout ermöglicht es, Elemente in Spalten und Reihen auszurichten, ähnlich wie in Tabellen. Jedoch gibt es viel mehr Gestaltungsmöglichkeiten und diese sind einfacher umzusetzen mit CSS Grid als es mit Tabellen der Fall war. Beispielsweise kann das Kindelement eines Grid-Container-Elements so positioniert werden, dass es andere überlappt und überlagert, ähnlich wie bei mit CSS positionierten Elementen.</p> + +<h2 id="Basic_Example" name="Basic_Example">Einfaches Beispiel</h2> + +<p>Das folgende Beispiel zeigt ein dreispaltiges Raster mit neuen Zeilen, die mit mindestens 100 Pixeln und einem Maximum von auto erstellt wurden. Die Elemente wurden mithilfe von zeilenbasierten Platzierungen im Raster positioniert.</p> + +<div id="example"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} +.wrapper { + max-width: 940px; + margin: 0 auto; +} + +.wrapper > div { + border: 2px solid rgb(233,171,88); + border-radius: 5px; + background-color: rgba(233,171,88,.5); + padding: 1em; + color: #d9480f; +}</pre> +</div> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div class="wrapper"> + <div class="one">One</div> + <div class="two">Two</div> + <div class="three">Three</div> + <div class="four">Four</div> + <div class="five">Five</div> + <div class="six">Six</div> +</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 10px; + grid-auto-rows: minmax(100px, auto); +} +.one { + grid-column: 1 / 3; + grid-row: 1; +} +.two { + grid-column: 2 / 4; + grid-row: 1 / 3; +} +.three { + grid-column: 1; + grid-row: 2 / 5; +} +.four { + grid-column: 3; + grid-row: 3; +} +.five { + grid-column: 2; + grid-row: 4; +} +.six { + grid-column: 3; + grid-row: 4; +} +</pre> + +<p>{{ EmbedLiveSample('example', '500', '440') }}</p> +</div> + +<h2 id="Referenz">Referenz</h2> + +<h3 id="CSS_Eigenschaften">CSS Eigenschaften</h3> + +<div class="index"> +<ul> + <li>{{cssxref("grid-template-columns")}}</li> + <li>{{cssxref("grid-template-rows")}}</li> + <li>{{cssxref("grid-template-areas")}}</li> + <li>{{cssxref("grid-template")}}</li> + <li>{{cssxref("grid-auto-columns")}}</li> + <li>{{cssxref("grid-auto-rows")}}</li> + <li>{{cssxref("grid-auto-flow")}}</li> + <li>{{cssxref("grid")}}</li> + <li>{{cssxref("grid-row-start")}}</li> + <li>{{cssxref("grid-column-start")}}</li> + <li>{{cssxref("grid-row-end")}}</li> + <li>{{cssxref("grid-column-end")}}</li> + <li>{{cssxref("grid-row")}}</li> + <li>{{cssxref("grid-column")}}</li> + <li>{{cssxref("grid-area")}}</li> + <li>{{cssxref("grid-row-gap")}}</li> + <li>{{cssxref("grid-column-gap")}}</li> + <li>{{cssxref("grid-gap")}}</li> +</ul> +</div> + +<h3 id="CSS_Funktionen">CSS Funktionen</h3> + +<div class="index"> +<ul> + <li>{{cssxref("repeat", "repeat()")}}</li> + <li>{{cssxref("minmax", "minmax()")}}</li> + <li>{{cssxref("fit-content", "fit-content()")}}</li> +</ul> +</div> + +<h3 id="CSS_Datentypen">CSS Datentypen</h3> + +<div class="index"> +<ul> + <li>{{cssxref("<flex>")}}</li> +</ul> +</div> + +<h3 id="Glossar_Einträge">Glossar Einträge</h3> + +<div class="index"> +<ul> + <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Lines">Grid Lines</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Tracks">Grid Tracks</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Cell">Grid Cell</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Areas">Grid Area</a></li> + <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Rows">Grid row</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Column">Grid column</a></li> +</ul> +</div> + +<h2 id="Anleitungen">Anleitungen</h2> + +<div class="index"> +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basic concepts of Grid Layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship of Grid Layout to other layout methods</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Layout using line-based placement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in CSS Grid Layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in CSS Grid Layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">CSS Grid, Logical Values and Writing Modes</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and accessibility</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid and progressive enhancement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realising_common_layouts_using_CSS_Grid_">Realising common layouts using CSS Grid</a></li> +</ul> +</div> + +<h2 id="Externe_Quellen">Externe Quellen</h2> + +<ul> + <li><a href="http://labs.jensimmons.com/">Beispiele von Jen Simmons</a></li> + <li><a href="http://gridbyexample.com/">Grid by Example - eine Sammlung von Anwendungsbeispielen und Video-Tutorials</a></li> + <li><a href="https://tympanus.net/codrops/css_reference/grid/">Codrops Grid Referenz</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox DevTools CSS Grid Inspector</a></li> + <li><a href="https://mozilladevelopers.github.io/playground/">CSS Grid Playground</a></li> +</ul> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Bemerkung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Grid') }}</td> + <td>{{ Spec2('CSS3 Grid') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<section class="Quick_links" id="Quick_Links"> +<ol> + <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li> + <li data-default-state="open"><a href="#"><strong>Guides</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Properties</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Glossary</strong></a> + <ol> + <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li> + <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li> + <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li> + <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li> + <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li> + <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li> + <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li> + <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li> + </ol> + </li> +</ol> +</section> diff --git a/files/de/web/css/css_images/implementing_image_sprites_in_css/index.html b/files/de/web/css/css_images/implementing_image_sprites_in_css/index.html new file mode 100644 index 0000000000..5551a4a59e --- /dev/null +++ b/files/de/web/css/css_images/implementing_image_sprites_in_css/index.html @@ -0,0 +1,50 @@ +--- +title: Implementing image sprites in CSS +slug: Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS +tags: + - Anleitung + - CSS + - CSS Bilder + - Fortgeschrittene + - Grafik + - NeedsContent + - Sprites + - Web +translation_of: Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS +--- +<div>{{APIRef}}</div> + +<p>Image Sprites werden in zahlreichen Webanwendungen verwendet, wo mehrere Bilder verwendet werden. Statt jedes Bild als eine eigene Bilddatei einzubinden, ist es wesentlich speicher- und bandbreitenfreundlicher, sie als ein einzelnes Bild zu schicken, um die Anzahl an HTTP Anfragen zu verringern.</p> + +<h2 id="Implementierung">Implementierung</h2> + +<p>Angenommen, jedem Element mit der Klasse <code>toolbtn</code> wird ein Bild zugewiesen:</p> + +<pre class="brush:css">.toolbtn { + background: url(myfile.png); + display: inline-block; + height: 20px; + width: 20px; +}</pre> + +<p>Eine Hintergrundposition kann entweder über zwei x- und y-Werte nach der {{cssxref("url()")}} dem Hintergrund hinzugefügt werden oder als {{cssxref("background-position")}}. Als Beispiel:</p> + +<pre class="brush:css">#btn1 { + background-position: -20px 0px; +} + +#btn2 { + background-position: -40px 0px; +}</pre> + +<p>Dies verschiebt das Element mit der ID 'btn1' um 20 Pixel nach links und das Element mit der ID 'btn2' um 40 Pixel nach links (unter Annahme, dass diesen die Klasse <code>toolbtn</code> zugewiesen wurde und durch die obere CSS Regel beeinflusst werden).</p> + +<p>Ebenso können Hover-Status erstellt werden mit:</p> + +<pre class="brush:css">#btn:hover { + background-position: <var><nach rechts verschobene Pixel></var>px <var><nach unten verschobene Pixel></var>px; +}</pre> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<p><a href="http://css-tricks.com/snippets/css/perfect-css-sprite-sliding-doors-button/">Voll funktionsfähige Demo bei CSS Tricks</a></p> diff --git a/files/de/web/css/css_images/index.html b/files/de/web/css/css_images/index.html new file mode 100644 index 0000000000..b34532bf2c --- /dev/null +++ b/files/de/web/css/css_images/index.html @@ -0,0 +1,145 @@ +--- +title: CSS Bilder +slug: Web/CSS/CSS_Images +tags: + - CSS + - CSS Bilder + - CSS Referenz + - Übersicht +translation_of: Web/CSS/CSS_Images +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS Images</strong> ist ein CSS Modul, das definiert, welche Typen von Bildern verwendet werden können (der {{cssxref("<image>")}} Typ, der URLs, Farbverläufe und andere Arten von Bildern beinhaltet), wie diese in der Größe geändert werden und wie sie und andere ersetzte Inhalte mit den verschiedenen Layoutmodellen interagieren.</p> + +<h2 id="Referenz">Referenz</h2> + +<h3 id="Eigenschaften">Eigenschaften</h3> + +<div class="index"> +<ul> + <li>{{cssxref("image-orientation")}}</li> + <li>{{cssxref("image-rendering")}}</li> + <li>{{cssxref("object-fit")}}</li> + <li>{{cssxref("object-position")}}</li> +</ul> +</div> + +<h3 id="Funktionen">Funktionen</h3> + +<div class="index"> +<ul> + <li>{{cssxref("linear-gradient", "linear-gradient()")}}</li> + <li>{{cssxref("radial-gradient", "radial-gradient()")}}</li> + <li>{{cssxref("repeating-linear-gradient", "repeating-linear-gradient()")}}</li> + <li>{{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}}</li> + <li>{{cssxref("element", "element()")}}</li> +</ul> +</div> + +<h3 id="Datentypen">Datentypen</h3> + +<div class="index"> +<ul> + <li>{{cssxref("<image>")}}</li> + <li>{{cssxref("<uri>")}}</li> +</ul> +</div> + +<h2 id="Anleitungen">Anleitungen</h2> + +<dl> + <dt><a href="/de/docs/Farbverläufe_in_CSS">CSS Farbverläufe verwenden</a></dt> + <dd>Beschreibt einen bestimmten Typ von CSS Bildern, Farbverläufe, und wie diese erstellt und verwendet werden.</dd> + <dt><a href="/de/docs/Web/CSS/CSS_Images/Implementierung_von_Bildsprites_in_CSS">Implementierung von Bildsprites in CSS</a></dt> + <dd>Beschreibt die geläufige Methode, mehrere Bilder in einem einzigen Dokument zu gruppieren, um Downloadanfragen zu sparen und die Verfügbarkeit einer Seite zu beschleunigen.</dd> +</dl> + +<h2 id="Spezifikationen">Spezifikationen</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('CSS4 Images')}}</td> + <td>{{Spec2('CSS4 Images')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS3 Images')}}</td> + <td>{{Spec2('CSS3 Images')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS3 Values', '#urls', '<url>')}}</td> + <td>{{Spec2('CSS3 Values')}}</td> + <td> </td> + </tr> + <tr> + <td>{{Specname('CSS2.1', 'syndata.html#uri', '<uri>')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#url', '<url>')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>1.0</td> + <td>{{CompatGeckoMobile("1")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/de/web/css/css_lists_and_counters/css_zähler_verwenden/index.html b/files/de/web/css/css_lists_and_counters/css_zähler_verwenden/index.html new file mode 100644 index 0000000000..252f90b530 --- /dev/null +++ b/files/de/web/css/css_lists_and_counters/css_zähler_verwenden/index.html @@ -0,0 +1,126 @@ +--- +title: CSS Zähler verwenden +slug: Web/CSS/CSS_Lists_and_Counters/CSS_Zähler_verwenden +tags: + - Anleitung + - CSS + - CSS Listen + - CSS Wert + - Fortgeschrittene + - Layout + - Referenz + - Web +translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary">CSS Zähler sind im Grunde von CSS verwaltete Variablen, deren Werte mittels CSS Regeln inkrementiert werden können, um nachzuvollziehen, wie oft sie verwendet wurden. Dies ermöglicht es, die Darstellung von Inhalten anhand der Positionierung innerhalb des Dokuments anzupassen.</span> CSS Zähler sind eine Implementierung von <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#counters">Automatic counters and numbering</a> in CSS 2.1.</p> + +<p>Der Wert eines Zählers wird durch die Verwendung von {{cssxref("counter-reset")}} geändert. {{cssxref("counter-increment")}} kann auf einer Seite durch verwenden der <code>counter()</code> oder <code>counters()</code> Funktion der {{cssxref("content")}} Eigenschaft dargestellt werden.</p> + +<h2 id="Zähler_verwenden">Zähler verwenden</h2> + +<p>Um einen CSS Zähler zu verwenden, muss er zunächst auf einen Wert zurückgesetzt werden (standardmäßig 0). Um den Wert eines Zählers zu einem Element hinzuzufügen, kann die <code>counter()</code> Funktion verwendet werden. Das folgende CSS fügt am Anfang jedes h3 Elements "Abschnitt <der Wert des Zählers>:" ein.</p> + +<pre class="brush: css">body { + counter-reset: section; /* Setzt den Abschnittszähler auf 0 */ +} + +h3::before { + counter-increment: section; /* Erhöht den Abschnittszähler */ + content: "Abschnitt " counter(section) ": "; /* Zeigt den Zähler an */ +} +</pre> + +<p>Beispiel:</p> + +<pre class="brush: html"><h3>Einführung</h3> +<h3>Inhalt</h3> +<h3>Zusammenfassung</h3></pre> + +<p>{{EmbedLiveSample("Zähler_verwenden", 280, 150)}}</p> + +<h2 id="Zähler_verschachteln">Zähler verschachteln</h2> + +<p>Ein CSS Zähler ist besonders nützlich, um kontinuierte Listen zu erstellen, da in Kindelementen automatisch eine neue Instanz eines CSS Zählers erzeugt wird. Wird die <code>counters()</code> Funktion verwendet, kann ein String zwischen verschiedenen Leveln von verschachtelten Zählern eingefügt werden. Beispielsweise dieses CSS:</p> + +<pre class="brush: css">ol { + counter-reset: section; /* Erstellt mit jedem ol Element + eine neue Instanz des + Abschnittszählers. */ + list-style-type: none; +} + +li::before { + counter-increment: section; /* Inkrementiert nur diese Instanz + des Abschnittszählers. */ + content: counters(section,".") " "; /* Fügt den Wert aller Instanzen + des Abschnittszählers durch "." + getrennt hinzu. */ + /* Falls < IE8 unterstützt werden soll, + sollte sichergestellt werden, dass + kein Leerzeichen nach dem ',' steht. */ +} +</pre> + +<p>Kombiniert mit dem folgenden HTML:</p> + +<pre class="brush: html"><ol> + <li>Eintrag</li> <!-- 1 --> + <li>Eintrag <!-- 2 --> + <ol> + <li>Eintrag</li> <!-- 2.1 --> + <li>Eintrag</li> <!-- 2.2 --> + <li>Eintrag <!-- 2.3 --> + <ol> + <li>Eintrag</li> <!-- 2.3.1 --> + <li>Eintrag</li> <!-- 2.3.2 --> + </ol> + <ol> + <li>Eintrag</li> <!-- 2.3.1 --> + <li>Eintrag</li> <!-- 2.3.2 --> + <li>Eintrag</li> <!-- 2.3.3 --> + </ol> + </li> + <li>Eintrag</li> <!-- 2.4 --> + </ol> + </li> + <li>Eintrag</li> <!-- 3 --> + <li>Eintrag</li> <!-- 4 --> +</ol> +<ol> + <li>Eintrag</li> <!-- 1 --> + <li>Eintrag</li> <!-- 2 --> +</ol></pre> + +<p>Erzeugt dieses Ergebnis:</p> + +<p>{{EmbedLiveSample("Zähler_verschachteln", 250, 350)}}</p> + +<h2 id="Spezifikationen">Spezifikationen</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("CSS2.1", "generate.html#generate.html#counters", "counter-reset")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{cssxref("counter-reset")}}</li> + <li>{{cssxref("counter-increment")}}</li> +</ul> + +<p><em>Es gibt ein zusätzliches Beispiel unter <a class="external" href="http://www.mezzoblue.com/archives/2006/11/01/counter_intu/" rel="freelink">http://www.mezzoblue.com/archives/20.../counter_intu/</a>. Dieser Blogeintrag wurde am 01.11.2006 veröffentlicht, sollte jedoch noch zutreffen.</em></p> diff --git a/files/de/web/css/css_lists_and_counters/index.html b/files/de/web/css/css_lists_and_counters/index.html new file mode 100644 index 0000000000..e616ac7735 --- /dev/null +++ b/files/de/web/css/css_lists_and_counters/index.html @@ -0,0 +1,132 @@ +--- +title: CSS Lists and Counters +slug: Web/CSS/CSS_Lists_and_Counters +tags: + - CSS + - CSS Listen und Zähler + - CSS Referenz + - Übersicht +translation_of: Web/CSS/CSS_Lists_and_Counters +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS Lists and Counters</strong> ist ein CSS Modul, das definiert, wie Listen dargestellt werden, wie Aufzählungspunkte gestylt werden können und wie Autoren neue Zähler erstellen können.</p> + +<h2 id="Referenz">Referenz</h2> + +<h3 id="Eigenschaften">Eigenschaften</h3> + +<div class="index"> +<ul> + <li>{{cssxref("list-style-image")}}</li> + <li>{{cssxref("list-style-type")}}</li> + <li>{{cssxref("list-style-position")}}</li> + <li>{{cssxref("list-style")}}</li> + <li>{{cssxref("counter-reset")}}</li> + <li>{{cssxref("counter-increment")}}</li> +</ul> +</div> + +<h3 id="-Regeln">@-Regeln</h3> + +<dl> + <dt>{{cssxref("@counter-style")}}</dt> + <dd> + <div class="index"> + <ul> + <li>{{cssxref("@counter-style/system","system")}}</li> + <li>{{cssxref("@counter-style/additive-symbols", "additive-symbols")}}</li> + <li>{{cssxref("@counter-style/negative", "negative")}}</li> + <li>{{cssxref("@counter-style/prefix", "prefix")}}</li> + <li>{{cssxref("@counter-style/suffix", "suffix")}}</li> + <li>{{cssxref("@counter-style/range", "range")}}</li> + <li>{{cssxref("@counter-style/pad", "pad")}}</li> + <li>{{cssxref("@counter-style/speak-as", "speak-as")}}</li> + <li>{{cssxref("@counter-style/fallback", "fallback")}}</li> + </ul> + </div> + </dd> +</dl> + +<h2 id="Anleitungen">Anleitungen</h2> + +<dl> + <dt><a href="/de/docs/Web/CSS/CSS_Lists_and_Counters/Konsistente_Listeneinrückung">Konsistente Listeneinrückung</a></dt> + <dd>Erklärt, wie eine konsistente Einrückung zwischen verschiedenen Browsern erreicht werden kann.</dd> + <dt><a href="/de/docs/Web/CSS/CSS_Lists_and_Counters/CSS_Zähler_verwenden">CSS Zähler verwenden</a></dt> + <dd>Beschreibt, wie Zähler verwendet werden, um Aufzählungen außerhalb der traditionellen Listenelemente verwenden zu können oder um komplexe Zählungen durchzuführen.</dd> +</dl> + +<h2 id="Spezifikationen">Spezifikationen</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 Lists')}}</td> + <td>{{Spec2('CSS3 Lists')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'generate.html')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>1.0</td> + <td>{{CompatGeckoMobile("1")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/de/web/css/css_lists_and_counters/konsistente_listeneinrückung/index.html b/files/de/web/css/css_lists_and_counters/konsistente_listeneinrückung/index.html new file mode 100644 index 0000000000..b2309f5e82 --- /dev/null +++ b/files/de/web/css/css_lists_and_counters/konsistente_listeneinrückung/index.html @@ -0,0 +1,104 @@ +--- +title: Konsistente Listeneinrückung +slug: Web/CSS/CSS_Lists_and_Counters/Konsistente_Listeneinrückung +tags: + - Anleitung + - CSS + - Intermediate + - NeedsUpdate +translation_of: Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary">Eine der häufigsten Stiländerungen, die auf Listen angewendet werden, ist eine Änderung der Einrückungsweite — d. h. wie weit die Listeneinträge nach rechts verschoben sind.</span> Dies führt oft zu Frustration, da das, was in einem Browser funktioniert, in einem anderen oft nicht denselben Effekt hat. Wenn zum Beispiel angegeben wird, dass Listen keinen linken Außenabstand haben, verschieben sie sich im Internet Explorer, bleiben jedoch hartnäckig am selben Platz in Gecko-basierten Browsern. <span class="seoSummary">Dieser Artikel hilft, die Probleme zu verstehen, die auftreten können, und wie man diese verhindert.</span></p> + +<p>Um zu verstehen, warum dies der Fall ist, und noch wichtiger, wie das Problem generell vermieden werden kann, ist es notwendig, die Details der Listenerstellung zu untersuchen.</p> + +<h2 id="Eine_Liste_erstellen">Eine Liste erstellen</h2> + +<p>Zunächst betrachten wir einen einzelnen Listeneintrag. Dieser Listeneintrag hat kein Aufzählungszeichen (auch bekannt als "Bullet") und ist noch nicht Teil einer Liste. Er hängt allein in der Leere, schlicht und einfach, wie in Abbildung 1 gezeigt.</p> + +<p><img alt="Abbildung 1" class="internal" src="/@api/deki/files/619/=Consistent-list-indentation-figure1.gif"></p> + +<p>Der gepunktete rote Rahmen repräsentiert die äußeren Ränder des Inhaltsbereichs des Listeneintrags. Erinnere dich, dass der Listeneintrag zu diesem Zeitpunkt weder einen Innenabstand noch Ränder besitzt. Falls wir zwei oder mehr Listeneinträge hinzufügen, erhalten wir als Ergebnis etwas wie in Abbildung 2.</p> + +<p><img alt="Abbildung 2" class="internal" src="/@api/deki/files/620/=Consistent-list-indentation-figure2.gif"></p> + +<p>Jetzt umschließen wir diese durch ein Elternelement; in diesem Fall, umschließen wir sie durch eine ungeordnete Liste (d. h. <code><ul></code>). Laut dem CSS Boxmodell müssen die Boxen von Listeneinträgen innerhalb des Inhaltsbereichs des Elternelements dargestellt werden. Da das Elternelement aktuell weder Innen- noch Außenabstände hat, erhalten wir als Ergebnis das in Abbildung 3 Gezeigte.</p> + +<p><img alt="Abbildung 3" class="internal" src="/@api/deki/files/621/=Consistent-list-indentation-figure3.gif"></p> + +<p>Hier zeigt uns der gepunktete blaue Rahmen die Ränder des Inhaltsbereichs des <code><ul></code> Elements. Da wir keinen Innenabstand für das <code><ul></code> Element haben, umschließt sein Inhalt die drei Listeneinträge passend.</p> + +<p>Nun fügen wir Listenaufzählungszeichen hinzu. Da es sich hierbei um eine ungeordnete Liste handelt, fügen wir gewöhnliche gefüllte Kreis-"Bullets" hinzu, wie in Abbildung 4 dargestellt.</p> + +<p><img alt="Abbildung 4" class="internal" src="/@api/deki/files/622/=Consistent-list-indentation-figure4.gif"></p> + +<p>Visuell sind die Aufzählungszeichen <em>außerhalb</em> des Inhaltsbereichs des <code><ul></code>, jedoch spielt dies hier keine Rolle. Der Hauptpunkt ist, dass die Aufzählungszeichen außerhalb der "Hauptbox" des <code><li></code> Elements platziert sind, nicht des <code><ul></code>. Sie sind sozusagen Anhängsel der Listeneinträge, die außerhalb des Inhaltsbereichs des <code><li></code> liegen, jedoch trotzdem am <code><li></code> hängen.</p> + +<p>Dies ist der Grund, warum in allen Browsern außer dem Internet Explorer für Windows die Aufzählungszeichen außerhalb der Rahmen eines <code><li></code> Elements liegen, vorausgesetzt, der Wert von <code>list-style-position</code> ist <code>outside</code>. Falls er zu <code>inside</code> geändert wird, werden die Aufzählungszeichen innerhalb des Inhalts des <code><li></code>s gezogen, obwohl sie eine Inlinebox sind, die am Anfang des <code><li></code> platziert ist.</p> + +<h2 id="Doppelt_einrücken">Doppelt einrücken</h2> + +<p>Wie wird all dies nun im Dokument dargestellt? Im Moment haben wir eine Situation analog zu diesen Stilen:</p> + +<pre class="brush:css">ul, li {margin-left: 0; padding-left: 0;}</pre> + +<p>Falls diese Liste so wie sie ist in ein Dokument eingebunden würde, gäbe es keine sichtbare Einrückung und die Aufzählungszeichen liefen Gefahr, am linken Rand des Browserfensters herauszufallen.</p> + +<p>Um dies zu vermeiden und eine Einrückung zu erhalten, gibt es nur drei Möglichkeiten für Browserhersteller.</p> + +<ol> + <li>Gib jedem <code><li></code> Element einen linken Außenabstand.</li> + <li>Gib dem <code><ul></code> Element einen linken Außenabstand.</li> + <li>Gib dem <code><ul></code> Element einen linken Innenabstand.</li> +</ol> + +<p>Wie sich herausstellt, hat niemand auf die erste Option zurückgegriffen. Die zweite Option wurde von Internet Explorer für Windows und Macintosh und Opera gewählt. Die dritte wird von Gecko und allen darauf basierenden Browsern verwendet.</p> + +<p>Lass uns die beiden Herangehensweisen genauer betrachten. Im Internet Explorer und Opera werden die Listen durch das Setzen eines linken Außenabstands von 40 Pixeln für das <code><ul></code> Element gesetzt. Falls wir dem <code><ul></code> Element eine Hintergrundfarbe zuweisen und die Rahmen der Listeneinträge und <code><ul></code> unverändert lassen, erhalten wir das Ergebnis, das in Abbildung 5 gezeigt wird.</p> + +<p><img alt="Abbildung 5" class="internal" src="/@api/deki/files/623/=Consistent-list-indentation-figure5.gif"></p> + +<p>Im Gegensatz dazu setzt Gecko einen linken <em>Innenabstand</em> von 40 Pixeln für das <code><ul></code> Element. Werden die exakt gleichen Stile benutzt, die zur Erzeugung von Abbildung 5 verwendet wurden, erhalten wir beim Laden des Beispiels in Gecko-basierten Browsern Abbildung 6.</p> + +<p><img alt="Abbildung 6" class="internal" src="/@api/deki/files/624/=Consistent-list-indentation-figure6.gif"></p> + +<p>Wie wir sehen können, bleiben die Aufzählungszeichen an den <code><li></code> Elementen hängen, unabhängig davon, wo sie sind. Der Unterschied liegt ausschließlich in der Darstellung des <code><ul></code>. Wir können den Unterschied nur sehen, wenn wir versuchen, einen Hintergrund oder einen Rahmen für das <code><ul></code> Element zu setzen.</p> + +<h2 id="Konsistenz_finden">Konsistenz finden</h2> + +<p>Zusammenfassend kann man sagen: Falls eine konsistente Darstellung von Listen zwischen Gecko, Internet Explorer und Opera gewünscht ist, müssen <strong>beide</strong> linken Abstände des <code><ul></code> Elements gesetzt werden, Innen- und Außenabstand. Wir können <code><li></code> für diesen Zweck komplett ignorieren. Zur Erstellung der Standardanzeige in Netscape 6.x schreibt man folgendes:</p> + +<pre class="brush:css">ul {margin-left: 0; padding-left: 40px;}</pre> + +<p>Falls lieber das Internet Explorer/Opera Modell gewünscht ist, dann:</p> + +<pre class="brush:css">ul {margin-left: 40px; padding-left: 0;}</pre> + +<p>Natürlich können die eigenen bevorzugten Werte angegeben werden. Wenn gewünscht, können beide auf <code>1.25em</code> gesetzt werden -- es gibt keinen Grund, bei pixelbasierter Einrückung zu bleiben. Falls Listen zurückgesetzt werden sollen, sodass sie keine Einrückung haben, müssen sowohl Innen- als auch Außenabstand auf null gesetzt werden:</p> + +<pre class="brush:css">ul {margin-left: 0; padding-left: 0;}</pre> + +<p>Beachte hierbei jedoch, dass dadurch die Bullets außerhalb der Liste und deren Elternelement hängen. Falls das Elternelement das <code>body</code> Element ist, sind die Bullets höchstwahrscheinlich außerhalb des Browserfensters, und sind daher nicht sichtbar.</p> + +<h2 id="Zusammenfassung">Zusammenfassung</h2> + +<p>Am Ende sehen wir, dass keiner der in diesem Artikel genannten Browser Listen richtig oder falsch darstellt. Sie verwenden verschiedene Standardstile und dadurch entstehen die Probleme. Wenn sichergestellt wird, dass sowohl linker Innen- als auch Außenabstand gesetzt sind, kann wesentlich größere browserübergreifende Konsistenz bei der Einrückung von Listen erzielt werden.</p> + +<h2 id="Empfehlungen">Empfehlungen</h2> + +<ul> + <li>Wenn die Einrückung von Listen geändert werden soll, stelle sicher, dass Innen- und Außenabstand gesetzt sind.</li> +</ul> + +<div class="originaldocinfo"> +<h2 id="Originaldokumentinformation">Originaldokumentinformation</h2> + +<ul> + <li>Autor(en): Eric A. Meyer, Netscape Communications</li> + <li>Zuletzt aktualisiert: Published 30 Aug 2002</li> + <li>Copyright Information: Copyright © 2001-2003 Netscape. Alle Rechte vorbehalten.</li> + <li>Hinweis: Dieser nachgedruckte Artikel war ursprünglich Teil der DevEdge Seite.</li> +</ul> +</div> diff --git a/files/de/web/css/css_logical_properties/index.html b/files/de/web/css/css_logical_properties/index.html new file mode 100644 index 0000000000..108ab187ac --- /dev/null +++ b/files/de/web/css/css_logical_properties/index.html @@ -0,0 +1,129 @@ +--- +title: CSS Logical Properties +slug: Web/CSS/CSS_Logical_Properties +tags: + - CSS + - CSS Logische Eigenschaften + - Referenz + - Übersicht +translation_of: Web/CSS/CSS_Logical_Properties +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS Logical Properties</strong> ist ein CSS Modul, das logische Eigenschaften definiert, die auf physische Eigenschaften gemappt werden, um das Layout zu kontrollieren.</p> + +<h2 id="Referenz">Referenz</h2> + +<h3 id="Eigenschaften">Eigenschaften</h3> + +<div class="index"> +<ul> + <li>{{cssxref("block-size")}}</li> + <li>{{cssxref("border-block-end")}}</li> + <li>{{cssxref("border-block-end-color")}}</li> + <li>{{cssxref("border-block-end-style")}}</li> + <li>{{cssxref("border-block-end-width")}}</li> + <li>{{cssxref("border-block-start")}}</li> + <li>{{cssxref("border-block-start-color")}}</li> + <li>{{cssxref("border-block-start-style")}}</li> + <li>{{cssxref("border-block-start-width")}}</li> + <li>{{cssxref("border-inline-end")}}</li> + <li>{{cssxref("border-inline-end-color")}}</li> + <li>{{cssxref("border-inline-end-style")}}</li> + <li>{{cssxref("border-inline-end-width")}}</li> + <li>{{cssxref("border-inline-start")}}</li> + <li>{{cssxref("border-inline-start-color")}}</li> + <li>{{cssxref("border-inline-start-style")}}</li> + <li>{{cssxref("border-inline-start-width")}}</li> + <li>{{cssxref("inline-size")}}</li> + <li>{{cssxref("margin-block-end")}}</li> + <li>{{cssxref("margin-block-start")}}</li> + <li>{{cssxref("margin-inline-end")}}</li> + <li>{{cssxref("margin-inline-start")}}</li> + <li>{{cssxref("max-block-size")}}</li> + <li>{{cssxref("max-inline-size")}}</li> + <li>{{cssxref("min-block-size")}}</li> + <li>{{cssxref("min-inline-size")}}</li> + <li>{{cssxref("offset-block-end")}}</li> + <li>{{cssxref("offset-block-start")}}</li> + <li>{{cssxref("offset-inline-end")}}</li> + <li>{{cssxref("offset-inline-start")}}</li> + <li>{{cssxref("padding-block-end")}}</li> + <li>{{cssxref("padding-block-start")}}</li> + <li>{{cssxref("padding-inline-end")}}</li> + <li>{{cssxref("padding-inline-start")}}</li> +</ul> +</div> + +<h2 id="Anleitungen">Anleitungen</h2> + +<p><em>Keine.</em></p> + +<h2 id="Spezifikationen">Spezifikationen</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 Logical Properties')}}</td> + <td>{{Spec2('CSS Logical Properties')}}</td> + <td>Ursprüngliche Defintion</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("41.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("41.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/de/web/css/css_masken/index.html b/files/de/web/css/css_masken/index.html new file mode 100644 index 0000000000..74001bd680 --- /dev/null +++ b/files/de/web/css/css_masken/index.html @@ -0,0 +1,55 @@ +--- +title: CSS Masken +slug: Web/CSS/CSS_Masken +tags: + - CSS + - CSS Masken + - CSS Referenz + - Übersicht +translation_of: Web/CSS/CSS_Masking +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS Masken</strong> ist ein CSS Modul, das Mittel wie Maskierung und Clipping zum teilweisen oder kompletten Verstecken von Teilen visueller Elemente definiert.</p> + +<h2 id="Referenz">Referenz</h2> + +<h3 id="Eigenschaften">Eigenschaften</h3> + +<div class="index"> +<ul> + <li>{{cssxref("mask")}}</li> +</ul> +</div> + +<h2 id="Anleitungen">Anleitungen</h2> + +<p><em>Keine.</em></p> + +<h2 id="Spezifikationen">Spezifikationen</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 Masks")}}</td> + <td>{{Spec2("CSS Masks")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'masking.html#MaskProperty', 'mask')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.properties.mask")}} diff --git a/files/de/web/css/css_namensräume/index.html b/files/de/web/css/css_namensräume/index.html new file mode 100644 index 0000000000..e9d0879cb2 --- /dev/null +++ b/files/de/web/css/css_namensräume/index.html @@ -0,0 +1,51 @@ +--- +title: CSS Namensräume +slug: Web/CSS/CSS_Namensräume +tags: + - CSS + - CSS Namensräume + - Referenz + - Web + - Übersicht +translation_of: Web/CSS/CSS_Namespaces +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS Namensräume</strong> ist ein CSS Modul, das es Authoren erlaubt, <a href="/en-US/docs/Namespaces">XML Namensräume</a> in CSS anzugeben.</p> + +<h2 id="Referenz">Referenz</h2> + +<h3 id="-Regeln">@-Regeln</h3> + +<div class="index"> +<ul> + <li>{{cssxref("@namespace")}}</li> +</ul> +</div> + +<h2 id="Anleitungen">Anleitungen</h2> + +<p><em>Keine.</em></p> + +<h2 id="Spezifikationen">Spezifikationen</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 Namespaces")}}</td> + <td>{{Spec2("CSS3 Namespaces")}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.at-rules.namespace")}} diff --git a/files/de/web/css/css_positioning/index.html b/files/de/web/css/css_positioning/index.html new file mode 100644 index 0000000000..0a9020dd54 --- /dev/null +++ b/files/de/web/css/css_positioning/index.html @@ -0,0 +1,64 @@ +--- +title: CSS Positioned Layout +slug: Web/CSS/CSS_Positioning +tags: + - CSS + - CSS Positioning + - Guide + - NeedsTranslation + - Overview + - Reference + - TopicStub +translation_of: Web/CSS/CSS_Positioning +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS Positioned Layout</strong> is a module of CSS that defines how to position elements on the page.</p> + +<h2 id="Reference">Reference</h2> + +<h3 id="CSS_properties">CSS properties</h3> + +<div class="index"> +<ul> + <li>{{cssxref("bottom")}}</li> + <li>{{cssxref("clear")}}</li> + <li>{{cssxref("float")}}</li> + <li>{{cssxref("left")}}</li> + <li>{{cssxref("position")}}</li> + <li>{{cssxref("right")}}</li> + <li>{{cssxref("top")}}</li> + <li>{{cssxref("z-index")}}</li> +</ul> +</div> + +<h2 id="Guides">Guides</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index">Understanding CSS z-index</a></dt> + <dd>Presents the notion of stacking context and explains how z-ordering works, with several examples.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Positioning') }}</td> + <td>{{ Spec2('CSS3 Positioning') }}</td> + <td></td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'visuren.html') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td></td> + </tr> + </tbody> +</table> diff --git a/files/de/web/css/css_positioning/understanding_z_index/adding_z-index/index.html b/files/de/web/css/css_positioning/understanding_z_index/adding_z-index/index.html new file mode 100644 index 0000000000..ff78bd192a --- /dev/null +++ b/files/de/web/css/css_positioning/understanding_z_index/adding_z-index/index.html @@ -0,0 +1,161 @@ +--- +title: Using z-index +slug: Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index +tags: + - CSS + - Referenz + - z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index +--- +<div>{{cssref}}</div> + +<p>The first part of this article, <a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index">Stacking without the z-index property</a>, explains how stacking is arranged by default. If you want to create a custom stacking order, you can use the {{cssxref("z-index")}} property on a <a href="/en-US/docs/Web/CSS/position#Types_of_positioning">positioned</a> element.</p> + +<p>The <code>z-index</code> property can be specified with an integer value (positive, zero, or negative), which represents the position of the element along the z-axis. If you are not familiar with the z-axis, imagine the page as a stack of layers, each one having a number. Layers are rendered in numerical order, with larger numbers above smaller numbers.</p> + +<ul> + <li>bottom layer <em>(farthest from the observer)</em></li> + <li>...</li> + <li>Layer -3</li> + <li>Layer -2</li> + <li>Layer -1</li> + <li>Layer 0 <em>(default rendering layer)</em></li> + <li>Layer 1</li> + <li>Layer 2</li> + <li>Layer 3</li> + <li>...</li> + <li>top layer <em>(closest to the observer)</em></li> +</ul> + +<div class="note"> +<p><strong>Notes:</strong></p> + +<ul> + <li>When no <code>z-index</code> property is specified, elements are rendered on the default rendering layer 0 (zero).</li> + <li>If several elements share the same <code>z-index</code> value (i.e., they are placed on the same layer), stacking rules explained in the section <a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index">Stacking without the z-index property</a> apply.</li> +</ul> +</div> + +<p>In the following example, the layers' stacking order is rearranged using <code>z-index</code>. The <code>z-index</code> of element #5 has no effect since it is not a positioned element.</p> + +<p>{{EmbedLiveSample("Source_code_for_the_example", 600, 400)}}</p> + +<h2 id="Beispiel">Beispiel</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><div id="abs1"> + <b>DIV #1</b> + <br />position: absolute; + <br />z-index: 5; +</div> + +<div id="rel1"> + <b>DIV #2</b> + <br />position: relative; + <br />z-index: 3; +</div> + +<div id="rel2"> + <b>DIV #3</b> + <br />position: relative; + <br />z-index: 2; +</div> + +<div id="abs2"> + <b>DIV #4</b> + <br />position: absolute; + <br />z-index: 1; +</div> + +<div id="sta1"> + <b>DIV #5</b> + <br />no positioning + <br />z-index: 8; +</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">div { + padding: 10px; + opacity: 0.7; + text-align: center; +} + +b { + font-family: sans-serif; +} + +#abs1 { + z-index: 5; + position: absolute; + width: 150px; + height: 350px; + top: 10px; + left: 10px; + border: 1px dashed #900; + background-color: #fdd; +} + +#rel1 { + z-index: 3; + height: 100px; + position: relative; + top: 30px; + border: 1px dashed #696; + background-color: #cfc; + margin: 0px 50px 0px 50px; +} + +#rel2 { + z-index: 2; + height: 100px; + position: relative; + top: 15px; + left: 20px; + border: 1px dashed #696; + background-color: #cfc; + margin: 0px 50px 0px 50px; +} + +#abs2 { + z-index: 1; + position: absolute; + width: 150px; + height: 350px; + top: 10px; + right: 10px; + border: 1px dashed #900; + background-color: #fdd; +} + +#sta1 { + z-index: 8; + height: 70px; + border: 1px dashed #996; + background-color: #ffc; + margin: 0px 50px 0px 50px; +} +</pre> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index">Stacking without the z-index property</a>: The stacking rules that apply when <code>z-index</code> is not used.</li> + <li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float">Stacking with floated blocks</a>: How floating elements are handled with stacking.</li> + <li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">The stacking context</a>: Notes on the stacking context.</li> + <li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1">Stacking context example 1</a>: 2-level HTML hierarchy, z-index on the last level</li> + <li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2">Stacking context example 2</a>: 2-level HTML hierarchy, z-index on all levels</li> + <li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3">Stacking context example 3</a>: 3-level HTML hierarchy, z-index on the second level</li> +</ul> + +<div class="originaldocinfo"> +<h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2> + +<ul> + <li>Author(s): Paolo Lombardi</li> + <li>This article is the English translation of an article I wrote in Italian for <a class="external" href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under the <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a>.</li> + <li>Last Updated Date: November 3, 2014</li> +</ul> +</div> diff --git a/files/de/web/css/css_positioning/understanding_z_index/index.html b/files/de/web/css/css_positioning/understanding_z_index/index.html new file mode 100644 index 0000000000..7f44be02c9 --- /dev/null +++ b/files/de/web/css/css_positioning/understanding_z_index/index.html @@ -0,0 +1,51 @@ +--- +title: Understanding CSS z-index +slug: Web/CSS/CSS_Positioning/Understanding_z_index +tags: + - Advanced + - CSS + - Guide + - NeedsTranslation + - Reference + - TopicStub + - Understanding_CSS_z-index + - z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index +--- +<div>{{cssref}}</div> + +<p>In the most basic cases, <a href="/en-US/docs/Web/HTML">HTML</a> pages can be considered two-dimensional, because text, images, and other elements are arranged on the page without overlapping. In this case, there is a single rendering flow, and all elements are aware of the space taken by others. <span class="seoSummary">The {{cssxref("z-index")}} attribute lets you adjust the order of the layering of objects when rendering content.</span></p> + +<blockquote> +<p><em>In CSS 2.1, each box has a position in three dimensions. In addition to their horizontal and vertical positions, boxes lie along a "z-axis" and are formatted one on top of the other. Z-axis positions are particularly relevant when boxes overlap visually.</em></p> +</blockquote> + +<p>(from <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#z-index">CSS 2.1 Section 9.9.1 - Layered presentation</a>)</p> + +<p>This means that CSS style rules allow you to position boxes on layers in addition to the normal rendering layer (layer 0). The Z position of each layer is expressed as an integer representing the stacking order for rendering. Greater numbers mean closer to the observer. Z position can be controlled with the CSS <code>z-index</code> property.</p> + +<p>Using <code>z-index</code> appears extremely easy: a single property, assigned a single integer number, with an easy-to-understand behaviour. However, when <code>z-index</code> is applied to complex hierarchies of HTML elements, its behaviour can be hard to understand or predict. This is due to complex stacking rules. In fact a dedicated section has been reserved in the CSS specification <a class="external" href="http://www.w3.org/TR/CSS21/zindex.html">CSS-2.1 Appendix E</a> to explain these rules better.</p> + +<p>This article will try to explain those rules, with some simplification and several examples.</p> + +<ol> + <li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index">Stacking without the z-index property</a>: The stacking rules that apply when <code>z-index</code> is not used.</li> + <li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float">Stacking with floated blocks</a>: How floating elements are handled with stacking.</li> + <li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index">Using z-index</a>: How to use <code>z-index</code> to change default stacking.</li> + <li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">The stacking context</a>: Notes on the stacking context.</li> + <li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1">Stacking context example 1</a>: 2-level HTML hierarchy, <code>z-index</code> on the last level</li> + <li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2">Stacking context example 2</a>: 2-level HTML hierarchy, <code>z-index</code> on all levels</li> + <li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3">Stacking context example 3</a>: 3-level HTML hierarchy, <code>z-index</code> on the second level</li> +</ol> + +<div class="originaldocinfo"> +<h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2> + +<ul> + <li>Author(s): Paolo Lombardi</li> + <li>This article is the English translation of an article I wrote in Italian for <a class="external" href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under the <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a>.</li> + <li>Last Updated Date: July 9, 2005</li> +</ul> + +<p><small><em>Author's note: Thanks to Wladimir Palant and Rod Whiteley for the review.</em></small></p> +</div> diff --git a/files/de/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html b/files/de/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html new file mode 100644 index 0000000000..d814b294cf --- /dev/null +++ b/files/de/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html @@ -0,0 +1,243 @@ +--- +title: The stacking context +slug: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context +tags: + - CSS + - CSS Positionierung + - Position + - Referenz + - z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context +--- +<div>{{cssref}}</div> + +<p>Der <strong>Stapelungszusammenhang</strong> ist eine dreidimensionale Konzeptualisierung von HTML-Elementen entlang einer imaginären z-Achse relativ zum Benutzer, von dem angenommen wird, dass er dem Ansichtsfenster oder der Webseite zugewandt ist. HTML-Elemente füllen diesen Raum in Prioritätsreihenfolge auf der Grundlage von Elementattributen aus.</p> + +<h2 id="Der_Stapelungszusammenhang">Der Stapelungszusammenhang</h2> + +<p>Im vorherigen Teil dieses Artikels, die Verwendung von <a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index">z-index</a>, wird die Darstellungsreihenfolge bestimmter Elemente durch ihren <code>z-index</code> Wert beeinflusst. Dies ist darauf zurückzuführen, dass diese Elemente spezielle Eigenschaften haben, die dazu führen, dass sie einen Stapelungszusammenhang bilden.</p> + +<p>Ein Stapelungszusammenhang wird an beliebiger Stelle im Dokument durch ein beliebiges Element in den folgenden Szenarien gebildet:</p> + +<ul> + <li>Root Element des Dokumentes (<code><html></code>).</li> + <li>Ein Element mit einem {{cssxref("position")}} Wert <code>absolute</code> oder <code>relative</code> und einem {{cssxref("z-index")}} Wert anders als <code>auto</code>.</li> + <li>Ein Element mit einem {{cssxref("position")}} Wert <code>fixed</code> oder <code>sticky</code> (<code>sticky</code> für alle mobilen Browser, aber nicht für ältere Desktops).</li> + <li>Ein Element das als Kind eines Flex-Container ({{cssxref("flexbox")}}), mit einem {{cssxref("z-index")}} Wert anders als <code>auto</code>.</li> + <li>Ein Element das als Kind eines Grid-Container ({{cssxref("grid")}}), mit einem {{cssxref("z-index")}} Wert anders als <code>auto</code>.</li> + <li>Ein Element mit einem {{cssxref("opacity")}} Wert unter <code>1</code> (siehe auch <a href="http://www.w3.org/TR/css3-color/#transparency" title="http://www.w3.org/TR/css3-color/#transparency">die Spezifikation für opacity</a>).</li> + <li>Ein Element mit einem {{cssxref("mix-blend-mode")}} Wert anders als <code>normal</code>.</li> + <li>Element with any of the following properties with Wert anders als <code>none</code>: + <ul> + <li>{{cssxref("transform")}}</li> + <li>{{cssxref("filter")}}</li> + <li>{{cssxref("perspective")}}</li> + <li>{{cssxref("clip-path")}}</li> + <li>{{cssxref("mask")}} / {{cssxref("mask-image")}} / {{cssxref("mask-border")}}</li> + </ul> + </li> + <li>Ein Element mit einem {{cssxref("isolation")}} Wert <code>isolate</code>.</li> + <li>Ein Element mit einem {{cssxref("-webkit-overflow-scrolling")}} Wert <code>touch</code>.</li> + <li>Ein Element mit einem {{cssxref("will-change")}} Wert, der irgendeine Eigenschaft angibt, die einen Stapelkontext auf einem nicht initialen Wert erzeugen würde (siehe auch <a href="http://dev.opera.com/articles/css-will-change-property/">this post</a>).</li> + <li>Ein Element mit einem {{cssxref("contain")}} Wert <code>layout</code> oder <code>paint</code> oder einen zusammengesetzten Wert, der einen von beiden enthält (d.h. <code>contain: strict</code>, <code>contain: content</code>).</li> +</ul> + +<p>Innerhalb eines Stapelungszusammenhang werden die untergeordneten Elemente nach den gleichen Regeln gestapelt, die zuvor erläutert wurden. Wichtig ist, dass die <code>z-index </code>Werte der untergeordneten Stapelungszusammenhänge nur in diesem übergeordneten Kontext eine Bedeutung haben. Stapelungszusammenhänge werden im übergeordneten Stapelungszusammenhang atomar als eine einzige Einheit behandelt.</p> + +<p>Zusammengefasst:</p> + +<ul> + <li>Stapelungszusammenhänge können in anderen Stapelungszusammenhängen enthalten sein und zusammen eine Hierarchie von Stapelungszusammenhängen bilden.</li> + <li>Jeder Stapelungszusammenhang ist völlig unabhängig von seinen Geschwistern: Bei der Verarbeitung des Stapels werden nur nachkommende Elemente berücksichtigt.</li> + <li>Jeder Stapelungszusammenhang ist in sich geschlossen: Nachdem der Inhalt des Elements gestapelt wurde, wird das gesamte Element in der Stapelreihenfolge des übergeordneten Stapelungszusammenhanges betrachtet.</li> +</ul> + +<div class="note"><strong>Hinweis:</strong> Die Hierarchie der Stapelungszusammenhänge ist eine Teilmenge der Hierarchie der HTML-Elemente, da nur bestimmte Elemente Stapelungszusammenhänge erzeugen. Man kann sagen, dass Elemente, die keinen eigenen Stapelungszusammenhang bilden, vom übergeordneten Stapelungszusammenhang <em>assimiliert</em> werden.</div> + +<h2 id="Das_Beispiel">Das Beispiel</h2> + +<p><img alt="Example of stacking rules modified using z-index" src="/@api/deki/files/913/=Understanding_zindex_04.png"></p> + +<p>In diesem Beispiel erzeugt jedes positionierte Element aufgrund seiner Positionierung und seiner <code>z-index</code> -Werte einen eigenen Stapelungszusammenhang. Die Hierarchie der Stapelungszusammenhang ist wie folgt organisiert:</p> + +<ul> + <li>Root + <ul> + <li>DIV #1</li> + <li>DIV #2</li> + <li>DIV #3 + <ul> + <li>DIV #4</li> + <li>DIV #5</li> + <li>DIV #6</li> + </ul> + </li> + </ul> + </li> +</ul> + +<p>Es ist wichtig zu beachten, dass DIV #4, DIV #5 und DIV #6 Kinder von DIV #3 sind, so dass das Stapeln dieser Elemente innerhalb von DIV #3 vollständig aufgelöst wird. Sobald das Stapeln und Rendern innerhalb von DIV #3 abgeschlossen ist, wird das gesamte DIV #3-Element für das Stapeln im Wurzelelement in Bezug auf das DIV seines Geschwisters übergeben.</p> + +<div class="note"> +<p><strong>Notes:</strong></p> + +<ul> + <li>DIV #4 wird unter DIV #1 gerendert, weil der z-Index (5) von DIV #1 innerhalb des Stapelungszusammenhanges des Wurzelelementes gültig ist, während der z-Index (6) von DIV #4 innerhalb des Stapelungszusammenhanges von DIV #3 gültig ist. DIV #4 ist also unter DIV #1, weil DIV #4 zu DIV #3 gehört, das einen niedrigeren z-Indexwert hat.</li> + <li>Aus dem gleichen Grund wird DIV #2 (z-Index 2) unter DIV#5 (z-Index 1) gerendert, weil DIV #5 zu DIV #3 gehört, das einen höheren z-Index-Wert hat.</li> + <li>Der z-Index von DIV #3 ist 4, aber dieser Wert ist unabhängig vom z-Index von DIV #4, DIV #5 und DIV #6, da er zu einem anderen Stapelungszusammenhang gehört.</li> + <li> + <p>Eine einfache Möglichkeit, die Rendering-Reihenfolge von gestapelten Elementen entlang der Z-Achse herauszufinden, besteht darin, sie sich als eine Art "Versionsnummer" vorzustellen, wobei untergeordnete Elemente Minor-Versionsnummern unter den Major-Versionsnummern ihrer übergeordneten Elemente sind. Auf diese Weise können wir leicht erkennen, wie ein Element mit einem z-Index von 1 (DIV #5) über einem Element mit einem z-Index von 2 (DIV #2) gestapelt wird, und wie ein Element mit einem z-Index von 6 (DIV #4) unter einem Element mit einem z-Index von 5 (DIV #1) gestapelt wird. In unserem Beispiel (sortiert nach der endgültigen Rendering-Reihenfolge):</p> + + <ul> + <li>Root + <ul> + <li>DIV #2 - z-index is 2</li> + <li>DIV #3 - z-index is 4 + <ul> + <li>DIV #5 - z-index ist 1, gestapelt unter einem Element mit einem z-Index von 4, was eine Rendering-Reihenfolge von 4,1 ergibt</li> + <li>DIV #6 - z-index ist 3, gestapelt unter einem Element mit einem z-Index von 4, was eine Rendering-Reihenfolge von 4,3 ergibt</li> + <li>DIV #4 - z-index ist 6, gestapelt unter einem Element mit einem z-Index von 4, was zu einer Rendering-Reihenfolge von 4,6 führt</li> + </ul> + </li> + <li>DIV #1 - z-index is 5</li> + </ul> + </li> + </ul> + </li> +</ul> +</div> + +<h2 id="Beispiel">Beispiel</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><div id="div1"> + <h1>Division Element #1</h1> + <code>position: relative;<br/> + z-index: 5;</code> +</div> + +<div id="div2"> + <h1>Division Element #2</h1> + <code>position: relative;<br/> + z-index: 2;</code> +</div> + +<div id="div3"> + <div id="div4"> + <h1>Division Element #4</h1> + <code>position: relative;<br/> + z-index: 6;</code> + </div> + + <h1>Division Element #3</h1> + <code>position: absolute;<br/> + z-index: 4;</code> + + <div id="div5"> + <h1>Division Element #5</h1> + <code>position: relative;<br/> + z-index: 1;</code> + </div> + + <div id="div6"> + <h1>Division Element #6</h1> + <code>position: absolute;<br/> + z-index: 3;</code> + </div> +</div> +</pre> + +<h3 id="Division_Element_.231" name="Division_Element_.231">CSS</h3> + +<pre class="brush: css notranslate">* { + margin: 0; +} +html { + padding: 20px; + font: 12px/20px Arial, sans-serif; +} +div { + opacity: 0.7; + position: relative; +} +h1 { + font: inherit; + font-weight: bold; +} +#div1, +#div2 { + border: 1px dashed #696; + padding: 10px; + background-color: #cfc; +} +#div1 { + z-index: 5; + margin-bottom: 190px; +} +#div2 { + z-index: 2; +} +#div3 { + z-index: 4; + opacity: 1; + position: absolute; + top: 40px; + left: 180px; + width: 330px; + border: 1px dashed #900; + background-color: #fdd; + padding: 40px 20px 20px; +} +#div4, +#div5 { + border: 1px dashed #996; + background-color: #ffc; +} +#div4 { + z-index: 6; + margin-bottom: 15px; + padding: 25px 10px 5px; +} +#div5 { + z-index: 1; + margin-top: 15px; + padding: 5px 10px; +} +#div6 { + z-index: 3; + position: absolute; + top: 20px; + left: 180px; + width: 150px; + height: 125px; + border: 1px dashed #009; + padding-top: 125px; + background-color: #ddf; + text-align: center; +}</pre> + +<h4 id="Ergebnis">Ergebnis</h4> + +<p>{{ EmbedLiveSample('Example', '100%', '396') }}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index">Stacking without the z-index property</a>: The stacking rules that apply when <code>z-index</code> is not used.</li> + <li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float">Stacking with floated blocks</a>: How floating elements are handled with stacking.</li> + <li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index">Using z-index</a>: How to use <code>z-index</code> to change default stacking.</li> + <li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1">Stacking context example 1</a>: 2-level HTML hierarchy, <code>z-index</code> on the last level</li> + <li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2">Stacking context example 2</a>: 2-level HTML hierarchy, <code>z-index</code> on all levels</li> + <li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3">Stacking context example 3</a>: 3-level HTML hierarchy, <code>z-index</code> on the second level</li> +</ul> + +<div class="originaldocinfo"> +<h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2> + +<ul> + <li>Author(s): Paolo Lombardi</li> + <li>This article is the English translation of an article I wrote in Italian for <a class="external" href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under the <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a>.</li> + <li>Last Updated Date: July 9, 2005</li> +</ul> +</div> diff --git a/files/de/web/css/css_referenz/index.html b/files/de/web/css/css_referenz/index.html new file mode 100644 index 0000000000..89a0c83e25 --- /dev/null +++ b/files/de/web/css/css_referenz/index.html @@ -0,0 +1,211 @@ +--- +title: CSS Referenz +slug: Web/CSS/CSS_Referenz +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/Reference +--- +<div>{{CSSRef}}</div> + +<p class="summary">Verwende diese <strong>CSS-Referenz</strong> für einen <a href="#Index">alphabetischen Index</a> aller Standard-<a href="/de/docs/Web/CSS">CSS</a>-Eigenschaften, <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklassen</a>, <a href="/de/docs/Web/CSS/Pseudo-elements">Pseudoelemente</a>, <a href="/de/docs/Web/CSS/CSS_Typen">Datentypen</a> und <a href="/de/docs/Web/CSS/At-rule">@-Regeln</a>. Du kannst eine Liste aller <a href="#Selektoren">Selektoren</a> und eine Liste aller <a href="#Konzepte">Konzepte</a> ansehen. Dies beinhaltet auch eine kurze Referenz zu <a href="#DOM-CSS_CSSOM">DOM-CSS / CSSOM</a>.</p> + +<h2 id="Grundlegende_Syntax_von_Regeln">Grundlegende Syntax von Regeln</h2> + +<h3 id="Syntax_von_Stilregeln">Syntax von Stilregeln</h3> + +<pre class="syntaxbox"><strong><var>selektorliste</var> { + <var>eigenschaft</var>: <var>wert</var>;</strong> + <var>[weitere eigenschaft:wert; Paare]</var> +<strong>}</strong> + +... wobei <var>selektorliste</var>: <var>selektor[:pseudo-klasse] [::pseudo-element] [, weitere selektorlisten]</var> + +Siehe Listen aller <a href="#Selectors"><em>Selektoren</em></a>, <a href="#pcls"><em>Pseudo-Klassen</em></a> und <a href="#pelm"><em>Pseudo-Elemente</em></a> weiter unten. +</pre> + +<h4 id="Beispiele_für_Stilregeln"><em>Beispiele für Stilregeln</em></h4> + +<pre class="brush: css"><em> +strong { + color: red; +} + +div.menu-bar li:hover > ul { + display: block; +} +</em></pre> + +<p><em>Für eine Einführung in die Syntax von CSS-Selektoren auf Anfängerstufe, siehe <a href="/de/docs/Learn/CSS/Introduction_to_CSS/Selectors">diese Anleitung</a>. Beachte, dass jeder <a href="/de/docs/Web/CSS/Syntax">CSS-Syntax</a>-Fehler in einer Regeldefinition die gesamte Regel ungültig macht. Ungültige Regeln werden vom Browser ignoriert. Beachte dass CSS-Regeldefinitionen vollständig (ASCII) <a href="https://www.w3.org/TR/css-syntax-3/#intro">text-basiert</a> sind, wohingegegen DOM-CSS / CSSOM (das Regel-Verwaltungssystem) <a href="https://www.w3.org/TR/cssom/#introduction">objekt-basiert</a> ist.</em></p> + +<h3 id="Syntax_von_-Regeln"><em>Syntax von @-Regeln</em></h3> + +<p><em>Da die Struktur von @-Regeln stark variiert, schaue bitte bei <a href="/de/docs/Web/CSS/At-rule">@-Regel</a> nach, um die Syntax der gewünschten Regel herauszufinden.</em></p> + +<h2 id="Index"><em>Index</em></h2> + +<div class="note"> +<p><em><strong>Hinweis:</strong> Die Bezeichnungen der Eigenschaften enthalten <strong>nicht</strong> die <a href="/de/docs/Web/CSS/CSS_Properties_Reference">JavaScript-Namen</a>, wenn sie sich von den CSS-Standardbezeichnern unterscheiden.</em></p> +</div> + +<div><em>{{CSS_Ref}}</em></div> + +<h2 id="Selektoren"><em>Selektoren</em></h2> + +<h3 id="Einfache_Selektoren"><a href="/de/docs/Web/CSS/CSS_Selectors#Grundlegende_Selektoren">Einfache Selektoren</a></h3> + +<ul> + <li><em><a href="/de/docs/Web/CSS/Type_selectors">Typselektor</a> <code>Elementname</code></em></li> + <li><em><a href="/de/docs/Web/CSS/Klassenselektoren">Klassenselektor</a> <code>.klassenname</code></em></li> + <li><em><a href="/de/docs/Web/CSS/ID-Selektoren">ID-Selektor</a> <code>#idname</code></em></li> + <li><em><a href="/de/docs/Web/CSS/Universal_selectors">Universalselektor</a> <code>*</code></em></li> + <li><em><a href="/de/docs/Web/CSS/Attributselektoren">Attributselektoren</a> <code>[attribute="value"]</code> etc.</em></li> +</ul> + +<h3 id="Kombinatoren"><a href="/de/docs/Web/CSS/CSS_Selectors#Kombinatoren">Kombinatoren</a></h3> + +<ul> + <li><em><a href="/de/CSS/Nachfahrkombinator">Nachfahrkombinator</a> <code>A B</code></em></li> + <li><em><a href="/de/CSS/Kindkombinator">Kindkombinator</a> <code>A > B</code></em></li> + <li><em><a href="/de/CSS/direkter_Nachbarkombinator">direkter Nachbarkombinator</a> <code>A + B</code></em></li> + <li><em><a href="/de/CSS/indirekter_Nachbarkombinator">indirekter Nachbarkombinator</a> <code> A ~ B</code></em></li> + <li><em><a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklassen</a></em></li> + <li><em><a href="/de/docs/Web/CSS/Pseudo-elements">Pseudoelemente</a></em></li> +</ul> + +<h3 id="Pseudoklassen"><a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklassen</a></h3> + +<div class="index"> +<ul> + <li id="pcls">{{ Cssxref(":active") }}</li> + <li>{{cssxref(':any')}}</li> + <li>{{cssxref(':any-link')}}</li> + <li>{{ Cssxref(":checked") }}</li> + <li>{{ Cssxref(":default") }}</li> + <li>{{ Cssxref(":defined") }}</li> + <li>{{ Cssxref(":dir", ":dir()")}}</li> + <li>{{ Cssxref(":disabled") }}</li> + <li>{{ Cssxref(":empty") }}</li> + <li>{{ Cssxref(":enabled") }}</li> + <li>{{ Cssxref(":first") }}</li> + <li>{{ Cssxref(":first-child") }}</li> + <li>{{ Cssxref(":first-of-type") }}</li> + <li>{{ Cssxref(":fullscreen") }}</li> + <li>{{ Cssxref(":focus") }}</li> + <li>{{ Cssxref(":focus-visible") }}</li> + <li>{{ Cssxref(":host") }}</li> + <li>{{ Cssxref(":host()") }}</li> + <li>{{ Cssxref(":host-context()") }}</li> + <li>{{ Cssxref(":hover") }}</li> + <li>{{ Cssxref(":indeterminate") }}</li> + <li>{{ Cssxref(":in-range") }}</li> + <li>{{ Cssxref(":invalid") }}</li> + <li>{{ Cssxref(":lang", ":lang()") }}</li> + <li>{{ Cssxref(":last-child") }}</li> + <li>{{ Cssxref(":last-of-type") }}</li> + <li>{{ Cssxref(":left") }}</li> + <li>{{ Cssxref(":link") }}</li> + <li>{{ Cssxref(":not", ":not()") }}</li> + <li>{{ Cssxref(":nth-child", ":nth-child()") }}</li> + <li>{{ Cssxref(":nth-last-child", ":nth-last-child()") }}</li> + <li>{{ Cssxref(":nth-last-of-type", ":nth-last-of-type()") }}</li> + <li>{{ Cssxref(":nth-of-type", ":nth-of-type()") }}</li> + <li>{{ Cssxref(":only-child") }}</li> + <li>{{ Cssxref(":only-of-type") }}</li> + <li>{{ Cssxref(":optional") }}</li> + <li>{{ Cssxref(":out-of-range") }}</li> + <li>{{ Cssxref(":read-only") }}</li> + <li>{{ Cssxref(":read-write") }}</li> + <li>{{ Cssxref(":required") }}</li> + <li>{{ Cssxref(":right") }}</li> + <li>{{ Cssxref(":root") }}</li> + <li>{{ Cssxref(":scope") }}</li> + <li>{{ Cssxref(":target") }}</li> + <li>{{ Cssxref(":valid") }}</li> + <li>{{ Cssxref(":visited") }}</li> +</ul> +</div> + +<h3 id="Pseudoelemente"><a href="/de/docs/Web/CSS/Pseudo-elements">Pseudoelemente</a></h3> + +<div class="index"> +<ul> + <li id="pelm">{{ Cssxref("::after") }}</li> + <li>{{ Cssxref("::backdrop") }}</li> + <li>{{ Cssxref("::before") }}</li> + <li>{{ Cssxref("::cue") }}</li> + <li>{{ Cssxref("::first-letter") }}</li> + <li>{{ Cssxref("::first-line") }}</li> + <li>{{ Cssxref("::grammar-error") }} {{experimental_inline}}</li> + <li>{{ Cssxref("::marker") }} {{experimental_inline}}</li> + <li>{{ Cssxref("::placeholder") }} {{experimental_inline}}</li> + <li>{{ Cssxref("::selection") }}</li> + <li>{{ Cssxref("::spelling-error") }} {{experimental_inline}}</li> +</ul> +</div> + +<div class="note"> +<p><strong>Siehe auch:</strong> Eine vollständige <a href="https://www.w3.org/TR/selectors/#selectors">Liste der Selektoren</a> in der Selectors Level 3 Spezifikation.</p> +</div> + +<h2 id="Konzepte">Konzepte</h2> + +<h3 id="Syntax_Semantik">Syntax & Semantik</h3> + +<ul> + <li><a href="/de/docs/Web/CSS/Syntax">CSS-Syntax</a></li> + <li><a href="/de/docs/Web/CSS/At-rule">@-Regeln</a></li> + <li><a href="/de/docs/Web/CSS/Cascade">Kaskaden</a></li> + <li><a href="/de/CSS/Kommentare">Kommentare</a></li> + <li><a href="/de/docs/Glossary/Descriptor_(CSS)">Deskriptor</a></li> + <li><a href="/de/docs/Web/CSS/inheritance">Vererbung</a></li> + <li><a href="/de/docs/Web/CSS/Shorthand_properties">Shorthand-Eigenschaften</a></li> + <li><a href="/de/CSS/Spezifität">Spezifität</a></li> + <li><a href="/de/docs/Web/CSS/Value_definition_syntax">Wert-Definition-Syntax</a></li> +</ul> + +<h3 id="Werte">Werte</h3> + +<ul> + <li><a href="/de/docs/Web/CSS/actual_value">tatsächlicher Wert</a></li> + <li><a href="/de/docs/Web/CSS/computed_value">berechneter Wert</a></li> + <li><a href="/de/docs/Web/CSS/initial_value">initialer Wert</a></li> + <li><a href="/de/docs/Web/CSS/resolved_value">aufgelöster Wert</a></li> + <li><a href="/de/docs/Web/CSS/specified_value">angegebener Wert</a></li> + <li><a href="/de/docs/Web/CSS/used_value">verwendeter Wert</a></li> +</ul> + +<h3 id="Layout">Layout</h3> + +<ul> + <li><a href="/de/docs/Web/Guide/CSS/Block_formatting_context">Block-Formatierung-Kontext</a></li> + <li><a href="/de/CSS/Boxmodell">Boxmodell</a></li> + <li><a href="/de/docs/Web/CSS/All_About_The_Containing_Block">Beinhaltender Block</a></li> + <li><a href="/de/docs/Web/CSS/Layout_mode">Layout-Modus</a></li> + <li><a href="/de/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Margin-Collapsing</a></li> + <li><a href="/de/docs/Web/CSS/Replaced_element">Ersetzte Elemente</a></li> + <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">Stapel-Kontext</a></li> + <li><a href="/de/docs/Web/Guide/CSS/Visual_formatting_model">Visuelles Formatierungsmodel</a></li> +</ul> + +<h2 id="DOM-CSS_CSSOM">DOM-CSS / CSSOM</h2> + +<h3 id="Wichtigste_Objekttypen">Wichtigste Objekttypen</h3> + +<ul> + <li>document.<a href="/de/docs/Web/API/Document/styleSheets">styleSheets</a></li> + <li>styleSheets[i].<a href="/de/docs/Web/API/CSSRuleList">cssRules</a></li> + <li>cssRules[i].<a href="/de/docs/Web/API/CSSRule/cssText">cssText</a> (selector & style)</li> + <li>cssRules[i].<a href="/de/docs/Web/API/CSSStyleRule/selectorText">selectorText</a></li> + <li>elem.<a href="/de/docs/Web/API/HTMLElement/style">style</a></li> + <li>elem.style.<a href="/de/docs/Web/API/CSSStyleDeclaration/cssText">cssText</a> (just style)</li> + <li>elem.<a href="/de/docs/Web/API/Element/className">className</a></li> + <li>elem.<a href="/de/docs/Web/API/Element/classList">classList</a></li> +</ul> + +<h3 id="Wichtige_Methoden">Wichtige Methoden</h3> + +<ul> + <li>{{domxref("CSSStyleSheet.insertRule")}}</li> + <li>{{domxref("CSSStyleSheet.deleteRule")}}</li> +</ul> diff --git a/files/de/web/css/css_ruby/index.html b/files/de/web/css/css_ruby/index.html new file mode 100644 index 0000000000..f2aaf73a9f --- /dev/null +++ b/files/de/web/css/css_ruby/index.html @@ -0,0 +1,97 @@ +--- +title: CSS Ruby +slug: Web/CSS/CSS_Ruby +tags: + - CSS + - CSS Ruby + - Referenz + - Übersicht +translation_of: Web/CSS/CSS_Ruby +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS Ruby</strong> ist ein CSS Modul, das das Darstellungsmodell und die Formatierungssteuerung zur Anzeige von Ruby Anmerkungen bietet, eine Form von zwischenzeiligen Anmerkungen, kurze Texte entlang des Basistexts.</p> + +<h2 id="Referenz">Referenz</h2> + +<h3 id="CSS_Eigenschaften">CSS Eigenschaften</h3> + +<div class="index"> +<ul> + <li>{{cssxref("ruby-align")}}</li> + <li>{{cssxref("ruby-position")}}</li> +</ul> +</div> + +<h2 id="Anleitungen">Anleitungen</h2> + +<p><em>Keine.</em></p> + +<h2 id="Spezifikationen">Spezifikationen</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 Ruby')}}</td> + <td>{{Spec2('CSS3 Ruby')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop(38)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile(38)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/de/web/css/css_selectors/index.html b/files/de/web/css/css_selectors/index.html new file mode 100644 index 0000000000..1b0966e479 --- /dev/null +++ b/files/de/web/css/css_selectors/index.html @@ -0,0 +1,153 @@ +--- +title: CSS Selectors +slug: Web/CSS/CSS_Selectors +tags: + - CSS + - CSS Selektoren + - Referenz + - Selectors + - Selektoren + - Übersicht +translation_of: Web/CSS/CSS_Selectors +--- +<div>{{CSSRef}}</div> + +<p><strong>Selektoren</strong> definieren, auf welche Elemente eine Reihe von CSS Regeln angewendet wird.</p> + +<h2 id="Grundlegende_Selektoren">Grundlegende Selektoren</h2> + +<dl> + <dt><a href="/de/docs/Web/CSS/Type_selectors">Typselektoren</a></dt> + <dd>Dieser grundlegende Selektor wählt alle Elemente aus, die den angegebenen <em>Namen</em> matchen.<br> + <strong>Syntax:</strong> <code><var>eltname</var></code><br> + <strong>Beispiel:</strong> <code>input</code> matcht jedes {{HTMLElement('input')}} Element.</dd> + <dt><a href="/de/docs/Web/CSS/Class_selectors">Klassenselektoren</a></dt> + <dd>Dieser grundlegende Selektor wählt Elemente anhand ihres <code>class</code> Attributs aus.<br> + <strong>Syntax:</strong> <code>.<var>classname</var></code><br> + <strong>Beispiel:</strong> <code>.index</code> matcht jedes Element, das die Klasse <code>index</code> besitzt (wahrscheinlich definiert durch ein <code>class="index"</code> Attribut oder ähnliches).</dd> + <dt><a href="/de/docs/Web/CSS/ID_selectors">ID-Selektoren</a></dt> + <dd>Dieser grundlegende Selektor wählt Knoten anhand des Wertes ihres <code>id</code> Attributs aus. Es sollte nur ein Element mit der angegebenen ID in einem Dokument geben.<br> + <strong>Syntax:</strong> <code>#<var>idname</var></code><br> + <strong>Beispiel:</strong> <code>#toc</code> matcht das Element, das die ID <code>toc</code> hat (wahrscheinlich definiert durch ein <code>id="toc"</code> Attribut oder ähnliches).</dd> + <dt><a href="/de/docs/Web/CSS/Universal_selectors">Universalselektoren</a></dt> + <dd>Dieser grundlegende Selektor wählt alle Knoten aus. Er existiert auch in einer Ein-Namensraum- und einer Alle-Namensräume-Variante.<br> + <strong>Syntax:</strong> <code>* <var>ns</var>|* *|*</code><br> + <strong>Beispiel:</strong> <code>*</code> matcht alle Elemente des Dokuments.</dd> + <dt><a href="/de/docs/Web/CSS/Attributselektoren">Attributselektoren</a></dt> + <dd>Dieser grundlegende Selektor wählt Knoten anhand des Wertes eines ihrer Attribute aus.<br> + <strong>Syntax:</strong> <code>[<var>attr</var>] [<var>attr</var>=<var>value</var>] [<var>attr</var>~=<var>value</var>] [<var>attr</var>|=<var>value</var>] [<var>attr</var>^=<var>value</var>] [<var>attr</var>$=<var>value</var>] [<var>attr</var>*=<var>value</var>]</code><br> + <strong>Beispiel:</strong> <code>[autoplay]</code> matcht alle Elemente, deren <code>autoplay</code> Attribut (auf einen beliebigen Wert) gesetzt ist.</dd> +</dl> + +<h2 id="Kombinatoren">Kombinatoren</h2> + +<dl> + <dt><a href="/de/docs/Web/CSS/Adjacent_sibling_selectors">Angrenzende Geschwisterselektoren</a></dt> + <dd>Der <code>'+'</code>-Kombinator wählt Knoten aus, die direkt dem davor angegebenen Element folgen.<br> + <strong>Syntax:</strong> <code><var>A</var> + <var>B</var></code><br> + <strong>Beispiel:</strong> <code>h2 + p</code> matcht jedes {{HTMLElement('p')}}, das direkt einem {{HTMLElement('h2')}} folgt.</dd> + <dt><a href="/de/docs/Web/CSS/General_sibling_selectors" style="">Allgemeine Geschwisterselektoren</a></dt> + <dd>Der <code>'~'</code>-Kombinator wählt Knoten aus, die dem davor angegeben Element (nicht zwingend direkt) folgen, falls sie sich dasselbe Elternelement teilen.<br> + <strong>Syntax:</strong> <code><var>A</var> ~ <var>B</var></code><br> + <strong>Beispiel:</strong> <code>p ~ span</code> matcht alle {{HTMLElement('span')}} Elemente, die einem {{HTMLElement('p')}} Element innerhalb desselben Elements folgen.</dd> + <dt><a href="/de/docs/Web/CSS/Child_selectors">Kindselektoren</a></dt> + <dd>Der <code>'>'</code>-Kombinator wählt Knoten aus, die direkte Kinder des davor angegebenen Elements sind.<br> + <strong>Syntax:</strong> <code><var>A</var> > <var>B</var></code><br> + <strong>Beispiel:</strong> <code>ul > li</code> matcht alle {{HTMLElement('li')}} Elemente, die innerhalb eines {{HTMLElement('ul')}} Element sind.</dd> + <dt><a href="/de/docs/Web/CSS/Descendant_selectors">Nachfahrenselektoren</a></dt> + <dd>Der <code>' '</code>-Kombinator wählt Knoten aus, die (nicht zwangsweise direkte) Kinder des davor angegebenen Elements sind.<br> + <strong>Syntax:</strong> <code><var>A</var> <var>B</var></code><br> + <strong>Beispiel:</strong> <code>div span</code> matcht jedes {{HTMLElement('span')}} Element, das innerhalb eines {{HTMLElement('div')}} Elements ist.</dd> +</dl> + +<h2 id="Pseudoelemente">Pseudoelemente</h2> + +<p><a href="/de/docs/Web/CSS/Pseudo-elements">Pseudoelemente</a> sind Abstraktionen des Baums, die Elemente außerhalb von dem, was HTML macht, repräsentieren. Zum Beispiel hat HTML kein Element, das den ersten Buchstaben oder die erste Zeile eines Absatzes beschreibt, oder die Markierung in einer Liste. Pseudoelemente repräsentieren diese Elemente und erlauben es, ihnen CSS Regeln zuzuweisen: dadurch können diese Elemente unabhängig gestylt werden.</p> + +<h2 id="Pseudoklassen">Pseudoklassen</h2> + +<p><a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklassen</a> erlauben es, Elemente anhand von Informationen auszuwählen, die nicht im Dokumentbaum hinterlegt sind, wie ein Status, oder die schwer zu extrahieren sind. Z. B. ob ein Link zuvor bereits besucht wurde oder nicht.</p> + +<h2 id="Spezifikationen">Spezifikationen</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('CSS4 Selectors')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('CSS1')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>1</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>3.0</td> + <td>3.5</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>1.5</td> + <td>{{CompatGeckoMobile("1.9.2")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>3.2</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/de/web/css/css_shapes/index.html b/files/de/web/css/css_shapes/index.html new file mode 100644 index 0000000000..fce870138d --- /dev/null +++ b/files/de/web/css/css_shapes/index.html @@ -0,0 +1,98 @@ +--- +title: CSS Shapes +slug: Web/CSS/CSS_Shapes +tags: + - CSS + - CSS Formen + - CSS Referenz + - Übersicht +translation_of: Web/CSS/CSS_Shapes +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS Shapes</strong> ist ein CSS Modul, das geometrische Formen definiert, die in CSS Werten verwendet werden können.</p> + +<h2 id="Referenz">Referenz</h2> + +<h3 id="Eigenschaften">Eigenschaften</h3> + +<div class="index"> +<ul> + <li>{{cssxref("shape-outside")}}</li> + <li>{{cssxref("shape-margin")}}</li> + <li>{{cssxref("shape-image-threshold")}}</li> +</ul> +</div> + +<h2 id="Anleitungen">Anleitungen</h2> + +<p><em>Keine.</em></p> + +<h2 id="Spezifikationen">Spezifikationen</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 Shapes")}}</td> + <td>{{Spec2("CSS Shapes")}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>37</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>24</td> + <td>8.0 {{property_prefix("-webkit")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8.0 {{property_prefix("-webkit")}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/de/web/css/css_table/index.html b/files/de/web/css/css_table/index.html new file mode 100644 index 0000000000..8447a21246 --- /dev/null +++ b/files/de/web/css/css_table/index.html @@ -0,0 +1,101 @@ +--- +title: CSS Table +slug: Web/CSS/CSS_Table +tags: + - CSS + - CSS Referenz + - CSS Table + - Übersicht +translation_of: Web/CSS/CSS_Table +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS Table</strong> ist ein CSS Modul, das definiert, wie Tabellendaten dargestellt werden.</p> + +<h2 id="Referenz">Referenz</h2> + +<h3 id="Eigenschaften">Eigenschaften</h3> + +<div class="index"> +<ul> + <li>{{cssxref("border-collapse")}}</li> + <li>{{cssxref("border-spacing")}}</li> + <li>{{cssxref("caption-side")}}</li> + <li>{{cssxref("empty-cells")}}</li> + <li>{{cssxref("table-layout")}}</li> + <li>{{cssxref("vertical-align")}}</li> +</ul> +</div> + +<h2 id="Anleitungen">Anleitungen</h2> + +<p><em>Keine.</em></p> + +<h2 id="Spezifikationen">Spezifikationen</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("CSS2.1", "tables.html")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>4.0</td> + <td>4.0</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>1.0</td> + <td>{{CompatGeckoMobile("1")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/de/web/css/css_text/index.html b/files/de/web/css/css_text/index.html new file mode 100644 index 0000000000..cb9b073d14 --- /dev/null +++ b/files/de/web/css/css_text/index.html @@ -0,0 +1,123 @@ +--- +title: CSS Text +slug: Web/CSS/CSS_Text +tags: + - CSS + - CSS Text + - Übersicht +translation_of: Web/CSS/CSS_Text +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS Text</strong> ist ein CSS Modul, das definiert, wie Textmanipulationen durchgeführt werden, wie Zeilenumbrüche, Blocksatz und Ausrichtung, Leerraumverhalten und Texttransformationen.</p> + +<h2 id="Referenz">Referenz</h2> + +<h3 id="Eigenschaften">Eigenschaften</h3> + +<div class="index"> +<ul> + <li>{{cssxref("hyphens")}}</li> + <li>{{cssxref("letter-spacing")}}</li> + <li>{{cssxref("line-break")}}</li> + <li>{{cssxref("overflow-wrap")}}</li> + <li>{{cssxref("tab-size")}}</li> + <li>{{cssxref("text-align")}}</li> + <li>{{cssxref("text-align-last")}}</li> + <li>{{cssxref("text-indent")}}</li> + <li>{{cssxref("text-size-adjust")}}</li> + <li>{{cssxref("text-transform")}}</li> + <li>{{cssxref("white-space")}}</li> + <li>{{cssxref("word-break")}}</li> + <li>{{cssxref("word-spacing")}}</li> + <li>{{cssxref("word-wrap")}}</li> +</ul> +</div> + +<h2 id="Anleitungen">Anleitungen</h2> + +<p><em>Keine.</em></p> + +<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('CSS Logical Properties')}}</td> + <td>{{Spec2('CSS Logical Properties')}}</td> + <td>Updates some properties to be independent of the directionality of the text.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Text')}}</td> + <td>{{Spec2('CSS3 Text')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'text.html')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS1')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop(1.0)}}</td> + <td>3</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/de/web/css/css_textdekoration/index.html b/files/de/web/css/css_textdekoration/index.html new file mode 100644 index 0000000000..389d7f6a5e --- /dev/null +++ b/files/de/web/css/css_textdekoration/index.html @@ -0,0 +1,65 @@ +--- +title: CSS Textdekoration +slug: Web/CSS/CSS_Textdekoration +tags: + - CSS + - CSS Referenz + - CSS Textdekoration + - Übersicht +translation_of: Web/CSS/CSS_Text_Decoration +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS Text Decoration</strong> ist ein CSS Modul, das Features in Bezug auf Textdekoration definiert, wie zum Beispiel Unterstreichungen, Textschatten und Betonungsmarker.</p> + +<h2 id="CSS_Eigenschaften">CSS Eigenschaften</h2> + +<div class="index"> +<ul> + <li>{{cssxref("letter-spacing")}}</li> + <li>{{cssxref("text-align")}}</li> + <li>{{cssxref("text-decoration")}}</li> + <li>{{cssxref("text-decoration-color")}}</li> + <li>{{cssxref("text-decoration-line")}}</li> + <li>{{cssxref("text-decoration-style")}}</li> + <li>{{cssxref("text-indent")}}</li> + <li>{{cssxref("text-rendering")}}</li> + <li>{{cssxref("text-shadow")}}</li> + <li>{{cssxref("text-transform")}}</li> + <li>{{cssxref("white-space")}}</li> + <li>{{cssxref("word-spacing")}}</li> +</ul> +</div> + +<h2 id="Anleitungen">Anleitungen</h2> + +<p><em>Keine.</em></p> + +<h2 id="Spezifikationen">Spezifikationen</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 Text Decoration')}}</td> + <td>{{Spec2('CSS3 Text Decoration')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'text.html')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('CSS1')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> diff --git a/files/de/web/css/css_transforms/css_transformationen_verwenden/index.html b/files/de/web/css/css_transforms/css_transformationen_verwenden/index.html new file mode 100644 index 0000000000..83a9ada0d2 --- /dev/null +++ b/files/de/web/css/css_transforms/css_transformationen_verwenden/index.html @@ -0,0 +1,248 @@ +--- +title: CSS Transformationen verwenden +slug: Web/CSS/CSS_Transforms/CSS_Transformationen_verwenden +tags: + - CSS + - CSS Transformationen + - CSS3 + - Fortgeschritten + - Guide +translation_of: Web/CSS/CSS_Transforms/Using_CSS_transforms +--- +<div>{{CSSRef}}</div> + +<p>Durch Modifizierung des Koordinatenraums ändern <strong>CSS Transformationen</strong> den Umriss und die Position des betreffenden Inhalts ohne den normalen Dokumentfluss zu unterbrechen. Diese Anleitung bietet eine Einführung in die Verwendung von Transformationen.</p> + +<p>CSS Transformationen sind als eine Reihe von CSS Eigenschaften implementiert, die es erlauben, affine lineare Transformationen auf HTML Elemente anzuwenden. Diese Transformationen beinhalten Drehung, Verzerrung, Skalierung und Verschiebung sowohl im ebenen als auch im 3D Raum.</p> + +<h2 id="CSS_Transformationseigenschaften">CSS Transformationseigenschaften</h2> + +<p>Zwei Haupteigenschaften werden dazu verwendet, CSS Transformationen zu definieren: {{cssxref("transform")}} und {{cssxref("transform-origin")}}.</p> + +<dl> + <dt>{{cssxref("transform-origin")}}</dt> + <dd>Bestimmt die Position des Ursprungs. Standardmäßig ist dieser in der Mitte des Elements und kann verschoben werden. Er wird von mehreren Transformationen verwendet wie Drehung, Skalierung oder Verzerrung, die einen bestimmten Punkt als Parameter benötigen.</dd> + <dt>{{cssxref("transform")}}</dt> + <dd>Bestimmt die Transformationen, die auf das Element angewendet werden. Sie ist eine leerzeichenseparierte Liste von Transformationen, welche eine nach der anderen angewendet werden, wie durch die Zusammensetzungsoperation verlangt.</dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Drehung">Drehung</h3> + +<p>Dieses Beispiel erstellt einen iframe, der Googles Homepage beinhaltet, die um 90 Grad um die linke untere Ecke gedreht wurde.</p> + +<p><a class="button liveSample" href="/@api/deki/files/2921/=rotated-google-sample.html" title="/@api/deki/files/2921/=rotated-google-sample.html">Livebeispiel ansehen</a> <a class="button liveSample" href="/@api/deki/files/2920/=google-rotated.png" title="/@api/deki/files/2920/=google-rotated.png">Screenshot des Beispiels ansehen</a></p> + +<pre class="brush: html"><div style="transform: rotate(90deg); transform-origin: bottom left;"> + <iframe src="http://www.google.com/" width="500" height="600"></iframe> +</div> +</pre> + +<h3 id="Verzerrung_und_Verschiebung">Verzerrung und Verschiebung</h3> + +<p>Dieses Beispiel erstellt einen iframe, der Googles Homepage beinhaltet, verzerrt um 10 Grad und verschoben um 150 Pixel auf der x-Achse.</p> + +<p><a class="button liveSample" href="/@api/deki/files/2922/=skewed-google-sample.html" title="http://developer.mozilla.org/editor/fckeditor/core/editor/@api/deki/files/2922/=skewed-google-sample.html">Livebeispiel ansehen</a> <a class="button liveSample" href="/@api/deki/files/2923/=skewed-google.png" title="/@api/deki/files/2923/=skewed-google.png">Screenshot des Beispiels ansehen</a></p> + +<pre class="brush: html"><div style="transform: skewx(10deg) translatex(150px); + transform-origin: bottom left;"> + <iframe src="http://www.google.com/" width="600" height="500"></iframe> +</div> +</pre> + +<h2 id="3D-spezifische_CSS_Eigenschaften">3D-spezifische CSS Eigenschaften</h2> + +<p>Die Anwendung von CSS Transformationen im dreidimensionalen Raum ist ein wenig komplexer. Zunächst muss der 3D Raum konfiguriert werden, indem ihm eine Perspektive gegeben wird. Anschließend muss konfiguriert werden, wie die 2D Elemente sich in diesem Raum verhalten.</p> + +<h3 id="Eine_Perspektive_einrichten">Eine Perspektive einrichten</h3> + +<p>Das erste Element ist das Setzen der <em>Perspektive</em>. Die Perspektive ist, was den dreidimensionalen Eindruck vermittelt. Je weiter weg Elemente vom Betrachter sind, desto kleiner sind sie.</p> + +<p>Wie schnell sie kleiner werden, wird durch die {{cssxref("perspective")}} Eigenschaft bestimmt. Je kleiner deren Wert ist, desto tiefer ist die Perspektive.</p> + +<table class="standard-table"> + <thead> + <tr> + <th><code>perspective:0;</code></th> + <th><code>perspective:250px;</code></th> + </tr> + </thead> + <tbody> + <tr> + <td> + <div class="container" style="width: 200px; height: 200px; margin: 75px 0 0 75px; border: none;"> + <div class="cube" style="width: 100%; height: 100%; -moz-perspective: 0; -webkit-perspective: 0; perspective: 0; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -moz-perspective-origin: 150% 150%; -webkit-perspective-origin: 150% 150%; perspective-origin: 150% 150%;"> + <div class="middle" style="display: block; position: absolute; width: 100px; height: 100px; border: 1px dashed black; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background: transparent;"> </div> + + <div class="front">1</div> + + <div class="back">2</div> + + <div class="right">3</div> + + <div class="left">4</div> + + <div class="top">5</div> + + <div class="bottom">6</div> + </div> + </div> + </td> + <td> + <div class="container" style="width: 200px; height: 200px; margin: 75px 0 0 75px; border: none;"> + <div class="cube" style="width: 100%; height: 100%; -moz-perspective: 250px; -webkit-perspective: 250px; perspective: 250px; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -moz-perspective-origin: 150% 150%; -webkit-perspective-origin: 150% 150%; perspective-origin: 150% 150%;"> + <div class="middle" style="display: block; position: absolute; width: 100px; height: 100px; border: 1px dashed black; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background: transparent;"> </div> + + <div class="front">1</div> + + <div class="back">2</div> + + <div class="right">3</div> + + <div class="left">4</div> + + <div class="top">5</div> + + <div class="bottom">6</div> + </div> + </div> + </td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <thead> + <tr> + <th><code>perspective:300px;</code></th> + <th><code>perspective:350px;</code></th> + </tr> + </thead> + <tbody> + <tr> + <td> + <div class="container" style="width: 200px; height: 200px; margin: 75px 0 0 75px; border: none;"> + <div class="cube" style="width: 100%; height: 100%; -moz-perspective: 300px; -moz-transform-style: preserve-3d; -moz-perspective-origin: 150% 150%; -webkit-perspective: 300px; -webkit-transform-style: preserve-3d; -webkit-perspective-origin: 150% 150%; perspective: 300px; transform-style: preserve-3d; perspective-origin: 150% 150%;"> + <div class="middle" style="display: block; position: absolute; width: 100px; height: 100px; border: 1px dashed black; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background: transparent;"> </div> + + <div class="front">1</div> + + <div class="back">2</div> + + <div class="right">3</div> + + <div class="left">4</div> + + <div class="top">5</div> + + <div class="bottom">6</div> + </div> + </div> + </td> + <td> + <div class="container" style="width: 200px; height: 200px; margin: 75px 0 0 75px; border: none;"> + <div class="cube" style="width: 100%; height: 100%; -moz-perspective: 350px; -moz-transform-style: preserve-3d; -moz-perspective-origin: 150% 150%; -webkit-perspective: 350px; -webkit-transform-style: preserve-3d; -webkit-perspective-origin: 150% 150%; perspective: 350px; transform-style: preserve-3d; perspective-origin: 150% 150%;"> + <div class="middle" style="display: block; position: absolute; width: 100px; height: 100px; border: 1px dashed black; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background: transparent;"> </div> + + <div class="front">1</div> + + <div class="back">2</div> + + <div class="right">3</div> + + <div class="left">4</div> + + <div class="top">5</div> + + <div class="bottom">6</div> + </div> + </div> + </td> + </tr> + </tbody> +</table> + +<p>Das zweite Element ist die Konfiguration der Position des Betrachters mittels der {{cssxref("perspective-origin")}} Eigenschaft. Standardmäßig ist die Perspektive auf den Betrachter zentriert, was nicht immer passend ist.</p> + +<div> +<table class="standard-table"> + <thead> + <tr> + <th><code>perspective-origin:150px 150px;</code></th> + <th><code>perspective-origin:50% 50%;</code></th> + <th><code>perspective-origin:-50px -50px;</code></th> + </tr> + </thead> + <tbody> + <tr> + <td> + <div class="container" style="width: 100px; height: 100px; margin: 25px; border: none;"> + <div class="cube" style="width: 100%; height: 100%; -moz-perspective: 300px; -moz-transform-style: preserve-3d; -moz-perspective-origin: 150% 150%; -webkit-perspective: 300px; -webkit-transform-style: preserve-3d; -webkit-perspective-origin: 150% 150%; perspective: 300px; transform-style: preserve-3d; perspective-origin: 150% 150%;"> + <div class="middle" style="display: block; position: absolute; width: 100px; height: 100px; border: 1px dashed black; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background: transparent;"> </div> + + <div class="front">1</div> + + <div class="back">2</div> + + <div class="right">3</div> + + <div class="left">4</div> + + <div class="top">5</div> + + <div class="bottom">6</div> + </div> + </div> + </td> + <td> + <div class="container" style="width: 100px; height: 100px; margin: 25px; border: none;"> + <div class="cube" style="width: 100%; height: 100%; -moz-perspective: 300px; -moz-transform-style: preserve-3d; -moz-perspective-origin: 50% 50%; -webkit-perspective: 300px; -webkit-transform-style: preserve-3d; -webkit-perspective-origin: 50% 50%; perspective: 300px; transform-style: preserve-3d; perspective-origin: 50% 50%;"> + <div class="middle" style="display: block; position: absolute; width: 100px; height: 100px; border: 1px dashed black; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background: transparent;"> </div> + + <div class="front">1</div> + + <div class="back">2</div> + + <div class="right">3</div> + + <div class="left">4</div> + + <div class="top">5</div> + + <div class="bottom">6</div> + </div> + </div> + </td> + <td> + <div class="container" style="width: 100px; height: 100px; margin: 25px; border: none;"> + <div class="cube" style="width: 100%; height: 100%; -moz-perspective: 300px; -moz-transform-style: preserve-3d; -moz-perspective-origin: -50% -50%; -webkit-perspective: 300px; -webkit-transform-style: preserve-3d; -webkit-perspective-origin: -50% -50%; perspective: 300px; transform-style: preserve-3d; perspective-origin: -50% -50%;"> + <div class="middle" style="display: block; position: absolute; width: 100px; height: 100px; border: 1px dashed black; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background: transparent;"> </div> + + <div class="front">1</div> + + <div class="back">2</div> + + <div class="right">3</div> + + <div class="left">4</div> + + <div class="top">5</div> + + <div class="bottom">6</div> + </div> + </div> + </td> + </tr> + </tbody> +</table> +</div> + +<p>Sobald dies getan ist, kann mit der Arbeit am Element im dreidimensionalen Raum begonnen werden.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/Guide/Events/Gerätausrichtung_mit_3D_Transformationen_verwenden">Gerätausrichtung mit 3D Transformationen verwenden</a></li> + <li><a href="http://desandro.github.com/3dtransforms/">Einführung in CSS 3D Transformationen</a> (Blogeintrag von David DeSandro in Englisch)</li> +</ul> diff --git a/files/de/web/css/css_transforms/index.html b/files/de/web/css/css_transforms/index.html new file mode 100644 index 0000000000..142b07aed1 --- /dev/null +++ b/files/de/web/css/css_transforms/index.html @@ -0,0 +1,152 @@ +--- +title: CSS Transforms +slug: Web/CSS/CSS_Transforms +tags: + - CSS + - CSS Reference + - Experimental + - NeedsTranslation + - Overview + - TopicStub +translation_of: Web/CSS/CSS_Transforms +--- +<p>{{CSSRef}}{{SeeCompatTable}}</p> + +<p><strong>CSS Transforms</strong> is a module of CSS that defines how elements styled with CSS can be transformed in two-dimensional or three-dimensional space.</p> + +<h2 id="Reference">Reference</h2> + +<h3 id="CSS_Properties">CSS Properties</h3> + +<div class="index"> +<ul> + <li>{{cssxref("backface-visibility")}}</li> + <li>{{cssxref("perspective")}}</li> + <li>{{cssxref("perspective-origin")}}</li> + <li>{{cssxref("transform")}}</li> + <li>{{cssxref("transform-box")}}</li> + <li>{{cssxref("transform-origin")}}</li> + <li>{{cssxref("transform-style")}}</li> +</ul> +</div> + +<h2 id="Guides">Guides</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">Using CSS transforms</a></dt> + <dd>Step-by-step tutorial about how to transform elements styled with CSS.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Transforms') }}</td> + <td>{{ Spec2('CSS3 Transforms') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td> + <p>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}<br> + 36</p> + </td> + <td>{{CompatGeckoDesktop("1.9.1")}}{{property_prefix("-moz")}}<sup>[1]</sup><br> + {{CompatGeckoDesktop("16.0")}}<sup>[2]</sup></td> + <td>9.0{{property_prefix("-ms")}}<sup>[3]</sup><br> + 10.0</td> + <td>10.5{{property_prefix("-o")}}<br> + 12.10<br> + 15.0{{property_prefix("-webkit")}}<br> + 23</td> + <td>3.1{{property_prefix("-webkit")}}</td> + </tr> + <tr> + <td>3D Support</td> + <td>12.0{{property_prefix("-webkit")}}<br> + 36</td> + <td>10.0{{property_prefix("-moz")}}<br> + {{CompatGeckoDesktop("16.0")}}</td> + <td>10.0</td> + <td>15.0{{property_prefix("-webkit")}}<br> + 23</td> + <td>4.0{{property_prefix("-webkit")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatAndroid(2.1)}}{{property_prefix("-webkit")}}<sup>[4]</sup></td> + <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}<br> + 11.0{{property_prefix("-webkit")}}<sup>[5]</sup></td> + <td>11.5{{property_prefix("-webkit")}}</td> + <td>3.2 {{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td> + </tr> + <tr> + <td>3D Support</td> + <td>{{CompatAndroid(3.0)}}{{property_prefix("-webkit")}}</td> + <td>{{CompatVersionUnknown}}{{ property_prefix("-webkit")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>22{{property_prefix("-webkit")}}</td> + <td>3.2 {{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Gecko 14.0 removed the experimental support for <code>skew()</code>, but it was reintroduced in Gecko 15.0 for compatibility reasons. As it is non-standard and will likely be removed in the future, do not use it.</p> + +<p>[2] Before Firefox 16, the translation values of <code>matrix()</code> and <code>matrix3d()</code> could be {{cssxref("<length>")}}, in addition to the standard {{cssxref("<number>")}}.</p> + +<p>[3] Internet Explorer 5.5 or later supports a proprietary <a href="http://msdn.microsoft.com/en-us/library/ms533014%28VS.85,loband%29.aspx">Matrix Filter</a> which can be used to achieve a similar effect.</p> + +<p>Internet Explorer 9.0 or earlier has no support for 3D transforms, mixing 3D and 2D transform functions. such as <code>-ms-transform:rotate(10deg) translateZ(0);</code> will prevent the entire property from being applied.</p> + +<p>[4] Android 2.3 has a bug where input forms will "jump" when typing, if any container element has a <code>-webkit-transform</code>.</p> + +<p>[5] Internet Explorer 11.0 supports the {{property_prefix("-webkit")}} <a href="https://msdn.microsoft.com/library/jj127312#code-snippet-1">prefixed variant as an alias for the default one</a>.</p> + +<p> </p> diff --git a/files/de/web/css/css_transitions/index.html b/files/de/web/css/css_transitions/index.html new file mode 100644 index 0000000000..b9bc67d16f --- /dev/null +++ b/files/de/web/css/css_transitions/index.html @@ -0,0 +1,116 @@ +--- +title: CSS Übergänge +slug: Web/CSS/CSS_Transitions +tags: + - CSS + - CSS Übergänge + - Experimentell + - Referenz + - Übersicht +translation_of: Web/CSS/CSS_Transitions +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p><strong>CSS Transitions</strong> ist ein CSS Modul, das definiert, wie weiche Übergänge zwischen Werten von CSS Eigenschaften erstellt werden. Es erlaubt es nicht nur, diese zu erstellen, sondern definiert auch deren Entwicklung unter Verwendung von Timingfunktionen.</p> + +<h2 id="Referenz">Referenz</h2> + +<h3 id="Eigenschaften">Eigenschaften</h3> + +<div class="index"> +<ul> + <li>{{cssxref("transition")}}</li> + <li>{{cssxref("transition-delay")}}</li> + <li>{{cssxref("transition-duration")}}</li> + <li>{{cssxref("transition-property")}}</li> + <li>{{cssxref("transition-timing-function")}}</li> +</ul> +</div> + +<h2 id="Anleitungen">Anleitungen</h2> + +<dl> + <dt><a href="/de/docs/Web/Guide/CSS/CSS_Übergänge_verwenden">CSS Übergänge verwenden</a></dt> + <dd>Schritt-für-Schritt-Tutorial darüber, wie weiche Übergänge mithilfe von CSS erstellt werden. Dieser Artikel beschreibt jede relevante CSS Eigenschaft und erklärt, wie diese interagieren.</dd> +</dl> + +<h2 id="Spezifikationen">Spezifikationen</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 Transitions')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>1.0 {{property_prefix("-webkit")}}<br> + 26.0</td> + <td>{{CompatGeckoDesktop("2.0")}} {{property_prefix("-moz")}}<br> + {{CompatGeckoDesktop("16.0")}}</td> + <td>10.0</td> + <td>11.6 {{property_prefix("-o")}}<br> + 12.10 <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">#</a></td> + <td>3.0 {{property_prefix("-webkit")}}<br> + 6.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>2.1 {{property_prefix("-webkit")}}</td> + <td>{{CompatGeckoMobile("2.0")}} {{property_prefix("-moz")}}<br> + {{CompatGeckoMobile("16.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.0 {{property_prefix("-o")}}<br> + 12.10 <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">#</a></td> + <td>3.2 {{property_prefix("-webkit")}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Ähnlich zu CSS Übergängen kann <a href="/de/docs/Web/CSS/CSS_Animationen">CSS Animationen</a> Animationen unabhängig von Wertänderungen auslösen.</li> +</ul> diff --git a/files/de/web/css/css_typen/index.html b/files/de/web/css/css_typen/index.html new file mode 100644 index 0000000000..bb08a42cd4 --- /dev/null +++ b/files/de/web/css/css_typen/index.html @@ -0,0 +1,59 @@ +--- +title: CSS-Basis-Datentypen +slug: Web/CSS/CSS_Typen +translation_of: Web/CSS/CSS_Types +--- +<div>{{CssRef}}</div> + +<p><strong>CSS-Basis-Datentypen</strong> definieren typische Werte (einschließlich Schlüsselwörtern und Einheiten), die von CSS-Eigenschaften und Funktionen akzeptiert werden. Sie sind eine besondere Art eines <a href="https://www.w3.org/TR/css3-values/#component-types">Komponenten-Wertetyp</a>.</p> + +<p>Im formellen Syntax werden Datentypen mit einem Schlüsselwort gekennzeichnet, das zwischen den Zeichen "<" und ">" steht.</p> + +<h2 id="Referenz">Referenz</h2> + +<div class="index"> +<ul> + <li>{{cssxref("<angle>")}}</li> + <li>{{cssxref("<basic-shape>")}}</li> + <li>{{cssxref("<blend-mode>")}}</li> + <li>{{cssxref("<color>")}}</li> + <li>{{cssxref("<custom-ident>")}}</li> + <li>{{cssxref("<filter-function>")}}</li> + <li>{{cssxref("<flex>")}}</li> + <li>{{cssxref("<frequency>")}}</li> + <li>{{cssxref("<gradient>")}}</li> + <li>{{cssxref("<image>")}}</li> + <li>{{cssxref("<integer>")}}</li> + <li>{{cssxref("<length>")}}</li> + <li>{{cssxref("<number>")}}</li> + <li>{{cssxref("<percentage>")}}</li> + <li>{{cssxref("<position>")}}</li> + <li>{{cssxref("<ratio>")}}</li> + <li>{{cssxref("<resolution>")}}</li> + <li>{{cssxref("<shape-box>")}}</li> + <li>{{cssxref("<single-transition-timing-function>")}}</li> + <li>{{cssxref("<string>")}}</li> + <li>{{cssxref("<time>")}}</li> + <li>{{cssxref("<transform-function>")}}</li> + <li>{{cssxref("<url>")}}</li> +</ul> +</div> + +<h2 id="Spezifikationen">Spezifikationen</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 Values') }}</td> + <td>{{ Spec2('CSS3 Values') }}</td> + <td>Erste Definition.</td> + </tr> + </tbody> +</table> diff --git a/files/de/web/css/css_user_interface/index.html b/files/de/web/css/css_user_interface/index.html new file mode 100644 index 0000000000..586426c255 --- /dev/null +++ b/files/de/web/css/css_user_interface/index.html @@ -0,0 +1,116 @@ +--- +title: CSS User Interface +slug: Web/CSS/CSS_User_Interface +tags: + - CSS + - CSS Basic User Interface + - Referenz + - Übersicht +translation_of: Web/CSS/CSS_Basic_User_Interface +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS User Interface</strong> ist ein CSS Modul, das es erlaubt, die Darstellung und Funktionalität von Benutzerschnittstellenfeatures zu definieren.</p> + +<h2 id="Referenz">Referenz</h2> + +<h3 id="Einstellungen">Einstellungen</h3> + +<div class="index"> +<ul> + <li>{{cssxref("box-sizing")}}</li> + <li>{{cssxref("cursor")}}</li> + <li>{{cssxref("outline")}}</li> + <li>{{cssxref("outline-width")}}</li> + <li>{{cssxref("outline-style")}}</li> + <li>{{cssxref("outline-color")}}</li> + <li>{{cssxref("outline-offset")}}</li> + <li>{{cssxref("resize")}}</li> + <li>{{cssxref("text-overflow")}}</li> + <li>{{cssxref("nav-down")}}</li> + <li>{{cssxref("nav-left")}}</li> + <li>{{cssxref("nav-right")}}</li> + <li>{{cssxref("nav-up")}}</li> +</ul> +</div> + +<h2 id="Anleitungen">Anleitungen</h2> + +<dl> + <dt><a href="/de/docs/Web/CSS/CSS_User_Interface/Verwendung_von_URL_Werten_für_die_cursor_Eigenschaft">Verwendung von URL Werten für die <code>cursor</code> Eigenschaft</a></dt> + <dd>Erklärt und zeigt, wie ein URL für die {{cssxref('cursor')}} Eigenschaft angegeben werden kann, um benutzerdefinierte Mauszeiger zu erstellen.</dd> +</dl> + +<h2 id="Spezifikationen">Spezifikationen</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 Basic UI')}}</td> + <td>{{Spec2('CSS3 Basic UI')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'ui.html')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>1.0</td> + <td>1.5 (1.8)</td> + <td>8.0</td> + <td>7.0</td> + <td>1.2 (125)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>1.0</td> + <td>{{CompatGeckoMobile(1.8)}}</td> + <td>8.0</td> + <td>6.0</td> + <td>3.1</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/de/web/css/css_writing_modes/index.html b/files/de/web/css/css_writing_modes/index.html new file mode 100644 index 0000000000..f6815b68b7 --- /dev/null +++ b/files/de/web/css/css_writing_modes/index.html @@ -0,0 +1,109 @@ +--- +title: CSS Writing Modes +slug: Web/CSS/CSS_Writing_Modes +tags: + - CSS + - CSS Referenz + - CSS Writing Modes + - Übersicht +translation_of: Web/CSS/CSS_Writing_Modes +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS Writing Modes</strong> ist ein CSS Modul, das verschiedene internationale Schreibmodi definiert, wie links-nach-rechts (z. B. verwendet von der lateinischen und indischen Schrift), rechts-nach-links (z. B. verwendet von der hebräischen und arabischen Schrift), bidirektional (wenn links-nach-rechts und rechts-nach-links Schriften vermischt werden) und vertikal (z. B. verwendet in einigen asiatischen Schriften).</p> + +<h2 id="CSS_Eigenschaften">CSS Eigenschaften</h2> + +<div class="index"> +<ul> + <li>{{cssxref("direction")}}</li> + <li>{{cssxref("glyph-orientation-horizontal")}}</li> + <li>{{cssxref("text-combine-upright")}}</li> + <li>{{cssxref("text-orientation")}}</li> + <li>{{cssxref("unicode-bidi")}}</li> + <li>{{cssxref("writing-mode")}}</li> +</ul> +</div> + +<h2 id="Guides">Guides</h2> + +<p><em>Keine.</em></p> + +<h2 id="Spezifikationen">Spezifikationen</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 Writing Modes')}}</td> + <td>{{Spec2('CSS3 Writing Modes')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'text.html')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS1')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop(1.0)}}</td> + <td>3</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/de/web/css/cssom_view/index.html b/files/de/web/css/cssom_view/index.html new file mode 100644 index 0000000000..77ba31c695 --- /dev/null +++ b/files/de/web/css/cssom_view/index.html @@ -0,0 +1,99 @@ +--- +title: CSSOM View +slug: Web/CSS/CSSOM_View +tags: + - CSS + - CSSOM View + - Experimentell + - Referenz + - Übersicht +translation_of: Web/CSS/CSSOM_View +--- +<p>{{CSSRef}}{{SeeCompatTable}}</p> + +<p><strong>CSSOM View</strong> ist ein Modul, das es erlaubt, die visuelle Darstellung eines Dokuments zu verändern, insbesondere sein Scrollverhalten.</p> + +<h2 id="Referenz">Referenz</h2> + +<h3 id="Eigenschaften">Eigenschaften</h3> + +<div class="index"> +<ul> + <li>{{cssxref("scroll-behavior")}}</li> +</ul> +</div> + +<h2 id="Anleitungen">Anleitungen</h2> + +<p><em>Keine.</em></p> + +<h2 id="Spezifikationen">Spezifikationen</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('CSSOM View')}}</td> + <td>{{Spec2('CSSOM View')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/de/web/css/cursor/index.html b/files/de/web/css/cursor/index.html new file mode 100644 index 0000000000..f069a478b8 --- /dev/null +++ b/files/de/web/css/cursor/index.html @@ -0,0 +1,300 @@ +--- +title: cursor +slug: Web/CSS/cursor +tags: + - CSS + - CSS Eigenschaft + - Cursor + - NeedsBrowserCompatibility + - NeedsMobileBrowserCompatibility + - Referenz +translation_of: Web/CSS/cursor +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>cursor</code> CSS Eigenschaft legt den Cursor fest, der angezeigt wird, wenn sich der Mauszeiger über einem Element befindet.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css notranslate">/* Schlüsselwortwerte */ +cursor: pointer; +cursor: auto; + +/* Verwendung von URL und Koordinaten */ +cursor: url(cursor1.png) 4 12, auto; +cursor: url(cursor2.png) 2 2, pointer; + +/* Globale Werte */ +cursor: inherit; +cursor: initial; +cursor: unset; +</pre> + +<h2 id="Werte">Werte</h2> + +<dl> + <dt><uri></dt> + <dd>Eine durch Kommata getrennte Liste, die auf benutzerdefinierte Bilder verweist, die als Cursor angezeigt werden sollen. Mehr als eine Angabe macht Sinn, um eine Ausweichlösung (Fallback) bei nicht unterstützten Bildformaten in anderen Browsern bereitzustellen. Am Ende der Liste <strong>muss</strong> ein Fallback stehen, welches einen Cursor ohne URL angibt, um einen Mauszeiger anzeigen zu können, wenn kein benutzerdefiniertes Bild geladen werden kann. Siehe auch: <a href="/de/Verwendung_von_URL_Werten_für_die_cursor_Eigenschaft" title="de/Verwendung_von_URL_Werten_für_die_cursor_Eigenschaft">Verwendung von URL Werten für die cursor Eigenschaft</a> für weitere Details.</dd> + <dt><x> <y> {{ experimental_inline() }}</dt> + <dd>Optionale Angabe von X- und Y-Koordinaten (vom Internet Explorer nicht unterstützt). Angegeben werden zwei Zahlen ohne Einheit.</dd> + <dt>Schlüsselwortwerte</dt> + <dd><strong style="color: red; font-size: big;">Bewege die Maus über einen Wert zum Testen:</strong></dd> + <dd> + <table class="standard-table"> + <tbody> + <tr> + <th>Kategorie</th> + <th>CSS Wert<br> + <span style="font-size: x-small;">Mouseover zum Testen</span></th> + <th></th> + <th>Beschreibung</th> + </tr> + <tr style="cursor: auto;"> + <td rowspan="3">Allgemein</td> + <td><code>auto</code></td> + <td></td> + <td>Der Browser bestimmt aufgrund des aktuellen Kontextes, welcher Cursor angezeigt wird.<br> + Wenn der Mauszeiger sich zum Beispiel über dem Text befindet, wird der <code>text</code> Cursor angezeigt.</td> + </tr> + <tr style="cursor: default;"> + <td><code>default</code></td> + <td><img alt="default.gif" class="default internal" src="/@api/deki/files/3438/=default.gif"></td> + <td>Standard Cursor. Üblicherweise durch ein Pfeil dargestellt.</td> + </tr> + <tr style="cursor: none;"> + <td><code>none</code></td> + <td></td> + <td>Es wird kein Cursor wird angezeigt.</td> + </tr> + <tr style="cursor: context-menu;"> + <td rowspan="5" style="cursor: auto;">Links & Status</td> + <td><code>context-menu</code></td> + <td><img alt="context-menu.png" class="default internal" src="/@api/deki/files/3461/=context-menu.png"></td> + <td>Ein Kontextmenü wird unter dem Cursor angezeigt.<br> + Unter Windows nicht verfügbar. {{ Bug("258960") }}</td> + </tr> + <tr style="cursor: help;"> + <td><code>help</code></td> + <td><img alt="help.gif" class="default internal" src="/@api/deki/files/3442/=help.gif"></td> + <td>Zeigt an, dass Hilfe verfügbar ist.</td> + </tr> + <tr style="cursor: pointer;"> + <td><code>pointer</code></td> + <td><img alt="pointer.gif" class="default internal" src="/@api/deki/files/3449/=pointer.gif"></td> + <td>Wird zum Beispiel angezeigt, wenn der Mauszeiger sich über Links befindet. Üblicherweise durch eine Hand dargestellt.</td> + </tr> + <tr style="cursor: progress;"> + <td><code>progress</code></td> + <td><img alt="progress.gif" class="default internal" src="/@api/deki/files/3450/=progress.gif"></td> + <td>Zeigt an, dass das Programm im Hintergrund arbeitet und der Benutzer kann, anders als bei <code>wait</code>, weiterhin mit der Oberfläche arbeiten.</td> + </tr> + <tr style="cursor: wait;"> + <td><code>wait</code></td> + <td><img alt="wait.gif" class="default internal" src="/@api/deki/files/3457/=wait.gif"></td> + <td>Zeigt an, dass das Programm arbeitet. Manchmal auch durch eine Sanduhr oder eine Uhr dargestellt.</td> + </tr> + <tr style="cursor: cell;"> + <td rowspan="4" style="cursor: auto;">Auswahl</td> + <td><code>cell</code></td> + <td><img alt="cell.gif" class="default internal" src="/@api/deki/files/3434/=cell.gif"></td> + <td>Zeigt an, dass Zellen ausgewählt werden können.</td> + </tr> + <tr style="cursor: crosshair;"> + <td><code>crosshair</code></td> + <td><img alt="crosshair.gif" class="default internal" src="/@api/deki/files/3437/=crosshair.gif"></td> + <td>Ein Kreuz, das oft zur Auswahl eines Bereiches in Bildern verwendet wird.</td> + </tr> + <tr style="cursor: text;"> + <td><code>text</code></td> + <td><img alt="text.gif" class="default internal" src="https://developer.mozilla.org/files/3809/text.gif"></td> + <td>Zeigt an, dass der Text ausgewählt werden kann.</td> + </tr> + <tr style="cursor: vertical-text;"> + <td><code>vertical-text</code></td> + <td><img alt="vertical-text.gif" class="default internal" src="/@api/deki/files/3456/=vertical-text.gif"></td> + <td>Zeigt an, dass vertikaler Text ausgewählt werden kann.</td> + </tr> + <tr style="cursor: alias;"> + <td rowspan="5" style="cursor: auto;">Drag and Drop</td> + <td><code>alias</code></td> + <td><img alt="alias.gif" class="default internal" src="/@api/deki/files/3432/=alias.gif"></td> + <td>Zeigt an, dass ein Tastenkürzel vorhanden ist.</td> + </tr> + <tr style="cursor: copy;"> + <td><code>copy</code></td> + <td><img alt="copy.gif" class="default internal" src="/@api/deki/files/3436/=copy.gif"></td> + <td>Zeigt an, dass etwas kopiert werden kann.</td> + </tr> + <tr style="cursor: move;"> + <td><code>move</code></td> + <td><img alt="move.gif" class="default internal" src="/@api/deki/files/3443/=move.gif"></td> + <td>Zeigt an, dass das Objekt bewegt werden kann.</td> + </tr> + <tr style="cursor: no-drop;"> + <td><code>no-drop</code></td> + <td><img alt="no-drop.gif" class="internal lwrap" src="/@api/deki/files/3445/=no-drop.gif" style="float: left;"></td> + <td>Zeigt an, dass an der aktuellen Stelle nichts hinein gezogen werden darf.<br> + {{bug("275173")}} unter Windows ist <code>no-drop</code> gleich wie <code>not-allowed</code>.</td> + </tr> + <tr style="cursor: not-allowed;"> + <td><code>not-allowed</code></td> + <td><img alt="not-allowed.gif" class="default internal" src="/@api/deki/files/3446/=not-allowed.gif"></td> + <td>Zeigt an, dass hier etwas nicht erlaubt ist.</td> + </tr> + <tr style="cursor: all-scroll;"> + <td rowspan="15" style="cursor: auto;">Skalierung & Scrollen</td> + <td><code>all-scroll</code></td> + <td><img alt="all-scroll.gif" class="default internal" src="/@api/deki/files/3433/=all-scroll.gif"></td> + <td>Zeigt an, dass etwas in alle Richtungen gescrollt werden kann.<br> + {{ bug("275174") }} unter Windows ist <code>all-scroll</code> gleich wie <code>move</code>.</td> + </tr> + <tr style="cursor: col-resize;"> + <td><code>col-resize</code></td> + <td><img alt="col-resize.gif" class="default internal" src="/@api/deki/files/3435/=col-resize.gif"></td> + <td>Zeigt an, dass das Element bzw. die Spalte horizontal skaliert werden kann. Meistens als Pfeile dargestellt, die nach rechts und links zeigen und in der Mitte einen Trennbalken haben.</td> + </tr> + <tr style="cursor: row-resize;"> + <td><code>row-resize</code></td> + <td><img alt="row-resize.gif" class="default internal" src="/@api/deki/files/3451/=row-resize.gif"></td> + <td>Zeigt an, dass das Element bzw. die Zeile vertikal skaliert werden kann. Meistens als Pfeile dargestellt, die nach unten und oben zeigen und in der Mitte einen Trennbalken haben.</td> + </tr> + <tr style="cursor: n-resize;"> + <td><code>n-resize</code></td> + <td><img alt="n-resize.gif" class="default internal" src="https://developer.mozilla.org/files/4083/n-resize.gif"></td> + <td rowspan="8">Zeigt an, dass von einer Ecke aus skaliert werden kann. Der <code>se-resize</code> Cursor wird zum Beispiel benutzt, wenn, von der unteren rechten Ecke aus, etwas bewegt/skaliert werden soll.</td> + </tr> + <tr style="cursor: e-resize;"> + <td><code>e-resize</code></td> + <td><img alt="e-resize.gif" class="default internal" src="https://developer.mozilla.org/files/4085/e-resize.gif"></td> + </tr> + <tr style="cursor: s-resize;"> + <td><code>s-resize</code></td> + <td><img alt="s-resize.gif" class="default internal" src="https://developer.mozilla.org/files/4087/s-resize.gif"></td> + </tr> + <tr style="cursor: w-resize;"> + <td><code>w-resize</code></td> + <td><img alt="w-resize.gif" class="default internal" src="https://developer.mozilla.org/files/4089/w-resize.gif"></td> + </tr> + <tr style="cursor: ne-resize;"> + <td><code>ne-resize</code></td> + <td><img alt="ne-resize.gif" class="default internal" src="https://developer.mozilla.org/files/4091/ne-resize.gif"></td> + </tr> + <tr style="cursor: nw-resize;"> + <td><code>nw-resize</code></td> + <td><img alt="nw-resize.gif" class="default internal" src="https://developer.mozilla.org/files/4093/nw-resize.gif"></td> + </tr> + <tr style="cursor: se-resize;"> + <td><code>se-resize</code></td> + <td><img alt="se-resize.gif" class="default internal" src="https://developer.mozilla.org/files/4097/se-resize.gif"></td> + </tr> + <tr style="cursor: sw-resize;"> + <td><code>sw-resize</code></td> + <td><img alt="sw-resize.gif" class="default internal" src="https://developer.mozilla.org/files/4095/sw-resize.gif"></td> + </tr> + <tr style="cursor: ew-resize;"> + <td><code>ew-resize</code></td> + <td><img alt="ew-resize.gif" class="default internal" src="https://developer.mozilla.org/files/3806/3-resize.gif"></td> + <td rowspan="4">Zeigt an, dass in zwei Richtungen (bidirektional) skaliert werden kann.</td> + </tr> + <tr style="cursor: ns-resize;"> + <td><code>ns-resize</code></td> + <td><img alt="ns-resize.gif" class="default internal" src="https://developer.mozilla.org/files/3808/6-resize.gif"></td> + </tr> + <tr style="cursor: nesw-resize;"> + <td><code>nesw-resize</code></td> + <td><img alt="nesw-resize.gif" class="default internal" src="https://developer.mozilla.org/files/3805/1-resize.gif" style="height: 26px; width: 26px;"></td> + </tr> + <tr style="cursor: nwse-resize;"> + <td><code>nwse-resize</code></td> + <td><img alt="nwse-resize.gif" class="default internal" src="https://developer.mozilla.org/files/3807/4-resize.gif"></td> + </tr> + <tr style="cursor: zoom-in;"> + <td rowspan="2">Zoom</td> + <td><code>zoom-in</code></td> + <td><img alt="zoom-in.gif" class="default" src="/@api/deki/files/3459/=zoom-in.gif"></td> + <td rowspan="2" style="cursor: auto;"> + <p>Indicates that something can be zoomed (magnified) in or out.</p> + </td> + </tr> + <tr style="cursor: zoom-out;"> + <td><code>zoom-out</code></td> + <td><img alt="zoom-out.gif" class="default" src="/@api/deki/files/3460/=zoom-out.gif"></td> + </tr> + <tr id="grab" style="cursor: grab;"> + <td rowspan="2">Greifen</td> + <td><code>grab</code></td> + <td><img alt="grab.gif" class="default" src="/@api/deki/files/3440/=grab.gif"></td> + <td rowspan="2" style="cursor: auto;"> + <p>Indicates that something can be grabbed (dragged to be moved).</p> + </td> + </tr> + <tr style="cursor: grabbing;"> + <td><code>grabbing</code></td> + <td><img alt="grabbing.gif" class="default" src="/@api/deki/files/3441/=grabbing.gif"></td> + </tr> + </tbody> + </table> + </dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox notranslate">{{csssyntax}} +</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="notranslate">.foo { + cursor: crosshair; +} + +/* Benutze move wenn cell nicht unterstützt wird. */ +.bar { + cursor: move; + cursor: cell; +} + +/* Standardwert als Fallback für url() muss angegeben werden (funktioniert nicht ohne) */ +.baz { + cursor: url(hyper.cur), auto; +} +</pre> + +<h2 id="Spezifikationen">Spezifikationen</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 Basic UI', '#cursor', 'cursor')}}</td> + <td>{{Spec2('CSS3 Basic UI')}}</td> + <td>Mehrere Schlüsselwörter und die Positionierungssyntax für <code>url()</code> hinzugefügt.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'ui.html#cursor-props', 'cursor')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{Compat("css.properties.cursor")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/en-US/docs/CSS/Using_URL_values_for_the_cursor_property" title="Using URL values for the cursor property">Using URL values for the cursor property (en)</a></li> + <li>{{cssxref("pointer-events")}}</li> +</ul> diff --git a/files/de/web/css/custom-ident/index.html b/files/de/web/css/custom-ident/index.html new file mode 100644 index 0000000000..babda0dccf --- /dev/null +++ b/files/de/web/css/custom-ident/index.html @@ -0,0 +1,120 @@ +--- +title: <custom-ident> +slug: Web/CSS/custom-ident +tags: + - CSS + - CSS Datentyp + - Layout + - Referenz + - Web +translation_of: Web/CSS/custom-ident +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Der <code><custom-ident></code> <a href="/de/docs/Web/CSS">CSS</a> Datentyp beschreibt eine beliebige benutzerdefinierte Zeichenkette, die als Bezeichner verwendet wird. Er ist schreibungsabhängig und in jedem Kontext sind mehrere Werte ausgeschlossen, um Falschinterpretationen zu vermeiden.</p> + +<h2 id="Syntax">Syntax</h2> + +<p>Seine Syntax ist ähnlich der des CSS Bezeichners mit Ausnahme, dass Groß- und Kleinschreibung berücksichtigt wird: ein <code><custom-ident></code> ist eine Sequenz von Zeichen, wobei Zeichen folgendes sein können:</p> + +<ul> + <li>ein beliebiges alphanumerisches Zeichen (<code>'A'</code> bis <code>'Z'</code> oder <code>'a'</code> bis <code>'z'</code>),</li> + <li>eine beliebige dezimale Ziffer (<code>'0'</code> bis <code>'9'</code>),</li> + <li>ein Bindestrich (<code>'-'</code>)</li> + <li>ein Unterstrich (<code>'_'</code>),</li> + <li>ein escaptes Zeichen (mit einem Backslash, <code>'\'</code>),</li> + <li>oder ein <a class="external" href="http://de.wikipedia.org/wiki/Unicode">Unicode</a> Zeichen (im Format eines Backslashs gefolgt von einer bis sechs hexadezimalen Ziffern, seinem Unicode Codepoint).</li> +</ul> + +<p>Das erste Zeichen darf weder eine dezimale Ziffer, noch ein Bindestrich (<code>'-'</code>) sein, gefolgt von einer dezimalen Ziffer oder einem weiteren Bindestrich. Ein <code><custom-ident></code> darf nicht zwischen einfachen oder doppelten Anführungszeichen stehen, da er sonst identisch zu einem {{cssxref("<string>")}} wäre.</p> + +<p>Beachte, dass <code>id1</code>, <code>Id1</code>, <code>iD1</code> und <code>ID1</code> alle verschiedene Bezeichner sind, da sie sich in <a class="external" href="https://de.wikipedia.org/wiki/Case_sensitivity">Groß-/Kleinschreibung</a> unterscheiden. Im Gegensatz dazu sind <code>toto\?</code> und <code>toto\3F</code> dieselben Bezeichner, da es verschiedene Arten gibt, ein Zeichen zu escapen.</p> + +<h2 id="Liste_ausgeschlossener_Werte">Liste ausgeschlossener Werte</h2> + +<p>Um Mehrdeutigkeiten zu verhindern, definiert jede Eigenschaft, die <code><custom-ident></code> verwendet, eine spezielle Liste an verbotenen Werten:</p> + +<dl> + <dt>{{cssxref("animation-name")}}</dt> + <dd>Verbietet die globalen CSS Werte <code>unset</code>, <code>initial</code> und <code>inherit</code> und den Wert <code>none</code>.</dd> + <dt>{{cssxref("counter-reset")}}</dt> + <dt>{{cssxref("counter-increment")}}</dt> + <dd>Verbietet die globalen CSS Werte <code>unset</code>, <code>initial</code> und <code>inherit</code> und den Wert <code>none</code>.</dd> + <dt>{{cssxref("@counter-style")}}</dt> + <dt>{{cssxref("list-style-type")}}</dt> + <dd>Verbietet die globalen CSS Werte <code>unset</code>, <code>initial</code> und <code>inherit</code>, als auch die Werte <code>none</code>, <code>inline</code> und <code>outside</code>. Auch einige vordefinierte Werte werden von verschiedenen Browsern implementiert: <code>disc</code>, <code>circle</code>, <code>square</code>, <code>decimal</code>, <code>cjk-decimal</code>, <code>decimal-leading-zero</code>, <code>lower-roman</code>, <code>upper-roman</code>, <code>lower-greek</code>, <code>lower-alpha</code>, <code>lower-latin</code>, <code>upper-alpha</code>, <code>upper-latin</code>, <code>arabic-indic</code>, <code>armenian</code>, <code>bengali</code>, <code>cambodian</code>, <code>cjk-earthly-branch</code>, <code>cjk-heavenly-stem</code>, <code>cjk-ideographic</code>, <code>devanagari</code>, <code>ethiopic-numeric</code>, <code>georgian</code>, <code>gujarati</code>, <code>gurmukhi</code>, <code>hebrew</code>, <code>hiragana</code>, <code>hiragana-iroha</code>, <code>japanese-formal</code>, <code>japanese-informal</code>, <code>kannada</code>, <code>katakana</code>, <code>katakana-iroha</code>, <code>khmer</code>, <code>korean-hangul-formal</code>, <code>korean-hanja-formal</code>, <code>korean-hanja-informal</code>, <code>lao</code>, <code>lower-armenian</code>, <code>malayalam</code>, <code>mongolian</code>, <code>myanmar</code>, <code>oriya</code>, <code>persian</code>, <code>simp-chinese-formal</code>, <code>simp-chinese-informal</code>, <code>tamil</code>, <code>telugu</code>, <code>thai</code>, <code>tibetan</code>, <code>trad-chinese-formal</code>, <code>trad-chinese-informal</code>, <code>upper-armenian</code>, <code>disclosure-open</code> und <code>disclosure-close</code>.</dd> + <dt>{{cssxref("will-change")}}</dt> + <dd>Verbietet die globalen CSS Werte <code>unset</code>, <code>initial</code> und <code>inherit</code>, als auch die Werte <code>will-change</code>, <code>auto</code>, <code>scroll-position</code> und <code>contents</code>.</dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<p>Dies sind gültige Bezeichner:</p> + +<pre class="eval">nono79 Eine Mischung aus alphanumerischen Zeichen und Zahlen +ground-level Eine Mischung aus alphanumerischen Zeichen und einem Bindestrich +-test Ein Bindestrich gefolgt von alphanumerischen Zeichen +_internal Ein Unterstrich gefolgt von alphanumerischen Zeichen +\22 toto Ein Unicode-Zeichen gefolgt von einer Sequenz von alphanumerischen Zeichen +bili\.bob Der Punkt ist korrekt escapt +</pre> + +<p>Dies sind ungültige Bezeichner:</p> + +<pre class="eval">34rem Darf nicht mit einer Dezimalziffer anfangen +-12rad Darf nicht mit einem Bindestrich gefolgt von einer Dezimalziffer anfangen +bili.bob Nur alphanumerische Zeichen, _ und - müssen nicht escapt werden +--toto Darf nicht mit zwei Bindestrichen anfangen +'bilibob' Kein <user-ident>, sondern ein {{cssxref("<string>")}} +"bilibob" Kein <user-ident>, sondern ein {{cssxref("<string>")}} +</pre> + +<h2 id="Spezifikationen">Spezifikationen</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 Will Change', '#valdef-will-change-custom-ident', '<code><custom-ident></code> für <code>will-change</code>')}}</td> + <td>{{Spec2('CSS Will Change')}}</td> + <td>Definiert, welche Werte für {{cssxref("will-change")}} ausgeschlossen sind.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Counter Styles', '#typedef-counter-style-name', '<code><custom-ident></code> für <code>list-style-type</code>')}}</td> + <td>{{Spec2('CSS3 Counter Styles')}}</td> + <td>Verwendet <code><custom-ident></code> anstatt einer begrenzten Liste von Schlüsselwörtern und definiert, welche Werte für {{cssxref("list-style-type")}} und {{cssxref("@counter-style")}} ausgeschlossen sind.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Lists', '#counter-properties', '<code><custom-ident></code> für <code>counter-*</code>')}}</td> + <td>{{Spec2('CSS3 Lists')}}</td> + <td>Benennt <code><identifier></code> zu <code><custom-ident></code> um. Fügt seine Verwendung zur neuen <code>counter-set</code> Eigenschaft hinzu.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Animations', '#typedef-single-animation-name', '<code><custom-ident></code> für <code>animation-name</code>')}}</td> + <td>{{Spec2('CSS3 Animations')}}</td> + <td>Definiert, welche Werte für {{cssxref("animation-name")}} ausgeschlossen sind.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Values', '#identifier-value', '<code><custom-ident></code>')}}</td> + <td>{{Spec2('CSS3 Values')}}</td> + <td>Benennt <code><identifier></code> in <code><custom-ident></code> um. Macht ihn zu einem Pseudotyp und verlangt die verschiedenen Verwendungen, um die ausgeschlossenen Werte zu präzisieren.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'syndata.html#value-def-identifier', '<code><identifier></code>')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p><em>Da dieser Typ kein realer Typ ist, sondern ein Bequemlichkeitstyp, der dazu verwendet wird, um die Beschreibung von erlaubten Werten zu vereinfachen, gibt es keine Browser Kompatibilitätsinformationen im engeren Sinne.</em></p> diff --git a/files/de/web/css/direction/index.html b/files/de/web/css/direction/index.html new file mode 100644 index 0000000000..50c1af5f09 --- /dev/null +++ b/files/de/web/css/direction/index.html @@ -0,0 +1,90 @@ +--- +title: direction +slug: Web/CSS/direction +tags: + - CSS + - CSS Eigenschaft + - Referenz +translation_of: Web/CSS/direction +--- +<div>{{CSSRef}}</div> + +<h2 id="Summary" name="Summary">Zusammenfassung</h2> + +<p><span class="seoSummary">Legt die CSS Eigenschaft <code><strong>direction</strong></code> fest damit sie mit der Richtung des Textes übereinstimmt: <code>rtl</code> dür Sprachen welche von rechts nach links geschrieben werden (wie Hebräisch oder Arabisch) und <code>ltr</code> für Sprachen von links nach rechts. Normalerweise ist es jedoch ein Teil des Dokuments (z.B. mit dem dir Attribut in HTML) statt durch den direkten Gebrauch in CSS.</span></p> + +<p>Der Wert legt die grundsätzliche Richtung des Textes von block-level Elementen und die Richtung von Einbindungen, welche von der {{Cssxref("unicode-bidi")}} Eigenschaft erzeugt wird, fest. Auch legt es die grunsätzliche Ausreichtung des Textes, block-level Elemente und die Richtung in welcher Zellen in einer Tabellenzeile angeordnet werden.</p> + +<p>Anders als das <code>dir</code> Attribut in HTML, wird die <code>direction</code> Eigenschaft nicht von Tabellenspalten an die Tabellenzellen vererbt, da CSS Vererbung dem Dokumenten Baum folgt, in welchem Tabellenzellen in Zeilen sind und nicht in Spalten.</p> + +<p>Die <code>direction</code> und {{cssxref("unicode-bidi")}} Eigenschaft sind die einzigen zwei Eigenschaften welche nicht von der {{cssxref("all")}} Kurzform Eigenschaft beinflusst werden.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="brush:css">direction: ltr; +direction: rtl; + +/* Globale Werte*/ +direction: inherit; +direction: initial; +direction: unset; +</pre> + +<h3 id="Values" name="Values">Werte</h3> + +<dl> + <dt><code>ltr</code></dt> + <dd>Der Ausgangswert von <code>direction</code> (wenn nicht anders festgelegt). Text und andere Elemente gehen von links nach rechts.</dd> + <dt><code>rtl</code></dt> + <dd>Text und andere Elemente gehen von rechts nach links.</dd> +</dl> + +<p>Damit die <code>direction</code> Eigenschaft Auswirkungen auf inline-level elemente hat, muss der {{Cssxref("unicode-bidi")}} Eigenschaftswert <code>embed</code> oder <code>override</code> sein.</p> + +<h3 id="Formaler_Syntax">Formaler Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples" name="Examples">Beispiele</h2> + +<pre class="brush: css">blockquote { + direction: rtl; +} +</pre> + +<h2 id="Specification" name="Specification">Spezifikationen</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 Writing Modes', '#direction', 'direction')}}</td> + <td>{{Spec2('CSS3 Writing Modes')}}</td> + <td>Keine Änderung.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'visuren.html#direction', 'direction')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Erste Definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser Kompatibilität</h2> + +{{Compat("css.properties.direction")}} + +<h2 id="See_also" name="See_also">Siehe auch</h2> + +<ul> + <li>{{Cssxref("unicode-bidi")}}</li> + <li>{{Cssxref("writing-mode")}}</li> +</ul> diff --git a/files/de/web/css/display/index.html b/files/de/web/css/display/index.html new file mode 100644 index 0000000000..54b21e29b5 --- /dev/null +++ b/files/de/web/css/display/index.html @@ -0,0 +1,259 @@ +--- +title: display +slug: Web/CSS/display +tags: + - CSS + - CSS Eigenschaft + - CSS Positionierung + - NeedsMobileBrowserCompatibility + - Referenz +translation_of: Web/CSS/display +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>display</code> Eigenschaft legt den Typ einer Rendering-Box eines Elements fest. Für HTML sind die standardmäßigen <code>display</code> Werte in der HTML-Spezifikation beschrieben und in den User- bzw. Browser-Stylesheets angegeben. Für XML-Dokumente ist der voreingestellte Wert <code>inline</code>.</p> + +<p>Zusätzlich zu den vielen verschiedenen Anzeigearten erlaubt der Wert <code>none</code> es, ein Element gänzlich auszublenden; wenn none verwendet wird, werden auch alle Unterelemente ausgeblendet. Das Dokument wird so dargestellt, als ob das Element nicht im Dokumentenbaum existieren würde.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">/* Schlüsselwortwerte */ +display: none; +display: inline; +display: block; +display: contents; +display: list-item; +display: inline-block; +display: inline-table; +display: table; +display: table-cell; +display: table-column; +display: table-column-group; +display: table-footer-group; +display: table-header-group; +display: table-row; +display: table-row-group; +display: flex; +display: inline-flex; +display: grid; +display: inline-grid; +display: ruby; +display: ruby-base; +display: ruby-text; +display: ruby-base-container; +display: ruby-text-container; +display: run-in; + +/* Globale Werte */ +display: inherit; +display: initial; +display: unset; +</pre> + +<h2 id="Werte">Werte</h2> + +<table class="standard-table"> + <thead> + <tr> + <td class="header" colspan="1">Modul</td> + <td class="header">Wert</td> + <td class="header">Beschreibung</td> + </tr> + </thead> + <tbody> + <tr> + <td colspan="1" rowspan="4">Basic values (CSS 1)</td> + <td><code>none</code></td> + <td> + <p>Schaltet die Anzeige eines Elementes aus (das Element hat keinen Effekt mehr auf das Layout des Dokumentes). Alle Kindelemente werden ebenfalls nicht mehr angezeigt. Das Dokument wird so gerendert als wenn das Element nicht im Dokumentenbaum existieren würde.</p> + + <p>Um die Box trotzdem rendern zu lassen, aber den Inhalt unsichtbar zu machen, kann die {{cssxref("visibility")}} Eigenschaft verwendet werden.</p> + </td> + </tr> + <tr> + <td><code>inline</code></td> + <td>Es werden eine oder mehrere inline Elementboxen generiert.</td> + </tr> + <tr> + <td><code>block</code></td> + <td>Es wird eine Blockbox generiert.</td> + </tr> + <tr> + <td><code>list-item</code></td> + <td>Es wird eine <code>block</code> Box für den Inhalt und eine separate <code>inline</code> Box für die List-Items generiert.</td> + </tr> + <tr> + <td>Extended values (CSS 2.1)</td> + <td><code>inline-block</code></td> + <td>Es wird eine <code>block</code> Box generiert, welche den umliegenden Inhalt umfließen lässt, als wenn es eine einzelne <code>inline</code> Box wäre.</td> + </tr> + <tr> + <td colspan="1" rowspan="10">Table model values (CSS 2.1)</td> + <td><code>inline-table</code></td> + <td>Verhält sich wie das {{HTMLElement("table")}} HTML Element, aber es wird ein <code>inline</code> Element generiert.</td> + </tr> + <tr> + <td><code>table</code></td> + <td>Verhält sich wie das {{HTMLElement("table")}} HTML Element. Es wird eine Blockbox generiert.</td> + </tr> + <tr> + <td><code>table-caption</code></td> + <td>Verhält sich wie das {{HTMLElement("caption")}} HTML Element</td> + </tr> + <tr> + <td><code>table-cell</code></td> + <td>Verhält sich wie das {{HTMLElement("td")}} HTML Element</td> + </tr> + <tr> + <td><code>table-column</code></td> + <td>Verhält sich wie das {{HTMLElement("col")}} HTML Element</td> + </tr> + <tr> + <td><code>table-column-group</code></td> + <td>Verhält sich wie das {{HTMLElement("colgroup")}} HTML Element</td> + </tr> + <tr> + <td><code>table-footer-group</code></td> + <td>Verhält sich wie das {{HTMLElement("tfoot")}} HTML Element</td> + </tr> + <tr> + <td><code>table-header-group</code></td> + <td>Verhält sich wie das {{HTMLElement("thead")}} HTML Element</td> + </tr> + <tr> + <td><code>table-row</code></td> + <td>Verhält sich wie das {{HTMLElement("tr")}} HTML Element</td> + </tr> + <tr> + <td><code>table-row-group</code></td> + <td>Verhält sich wie das {{HTMLElement("tbody")}} HTML Element</td> + </tr> + <tr> + <td colspan="1" rowspan="2">Flexbox model values (<a href="/de/docs/CSS/CSS3" title="CSS3">CSS3</a>)</td> + <td><code>flex</code></td> + <td>Es wird ein Flexbox Container als <code>block </code>Element erzeugt.</td> + </tr> + <tr> + <td><code>inline-flex</code></td> + <td>Es wird ein Flexbox Container als <code>inline </code>Element erzeugt.</td> + </tr> + <tr> + <td colspan="1" rowspan="2">Grid box model values (<a href="/de/docs/CSS/CSS3" title="CSS3">CSS3</a>) {{experimental_inline}}</td> + <td><code>grid</code></td> + <td>Es wird ein Grid Container als <code>block </code>Element erzeugt. + </td> + </tr> + <tr> + <td><code>inline-grid</code></td> + <td>Es wird ein Grid Container als <code>inline</code> Element erzeugt.</td> + </tr> + <tr> + <td colspan="1" rowspan="5">Ruby Formatierungsmodell Werte (<a href="/de/docs/Web/CSS/CSS3" title="CSS3">CSS3</a>){{experimental_inline}}</td> + <td><code>ruby</code></td> + <td>Das Element verhält sich wie ein Inlineelement und stellt seinen Inhalt anhand des Ruby Formatierungsmodells dar. Es verhält sich wie die entsprechenden {{HTMLElement("ruby")}} HTML Elemente.</td> + </tr> + <tr> + <td><code>ruby-base</code></td> + <td>Diese Elemente verhalten sich wie {{HTMLElement("rb")}} Elemente.</td> + </tr> + <tr> + <td><code>ruby-text</code></td> + <td>Diese Elemente verhalten sich wie {{HTMLElement("rt")}} Elemente.</td> + </tr> + <tr> + <td><code>ruby-base-container</code></td> + <td>Diese Elemente verhalten sich wie {{HTMLElement("rbc")}} Elemente, die als anonyme Boxen generiert wurden.</td> + </tr> + <tr> + <td><code>ruby-text-container</code></td> + <td>Diese Elemente verhalten sich wie {{HTMLElement("rtc")}} Elemente.</td> + </tr> + <tr> + <td colspan="1" rowspan="2">Experimental values {{experimental_inline}}</td> + <td><code>run-in</code></td> + <td> + <ul> + <li>Wenn eine <code>run-in</code> Box eine <code>block</code> Box enthält, genau wie <code>block</code>.</li> + <li>Wenn einer <code>block</code> Box eine <code>run-in</code> Box folgt, wird die <code>run-in</code> Box die erste <code>inline</code> Box der <code>block</code> Box.</li> + <li>Wenn eine <code>inline</code> Box folgt, wird aus der <code>run-in</code> Box eine <code>block</code> Box.</li> + </ul> + </td> + </tr> + <tr> + <td><code>contents</code></td> + <td>Diese Elemente erzeugen selbst keine spezielle Box. Sie werden durch ihre Pseudobox und deren Kindboxen ersetzt.</td> + </tr> + </tbody> +</table> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<p><a class="external" href="/samples/cssref/display.html" rel="external nofollow" title="https://developer.mozilla.org/samples/cssref/display.html">Live Beispiel</a></p> + +<pre>p.secret { display: none; } +<p class="secret">invisible text</p> +</pre> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Spezifikation</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Anmerkung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Display', '#display', 'display')}}</td> + <td>{{Spec2('CSS3 Display')}}</td> + <td><code>run-in</code> und <code>contents</code> Werte hinzugefügt</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Ruby', '#display', 'display')}}</td> + <td>{{Spec2('CSS3 Ruby')}}</td> + <td><code>ruby</code>, <code>ruby-base</code>, <code>ruby-text</code>, <code>ruby-base-container</code> und <code>ruby-text-container</code> Eigenschaften hinzugefügt</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Grid', '#grid-declaration0', 'display')}}</td> + <td>{{Spec2('CSS3 Grid')}}</td> + <td>Grid Box-Modell hinzugefügt</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Flexbox', '#flex-containers', 'display')}}</td> + <td>{{Spec2('CSS3 Flexbox')}}</td> + <td>Flexbox-Modell hinzugefügt</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'visuren.html#display-prop', 'display')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Table-Model und <code>inline-block</code> hinzugefügt</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#display', 'display')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td><code>none</code>, <code>block</code>, <code>inline</code> und <code>list-item</code> hinzugefügt</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{Compat("css.properties.display", 10)}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{cssxref("visibility")}}, {{cssxref("float")}}, {{cssxref("position")}}</li> + <li>{{cssxref("flex")}}</li> +</ul> diff --git a/files/de/web/css/empty-cells/index.html b/files/de/web/css/empty-cells/index.html new file mode 100644 index 0000000000..97bdbe839f --- /dev/null +++ b/files/de/web/css/empty-cells/index.html @@ -0,0 +1,76 @@ +--- +title: empty-cells +slug: Web/CSS/empty-cells +tags: + - CSS + - CSS Eigenschaft + - CSS Tabellen + - Layout + - NeedsLiveSample + - NeedsMobileBrowserCompatibility + - Referenz + - Web +translation_of: Web/CSS/empty-cells +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>empty-cells</code> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft legt fest, ob Hintergründe und Rahmen leerer Tabellenzellen angezeigt werden sollen.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">/* Schlüsselwortwerte */ +empty-cells: show; +empty-cells: hide; + +/* Globale Werte */ +empty-cells: inherit; +empty-cells: initial; +empty-cells: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code>show</code></dt> + <dd>Ist ein Schlüsselwort, das angibt, dass Ränder und Hintergründe wie in normalen Zellen dargestellt werden sollen.</dd> + <dt><code>hide</code></dt> + <dd>Ist ein Schlüsselwort, das angibt, dass keine Ränder oder Hintergründe dargestellt werden sollen.</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush: css">.contentbox td { + empty-cells: show; +} +</pre> + +<h2 id="Spezifikationen">Spezifikationen</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('CSS2.1', 'tables.html#empty-cells', 'empty-cells')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.properties.empty-cells")}} diff --git a/files/de/web/css/ersetztes_element/index.html b/files/de/web/css/ersetztes_element/index.html new file mode 100644 index 0000000000..c75a4aec95 --- /dev/null +++ b/files/de/web/css/ersetztes_element/index.html @@ -0,0 +1,23 @@ +--- +title: Ersetztes Element +slug: Web/CSS/ersetztes_Element +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/Replaced_element +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>In CSS ist ein <strong>ersetztes Element</strong> ein Element, dessen Darstellung außerhalb des Anwendungsbereichs von CSS liegt. Dies sind eine Art externe Objekte, deren Repräsentation unabhängig von CSS ist. Typische ersetzte Elemente sind {{HTMLElement("img")}}, {{HTMLElement("object")}}, {{HTMLElement("video")}} oder Formularelemente wie {{HTMLElement("textarea")}} und {{HTMLElement("input")}}. Manche Elemente wie {{HTMLElement("audio")}} oder {{HTMLElement("canvas")}} sind nur in bestimmten Fällen ersetzte Elemente. Objekte, die via CSS {{cssxref("content")}} Eigenschaften eingefügt werden, sind <em>anonyme ersetzte Elemente</em>.</p> + +<p>CSS behandelt ersetzte Elemente in manchen Fällen besonders, wie z. B. bei der Berechnung von Außenabständen und einigen <code>auto</code> Werten.</p> + +<p>Beachte, dass manche ersetzte Elemente, jedoch nicht alle, innere Maße oder eine definierte Grundlinie haben, welche von einigen CSS Eigenschaften wie {{cssxref("vertical-align")}} verwendet wird.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{CSS_key_concepts}}</li> +</ul> diff --git a/files/de/web/css/farben/index.html b/files/de/web/css/farben/index.html new file mode 100644 index 0000000000..9e0baf0720 --- /dev/null +++ b/files/de/web/css/farben/index.html @@ -0,0 +1,1285 @@ +--- +title: <color> +slug: Web/CSS/Farben +tags: + - CSS + - CSS Datentyp + - Layout + - NeedsLiveSample + - NeedsMobileBrowserCompatibility + - Referenz + - Web +translation_of: Web/CSS/color_value +--- +<div>{{CSSRef}}</div> + +<p>Der <a href="/de/docs/Web/CSS">CSS</a> Datentyp beschreibt eine Farbe im <a class="external" href="http://de.wikipedia.org/wiki/SRGB">sRGB Farbraum</a>. Eine Farbe kann auf eine dieser Arten beschrieben werden:</p> + +<ul> + <li>durch Benutzung eines <em>Schlüsselworts</em></li> + <li>durch Benutzung des <a class="external" href="https://de.wikipedia.org/wiki/RGB-Farbraum">kubischen RGB Koordinatensystems</a> (durch #-hexadezimal oder die funktionalen Schreibweisen <code>rgb()</code> und <code>rgba()</code>)</li> + <li>durch Benutzung des <a class="external" href="https://de.wikipedia.org/wiki/HSV-Farbraum">zylindrischen HSL Koordinatensystems</a> (durch die funktionalen Schreibweisen <code>hsl()</code> und <code>hsla()</code>)</li> +</ul> + +<p>Beachte, dass die Liste an akzeptierten Farbwerten durch weiterentwickelte Spezifikationen erweitert wurde bis hin zu den neuesten CSS3 Farben.</p> + +<p>In Verbindung mit einer Farbe im sRGB Raum besteht ein <code><color></code>-Wert auch aus einer <a class="external" href="https://de.wikipedia.org/wiki/Alpha_Blending">Alphakanal</a>-Koordinate, einem <em>Transparenzwert</em>, der angibt, wie die Farbe mit der Hintergrundfarbe <a class="external" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#SimpleAlphaBlending">vermischt</a> wird</p> + +<p>Obwohl CSS Farbwerte genau definiert sind, können sie auf verschiedenen Ausgabegeräten unterschiedlich dargestellt werden. Die meisten davon sind nicht kalibriert und manche Browser unterstützen nicht das <a class="external" href="https://de.wikipedia.org/wiki/ICC-Profil">Farbprofil</a> des Ausgabegeräts. Ohne diese kann die Farbdarstellung stark variieren.</p> + +<div class="note"><strong>Hinweis:</strong> Die <a class="external" href="http://www.w3.org/TR/WCAG/#visual-audio-contrast">WCAG 2.0</a> Empfehlung des W3C rät Webauthoren ausdrücklich dazu, <em>Farben</em> nicht als einziges Mittel zur Vermittlung einer bestimmten Information, Aktion oder einem Ergebnis zu verwenden. Manche Benutzer haben Probleme, Farben zu unterscheiden, was das Verständnis der übermittelten Information verhindert. Natürlich verhindert das nicht die Benutzung von Farbe, nur deren Benutzung als einziges Mittel eine Information zu beschreiben.</div> + +<h2 id="Interpolation">Interpolation</h2> + +<p>Werte des <code><color></code> CSS Datentyps können für Animationen und zur Erstellung von {{cssxref("gradient", "<gradient>")}} Werten interpoliert werden. In diesem Fall werden ihre Rot-, Grün- und Blau-Komponenten als eine reale Fließkommazahl interpoliert. Beachte, dass die Interpolation von Farben innerhalb des <a class="external" href="http://www.gimp.org/docs/plug-in/appendix-alpha.html">alpha-vormultiplizierten sRGBA-Farbraums</a> stattfindet, um unerwartete Grautöne zu verhindern. In Animationen wird die Geschwindigkeit der Interlolation durch die zur Animation gehörenden <a href="/de/docs/Web/CSS/timing-function">Timing-Funktion</a> bestimmt.</p> + +<h2 id="Werte">Werte</h2> + +<p>Es gibt mehrere Arten, wie ein <code><color></code> Wert beschrieben werden kann.</p> + +<h3 id="Farbschlüsselwörter">Farbschlüsselwörter</h3> + +<p>Farbschlüsselwörter sind schreibungsunabhängige Bezeichner, welche eine bestimmte Farbe repräsentieren, z. B. <code>red</code>, <code>blue</code>, <code>brown</code>, <code>lightseagreen</code>. Der Name beschreibt die Farbe, er ist jedoch meist erfunden. Die Liste an akzeptierten Werten variiert sehr zwischen den Spezifikationen:</p> + +<ul> + <li>CSS Level 1 akzeptierte nur 16 Grundfarben, bekannt als <em>VGA-Farben</em>, weil sie aus der Menge an darstellbaren Farben von <a class="external" href="http://de.wikipedia.org/wiki/VGA">VGA</a>-Grafikkarten stammen.</li> + <li>CSS Level 2 fügte das <code>orange</code>-Schlüsselwort hinzu.</li> + <li>Von Anfang an haben Browser weitere Farben akzeptiert, meist die X11 genannte Farbliste, da einige frühere Browser X11-basierte Anwendungen waren, allerdings mit einigen Unterschieden. SVG 1.0 war der erste Standard, der diese Schlüsselwörter formal definiert hat; CSS Colors Level 3 hat diese Schlüsselwörter ebenfalls formal definiert. Sie werden oft als <em>erweiterte Farbschlüsselwörter</em>, <em>X11 Farben</em> oder <em>SVG Farben</em> bezeichnet.</li> +</ul> + +<p>Es gibt ein paar Dinge bei der Verwendung von Farbschlüsselwörtern zu beachten:</p> + +<ul> + <li>Außer den 16 Grundfarben, die HTML gemein hat, können keine anderen Farben in HTML verwendet werden. HTML konvertiert diese unbekannten Werte mit einem bestimmten Algorithmus, was zu komplett unterschiedlichen Farben führt. Diese Schlüsselwörter sollten ausschließlich in SVG & CSS verwendet werden.</li> + <li>Unknown keywords make the CSS property invalid. Invalid properties being ignored, the color will have no effect. This is a different behavior than the one of HTML.</li> + <li>Keine als Schlüsselwort definierten Farben haben in CSS eine Transparenz. Sie sind klare, undurchsichtige Farben.</li> + <li>Verschiedene Schlüsselwörter kennzeichnen die gleiche Farbe: + <ul> + <li><code>darkgray</code> / <code>darkgrey</code></li> + <li><code>darkslategray</code> / <code>darkslategrey</code></li> + <li><code>dimgray</code> / <code>dimgrey</code></li> + <li><code>lightgray</code> / <code>lightgrey</code></li> + <li><code>lightslategray</code> / <code>lightslategrey</code></li> + <li><code>gray</code> / <code>grey</code></li> + <li><code>slategray</code> / <code>slategrey</code></li> + </ul> + </li> + <li>Obwohl die Namen der Schlüsselwörter von den gewöhnlichen X11-Farbnamen stammen, können die Farben von den entsprechenden Systemfarben im X11-System abweichen, da sie auf die spezielle Hardware der Hersteller zugeschnitten sind.</li> +</ul> + +<table> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Farbe</th> + <th scope="col">Schlüsselwort</th> + <th scope="col">RGB Hexwerte</th> + <th scope="col">Vorschau</th> + </tr> + </thead> + <tbody> + <tr style="position: relative;"> + <td rowspan="16">{{SpecName("CSS1")}}</td> + <td style="background: #000;"> </td> + <td style="text-align: center;"><code>black</code></td> + <td><code>#000000</code></td> + <td style="background: black;"> </td> + </tr> + <tr> + <td style="background: #C0C0C0;"> </td> + <td style="text-align: center;"><code>silver</code></td> + <td><code>#c0c0c0</code></td> + <td style="background: silver;"> </td> + </tr> + <tr> + <td style="background: #808080;"> </td> + <td style="text-align: center;"><code>gray</code></td> + <td><code>#808080</code></td> + <td style="background: gray;"> </td> + </tr> + <tr> + <td style="background: #FFF;"> </td> + <td style="text-align: center;"><code>white</code></td> + <td><code>#ffffff</code></td> + <td style="background: white;"> </td> + </tr> + <tr> + <td style="background: #800000;"> </td> + <td style="text-align: center;"><code>maroon</code></td> + <td><code>#800000</code></td> + <td style="background: maroon;"> </td> + </tr> + <tr> + <td style="background: #F00;"> </td> + <td style="text-align: center;"><code>red</code></td> + <td><code>#ff0000</code></td> + <td style="background: red;"> </td> + </tr> + <tr> + <td style="background: #800080;"> </td> + <td style="text-align: center;"><code>purple</code></td> + <td><code>#800080</code></td> + <td style="background: purple;"> </td> + </tr> + <tr> + <td style="background: #F0F;"> </td> + <td style="text-align: center;"><code>fuchsia</code></td> + <td><code>#ff00ff</code></td> + <td style="background: fuchsia;"> </td> + </tr> + <tr> + <td style="background: #008000;"> </td> + <td style="text-align: center;"><code>green</code></td> + <td><code>#008000</code></td> + <td style="background: green;"> </td> + </tr> + <tr> + <td style="background: #0F0;"> </td> + <td style="text-align: center;"><code>lime</code></td> + <td><code>#00ff00</code></td> + <td style="background: lime;"> </td> + </tr> + <tr> + <td style="background: #808000;"> </td> + <td style="text-align: center;"><code>olive</code></td> + <td><code>#808000</code></td> + <td style="background: olive;"> </td> + </tr> + <tr> + <td style="background: #FF0;"> </td> + <td style="text-align: center;"><code>yellow</code></td> + <td><code>#ffff00</code></td> + <td style="background: yellow;"> </td> + </tr> + <tr> + <td style="background: #000080;"> </td> + <td style="text-align: center;"><code>navy</code></td> + <td><code>#000080</code></td> + <td style="background: navy;"> </td> + </tr> + <tr> + <td style="background: #00F;"> </td> + <td style="text-align: center;"><code>blue</code></td> + <td><code>#0000ff</code></td> + <td style="background: blue;"> </td> + </tr> + <tr> + <td style="background: #008080;"> </td> + <td style="text-align: center;"><code>teal</code></td> + <td><code>#008080</code></td> + <td style="background: teal;"> </td> + </tr> + <tr> + <td style="background: #0FF;"> </td> + <td style="text-align: center;"><code>aqua</code></td> + <td><code>#00ffff</code></td> + <td style="background: aqua;"> </td> + </tr> + <tr> + <td>{{SpecName("CSS2.1")}}</td> + <td style="background: #FFA500;"> </td> + <td style="text-align: center;"><code>orange</code></td> + <td><code>#ffa500</code></td> + <td style="background: orange;"> </td> + </tr> + <tr> + <td rowspan="128">{{SpecName("CSS3 Colors")}}</td> + <td style="background: #f0f8ff;"> </td> + <td style="text-align: center;"><code>aliceblue</code></td> + <td><code>#f0f8ff</code></td> + <td style="background: aliceblue;"> </td> + </tr> + <tr> + <td style="background: #faebd7;"> </td> + <td style="text-align: center;"><code>antiquewhite</code></td> + <td><code>#faebd7</code></td> + <td style="background: antiquewhite;"> </td> + </tr> + <tr> + <td style="background: #7fffd4;"> </td> + <td style="text-align: center;"><code>aquamarine</code></td> + <td><code>#7fffd4</code></td> + <td style="background: aquamarine;"> </td> + </tr> + <tr> + <td style="background: #f0ffff;"> </td> + <td style="text-align: center;"><code>azure</code></td> + <td><code>#f0ffff</code></td> + <td style="background: azure;"> </td> + </tr> + <tr> + <td style="background: #f5f5dc;"> </td> + <td style="text-align: center;"><code>beige</code></td> + <td><code>#f5f5dc</code></td> + <td style="background: beige;"> </td> + </tr> + <tr> + <td style="background: #ffe4c4;"> </td> + <td style="text-align: center;"><code>bisque</code></td> + <td><code>#ffe4c4</code></td> + <td style="background: bisque;"> </td> + </tr> + <tr> + <td style="background: #ffebcd;"> </td> + <td style="text-align: center;"><code>blanchedalmond</code></td> + <td><code>#ffe4c4</code></td> + <td style="background: blanchedalmond;"> </td> + </tr> + <tr> + <td style="background: #8a2be2;"> </td> + <td style="text-align: center;"><code>blueviolet</code></td> + <td><code>#8a2be2</code></td> + <td style="background: blueviolet;"> </td> + </tr> + <tr> + <td style="background: #a52a2a;"> </td> + <td style="text-align: center;"><code>brown</code></td> + <td><code>#a52a2a</code></td> + <td style="background: brown;"> </td> + </tr> + <tr> + <td style="background: #deb887;"> </td> + <td style="text-align: center;"><code>burlywood</code></td> + <td><code>#deb887</code></td> + <td style="background: burlywood;"> </td> + </tr> + <tr> + <td style="background: #5f9ea0;"> </td> + <td style="text-align: center;"><code>cadetblue</code></td> + <td><code>#5f9ea0</code></td> + <td style="background: cadetblue;"> </td> + </tr> + <tr> + <td style="background: #7fff00;"> </td> + <td style="text-align: center;"><code>chartreuse</code></td> + <td><code>#7fff00</code></td> + <td style="background: chartreuse;"> </td> + </tr> + <tr> + <td style="background: #d2691e;"> </td> + <td style="text-align: center;"><code>chocolate</code></td> + <td><code>#d2691e</code></td> + <td style="background: chocolate;"> </td> + </tr> + <tr> + <td style="background: #ff7f50;"> </td> + <td style="text-align: center;"><code>coral</code></td> + <td><code>#ff7f50</code></td> + <td style="background: coral;"> </td> + </tr> + <tr> + <td style="background: #6495ed;"> </td> + <td style="text-align: center;"><code>cornflowerblue</code></td> + <td><code>#6495ed</code></td> + <td style="background: cornflowerblue;"> </td> + </tr> + <tr> + <td style="background: #fff8dc;"> </td> + <td style="text-align: center;"><code>cornsilk</code></td> + <td><code>#fff8dc</code></td> + <td style="background: cornsilk;"> </td> + </tr> + <tr> + <td style="background: #dc143c;"> </td> + <td style="text-align: center;"><code>crimson</code></td> + <td><code>#dc143c</code></td> + <td style="background: crimson;"> </td> + </tr> + <tr> + <td style="background: #00008b;"> </td> + <td style="text-align: center;"><code>darkblue</code></td> + <td><code>#00008b</code></td> + <td style="background: darkblue;"> </td> + </tr> + <tr> + <td style="background: #008b8b;"> </td> + <td style="text-align: center;"><code>darkcyan</code></td> + <td><code>#008b8b</code></td> + <td style="background: darkcyan;"> </td> + </tr> + <tr> + <td style="background: #b8860b;"> </td> + <td style="text-align: center;"><code>darkgoldenrod</code></td> + <td><code>#b8860b</code></td> + <td style="background: darkgoldenrod;"> </td> + </tr> + <tr> + <td style="background: #a9a9a9;"> </td> + <td style="text-align: center;"><code>darkgray</code></td> + <td><code>#a9a9a9</code></td> + <td style="background: darkgray;"> </td> + </tr> + <tr> + <td style="background: #006400;"> </td> + <td style="text-align: center;"><code>darkgreen</code></td> + <td><code>#006400</code></td> + <td style="background: darkgreen;"> </td> + </tr> + <tr> + <td style="background: #a9a9a9;"> </td> + <td style="text-align: center;"><code>darkgrey</code></td> + <td><code>#a9a9a9</code></td> + <td style="background: darkgrey;"> </td> + </tr> + <tr> + <td style="background: #bdb76b;"> </td> + <td style="text-align: center;"><code>darkkhaki</code></td> + <td><code>#bdb76b</code></td> + <td style="background: darkkhaki;"> </td> + </tr> + <tr> + <td style="background: #8b008b;"> </td> + <td style="text-align: center;"><code>darkmagenta</code></td> + <td><code>#8b008b</code></td> + <td style="background: darkmagenta;"> </td> + </tr> + <tr> + <td style="background: #556b2f;"> </td> + <td style="text-align: center;"><code>darkolivegreen</code></td> + <td><code>#556b2f</code></td> + <td style="background: darkolivegreen;"> </td> + </tr> + <tr> + <td style="background: #ff8c00;"> </td> + <td style="text-align: center;"><code>darkorange</code></td> + <td><code>#ff8c00</code></td> + <td style="background: darkorange;"> </td> + </tr> + <tr> + <td style="background: #9932cc;"> </td> + <td style="text-align: center;"><code>darkorchid</code></td> + <td><code>#9932cc</code></td> + <td style="background: darkorchid;"> </td> + </tr> + <tr> + <td style="background: #8b0000;"> </td> + <td style="text-align: center;"><code>darkred</code></td> + <td><code>#8b0000</code></td> + <td style="background: darkred;"> </td> + </tr> + <tr> + <td style="background: #e9967a;"> </td> + <td style="text-align: center;"><code>darksalmon</code></td> + <td><code>#e9967a</code></td> + <td style="background: darksalmon;"> </td> + </tr> + <tr> + <td style="background: #8fbc8f;"> </td> + <td style="text-align: center;"><code>darkseagreen</code></td> + <td><code>#8fbc8f</code></td> + <td style="background: darkseagreen;"> </td> + </tr> + <tr> + <td style="background: #483d8b;"> </td> + <td style="text-align: center;"><code>darkslateblue</code></td> + <td><code>#483d8b</code></td> + <td style="background: darkslateblue;"> </td> + </tr> + <tr> + <td style="background: #2f4f4f;"> </td> + <td style="text-align: center;"><code>darkslategray</code></td> + <td><code>#2f4f4f</code></td> + <td style="background: darkslategray;"> </td> + </tr> + <tr> + <td style="background: #2f4f4f;"> </td> + <td style="text-align: center;"><code>darkslategrey</code></td> + <td><code>#2f4f4f</code></td> + <td style="background: darkslategrey;"> </td> + </tr> + <tr> + <td style="background: #00ced1;"> </td> + <td style="text-align: center;"><code>darkturquoise</code></td> + <td><code>#00ced1</code></td> + <td style="background: darkturquoise;"> </td> + </tr> + <tr> + <td style="background: #9400d3;"> </td> + <td style="text-align: center;"><code>darkviolet</code></td> + <td><code>#9400d3</code></td> + <td style="background: darkviolet;"> </td> + </tr> + <tr> + <td style="background: #ff1493;"> </td> + <td style="text-align: center;"><code>deeppink</code></td> + <td><code>#ff1493</code></td> + <td style="background: deeppink;"> </td> + </tr> + <tr> + <td style="background: #00bfff;"> </td> + <td style="text-align: center;"><code>deepskyblue</code></td> + <td><code>#00bfff</code></td> + <td style="background: deepskyblue;"> </td> + </tr> + <tr> + <td style="background: #696969;"> </td> + <td style="text-align: center;"><code>dimgray</code></td> + <td><code>#696969</code></td> + <td style="background: dimgray;"> </td> + </tr> + <tr> + <td style="background: #696969;"> </td> + <td style="text-align: center;"><code>dimgrey</code></td> + <td><code>#696969</code></td> + <td style="background: dimgrey;"> </td> + </tr> + <tr> + <td style="background: #1e90ff;"> </td> + <td style="text-align: center;"><code>dodgerblue</code></td> + <td><code>#1e90ff</code></td> + <td style="background: dodgerblue;"> </td> + </tr> + <tr> + <td style="background: #b22222;"> </td> + <td style="text-align: center;"><code>firebrick</code></td> + <td><code>#b22222</code></td> + <td style="background: firebrick;"> </td> + </tr> + <tr> + <td style="background: #fffaf0;"> </td> + <td style="text-align: center;"><code>floralwhite</code></td> + <td><code>#fffaf0</code></td> + <td style="background: floralwhite;"> </td> + </tr> + <tr> + <td style="background: #228b22;"> </td> + <td style="text-align: center;"><code>forestgreen</code></td> + <td><code>#228b22</code></td> + <td style="background: forestgreen;"> </td> + </tr> + <tr> + <td style="background: #dcdcdc;"> </td> + <td style="text-align: center;"><code>gainsboro</code></td> + <td><code>#dcdcdc</code></td> + <td style="background: gainsboro;"> </td> + </tr> + <tr> + <td style="background: #f8f8ff;"> </td> + <td style="text-align: center;"><code>ghostwhite</code></td> + <td><code>#f8f8ff</code></td> + <td style="background: ghostwhite;"> </td> + </tr> + <tr> + <td style="background: #ffd700;"> </td> + <td style="text-align: center;"><code>gold</code></td> + <td><code>#ffd700</code></td> + <td style="background: gold;"> </td> + </tr> + <tr> + <td style="background: #daa520;"> </td> + <td style="text-align: center;"><code>goldenrod</code></td> + <td><code>#daa520</code></td> + <td style="background: goldenrod;"> </td> + </tr> + <tr> + <td style="background: #adff2f;"> </td> + <td style="text-align: center;"><code>greenyellow</code></td> + <td><code>#adff2f</code></td> + <td style="background: greenyellow ;"> </td> + </tr> + <tr> + <td style="background: #808080;"> </td> + <td style="text-align: center;"><code>grey</code></td> + <td><code>#808080</code></td> + <td style="background: grey;"> </td> + </tr> + <tr> + <td style="background: #f0fff0;"> </td> + <td style="text-align: center;"><code>honeydew</code></td> + <td><code>#f0fff0</code></td> + <td style="background: honeydew;"> </td> + </tr> + <tr> + <td style="background: #ff69b4;"> </td> + <td style="text-align: center;"><code>hotpink</code></td> + <td><code>#ff69b4</code></td> + <td style="background: hotpink;"> </td> + </tr> + <tr> + <td style="background: #cd5c5c;"> </td> + <td style="text-align: center;"><code>indianred</code></td> + <td><code>#cd5c5c</code></td> + <td style="background: indianred;"> </td> + </tr> + <tr> + <td style="background: #4b0082;"> </td> + <td style="text-align: center;"><code>indigo</code></td> + <td><code>#4b0082</code></td> + <td style="background: indigo;"> </td> + </tr> + <tr> + <td style="background: #fffff0;"> </td> + <td style="text-align: center;"><code>ivory</code></td> + <td><code>#fffff0</code></td> + <td style="background: ivory;"> </td> + </tr> + <tr> + <td style="background: #f0e68c;"> </td> + <td style="text-align: center;"><code>khaki</code></td> + <td><code>#f0e68c</code></td> + <td style="background: khaki;"> </td> + </tr> + <tr> + <td style="background: #e6e6fa;"> </td> + <td style="text-align: center;"><code>lavender</code></td> + <td><code>#e6e6fa</code></td> + <td style="background: lavender;"> </td> + </tr> + <tr> + <td style="background: #fff0f5;"> </td> + <td style="text-align: center;"><code>lavenderblush</code></td> + <td><code>#fff0f5</code></td> + <td style="background: lavenderblush ;"> </td> + </tr> + <tr> + <td style="background: #7cfc00;"> </td> + <td style="text-align: center;"><code>lawngreen</code></td> + <td><code>#7cfc00</code></td> + <td style="background: lawngreen;"> </td> + </tr> + <tr> + <td style="background: #fffacd;"> </td> + <td style="text-align: center;"><code>lemonchiffon</code></td> + <td><code>#fffacd</code></td> + <td style="background: lemonchiffon;"> </td> + </tr> + <tr> + <td style="background: #add8e6;"> </td> + <td style="text-align: center;"><code>lightblue</code></td> + <td><code>#add8e6</code></td> + <td style="background: lightblue;"> </td> + </tr> + <tr> + <td style="background: #f08080;"> </td> + <td style="text-align: center;"><code>lightcoral</code></td> + <td><code>#f08080</code></td> + <td style="background: lightcoral;"> </td> + </tr> + <tr> + <td style="background: #e0ffff;"> </td> + <td style="text-align: center;"><code>lightcyan</code></td> + <td><code>#e0ffff</code></td> + <td style="background: lightcyan;"> </td> + </tr> + <tr> + <td style="background: #fafad2;"> </td> + <td style="text-align: center;"><code>lightgoldenrodyellow</code></td> + <td><code>#fafad2</code></td> + <td style="background: lightgoldenrodyellow ;"> </td> + </tr> + <tr> + <td style="background: #d3d3d3;"> </td> + <td style="text-align: center;"><code>lightgray</code></td> + <td><code>#d3d3d3</code></td> + <td style="background: lightgray;"> </td> + </tr> + <tr> + <td style="background: #90ee90;"> </td> + <td style="text-align: center;"><code>lightgreen</code></td> + <td><code>#90ee90</code></td> + <td style="background: lightgreen;"> </td> + </tr> + <tr> + <td style="background: #d3d3d3;"> </td> + <td style="text-align: center;"><code>lightgrey</code></td> + <td><code>#d3d3d3</code></td> + <td style="background: lightgrey;"> </td> + </tr> + <tr> + <td style="background: #ffb6c1;"> </td> + <td style="text-align: center;"><code>lightpink</code></td> + <td><code>#ffb6c1</code></td> + <td style="background: lightpink;"> </td> + </tr> + <tr> + <td style="background: #ffa07a;"> </td> + <td style="text-align: center;"><code>lightsalmon</code></td> + <td><code>#ffa07a</code></td> + <td style="background: lightsalmon;"> </td> + </tr> + <tr> + <td style="background: #20b2aa;"> </td> + <td style="text-align: center;"><code>lightseagreen</code></td> + <td><code>#20b2aa</code></td> + <td style="background: lightseagreen;"> </td> + </tr> + <tr> + <td style="background: #87cefa;"> </td> + <td style="text-align: center;"><code>lightskyblue</code></td> + <td><code>#87cefa</code></td> + <td style="background: lightskyblue;"> </td> + </tr> + <tr> + <td style="background: #778899;"> </td> + <td style="text-align: center;"><code>lightslategray</code></td> + <td><code>#778899</code></td> + <td style="background: lightslategray;"> </td> + </tr> + <tr> + <td style="background: #778899;"> </td> + <td style="text-align: center;"><code>lightslategrey</code></td> + <td><code>#778899</code></td> + <td style="background: lightslategrey;"> </td> + </tr> + <tr> + <td style="background: #b0c4de;"> </td> + <td style="text-align: center;"><code>lightsteelblue</code></td> + <td><code>#b0c4de</code></td> + <td style="background: lightsteelblue;"> </td> + </tr> + <tr> + <td style="background: #ffffe0;"> </td> + <td style="text-align: center;"><code>lightyellow</code></td> + <td><code>#ffffe0</code></td> + <td style="background: lightyellow;"> </td> + </tr> + <tr> + <td style="background: #32cd32;"> </td> + <td style="text-align: center;"><code>limegreen</code></td> + <td><code>#32cd32</code></td> + <td style="background: limegreen;"> </td> + </tr> + <tr> + <td style="background: #faf0e6;"> </td> + <td style="text-align: center;"><code>linen</code></td> + <td><code>#faf0e6</code></td> + <td style="background: linen;"> </td> + </tr> + <tr> + <td style="background: #66cdaa;"> </td> + <td style="text-align: center;"><code>mediumaquamarine</code></td> + <td><code>#66cdaa</code></td> + <td style="background: mediumaquamarine;"> </td> + </tr> + <tr> + <td style="background: #0000cd;"> </td> + <td style="text-align: center;"><code>mediumblue</code></td> + <td><code>#0000cd</code></td> + <td style="background: mediumblue;"> </td> + </tr> + <tr> + <td style="background: #ba55d3;"> </td> + <td style="text-align: center;"><code>mediumorchid</code></td> + <td><code>#ba55d3</code></td> + <td style="background: mediumorchid;"> </td> + </tr> + <tr> + <td style="background: #9370db;"> </td> + <td style="text-align: center;"><code>mediumpurple</code></td> + <td><code>#9370db</code></td> + <td style="background: mediumpurple;"> </td> + </tr> + <tr> + <td style="background: #3cb371;"> </td> + <td style="text-align: center;"><code>mediumseagreen</code></td> + <td><code>#3cb371</code></td> + <td style="background: mediumseagreen;"> </td> + </tr> + <tr> + <td style="background: #7b68ee;"> </td> + <td style="text-align: center;"><code>mediumslateblue</code></td> + <td><code>#7b68ee</code></td> + <td style="background: mediumslateblue;"> </td> + </tr> + <tr> + <td style="background: #00fa9a;"> </td> + <td style="text-align: center;"><code>mediumspringgreen</code></td> + <td><code>#00fa9a</code></td> + <td style="background: mediumspringgreen;"> </td> + </tr> + <tr> + <td style="background: #48d1cc;"> </td> + <td style="text-align: center;"><code>mediumturquoise</code></td> + <td><code>#48d1cc</code></td> + <td style="background: mediumturquoise;"> </td> + </tr> + <tr> + <td style="background: #c71585;"> </td> + <td style="text-align: center;"><code>mediumvioletred</code></td> + <td><code>#c71585</code></td> + <td style="background: mediumvioletred;"> </td> + </tr> + <tr> + <td style="background: #191970;"> </td> + <td style="text-align: center;"><code>midnightblue</code></td> + <td><code>#191970</code></td> + <td style="background: midnightblue;"> </td> + </tr> + <tr> + <td style="background: #f5fffa;"> </td> + <td style="text-align: center;"><code>mintcream</code></td> + <td><code>#f5fffa</code></td> + <td style="background: mintcream;"> </td> + </tr> + <tr> + <td style="background: #ffe4e1;"> </td> + <td style="text-align: center;"><code>mistyrose</code></td> + <td><code>#ffe4e1</code></td> + <td style="background: mistyrose;"> </td> + </tr> + <tr> + <td style="background: #ffe4b5;"> </td> + <td style="text-align: center;"><code>moccasin</code></td> + <td><code>#ffe4b5</code></td> + <td style="background: moccasin;"> </td> + </tr> + <tr> + <td style="background: #ffdead;"> </td> + <td style="text-align: center;"><code>navajowhite</code></td> + <td><code>#ffdead</code></td> + <td style="background: navajowhite;"> </td> + </tr> + <tr> + <td style="background: #fdf5e6;"> </td> + <td style="text-align: center;"><code>oldlace</code></td> + <td><code>#fdf5e6</code></td> + <td style="background: oldlace;"> </td> + </tr> + <tr> + <td style="background: #6b8e23;"> </td> + <td style="text-align: center;"><code>olivedrab</code></td> + <td><code>#6b8e23</code></td> + <td style="background: olivedrab;"> </td> + </tr> + <tr> + <td style="background: #ff4500;"> </td> + <td style="text-align: center;"><code>orangered</code></td> + <td><code>#ff4500</code></td> + <td style="background: orangered;"> </td> + </tr> + <tr> + <td style="background: #da70d6;"> </td> + <td style="text-align: center;"><code>orchid</code></td> + <td><code>#da70d6</code></td> + <td style="background: orchid;"> </td> + </tr> + <tr> + <td style="background: #eee8aa;"> </td> + <td style="text-align: center;"><code>palegoldenrod</code></td> + <td><code>#eee8aa</code></td> + <td style="background: palegoldenrod;"> </td> + </tr> + <tr> + <td style="background: #98fb98;"> </td> + <td style="text-align: center;"><code>palegreen</code></td> + <td><code>#98fb98</code></td> + <td style="background: palegreen;"> </td> + </tr> + <tr> + <td style="background: #afeeee;"> </td> + <td style="text-align: center;"><code>paleturquoise</code></td> + <td><code>#afeeee</code></td> + <td style="background: paleturquoise;"> </td> + </tr> + <tr> + <td style="background: #db7093;"> </td> + <td style="text-align: center;"><code>palevioletred</code></td> + <td><code>#db7093</code></td> + <td style="background: palevioletred;"> </td> + </tr> + <tr> + <td style="background: #ffefd5;"> </td> + <td style="text-align: center;"><code>papayawhip</code></td> + <td><code>#ffefd5</code></td> + <td style="background: papayawhip;"> </td> + </tr> + <tr> + <td style="background: #ffdab9;"> </td> + <td style="text-align: center;"><code>peachpuff</code></td> + <td><code>#ffdab9</code></td> + <td style="background: peachpuff;"> </td> + </tr> + <tr> + <td style="background: #cd853f;"> </td> + <td style="text-align: center;"><code>peru</code></td> + <td><code>#cd853f</code></td> + <td style="background: peru;"> </td> + </tr> + <tr> + <td style="background: #ffc0cb;"> </td> + <td style="text-align: center;"><code>pink</code></td> + <td><code>#ffc0cb</code></td> + <td style="background: pink;"> </td> + </tr> + <tr> + <td style="background: #dda0dd;"> </td> + <td style="text-align: center;"><code>plum</code></td> + <td><code>#dda0dd</code></td> + <td style="background: plum;"> </td> + </tr> + <tr> + <td style="background: #b0e0e6;"> </td> + <td style="text-align: center;"><code>powderblue</code></td> + <td><code>#b0e0e6</code></td> + <td style="background: powderblue;"> </td> + </tr> + <tr> + <td style="background: #bc8f8f;"> </td> + <td style="text-align: center;"><code>rosybrown</code></td> + <td><code>#bc8f8f</code></td> + <td style="background: rosybrown;"> </td> + </tr> + <tr> + <td style="background: #4169e1;"> </td> + <td style="text-align: center;"><code>royalblue</code></td> + <td><code>#4169e1</code></td> + <td style="background: royalblue;"> </td> + </tr> + <tr> + <td style="background: #8b4513;"> </td> + <td style="text-align: center;"><code>saddlebrown</code></td> + <td><code>#8b4513</code></td> + <td style="background: saddlebrown;"> </td> + </tr> + <tr> + <td style="background: #fa8072;"> </td> + <td style="text-align: center;"><code>salmon</code></td> + <td><code>#fa8072</code></td> + <td style="background: salmon;"> </td> + </tr> + <tr> + <td style="background: #f4a460;"> </td> + <td style="text-align: center;"><code>sandybrown</code></td> + <td><code>#f4a460</code></td> + <td style="background: sandybrown;"> </td> + </tr> + <tr> + <td style="background: #2e8b57;"> </td> + <td style="text-align: center;"><code>seagreen</code></td> + <td><code>#2e8b57</code></td> + <td style="background: seagreen;"> </td> + </tr> + <tr> + <td style="background: #fff5ee;"> </td> + <td style="text-align: center;"><code>seashell</code></td> + <td><code>#fff5ee</code></td> + <td style="background: seashell;"> </td> + </tr> + <tr> + <td style="background: #a0522d;"> </td> + <td style="text-align: center;"><code>sienna</code></td> + <td><code>#a0522d</code></td> + <td style="background: sienna;"> </td> + </tr> + <tr> + <td style="background: #87ceeb;"> </td> + <td style="text-align: center;"><code>skyblue</code></td> + <td><code>#87ceeb</code></td> + <td style="background: skyblue;"> </td> + </tr> + <tr> + <td style="background: #6a5acd;"> </td> + <td style="text-align: center;"><code>slateblue</code></td> + <td><code>#6a5acd</code></td> + <td style="background: slateblue;"> </td> + </tr> + <tr> + <td style="background: #708090;"> </td> + <td style="text-align: center;"><code>slategray</code></td> + <td><code>#708090</code></td> + <td style="background: slategray;"> </td> + </tr> + <tr> + <td style="background: #708090;"> </td> + <td style="text-align: center;"><code>slategrey</code></td> + <td><code>#708090</code></td> + <td style="background: slategrey;"> </td> + </tr> + <tr> + <td style="background: #fffafa;"> </td> + <td style="text-align: center;"><code>snow</code></td> + <td><code>#fffafa</code></td> + <td style="background: snow;"> </td> + </tr> + <tr> + <td style="background: #00ff7f;"> </td> + <td style="text-align: center;"><code>springgreen</code></td> + <td><code>#00ff7f</code></td> + <td style="background: springgreen;"> </td> + </tr> + <tr> + <td style="background: #4682b4;"> </td> + <td style="text-align: center;"><code>steelblue</code></td> + <td><code>#4682b4</code></td> + <td style="background: steelblue;"> </td> + </tr> + <tr> + <td style="background: #d2b48c;"> </td> + <td style="text-align: center;"><code>tan</code></td> + <td><code>#d2b48c</code></td> + <td style="background: tan;"> </td> + </tr> + <tr> + <td style="background: #d8bfd8;"> </td> + <td style="text-align: center;"><code>thistle</code></td> + <td><code>#d8bfd8</code></td> + <td style="background: thistle;"> </td> + </tr> + <tr> + <td style="background: #ff6347;"> </td> + <td style="text-align: center;"><code>tomato</code></td> + <td><code>#ff6347</code></td> + <td style="background: tomato;"> </td> + </tr> + <tr> + <td style="background: #40e0d0;"> </td> + <td style="text-align: center;"><code>turquoise</code></td> + <td><code>#40e0d0</code></td> + <td style="background: turquoise;"> </td> + </tr> + <tr> + <td style="background: #ee82ee;"> </td> + <td style="text-align: center;"><code>violet</code></td> + <td><code>#ee82ee</code></td> + <td style="background: violet;"> </td> + </tr> + <tr> + <td style="background: #f5deb3;"> </td> + <td style="text-align: center;"><code>wheat</code></td> + <td><code>#f5deb3</code></td> + <td style="background: wheat;"> </td> + </tr> + <tr> + <td style="background: #f5f5f5;"> </td> + <td style="text-align: center;"><code>whitesmoke</code></td> + <td><code>#f5f5f5</code></td> + <td style="background: whitesmoke;"> </td> + </tr> + <tr> + <td style="background: #9acd32;"> </td> + <td style="text-align: center;"><code>yellowgreen</code></td> + <td><code>#9acd32</code></td> + <td style="background: yellowgreen;"> </td> + </tr> + <tr> + <td>{{SpecName("CSS4 Colors")}}</td> + <td style="background: #639;"> </td> + <td style="text-align: center;"><code>rebeccapurple</code></td> + <td><code>#663399</code></td> + <td style="background: rebeccapurple;"> </td> + </tr> + </tbody> +</table> + +<p>Die Farbe <code>rebeccapurple</code> entspricht der Farbe <code>#639</code>. Mehr Informationen darüber, warum sie eingeführt wurde, kann in diesem Codepen Blog Post von Trezy nachgelesen werden: "<a href="http://codepen.io/trezy/blog/honoring-a-great-man">Honoring a Great Man</a>."</p> + +<h3 id="transparent_Schlüsselwort"><code>transparent</code> Schlüsselwort</h3> + +<p>Das <code>transparent</code>-Schlüsselwort beschreibt eine vollkommen transparente Farber, d. h. die dargestellte Farbe ist die Hintergrundfarbe. Technisch ist sie schwarz mit einem Alphakanal mit Minimalwert und ist ein Kürzel für <code>rgba(0,0,0,0)</code>.</p> + +<div class="note"><strong>Historischer Hinweis</strong><br> +Das Schlüsselwort <code>transparent</code> war keine echte Farbe in CSS Level 2 (Revision 1). Es war ein spezifisches Schlüsselwort, das bei zwei CSS-Eigenschaften anstelle eines regulären <code><color></code>-Wertes verwendet werden konnte: {{cssxref("background")}} und {{cssxref("border")}}. Es war eigentlich hinzugefügt, um geerbte Festfarben zu überschreiben.<br> +<br> +Mit der Unterstützung der Deckkraft durch den <a class="external" href="https://de.wikipedia.org/wiki/Alpha_Blending">Alphakanal</a>, wurde <code>transparent</code> in CSS Colors Level 3 neudefiniert als eine echte Farbe, die überall dort verwendet werden kann, wo ein <code><color></code>-Wert benötigt wird, wie der {{cssxref("color")}} Eigenschaft.</div> + +<h3 id="currentColor_Schlüsselwort"><code>currentColor</code> Schlüsselwort</h3> + +<p>Das <code>currentColor</code>-Schlüsselwort beschreibt den berechneten Wert der {{cssxref("color")}} Eigenschaft des Elements. Es erlaubt, die Farbeigenschaften, die von Eigenschaften oder Kindelementeigenschaften zu vererben, die sie normalerweise nicht vererben.</p> + +<p>Es kann auch für Eigenschaften verwendet werden, die den berechneten Wert der {{cssxref("color")}} Eigenschaft des Elements erben und entspricht dem <code>inherit</code> Schlüsselwort bei diesen Elementen, falls es welche gibt.</p> + +<h4 id="Live-Beispiel">Live-Beispiel</h4> + +<p>Die Farbe der Zeile (ein farbgefülltes {{HTMLElement("div")}}) passt sich der Farbe der {{cssxref("color")}} Eigenschaft an, die von seinem Elternelement geerbt wird.</p> + +<div style="width: 50%;"> +<h5 id="Live-Beispiel_1">Live-Beispiel 1</h5> + +<pre class="brush: html"><div style="color:darkred;"> + Die Farbe dieses Texts ist dieselbe wie die der Zeile: + <div style="background:currentcolor; height:1px;"></div> + Mehr Text. +</div></pre> + +<p>{{EmbedLiveSample("Live-Beispiel_1")}}</p> + +<h5 id="Live-Beispiel_2">Live-Beispiel 2</h5> + +<pre class="brush: html"><div style="color:blue; border-bottom: 1px dashed currentcolor;"> + Die Farbe dieses Texts ist dieselbe wie die der Zeile: + <div style="background:currentcolor; height:1px;"></div> + Mehr Text. +</div></pre> + +<p>{{EmbedLiveSample("Live-Beispiel_2")}}</p> +</div> + +<h3 id="rgb()"><a id="rgb" name="rgb"><code>rgb()</code></a></h3> + +<p>Farben können durch das Rot-Grün-Blau-Modell (RGB-Modell) auf zwei Weisen definiert werden:</p> + +<dl> + <dt>Hexadezimale Notation <code>#RRGGBB</code> und <code>#RGB</code></dt> + <dd> + <ul style="margin-bottom: 0;"> + <li>"<code>#</code>", gefolgt von sechs hexadezimalen Zeichen (0-9, A-F).</li> + <li>"<code>#</code>", gefolgt von drei hexadezimalen Zeichen (0-9, A-F).</li> + </ul> + Die Drei-Ziffern-RGB-Notation (<code>#RGB</code>) und die Sechs-Ziffern-Form (<code>#RRGGBB</code>) sind gleich.<br> + Zum Beispiel repräsentieren <code>#f03</code> und <code>#ff0033</code> dieselbe Farbe.</dd> + <dt>Funktionelle Notation <code>rgb(R,G,B)</code></dt> + <dd>"<code>rgb</code>", gefolgt von drei {{cssxref("<integer>")}} oder drei {{cssxref("<percentage>")}} Werten.<br> + Die Ganzzahl 255 entspricht 100% und F oder FF in der hexadezimalen Schreibweise.</dd> +</dl> + +<pre class="eval">/* Diese Beispiele definieren alle dieselbe RGB-Farbe: */ + + #f03 + #F03 + #ff0033 + #FF0033 + rgb(255,0,51) + rgb(255, 0, 51) + <s>rgb(255, 0, 51.2)</s> /* FEHLER! Keine Bruchzahlen verwenden, nur Ganzzahlen. */ + rgb(100%,0%,20%) + rgb(100%, 0%, 20%) + <s>rgb(100%, 0, 20%)</s> /* FEHLER! Ganzzahl- und Prozentschreibweise dürfen nicht gemischt werden. */ +</pre> + +<h3 id="hsl()"><a id="hsl" name="hsl"><code>hsl()</code></a></h3> + +<p>Farben können auch durch das Hue-Saturation-Lightness-Modell (HSL-Modell) unter Verwendung der funktionellen Notation <code>hsl()</code> definiert werden. Der Vorteil von HSL gegenüber RGB ist, dass es wesentlich intuitiver ist: man kann die Zahlen, die man haben will, erraten und dann anpassen. Es ist auch einfacher, Sets passender Farben zu erstellen (indem der Farbwert unverändert bleibt und die Helligkeit/Dunkelheit und Sättigung verändert werden).</p> + +<p>Der <strong>Farbwert</strong> wird als ein Winkel des Farbkreises angegeben (d. h. der Regenbogen als Kreis dargestellt). Der Winkel wird als einheitenlose {{cssxref("<number>")}} angegeben. Per definition <strong>red=0=360</strong> und die anderen Farben sind so auf den Kreis verteilt, sodass <strong>green=120</strong>, <strong>blue=240</strong>, etc. Als Winkel bricht er implizit um, sodass 120=240 und 480=120.</p> + +<p>Sättigung und Helligkeit werden als Prozentwert angegeben.<br> + <code>100%</code> entspricht voller <strong>Sättigung</strong> und <code>0%</code> ist ein Grauton.<br> + <code>100%</code> <strong>Helligkeit</strong> ist weiß, <code>0%</code> Helligkeit ist schwarz und <code>50%</code> Helligkeit ist "normal".</p> + +<pre class="brush: css" style="text-shadow: rgba(255,255,255,0.4) -1px -1px;">hsl(0, 100%,50%) <span style="background-color: hsl(0,100%,50%);"> /* rot */ </span> +hsl(30, 100%,50%) <span style="background: hsl(30,100%,50%);"> </span> +hsl(60, 100%,50%) <span style="background: hsl(60,100%,50%);"> </span> +hsl(90, 100%,50%) <span style="background: hsl(90,100%,50%);"> </span> +hsl(120,100%,50%) <span style="background: hsl(120,100%,50%);"> /* grün */ </span> +hsl(150,100%,50%) <span style="background: hsl(150,100%,50%);"> </span> +hsl(180,100%,50%) <span style="background: hsl(180,100%,50%);"> </span> +hsl(210,100%,50%) <span style="background: hsl(210,100%,50%);"> </span> +hsl(240,100%,50%) <span style="background: hsl(240,100%,50%);"> /* blau */ </span> +hsl(270,100%,50%) <span style="background: hsl(270,100%,50%);"> </span> +hsl(300,100%,50%) <span style="background: hsl(300,100%,50%);"> </span> +hsl(330,100%,50%) <span style="background: hsl(330,100%,50%);"> </span> +hsl(360,100%,50%) <span style="background: hsl(360,100%,50%);"> /* rot */ </span> + +hsl(120,100%,25%) <span style="background: hsl(120,100%,25%);"> /* dunkelgrün */</span> +hsl(120,100%,50%) <span style="background: hsl(120,100%,50%);"> /* grün*/ </span> +hsl(120,100%,75%) <span style="background: hsl(120,100%,75%);"> /* hellgrün */ </span> + +hsl(120,100%,50%) <span style="background: hsl(120,100%,50%);"> /* grün */ </span> +hsl(120, 67%,50%) <span style="background: hsl(120,67%,50%);"> </span> +hsl(120, 33%,50%) <span style="background: hsl(120,33%,50%);"> </span> +hsl(120, 0%,50%) <span style="background: hsl(120,0%,50%);"> </span> + +hsl(120, 60%,70%) <span style="background: hsl(120,60%,70%);"> /* pastelgrün */</span> +</pre> + +<h3 id="rgba()"><a id="rgba" name="rgba"><code>rgba()</code></a></h3> + +<p>Farben können durch das Rot-Grün-Blau-Model (RGB-Modell) unter Verwendungn der funktionellen Notation <code>rgba()</code> verwendet werden. RGBa erweitert das RGB-Farbmodell um einen Alphakanal, der die Deckkraft einer Farbe angibt.<br> + <strong>a</strong> bedeutet Deckkraft: 0=transparent; 1=undurchsichtig;</p> + +<pre class="brush: css">rgba(255, 0, 0, 0.1) <span style="background: rgba(255,0,0,0.1);"> /* 10% undurchsichtiges Rot */ </span> +rgba(255, 0, 0, 0.4) <span style="background: rgba(255,0,0,0.4);"> /* 40% undurchsichtiges Rot */ </span> +rgba(255, 0, 0, 0.7) <span style="background: rgba(255,0,0,0.7);"> /* 70% undurchsichtiges Rot */ </span> +rgba(255, 0, 0, 1) <span style="background: rgba(255,0,0,1);"> /* komplett undurchsichtiges Rot */ </span> +</pre> + +<h3 id="hsla()"><a id="hsla" name="hsla"><code>hsla()</code></a></h3> + +<p>Farben können auch durch das Hue-Saturation-Lightness-Alpha-Modell (HSLa-Modell) unter Verwendung der funktionellen Notation <code>hsla()</code> definiert werden. HSLa erweitert das HSL-Farbmodell um einen Alphakanal, der die Deckkraft einer Farbe angibt.<br> + <strong>a</strong> bedeutet Deckkraft: 0=transparent; 1=undurchsichtig;</p> + +<pre class="brush: css" style="text-shadow: rgba(255, 255, 255, 0.4) -1px -1px;">hsla(240, 100%, 50%, 0.05) <span style="background: hsla(240,100%,50%,0.05);"> /* 5% undurchsichtiges Blau */ </span> +hsla(240,100%,50%, 0.4) <span style="background: hsla(240,100%,50%,0.4);"> /* 40% undurchsichtiges Blau */ </span> +hsla(240,100%,50%, 0.7) <span style="background: hsla(240,100%,50%,0.7);"> /* 70% undurchsichtiges Blau */ </span> +hsla(240,100%,50%, 1) <span style="background: hsla(240,100%,50%,1);"> /* full undurchsichtiges Blau */ </span> +</pre> + +<h3 id="Systemfarben">Systemfarben</h3> + +<p>Nicht alle Systemfarben werden von allen Systemen unterstützt. {{deprecated_inline}} für die Benutzung in öffentlichen Webseiten.</p> + +<dl style="font: small Tahoma,'Liberation Sans','Nimbus Sans L',sans-serif; border: 1px solid powderblue; padding: 0.5em 0pt 0.5em 0.5em; -moz-column-rule: 1px solid powderblue; -moz-column-width: 15em; background: #eee; -webkit-columns: 15em; -webkit-column-rule: 1px solid powderblue; columns: 17em; column-rule: 1px solid powderblue;"> + <dt>ActiveBorder</dt> + <dd>Rahmenfarbe eines aktiven Fensters.</dd> + <dt>ActiveCaption</dt> + <dd>Titelfarbe eines aktiven Fensters. Sollte mit der Vordergrundfarbe <code>CaptionText</code> verwendet werden.</dd> + <dt>AppWorkspace</dt> + <dd>Hintergrundfarbe einer Mehrfachdokumentschnittstelle (MDI).</dd> + <dt>Background</dt> + <dd>Desktophintergrund.</dd> + <dt>ButtonFace</dt> + <dd>Schaltflächenfarbe für 3D-Elemente, die durch eine Ebene umgebender Rahmen dreidimensional erscheinen. Sollte mit der Vordergrundfarbe <code>ButtonText</code> verwendet werden.</dd> + <dt>ButtonHighlight</dt> + <dd>Farbe des dem Licht zugewandten Rahmens eines 3D-Elements, das durch diesen Rahmen dreidimensional erscheint.</dd> + <dt>ButtonShadow</dt> + <dd>Farbe des dem Licht abgewandten Rahmens eines 3D-Elements, das durch diesen Rahmen dreidimensional erscheint.</dd> + <dt>ButtonText</dt> + <dd>Text auf Schaltflächen. Sollte mit der Hintergrundfarbe <code>ButtonFace</code> oder <code>ThreeDFace</code> verwendet werden.</dd> + <dt>CaptionText</dt> + <dd>Farbe des Titeltexts in Fenstern. Sollte mit der Hintergrundfarbe <code>ActiveCaption</code> verwendet werden.</dd> + <dt>GrayText</dt> + <dd>Farbe für ausgegrauten (deaktivierten) Text.</dd> + <dt>Highlight</dt> + <dd>Farbe für ausgewählte Elemente in einem Steuerelement. Sollte mit der Vordergrundfarbe <code>HighlightText</code> verwendet werden.</dd> + <dt>HighlightText</dt> + <dd>Farbe des Texts ausgewählter Elemente in einem Steuerelement. Sollte mit der Hintergrundfarbe <code>Highlight</code> verwendet werden.</dd> + <dt>InactiveBorder</dt> + <dd>Rahmenfarbe eines inaktiven Fensters.</dd> + <dt>InactiveCaption</dt> + <dd>Titelfarbe eines inaktiven Fensters. Sollte mit der Vordergrundfarbe <code>InactiveCaptionText</code> verwendet werden.</dd> + <dt>InactiveCaptionText</dt> + <dd>Farbe des Titeltexts in inaktiven Fenstern. Sollte mit der Hintergrundfarbe <code>InactiveCaption</code> verwendet werden.</dd> + <dt>InfoBackground</dt> + <dd>Hintergrundfarbe für Tooltips. Sollte mit der Vordergrundfarbe <code>InfoText</code> verwendet werden.</dd> + <dt>InfoText</dt> + <dd>Textfarbe für Tooltips. Sollte mit der Hintergrundfarbe <code>InfoBackground</code> verwendet werden.</dd> + <dt>Menu</dt> + <dd>Hintergrundfarbe von Menüs. Sollte mit der Vordergrundfarbe <code>MenuText</code> oder <code>-moz-MenuBarText</code> verwendet werden.</dd> + <dt>MenuText</dt> + <dd>Textfarbe von Menüs. Sollte mit der Hintergrundfarbe <code>Menu</code> verwendet werden.</dd> + <dt>Scrollbar</dt> + <dd>Hintergrundfarbe von Scrollleisten.</dd> + <dt>ThreeDDarkShadow</dt> + <dd>Farbe des dunkleren (normalerweise äußeren) der dem Licht abgewandten zweier Rahmen für 3D-Elemente, die durch zwei Ebenen umgebender konzentrischer Rahmen dreidimensional erscheinen.</dd> + <dt>ThreeDFace</dt> + <dd>Schaltflächenfarbe für 3D-Elemente, die durch zwei Ebenen umgebender konzentrischer Rahmen dreidimensional erscheinen. Sollte mit der Vordergrundfarbe <code>ButtonText</code> verwendet werden.</dd> + <dt>ThreeDHighlight</dt> + <dd>Farbe des helleren (normalerweise äußeren) der dem Licht zugewandten zweier Rahmen für 3D-Elemente, die durch zwei Ebenen umgebender konzentrischer Rahmen dreidimensional erscheinen.</dd> + <dt>ThreeDLightShadow</dt> + <dd>Farbe des dunkleren (normalerweise inneren) der dem Licht zugewandten zweier Rahmen für 3D-Elemente, die durch zwei Ebenen umgebender konzentrischer Rahmen dreidimensional erscheinen.</dd> + <dt>ThreeDShadow</dt> + <dd>Farbe des helleren (normalerweise inneren) der dem Licht abgewandten zweier Rahmen für 3D-Elemente, die durch zwei Ebenen umgebender konzentrischer Rahmen dreidimensional erscheinen.</dd> + <dt>Window</dt> + <dd>Fensterhintergrundfarbe. Sollte mit der Vordergrundfarbe <code>WindowText</code> verwendet werden.</dd> + <dt>WindowFrame</dt> + <dd>Fensterrahmenfarbe.</dd> + <dt>WindowText</dt> + <dd>Textfarbe in Fenstern. Sollte mit der Hintergrundfarbe <code>Window</code> verwendet werden.</dd> +</dl> + +<h3 id="Mozilla_Systemfarben_Erweiterungen">Mozilla Systemfarben Erweiterungen</h3> + +<dl style="font: small Tahoma,'Liberation Sans','Nimbus Sans L',sans-serif; border: 1px solid powderblue; padding: 0.5em 0 0.5em 0.5em; -moz-column-rule: 1px solid powderblue; -moz-column-width: 17em; background: #eee; -webkit-columns: 17em; -webkit-column-rule: 1px solid powderblue; columns: 17em; column-rule: 1px solid powderblue;"> + <dt>-moz-ButtonDefault</dt> + <dd>Rahmenfarbe, die um Schaltflächen angezeigt wird, die die Standardaktion für Dialoge darstellen.</dd> + <dt>-moz-ButtonHoverFace</dt> + <dd>Hintergrundfarbe einer Schaltfläche, über der der Mauszeiger steht (was <code>ThreeDFace</code> oder <code>ButtonFace</code> wäre, wenn der Mauszeiger nicht darübersteht). Sollte mit der Vordergrundfarbe <code>-moz-ButtonHoverText</code> verwendet werden.</dd> + <dt>-moz-ButtonHoverText</dt> + <dd>Textfarbe einer Schaltfläche, über der der Mauszeiger steht (was <code>ButtonText</code> wäre, wenn der Mauszeiger nicht darübersteht). Sollte mit der Hintergrundfarbe <code>-moz-ButtonHoverFace</code> verwendet werden.</dd> + <dt>-moz-CellHighlight</dt> + <dd>Hintergrundfarbe für markierte Elemente in einem Baum. Sollte mit der Vordergrundfarbe <code>-moz-CellHighlightText</code> verwendet werden. Siehe auch <code>-moz-html-CellHighlight</code>.</dd> + <dt>-moz-CellHighlightText</dt> + <dd>Textfarbe für markierte Elemente in einem Baum. Sollte mit der Hintergrundfarbe <code>-moz-CellHighlight</code> verwendet werden. Siehe auch <code>-moz-html-CellHighlightText</code>.</dd> + <dt>-moz-Combobox</dt> + <dd>{{Gecko_minversion_inline("1.9.2")}} Hintergrundfarbe für Combo-Boxen. Sollte mit der Vordergrundfarbe <code>-moz-ComboboxText</code> verwendet werden. In Gecko Versionen vor 1.9.2 sollte stattdessen <code>-moz-Field</code> verwendet werden.</dd> + <dt>-moz-ComboboxText</dt> + <dd>{{Gecko_minversion_inline("1.9.2")}} Textfarbe für Combo-Boxen. Sollte mit der Hintergrundfarbe <code>-moz-Combobox</code> verwendet werden. In Gecko Versionen vor 1.9.2 sollte stattdessen <code>-moz-FieldText</code> verwendet werden.</dd> + <dt>-moz-Dialog</dt> + <dd>Hintergrundfarbe für Dialoge. Sollte mit der Vordergrundfarbe <code>-moz-DialogText</code> verwendet werden.</dd> + <dt>-moz-DialogText</dt> + <dd>Textfarbe für Dialoge. Sollte mit der Hintergrundfarbe <code>-moz-Dialog</code> verwendet werden.</dd> + <dt>-moz-dragtargetzone</dt> + <dt>-moz-EvenTreeRow</dt> + <dd>{{gecko_minversion_inline("1.9")}} Hintergrundfarbe für geradzahlige Zeilen in einem Baum. Sollte mit der Vordergrundfarbe <code>-moz-FieldText</code> verwendet werden. In Gecko Versionen vor 1.9 sollte stattdessen <code>-moz-Field</code> verwendet werden. Siehe auch <code>-moz-OddTreeRow</code>.</dd> + <dt>-moz-Field</dt> + <dd>Hintergrundfarbe für Texteingabefelder. Sollte mit der Vordergrundfarbe <code>-moz-FieldText</code> verwendet werden.</dd> + <dt>-moz-FieldText</dt> + <dd>Textfarbe für Texteingabefelder. Sollte mit der Hintergrundfarbe <code>-moz-Field</code>, <code>-moz-EvenTreeRow</code> oder <code>-moz-OddTreeRow</code> verwendet werden.</dd> + <dt>-moz-html-CellHighlight</dt> + <dd>{{gecko_minversion_inline("1.9")}} Hintergrundfarbe für markierte Elemente in HTML {{HTMLElement("select")}}s. Sollte mit der Vordergrundfarbe <code>-moz-html-CellHighlightText</code> verwendet werden. In Gecko Versionen vor 1.9 sollte stattdessen <code>-moz-CellHighlight</code> verwendet werden.</dd> + <dt>-moz-html-CellHighlightText</dt> + <dd>{{gecko_minversion_inline("1.9")}} Vordergrundfarbe für markierte Elemente in HTML {{HTMLElement("select")}}s. Sollte mit der Hintergrundfarbe <code>-moz-html-CellHighlight</code> verwendet werden. In Gecko Versionen vor 1.9 sollte stattdessen <code>-moz-CellHighlightText</code> verwendet werden.</dd> + <dt>-moz-mac-accentdarkestshadow</dt> + <dt>-moz-mac-accentdarkshadow</dt> + <dt>-moz-mac-accentface</dt> + <dt>-moz-mac-accentlightesthighlight</dt> + <dt>-moz-mac-accentlightshadow</dt> + <dt>-moz-mac-accentregularhighlight</dt> + <dt>-moz-mac-accentregularshadow</dt> + <dt>-moz-mac-chrome-active</dt> + <dd>{{Gecko_minversion_inline("1.9.1")}}</dd> + <dt>-moz-mac-chrome-inactive</dt> + <dd>{{Gecko_minversion_inline("1.9.1")}}</dd> + <dt>-moz-mac-focusring</dt> + <dt>-moz-mac-menuselect</dt> + <dt>-moz-mac-menushadow</dt> + <dt>-moz-mac-menutextselect</dt> + <dt>-moz-MenuHover</dt> + <dd>Hintergrundfarbe für Menüeinträge, über denen der Mauszeiger steht. Oft ähnlich zu <code>Highlight</code>. Sollte mit der Vordergrundfarbe <code>-moz-MenuHoverText</code> oder <code>-moz-MenuBarHoverText</code> verwendet werden.</dd> + <dt>-moz-MenuHoverText</dt> + <dd>Textfarbe für Menüeinträge, über denen der Mauszeiger steht. Oft ähnlich zu <code>HighlightText</code>. Sollte mit der Hintergrundfarbe <code>-moz-MenuHover</code> verwendet werden.</dd> + <dt>-moz-MenuBarText</dt> + <dd>{{Gecko_minversion_inline("1.9.2")}} Vordergrundfarbe für Text in Menüleisten. Oft ähnlich zu <code>MenuText</code>. Sollte auf einem <code>Menu</code> Hintergrund verwendet werden.</dd> + <dt>-moz-MenuBarHoverText</dt> + <dd>{{Gecko_minversion_inline("1.9.2")}} Vordergrundfarbe für Text in Menüleisten, über dem der Mauszeiger steht. Oft ähnlich zu <code>-moz-MenuHoverText</code>. Sollte auf einem <code>-moz-MenuHover</code> Hintergrund verwendet werden.</dd> + <dt>-moz-nativehyperlinktext</dt> + <dd>{{Gecko_minversion_inline("1.9.1")}} Standardplattformfarbe für Hyperlinks.</dd> + <dt>-moz-OddTreeRow</dt> + <dd>{{gecko_minversion_inline("1.9")}} Hintergrundfarbe für ungeradzahlige Zeilen in einem Baum. Sollte mit der Vordergrundfarbe <code>-moz-FieldText</code> verwendet werden. In Gecko Versionen vor 1.9 sollte stattdessen <code>-moz-Field</code> verwendet werden. Siehe auch <code>-moz-EvenTreeRow</code>.</dd> + <dt>-moz-win-communicationstext</dt> + <dd>{{gecko_minversion_inline("1.9")}} Sollte für Text in Objekten mit <code>{{cssxref("-moz-appearance")}}: -moz-win-communications-toolbox;</code> verwendet werden.</dd> + <dt>-moz-win-mediatext</dt> + <dd>{{gecko_minversion_inline("1.9")}} Sollte für Text in Objekten mit <code>{{cssxref("-moz-appearance")}}: -moz-win-media-toolbox;</code> verwendet werden.</dd> +</dl> + +<h3 id="Mozilla_Farbpräferenz_Erweiterungen">Mozilla Farbpräferenz Erweiterungen</h3> + +<dl style="font: small Tahoma,'Liberation Sans','Nimbus Sans L',sans-serif; border: 1px solid powderblue; padding: 0.5em 0 0.5em 0.5em; background: #eee;"> + <dt>-moz-activehyperlinktext</dt> + <dd>Benutzerpräferenz für die Textfarbe aktiver Links. Sollte mit dem Standarddokumenthintergrund verwendet werden.</dd> + <dt> </dt> + <dt>-moz-default-background-color</dt> + <dd>{{Gecko_minversion_inline("5.0")}} Benutzerpräferenz für die Dokumenthintergrundfarbe.</dd> + <dt> </dt> + <dt>-moz-default-color</dt> + <dd>{{Gecko_minversion_inline("5.0")}} Benutzerpräferenz für die Textfarbe.</dd> + <dt>-moz-hyperlinktext</dt> + <dd>Benutzerpräferenz für die Textfarbe nicht besuchter Links. Sollte mit dem Standarddokumenthintergrund verwendet werden.</dd> + <dt>-moz-visitedhyperlinktext</dt> + <dd>Benutzerpräferenz für die Textfarbe besuchter Links. Sollte mit dem Standarddokumenthintergrund verwendet werden.</dd> +</dl> + +<h2 id="Spezifikationen">Spezifikationen</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('CSS4 Colors', '#colorunits', '')}}</td> + <td>{{Spec2('CSS4 Colors')}}</td> + <td><code>rebeccapurple</code> hinzugefügt.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Colors', '#colorunits', '')}}</td> + <td>{{Spec2('CSS3 Colors')}}</td> + <td>Systemfarben als veraltet markiert; SVG-Farben hinzugefügt; functionale Notationen <code>rgba()</code>, <code>hsl()</code> und <code>hsla()</code> hinzugefügt.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'syndata.html#value-def-color', '')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td><code>orange</code> als Farbe und Systemfarben hinzugefügt.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#color-units', '')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{Compat("css.properties.color")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Die {{cssxref("opacity")}} Eigenschaft, die es erlaubt, die Transparenz einer Farbe auf Elementebene zu definieren.</li> + <li>Die {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-shadow")}} und {{cssxref("box-shadow")}} Eigenschaften.</li> +</ul> diff --git a/files/de/web/css/filter/index.html b/files/de/web/css/filter/index.html new file mode 100644 index 0000000000..04901d5c3a --- /dev/null +++ b/files/de/web/css/filter/index.html @@ -0,0 +1,1064 @@ +--- +title: filter +slug: Web/CSS/filter +tags: + - Benötigt Browserunterstützung + - CSS + - CSS Eigenschaft + - CSS Funktion + - Grafik + - Layout + - Referenz + - SVG + - SVG Filter + - Web +translation_of: Web/CSS/filter +--- +<p>{{ CSSRef() }}</p> + +<p>{{ SeeCompatTable() }}</p> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>filter</code> CSS Eigenschaft erlaubt es, Effekte wie Unschärfe oder Farbverschiebungen auf Elemente anzuwenden, bevor sie angezeigt werden. Filter werden normalerweise dazu benutzt, die Darstellung eines Bildes, eines Hintergrunds oder eines Rahmens anzupassen.</p> + +<p>Im CSS Standard inbegriffen sind mehrere Funktionen, die vordefinierte Effekte ermöglichen. Es können auch Filter verwendet werden, die über SVG mit Hilfe des <a href="/de/docs/Web/SVG/Element/filter" title="/en/SVG/Element/filter">SVG Filter Elements</a> angegeben wurden.</p> + +<div class="note"><strong>Hinweis:</strong> Ältere Versionen (4.0 bis einschließlich 9.0) des Internet Explorers unterstützten eine nicht standardisierte <a class="external" href="http://msdn.microsoft.com/en-us/library/ms532853(v=vs.85).aspx" title="http://msdn.microsoft.com/en-us/library/ms532853(v=vs.85).aspx">"filter"</a> Eigenschaft, die mittlerweile missbilligt wird.</div> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<p>Angabe einer Funktion:</p> + +<pre>filter: <filter-function> [<filter-function>]* | none +</pre> + +<p>Für eine Referenz zu einem SVG {{ SVGElement("filter") }} Element:</p> + +<pre class="eval">filter: url(svg-url#element-id) +</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<p>Beispiele zur Benutzung der vordefinierten Funktionen. Siehe die jeweilige Funktion für ein spezifisches Beispiel.</p> + +<pre class="brush: css">.mydiv { filter: grayscale(50%) } + +/* Graut alle Bilder um 50% aus und macht sie um 10px unscharf */ +img { + filter: grayscale(0.5) blur(10px); +}</pre> + +<p>Beispiele zur Benutzung der URL Funktion mit einer SVG Ressource.</p> + +<pre class="brush: css">.target { filter: url(#c1); } + +.mydiv { filter: url(commonfilters.xml#large-blur) } +</pre> + +<h2 id="Funktionen">Funktionen</h2> + +<p>Um die <code>filter</code> Eigenschaft zu verwenden, muss ein Wert für die folgenden Funktionen angegeben werden. Falls der Wert ungültig ist, gibt die Funktion <code>none</code> zurück. Falls nicht anders angegeben, akzeptieren Funktionen, die eine Wertangabe mit Prozentzeichen (wie z. B. <code>34%</code>) akzeptieren, auch einen dezimalen Wert (wie z. B. <code>0.34</code>).</p> + +<h3 id="url(url)"><code>url(url)</code></h3> + +<p>Die <code>url()</code> Funktion erlaubt die Angabe einer XML Datei, die einen SVG Filter definiert, und kann auch einen Anker zu einem bestimmten Element beinhalten.</p> + +<pre class="brush: css">filter: url(resources.svg#c1) +</pre> + +<h3 id="blur(radius)"><code>blur(radius)</code></h3> + +<p>Wendet eine Gaußsche Unschärfe auf das Ursprungsbild an. Der Radiuswert gibt die Standardabweichung der Gaußschen Funktion an, oder wie viele Pixel auf dem Bildschirm mit einander vermischt werden. Ein höherer Wert erzeugt daher eine stärkere Unschärfe. Falls kein Parameter angegeben wird, wird 0 verwendet. Der Parameter wird dabei als {{cssxref("<length>")}} angegeben, akzeptiert jedoch keine Prozentwerte.</p> + +<pre class="brush: css">filter: blur(5px) +</pre> + +<div id="blur_example" style="display: none;"> +<pre class="brush: html"> <table class="standard-table"> + <thead> + <tr> + <th align="left" scope="col">Original image</th> + <th align="left" scope="col">Live example (may need to reload)</th> + <th align="left" scope="col">SVG Equivalent</th> + <th align="left" scope="col">Static example</th> + </tr> + </thead> + <tbody> + <tr> + <td><img alt="Test_Form.jpg" id="img1" class="internal default" src="/files/3710/Test_Form_2.jpg" style="width: 100%;" /></td> + <td><img alt="Test_Form.jpg" id="img2" class="internal default" src="/files/3710/Test_Form_2.jpg" style="width: 100%;" /></td> + <td><div class="svg-container"><svg id="img3" viewbox="0 0 233 176"> + <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%" > + <feGaussianBlur in="SourceGraphic" stdDeviation="5" /> + </filter> + <image xlink:href="/files/3710/Test_Form_2.jpeg" filter="url(#svgBlur)" x="5%" y="5%" width="212px" height="161px" /> +</svg><div></td> + <td><img alt="Test_Form_s.jpg" id="img4" class="internal default" src="/files/3711/Test_Form_2_s.jpg" style="width: 100%;" /></td> + </tr> + </tbody> +</table></pre> + +<pre class="brush: css">html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -moz-filter:blur(5px); + -webkit-filter:blur(5px); + -o-filter:blur(5px); + -ms-filter:blur(5px); + filter:blur(5px); } +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0px; + margin: 0px 0px 1.286em; + height: 100%; + width: 85%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3 { + height:100%; +} +</pre> +</div> + +<pre class="brush: html"><svg height="0" xmlns="http://www.w3.org/2000/svg"> + <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%"> + <feGaussianBlur in="SourceGraphic" stdDeviation="5"/> + </filter> +</svg></pre> + +<p>{{EmbedLiveSample('blur_example','100%','236px','')}}</p> + +<h3 id="brightness(amount)"><code>brightness(amount)</code></h3> + +<p>Wendet eine lineare Multiplikation auf das Ursprungsbild an, sodass es dunkler oder heller erscheint. Ein Wert von <code>0%</code> erzeugt ein Bild, das komplett schwarz ist. Ein Wert von <code>100%</code> lässt das Bild unverändert. Andere Werte sind lineare Multiplikationen dieses Effekts. Werte über <code>100%</code> sind erlaubt und erzeugen hellere Ergebnisse. Falls der <code>amount</code> Parameter fehlt, wird ein Wert von <code>100%</code> verwendet.</p> + +<pre class="brush: css">filter: brightness(0.5)</pre> + +<pre class="brush: html"><svg height="0" xmlns="http://www.w3.org/2000/svg"> + <filter id="brightness"> + <feComponentTransfer> + <feFuncR type="linear" slope="[amount]"/> + <feFuncG type="linear" slope="[amount]"/> + <feFuncB type="linear" slope="[amount]"/> + </feComponentTransfer> + </filter> +</svg></pre> + +<div id="brightness_example" style="display: none;"> +<pre class="brush: html"><table class="standard-table"> + <thead> + <tr> + <th align="left" scope="col">Original image</th> + <th align="left" scope="col">Live example (may need to reload)</th> + <th align="left" scope="col">SVG Equivalent</th> + <th align="left" scope="col">Static example</th> + </tr> + </thead> + <tbody> + <tr> + <td><img alt="Test_Form.jpg" id="img1" class="internal default" src="/files/3708/Test_Form.jpg" style="width: 100%;" /></td> + <td><img alt="Test_Form.jpg" id="img2" class="internal default" src="/files/3708/Test_Form.jpg" style="width: 100%;" /></td> + <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 286 217"> + <filter id="brightness"> + <feComponentTransfer> + <feFuncR type="linear" slope="2"/> + <feFuncG type="linear" slope="2"/> + <feFuncB type="linear" slope="2"/> + </feComponentTransfer> + </filter> + <image xlink:href="/files/3708/Test_Form.jpg" filter="url(#brightness)" width="286px" height="217px" /> +</svg><div></td> + <td><img alt="Test_Form_s.jpg" id="img4" class="internal default" src="/files/3709/Test_Form_s.jpg" style="width: 100%;" /></td> + </tr> + </tbody> +</table> +</pre> + +<pre class="brush: css">html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -moz-filter:brightness(2); + -webkit-filter:brightness(2); + -o-filter:brightness(2); + -ms-filter:brightness(2); + filter:brightness(2); } +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0px; + margin: 0px 0px 1.286em; + height:100%; + width: 85%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3 { + height:100%; +} +</pre> +</div> + +<p>{{EmbedLiveSample('brightness_example','100%','231px','')}}</p> + +<h3 id="contrast(amount)"><code>contrast(amount)</code></h3> + +<p>Passt den Kontrast des Ursprungsbildes an. Ein Wert von 0% erzeugt ein Bild, dass komplett schwarz ist. Ein Wert von <code>100%</code> lässt das Bild unverändert. Werte über <code>100%</code> sind erlaubt und erzeugen Ergebnisse mit weniger Kontrast. Falls der <code>amount</code> Parameter fehlt, wird ein Wert von <code>100%</code> verwendet.</p> + +<pre class="brush: css">filter: contrast(200%) +</pre> + +<pre class="brush: html"><svg height="0" xmlns="http://www.w3.org/2000/svg"> + <filter id="contrast"> + <feComponentTransfer> + <feFuncR type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/> + <feFuncG type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/> + <feFuncB type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/> + </feComponentTransfer> + </filter> +</svg> +</pre> + +<div id="contrast_example" style="display: none;"> +<pre class="brush: html"><table class="standard-table"> + <thead> + <tr> + <th align="left" scope="col">Original image</th> + <th align="left" scope="col">Live example (may need to reload)</th> + <th align="left" scope="col">SVG Equivalent</th> + <th align="left" scope="col">Static example</th> + </tr> + </thead> + <tbody> + <tr> + <td><img alt="Test_Form_3.jpeg" id="img1" class="internal default" src="/files/3712/Test_Form_3.jpeg" style="width: 100%;" /></td> + <td><img alt="Test_Form_3.jpg" id="img2" class="internal default" src="/files/3712/Test_Form_3.jpeg" style="width: 100%;" /></td> + <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 240 151"> + <filter id="contrast"> + <feComponentTransfer> + <feFuncR type="linear" slope="2" intercept="-0.5"/> + <feFuncG type="linear" slope="2" intercept="-0.5"/> + <feFuncB type="linear" slope="2" intercept="-0.5"/> + </feComponentTransfer> + </filter> + <image xlink:href="/files/3712/Test_Form_3.jpeg" filter="url(#contrast)" width="240px" height="151px" /> +</svg><div></td> + <td><img alt="Test_Form_s.jpg" id="img4" class="internal default" src="/files/3713/Test_Form_3_s.jpg" style="width: 100%;" /></td> + </tr> + </tbody> +</table> +</pre> + +<pre class="brush: css">html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -moz-filter:contrast(200%); + -webkit-filter:contrast(200%); + -o-filter:contrast(200%); + -ms-filter:contrast(200%); + filter:contrast(200%); } +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0px; + margin: 0px 0px 1.286em; + width: 85%; + height: 100%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3 { + height:100%; +} +</pre> +</div> + +<p>{{EmbedLiveSample('contrast_example','100%','203px','')}}</p> + +<h3 id="drop-shadow(<shadow>)"><code>drop-shadow(<shadow>)</code></h3> + +<p>Fügt dem Ursprungsbild einen Schlagschatteneffekt hinzu. Ein Schlagschatten ist dabei eigentlich eine unscharfe, versetzte Version der Alphamaske eines Bildes, die in einer bestimmten Farbe dargestellt wird und unterhalb des Bildes angezeigt wird. Die Funktion akzeptiert einen Parameter des Typs <code><shadow></code> (definiert in CSS3 Backgrounds), mit der Ausnahme, dass das Schlüsselwort <code>inset</code> nicht erlaubt ist. Diese Funktion ähnelt der verbreiteteren <code><a href="/de/docs/Web/CSS/box-shadow" title="/en/CSS/box-shadow">box-shadow</a></code> Eigenschaft; der Unterschied besteht darin, dass manche Browser für Filter Hardwarebeschleunigung für eine höhere Geschwindigkeit unterstützen. Die Parameter des <code><shadow></code> Wertes lauten wie folgt:</p> + +<dl> + <dt><code><offset-x></code> <code><offset-y></code> <small>(benötigt)</small></dt> + <dd>Dies sind die zwei {{cssxref("<length>")}} Werte, die den Schattenversatz angeben. <code><offset-x></code> gibt die horizontale Distanz an. Negative Werte positionieren den Schatten links von dem Element. <code><offset-y></code> gibt die vertikale Distanz an. Negative Werte positionieren den Schatten oberhalb des Elements. Siehe {{cssxref("<length>")}} für mögliche Einheiten.<br> + Falls beide Werte <code>0</code> sind, wird der Schatten hinter dem Element platziert (und erzeugt möglicherweise einen Unschärfeeffekt, falls <code><blur-radius></code> und/oder <code><spread-radius></code> gesetzt sind).</dd> + <dt><code><blur-radius></code> <small>(optional)</small></dt> + <dd>Dies ist ein dritter {{cssxref("<length>")}} Wert. Je größer dieser Wert ist, desto größer ist die Unschärfe, d. h. der Schatten wird größer und unschärfer. Negative Werte sind nicht erlaubt. Falls nicht angegeben, wird <code>0</code> verwendet (der Schattenrand wird scharf dargestellt).</dd> + <dt><code><spread-radius></code> <small>(optional)</small></dt> + <dd>Dies ist ein vierter {{cssxref("<length>")}} Wert. Positive Werte erweitern den Schatten und lassen ihn größer erscheinen, negative Werte verkleinern den Schatten. Falls nicht angegeben, wird <code>0</code> verwendet (der Schatten hat die gleiche Größe wie das Element). <br> + <em>Hinweis:</em> WebKit und evtl. andere Browser unterstützen diesen vierten Wert nicht. Er wird nicht dargestellt, falls er angegeben wird.</dd> + <dt><code><color></code> <small>(optional)</small></dt> + <dd>Siehe {{cssxref("<color>")}} für mögliche Schlüsselwörter und Angaben.<br> + Falls nicht angegeben, bestimmt der Browser die Farbe. In Gecko (Firefox), Presto (Opera bis Version 12) und Trident (Internet Explorer) wird der Wert der {{ cssxref("color") }} Eigenschaft verwendet. WebKit (Opera ab Version 15, Chrome) verwendet einen transparenten Schatten und ist daher nutzlos, falls <code><color></code> nicht angegeben wird.</dd> +</dl> + +<pre class="brush: css">filter: drop-shadow(16px 16px 10px black)</pre> + +<pre class="brush: html"><svg height="0" xmlns="http://www.w3.org/2000/svg"> + <filter id="drop-shadow"> + <feGaussianBlur in="SourceAlpha" stdDeviation="[radius]"/> + <feOffset dx="[offset-x]" dy="[offset-y]" result="offsetblur"/> + <feFlood flood-color="[color]"/> + <feComposite in2="offsetblur" operator="in"/> + <feMerge> + <feMergeNode/> + <feMergeNode in="SourceGraphic"/> + </feMerge> + </filter> +</svg> +</pre> + +<div id="shadow_example" style="display: none;"> +<pre class="brush: html"><table class="standard-table"> + <thead> + <tr> + <th align="left" scope="col">Original image</th> + <th align="left" scope="col">Live example (may need to reload)</th> + <th align="left" scope="col">SVG Equivalent</th> + <th align="left" scope="col">Static example</th> + </tr> + </thead> + <tbody> + <tr> + <td><img alt="Test_Form_4.jpeg" id="img1" class="internal default" src="/files/3714/Test_Form_4.jpeg" style="width: 100%;" /></td> + <td><img alt="Test_Form_4.jpg" id="img2" class="internal default" src="/files/3714/Test_Form_4.jpeg" style="width: 100%;" /></td> + <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 239 187"> + <filter id="drop-shadow"> + <feGaussianBlur in="SourceAlpha" stdDeviation="5"/> + <feOffset dx="16" dy="16"/> + <feMerge> + <feMergeNode/> + <feMergeNode in="SourceGraphic"/> + </feMerge> + </filter> + <image xlink:href="/files/3714/Test_Form_4.jpeg" filter="url(#drop-shadow)" width="213px" height="161px" /> +</svg><div></td> + <td><img alt="Test_Form_4_s.jpg" id="img4" class="internal default" src="/files/3715/Test_Form_4_s.jpg" style="width: 100%;" /></td> + </tr> + </tbody> +</table> +</pre> + +<pre class="brush: css">html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -moz-filter: drop-shadow(16px 16px 10px black); + -webkit-filter: drop-shadow(16px 16px 10px black); + -o-filter: drop-shadow(16px 16px 10px black); + -ms-filter: drop-shadow(16px 16px 10px black); + filter: drop-shadow(16px 16px 10px black); +} +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0px; + margin: 0px 0px 1.286em; + width: 85%; + height: 100%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3 { + height:100%; +} +</pre> +</div> + +<p>{{EmbedLiveSample('shadow_example','100%','238px','')}}</p> + +<h3 id="grayscale(amount)"><code>grayscale(amount)</code></h3> + +<p>Konvertiert das Ursprungsbild in Graustufen. Der Wert von <code>amount</code> bestimmt den Anteil der Konvertierung. Ein Wert von <code>100%</code> erzeugt ein komplett graues Ergebnis. Ein Wert von <code>0%</code> lässt das Bild unverändert. Werte zwischen <code>0%</code> und <code>100%</code> sind lineare Multiplikationen dieses Effekts. Falls der <code>amount</code> Parameter nicht angegeben wird, wird <code>100%</code> verwendet.</p> + +<pre class="brush: css">filter: grayscale(100%)</pre> + +<div id="grayscale_example" style="display: none;"> +<pre class="brush: html"><table class="standard-table"> + <thead> + <tr> + <th align="left" scope="col">Original image</th> + <th align="left" scope="col">Live example (may need to reload)</th> + <th align="left" scope="col">SVG Equivalent</th> + <th align="left" scope="col">Static example</th> + </tr> + </thead> + <tbody> + <tr> + <td><img alt="Test_Form_5.jpeg" id="img1" class="internal default" src="/files/3716/Test_Form_5.jpeg" style="width: 100%;" /></td> + <td><img alt="Test_Form_5.jpg" id="img2" class="internal default" src="/files/3716/Test_Form_5.jpeg" style="width: 100%;" /></td> + <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 276 184"> + <filter id="grayscale"> + <feColorMatrix type="matrix" + values="0.2126 0.7152 0.0722 0 0 + 0.2126 0.7152 0.0722 0 0 + 0.2126 0.7152 0.0722 0 0 + 0 0 0 1 0"/> + </filter> + <image xlink:href="/files/3716/Test_Form_5.jpeg" filter="url(#grayscale)" width="276px" height="184px" /> +</svg><div></td> + <td><img alt="Test_Form_5_s.jpg" id="img4" class="internal default" src="/files/3717/Test_Form_5_s.jpg" style="width: 100%;" /></td> + </tr> + </tbody> +</table> +</pre> + +<pre class="brush: css">html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -moz-filter:grayscale(100%); + -webkit-filter:grayscale(100%); + -o-filter:grayscale(100%); + -ms-filter:grayscale(100%); + filter:grayscale(100%); } +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0px; + margin: 0px 0px 1.286em; + width: 85%; + height: 100%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3 { + height:100%; +} +</pre> +</div> + +<p>{{EmbedLiveSample('grayscale_example','100%','209px','')}}</p> + +<h3 id="hue-rotate(angle)"><code>hue-rotate(angle)</code></h3> + +<p>Wendet eine Farbtonrotation auf das Ursprungsbild an. Der Wert von <code>angle</code> gibt die Gradzahl um den Farbkreis an, um den die Ursprungsfarben verschoben werden. Ein Wert von <code>0deg</code> lässt das Bild unverändert. Falls der <code>angle</code> Parameter fehlt, wird <code>0deg</code> verwendet. Der Maximalwert ist <code>360deg</code>.</p> + +<pre class="brush: css">filter: hue-rotate(90deg)</pre> + +<div id="huerotate_example" style="display: none;"> +<pre class="brush: html"><table class="standard-table"> + <thead> + <tr> + <th align="left" scope="col">Original image</th> + <th align="left" scope="col">Live example (may need to reload)</th> + <th align="left" scope="col">SVG Equivalent</th> + <th align="left" scope="col">Static example</th> + </tr> + </thead> + <tbody> + <tr> + <td><img alt="Test_Form_6.jpeg" id="img1" class="internal default" src="/files/3718/Test_Form_6.jpeg" style="width: 100%;" /></td> + <td><img alt="Test_Form_6.jpg" id="img2" class="internal default" src="/files/3718/Test_Form_6.jpeg" style="width: 100%;" /></td> + <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 266 190"> + <filter id="hue-rotate"> + <feColorMatrix type="hueRotate" + values="90"/> + </filter> + <image xlink:href="/files/3718/Test_Form_6.jpeg" filter="url(#hue-rotate)" width="266px" height="190px" /> +</svg><div></td> + <td><img alt="Test_Form_6_s.jpg" id="img4" class="internal default" src="/files/3719/Test_Form_6_s.jpg" style="width: 100%;" /></td> + </tr> + </tbody> +</table> +</pre> + +<pre class="brush: css">html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -moz-filter:hue-rotate(90deg); + -webkit-filter:hue-rotate(90deg); + -o-filter:hue-rotate(90deg); + -ms-filter:hue-rotate(90deg); + filter:hue-rotate(90deg); } +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0px; + margin: 0px 0px 1.286em; + width: 85%; + height: 100%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3 { + height:100%; +} +</pre> +</div> + +<p>{{EmbedLiveSample('huerotate_example','100%','221px','')}}</p> + +<h3 id="invert(amount)"><code>invert(amount)</code></h3> + +<p>Invertiert die Ursprungsfarben des Ursprungsbildes. Der Wert von <code>amount</code> gibt den Anteil der Konvertierung an. Ein Wert von <code>100%</code> erzeugt ein komplett invertiertes Ergebnis. Ein Wert von <code>0%</code> lässt das Bild unverändert. Werte zwischen <code>0%</code> und <code>100%</code> sind lineare Multiplikationen dieses Effekts. Falls der <code>amount</code> Parameter nicht angegeben wird, wird <code>100%</code> verwendet.</p> + +<pre class="brush: css">filter: invert(100%)</pre> + +<div id="invert_example" style="display: none;"> +<pre class="brush: html"><table class="standard-table"> + <thead> + <tr> + <th align="left" scope="col">Original image</th> + <th align="left" scope="col">Live example (may need to reload)</th> + <th align="left" scope="col">SVG Equivalent</th> + <th align="left" scope="col">Static example</th> + </tr> + </thead> + <tbody> + <tr> + <td><img alt="Test_Form_7.jpeg" id="img1" class="internal default" src="/files/3720/Test_Form_7.jpeg" style="width: 100%;" /></td> + <td><img alt="Test_Form_7.jpg" id="img2" class="internal default" src="/files/3720/Test_Form_7.jpeg" style="width: 100%;" /></td> + <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 183 276"> + <filter id="invert"> + <feComponentTransfer> + <feFuncR type="table" tableValues="1 0"/> + <feFuncG type="table" tableValues="1 0"/> + <feFuncB type="table" tableValues="1 0"/> + </feComponentTransfer> + </filter> + <image xlink:href="/files/3720/Test_Form_7.jpeg" filter="url(#invert)" width="183px" height="276px" /> +</svg><div></td> + <td><img alt="Test_Form_7_s.jpg" id="img4" class="internal default" src="/files/3721/Test_Form_7_s.jpg" style="width: 100%;" /></td> + </tr> + </tbody> +</table> +</pre> + +<pre class="brush: css">html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -moz-filter: invert(100%); + -webkit-filter: invert(100%); + -o-filter: invert(100%); + -ms-filter: invert(100%); + filter: invert(100%); } +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0px; + margin: 0px 0px 1.286em; + width: 85%; + height: 100%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3 { + height:100%; +} +</pre> +</div> + +<p>{{EmbedLiveSample('invert_example','100%','407px','')}}</p> + +<h3 id="opacity(amount)"><code>opacity(amount)</code></h3> + +<p>Fügt den Farben des Ursprungsbildes eine Transparenz hinzu. Der Wert von <code>amount</code> gibt den Anteil der Konvertierung an. Ein Wert von <code>0%</code> erzeugt ein komplett transparentes Ergebnis. Ein Wert von <code>100%</code> lässt das Bild unverändert. Werte zwischen <code>0%</code> und <code>100%</code> sind lineare Multiplikationen dieses Effekts. Dies ist equivalent zur Multiplikation der Ursprungsfarben mit amount. Falls der <code>amount</code> Parameter nicht angegeben wird, wird <code>100%</code> verwendet. Diese Funktion ist ähnlich zu der verbreiteteren <a href="/de/docs/Web/CSS/opacity" title="/en/CSS/opacity">opacity</a> Eigenschaft; der Unterschied besteht darin, dass manche Browser für Filter Hardwarebeschleunigung für eine höhere Geschwindigkeit unterstützen.</p> + +<pre class="brush: css">filter: opacity(50%)</pre> + +<div id="opacity_example" style="display: none;"> +<pre class="brush: html"><table class="standard-table"> + <thead> + <tr> + <th align="left" scope="col">Original image</th> + <th align="left" scope="col">Live example (may need to reload)</th> + <th align="left" scope="col">SVG Equivalent</th> + <th align="left" scope="col">Static example</th> + </tr> + </thead> + <tbody> + <tr> + <td><img alt="Test_Form_14.jpeg" id="img1" class="internal default" src="/files/3725/Test_Form_14.jpeg" style="width: 100%;" /></td> + <td><img alt="Test_Form_14.jpg" id="img2" class="internal default" src="/files/3725/Test_Form_14.jpeg" style="width: 100%;" /></td> + <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 276 183"> + <filter id="opacity"> + <feComponentTransfer> + <feFuncA type="table" tableValues="0 0.5"> + </feComponentTransfer> + </filter> + <image xlink:href="/files/3725/Test_Form_14.jpeg" filter="url(#opacity)" width="276px" height="183px" /> +</svg><div></td> + <td><img alt="Test_Form_14_s.jpg" id="img4" class="internal default" src="/files/3726/Test_Form_14_s.jpg" style="width: 100%;" /></td> + </tr> + </tbody> +</table> +</pre> + +<pre class="brush: css">html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -moz-filter: opacity(50%); + -webkit-filter: opacity(50%); + -o-filter: opacity(50%); + -ms-filter: opacity(50%); + filter: opacity(50%); } +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0px; + margin: 0px 0px 1.286em; + width: 85%; + height: 100%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3 { + height:100%; +} +</pre> +</div> + +<p>{{EmbedLiveSample('opacity_example','100%','210px','')}}</p> + +<h3 id="saturate(amount)"><code>saturate(amount)</code></h3> + +<p>Sättigt das Ursprungsbild. Der Wert von <code>amount</code> gibt den Anteil der Konvertierung an. Ein Wert von <code>0%</code> erzeugt ein komplett ungesättigtes Ergebnis. Ein Wert von <code>100%</code> lässt das Bild unverändert. Andere Werte sind lineare Multiplikationen dieses Effekts. Werte für <code>amount</code> über 100% sind erlaubt und erzeugen übersättigte Ergebnisse. Falls der <code>amount</code> Parameter nicht angegeben wird, wird <code>100%</code> verwendet.</p> + +<pre class="brush: css">filter: saturate(200%)</pre> + +<div id="saturate_example" style="display: none;"> +<pre class="brush: html"><table class="standard-table"> + <thead> + <tr> + <th align="left" scope="col">Original image</th> + <th align="left" scope="col">Live example (may need to reload)</th> + <th align="left" scope="col">SVG Equivalent</th> + <th align="left" scope="col">Static example</th> + </tr> + </thead> + <tbody> + <tr> + <td><img alt="Test_Form_9.jpeg" id="img1" class="internal default" src="/files/3722/Test_Form_9.jpeg" style="width: 100%;" /></td> + <td><img alt="Test_Form_9.jpg" id="img2" class="internal default" src="/files/3722/Test_Form_9.jpeg" style="width: 100%;" /></td> + <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 201 239"> + <filter id="saturate"> + <feColorMatrix type="saturate" + values="2"/> + </filter> + <image xlink:href="/files/3722/Test_Form_9.jpeg" filter="url(#saturate)" width="201px" height="239px" /> +</svg><div></td> + <td><img alt="Test_Form_9_s.jpg" id="img4" class="internal default" src="/files/3724/Test_Form_9_s.jpeg" style="width: 100%;" /></td> + </tr> + </tbody> +</table> +</pre> + +<pre class="brush: css">html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -moz-filter: saturate(200%); + -webkit-filter: saturate(200%); + -o-filter: saturate(200%); + -ms-filter: saturate(200%); + filter: saturate(200%); } +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0px; + margin: 0px 0px 1.286em; + width: 85%; + height: 100%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3 { + height:100%; +} +</pre> +</div> + +<p>{{EmbedLiveSample('saturate_example','100%','332px','')}}</p> + +<h3 id="sepia(amount)"><code>sepia(amount)</code></h3> + +<p>Konvertiert das Ursprungsbild in Sepiafarben. Der Wert von <code>amount</code> bestimmt den Anteil der Konvertierung. Ein Wert von <code>100%</code> erzeugt ein komplett sepiafarbenes Ergebnis. Ein Wert von <code>0%</code> lässt das Bild unverändert. Werte zwischen <code>0%</code> und <code>100%</code> sind lineare Multiplikationen dieses Effekts. Falls der <code>amount</code> Parameter nicht angegeben wird, wird <code>100%</code> verwendet.</p> + +<pre class="brush: css">filter: sepia(100%)</pre> + +<div id="sepia_example" style="display: none;"> +<pre class="brush: html"><table class="standard-table"> + <thead> + <tr> + <th align="left" scope="col">Original image</th> + <th align="left" scope="col">Live example (may need to reload)</th> + <th align="left" scope="col">SVG Equivalent</th> + <th align="left" scope="col">Static example</th> + </tr> + </thead> + <tbody> + <tr> + <td><img alt="Test_Form_12.jpeg" id="img1" class="internal default" src="/files/3727/Test_Form_12.jpeg" style="width: 100%;" /></td> + <td><img alt="Test_Form_12.jpg" id="img2" class="internal default" src="/files/3727/Test_Form_12.jpeg" style="width: 100%;" /></td> + <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 259 194"> + <filter id="sepia"> + <feColorMatrix type="matrix" + values="0.393 0.769 0.189 0 0 + 0.349 0.686 0.168 0 0 + 0.272 0.534 0.131 0 0 + 0 0 0 1 0"/> + </filter> + <image xlink:href="/files/3727/Test_Form_12.jpeg" filter="url(#sepia)" width="259px" height="194px" /> +</svg><div></td> + <td><img alt="Test_Form_12_s.jpg" id="img4" class="internal default" src="/files/3728/Test_Form_12_s.jpg" style="width: 100%;" /></td> + </tr> + </tbody> +</table> +</pre> + +<pre class="brush: css">html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -moz-filter: sepia(100%); + -webkit-filter: sepia(100%); + -o-filter: sepia(100%); + -ms-filter: sepia(100%); + filter: sepia(100%); } +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0px; + margin: 0px 0px 1.286em; + width: 85%; + height: 100%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3 { + height:100%; +} +</pre> +</div> + +<p>{{EmbedLiveSample('sepia_example','100%','229px','')}}</p> + +<h2 id="Kombinierte_Funktionen">Kombinierte Funktionen</h2> + +<p>Eine beliebige Anzahl an Funktionen kann kombiniert werden, um die Ausgabe zu verändert. Das folgende Beispiel verstärkt den Kontrast und die Helligkeit des Bildes.</p> + +<pre class="brush: css">filter: contrast(175%) brightness(3%)</pre> + +<div id="combination_example" style="display: none;"> +<pre class="brush: html"><table class="standard-table"> + <thead> + <tr> + <th align="left" scope="col">Original image</th> + <th align="left" scope="col">Live example (may need to reload)</th> + <th align="left" scope="col">Static example</th> + </tr> + </thead> + <tbody> + <tr> + <td><img alt="Test_Form_8.jpeg" id="img1" class="internal default" src="/files/3729/Test_Form_8.jpeg" style="width: 100%;" /></td> + <td><img alt="Test_Form_8.jpg" id="img2" class="internal default" src="/files/3729/Test_Form_8.jpeg" style="width: 100%;" /></td> + <td><img alt="Test_Form_8_s.jpg" id="img4" class="internal default" src="/files/3730/Test_Form_8_s.jpeg" style="width: 100%;" /></td> + </tr> + </tbody> +</table> +</pre> + +<pre class="brush: css">html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -moz-filter: contrast(175%) brightness(103%); + -webkit-filter: contrast(175%) brightness(103%); + -o-filter: contrast(175%) brightness(103%); + -ms-filter: contrast(175%) brightness(103%); + filter: contrast(175%) brightness(103%); +} +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0px; + margin: 0px 0px 1.286em; + width: 85%; + height: 100%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3 { + height:100%; +} +</pre> +</div> + +<p>{{EmbedLiveSample('combination_example','100%','209px','')}}</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('Filters 1.0', '#FilterProperty', 'filter') }}</td> + <td>{{ Spec2('Filters 1.0') }}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilit.C3.A4t" name="Browser_Kompatibilit.C3.A4t">Browser Kompatibilität</h2> + +{{Compat("css.properties.filter")}} + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a class="internal" href="/de/docs/SVG_Filtereffekte_auf_HTML_Inhalte_anwenden" title="En/Applying SVG effects to HTML content">Applying SVG effects to HTML content</a></li> + <li>Die {{ Cssxref("mask") }} Eigenschaft</li> + <li><a class="internal" href="/de/docs/Web/SVG" title="En/SVG">SVG</a></li> + <li><a class="external" href="https://www.html5rocks.com/en/tutorials/filters/understanding-css/" title="http://www.html5rocks.com/en/tutorials/filters/understanding-css/">Understanding CSS filters</a>, HTML5Rocks! Artikel</li> + <li><a class="external" href="https://techstream.org/Web-Design/CSS3-Image-Filters" title="CSS filters">CSS 3 filters</a> Tech Stream Artikel</li> + <li><a class="external" href="https://davidwalsh.name/css-filters" title="CSS filters">CSS filters</a> von David Walsh</li> +</ul> diff --git a/files/de/web/css/flex-flow/index.html b/files/de/web/css/flex-flow/index.html new file mode 100644 index 0000000000..7eca4d3ecb --- /dev/null +++ b/files/de/web/css/flex-flow/index.html @@ -0,0 +1,64 @@ +--- +title: flex-flow +slug: Web/CSS/flex-flow +tags: + - CSS + - CSS Eigenschaften + - CSS Flexible Boxen + - Referenz +translation_of: Web/CSS/flex-flow +--- +<div>{{ CSSRef("CSS Flexible Boxes") }}</div> + +<h2 id="Summary">Summary</h2> + +<p>Die Kurzschreibweise <code>flex-flow</code> fasst die Eigenschaften <code>{{cssxref("flex-direction")}}</code> und <code>{{cssxref("flex-wrap")}}</code> zusammen.</p> + +<p>{{cssinfo}}</p> + +<p>Siehe <a href="/en-US/docs/CSS/Using_CSS_flexible_boxes" title="/en-US/docs/CSS/Using_CSS_flexible_boxes">Using CSS flexible boxes</a> für mehr Information.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h3 id="Werte">Werte</h3> + +<p>Siehe <a href="/en-US/docs/CSS/flex-direction" title="en-US/docs/CSS/flex-direction"><code>flex-direction</code></a> und <a href="/en-US/docs/CSS/flex-wrap" title="flex-wrap"><code>flex-wrap</code></a>.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush:css;highlight:3">element { + /* Main-axis is the block direction with reversed main-start and main-end. Flex items are laid out in multiple lines */ + flex-flow: column-reverse wrap; +} +</pre> + +<h2 id="Specifications" name="Specifications">Spezifikation</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Anmerkung</th> + </tr> + </thead> + <tbody> + <tr> + <td><a class="external" href="http://dev.w3.org/csswg/css3-flexbox/#flex-flow" title="http://dev.w3.org/csswg/css3-flexbox/#flex-flow">CSS Flexible Box Layout Module</a></td> + <td>{{ Spec2('CSS3 Flexbox') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.properties.flex-flow")}} + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/en-US/docs/CSS/Using_CSS_flexible_boxes" title="/en-US/docs/CSS/Using_CSS_flexible_boxes">Using CSS flexible boxes</a></li> +</ul> diff --git a/files/de/web/css/flex-grow/index.html b/files/de/web/css/flex-grow/index.html new file mode 100644 index 0000000000..0a40c317de --- /dev/null +++ b/files/de/web/css/flex-grow/index.html @@ -0,0 +1,82 @@ +--- +title: flex-grow +slug: Web/CSS/flex-grow +tags: + - CSS + - CSS Eigenschaft + - CSS Flexible Boxes + - Layout + - Referenz + - Web +translation_of: Web/CSS/flex-grow +--- +<p>{{ CSSRef("CSS Flexible Boxes") }}</p> + +<p>Die <code>flex-grow</code> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft gibt den Wachstumsfaktor eines flexiblen Elements in dem zur Verfügung stehenden Raum eines Flex Containers an. Wenn alle Schwesternelemente den gleichen flex-grow Wert haben, teilen sich diese Elemente den gleichen Platzanteil im Container auf. Andernfalls entscheidet der Platzanteil durch das Verhältnis, das sich aus den verschiedenen flex-grow Werten ergibt.</p> + +<p>Verwendet wird flex-grow zusammen mit den anderen flex Eigenschaften {{cssxref("flex-shrink")}} und {{cssxref("flex-basis")}}. Im Regelfall wird durch die {{cssxref("flex")}} Kurzschrift sichergestellt, dass alle Werte gesetzt werden.</p> + +<p>{{cssinfo}}</p> + +<p>Siehe die <a class="new" href="https://developer.mozilla.org/de/docs/Web/Guide/CSS/Flexible_boxes">Verwendung von CSS Flexible Boxes</a> für weitere Eigenschaften und Informationen.</p> + +<div>{{EmbedInteractiveExample("pages/css/flex-grow.html")}}</div> + + + +<p> </p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="twopartsyntaxbox">{{csssyntax}} +</pre> + +<pre>flex-grow: 3 + +flex-grow: inherit +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code><number></code></dt> + <dd>Siehe {{cssxref("<number>")}}. Negative Werte sind ungültig.</dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush:css;highlight:[2]">element { + flex-grow: 3; +} +</pre> + +<h2 id="Spezifikationen">Spezifikationen</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><a class="external" href="http://dev.w3.org/csswg/css3-flexbox/#flex-grow" title="http://dev.w3.org/csswg/css3-flexbox/#flex-grow">CSS Flexible Box Layout Module</a></td> + <td>{{ Spec2('CSS3 Flexbox') }}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{Compat("css.properties.flex-grow")}}</p> + +<p>[1] Firefox unterstützt bis Version 28 nur einzeiliges Flexbox Layout. Um Flexbox Unterstützung für Firefox 18 und 19 zu aktivieren, muss die Einstellung <code>layout.css.flexbox.enabled</code> in <code>about:config</code> auf <code>true</code> gesetzt werden.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a class="new" href="https://developer.mozilla.org/de/docs/Web/Guide/CSS/Flexible_boxes" title="CSS/Using_CSS_flexible_boxes">Verwendung von CSS Flexible Boxes</a></li> +</ul> diff --git a/files/de/web/css/flex-shrink/index.html b/files/de/web/css/flex-shrink/index.html new file mode 100644 index 0000000000..7e741ec2d6 --- /dev/null +++ b/files/de/web/css/flex-shrink/index.html @@ -0,0 +1,75 @@ +--- +title: flex-shrink +slug: Web/CSS/flex-shrink +tags: + - CSS + - CSS Eigenschaft + - CSS Flexible Boxes + - Layout + - Referenz +translation_of: Web/CSS/flex-shrink +--- +<p>{{CSSRef}}</p> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>flex-shrink</code> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft gibt den Schrumpffaktor eines Flexelements an.</p> + +<p>{{cssinfo}}</p> + +<p>Siehe die <a class="new" href="https://developer.mozilla.org/de/docs/Web/Guide/CSS/Flexible_boxes">Verwendung von CSS Flexible Boxes</a> für weitere Eigenschaften und Informationen.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="twopartsyntaxbox"><a href="https://developer.mozilla.org/de/docs/Web/CSS/Wertdefinitionssyntax" title="CSS/Value_definition_syntax">Formale Syntax</a>: {{csssyntax("flex-shrink")}} +</pre> + +<pre>flex-shrink: 2 + +flex-shrink: inherit +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code><number</code>></dt> + <dd>Siehe {{cssxref("<number>")}}. Negative Werte sind ungültig.</dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush:css; highlight:[2]">element { + flex-shrink: 3; +} +</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th>Spezifikation</th> + <th>Status</th> + <th>Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Flexbox', '#flex-shrink', 'flex-shrink') }}</td> + <td>{{ Spec2('CSS3 Flexbox') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{Compat("css.properties.flex-shrink")}}</p> + +<p>[1] Firefox unterstützt bis Version 28 nur einzeiliges Flexbox Layout. Um Flexbox Unterstützung für Firefox 18 und 19 zu aktivieren, muss die Einstellung <code>layout.css.flexbox.enabled</code> in <code>about:config</code> auf <code>true</code> gesetzt werden.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a class="new" href="https://developer.mozilla.org/de/docs/Web/Guide/CSS/Flexible_boxes" title="CSS/Using_CSS_flexible_boxes">Verwendung von CSS Flexible Boxes</a></li> +</ul> diff --git a/files/de/web/css/flex-wrap/index.html b/files/de/web/css/flex-wrap/index.html new file mode 100644 index 0000000000..bb2e777f0d --- /dev/null +++ b/files/de/web/css/flex-wrap/index.html @@ -0,0 +1,81 @@ +--- +title: flex-wrap +slug: Web/CSS/flex-wrap +tags: + - CSS + - CSS Eigenschaft + - CSS Flexible Boxes + - Layout + - Referenz +translation_of: Web/CSS/flex-wrap +--- +<p>{{CSSRef}}</p> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>flex-wrap</code> <a href="/de/docs/Web/CSS" title="CSS">CSS</a> Eigenschaft legt fest, ob die Elemente in einem Flexbox-Container auf einer Linie liegen, oder bei bedarf auf mehrere Zeilen verteilt werden können.</p> + +<p>{{cssinfo}}</p> + +<p>Siehe die <a href="/de/docs/Web/Guide/CSS/CSS_flexible_Boxen_verwenden" title="/en/CSS/Using_CSS_flexible_boxes">CSS flexible Boxen verwenden</a> für mehr Informationen.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="twopartsyntaxbox"><a href="/de/docs/Web/CSS/Wertdefinitionssyntax" title="/en-US/docs/CSS/Value_definition_syntax">Formale Syntax</a>: {{csssyntax("flex-wrap")}} +</pre> + +<pre>flex-wrap: nowrap +flex-wrap: wrap +flex-wrap: wrap-reverse + +flex-wrap: inherit +</pre> + +<h3 id="Werte">Werte</h3> + +<p>Die folgenden Werte können verwendet werden:</p> + +<dl> + <dt><code>nowrap</code></dt> + <dd>Die flexiblen Elemente liegen alle in derselben Reihe, auch wenn dazu der Platz fehlt.</dd> + <dt><code>wrap</code></dt> + <dd>Die flexiblen Elemente können sich wenn nötig innerhalb des Containers in mehrere Zeilen aufteilen (nach unten).</dd> + <dt><code>wrap-reverse</code></dt> + <dd>Die flexiblen Elemente können sich wenn nötig innerhalb des Containers in mehrere Zeilen aufteilen (nach oben).</dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush:css;highlight:[2]">element { + flex-wrap: nowrap; +} +</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th>Spezifikation</th> + <th>Status</th> + <th>Anmerkung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Flexbox', '#flex-wrap', 'flex-wrap') }}</td> + <td>{{ Spec2('CSS3 Flexbox') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{Compat("css.properties.flex-wrap")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/Guide/CSS/CSS_flexible_Boxen_verwenden" title="/en/CSS/Using_CSS_flexible_boxes">CSS flexible Boxen verwenden</a></li> +</ul> diff --git a/files/de/web/css/float/index.html b/files/de/web/css/float/index.html new file mode 100644 index 0000000000..2711d0d936 --- /dev/null +++ b/files/de/web/css/float/index.html @@ -0,0 +1,109 @@ +--- +title: float +slug: Web/CSS/float +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/float +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>float</code> Eigenschaft bestimmt, ob ein Element aus dem normalen Fluss herausgelöst werden soll und nachfolgende Inhalte auf der linken oder rechten Seite des gefloateten Elements platziert werden sollen.</p> + +<ul> + <li>Standardwert: <code>none</code></li> + <li>Anwendbar auf: alle Elemente</li> + <li>Vererbbar: Nein</li> + <li>Prozentwerte: Nein</li> + <li>Medium: visuell</li> + <li>berechneter Wert: wie festgelegt</li> +</ul> + +<h2 id="Syntax">Syntax</h2> + +<pre class="eval">float: left | right | none | inherit +</pre> + +<h2 id="Werte">Werte</h2> + +<dl> + <dt>none</dt> + <dd>Standardwert. Das Element wird nicht umflossen.</dd> + <dt>left</dt> + <dd>Das Element wird nach links gerückt und die Inhalte des umliegenden Elements (containing block) werden rechts vom Element angeordnet.</dd> + <dt>right</dt> + <dd>Das Element wird nach rechts gerückt und die Inhalte des umliegenden Elements (containing block) werden links vom Element angeordnet.</dd> + <dt>inherit</dt> + <dd>Der Wert des Elternelements wird geerbt.</dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<p><a href="http://developer.mozilla.org/samples/cssref/float.html" rel="external nofollow">Live Beispiel</a></p> + +<pre class="brush: html"><style type="text/css"> + div { border: solid red; max-width: 70ex; } + h4 { float: left; margin: 0; } +</style> + +<div> + <h4>HELLO!</h4> + This is some text. This is some text. This is some text. + This is some text. This is some text. This is some text. + This is some text. This is some text. This is some text. + This is some text. This is some text. This is some text. +</div> +</pre> + +<div style="border: solid red; max-width: 70ex;"> +<h4 id="HELLO!" style="float: left; margin: 0;">HELLO!</h4> +This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</div> + +<h2 id="Spezifikationen">Spezifikationen</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 Logical Properties', '#float-clear', 'float and clear')}}</td> + <td>{{Spec2('CSS Logical Properties')}}</td> + <td>Adds the values <code>inline-start</code> and <code>inline-end</code>.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Box', '#float', 'float')}}</td> + <td>{{Spec2('CSS3 Box')}}</td> + <td>Lots of new values, not all clearly defined yet. Any differences in behavior, unrelated to new features, are expected to be unintentional; please report.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'visuren.html#float-position', 'float')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>No change</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#float', 'float')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser <span>Kompatibilität</span></h2> + +{{Compat("css.properties.float")}} + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/CSS/clear"><code>clear</code></a></li> + <li><a href="/de/CSS/Boxmodell">Boxmodell</a></li> +</ul> + +<p>{{ languages( {"en": "en/CSS/float", "fr": "en/CSS/float", "es": "es/CSS/float", "pl": "pl/CSS/float"} ) }}</p> diff --git a/files/de/web/css/font-family/index.html b/files/de/web/css/font-family/index.html new file mode 100644 index 0000000000..ccd539914f --- /dev/null +++ b/files/de/web/css/font-family/index.html @@ -0,0 +1,185 @@ +--- +title: font-family +slug: Web/CSS/font-family +tags: + - CSS + - CSS Eigenschaft + - CSS Schriftarten + - Layout + - Referenz + - Web +translation_of: Web/CSS/font-family +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>font-family</code> CSS Eigenschaft erlaubt es, eine priorisierte Liste von Schriftfamiliennamen und/oder generische Familiennamen für ein ausgewähltes Element anzugeben. Im Gegensatz zu den meisten anderen CSS Eigenschaften werden die Werte durch Komma getrennt, um zu kennzeichnen, dass sie Alternativen darstellen. Der Browser wählt die erste Schrift, die auf dem Computer installiert ist oder mittels der Informationen, die über eine {{cssxref("@font-face")}} At-Regel gegeben sind, heruntergeladen werden kann.</p> + +<p>Webautoren sollten einer Schriftfamilienliste immer mindestens eine generische Familie hinzufügen, da es keine Garantie dafür gibt, dass eine bestimmte Schriftart auf dem Computer installiert ist oder über die {{cssxref("@font-face")}} At-Regel heruntergeladen werden kann. Die generische Schriftart erlaubt es dem Browser, falls nötig, eine akzeptable Ersatzschriftart auszuwählen.</p> + +<p>Es ist oft vorteilhaft, die Kurzform Eigenschaft {{cssxref("font")}} zu verwenden, um <code>font-size</code> und andere Schrift bezogene Eigenschaften auf einmal zu setzen.</p> + +<div class="note"><strong>Hinweis:</strong> Die <code>font-family</code> Eigenschaft definiert eine Liste von Schriftarten, von der höchsten zur niedrigsten Priorität. Die Auswahl der Schriftart stoppt <strong>nicht</strong> einfach bei der ersten Schriftart in der Liste, die auf dem System des Benutzers installiert ist. Vielmehr findet die Auswahl der Schriftart <strong>pro Zeichen</strong> statt, so dass, falls eine verfügbare Schriftart ein bestimmtes Schriftzeichen nicht definiert, in den übrigen Schriftarten nach diesem Zeichen gesucht wird. Dies funktioniert jedoch nicht im Internet Explorer 6 oder früheren Versionen.<br> +<br> +Falls eine Schrift nur in bestimmten <a href="/de/docs/Web/CSS/font-style" title="CSS/font-style">Stilen</a>, <a href="/de/docs/Web/CSS/font-variant" title="CSS/font-variant">Varianten</a> oder <a href="/de/docs/Web/CSS/font-size" title="CSS/font-size">Größen</a> verfügbar ist, können diese Eigenschaften auch beeinflussen, welche Schriftart ausgewählt wird.</div> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="twopartsyntaxbox"><a href="/de/docs/Web/CSS/Wertdefinitionssyntax" title="CSS/Value_definition_syntax">Formale Syntax</a>: {{csssyntax("font-family")}} +</pre> + +<pre>font-family: Gill Sans Extrabold, sans-serif +font-family: "Goudy Bookletter 1911", sans-serif + +font-family: serif +font-family: sans-serif +font-family: monospace +font-family: cursive +font-family: fantasy + +font-family: inherit +</pre> + +<h3 id="Werte">Werte</h3> + +<table class="standard-table" style="height: 523px; width: 1145px;"> + <tbody> + <tr> + <td><code><family-name></code></td> + <td>Der Name der Schriftfamilie. Zum Beispiel "Times" und "Helvetica" sind Schriftfamilien. Schriftfamiliennamen, die Leerzeichen enthalten, sollten von Anführungszeichen eingeschlossen werden.</td> + </tr> + <tr> + <td><code><generic-name></code></td> + <td> + <p>Generische Schriftfamilien dienen als Fallback-Mechanismus, ein Mittel, um etwas von der Absicht des Stylesheet Autors zu erhalten für den Fall, wenn keine der angegebenen Schriftarten verfügbar sind. Generische Familiennamen sind Schlüsselwörter und dürfen nicht in Anführungszeichen eingeschlossen werden. Eine generische Schriftfamilie sollte die letzte Alternative in einer Liste von Schriftfamiliennamen sein.</p> + + <dl> + <dt><code>serif</code></dt> + <dd style='font-family: Palatino,"Palatino Linotype",Palladio,"URW Palladio",serif;'>Schriftzeichen haben abschließende Striche, ausgeweitete oder zugespitzte Enden oder serifenbetonte Enden.<br> + Z. B. Palatino, "Palatino Linotype", Palladio, "URW Palladio", serif</dd> + <dt><code>sans-serif</code></dt> + <dd style='font-family: "Trebuchet MS","Liberation Sans","Nimbus Sans L",sans-serif;'>Schriftzeichen haben gerade Strichenden.<br> + Z. B. 'Trebuchet MS', 'Liberation Sans', 'Nimbus Sans L', sans-serif</dd> + <dt><code>monospace</code></dt> + <dd style='font-family: "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace;'>Alle Schriftzeichen haben die gleiche Breite.<br> + Z. B. "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace</dd> + <dt><code>cursive</code></dt> + <dd>Schriftzeichen in kursiven Schriftarten haben üblicherweise verbindende Striche oder andere kursive Charakteristiken, die über die von kursiven Schriftzügen hinausgehen. Die Schriftzeichen sind teilweise oder ganz verbunden und das Ergebnis ähnelt eher einer Handschrift als gedruckten Lettern.</dd> + <dt><code>fantasy</code></dt> + <dd>Fantasie Schriftarten sind überwiegend dekorative Schriftarten, die verspielte Darstellungen von Schriftzeichen beinhalten.</dd> + </dl> + </td> + </tr> + </tbody> +</table> + +<h3 id="Gültige_Schriftfamiliennamen">Gültige Schriftfamiliennamen</h3> + +<p>Schriftfamiliennamen müssen entweder in Anführungszeichen eingeschlossene Strings sein oder nicht angeführte als eine Aneinanderreihung von einem oder mehreren Bezeichnern. Das heißt dass in nicht angeführten Schriftfamiliennamen Interpunktionszeichen und Ziffern am Anfang jedes Zeichens Maskiert (escaped) werden müssen.</p> + +<p>Beispielsweise sind die folgenden Angaben gültig:</p> + +<pre>font-family: Gill Sans Extrabold, sans-serif; +font-family: "Goudy Bookletter 1911", sans-serif;</pre> + +<p>Die folgenden Angaben sind <strong>ungültig</strong>:</p> + +<pre>font-family: Goudy Bookletter 1911, sans-serif; +font-family: Red/Black, sans-serif; +font-family: "Lucida" Grande, sans-serif; +font-family: Ahem!, sans-serif; +font-family: test@foo, sans-serif; +font-family: #POUND, sans-serif; +font-family: Hawaii 5-0, sans-serif;</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Beispiel_1">Beispiel 1</h3> + +<pre>body { font-family: "Gill Sans Extrabold", Helvetica, sans-serif } + +.receipt { font-family: Courier, "Lucida Console", monospace } +</pre> + +<h3 id="Beispiel_2">Beispiel 2</h3> + +<pre class="brush: css">.exampleserif { + font-family: Times, "Times New Roman", Georgia, serif; +} + +.examplesansserif { + font-family: Verdana, Arial, Helvetica, sans-serif; +} + +.examplemonospace { + font-family: "Lucida Console", Courier, monospace; +} + +.examplecursive { + font-family: cursive; +} + +.examplefantasy { + font-family: fantasy; +} +</pre> + +<pre class="brush: html"><div class="exampleserif"> +Dies ist ein Beispiel für eine Serifenschrift. +</div> + +<div class="examplesansserif"> +Dies ist ein Beispiel für eine serifenlose Schrift. +</div> + +<div class="examplemonospace"> +Dies ist ein Beispiel für eine nicht-proportionale Schrift. +</div> + +<div class="examplecursive"> +Dies ist ein Beispiel für eine kursive Schrift. +</div> + +<div class="examplefantasy"> +Dies ist ein Beispiel für eine Fantasieschrift. +</div></pre> + +<h4 id="Live_Beispiel">Live Beispiel</h4> + +<p>{{ EmbedLiveSample('Beispiel_2','600','120') }}</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 Fonts', '#font-family-prop', 'font-family')}}</td> + <td>{{Spec2('CSS3 Fonts')}}</td> + <td>Keine wesentlichen Änderungen</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-family', 'font-family')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Keine wesentlichen Änderungen</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#font-family', 'font-familiy')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.properties.font-family")}} diff --git a/files/de/web/css/font-feature-settings/index.html b/files/de/web/css/font-feature-settings/index.html new file mode 100644 index 0000000000..f04a5497a6 --- /dev/null +++ b/files/de/web/css/font-feature-settings/index.html @@ -0,0 +1,108 @@ +--- +title: font-feature-settings +slug: Web/CSS/font-feature-settings +tags: + - CSS + - CSS Fonts + - CSS Property + - Layout + - Reference + - Référence(2) +translation_of: Web/CSS/font-feature-settings +--- +<div>{{CSSRef}} {{SeeCompatTable}}</div> + +<h2 id="Zusammenfassung">Zusammenfassung</h2> + +<p>Die Eigenschaft <code>font-feature-settings</code> ermöglicht die Kontrolle von erweiterten typografischen Eigenschaften in OpenType-Schriftarten.</p> + +<div class="note"><strong>Anmerkung:</strong> Wenn möglich sollte die Eigenschaft {{cssxref("font-variant")}} genutzt werden. Diese Eigenschaft wurde speziell für Fälle entwickelt, in denen es nicht möglich ist, eine OpenType-Eigenschaft zu aktivieren oder zu nutzen.<br> +<br> +Diese Eigenschaft sollte insbesondere nicht genutzt werden, um Kapitälchen zu aktivieren.</div> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formale Syntax</a>: {{csssyntax("font-feature-settings")}} +</pre> + +<pre>font-feature-settings: normal +font-feature-settings: "smcp" +font-feature-settings: "smcp" on +font-feature-settings: "swsh" 2 +font-feature-settings: "smcp", "swsh" 2 + +font-feature-settings: inherit +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code>normal</code></dt> + <dd>Der Text wird mit Standardeinstellungen gesetzt.</dd> + <dt><code><feature-tag-value></code></dt> + <dd>Beim Rendern von Text wird die Liste der Tag-Wert-Paare an die Text-Layout-Engine übergeben um Eigenschaften zu aktivieren oder zu deaktivieren. Der Tag ist immer ein {{cssxref("<string>")}} aus 4 ASCII-Zeichen. Wenn eine andere Anzahl an Zeichen übergeben wird oder der Tag Zeichen außerhalb des Coderaumes von U+20 bis U+7E enthält, ist die komplette Eigenschaft ungültig.<br> + Der Wert ist eine positive Ganzzahl, wobei die Schlüsselwörter <code>on</code> und <font face="Courier New, Andale Mono, monospace"><span style="line-height: normal;">off</span></font> entsprechend für <code>1</code> und <code>0</code> stehen. Wenn kein Wert übergeben wird, wird standardmäßig von <code>1</code> ausgegangen. Für nicht-boolsche OpenType-Eigenschaften (z.B. <a href="http://www.microsoft.com/typography/otspec/features_pt.htm#salt">Alternative Stile</a>) selektiert der Wert ein bestimmtes Zeichen, während er für boolsche Eigenschaften einen Schalter darstellt.</dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush:css">/* Kapitälchen aktivieren */ +.smallcaps { font-feature-settings: "smcp" on; } + +/* Groß- und Kleinbuchstaben zu Kapitälchen konvertieren (Zeichensetzung eingeschlossen) */ +.allsmallcaps { font-feature-settings: "c2sc", "smcp"; } + +/* Historische Formen aktivieren */ +.hist { font-feature-settings: "hist"; } + +/* Verbreitete Ligaturen deaktivieren (standardmäßig eingeschaltet) */ +.noligs { font-feature-settings: "liga" 0; } + +/* Nichtproportionale Ziffern (monospace) aktivieren */ +td.tabular { font-feature-settings: "tnum"; } + +/* Automatische Brüche aktivieren */ +.fractions { font-feature-settings: "frac"; } + +/* Das zweite geschwungene Zeichen nutzen */ +.swash { font-feature-settings: "swsh" 2; } + +/* Alternativen Zeichensatz Nr.7 nutzen */ +.fancystyle { + font-family: Gabriola; /* Verfügbar ab Windows 7 und Mac OS */ + font-feature-settings: "ss07"; +} +</pre> + +<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 Fonts', '#propdef-font-feature-settings', 'font-feature-settings')}}</td> + <td>{{Spec2('CSS3 Fonts')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +{{Compat("css.properties.font-feature-settings")}} + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="https://www.fontfont.com/staticcontent/downloads/FF_OT_User_Guide.pdf" title="http://www.fontfont.com/opentype/FF_OT_UserGuide_v2.pdf">FontFont OpenType User Guide (pdf)</a></li> + <li><a href="http://www.microsoft.com/typography/otspec/featurelist.htm" title="http://www.microsoft.com/typography/otspec/featurelist.htm">OpenType Feature Tags</a> list</li> + <li><a href="http://blogs.msdn.com/b/ie/archive/2012/01/09/css-corner-using-the-whole-font.aspx" title="http://blogs.msdn.com/b/ie/archive/2012/01/09/css-corner-using-the-whole-font.aspx">Using the whole font</a> (The -moz syntax is the old one. On Gecko, use the -ms syntax but with -moz).</li> +</ul> diff --git a/files/de/web/css/font-size/index.html b/files/de/web/css/font-size/index.html new file mode 100644 index 0000000000..7a5592169c --- /dev/null +++ b/files/de/web/css/font-size/index.html @@ -0,0 +1,327 @@ +--- +title: font-size +slug: Web/CSS/font-size +tags: + - CSS + - CSS Font + - CSS-Eigenschaft + - CSS-Schrift + - Reference +translation_of: Web/CSS/font-size +--- +<div>{{CSSRef}}</div> + +<p>Die <strong><code>font-size</code></strong>-<a href="/de/docs/Web/CSS">CSS</a>-Eigenschaft spezifiziert die Schriftgöße. Eine Änderung der Schriftgröße kann die Größe anderer Partien beeinflussen, da sie dazu benutzt wird, den Wert der <code>em</code>- und <code>ex</code>-{{cssxref("<length>")}}-Einheiten zu berechnen.</p> + +<pre class="brush:css no-line-numbers">/* <absolute-size>-Werte */ +font-size: xx-small; +font-size: x-small; +font-size: small; +font-size: medium; +font-size: large; +font-size: x-large; +font-size: xx-large; + +/* <relative-size>-Werte */ +font-size: smaller; +font-size: larger; + +/* <length>-Werte */ +font-size: 12px; +font-size: 0.8em; + +/* <percentage>-Werte */ +font-size: 80%; + +/* Globale Werte */ +font-size: inherit; +font-size: initial; +font-size: unset; +</pre> + +<div class="hidden" id="font-size"> +<pre class="brush: html"><div id="container"> + <p id="xx-small">xx-small</p> + <p id="x-small">x-small</p> + <p id="small">small</p> + <p id="medium">medium</p> + <p id="large">large</p> + <p id="x-large">x-large</p> + <p id="xx-large">xx-large</p> + <p id="twelve-px">12px</p> + <div id="parent-twelve-px"> + 12px + <p id="smaller">smaller</p> + <p id="larger">larger</p> + <p id="zero-dot-eight-em">0.8em</p> + </div> + <div id="parent-twenty-four-px"> + 24px + <p id="smaller">smaller</p> + <p id="larger">larger</p> + <p id="zero-dot-eight-em">0.8em</p> + </div> +</div> +</pre> + +<pre class="brush: css">#container { + width: 100%; + display: flex; + flex-wrap: wrap; +} + +div > p { + border: 1px solid black; + display: flex; + align-items: center; + margin: 8px; + padding: 8px; +} + +#parent-twelve-px, +#parent-twenty-four-px { + display: flex; + border: 1px solid black; + padding: 8px; + margin: 8px; +} + +#parent-twelve-px { + font-size: 12px; +} + +#parent-twenty-four-px { + font-size: 24px; +} + +#xx-small { + font-size: xx-small; +} + +#x-small { + font-size: x-small; +} + +#small { + font-size: small; +} + +#medium { + font-size: medium; +} + +#large { + font-size: large; +} + +#x-large { + font-size: x-large; +} + +#xx-large { + font-size: xx-large; +} + +#smaller { + font-size: smaller; +} + +#larger { + font-size: larger; +} + +#twelve-px { + font-size: 12px; +} + +#zero-dot-eight-em { + font-size: 0.8em; +} +</pre> +</div> + +<p>{{EmbedLiveSample("font-size", 1200, 180, "", "", "example-outcome-frame")}}</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<p>Die <code>font-size</code>-Eigenschaft kann auf zwei Weisen spezifiziert werden:</p> + +<ul> + <li>durch ein einzelnes Schlüsselwort, das entweder eine <a href="#absolute-size">absolute</a> oder <a href="#relative-size">relative</a> Größe darstellt</li> + <li>durch einen <code><a href="#<length-percentage>"><length-percentage></a></code>-Wert</li> +</ul> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><a id="absolute-size"><code>xx-small, x-small, small, medium, large, x-large, xx-large</code></a></dt> + <dd>Ein Satz von Schlüsselwörtern absoluter Größe, basierend auf der vom Benutzer festgelegten Schriftgröße (welche <code>medium </code>entspricht). Ähnlich der HTML-Tags <code><font size="1"></code> bis <code><font size="7"></code>, bei denen die benutzerdefinierte Größe <code><font size="3"></code> entspricht.</dd> + <dt><a id="relative-size"><code>larger, smaller</code></a></dt> + <dd>Größer oder kleiner als die Schriftgröße des Elternelements; grob das Verhältnis, das benutzt wird, um die obigen absoluten Schlüsselwörter zu unterscheiden.</dd> + <dt><a id="<length-percentage>"><code><length-percentage></code></a></dt> + <dd> + <p>Ein positiver {{cssxref("<length>")}}- oder {{cssxref("<percentage>")}}-Wert. Werden die Einheiten der <code><length></code>-Werte durch <code>em</code> oder <code>ex</code> spezifiziert, ist die Größe relativ definiert zur Schriftgröße des Elternelements des gefragten Elements. Zum Beispiel entspricht 0.5em der Hälfte der Schriftgröße des aktuellen Elternelements. Werden die Einheiten in <code>rem</code> spezifiziert, ist die Größe relativ definiert zur Schriftgröße des {{HTMLElement("html")}}-(Wurzel-)Elements.</p> + + <p><percentage>-Werte beziehen sich auf die Schriftgröße des Elternelements.</p> + </dd> +</dl> + +<p>Am Besten werden Werte benutzt, die relativ zur benutzerdefinierten Schriftgröße stehen. Absolute Werte in Form von Längen mit Einheiten, außer <code>em</code> oder <code>ex</code>, sollten vermieden werden. Müssen trotzdem solche absoluten Werte benutzt werden, ist <code>px</code> anderen Einheiten vorzuziehen, weil seine Bedeutung nicht abhängig davon, was das Betriebssystem (meist fälschlicherweise) für die Bildschirmauflösung hält, variiert.</p> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Mögliche_Ansätze">Mögliche Ansätze</h2> + +<p>Es gibt einige verschiedene Arten, die Schriftgröße zu spezifizieren, in Form von Schlüsselwörtern oder numerischen Werten für Pixel oder ems. Je nachdem, was die Ansprüche einer Webseite sind, kann die richtige Methode gewählt werden.</p> + +<h3 id="Schlüsselwörter">Schlüsselwörter</h3> + +<p>Schlüsselwörter sind eine gute Möglichkeit die Größe von Schriften im Web festzulegen. Indem ein Schlüsselwort für die Schriftgröße des body-Elements festgelegt wird, ist es möglich überall auf der restlichen Webseite relative Schriftgrößen zu benutzen, was einen befähigt, auf einfache Weise die Schrift auf der ganzen Seite entsprechend zu vergrößern oder zu verkleinern.</p> + +<h3 id="Pixel">Pixel</h3> + +<p>Das Festlegen der Schriftgröße in Pixel-Werten (<code>px</code>) ist eine gute Wahl, wenn Pixel-Genauigkeit gefordert ist. Ein px-Wert ist statisch und stellt eine Möglichkeit dar, die unabhängig von Betriebssystem und Browser ist und dem Browser unveränderlich mitteilt, die Buchstaben in genau der spezifizierten Höhe an Pixeln darzustellen. Das Ergebnis kann sich je nach Browser leicht unterscheiden, da diese eventuell verschiedene Algorithmen verwenden, um den selben Effekt zu erzielen.</p> + +<p>Verschiedene Schriftgrößeneinstellungen können auch kombiniert werden. Zum Beispiel, wenn ein Elternelement <code>16px</code> festlegt und sein Kindelement <code>larger</code> spezifiziert, dann wird das Kindelement größer dargestellt als das Elternelement auf der Seite.</p> + +<div class="note"><strong>Anmerkung:</strong> Die Schriftgröße in Pixeln festzulegen, ist <em><a href="https://de.wikipedia.org/wiki/Barrierefreies_Internet">nicht barrierefrei</a></em>, weil der Benutzer infolge dessen die Schriftgröße nicht über den Browser ändern kann. Zum Beispiel möchten Benutzer mit Sehschwäche die Schriftgröße vielleicht viel größer einstellen als vom Web-Designer ausgewählt. Die Benutzung von Pixeln für Schriftgrößen sollte vermieden werden, wenn ein allumfassendes Design gefordert ist.</div> + +<h3 id="Ems">Ems</h3> + +<p>Eine weitere Möglichkeit, die Schriftgröße festzulegen, ist die Verwendung von <code>em</code>-Werten. Die Größe eines <code>em</code>-Wertes ist dynamisch. Beim Spezifizieren der <code>font-size</code>-Eigenschaft entspricht ein <code>em</code> der für das gefragte Elternelement festgelegten Schriftgröße. Wird die Schriftgröße nirgendwo anders auf der Seite festgelegt, dann gilt die vom Browser definierte Größe, die oft 16px entspricht. Demnach gilt im Normalfall 1em = 16px, also 2em = 32px. Wenn dem body-Element eine Schriftgröße von 20px zugewiesen wird, dann gilt 1em = 20px und 2em = 40px. Es ist zu beachten, dass der Wert 2 notwendigerweise ein Multiplikator der aktuellen em-Größe ist.</p> + +<p>Um das em-Äquivalent für einen beliebigen benötigten Pixel-Wert zu berechnen, kann die folgende Formel benutzt werden:</p> + +<pre class="brush: plain">em = gewünschter Pixel-Wert des Elements / Elternelementschriftgröße in Pixeln</pre> + +<p>Angenommen die Schriftgröße des Body der Seite entspricht 16px. Wenn die gewünschte Schriftgröße 12px ist, dann sollten 0.75em spezifiziert werden (da 12/16 = 0,75). Es verhält sich ähnlich, wenn eine Schriftgröße von 10px gewollt ist; dann sollte 0.625em spezifiziert werden (10/16 = 0,625) und für 22px sollten es 1.375em (22/16) sein.</p> + +<p>Em ist eine sehr nützliche CSS-Einheit, da es seine Länge automatisch relativ zur vom Leser gewählten Schrift anpasst.</p> + +<p>Ein wichtiger Hinweis: em-Werte können zu bisweilen auch extremen Steigerungen führen wie das folgende HTML und CSS zeigen:</p> + +<pre class="brush: css">html { + font-size: 62.5%; /* font-size 1em = 10px bei normaler Browser-Einstellung */ +} +span { + font-size: 1.6em; +}</pre> + +<pre class="brush: html"><div> +<span>Outer <span>inner</span> outer</span> +</div> +</pre> + +<p>Das Ergebnis ist:</p> + +<p>{{EmbedLiveSample("Ems", 400, 40)}}</p> + +<p>Angenommen, dass <code>font-size</code> vom Browser als 16px festgelegt wird, dann würden die Wörter "outer" mit 16px dargestellt, das Wort "inner" aber mit 25.6px. Das liegt daran, dass die Schriftgröße des inneren Spans 1.6em entspricht, was relativ zum Elternelement gilt, welches wiederum relativ zu dessen Elternelement steht. Dieses Verhalten wird auch <strong>compounding</strong> (Steigerung/Aufzinsung) genannt.</p> + +<h3 id="Rems">Rems</h3> + +<p><code>Rem</code>-Werte wurden eingeführt, um das compunding-Problem zu umgehen. <code>Rem</code>-Werte sind relativ zum <code>html</code>-Wurzelelement, nicht zum Elternelement. Mit anderen Worten ermöglicht es, eine Schriftgröße in einer relativen Weise zu spezifizieren ohne durch das Elternelement beeinflusst zu werden und so das Compunding zu verhindern.</p> + +<p>Das folgende CSS ist nahezu identisch mit dem vorherigen Beispiel. Die einzige Ausnahme ist, dass die Einheit nun <code>rem</code> ist.</p> + +<pre class="brush: css">html { + font-size: 62.5%; /* font-size 1em = 10px bei normaler Browser-Einstellung */ +} +span { + font-size: 1.6rem; +} +</pre> + +<p>Anschließend wird dieses CSS auf das selbe HTML angewandt, das wie folgt aussieht:</p> + +<pre class="brush: html"><span>Outer <span>inner</span> outer</span></pre> + +<p>{{EmbedLiveSample("Rems", 400, 40)}}</p> + +<p>Bei diesem Beispiel erscheinen die Worte "outer inner outer" alle mit 16px (angenommen, dass die Schriftgröße des Browsers beim Standardwert von 16px verblieben ist).</p> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Beispiel_1">Beispiel 1</h3> + +<pre class="brush: css">/* Paragrafentext auf sehr groß setzen */ +p { font-size: xx-large } + +/* h1-(level 1 heading)-Text auf 2,5 mal die Größe + * des umliegenden Textes setzen */ +h1 { font-size: 250% } + +/* setzt in span-Tags eingeschlossenen Text auf 16px */ +span { font-size: 16px; } +</pre> + +<h3 id="Beispiel_2">Beispiel 2</h3> + +<pre class="brush: css">.small { + font-size: xx-small; +} +.larger { + font-size: larger; +} +.point { + font-size: 24pt; +} +.percent { + font-size: 200%; +} +</pre> + +<pre class="brush: html"><h1 class="small">small-H1</h1> +<h1 class="larger">larger-H1</h1> +<h1 class="point">24pt-H1</h1> +<h1 class="percent">200%-H1</h1></pre> + +<h4 id="Live-Test">Live-Test</h4> + +<p>{{EmbedLiveSample('Beispiel_2','600','200')}}</p> + +<h2 id="Bemerkungen">Bemerkungen</h2> + +<p><code>Em</code>- und <code>ex</code>-Einheiten in der {{Cssxref("font-size")}}-Eigenschaft verhalten sich relativ zur Schriftgröße des Elternelements (im Gegensatz zu allen anderen Einheiten, die relativ zur Schriftgröße des Elements sind). Das bedeutet, dass <code>em</code>-Einheiten und Prozentangaben das selbe als Wert für {{Cssxref("font-size")}} bewirken.</p> + +<h2 id="Spezifikationen">Spezifikationen</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 Fonts', '#font-size-prop', 'font-size')}}</td> + <td>{{Spec2('CSS3 Fonts')}}</td> + <td>Keine Veränderung</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'font-size')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Definiert <code>font-size</code> als animierbar.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-size', 'font-size')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Keine Veränderung</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#font-size', 'font-size')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2> + +{{Compat("css.properties.font-size")}} diff --git a/files/de/web/css/font-style/index.html b/files/de/web/css/font-style/index.html new file mode 100644 index 0000000000..02430dd746 --- /dev/null +++ b/files/de/web/css/font-style/index.html @@ -0,0 +1,225 @@ +--- +title: font-style +slug: Web/CSS/font-style +translation_of: Web/CSS/font-style +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary">Die CSS-Eigenschaft<strong> <code>font-style</code></strong> legt fest, ob Text mit einem kursiven Schnitt der gewählten Schriftfamilie ({{cssxref("font-family")}}) dargestellt werden soll.</span></p> + +<div>{{EmbedInteractiveExample("pages/css/font-style.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css no-line-numbers">font-style: normal; +font-style: italic; +font-style: oblique; +font-style: oblique 10deg; + +/* Global values */ +font-style: inherit; +font-style: initial; +font-style: unset; +</pre> + +<p><code>font-style</code> akzeptiert ein einzelnes der nachfolgenden Schlüsselwörter, welchem im Falle von <code>oblique</code> ein Winkel folgen darf.</p> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code>normal</code></dt> + <dd>Wählt einen Schriftschnitt mit nicht-kursiven Buchstaben.</dd> + <dt><code>italic</code></dt> + <dd>Wählt einen kursiven Schriftschnitt der Eigenschaft italic (siehe unten). Steht keiner zur Verfügung, wird stattdessen der Wert <code>oblique</code> angewendet. Ist auch dies nicht möglich, wird die Schrägstellung von 14° durch den Browser erzeugt.</dd> + <dt><code>oblique</code></dt> + <dd>Wählt einen kursiven Schriftschnitt der Eigenschaft oblique (siehe unten). Steht keiner zur Verfügung, wird stattdessen der Wert <code>italic</code> angewendet. Ist auch dies nicht möglich, wird eine Schrägstellung von 14° durch den Browser erzeugt.</dd> + <dt><code>oblique</code> <code><a href="/en-US/docs/Web/CSS/angle"><angle></a></code></dt> + <dd>Wählt einen kursiven Schriftschnitt der Eigenschaft oblique (siehe unten), dessen Buchstaben genau oder annähernd im Winkel <code><angle></code> schräggestellt sind. Üblicherweise werden bei der Suche nach passenden Schriftschnitten für Winkel ab 14° eher größere Werte gewählt, bis 13° eher kleinere (Details siehe <a href="https://drafts.csswg.org/css-fonts-4/#font-matching-algorithm">font matching section</a>).</dd> + <dd>Steht kein passender Schriftschnitt zur Verfügung, wird die Schrägstellung durch den Computer aus einem normalen Schriftschnitt erzeugt.</dd> + <dd>Der gültige Winkelbereich erstreckt sich von <code>-90deg</code> bis <code>90deg</code> (einschließlich). Positive Werte bewirken eine Schrägstellung in Richtung Zeilenende, negative in Richtung Zeilenanfang.</dd> +</dl> + +<h4 id="italic_gegenüber_oblique">italic gegenüber oblique</h4> + +<p>Die Werte <code>italic</code> und <code>oblique</code> scheinen auf den ersten Blick bei der Darstellung oftmals zu identischen Ergebnissen zu führen.</p> + +<p>Während <code>italic</code> jedoch Schriftschnitte bezeichnet, die bereits kursiv entworfen wurden, umfasst <code>oblique</code> Schriftschnitte, die lediglich durch automatisierte Schrägstellung normaler Buchstaben derselben Familie erzeugt wurden („kursiviert“).<br> + <code>italic</code> ist in der Regel die bessere Wahl, da die Form der Buchstaben und die Abstände der Buchstaben untereinander vom Schriftgestalter manuell festgelegt werden, was zu einer harmonischeren Textdarstellung führt.</p> + +<p>Da beide Varianten sehr ähnlich sind, wird die jeweils andere verwendet, steht die gewählte Variante nicht zur Verfügung. Dieses Verhalten kann mit {{cssxref("font-synthesis")}} geändert werden.</p> + +<h3 id="Variable_Schriftarten">Variable Schriftarten</h3> + +<p>Variable Schriftarten erlauben eine präzise Steuerung der Darstellung von kursivierten Schriftschnitten mit Hilfe des Werts <code><angle></code> im Anschluss an <code>oblique</code>.</p> + +<p>Bei variablen Schriftarten nach TrueType- oder OpenType-Spezifikation wird die Schrägstellung bei <code>oblique</code> über die Eigenschaft <code>"slnt"</code> realisiert, sowie <code>italic</code> mit einem Wert von 1 für die Eigenschaft <code>"ital"</code>(siehe {{cssxref("font-variation-settings")}}).</p> + +<p>Das nachstehende Beispiel benötigt einen Browser, der die Syntax nach CSS Fonts Level 4 versteht, d.h. die Angabe eines Winkels bei <code>font-style: oblique</code>.</p> + +<div style="border: 10px solid #f5f9fa; padding: 1rem;">{{EmbedLiveSample("variable-font-example", 1200, 180, "", "", "example-outcome-frame")}}</div> + +<h4 id="HTML">HTML</h4> + +<div id="variable-font-example"> +<pre class="brush: html"><header> + <input type="range" id="slant" name="slant" min="-90" max="90" /> + <label for="slant">Slant</label> +</header> +<div class="container"> + <p class="sample">...it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.</p> +</div> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">/* +AmstelvarAlpha-VF is created by <span class="col-11 mr-2 text-gray-dark">David Berlow</span> (https://github.com/TypeNetwork/Amstelvar) +and is used here under the terms of its license: +https://github.com/TypeNetwork/Amstelvar/blob/master/OFL.txt +*/ + +@font-face { + src: url('https://mdn.mozillademos.org/files/16044/AmstelvarAlpha-VF.ttf'); + font-family:'AmstelvarAlpha'; + font-style: normal; +} + +label { + font: 1rem monospace; +} + +.container { + max-height: 150px; + overflow: scroll; +} + +.sample { + font: 2rem 'AmstelvarAlpha', sans-serif; +} + +</pre> + +<div class="hidden"> +<pre class="brush: css">html, body { + max-height: 100vh; + max-width: 100vw; + overflow: hidden; +} + +body { + display: flex; + flex-direction: column; +} + +header { + margin-bottom: 1.5rem; +} + +.container { + flex-grow: 1; +} + +.container > p { + margin-top: 0; + margin-bottom: 0; +} +</pre> +</div> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">let slantLabel = document.querySelector('label[for="slant"]'); +let slantInput = document.querySelector('#slant'); +let sampleText = document.querySelector('.sample'); + +function update() { + let slant = `oblique ${slantInput.value}deg`; + slantLabel.textContent = `font-style: ${slant};`; + sampleText.style.fontStyle = slant; +} + +slantInput.addEventListener('input', update); + +update(); +</pre> +</div> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiel">Beispiel</h2> + +<div class="hidden"> +<pre class="brush: html"><p class="normal">Text im Schnitt normal.</p> +<p class="italic">Text im Schnitt italic.</p> +<p class="oblique">Text im Schnitt oblique.</p> +</pre> +</div> + +<pre class="brush: css">.normal { + font-style: normal; +} + +.italic { + font-style: italic; +} + +.oblique { + font-style: oblique; +}</pre> + +<p>{{ EmbedLiveSample('Font_styles') }}</p> + +<h2 id="Barrierefreiheit">Barrierefreiheit</h2> + +<p>Längere Abschnitte in kursiver Schrift können für Menschen mit einer Lesestörung (<a class="mw-redirect" href="https://de.wikipedia.org/wiki/Legasthenie" title="Legasthenie">Legasthenie</a> oder <a href="https://de.wikipedia.org/wiki/Dyslexie" title="Dyslexie">Dyslexie</a>) schwer bis gar nicht zu erfassen sein. Kursive Schrift sollte deshalb nur als Hervorhebung einzelner Stellen verwendet werden.</p> + +<ul> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li> + <li><a href="https://www.w3.org/TR/WCAG21/#visual-presentation">W3C Understanding WCAG 2.1</a></li> +</ul> + +<h2 id="Spezifikationen">Spezifikationen</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('CSS4 Fonts', '#font-style-prop', 'font-style')}}</td> + <td>{{Spec2('CSS4 Fonts')}}</td> + <td>Fügt die Möglichkeit einer Winkelangabe für <code>oblique</code> hinzu.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Fonts', '#font-style-prop', 'font-style')}}</td> + <td>{{Spec2('CSS3 Fonts')}}</td> + <td>Keine Änderung</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-style', 'font-style')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Keine Änderung</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#font-style', 'font-style')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Erste Definition</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("css.properties.font-style")}}</p> diff --git a/files/de/web/css/font-variant/index.html b/files/de/web/css/font-variant/index.html new file mode 100644 index 0000000000..19f2f0268d --- /dev/null +++ b/files/de/web/css/font-variant/index.html @@ -0,0 +1,116 @@ +--- +title: font-variant +slug: Web/CSS/font-variant +tags: + - CSS + - CSS Eigenschaften + - CSS Schriften + - NeedsLiveSample + - Referenz +translation_of: Web/CSS/font-variant +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die CSS-Eigenschaft <code>font-variant</code> erlaubt die Darstellung der Schrift in Kapitälchen, Kleinbuchstaben in der Form von Großbuchstaben.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("font-variant")}}</pre> + +<pre>font-variant: normal; +font-variant: small-caps; +font-variant: common-ligatures small-caps; + +font-variant: inherit; +font-variant: initial; +font-variant: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code>normal</code></dt> + <dd>Normale Schrift.</dd> + <dt><code>small-caps</code>, <code>all-small-caps</code>, <code>petite-caps</code>, <code>all-petite-caps</code>, <code>unicase</code>, <code>titling-caps</code></dt> + <dd>Stellt die Schrift in verschiedenen Arten von Kapitälchen dar, entsprechend {{cssxref("font-variant-caps")}}.<br> + Falls dies von der Schriftart nicht unterstützt wird, stellt Gecko den Effekt nach, indem die Kleinbuchstaben durch verkleinerte Grossbuchstaben ersetzt werden.</dd> +</dl> + +<div class="blockIndicator note"> +<p>Der Wert <code>small-caps</code> hat in einigen Sprachen weitergehende Auswirkungen:</p> + +<ul> + <li>In Turksprachen (wie Türkisch (tr), Aserbaidschanisch (az), Krimtatarisch (crh), Tatarisch (tt) und Baschkirisch (ba)), gibt es zwei verschiedene Buchstaben <code>i</code>, einen mit und einen ohne Punkt, und somit auch zwei verschiedene Buchstabenpaare: <code>i</code>/<code>İ</code> und <code>ı</code>/<code>I</code>.</li> + <li>Im Deutschen (de) wird das <code>ß</code> zu <code>SS</code>.</li> + <li>Im Griechischen (el) verlieren Vokale ihren Akzent, wenn sie großgeschrieben sind (<code>ά</code>/<code>Α</code>), eine Ausnahme ist Eta (<code>ή</code>/<code>Ή</code>). Auch Diphthongen mit einem Akzent im ersten Vokal verliern diesen, dafür erhält der zweite Vokal einen (<code>άι</code>/<code>ΑΪ</code>).</li> +</ul> + +<p>Die Sprache wird in HTML mit dem Attribut <code>lang</code> und in XML mit <code>xml:lang</code> definiert.</p> + +<p>Diese spezifischen Anpassungen werden nicht von allen Browsern unterstützt, siehe <a href="/de/docs/CSS/text-transform#Browser_compatibility" title="https://developer.mozilla.org/en-US/docs/CSS/text-transform#Browser_compatibility">Browserkompatibilität</a>.</p> +</div> + +<h2 id="Beispiel">Beispiel</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p class="normal">Firefox rocks!</p> +<p class="small">Firefox rocks!</p> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">p.normal { + font-variant: normal; +} +p.small { + font-variant: small-caps; +} +</pre> + +<h3 id="Result">Result</h3> + +<p>{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/font-variant') }}</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">Anmerkung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Fonts', '#propdef-font-variant', 'font-variant')}}</td> + <td>{{Spec2('CSS3 Fonts')}}</td> + <td>Sammeleigenschaft für <code>font-variant-*</code> (in diesem Artikel noch nicht beschrieben).</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-variant', 'font-variant')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Keine Änderung</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#font-variant', 'font-variant')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browserkompatibilität</h2> + +<p>{{Compat("css.properties.font-variant")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{cssxref("text-transform")}}</li> +</ul> diff --git a/files/de/web/css/font-weight/index.html b/files/de/web/css/font-weight/index.html new file mode 100644 index 0000000000..bff759e976 --- /dev/null +++ b/files/de/web/css/font-weight/index.html @@ -0,0 +1,276 @@ +--- +title: font-weight +slug: Web/CSS/font-weight +translation_of: Web/CSS/font-weight +--- +<div>{{CSSRef}}</div> + +<h2 id="Summary" name="Summary">Übersicht</h2> + +<p>Die <a href="/en-US/docs/CSS" title="CSS">CSS</a>-Eigenschaft {{Cssxref("font-weight")}} definiert die Stärke der Schrift. Einige Schriftarten sind jedoch nicht in allen Werten verfügbar und unterstützen nur die Werte <code>normal</code> und <code>bold</code>.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("font-weight")}}</pre> + +<pre><code>font-weight: normal +font-weight: bold + +font-weight: lighter +font-weight: bolder + +font-weight: 100 +font-weight: 200 +font-weight: 300 +font-weight: 400 +font-weight: 500 +font-weight: 600 +font-weight: 700 +font-weight: 800 +font-weight: 900 + +font-weight: inherit</code></pre> + +<h3 id="Values" name="Values">Werte</h3> + +<dl> + <dt><code>normal</code></dt> + <dd>Normale Stärke, entspricht <code>400</code>.</dd> + <dt><code>bold</code></dt> + <dd>Fette Schrift, entspricht <code>700</code>.</dd> + <dt><code>lighter</code></dt> + <dd>Eine Stufe dünner als das Elternelement (siehe <a href="#relative_angaben">Die Bedeutung relativer Angaben</a> unten).</dd> + <dt><code>bolder</code></dt> + <dd>Eine Stufe fetter als das Elternelement (siehe <a href="#relative_angaben">Die Bedeutung relativer Angaben</a> unten).</dd> + <dt><code><number></code></dt> + <dd>Eine Zahl ({{cssxref("<number>")}}) zwischen 1 und 1000 (einschließlich). Größere Werte stehen für eine fettere oder gleich fette Darstellung als kleinere Werte.</dd> +</dl> + +<p>Frühere Spezifikationen erlaubten für <code>font-weight</code> nur die Schlüsselworte sowie die Werte 100 bis 1000 in Hunderterschritten. Nicht-variable Schriftarten können nur mit diesen Werten arbeiten, feinere Abstimmungen werden jedoch mit den festgelegten Werte angenähert.</p> + +<p>Die Spezifikation CSS Fonts Level 4 nimmt variable Schriftarten im Format TrueType und OpenType auf. Mit diesen sind grundsätzlich beliebig feine Abstimmungen möglich.</p> + +<h3 id="Näherungsverfahren">Näherungsverfahren</h3> + +<p>Ist die gewählte Stärke nicht verfügbar, bestimmen die nachfolgenden Schritte die Darstellung:</p> + +<ul> + <li>Liegt die gewünschte Stärke zwischen 400 und 500 (einschließlich): + <ol> + <li>Verwende die erste Stärke, die größer als die gewünschte, aber kleiner als 500 ist.</li> + <li>Ist keine verfügbar, verwende die erste Stärke die kleiner als die gewünschte ist.</li> + <li>Ist keine verfügbar, verwende die erste Stärke größer als 500.</li> + </ol> + </li> + <li>Liegt die gewünschte Stärke unter 400, verwende die erste Stärke kleiner als die gewünschte. Ist keine verfügbar, verwende die erste Stärke größer als die gewünschte.</li> + <li>Liegt die gewünschte Stärke über 500, verwende die erste Stärke größer als die gewünschte. Ist keine verfügbar, verwende die erste Stärke kleiner als die gewünschte.</li> +</ul> + +<h3 id="Die_Bedeutung_relativer_Angaben"><a name="relative_angaben">Die Bedeutung relativer Angaben</a></h3> + +<p>Bei der Angabe von <code>lighter</code> und <code>bolder</code> bestimmt die nachfolgende Tabelle die tatsächliche Schriftstärke. Zu beachten ist, dass hierbei nur vier Abstufungen verfügbar sind, fein (100), normal (400), fett (700) und schwarz (900).</p> + +<table class="standard-table"> + <thead> + <tr> + <th>Gegeben</th> + <th><code>bolder</code></th> + <th><code>lighter</code></th> + </tr> + </thead> + <tbody> + <tr> + <th>100</th> + <td>400</td> + <td>100</td> + </tr> + <tr> + <th>200</th> + <td>400</td> + <td>100</td> + </tr> + <tr> + <th>300</th> + <td>400</td> + <td>100</td> + </tr> + <tr> + <th>400</th> + <td>700</td> + <td>100</td> + </tr> + <tr> + <th>500</th> + <td>700</td> + <td>100</td> + </tr> + <tr> + <th>600</th> + <td>900</td> + <td>400</td> + </tr> + <tr> + <th>700</th> + <td>900</td> + <td>400</td> + </tr> + <tr> + <th>800</th> + <td>900</td> + <td>700</td> + </tr> + <tr> + <th>900</th> + <td>900</td> + <td>700</td> + </tr> + </tbody> +</table> + +<h3 id="Zuordnung_von_Namen_und_Werten">Zuordnung von Namen und Werten</h3> + +<p>Die Werte 100 bis 900 entsprechen ungefähr den nachfolgenden Bezeichnungen (siehe <a href="https://docs.microsoft.com/en-us/typography/opentype/spec/os2#usweightclass">OpenType-Spezifikation</a> und <a href="https://de.wikipedia.org/wiki/Schriftschnitt#Variation_der_Schriftst%C3%A4rke">Wikipedia-Artikel zur Schriftstärke</a>):</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Wert</th> + <th scope="col">Deutsch</th> + <th scope="col">Englisch</th> + </tr> + </thead> + <tbody> + <tr> + <td>100</td> + <td>fein</td> + <td>Thin (Hairline)</td> + </tr> + <tr> + <td>200</td> + <td>extraleicht</td> + <td>Extra Light (Ultra Light)</td> + </tr> + <tr> + <td>300</td> + <td>leicht</td> + <td>Light</td> + </tr> + <tr> + <td>400</td> + <td>normal</td> + <td>Normal (Regular)</td> + </tr> + <tr> + <td>500</td> + <td>medium</td> + <td>Medium</td> + </tr> + <tr> + <td>600</td> + <td>halbfett</td> + <td>Semi Bold (Demi Bold)</td> + </tr> + <tr> + <td>700</td> + <td>fett</td> + <td>Bold</td> + </tr> + <tr> + <td>800</td> + <td>extrafett</td> + <td>Extra Bold (Ultra Bold)</td> + </tr> + <tr> + <td>900</td> + <td>schwarz</td> + <td>Black (Heavy)</td> + </tr> + <tr> + <td>950</td> + <td>extraschwarz</td> + <td>Extra Black (Ultra Black)</td> + </tr> + </tbody> +</table> + +<h3 id="Variable_Schriftarten">Variable Schriftarten</h3> + +<p>Die meisten Schriftarten stellen nur einige festgelegte Breiten zur Verfügung. Variable Schriftarten unterstützen hingegen eine Vielzahl von Breiten in mehr oder weniger feiner Abstufung.</p> + +<p>Bei variablen Schriftarten vom Typ TrueType und OpenType korrespondiert deren Eigenschaft "wght" mit der CSS-Eigenschaft <code>font-weight</code> und wird von Browsern – sofern unterstützt – entsprechend eingesetzt.</p> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush: html"><p> + Alice fing an sich zu langweilen; sie saß schon + lange bei ihrer Schwester am Ufer und hatte nichts + zu tun. Das Buch, das ihre Schwester las, gefiel + ihr nicht, denn es waren weder Bilder noch Gespräche + darin. »Und was nützen Bücher,« dachte Alice, + »ohne Bilder und Gespräche?« +</p> + +<div>Ich bin breiter.<br/> + <span>Ich bin schmaler.</span> +</div> +</pre> + +<pre class="brush:css">/* Absatz soll breiter sein. */ +p { + font-weight: bold; +} + +/* Der Text im div soll zwei Schritte breiter + als normal sein, aber nicht so breit wie + ein normales breit (bold). */ +div { + font-weight: 600; +} + +/* Der Text im span soll einen Schritt schmaler + sein als jener seines Elternelements. */ +span { + font-weight: lighter; +}</pre> + +<p>{{EmbedLiveSample("Beispiele","400","300")}}</p> + +<h2 id="Notes" name="Notes">Spezifikation</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Anmerkung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Fonts', '#font-weight-prop', 'font-weight')}}</td> + <td>{{Spec2('CSS3 Fonts')}}</td> + <td>Keine Änderung</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'font-weight')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td><code>font-weight</code> ist animierbar</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-weight', 'font-weight')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Keine Änderung</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#font-weight', 'font-weight')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browserkompatibilität</h2> + +<p>{{Compat("css.properties.font-weight")}}</p> diff --git a/files/de/web/css/font/index.html b/files/de/web/css/font/index.html new file mode 100644 index 0000000000..6e0fecf56b --- /dev/null +++ b/files/de/web/css/font/index.html @@ -0,0 +1,176 @@ +--- +title: font +slug: Web/CSS/font +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/font +--- +<p>{{CSSRef}}</p> + +<p>Die <code>font</code> Eigenschaft hat zwei unterschiedliche Verwendungszwecke:</p> + +<ol> + <li>Die <code>font</code> Eigenschaft kann als Kurzform für die Eigenschaften <a href="/de/docs/Web/CSS/font-style"><code>font-style</code></a>, <a href="/de/docs/Web/CSS/font-variant"><code>font-variant</code></a>, <a href="/de/docs/Web/CSS/font-weight"><code>font-weight</code></a>, <a href="/de/docs/Web/CSS/font-size"><code>font-size</code></a>, <a href="/de/docs/Web/CSS/line-height"><code>line-height</code></a> und <a href="/de/docs/Web/CSS/font-family"><code>font-family</code></a> dienen und setzt dabei, wie bei jeder Kurzform, die einzelnen Eigenschaften auf ihre Standardwerte zurück, wenn nichts weiter angegeben wird, oder</li> + <li>die jeweilige Schrift eines Elementes kann auf eine Systemschriftart festlegt werden. Diese Systemschriftarten können jedoch nur über die <code>font</code> Eigenschaft gesetzt werden und nicht etwa über die <a href="/de/CSS/font-family"><code>font-family</code></a> Eigenschaft, sodass <code>font</code> nicht nur als eine Kurznotation von verschiedenen Schrift-Eigenschaften anzusehen ist.</li> +</ol> + +<p>Außerdem ist zu beachten, dass <code>font</code> keine weiteren Eigenschaften wie etwa <a href="/de/docs/Web/CSS/font-stretch"><code>font-stretch</code></a> oder <a href="/de/docs/Web/CSS/font-size-adjust"><code>font-size-adjust</code></a> mit einschließt und <a href="/de/docs/Web/CSS/font-size-adjust"><code>font-size-adjust</code></a> dennoch auf den Standardwert (<code>normal</code>) zurückgesetzt wird, wenn die <code>font</code> Eigenschaft notiert wird.<br> + Das Festlegen von <a href="/de/docs/Web/CSS/font-size"><code>font-size</code></a> sowie <a href="/de/docs/Web/CSS/font-family"><code>font-family</code></a> ist verpflichtend, sonst wird die Anweisung komplett ignoriert.</p> + +<ul> + <li>Standardwert: siehe einzelne Eigenschaften</li> + <li>Anwendbar auf: alle Elemente</li> + <li>Vererbbar: Ja</li> + <li>Prozentwerte: erlaubt für <code>font-size</code> und <code>line-height</code></li> + <li>Medium: visuell</li> + <li>berechneter Wert: siehe einzelne Eigenschaften</li> +</ul> + +<h2 id="Syntax">Syntax</h2> + +<pre class="eval">[ + [ <<a href="/de/docs/Web/CSS/font-style">font-style</a>> || <<a href="/de/docs/Web/CSS/font-variant">font-variant</a>> || <<a href="/de/docs/Web/CSS/font-weight">font-weight</a>> ]? + <<a href="/de/docs/Web/CSS/font-size">font-size</a>> + [ / <<a href="/de/docs/Web/CSS/line-height">line-height</a>> ]? + <<a href="/de/docs/Web/CSS/font-family">font-family</a>> +] +| caption | icon | menu | message-box | small-caption | status-bar +| -moz-window | -moz-desktop | -moz-workspace | -moz-document | -moz-info +| -moz-dialog | -moz-button | -moz-pull-down-menu | -moz-list | -moz-field +| inherit</pre> + +<h2 id="Werte">Werte</h2> + +<p>Wird <code>font</code> als Kurzform verwendet, siehe einzelne Eigenschaften für die unterschiedlichen Werteangaben.</p> + +<h3 id="Werte_für_System-Fonts">Werte für System-Fonts</h3> + +<dl> + <dt>caption</dt> + <dd>Schrift, die für Beschriftungen von Kontrollelementen (Buttons, Drop-Downs, etc.) verwendet wird.</dd> + <dt>icon</dt> + <dd>Schrift, die zur Beschriftung von Icons verwendet wird.</dd> + <dt>menu</dt> + <dd>Schrift die in Menüs benutzt wird.</dd> + <dt>message-box</dt> + <dd>Schrift die in Dialogboxen verwendet wird.</dd> + <dt>small-caption</dt> + <dd>Schrift die für kleine Kontrollelemente benutzt wird.</dd> + <dt>status-bar</dt> + <dd>Schrit die in Statusleisten benutzt wird.</dd> +</dl> + +<h3 id="Mozilla_Erweiterungen_für_System-Fonts">Mozilla Erweiterungen für System-Fonts</h3> + +<dl> + <dt>-moz-window</dt> + <dd>Schrift, die für den Inhalt in einem Fenster verwendet wird.</dd> + <dt>-moz-desktop</dt> + <dd>Schrift, die auf dem Desktop benutzt wird.</dd> + <dt>-moz-workspace</dt> + <dd>Schrift, die für ein Arbeitsplatz-Fenster verwendet wird.</dd> + <dt>-moz-document</dt> + <dd>Schrift, die für den Inhalt eines Dokumentes benutzt wird.</dd> + <dt>-moz-dialog</dt> + <dd>Schrift die in Dialogboxen verwendet wird (wie <code>message-box</code>).</dd> + <dt>-moz-button</dt> + <dd>Schrift, die für Beschriftungen von Kontrollelementen (Buttons, Drop-Downs, etc.) verwendet wird (wie <code>caption</code>).</dd> + <dt>-moz-pull-down-menu</dt> + <dd>Schrift, die für Aufklapp-Menüs benutzt wird.</dd> + <dt>-moz-list</dt> + <dd>Schrift, die in Listenmenüs verwendet wird.</dd> + <dt>-moz-field</dt> + <dd>Schrift, die in Textfeldern (z.B. <code>input</code>) verwendet wird.</dd> + <dt>-moz-info</dt> + <dd>?</dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<p><a class="external" href="/samples/cssref/font.html" rel="external nofollow" title="https://developer.mozilla.org/samples/cssref/font.html">Link zum Live Beispiel</a></p> + +<p id="Beispiel_1">Beispiel 1</p> + +<pre>/* Setze die Schriftgröße auf 12px und die Zeilenhöhe auf 14px, sowie die Schriftart auf sans-serif */ +p { font: 12px/14px sans-serif } +</pre> + +<p id="Beispiel_2">Beispiel 2</p> + +<pre>/* Setze die Schriftgröße auf 80% des Elternelements und setze die Schriftart auf sans-serif */ +p { font: 80% sans-serif } + +/* Hat den gleichen Effekt wie: */ +p { + font-family: sans-serif; + font-style: normal; + font-variant: normal; + font-weight: 600; + font-size: 80%; + line-height: normal; +} +</pre> + +<p id="Beispiel_3">Beispiel 3</p> + +<pre>/* Setze die Schriftstärke auf fett, die Textneigung auf kursiv, die Schriftgröße auf groß, +und die Schriftart auf serif. */ +p { font: bold italic large serif } +</pre> + +<p id="Beispiel_4">Beispiel 4</p> + +<pre>/* Benutze die gleiche Schriftart wie die Statusleiste des Fensters. */ +p { font: status-bar } +</pre> + +<h2 id="Browser_Kompatibilität">Browser <span>Kompatibilität</span></h2> + +<table class="standard-table"> + <tbody> + <tr> + <th rowspan="2">Browser</th> + <th colspan="2">ab Version</th> + </tr> + <tr> + <th>Kurznotation</th> + <th>Systemschriften</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>3.0-4.0</td> + <td>4.0-5.5</td> + </tr> + <tr> + <td>Firefox (Gecko)</td> + <td>1.0 (1.0)</td> + <td>1.0 (1.0)</td> + </tr> + <tr> + <td>Opera</td> + <td>3.5</td> + <td>6.0</td> + </tr> + <tr> + <td>Safari (WebKit)</td> + <td>1.0 (85)</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> + +<h2 id="Spezifikation">Spezifikation</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/css3-ui/#system0" lang="en">CSS 3 UI #System fonts</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/fonts.html#font-shorthand" lang="en" title="http://www.w3.org/TR/CSS21/fonts.html#font-shorthand">CSS 2.1 Fonts #font</a></li> +</ul> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/CSS/font-style"><code>font-style</code></a>, <a href="/de/docs/Web/CSS/font-variant"><code>font-variant</code></a>, <a href="/de/docs/Web/CSS/font-weight"><code>font-weight</code></a>, <a href="/de/docs/Web/CSS/font-size"><code>font-size</code></a>, <a href="/de/docs/Web/CSS/line-height"><code>line-height</code></a>, <a href="/de/docs/Web/CSS/font-family"><code>font-family</code></a></li> + <li><a href="/de/docs/Web/CSS/font-size-adjust"><code>font-size-adjust</code></a>, <a href="/de/docs/Web/CSS/font-stetch"><code>font-stetch</code></a></li> + <li><a href="/de/docs/Web/CSS/@font-face"><code>@font-face</code></a></li> +</ul> diff --git a/files/de/web/css/frequency/index.html b/files/de/web/css/frequency/index.html new file mode 100644 index 0000000000..799e3fc5e3 --- /dev/null +++ b/files/de/web/css/frequency/index.html @@ -0,0 +1,111 @@ +--- +title: <frequency> +slug: Web/CSS/frequency +translation_of: Web/CSS/frequency +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Der <a href="/de/docs/Web/CSS" title="CSS">CSS</a> Datentyp <code><frequency></code> steht für eine Frequenz, wie sie bspw. bei Audio Inhalten gebraucht wird. Der Wert setzt sich susammen aus einer <span class="lang lang-en">{{cssxref("<number>")}}</span>, gefolgt von einer Einheit. Dazwischen darf kein Leerzeichen sein.</p> + +<p>Die folgenden Einheiten können gewählt werden:</p> + +<dl> + <dt><code><a id="Hz">Hz</a></code></dt> + <dd>Für eine Frequenz in Hertz.</dd> + <dt><code><a id="kHz">kHz</a></code></dt> + <dd>Für eine Frequenz in Kilohertz.</dd> +</dl> + +<p>Alle Einheiten können auch den Wert <code>0</code> (<code>0kHz</code> oder <code>0Hz</code><code>) </code>annehmen, welcher unabhängig der Einheit immer dasselbe Ergebnis erzielt. Ein Wert ohne angabe einer Einheit (<code>0</code>) ist nicht zulässig.</p> + +<h2 class="editable" id="Beispiele"><span>Beispiele</span></h2> + +<p>Gültige Werte:</p> + +<pre>12Hz Positive integer. +-456kHz Negative integer. +4.3Hz Non-integer. +14KhZ The unit is case-insensitive, though non-SI capitalization is not recommended. ++0Hz Zero, with a leading + and the unit. +-0kHz Zero, with a leading - and the unit (Though strange, this is an allowed value). +</pre> + +<p>Ungültige Werte:</p> + +<pre>12.0 This is a <a href="/en-US/docs/Web/CSS/number" title="en/CSS/number"><number></a>, not an <frequency>, it must have a unit. +7 Hz No space is allowed between the <a href="/en-US/docs/Web/CSS/number" title="en/CSS/number"><number></a> and the unit. +0 Zero values can be written without a unit only if there are <a href="/en-US/docs/Web/CSS/length" title="en/CSS/length"><length></a> values, not <frequency>. +</pre> + +<h2 id="Specifications" name="Specifications">Spezifikation</h2> + +<table class="standard-table"> + <thead> + <tr style="background-color: rgb(255, 204, 255);"> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Anmerkung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Values', '#frequency', '<frequency>') }}</td> + <td>{{ Spec2('CSS3 Values') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}} [*]</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[*] Einige Versionen von Opera unterstützten den Datentyp teilweise in einer veralteten Spezifikation.</p> diff --git a/files/de/web/css/gradient/index.html b/files/de/web/css/gradient/index.html new file mode 100644 index 0000000000..dcec7d40b2 --- /dev/null +++ b/files/de/web/css/gradient/index.html @@ -0,0 +1,91 @@ +--- +title: <gradient> +slug: Web/CSS/gradient +tags: + - CSS + - CSS Datentyp + - Grafik + - Layout + - Referenz + - Web +translation_of: Web/CSS/gradient +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Der <code><gradient></code> <a href="/de/docs/CSS">CSS</a> Datentyp beschreibt ein {{cssxref("<image>")}}, das aus einem progressiven Verlauf zwischen zwei oder mehreren Farben besteht. Ein CSS Farbverlauf ist kein {{cssxref("<color>")}} Wert, aber ein Bild <a href="/de/docs/Web/CSS/image#keine_inneren_Maße">ohne innere Maße</a>; das bedeutet, es hat weder eine natürliche oder bevorzugte Größe, noch ein bevorzugtes Seitenverhältnis. Seine konkrete Größe passt sich dem Element an, dem es zugewiesen wurde.</p> + +<p>Es gibt drei Arten von Farbverläufen:</p> + +<ul> + <li id="linear-gradient"><em>Lineare Farbverläufe</em>, erzeugt durch die {{cssxref("linear-gradient()")}} Funktion, wo die Farbe weich entlang einer imaginären Linie verläuft. + + <pre class="brush: html" style="display: none;">Ein durch einen Farbverlauf erzeugter Regenbogen +</pre> + + <pre class="brush: css">body { +background: -moz-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet); +background: -webkit-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet); +background: -ms-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet); +background: -o-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet); +background: linear-gradient(to right,red,orange,yellow, green, blue,indigo,violet); +}</pre> + + <p>{{EmbedLiveSample('linear-gradient', 600, 20)}}</p> + </li> + <li id="radial-gradient"><em>Radiale Farbverläufe</em>, erzeugt durch die {{cssxref("radial-gradient()")}} Funktion. Je weiter sich ein Punkt vom Ursprung entfernt befindet, desto weiter entfernt ist er von der Originalfarbe. + <pre class="brush: html" style="display: none;">Radialer Farbverlauf + </pre> + + <pre class="brush: css">body { +background: -moz-radial-gradient(red, yellow, rgb(30, 144, 255)) repeat scroll 0% 0% transparent; +background: radial-gradient(red, yellow, rgb(30, 144, 255)); +} +</pre> + + <p>{{EmbedLiveSample('radial-gradient', 600, 20)}}</p> + </li> + <li id="repeating-gradient"><em>Wiederholende Farbverläufe</em>, welche lineare oder radiale Farbverläufe fester Größe sind, die sich solange wiederholen bis die gesamte Box gefüllt ist. + <pre class="brush: html" style="display: none;">Wiederholender Farbverlauf +</pre> + + <pre class="brush: css">body { +background: -moz-repeating-linear-gradient(top left -45deg, red, red 5px, white 5px, white 10px); +background: repeating-linear-gradient(to top left, red, red 5px, white 5px, white 10px); +} </pre> + + <p>{{EmbedLiveSample('repeating-gradient', 600, 20)}}</p> + </li> +</ul> + +<p>Wie in allen Fällen, in denen zwischen Farben interpoliert wird, werden Farbverläufe im alpha-vormultiplizierten Farbraum berechnet. Dies verhindert unerwartete Grauschattierungen, wenn sowohl Farbe als auch Deckkraft variieren.</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th>Spezifikation</th> + <th>Status</th> + <th>Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Images', '#gradients', '<gradient>')}}</td> + <td>{{Spec2('CSS3 Images')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>Jeder Farbverlaufstyp hat eine unterschiedliche Kompatibilitätsmatrix. Bitte daher die individuellen Artikel lesen.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Farbverläufe_in_CSS">Farbverläufe in CSS</a>, {{cssxref("linear-gradient()")}}, {{cssxref("radial-gradient()")}}, {{cssxref("repeating-linear-gradient()")}}, {{cssxref("repeating-radial-gradient()")}}</li> +</ul> diff --git a/files/de/web/css/grid-gap/index.html b/files/de/web/css/grid-gap/index.html new file mode 100644 index 0000000000..8e2956013f --- /dev/null +++ b/files/de/web/css/grid-gap/index.html @@ -0,0 +1,177 @@ +--- +title: grid-gap +slug: Web/CSS/grid-gap +translation_of: Web/CSS/gap +--- +<p><strong><code>grid-gap</code></strong> ist die <a href="/en-US/docs/Web/CSS/Shorthand_properties">shorthand</a> CSS Eigenschaft für {{cssxref("grid-row-gap")}} und {{cssxref("grid-column-gap")}} , welche die Spalten (gutter) zwischen Rasterreihen und Rasterspalten festlegt.</p> + +<pre class="brush: css no-line-numbers">/* Ein <Länge> Wert */ +grid-gap: 20px; +grid-gap: 1em; +grid-gap: 3vmin; +grid-gap: 0.5cm; + +/* Ein <Prozent> Wert */ +grid-gap: 16%; +grid-gap: 100%; + +/* Zwei <Länge> Werte */ +grid-gap: 20px 10px; +grid-gap: 1em 0.5em; +grid-gap: 3vmin 2vmax; +grid-gap: 0.5cm 2mm; + +/* Ein or zwei <Prozent> Werte */ +grid-gap: 16% 100%; +grid-gap: 21px 82%; + +/* Globale Werte */ +grid-gap: inherit; +grid-gap: initial; +grid-gap: unset; +</pre> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<p>Dieser Eigenschaft wird ein Wert für <code><'grid-row-gap'></code> zugeordnet, gefolgt von einem optionalen Wert für <code><'grid-column-gap'></code>. Falls <code><'grid-column-gap'></code> ausgelassen wird, wird diesem der gleiche Wert zugeordnet wie <code><'grid-row-gap'></code>.</p> + +<p><code><'grid-row-gap'></code> und <code><'grid-column-gap'></code> werden jeweils angegeben als <code><Länge></code> or als <code><Prozent></code>.</p> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code><Länge></code></dt> + <dd>Gibt die Breite der Spalte an, welche die Grid-Linien trennt.</dd> + <dt><code><Prozent></code></dt> + <dd>Ist die prozentuale Breite der Lücke zwischen zwei Rasterlinien im Verhältnis zu der Gesamtgröße des Elements.</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiel">Beispiel</h2> + +<h3 id="HTML_Inhalt">HTML Inhalt</h3> + +<pre class="brush: html"><div id="grid"> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> +</div></pre> + +<h3 id="CSS_Inhalt">CSS Inhalt</h3> + +<pre class="brush: css; highlight[5]">#grid { + display: grid; + height: 200px; + grid-template: repeat(3, 1fr) / repeat(3, 1fr); + grid-gap: 20px 5px; +} + +#grid > div { + background-color: lime; +} +</pre> + +<p>{{EmbedLiveSample("Example", "100%", "200px")}}</p> + +<h2 id="Spezifikationen">Spezifikationen</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 Grid", "#propdef-grid-gap", "grid-gap")}}</td> + <td>{{Spec2("CSS3 Grid")}}</td> + <td>Erste Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<p> </p> + + + +<p>{{Compat("css.properties.grid-gap")}}</p> + +<p> </p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Related CSS properties: {{cssxref("grid-row-gap")}}, {{cssxref("grid-column-gap")}}</li> + <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Gutters">Basic concepts of grid layout - Gutters</a></em></li> +</ul> + +<section class="Quick_links" id="Quick_Links"> +<ol> + <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li> + <li data-default-state="open"><a href="#"><strong>Guides</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Properties</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Glossary</strong></a> + <ol> + <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li> + <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li> + <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li> + <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li> + <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> + <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li> + <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li> + </ol> + </li> +</ol> +</section> diff --git a/files/de/web/css/grid-template-areas/index.html b/files/de/web/css/grid-template-areas/index.html new file mode 100644 index 0000000000..57ceda4481 --- /dev/null +++ b/files/de/web/css/grid-template-areas/index.html @@ -0,0 +1,194 @@ +--- +title: grid-template-areas +slug: Web/CSS/grid-template-areas +tags: + - CSS + - CSS Eigenschaft + - CSS Grid + - CSS Property + - Reference + - Referenz +translation_of: Web/CSS/grid-template-areas +--- +<p>Die <strong><code>grid-template-areas</code></strong> CSS Eigenschaft spezifiziert benannte {{glossary("grid areas")}}.</p> + +<div>{{EmbedInteractiveExample("pages/css/grid-template-areas.html")}}</div> + +<p class="hidden">Der Code für dieses interaktive Beispiel befindet sich in einem GitHub repository. Wenn du zum interaktiven Beispielprojekt beitragen möchtest klone bitte <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> und sende uns einen pull request.</p> + +<p>Diese areas sind nicht mit einem bestimmten grid item assoziiert, sondern können von den grid-placement Eigenschaften {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, und ihren Kurzformen {{cssxref("grid-row")}}, {{cssxref("grid-column")}}, und {{cssxref("grid-area")}} referenziert werden.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: css no-line-numbers">/* Keyword value */ +grid-template-areas: none; + +/* <string> values */ +grid-template-areas: "a b"; +grid-template-areas: "a b b" + "a c d"; + +/* Global values */ +grid-template-areas: inherit; +grid-template-areas: initial; +grid-template-areas: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code>none</code></dt> + <dd>Der grid container definiert keine benannten grid areas.</dd> + <dt><code>{{cssxref("<string>")}}+</code></dt> + <dd>Für jeden seperaten String wird eine Reihe, und für jede Zelle in dem String wird eine Spalte erstellt. Mehrere benannte Zelltokens innerhalb und zwischen den Reihen sind eine einzelne benannte grid area welche die entsprechenden grid Zellen überspannt. Wenn diese Zellen kein Quader formen ist de Deklaration ungültig.</dd> +</dl> + +<h3 id="Formaler_Syntax">Formaler Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<p><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 40px;"><strong>Beispiel</strong></span></font></p> + +<p> + </p><h3 id="HTML">HTML</h3> +<p></p> + +<pre class="brush: html"><section id="page"> + <header>Header</header> + <nav>Navigation</nav> + <main>Main area</main> + <footer>Footer</footer> +</section></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush:css; highlight[5-7]">#page { + display: grid; + width: 100%; + height: 250px; + grid-template-areas: "head head" + "nav main" + "nav foot"; + grid-template-rows: 50px 1fr 30px; + grid-template-columns: 150px 1fr; +} + +#page > header { + grid-area: head; + background-color: #8ca0ff; +} + +#page > nav { + grid-area: nav; + background-color: #ffa08c; +} + +#page > main { + grid-area: main; + background-color: #ffff64; +} + +#page > footer { + grid-area: foot; + background-color: #8cffa0; +} +</pre> + +<h3 id="Ergebnis">Ergebnis</h3> + +<p><em>{{EmbedLiveSample("Example", "100%", "250px")}}</em></p> + +<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("CSS3 Grid", "#propdef-grid-template-areas", "grid-template-areas")}}</td> + <td>{{Spec2("CSS3 Grid")}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_kompatibilität">Browser kompatibilität</h2> + +<p> </p> + +<div class="hidden">Die Kompatibilitätstabelle auf dieser Seite wird von struktorierten Daten generiert. Wenn du zu diesen Daten beitragen möchtest, schau unter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> und sende uns einen pull request.</div> + +<p>{{Compat("css.properties.grid-template-areas")}}</p> + +<p> </p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Verwandte CSS Eigenschaften: {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template")}}</li> + <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></em></li> + <li>Video Tutorial: <em><a href="http://gridbyexample.com/video/grid-template-areas/">Grid Template Areas</a></em></li> +</ul> + +<section class="Quick_links" id="Quick_Links"> +<ol> + <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li> + <li data-default-state="open"><a href="#"><strong>Guides</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Properties</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Glossary</strong></a> + <ol> + <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li> + <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li> + <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li> + <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li> + <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> + <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li> + <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li> + </ol> + </li> +</ol> +</section> diff --git a/files/de/web/css/grid/index.html b/files/de/web/css/grid/index.html new file mode 100644 index 0000000000..2dc160fe34 --- /dev/null +++ b/files/de/web/css/grid/index.html @@ -0,0 +1,184 @@ +--- +title: grid +slug: Web/CSS/grid +tags: + - CSS + - CSS-Eigenschaft + - CSS-Raster + - Referenz +translation_of: Web/CSS/grid +--- +<h2 id="Zusammenfassung">Zusammenfassung</h2> + +<p>Die <strong><code>grid-</code></strong>CSS-Eigenschaft ist eine <a href="/en-US/docs/Web/CSS/Shorthand_properties">Kurzschrift-Eigenschaft</a>, die alle der expliziten Gittereigenschaften ({{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}} und {{cssxref("grid-template-areas")}}) setzt, alle impliziten Gittereigenschaften ({{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-columns")}} und {{cssxref("grid-auto-flow")}}) sowie die Zwischenabstandseigenschaften ({{cssxref("grid-column-gap")}} und {{cssxref("grid-row-gap")}}) in einer einfachen Deklaration.</p> + +<p class="note"><strong>Hinweis: </strong>Sie können nur die expliziten <em>oder</em> die impliziten Rastereigenschaften in einer einfachen <code>grid</code>-Deklaration spezifizieren. Die Subeigenschaften, die Sie nicht spezifizieren, werden auf ihre Initialwerte gesetzt, wie für Kurzschrift üblich. Außerdem werden die Zwischenabstandseigenschaften durch diese Kurzschrift ebenfalls zurückgesetzt, obwohl diese nicht einmal gesetzt werden können.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: css">/* Werte für <'grid-template'> */ +grid: none; +grid: "a" 100px "b" 1fr; +grid: [linename1] "a" 100px [linename2]; +grid: "a" 200px "b" min-content; +grid: "a" minmax(100px, max-content) "b" 20%; +grid: 100px / 200px; +grid: minmax(400px, min-content) / repeat(auto-fill, 50px); + +/* Werte für <'grid-template-rows'> / + [ auto-flow && dense? ] <'grid-auto-columns'>? */ +grid: 200px / auto-flow; +grid: 30% / auto-flow dense; +grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px; +grid: [line1] minmax(20em, max-content) / auto-flow dense 40%; + +/* Werte für [ auto-flow && dense? ] <'grid-auto-rows'>? / + <'grid-template-columns'> */ +grid: auto-flow / 200px; +grid: auto-flow dense / 30%; +grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px); +grid: auto-flow dense 40% / [line1] minmax(20em, max-content); + +/* Globale Werte */ +grid: inherit; +grid: initial; +grid: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code><'grid-template'></code></dt> + <dd>Defines the {{cssxref("grid-template")}} including {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-rows")}} and {{cssxref("grid-template-areas")}}.</dd> + <dt><code><'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?</code></dt> + <dd>Sets up an auto-flow by setting the row tracks explicitly via the {{cssxref("grid-template-rows")}} property (and the {{cssxref("grid-template-columns")}} property to <code>none</code>) and specifying how to auto-repeat the column tracks via {{cssxref("grid-auto-columns")}} (and setting {{cssxref("grid-auto-rows")}} to <code>auto</code>). {{cssxref("grid-auto-flow")}} is also set to <code>column</code> accordingly, with <code>dense</code> if it’s specified. + <p>All other <code>grid</code> sub-properties are reset to their initial values.</p> + </dd> + <dt><code>[ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'></code></dt> + <dd>Sets up an auto-flow by setting the column tracks explicitly via the {{cssxref("grid-template-columns")}} property (and the {{cssxref("grid-template-rows")}} property to <code>none</code>) and specifying how to auto-repeat the row tracks via {{cssxref("grid-auto-rows")}} (and setting {{cssxref("grid-auto-columns")}} to <code>auto</code>). {{cssxref("grid-auto-flow")}} is also set to <code>row</code> accordingly, with <code>dense</code> if it’s specified. + <p>All other <code>grid</code> sub-properties are reset to their initial values.</p> + </dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiel">Beispiel</h2> + +<h3 id="HTML-Inhalt">HTML-Inhalt</h3> + +<pre class="brush: html"><div id="container"> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> +</div></pre> + +<h3 id="CSS-Inhalt">CSS-Inhalt</h3> + +<pre class="brush: css">#container { + display: grid; + grid: repeat(2, 60px) / auto-flow 80px; +} + +#container > div { + background-color: #8ca0ff; + width: 50px; + height: 50px; +}</pre> + +<h3 id="Ergebnis">Ergebnis</h3> + +<p>{{EmbedLiveSample("Example", "100%", 150)}}</p> + +<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("CSS3 Grid", "#propdef-grid", "grid")}}</td> + <td>{{Spec2("CSS3 Grid")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +{{Compat("css.properties.grid")}} + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Verwandte CSS-Eigenschaften: {{cssxref("grid-template")}}, {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-flow")}}</li> +</ul> + +<section class="Quick_links" id="Quick_Links"> +<ol> + <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> + <li><strong><a href="/en-US/docs/Web/CSS/Reference">CSS-Referenz</a></strong></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS-Gitterlayout</a></li> + <li data-default-state="open"><a href="#"><strong>Guides</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Eigenschaften</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-colunms</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Glossar</strong></a> + <ol> + <li><a href="/en-US/docs/Glossary/Grid_lines">Gitterlinien</a></li> + <li><a href="/en-US/docs/Glossary/Grid_tracks">Gittertracks</a></li> + <li><a href="/en-US/docs/Glossary/Grid_cell">Gitterzelle</a></li> + <li><a href="/en-US/docs/Glossary/Grid_areas">Gitterbereiche</a></li> + <li><a href="/en-US/docs/Glossary/Gutters">Zwischenabstände</a></li> + <li><a href="/en-US/docs/Glossary/Grid_rows">Gitterzeile</a></li> + <li><a href="/en-US/docs/Glossary/Grid_column">Gitterspalte</a></li> + </ol> + </li> +</ol> +</section> diff --git a/files/de/web/css/height/index.html b/files/de/web/css/height/index.html new file mode 100644 index 0000000000..8360676aa8 --- /dev/null +++ b/files/de/web/css/height/index.html @@ -0,0 +1,157 @@ +--- +title: height +slug: Web/CSS/height +tags: + - CSS + - CSS Eigenschaft + - Referenz +translation_of: Web/CSS/height +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <strong><code>height</code></strong> CSS Eigenschaft bestimmt die Höhe des Inhaltsbereichs eines Elements. Der <a href="/de/docs/Web/CSS/Boxmodell#Inhalt">Inhaltsbereich</a> ist <em>innerhalb</em> des Innenabstands, der Rahmen und des Außenabstands des Elements.</p> + +<p>Die Eigenschaften {{cssxref("min-height")}} und {{cssxref("max-height")}} überschreiben <code>height</code>.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">/* Schlüsselwortwert */ +height: auto; + +/* <length> Werte */ +height: 120px; +height: 10em; + +/* <percentage> Wert */ +height: 75%; + +/* Globale Werte */ +height: inherit; +height: initial; +height: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code><length></code></dt> + <dd>Siehe {{cssxref("<length>")}} für mögliche Einheiten.</dd> + <dt><code><percentage></code></dt> + <dd>Definiert als eine {{cssxref("<percentage>")}} der Höhe des beinhaltenden Blocks.</dd> + <dt><code>border-box </code>{{experimental_inline}}</dt> + <dd>Falls angegeben, wird die vorhergehende {{cssxref("<length>")}} oder {{cssxref("<percentage>")}} auf die Rahmenbox des Elements angewendet.</dd> + <dt><code>content-box</code> {{experimental_inline}}</dt> + <dd>Falls angegeben, wird die vorhergehende {{cssxref("<length>")}} oder {{cssxref("<percentage>")}} auf die Inhaltsbox des Elements angewendet.</dd> + <dt><code>auto</code></dt> + <dd>Der Browser berechnet und wählt die Höhe für das angegebene Element aus.</dd> + <dt><code>max-content</code> {{experimental_inline}}</dt> + <dd>Die innere bevorzugte Höhe.</dd> + <dt><code>min-content</code> {{experimental_inline}}</dt> + <dd>Die innere Minimalhöhe.</dd> + <dt><code>available</code> {{experimental_inline}}</dt> + <dd>Die Höhe des beinhaltenden Blocks minus vertikaler Außenabstand, Rahmen und Innenabstand.</dd> + <dt><code>fit-content</code> {{experimental_inline}}</dt> + <dd>Die größere der: + <ul> + <li>inneren Minimalhöhe</li> + <li>kleineren der inneren bevorzugten und der verfügbaren Höhe</li> + </ul> + </dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiel">Beispiel</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div id="red"> + <span>Ich bin 50 Pixel hoch.</span> +</div> +<div id="green"> + <span>Ich bin 25 Pixel hoch.</span> +</div> +<div id="parent"> + <div id="child"> + <span>Ich bin halb so groß wie mein Elternelement.</span> + </div> +</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">div { + width: 250px; + margin-bottom: 5px; + border: 3px solid #999999; +} + +#red { + height: 50px; +} + +#green { + height: 25px; +} + +#parent { + height: 100px; +} + +#child { + height: 50%; + width: 75%; +} +</pre> + +<p>{{EmbedLiveSample('Beispiel')}}</p> + +<h2 id="Spezifikationen">Spezifikationen</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 Box', '#the-width-and-height-properties', 'height')}}</td> + <td>{{Spec2('CSS3 Box')}}</td> + <td>Fügt die Schlüsselwörter <code>max-content</code>, <code>min-content</code>, <code>available</code>, <code>fit-content</code>, <code>border-box</code> und <code>content-box</code> hinzu.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'height')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Definiert <code>height</code> als animierbar.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'visudet.html#the-height-property', 'height')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Fügt Unterstützung für {{cssxref("<length>")}} Werte hinzu und präzisiert, für welche Elemente die Eigenschaft gilt.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#height', 'height')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.properties.height")}} + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/CSS/Boxmodell">Boxmodell</a>, {{cssxref("width")}}, {{cssxref("box-sizing")}}, {{cssxref("min-height")}}, {{cssxref("max-height")}}</li> +</ul> diff --git a/files/de/web/css/hyphens/index.html b/files/de/web/css/hyphens/index.html new file mode 100644 index 0000000000..564d3246e1 --- /dev/null +++ b/files/de/web/css/hyphens/index.html @@ -0,0 +1,119 @@ +--- +title: hyphens +slug: Web/CSS/hyphens +tags: + - CSS + - CSS Eigenschaft + - Experimentell + - Referenz +translation_of: Web/CSS/hyphens +--- +<div>{{CSSRef}}</div> + +<h2 id="Summary" name="Summary">Übersicht</h2> + +<p>Die <code>hyphens </code>Eigenschaft regelt die automatische Silbentrennung. Dazu ist das HTML Attribut <code>lang</code>, bzw. <font face="Courier New">xml:lang </font>unter XML<font face="Courier New">,</font> zwingend notwendig.</p> + +<div class="note"><strong>Hinweis:</strong> Wie die Silbentrennung umgesetzt wird kann von Browser zu Browser, bzw. von Sprache zu Sprache, variieren.</div> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="twopartsyntaxbox notranslate">{{csssyntax}} +</pre> + +<pre class="notranslate">hyphens: none +hyphens: manual +hyphens: auto + +hyphens: inherit +</pre> + +<h3 id="Values" name="Values">Werte</h3> + +<dl> + <dt><code>none</code></dt> + <dd>Keine Silbentrennung: Wörter werden nicht getrennt und automatische Zeilenumbrüche sind nur bei Leerzeichen möglich.</dd> + <dt><code>manual</code></dt> + <dd>Manuelle Silbentrennung: Wörter werden nur dann getrennt, wenn dies definiert wurde (siehe {{anch("Umbrüche manuell definieren")}}).</dd> + <dt><code>auto</code></dt> + <dd>Automatische Silbentrennung: Der Browser trennt die Wörter automatisch. Manuell definierte Umbrüche werden dabei vorgezogen (siehe {{anch("Umbrüche manuell definieren")}}).</dd> +</dl> + +<h2 id="Umbrüche_manuell_definieren">Umbrüche manuell definieren</h2> + +<p>Es gibt zwei Möglichkeiten, um Wörter manuell zu trennen. Dafür werden die beiden folgenden Unicode-Zeichen verwendet:</p> + +<dl> + <dt>U+2010 (Bindestrich)</dt> + <dd>Dieser Bindestrich ist <u>immer</u> sichtbar, auch wenn das Wort gar nicht getrennt werden muss.</dd> + <dt>U+00AD (SHY)</dt> + <dd>Dieses Zeichen ist unsichtbar und kennzeichnet nur eine mögliche Trennstelle. Sobald eine Trennung notwendig wird, wird ein Bindestrich sichtbar. In HTML lässt sich das Zeichen mit <code>&shy;</code> einfügen.</dd> +</dl> + +<h2 id="Beispiel">Beispiel</h2> + +<p>This CSS snippet creates three classes, one for each possible configuration of the <code>hyphens</code> property.</p> + +<pre class="brush: html notranslate"><ul> + <li><code>none</code>: no hyphen; overflow if needed + <p lang="en" class="none">An extreme&shy;ly long English word</p> + </li> + <li><code>manual</code>: hyphen only at &amp;hyphen; or &amp;shy; (if needed) + <p lang="en" class="manual">An extreme&shy;ly long English word</p> + </li> + <li><code>auto</code>: hyphen where the algo is deciding (if needed) + <p lang="en" class="auto">An extreme&shy;ly long English word</p> + </li> +</ul> +</pre> + +<pre class="brush: css notranslate">p { + width: 55px; + border: 1px solid black; + } +p.none { + -moz-hyphens: none; + hyphens: none; +} +p.manual { + -moz-hyphens: manual; + hyphens: manual; +} +p.auto { + -moz-hyphens: auto; + hyphens: auto; +} +</pre> + +<p>{{EmbedLiveSample("Beispiel", "100%", "470'")}}</p> + +<h2 id="Spezifikations">Spezifikations</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Anmerkung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Text', '#hyphens', 'hyphens')}}</td> + <td>{{Spec2('CSS3 Text')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser Kompatibilität</h2> + +<p>{{Compat("css.properties.hyphens")}}</p> + +<h2 id="See_also" name="See_also">Siehe auch</h2> + +<ul> + <li>{{Cssxref("content")}}</li> +</ul> diff --git a/files/de/web/css/id-selektoren/index.html b/files/de/web/css/id-selektoren/index.html new file mode 100644 index 0000000000..921e391d80 --- /dev/null +++ b/files/de/web/css/id-selektoren/index.html @@ -0,0 +1,72 @@ +--- +title: ID-Selektoren +slug: Web/CSS/ID-Selektoren +tags: + - CSS + - CSS Referenz + - Einsteiger + - Selektoren +translation_of: Web/CSS/ID_selectors +--- +<div>{{CSSRef("Selectors")}}</div> + +<p>In einem HTML Dokument matchen CSS ID-Selektoren ein Element basierend auf den Inhalten des {{htmlattrxref("id")}} Attributs des Elements, welches exakt dem Wert des angegebenen Selektors entsprechen muss.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">#id_value { <em>Stileigenschaften</em> }</pre> + +<p>Beachte, dass dies äquivalent zu folgendem {{cssxref("Attributselektoren", "Attributselektor")}} ist:</p> + +<pre class="syntaxbox">[id=id_value] { <em>Stileigenschaften</em> }</pre> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush: css">span#identified { + background-color: DodgerBlue; +} +</pre> + +<pre class="brush: html"><span id="identified">Hier ist ein Span mit Text.</span> +<span>Hier ist ein weiterer.</span> +</pre> + +<p>{{EmbedLiveSample("Beispiel", 200, 50)}}</p> + +<h2 id="Spezifikationen">Spezifikationen</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("CSS4 Selectors", "#id-selectors", "ID selectors")}}</td> + <td>{{Spec2("CSS4 Selectors")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("CSS3 Selectors", "#id-selectors", "ID selectors")}}</td> + <td>{{Spec2("CSS3 Selectors")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("CSS2.1", "selector.html#id-selectors", "ID selectors")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("CSS1", "#id-as-selector", "ID selectors")}}</td> + <td>{{Spec2("CSS1")}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.selectors.id")}} diff --git a/files/de/web/css/image-orientation/index.html b/files/de/web/css/image-orientation/index.html new file mode 100644 index 0000000000..5ef67d6ea1 --- /dev/null +++ b/files/de/web/css/image-orientation/index.html @@ -0,0 +1,98 @@ +--- +title: image-orientation +slug: Web/CSS/image-orientation +tags: + - CSS + - CSS Bild + - CSS Eigenschaft + - Referenz +translation_of: Web/CSS/image-orientation +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Mit der <a href="/en-US/docs/CSS">CSS</a> Eigenschaft <code>image-orientation</code> kann die Ausrichtung eines Bildes geändert werden.</p> + +<div class="note style-wrap"> +<p><strong>Hinweis:</strong></p> + +<ul> + <li><span id="result_box" lang="de"><span class="hps">Diese Eigenschaft</span> <span class="hps">ist nicht dazu gedacht</span> Bilder beliebig zu drehen<span class="hps"> sondern eine</span><span class="hps"> fehlerhaften</span> <span class="hps">Ausrichtung</span> <span class="hps">zu korrigieren.</span> <span class="hps">Deshalb wird</span><span class="hps"> zur nächsten</span> <span class="hps">Vierteldrehung</span> <span class="hps">gerundet.</span></span></li> + <li><span id="result_box" lang="de"><span class="hps">Ebenso</span> <span class="hps">ist diese Eigenschaft</span> <span class="alt-edited hps">nicht dazu vorgesehen</span><span class="alt-edited"> das Layout</span> <span class="hps">zu verändern,</span> d<span class="alt-edited hps">a sich</span> </span><code>image-orientation</code><span lang="de"> <span class="hps">nur auf</span> <span class="hps">Bilder auswirkt.</span></span></li> +</ul> +</div> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">image-orientation: 0deg; +image-orientation: 6.4deg; /* Wird zu 0deg gerundet */ +image-orientation: -90deg; /* Wie 270deg, der normalisiert berechnete Wert */ +image-orientation: from-image; /* EXIF Daten des Bildes verwenden */ +image-orientation: 90deg flip; /* Um 90deg rotieren und horizontal spiegeln */ +image-orientation: flip; /* Horizontales Spiegeln ohne Drehung */ + +/* Globale Werte */ +image-orientation: inherit; +image-orientation: initial; +image-orientation: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code>from-image</code></dt> + <dd><span id="result_box" lang="de"><span class="hps">Das Bild wird entsprechend der enthaltenen EXIF-Informationen gedreht.</span></span></dd> + <dt><code><angle></code></dt> + <dd>Die {{cssxref("<angle>")}} der anzuwendenden Rotation. Wird zu den nächsten <code>90deg</code> (<code>0.25turn</code>) gerundet.</dd> + <dt><code>flip</code></dt> + <dd>Das Bild wird horizontal gespiegelt, nachdem die Drehung des {{cssxref("<angle>")}} Wertes angewendet wird. Wenn keine {{cssxref("<angle>")}} gegeben ist, wird <code>0deg</code> benutzt.</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush: html"><img src="arrow.png" <span class="highATT">alt=</span><span class="highVAL">"Pfeil" </span>style="image-orientation: 180deg;"></pre> + +<h2 id="Spezifikationen">Spezifikationen</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('CSS4 Images', '#image-orientation', 'image-orientation')}}</td> + <td>{{Spec2('CSS4 Images')}}</td> + <td>Die Schlüsselwörter <code>from-image</code> und <code>flip</code> wurden hinzugefügt.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Images', '#image-orientation', 'image-orientation')}}</td> + <td>{{Spec2('CSS3 Images')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser Kompatibilität</h2> + +<div> + + +<p>{{Compat("css.properties.image-orientation")}}</p> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Andere bildbezogene CSS-Eigenschaften {{cssxref("object-fit")}}, {{cssxref("object-position")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}.</li> +</ul> diff --git a/files/de/web/css/image-rendering/index.html b/files/de/web/css/image-rendering/index.html new file mode 100644 index 0000000000..3abab150d4 --- /dev/null +++ b/files/de/web/css/image-rendering/index.html @@ -0,0 +1,114 @@ +--- +title: image-rendering +slug: Web/CSS/image-rendering +tags: + - CSS + - CSS Bild + - CSS Eigenschaft + - Experimentell + - NeedsMobileBrowserCompatibility + - Referenz + - SVG +translation_of: Web/CSS/image-rendering +--- +<div> +<div>{{CSSRef}}</div> + +<div>{{SeeCompatTable}}</div> + +<h2 id="Zusammenfassung" style="line-height: 30px; font-size: 2.14285714285714rem;">Zusammenfassung</h2> + +<p>Das <code>image-rendering</code> <a href="/de-DE/docs/CSS" title="CSS">CSS</a> Property schlägt dem user agent vor, wie er eingebundene Bilder darstellen sollte. Dieses Property gilt für alle Bilder welche einem <a href="/de-DE/docs/Web/HTML">HTML</a> untergeordnet sind, betrifft allerdings nur skalierte Bilder. Wenn ein Bild zum Beispiel 100x1000px groß ist, es aber mit einer Größe von 200x200px eingebunden wird, so Rechnet der Browser nach dem durch das Property festgelegten Algorythmus um.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax" style="line-height: 30px; font-size: 2.14285714285714rem;">Syntax</h2> + +<pre class="twopartsyntaxbox" style="font-size: 14px;">{{csssyntax}}</pre> + +<pre style="font-size: 14px;">image-rendering: auto +image-rendering: crisp-edges +image-rendering: pixelated + +image-rendering: inherit +</pre> + +<h3 id="Values" style="line-height: 24px; font-size: 1.71428571428571rem;">Values</h3> + +<dl> + <dt><code><strong>auto</strong></code></dt> + <dd>Default value, the image should be scaled with an algorithm that maximizes the appearance of the image. In particular, scaling algorithms that "smooth" colors are acceptable, such as bilinear interpolation. This is intended for images such as photos. Since version 1.9 (Firefox 3.0), Gecko uses<em> bilinear </em>resampling (high quality).</dd> +</dl> + +<dl> +</dl> + +<dl> + <dt><code><strong>crisp-edges</strong></code></dt> + <dd>The image must be scaled with an algorithm that preserves contrast and edges in the image, and which does not smooth colors or introduce blur to the image in the process. This is intended for images such as pixel art.</dd> + <dt><code><strong>pixelated</strong></code></dt> + <dd>When scaling the image up, the "nearest neighbor" or similar algorithm must be used, so that the image appears to be composed of large pixels. When scaling down, this is the same as 'auto'.</dd> +</dl> + +<div class="note">The values <code>optimizeQuality</code> and <code>optimizeSpeed</code> present in early draft (and coming from its SVG counterpart) are defined as synonyms for the <code>auto</code> value.</div> + +<h2 id="Examples" style="line-height: 30px; font-size: 2.14285714285714rem;">Examples</h2> + +<pre class="brush:css;" style="font-size: 14px;">/* applies to GIF and PNG images; avoids blurry edges */ + +img[src$=".gif"], img[src$=".png"] { + image-rendering: -moz-crisp-edges; /* Firefox */ + image-rendering: -o-crisp-edges; /* Opera */ + image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */ + image-rendering: crisp-edges; + -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */ + } + +</pre> + +<pre class="brush:css;" style="font-size: 14px;">div { + background: url(chessboard.gif) no-repeat 50% 50%; + image-rendering: -moz-crisp-edges; /* Firefox */ + image-rendering: -o-crisp-edges; /* Opera */ + image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */ + image-rendering: crisp-edges; + -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */ +}</pre> + +<h3 id="Live_Examples" style="line-height: 24px; font-size: 1.71428571428571rem;">Live Examples</h3> + +<h4 id="image-rendering_auto" style="line-height: 18px; font-size: 1.28571428571429rem;">image-rendering: auto;</h4> + +<p style="image-rendering: auto;">78% <img alt="squares.gif" src="/@api/deki/files/3612/=squares.gif" style="height: 39px; width: 39px;"> 100% <img alt="squares.gif" src="/@api/deki/files/3612/=squares.gif" style="height: 50px; width: 50px;"> 138% <img alt="squares.gif" src="/@api/deki/files/3612/=squares.gif" style="height: 69px; width: 69px;"> downsized <img alt="hut.jpg" src="/@api/deki/files/3613/=hut.jpg" style="height: 89px; width: 89px;"> upsized <img alt="blumen.jpg" src="/@api/deki/files/3611/=blumen.jpg" style="height: 89px; width: 77px;"></p> + +<h4 id="image-rendering_pixelated_(-ms-interpolation-mode_nearest-neighbor)" style="line-height: 18px; font-size: 1.28571428571429rem;">image-rendering: pixelated; (-ms-interpolation-mode: nearest-neighbor)</h4> + +<p>78% <img alt="squares.gif" src="/@api/deki/files/3612/=squares.gif" style="height: 39px; width: 39px;"> 100% <img alt="squares.gif" src="/@api/deki/files/3612/=squares.gif" style="height: 50px; width: 50px;"> 138% <img alt="squares.gif" src="/@api/deki/files/3612/=squares.gif" style="height: 69px; width: 69px;"> downsized <img alt="hut.jpg" src="/@api/deki/files/3613/=hut.jpg" style="height: 89px; width: 89px;"> upsized <img alt="blumen.jpg" src="/@api/deki/files/3611/=blumen.jpg" style="height: 89px; width: 77px;"></p> + +<h4 id="image-rendering_crisp-edges_(-webkit-optimize-contrast)" style="line-height: 18px; font-size: 1.28571428571429rem;">image-rendering: crisp-edges; (-webkit-optimize-contrast)</h4> + +<p style="image-rendering: -webkit-optimize-contrast;">78% <img alt="squares.gif" src="/@api/deki/files/3612/=squares.gif" style="height: 39px; width: 39px;"> 100% <img alt="squares.gif" src="/@api/deki/files/3612/=squares.gif" style="height: 50px; width: 50px;"> 138% <img alt="squares.gif" src="/@api/deki/files/3612/=squares.gif" style="height: 69px; width: 69px;"> downsized <img alt="hut.jpg" src="/@api/deki/files/3613/=hut.jpg" style="height: 89px; width: 89px;"> upsized <img alt="blumen.jpg" src="/@api/deki/files/3611/=blumen.jpg" style="height: 89px; width: 77px;"></p> + +<h2 id="Specifications" style="line-height: 30px; font-size: 2.14285714285714rem;">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Images', '#the-image-rendering', 'image-rendering')}}</td> + <td>{{Spec2('CSS3 Images')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<p>Though initially close from the SVG <code>image-rendering</code> property, the values are quite different now.</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility" style="line-height: 30px; font-size: 2.14285714285714rem;">Browser compatibility</h2> +{{Compat("css.properties.image-rendering")}}</div> diff --git a/files/de/web/css/image/index.html b/files/de/web/css/image/index.html new file mode 100644 index 0000000000..d84257fc23 --- /dev/null +++ b/files/de/web/css/image/index.html @@ -0,0 +1,129 @@ +--- +title: <image> +slug: Web/CSS/image +tags: + - CSS + - CSS Bilder + - CSS Datentyp + - Grafik + - Layout + - Referenz + - Web +translation_of: Web/CSS/image +--- +<p>{{CSSRef}}</p> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Der <code><image></code> <a href="/de/docs/Web/CSS">CSS</a> Datentyp repräsentiert ein 2D Bild. Es gibt zwei Arten von Bildern in CSS: einfache statische Bilder, die meist über einen URL referenziert werden, und dynamisch generierte Bilder wie Farbverläufe oder Abbildungen von Teilen der HTML Struktur.</p> + +<p>CSS kann verschiedene Arten von Bildern verarbeiten:</p> + +<ul> + <li>Bilder mit <em>inneren Maßen</em>, d. h. einer natürlichen Größe, wie bei einem JPEG Bild, das feste Maße hat.</li> + <li>Bilder mit <em>mehreren inneren Maßen</em>, die in mehreren Versionen innerhalb der Datei existieren, wie bei einigen ICO Formaten. In diesem Fall entspricht das innere Maß dem flächenmäßig größten Bild mit dem Seitenverhältnis, das dem der beinhaltenden Box am nächsten kommt.</li> + <li>Bilder ohne innerem Maß, die jedoch ein <em>inneres Seitenverhältnis</em> zwischen ihrer Breite und Höhe haben, wie beispielsweise einige Vektorbilder im SVG Format.</li> + <li>Bilder ohne <em><a>innere Maße noch innerem Seitenverhältnis</a></em>, wie beispielsweise CSS Farbverläufen.</li> +</ul> + +<p>CSS bestimmt die <em>konkrete Objektgröße</em> anhand dieser <em>inneren Maße</em>, der <em>angegebenen Größe </em>definiert durch CSS Eigenschaften wie {{cssxref("width")}}, {{cssxref("height")}} oder {{cssxref("background-size")}} und der <em>Standard Objektgröße</em>, die durch die Art der Eigenschaft definiert wird, in der das Bild verwendet wird:</p> + +<table class="standard-table"> + <thead> + <tr> + <th>Objektart</th> + <th>Standard Objektgröße</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{cssxref("background-image")}}</td> + <td>Die Größe des Hintergrund Positionierungsbereichs des Elements</td> + </tr> + <tr> + <td>{{cssxref("list-style-image")}}</td> + <td>Die Größe eines Zeichens in <code>1em</code></td> + </tr> + <tr> + <td>{{cssxref("border-image")}}</td> + <td>Die Größe des Randbildbereichs des Elements</td> + </tr> + <tr> + <td>{{cssxref("cursor")}}</td> + <td>Eine durch den Browser definierte Größe, die der normalen Größe eines Mauszeigers auf dem benutzten System entspricht</td> + </tr> + <tr> + <td>Ersetzter Inhalt wie die Kombination der CSS Eigenschaft {{cssxref("content")}} mit den CSS Pseudoelementen {{cssxref("::after")}} und {{cssxref("::before")}}</td> + <td>Ein <code>300px</code><code> × 150px</code> Rechteck</td> + </tr> + </tbody> +</table> + +<p>Die konkrete Objektgröße wird mit Hilfe des folgenden Algorithmus berechnet:</p> + +<ul> + <li>Falls die angegebene Größe sowohl Breite als auch Höhe definiert, werden diese Werte als die konkrete Objektgröße verwendet.</li> + <li>Falls die angegebene Größe einen der beiden Werte für Breite und Höhe definiert, wird der fehlende Wert durch das innere Seitenverhältnis bestimmt, sofern vorhanden, die inneren Maße, falls der angegebene Wert passt, oder es wird die Standard Objektgröße für den fehlenden Wert verwendet.</li> + <li>Falls die angegebene Größe weder Breite noch Höhe definiert, wird die konkrete Objektgröße so berechnet, dass sie dem inneren Seitenverhältnis der Bilder entspricht, jedoch die Standard Objektgröße in keinem Maß übersteigt. Falls das Bild kein inneres Seitenverhältnis hat, wird das innere Seitenverhältnis des Objekts verwendet, dem es zugewiesen ist; falls das Objekt keines hat, wird die fehlende Breite oder Höhe von der Standard Objektgröße herangezogen.</li> +</ul> + +<p>Bilder können von diversen CSS Eigenschaften verwendet werden, wie {{cssxref("background-image")}}, {{cssxref("border-image")}}, {{cssxref("content")}}, {{cssxref("list-style-image")}} oder {{cssxref("cursor")}}.</p> + +<div class="note"><strong>Hinweis:</strong> Nicht alle Browser unterstützen alle Arten von Bildern in allen Eigenschaften. Der Unterpunkt <a href="#Browser_Kompatibilität">Browser Kompatibilität</a> enhält hierzu eine detaillierte Liste.</div> + +<h2 id="Syntax">Syntax</h2> + +<p>Ein <code><image></code> CSS Datentyp kann die folgenden Bilder repräsentieren:</p> + +<ul> + <li>Ein Bild, dass durch einen {{cssxref("<uri>")}} CSS Datentyp und die <code>url()</code> Funktion angegeben wird</li> + <li>Einen CSS {{cssxref("<gradient>")}};</li> + <li>Einen Teil einer Seite, der durch die {{cssxref("element", "element()")}} Funktion definiert wird.</li> +</ul> + +<h2 id="Beispiele">Beispiele</h2> + +<p>Dies sind gültige Bildwerte:</p> + +<pre>url(test.jpg) Die url() Funktion, sofern test.jpg ein Bild ist +linear-gradient(to bottom, blue, red) Ein <gradient> +element(#colonne3) Ein Teil einer Seite, der durch die element() Funktion referenziert wird,, + sofern 'colonne3' eine existierende CSS ID auf der Seite darstellt. +</pre> + +<p>Dies sind ungültige Bildwerte:</p> + +<pre>cervin.jpg Eine Bilddatei muss durch die url() Funktion angegeben werden. +url(report.pdf) Die Datei, die über die url() Funktion angesprochen wird, muss ein Bild sein. +element(#fakeid) Falls 'fakeid' keine in der Seite existierende CSS ID darstellt. +</pre> + +<h2 id="Spezifikationen">Spezifikationen</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 Images', '#image-notation', 'image()')}}</td> + <td>{{Spec2('CSS3 Images')}}</td> + <td>Vor <a href="/en-US/docs/Web/CSS/CSS3">CSS3</a> gab es keinen explizit definierten <code><image></code> Datentyp. Bilder konnten nur durch die <code>url()</code> Funktion definiert werden.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.types.image")}} + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Farbverläufe_in_CSS">Farbverläufe in CSS</a>, {{cssxref("<gradient>")}}, {{cssxref("linear-gradient","linear-gradient()")}}, {{cssxref("radial-gradient","radial-gradient()")}}, {{cssxref("repeating-linear-gradient","repeating-linear-gradient()")}}, {{cssxref("repeating-radial-gradient","repeating-radial-gradient()")}};</li> + <li>{{cssxref("element","element()")}};</li> +</ul> diff --git a/files/de/web/css/index.html b/files/de/web/css/index.html new file mode 100644 index 0000000000..356ca6e639 --- /dev/null +++ b/files/de/web/css/index.html @@ -0,0 +1,100 @@ +--- +title: CSS +slug: Web/CSS +tags: + - CSS + - Design + - Landing + - Layout + - Referenz +translation_of: Web/CSS +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary"><strong>Cascading Style Sheets</strong>, meistens als <strong>CSS</strong> abgekürzt, ist eine Beschreibungssprache, die das Erscheinungsbild einer in {{Glossary("HTML")}} oder {{Glossary("XML")}} formatierten Datei (inklusive verschiedener XML-Sprachen wie <a href="/de/docs/SVG" rel="internal">SVG</a> oder <a class="new " href="/de/docs/XHTML" rel="internal">XHTML</a>) festlegt. CSS beschreibt, wie ein strukturiertes Element am Bildschirm, auf Papier, in Sprache oder anderen Medien dargestellt wird.</span></p> + +<p><strong>CSS</strong> ist eine der Kernsprachen des <em>Open Web</em> und basiert auf standardisierten <a class="external" href="http://w3.org/Style/CSS/#specs">W3C-Spezifikationen</a>. Vorher wurden die verschieden Tiele der CSS-Spezifikation synchron entwickelt, was die Versionierung der letzten Empfehlung ermöglichte. Du hast vielleicht von CSS1, CSS2.1 und CSS3 gehört. CSS4 wurde jedoch nie eine offizielle Version.</p> + +<p>Seit CSS3 wuchs der Umfang der Spezifikation beträchtlich und der Fortschritt an den verschiedenen CSS-Modulen begann, so sehr abzuweichen, dass es effizienter wurde, <a href="https://www.w3.org/Style/CSS/current-work">Empfehlungen getrennt pro Modul zu entwickeln und zu veröffentlichen</a>.</p> + +<section id="sect1"> +<ul class="card-grid"> + <li><span>CSS-Einführung</span> + + <p>Eine <a href="/de/docs/CSS/Getting_Started">Schritt-für-Schritt-Einführung</a> für Anfänger, welche die grundlegenden Informationen enthält.</p> + </li> + <li><span>CSS-Tutorial</span>Unser <a href="/de/docs/Learn/CSS">CSS-Lernbereich</a> enthält eine Vielzahl von Tutorials, die alle Grundlagen behandeln und dich vom Anfänger- zum Profiniveau bringen.</li> + <li><span>CSS-Referenz</span> + <p>Eine <a href="/de/docs/CSS_Referenz" title="CSS Referenz">vollständige Übersicht</a> für erfahrene Webentwickler, die alle Eigenschaften und Konzepte von CSS beschreibt.</p> + </li> +</ul> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Tutorials">Tutorials</h2> + +<p>Unser <a href="/de/docs/Learn/CSS">CSS-Lernbereich</a> bietet mehrere Module, die dir CSS von Grund auf beibringen — kein Vorwissen wird benötigt.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/CSS/First_steps">Erste Schritte mit CSS</a></dt> + <dd>CSS (für englisch „Cascading Style Sheets“) wird zur Gestaltung und zum Layout von Webseiten verwendet — zum Beispiel, um Schriftart, Farbe, Größe und Abstand des Inhalts zu verändern, ihn in mehrere Spalten aufzuteilen oder Animationen und andere dekorative Merkmale hinzuzufügen. Dieses Modul stellt einen sanften Anfang auf deinem Weg zur Beherrschung von CSS bereit, mit den Grundlagen, wie es funktioniert, wie die Syntax aussieht, und wie du anfangen kannst, es zu nutzen, um Gestaltung zu HTML hinzuzufügen.</dd> + <dt><a href="/de/docs/Learn/CSS/Building_blocks">CSS-Bausteine</a></dt> + <dd>Dieses Modul macht weiter, wo <a href="/en-US/docs/Learn/CSS/First_steps">„Erste Schritte mit CSS“</a> aufgehört hat — jetzt, wo du mit der Sprache und ihrer Syntax vertraut geworden bist und etwas grundlegende Erfahrung gesammelt hast, ist es Zeit, ein bisschen tiefer einzutauchen. Dieses Modul beschäftigt sich mit der Kaskade und Vererbung, allen verfügbaren Selektorarten, Einheiten, Festlegung von Größen, Gestaltung des Hintergrunds und der Kanten, Debugging, und vielem mehr.</dd> + <dd>Das Ziel ist hier, dir eine Werkzeugsammlung zum Schreiben kompetenten CSS-Codes bereitzustellen und dir zu helfen, die grundlegende Theorie zu verstehen, bevor es mit spezifischeren Themen wie <a href="/en-US/docs/Learn/CSS/Styling_text">Textgestaltung</a> und <a href="/en-US/docs/Learn/CSS/CSS_layout">CSS-Layout</a> weitergeht.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Styling_text">Textgestaltung</a></dt> + <dd>Nach der Behandlung der Grundlagen der Sprache CSS ist das nächste Thema, auf das du dich konzentrierst, Text zu gestalten — eines der gewöhnlichsten Dinge, die du mit CSS tun wirst. Hier sehen wir uns die Grundlagen der Textgestaltung an, zum Beispiel das Verändern der Schriftart, Schriftdicke, Kursivschrift, Zeilen- und Buchstabenabstand, Schlagschatten und andere Textmerkmale. Wir runden das Modul ab, indem wir uns das Anwenden eigener Schriften auf die Seite und die Gestaltung von Listen und Links anschauen.</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout">CSS-Layout</a></dt> + <dd>An dieser Stelle haben wir uns bereits die CSS-Grundlagen, Textgestaltung und, wie Boxen, in denen sich dein Inhalt befindet, gestaltet und manipuliert werden können, angeschaut. Jetzt ist es an der Zeit, sich anzusehen, wie Boxen in Bezug auf den Ansichtsbereich und einander am richtigen Ort platziert werden. Wir haben die notwendigen Voraussetzungen behandelt, weshalb wir jetzt tief ins CSS-Layout eintauchen können, indem wir uns verschiedene Bildschirmeinstellungen, moderne Layoutwerkzeuge wie Flexbox, CSS-Grids und Positionierung und ein paar der alten Methoden, über die du vielleicht noch etwas wissen möchtest, anschauen.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Howto">CSS nutzen, um übliche Probleme zu lösen</a></dt> + <dd>Dieses Modul beinhaltet Links zu Inhaltsabschnitten, die erklären, wie CSS genutzt werden kann, um sehr gewöhnliche Probleme beim Erstellen einer Webseite zu lösen.</dd> +</dl> +</div> + +<div class="section"> +<h2 id="Referenzen">Referenzen</h2> + +<ul> + <li><a href="/de/docs/Web/CSS/CSS_Referenz">CSS-Referenz</a>: Diese ausführliche Referenz für erfahrene Webentwickler beschreibt jede CSS-Eigenschaft und jedes CSS-Konzept.</li> + <li>CSS-Schlüsselkonzepte: + <ul> + <li>Die <a href="/en-US/docs/Web/CSS/Syntax">Syntax und Form der Sprache</a></li> + <li><a href="/de/docs/Web/CSS/Spezifität">Spezifität</a>, <a href="/de/docs/Web/CSS/Vererbung">Vererbung</a> und <a href="/en-US/docs/Web/CSS/Cascade">die Kaskade</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Values_and_Units">CSS-Einheiten und -Werte</a></li> + <li><a href="/de/docs/Web/CSS/CSS_Boxmodell/Einführung_in_das_CSS_Boxmodell">Boxmodell</a> und <a href="/de/docs/Web/CSS/CSS_Boxmodell/Zusammenfallen_von_Außenabständen_meistern">Zusammenfallen von Außenabständen</a></li> + <li>Der <a href="/en-US/docs/Web/CSS/Containing_block">beinhaltende Block</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">Stapel-</a> und <a href="/en-US/docs/Web/Guide/CSS/Block_formatting_context">Blockformatierungskontexte</a></li> + <li><a href="/de/docs/Web/CSS/Initialwert">Initial-</a>, <a href="/de/docs/Web/CSS/berechneter_Wert">berechnete</a>, <a href="/en-US/docs/Web/CSS/used_value">genutzte</a> und <a href="/de/docs/Web/CSS/tatsächlicher_Wert">tatsächliche</a> Werte</li> + <li><a href="/en-US/docs/Web/CSS/Shorthand_properties">CSS-Shorthand-Eigenschaften</a></li> + <li><a href="/de/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS-Flexible-Box-Layout</a></li> + <li><a href="/de/docs/Web/CSS/CSS_Grid_Layout">CSS-Grid-Layout</a></li> + <li><a href="/de/docs/Web/CSS/Media_Queries">Media-Queries</a></li> + <li><a href="/de/docs/Web/CSS/animation">Animation</a></li> + </ul> + </li> +</ul> + +<h2 id="Kochbuch">Kochbuch</h2> + +<p>Das <a href="/en-US/docs/Web/CSS/Layout_cookbook">CSS-Layout-Cookbook</a> versucht, Rezepte für übliche Layoutmuster zusammenzubringen, Dinge, die du in deiner Seite implementieren müssen könntest. Zusätzlich zur Bereitstellung von Code, den du als Anfangspunkt in deinen Projekten nutzen kannst, heben diese Rezepte die verschieden Möglichkeiten, wie Layoutspezifikationen genutzt werden können, und die Entscheidungen, die du als Entwickler treffen kannst, hervor.</p> + +<h2 class="Tools" id="Tools" name="Tools">Werkzeuge für die CSS-Entwicklung</h2> + +<ul> + <li>Der <a class="external" href="http://jigsaw.w3.org/css-validator/">W3C-CSS-Validierungsservice</a> überprüft, ob ein angegebenes CSS gültig ist. Der Service unter <a href="//www.OnlineWebCheck.com/">OnlineWebCheck.com</a> macht das gleiche. Dies sind unschätzbare Debuggingtools.</li> + <li>Die „<a href="/de/docs/Tools">Firefox Developer Tools</a>“ erlauben das Live-Ansehen und Bearbeiten des CSS einer Seite über den <a href="/de/docs/Tools/Seiten_Inspektor">Inspektor</a> und den <a href="/de/docs/Tools/Style_Editor">Style-Editor</a>.</li> + <li>Die <a class="link-https" href="https://addons.mozilla.org/de/firefox/addon/web-developer/">Web-Developer-Erweiterung</a> für Firefox erlaubt es ebenfalls, CSS auf beobachteten Seiten live anzusehen.</li> + <li>Die Web-Community hat verschiedene andere <a href="/de/docs/Web/CSS/Tools">CSS-Tools</a> für deine Nutzung erstellt.</li> +</ul> +</div> +</div> +</section> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/de/docs/Web/Demos_of_open_web_technologies#CSS">CSS-Demos</a>: Bekomme einen kreativen Boost, indem du Beispiele der neuesten CSS-Technologien in Aktion erkundest.</li> + <li>Websprachen, auf die CSS häufig angewendet wird: <a href="/de/docs/HTML">HTML</a>, <a href="/de/docs/SVG">SVG</a>, <a href="/de/docs/XHTML">XHTML</a> und <a href="/de/docs/XML">XML</a>.</li> + <li>Mozilla-Technologien, die ausgiebig Gebrauch von CSS machen: <a href="/de/Firefox">Firefox</a>, und <a href="/de/docs/Mozilla/Thunderbird">Thunderbird</a>-<a href="/de/docs/Erweiterungen">Erweiterungen</a> und <a href="/de/Add-ons/Themes">-Themes</a>.</li> + <li><a href="//lists.mozilla.org/listinfo/dev-tech-layout">Mozilla-Mailing-Liste</a></li> + <li><a href="//stackoverflow.com/questions/tagged/css">Stack-Overflow-Fragen über CSS</a></li> +</ul> diff --git a/files/de/web/css/index/index.html b/files/de/web/css/index/index.html new file mode 100644 index 0000000000..2c59185221 --- /dev/null +++ b/files/de/web/css/index/index.html @@ -0,0 +1,8 @@ +--- +title: CSS Dokumentationsverzeichnis +slug: Web/CSS/Index +tags: + - CSS +translation_of: Web/CSS/Index +--- +<p>{{Index("/de/docs/Web/CSS")}}</p> diff --git a/files/de/web/css/inherit/index.html b/files/de/web/css/inherit/index.html new file mode 100644 index 0000000000..c91cd0c021 --- /dev/null +++ b/files/de/web/css/inherit/index.html @@ -0,0 +1,75 @@ +--- +title: inherit +slug: Web/CSS/inherit +tags: + - CSS + - CSS Kaskadierung + - Layout + - Referenz + - Web +translation_of: Web/CSS/inherit +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Der <code>inherit</code> CSS Wert lässt das Element, für das es angegeben wurde, den <a href="/de/docs/Web/CSS/berechneter_Wert">berechneten Wert</a> der Eigenschaft seines Elternelements annehmen. Er ist für jede CSS Eigenschaft erlaubt.</p> + +<p>Für <a href="/de/docs/Web/CSS/Vererbung" title="en/CSS/inheritance">vererbte Eigenschaften</a> bestärkt es das Standardverhalten und wird nur dafür benötigt, eine andere Regel zu überschreiben. Für <a href="/de/docs/Web/CSS/Vererbung" title="en/CSS/inheritance">nicht vererbte Eigenschaften</a> gibt er ein Verhalten an, das normalerweise wenig Sinn macht. Stattdessen sollte {{cssxref("initial")}} verwendet werden oder {{cssxref("unset")}} auf die {{cssxref("all")}} Eigenschaft angewandt werden.</p> + +<p>{{ Note("Vererbung wird immer vom Elternelement im Dokumentbaum durchgeführt, auch wenn das Elternelement nicht der beinhaltende Block ist.") }}</p> + +<h2 id="Beispiel">Beispiel</h2> + +<pre> /* Mache Überschriften zweiter Ebene grün */ + h2 { color: green; } + + /* ...aber lasse jene in der Seitenleiste unberührt, + sodass diese die Farbe ihres Elternelements verwenden */ + #sidebar h2 { color: inherit; } +</pre> + +<p>In diesem Beispiel verwenden die <code>h2</code> Elemente innerhalb der Seitenleiste andere Farben. Zum Beispiel, falls eines davon der Kindknoten eines divs wäre, der auf folgende Regel passt</p> + +<pre class="eval"> div#current { color: blue; } +</pre> + +<p>wäre es blau.</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th>Spezifikation</th> + <th>Status</th> + <th>Anmerkung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Values', "#common-keywords", "inherit") }}</td> + <td>{{ Spec2('CSS3 Values') }}</td> + <td>Keine signifikante Änderung bezüglich {{ SpecName('CSS2.1') }}.</td> + </tr> + <tr style="vertical-align: top;"> + <td style="vertical-align: top;">{{ SpecName('CSS2.1', "cascade.html#value-def-inherit", "inherit") }}</td> + <td style="vertical-align: top;">{{ Spec2('CSS2.1') }}</td> + <td style="vertical-align: top;">Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.types.global_keywords.inherit")}} + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/CSS/Vererbung">Vererbung</a></li> + <li>Die {{cssxref("all")}} CSS Eigenschaft</li> + <li> + <p>Die CSS-weiten Eigenschaftswerte {{cssxref("initial")}}, {{cssxref("inherit")}} und {{cssxref("unset")}}.</p> + </li> +</ul> diff --git a/files/de/web/css/initial/index.html b/files/de/web/css/initial/index.html new file mode 100644 index 0000000000..f4779b525e --- /dev/null +++ b/files/de/web/css/initial/index.html @@ -0,0 +1,100 @@ +--- +title: initial +slug: Web/CSS/initial +translation_of: Web/CSS/initial +--- +<div> + {{CSSRef}}</div> +<h2 id="Übersicht">Übersicht</h2> +<p>Der Wert <code>initial</code> repräsentiert einen vom Browser vorgegebenen Standardwert. Der Wert ist in jeder CSS Eigenschaft verfügbar, hat aber verschiedene Auswirkungen.</p> +<p>Siehe <a href="/en-US/docs/Web/CSS/initial_value">Standardwert</a>.</p> +<h2 id="Beispiel">Beispiel</h2> +<pre class="brush: css"> /* give headers a green border */ + h2 { border: medium solid green } + + /* but make those in the sidebar use the value of the "color" property */ + #sidebar h2 { border-color: initial; } +</pre> +<pre class="brush: css"> <p style="color:red"> + this text is red + <em style="color:initial"> + this text is in the initial color (e.g. black) + </em> + this is red again + </p> </pre> +<h2 id="Spezifikation">Spezifikation</h2> +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Anmerkung</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="http://www.w3.org/TR/css3-values/#keywords">CSS Values and Units Level 3</a></td> + <td>{{Spec2('CSS3 Values')}}</td> + <td>Wert hinzugefügt</td> + </tr> + <tr> + <td><a href="http://www.w3.org/TR/css3-cascade/#initial0">CSS Cascade And Inheritance Level 3</a></td> + <td>{{Spec2('CSS3 Cascade')}}</td> + <td>Definiert den Wert</td> + </tr> + </tbody> +</table> +<h2 id="Browser_compatibility" name="Browser_compatibility"><nobr>Browser Kompatibilität</nobr></h2> +<div> + {{CompatibilityTable}}</div> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("3.5")}}{{property_prefix("-moz")}}[*]<br> + {{CompatGeckoDesktop("19.0")}}</td> + <td>{{CompatNo}}</td> + <td>15.0</td> + <td>1.2(125)</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoMobile("3.0")}}{{property_prefix("-moz")}}[*]<br> + {{CompatGeckoMobile("169.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> + </table> +</div> +<p>[*] Seit Firefox 1.0 wurden die Werte für <code>-moz-initial</code> festgelegt, bis mit der Definition von {{cssxref("quotes")}} ab Firefox 3.5 (Gecko 1.9.1) der Wert implementiert werden konnte. Die Werte für {{cssxref("-moz-border-top-colors","-moz-border-*-colors")}} wurden erst in in Firefox 3.6 (Gecko 1.9.2) hinzugefügt. Der Wert mit Präfix (<code>-moz-initial</code>) wurde in Firefox 19 durch <code>initial</code> erstetzt und wird seit Firefox 24 nichtmehr unterstützt.</p> +<h2 id="See_also" name="See_also">Siehe auch</h2> +<ul> + <li><a href="/en-US/docs/Web/CSS/initial_value">initial value</a>, {{cssxref("inherit")}}</li> +</ul> diff --git a/files/de/web/css/initialwert/index.html b/files/de/web/css/initialwert/index.html new file mode 100644 index 0000000000..7d5e7e18dd --- /dev/null +++ b/files/de/web/css/initialwert/index.html @@ -0,0 +1,20 @@ +--- +title: Initialwert +slug: Web/CSS/Initialwert +tags: + - CSS + - Guide + - Web +translation_of: Web/CSS/initial_value +--- +<h2 id="Übersicht">Übersicht</h2> +<p>Der <strong>Initialwert</strong>, der in der Übersicht der Definition <a href="/de/docs/Web/CSS/CSS_Referenz" title="en/CSS_Reference">jeder CSS Eigenschaft</a> steht, hat eine unterschiedliche Bedeutung für <a href="/de/docs/Web/CSS/Vererbung" title="en/CSS/inheritance">vererbte und nicht vererbte Eigenschaften</a>.</p> +<p>Für <a href="/de/docs/Web/CSS/Vererbung#Vererbte_Eigenschaften" title="en/CSS/inheritance#Inherited_properties">vererbte Eigenschaften</a> wird der Initialwert <strong>ausschließlich</strong> für das Wurzelelement verwendet, falls kein Wert für das Element definiert ist.</p> +<p>Für <a href="/de/docs/Web/CSS/Vererbung#Nicht_vererbte_Eigenschaften" title="en/CSS/inheritance#Non-inherited_properties">nicht vererbte Eigenschaften</a> wird der Initialwert für jedes Element verwendet, falls kein Wert für das Element definiert ist.</p> +<p>Ein <code><a href="/de/docs/Web/CSS/initial" title="en/CSS/initial">initial</a></code> Schlüsselwort wurde in CSS3 hinzugefügt, um es Autoren zu erlauben, diesen ursprünglichen Wert explizit anzugeben.</p> +<h2 id="Siehe_auch">Siehe auch</h2> +<ul> + <li><a href="/de/docs/Web/CSS/CSS_Referenz" title="CSS Reference">CSS Referenz</a></li> + <li>{{ CSS_key_concepts() }}</li> + <li><code><a href="/de/docs/Web/CSS/initial" title="en/CSS/initial">initial</a></code></li> +</ul> diff --git a/files/de/web/css/integer/index.html b/files/de/web/css/integer/index.html new file mode 100644 index 0000000000..c4d214a033 --- /dev/null +++ b/files/de/web/css/integer/index.html @@ -0,0 +1,89 @@ +--- +title: <integer> +slug: Web/CSS/integer +tags: + - CSS + - CSS Datentyp + - Layout + - Referenz + - Web +translation_of: Web/CSS/integer +--- +<div>{{CSSRef}}</div> + +<h2 id="Summary" name="Summary">Übersicht</h2> + +<p>Der <a href="/de/docs/CSS" title="CSS">CSS</a> Wert <code><integer></code> ist eine Ganzzahl zwischen 0 und 9. data type denotes an integer number, positive or negative. Davor kann ein + oder - stehen. Steht nichts davor ist der Interger positiv.</p> + +<p>Integer kommen bspw. in {{cssxref("z-index")}}, {{cssxref("line-height")}}, {{cssxref("counter-increment")}} oder {{Cssxref("column-count")}} vor.</p> + +<p>Ein <code><integer></code> entspricht auch dem Wert {{cssxref("<number>")}}.</p> + +<div class="note">Es gibt keine offizielle Begrenzung des Wertes. Opera unterstützt nur Werte bis 2<sup>15</sup>-1, der Internet Explorer bis 2<sup>20</sup>-1. Während der Entwicklung von CSS3 wurde dies ausführlich diskutiert. Der letzte Stand, April 2012, war [-2<sup>27</sup>-1; 2<sup>27</sup>-1] <a href="http://lists.w3.org/Archives/Public/www-style/2012Apr/0633.html" title="http://lists.w3.org/Archives/Public/www-style/2012Apr/0633.html">#</a>, aber auch 2<sup>24</sup>-1 und 2<sup>30</sup>-1 wurden vorgeschlagen <a href="http://lists.w3.org/Archives/Public/www-style/2012Apr/0530.html" title="http://lists.w3.org/Archives/Public/www-style/2012Apr/0530.html">#</a> <a href="http://lists.w3.org/Archives/Public/www-style/2012Apr/0530.html" title="http://lists.w3.org/Archives/Public/www-style/2012Apr/0530.html">#</a>. Im letzten Entwurf der Spezifikation wurde kein Limit festgelegt.</div> + +<h2 id="Interpolation">Interpolation</h2> + +<p>Werte des <code><integer></code> CSS Datentyps können interpoliert werden, um Animationen zu ermöglichen. In diesem Fall werden sie als ganzzahlige Einzelschritte interpoliert. Die Berechnung erfolgt, als ob sie reale Fließkommazahlen wären und der Einzelwert wird durch die <a href="https://de.wikipedia.org/wiki/Abrundungsfunktion_und_Aufrundungsfunktion#Abrundungsfunktion_oder_Gau.C3.9Fklammer">Abrundungsfunktion</a> ermittelt. Die Geschwindigkeit der Interpolation wird durch die mit der Animation verbundenen {{cssxref("timing-function", "Timingfunktion")}} bestimmt.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<p>Gültige Integer:</p> + +<pre>12 Positiver Integer (ohne führendes +) ++123 Positiver integer (mit führendem +) +-456 Negativer integer +0 Null ++0 Null mit führendem + +-0 Null mit führendem - (obwohl seltsam, ist dies ein erlaubter Wert) +</pre> + +<p>Ungültige Integer:</p> + +<pre>12.0 Dist ist eine {{cssxref("<number>")}}, kein <integer>, obwohl sie eine Ganzzahl darstellt +12. Der Punkt sollte nicht Teil eines <integer> sein ++---12 Nur ein führendes +/- ist erlaubt +ten Buchstaben sind nicht erlaubt +_5 Sonderzeichen sind nicht erlaubt +\35 Escapte Unicodezeichen sind nicht erlaubt, auch wenn diese einer Ganzzahl entsprechen (hier: 5) +\4E94 Nicht-arabische Numerale sind nicht erlaubt, auch nicht escapt (hier: die japanische 5, 五) +3e4 Wissenschaftliche Notation ist nicht gültig für <integer> +</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th>Spezifikation</th> + <th>Status</th> + <th>Anmerkung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Values', '#integers', '<integer>')}}</td> + <td>{{Spec2('CSS3 Values')}}</td> + <td>keine wesentliche Änderung gegenüber CSS Level 2 (Revision 1)</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'syndata.html#numbers', '<integer>')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Explizit definiert</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '', '<integer>')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Implizit definiert</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser Kompatibilität</h2> + +<p>{{Compat("css.types.integer")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{cssxref("<number>")}}</li> +</ul> diff --git a/files/de/web/css/justify-content/index.html b/files/de/web/css/justify-content/index.html new file mode 100644 index 0000000000..3d991145af --- /dev/null +++ b/files/de/web/css/justify-content/index.html @@ -0,0 +1,187 @@ +--- +title: justify-content +slug: Web/CSS/justify-content +tags: + - CSS + - CSS Eigenschaft + - CSS Flexible Boxes + - CSS3 + - Layout + - Referenz + - Web +translation_of: Web/CSS/justify-content +--- +<div>{{CSSRef("CSS Flexible Boxes")}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>justify-content</code> <a href="/de/docs/Web/CSS" title="CSS">CSS</a> Eigenschaft definiert, wie ein Browser verfügbaren Platz zwischen und um Elemente verteilt, wenn Flexelemente an der Hauptachse der aktuellen Zeile ausgerichtet werden sollen. Die Ausrichtung wird berechnet, nachdem die Längen und automatischen Abstände angewendet wurden, was bedeutet, dass falls es mindestens ein flexibles Element gibt mit {{cssxref("flex-grow")}} ungleich <code>0</code>, hat diese Eigenschaft keine Auswirkung, da es keinen verfügbaren Platz gibt.</p> + +<div class="note"> +<p><strong>Hinweis:</strong> Es sollte nicht angenommen werden, dass diese Eigenschaft ausschließlich auf Flexcontainer angewandt wird. Daher sollte sie nicht einfach durch Setzen eines anderen {{cssxref("display")}} Wertes versteckt werden. Die CSSWG arbeitet daran, <a href="http://dev.w3.org/csswg/css3-align/#justify-content" title="http://dev.w3.org/csswg/css3-align/#justify-content">deren Verwendung auf alle Blockelemente auszuweiten</a>. Diese Entwurfsspezifikation ist bisher noch in einer frühen Entwicklungsphase und bisher noch nicht implementiert.</p> +</div> + +<div>{{cssinfo}}</div> + +<p>Siehe die <a href="/de/docs/Web/Guide/CSS/Flexible_boxes" title="CSS/Using_CSS_flexible_boxes">Verwendung von CSS Flexible Boxes</a> für weitere Eigenschaften und Informationen.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">/* Packe Flexelemente an den Start */ +justify-content: flex-start; + +/* Packe Flexelemente an das Ende */ +justify-content: flex-end; + +/* Packe Flexelemente um die Mitte */ +justify-content: center; + +/* Verteile die Elemente gleichmäßig +Das erste Element an den Start, das letzte an das Ende */ +justify-content: space-between; + +/* Verteile die Elemente gleichmäßig +Elemente haben gleiche Abstände um sie herum */ +justify-content: space-around; + +/* Globale Werte */ +justify-content: inherit; +justify-content: initial; +justify-content: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code>flex-start</code></dt> + <dd>Die Flexelemente werden an den <strong>Hauptstartpunkt</strong> gepackt. Die Außenabstände des ersten Flexelements grenzen an den Startrand der Zeile und jedes weitere Flexelement an das folgende.</dd> + <dt><code>flex-end</code></dt> + <dd>Die Flexelemente werden an den <strong>Hauptendpunkt</strong> gepackt. Außenabstände des letzten Flexelements grenzen an den Endrand der Zeile und jedes weitere Flexelement an das folgende.</dd> + <dt><code>center</code></dt> + <dd>Die Flexelemente werden in die Mitte der Zeile gepackt. Die Flexelemente grenzen aneinander und werden in der Mitte der Zeile ausgerichtet. Die Leerräume zwischen dem Hauptstartrand und dem ersten Element und zwischen dem Hauptendrand und dem letzten Element sind gleich.</dd> + <dt><code>space-between</code></dt> + <dd>Flexelemente werden gleichmäßig innerhalb der Zeile verteilt. Die Abstände werden so verteilt, dass sie zwischen zwei angrenzenden Elementen gleich sind. Hauptstartrand und -endrand einer Zeile grenzen an den Rand des ersten bzw. letzten Flexelements.</dd> + <dt><code>space-around</code></dt> + <dd>Flexelemente werden gleichmäßig innerhalb der Zeile verteilt, sodass die Leerräume zwischen zwei angrenzenden Elementen gleich sind. Der Leerraum vor dem ersten und nach dem letzten Element entspricht der Hälfte des Leerraums zwischen zwei angrenzenden Elementen.</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<p><strong>HTML:</strong></p> + +<pre class="brush: html"><div id="container"> + <p>justify-content: flex-start</p> + <div id="flex-start"> + <div></div> + <div></div> + <div></div> + </div> + + <p>justify-content: flex-end</p> + <div id="flex-end"> + <div></div> + <div></div> + <div></div> + </div> + + <p>justify-content: center</p> + <div id="center"> + <div></div> + <div></div> + <div></div> + </div> + + <p>justify-content: space-between</p> + <div id="space-between"> + <div></div> + <div></div> + <div></div> + </div> + + <p>justify-content: space-around</p> + <div id="space-around"> + <div></div> + <div></div> + <div></div> + </div> +</div> +</pre> + +<p><strong>CSS:</strong></p> + +<pre class="brush: css">#container > div { + display: flex; + font-family: Courier New, Lucida Console, monospace; +} + +#container > div > div { + width: 50px; + height: 50px; + background: linear-gradient(-45deg, #788cff, #b4c8ff); +} + +#flex-start { + justify-content: flex-start; +} + +#center { + justify-content: center; +} + +#flex-end { + justify-content: flex-end; +} + +#space-between { + justify-content: space-between; +} + +#space-around { + justify-content: space-around; +} +</pre> + +<p>Ergibt:</p> + +<p>{{ EmbedLiveSample('Beispiele', 600, 550) }}</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th>Spezifikation</th> + <th>Status</th> + <th>Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Flexbox', '#justify-content', 'justify-content')}}</td> + <td>{{Spec2('CSS3 Flexbox')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<h3 id="Support_im_Flex-Layout">Support im Flex-Layout</h3> + +<p>{{Compat("css.properties.justify-content.flex_context")}}</p> + +<h3 id="Support_im_Grid-Layout">Support im Grid-Layout</h3> + +<p>{{Compat("css.properties.justify-content.grid_context")}}</p> + +<p>[1] Firefox unterstützt nur einzeiliges Flexbox Layout bis Version 28. Um Flexbox Unterstützung für Firefox 18 und 19 zu aktivieren, muss die Einstellung <code>layout.css.flexbox.enabled</code> in <code>about:config</code> auf <code>true</code> gesetzt werden.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/Guide/CSS/Flexible_boxes" title="CSS/Using_CSS_flexible_boxes">Verwendung von CSS Flexible Boxes</a></li> +</ul> diff --git a/files/de/web/css/kindselektoren/index.html b/files/de/web/css/kindselektoren/index.html new file mode 100644 index 0000000000..2e351964ed --- /dev/null +++ b/files/de/web/css/kindselektoren/index.html @@ -0,0 +1,90 @@ +--- +title: Kindselektoren +slug: Web/CSS/Kindselektoren +tags: + - CSS + - CSS Referenz + - Einsteiger + - NeedsMobileBrowserCompatibility + - Selektoren +translation_of: Web/CSS/Child_combinator +--- +<div>{{CSSRef("Selectors")}}</div> + +<div>Der <strong>Kindkombinator</strong> (<code>></code>) wird zwischen zwei CSS-Selektoren platziert. Er wählt nur die Elemente aus, die vom zweiten Selektor gewählt werden, die Kinder vom ersten gewählten Element sind.</div> + +<div> </div> + +<div> +<pre class="brush: css no-line-numbers language-css"><code class="language-css"><span class="comment token">/* Listenpunkte, die Kinder der "my-things" Liste sind */</span> +<span class="selector token">ul<span class="class token">.my-things</span> > li </span><span class="punctuation token">{</span> + <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">2</span>em<span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<p>Elemente, die vom zweiten Selektor gewählt werden, müssen<strong> </strong>direkte Kinder des ersten gewählten Elements sein. Dies ist strenger, als der <a href="/de/docs/Web/CSS/Nachfahrenselektor">Nachfahrenselektor</a>, der alle Elemente auswählt, die vom zweiten Selektor gewählt werden, für die ein Vorfahrenelement existieren, unabhängig der Anzahl der "Sprünge" aufwärts des DOM.</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">selector1 > selector2 { <em>Stileigenschaften</em> } +</pre> + +<h2 id="Beispiel">Beispiel</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">span { + background-color: white; +} + +div > span { + background-color: DodgerBlue; +} +</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div> + <span>Span 1. Innerhalb des Divs. + <span>Span 2. Innerhalb des Spans, der sich im Div befindet.</span> + </span> +</div> +<span>Span 3. In keinem Div.</span> +</pre> + +<h3 id="Ergebnis">Ergebnis</h3> + +<p>{{EmbedLiveSample("Beispiel", 200, 100)}}</p> + +<h2 id="Spezifikationen">Spezifikationen</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('CSS4 Selectors', '#child-combinators', 'child combinator')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#child-combinators', 'child combinators')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Keine Änderung</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#child-selectors', 'child selectors')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.selectors.child")}} diff --git a/files/de/web/css/klassenselektoren/index.html b/files/de/web/css/klassenselektoren/index.html new file mode 100644 index 0000000000..eafd714a05 --- /dev/null +++ b/files/de/web/css/klassenselektoren/index.html @@ -0,0 +1,76 @@ +--- +title: Klassenselektoren +slug: Web/CSS/Klassenselektoren +tags: + - CSS + - CSS Referenz + - Einsteiger + - Selektoren +translation_of: Web/CSS/Class_selectors +--- +<div>{{CSSRef("Selectors")}}</div> + +<p>In einem HTML Dokument matchen CSS Klassenselektoren ein Element basierend auf den Inhalten des {{htmlattrxref("class")}} Attributs des Elements. Das class Attribut ist definiert als eine durch Leerzeichen getrennte Liste von Einträgen, wobei einer dieser Einträge exakt auf den Klassennamen des angegebenen Selektors passen muss.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">.classname { <em>style properties</em> }</pre> + +<p>Beachte, dass dies äquivalent zu folgendem {{cssxref("Attributselektoren", "Attributselektor")}} ist:</p> + +<pre class="syntaxbox">[class~=classname] { <em>style properties</em> }</pre> + +<h2 id="Beispiel">Beispiel</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">span.classy { + background-color: DodgerBlue; +} +</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><span class="classy">Hier ist ein Span mit Text.</span> +<span>Hier ist ein weiterer.</span> +</pre> + +<p>{{EmbedLiveSample('Beispiel', 200, 50)}}</p> + +<h2 id="Spezifikationen">Spezifikationen</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('CSS4 Selectors', '#class-html', 'class selectors')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Keine Änderungen</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#class-html', 'class selectors')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#class-html', 'child selectors')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#class-as-selector', 'child selectors')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.selectors.class")}} diff --git a/files/de/web/css/kurzformat_eigenschaft/index.html b/files/de/web/css/kurzformat_eigenschaft/index.html new file mode 100644 index 0000000000..1923d5efd5 --- /dev/null +++ b/files/de/web/css/kurzformat_eigenschaft/index.html @@ -0,0 +1,158 @@ +--- +title: Kurzformat Eigenschaft +slug: Web/CSS/Kurzformat_Eigenschaft +translation_of: Web/CSS/Shorthand_properties +--- +<div>{{cssref}}</div> + +<p class="summary"><strong><dfn>Shorthand properties</dfn></strong> are CSS properties that let you set the values of multiple other CSS properties simultaneously. Using a shorthand property, you can write more concise (and often more readable) style sheets, saving time and energy.</p> + +<p>The CSS specification defines shorthand properties to group the definition of common properties acting on the same theme. For instance, the CSS {{cssxref("background")}} property is a shorthand property that's able to define the values of {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-repeat")}}, and {{cssxref("background-position")}}. Similarly, the most common font-related properties can be defined using the shorthand {{cssxref("font")}}, and the different margins around a box can be defined using the {{cssxref("margin")}} shorthand.</p> + +<h2 id="Tricky_edge_cases" name="Tricky_edge_cases">Tricky edge cases</h2> + +<p>Even if they are very convenient to use, there are a few edge cases to keep in mind when using them:</p> + +<ol> + <li>A value which is not specified is set to its initial value. That sounds anecdotal, but it really means that it <strong>overrides</strong> previously set values. Therefore: + + <pre class="brush:css notranslate">background-color: red; +background: url(images/bg.gif) no-repeat left top; +</pre> + will not set the color of the background to <code>red</code> but to {{cssxref("background-color")}}'s default, <code>transparent</code>, as the second rule has precedence.</li> + <li>Only the individual properties values can inherit. As missing values are replaced by their initial value, it is impossible to allow inheritance of individual properties by omitting them. The keyword <code>inherit</code> can be applied to a property, but only as a whole, not as a keyword for one value or another. That means that the only way to make some specific value to be inherited is to use the longhand property with the keyword <code>inherit</code>.</li> + <li>Shorthand properties try not to force a specific order for the values of the properties they replace. This works well when these properties use values of different types, as the order has no importance, but this does not work as easily when several properties can have identical values. Handling of these cases are grouped in several categories: + <ol> + <li>Shorthands handling properties related to edges of a box, like {{cssxref("border-style")}}, {{cssxref("margin")}} or {{cssxref("padding")}}, always use a consistent 1-to-4-value syntax representing those edges: + <table> + <tbody> + <tr> + <td style="width: 79px;"><img alt="border1.png" src="/files/3646/border1.png"></td> + <td><em>The 1-value syntax</em>: <code>border-width: 1em</code> — The unique value represents all edges</td> + </tr> + <tr> + <td><img alt="border2.png" src="/files/3647/border2.png"></td> + <td><em>The 2-value syntax</em>: <code>border-width: 1em 2em</code> — The first value represents the vertical, that is top and bottom, edges, the second the horizontal ones, that is the left and right ones.</td> + </tr> + <tr> + <td><img alt="border3.png" src="/files/3648/border3.png"></td> + <td><em>The 3-value syntax</em>: <code>border-width: 1em 2em 3em</code> — The first value represents the top edge, the second, the horizontal, that is left and right, ones, and the third value the bottom edge</td> + </tr> + <tr> + <td><img alt="border4.png" src="/files/3649/border4.png"></td> + <td> + <p><em>The 4-value syntax</em>: <code>border-width: 1em 2em 3em 4em</code> — The four values represent the top, right, bottom and left edges respectively, always in that order, that is clock-wise starting at the top (The initial letter of Top-Right-Bottom-Left matches the order of the consonant of the word <em>trouble</em>: TRBL) (You can also remember it as the order that the hands would rotate on a clock: <code>1em</code> starts in the 12 o'clock position, then <code>2em</code> in the 3 o'clock position, then <code>3em</code> in the 6 o'clock position, and <code>4em</code> in the 9 o'clock position).</p> + </td> + </tr> + </tbody> + </table> + </li> + <li>Similarly, shorthands handling properties related to corners of a box, like {{cssxref("border-radius")}}, always use a consistent 1-to-4-value syntax representing those corners: + <table> + <tbody> + <tr> + <td style="width: 69px;"><img alt="corner1.png" src="/files/3650/corner1.png"></td> + <td><em>The 1-value syntax</em>: <code>border-radius: 1em</code> — The unique value represents all corners</td> + </tr> + <tr> + <td><img alt="corner2.png" src="/files/3651/corner2.png"></td> + <td><em>The 2-value syntax</em>: <code>border-radius: 1em 2em</code> — The first value represents the top left and bottom right corner, the second the top right and bottom left ones.</td> + </tr> + <tr> + <td><img alt="corner3.png" src="/files/3652/corner3.png"></td> + <td><em>The 3-value syntax</em>: <code>border-radius: 1em 2em 3em</code> — The first value represents the top left corner, the second the top right and bottom left ones, and the third value the bottom right corner</td> + </tr> + <tr> + <td><img alt="corner4.png" src="/files/3653/corner4.png"></td> + <td> + <p><em>The 4-value syntax</em>: <code>border-radius: 1em 2em 3em 4em</code> — The four values represent the top left, top right, bottom right and bottom left corners respectively, always in that order, that is clock-wise starting at the top left.</p> + </td> + </tr> + </tbody> + </table> + </li> + </ol> + </li> +</ol> + +<h2 id="Background_Properties" name="Background_Properties">Background properties</h2> + +<p>A background with the following properties ...</p> + +<pre class="brush:css notranslate">background-color: #000; +background-image: url(images/bg.gif); +background-repeat: no-repeat; +background-position: left top;</pre> + +<p>... can be shortened to just one declaration:</p> + +<pre class="brush:css notranslate">background: #000 url(images/bg.gif) no-repeat left top;</pre> + +<p>(The shorthand form is actually the equivalent of the longhand properties above plus <code>background-attachment: scroll</code> and, in CSS3, some additional properties.)</p> + +<p>See {{cssxref("background")}} for more detailed information, including CSS3 properties.</p> + +<h2 id="Font_Properties" name="Font_Properties">Font properties</h2> + +<p>The following declarations ...</p> + +<pre class="brush:css notranslate">font-style: italic; +font-weight: bold; +font-size: .8em; +line-height: 1.2; +font-family: Arial, sans-serif;</pre> + +<p>... can be shortened to the following:</p> + +<pre class="brush:css notranslate">font: italic bold .8em/1.2 Arial, sans-serif;</pre> + +<p>This shorthand declaration is actually equivalent to the longhand declarations above plus <code>font-variant: normal</code> and <code>font-size-adjust: none</code> (CSS2.0 / CSS3), <code>font-stretch: normal</code> (CSS3).</p> + +<h2 id="Border_Properties" name="Border_Properties">Border properties</h2> + +<p>With borders, the width, color, and style can be simplified into one declaration. For example, the following CSS ...</p> + +<pre class="brush:css notranslate">border-width: 1px; +border-style: solid; +border-color: #000;</pre> + +<p>... can be simplified as:</p> + +<pre class="brush:css notranslate">border: 1px solid #000;</pre> + +<h2 id="Margin_and_Padding_Properties" name="Margin_and_Padding_Properties">Margin and padding properties</h2> + +<p>Shorthand versions of margin and padding values work similarly; the margin property allows for shorthand values to be specified using one, two, three, or four values. The following CSS declarations ...</p> + +<pre class="brush:css notranslate">margin-top: 10px; +margin-right: 5px; +margin-bottom: 10px; +margin-left: 5px;</pre> + +<p>... are the same as the following declaration using the four value shorthand. Note that the values are in clockwise order, beginning at the top: top, right, bottom, then left (TRBL, the consonants in "trouble").</p> + +<pre class="brush:css notranslate">margin: 10px 5px 10px 5px;</pre> + +<p>Margin shorthand rules for one, two, three and four value declarations are:</p> + +<ul> + <li>When <strong>one</strong> value is specified, it applies the same margin to <strong>all four sides</strong>.</li> + <li>When <strong>two</strong> values are specified, the first margin applies to the <strong>top and bottom</strong>, the second to the <strong>left and right</strong>.</li> + <li>When <strong>three</strong> values are specified, the first margin applies to the <strong>top</strong>, the second to the <strong>left and right</strong>, the third to the <strong>bottom</strong>.</li> + <li>When <strong>four</strong> values are specified, the margins apply to the <strong>top</strong>, <strong>right</strong>, <strong>bottom</strong>, and <strong>left</strong> in that order (clockwise).</li> +</ul> + +<h2 id="The_universal_shorthand_property" name="The_universal_shorthand_property">The universal shorthand property</h2> + +<p>CSS provides a universal shorthand property, {{cssxref("all")}}, which applies its value to every property in the document. Its purpose is to change the properties' inheritance model to one of:</p> + +<p>{{page("/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance", "Controlling_inheritance")}}</p> + +<p>See <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance">Cascade and inheritance</a> or <a href="/en-US/docs/Web/CSS/Cascade">Introducing the CSS Cascade</a> for more information about how inheritance works in CSS.</p> + +<h2 id="See_also" name="See_also">See also</h2> + +<ul> + <li>{{css_key_concepts}}</li> + <li>Shorthand properties: {{cssxref("animation")}}, {{cssxref("background")}}, {{cssxref("border")}}, {{cssxref("border-bottom")}}, {{cssxref("border-color")}}, {{cssxref("border-left")}}, {{cssxref("border-radius")}}, {{cssxref("border-right")}}, {{cssxref("border-style")}}, {{cssxref("border-top")}}, {{cssxref("border-width")}}, {{cssxref("column-rule")}}, {{cssxref("columns")}}, {{cssxref("flex")}}, {{cssxref("flex-flow")}}, {{cssxref("font")}}, {{cssxref("grid")}}, {{cssxref("grid-area")}}, {{cssxref("grid-column")}}, {{cssxref("grid-row")}}, {{cssxref("grid-template")}}, {{cssxref("list-style")}}, {{cssxref("margin")}}, {{cssxref("offset")}}, {{cssxref("outline")}}, {{cssxref("overflow")}}, {{cssxref("padding")}}, {{cssxref("place-content")}}, {{cssxref("place-items")}}, {{cssxref("place-self")}}, {{cssxref("text-decoration")}}, {{cssxref("transition")}}</li> +</ul> diff --git a/files/de/web/css/layout_mode/index.html b/files/de/web/css/layout_mode/index.html new file mode 100644 index 0000000000..f3ed2f4b75 --- /dev/null +++ b/files/de/web/css/layout_mode/index.html @@ -0,0 +1,27 @@ +--- +title: Layout mode +slug: Web/CSS/Layout_mode +tags: + - CSS +translation_of: Web/CSS/Layout_mode +--- +<p>Ein <a href="/de/docs/Web/CSS">CSS</a> <strong>Layoutmodus</strong>, manchmal als <em>Layout</em> abgekürzt, ist ein Algorithmus, der die Position und die Größe von Boxen bestimmt, basierend auf der Weise, wie diese mit ihren Geschwisterknoten und übergeordneten Knoten interagieren. Es gibt mehrere davon:</p> + +<ul> + <li>Das <em>Blocklayout</em>, designt, um Dokumente darzustellen. Das Blocklayout beinhaltet dokumentenspezifische Features, wie die Möglichkeit, Elemente <a href="/en-US/docs/Web/CSS/float"><em>umzubrechen</em></a> oder sie in <a href="/de/docs/CSS3_Columns"><em>mehreren Spalten</em></a> darzustellen.</li> + <li>Das <em>Inlinelayout</em>, designt, um Text darzustellen.</li> + <li>Das <em>Tabellenlayout</em>, designt, um Tabellen darzustellen.</li> + <li>Das <em>positionierte Layout</em>, designt, um Elemente ohne viel Interaktion mit anderen Elementen zu positionieren.</li> + <li>Das <a href="/de/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes"><em>Flexboxlayout</em></a>, designt, um komplexe Seiten darzustellen, die problemlos in der Größe geändert werden können. {{experimental_inline}}</li> + <li>Das <em>Rasterlayout</em>, designt, um Elemente relativ zu einem festen Raster darzustellen. {{experimental_inline}}</li> +</ul> + +<div class="note"> +<p><strong>Hinweis:</strong> Nicht alle <a href="/de/docs/Web/CSS/Referenz">CSS Eigenschaften</a> gelten für alle <em>Layoutmodi</em>. Die meisten von ihnen gelten für einen oder zwei davon und haben keinen Effekt, falls sie für ein Element gesetzt werden, das in einem anderen Layoutmodus dargestellt wird.</p> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{CSS_key_concepts}}</li> +</ul> diff --git a/files/de/web/css/left/index.html b/files/de/web/css/left/index.html new file mode 100644 index 0000000000..d1e281e4a3 --- /dev/null +++ b/files/de/web/css/left/index.html @@ -0,0 +1,190 @@ +--- +title: left +slug: Web/CSS/Left +tags: + - CSS + - CSS Eigenschaft + - CSS Positionierung + - Referenz +translation_of: Web/CSS/left +--- +<p>{{CSSRef}}</p> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die CSS Eigenschaft <code>left</code> definiert einen Teil der Position von positionierten Elementen.</p> + +<p>Bei absolut positionierten Elementen (jene mit {{cssxref("position")}}<code>: absolute</code> oder <code>position: fixed</code>) wird der Abstand zwischen der linken, äußeren Rand des Elements und dem linken Rand des umschließenden Blocks definiert.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">/* <length> Werte */ +left: 3px; +left: 2.4em; + +/* <percentage> Werte bezogen auf die Breite des beinhaltenden Blocks */ +left: 10%; + +/* Schlüsselwortwerte */ +left: auto; + +/* Globale Werte */ +left: inherit; +left: initial; +left: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code><length></code></dt> + <dd>Ist eine negative, null oder positive {{cssxref("<length>")}}, die folgendem entspricht: + <ul> + <li>für <em>absolute positionierte Elemente</em>, die Distanz zum linken Rand des beinhaltenden Blocks</li> + <li>für <em>relativ positionierte Elemente</em>, der Versatz, um den das Element von seiner Position im normalen Fluss nach links verschoben ist, falls es nicht positioniert wäre.</li> + </ul> + </dd> + <dt><code><percentage></code></dt> + <dd>Ein {{cssxref("<percentage>")}} Wert der Breite des beinhaltenden Blocks, wie in der <a href="#Übersicht">Übersicht</a> beschrieben.</dd> + <dt><code>auto</code></dt> + <dd>Ist ein Schlüsselwort, das folgendem entspricht: + <ul> + <li>für absolut positionierte Elemente, die Position des Elements basierend auf der {{cssxref("right")}} Eigenschaft und <code>width: auto</code> wird als Breite basierend auf dem Inhalt behandelt.</li> + <li>für relativ positionierte Elemente, der linke Versatz des Elements von der Originalposition basierend auf der {{cssxref("right")}} Eigenschaft oder falls <code>right</code> ebenfalls <code>auto</code> ist, wird wird es nicht verschoben.</li> + </ul> + </dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">#wrap { + width: 700px; + margin: 0 auto; + background: #5C5C5C; +} + +pre { + white-space: pre; + white-space: pre-wrap; + white-space: pre-line; + word-wrap: break-word; +} + +#example_1 { + width: 200px; + height: 200px; + position: absolute; + left: 20px; + top: 20px; + background-color: #D8F5FF; +} + +#example_2 { + width: 200px; + height: 200px; + position: relative; + top: 0; + right: 0; + background-color: #C1FFDB; + +} +#example_3 { + width: 600px; + height: 400px; + position: relative; + top: 20px; + left: 20px; + background-color: #FFD7C2; +} + +#example_4 { + width: 200px; + height: 200px; + position: absolute; + bottom: 10px; + right: 20px; + background-color: #FFC7E4; +}</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div id="wrap"> + <div id="example_1"> + <pre> + position: absolute; + left: 20px; + top: 20px; + </pre> + <p>Das einzige Element, das dieser Div beinhaltet, ist das Hauptfenster. Daher positioniert er sich in Bezug dazu.</p> + </div> + + <div id="example_2"> + <pre> + position: relative; + top: 0; + right: 0; + </pre> + <p>Relative Position in Bezug auf seine Geschwisterelemente.</p> + </div> + + <div id="example_3"> + <pre> + float: right; + position: relative; + top: 20px; + left: 20px; + </pre> + <p>Relativ zu seinem Geschwister-Div darüber, jedoch aus dem Inhaltsfluss entfernt.</p> + + <div id="example_4"> + <pre> + position: absolute; + top: 10px; + left: 20px; + </pre> + <p>Absolute Position innerhalb des Elternelements mit relativer Position.</p> + </div> + </div> +</div></pre> + +<h3 id="Live_Beispiel">Live Beispiel</h3> + +<p>{{EmbedLiveSample('Beispiele', 1200, 650)}}</p> + +<h2 id="Spezifikationen">Spezifikationen</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 Transitions', '#animatable-css', 'left')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Definiert <code>left</code> als animierbar.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'visuren.html#propdef-left', 'left')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.properties.left")}} + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{cssxref("position")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}}</li> +</ul> diff --git a/files/de/web/css/length/index.html b/files/de/web/css/length/index.html new file mode 100644 index 0000000000..6309f0f045 --- /dev/null +++ b/files/de/web/css/length/index.html @@ -0,0 +1,178 @@ +--- +title: <length> +slug: Web/CSS/length +tags: + - CSS + - CSS Datentyp + - Layout + - Länge + - Referenz + - Web + - length +translation_of: Web/CSS/length +--- +<div>{{ CSSRef() }}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Der Platzhalter <code><length></code> steht für eine Längenangabe. Diese besteht immer aus aus einer Zahl ({{cssxref("<number>")}}) und einer Maßeinheit (<code>px</code>, <code>em</code>, <code>pc</code>, <code>in</code>, <code>mm</code>, …); zwischen diesen Elementen darf sich kein Leerzeichen befinden.</p> + +<p>Der Wertebereich ist abhängig von der jeweiligen CSS-Eigenschaft, teils sind nur positive Werte sinnvoll und zulässig.<br> + Oftmals wird auch eine prozentuale Angabe ({{cssxref("<percentage>")}}) akzeptiert, diese gehört jedoch strenggenommen nicht zu den <length>-Werten und wird deshalb an anderer Stelle besprochen.</p> + +<p><code><length></code> wird von vielen Eigenschaften benutzt, zum Beispiel {{ Cssxref("width") }}, {{ Cssxref("margin") }}, {{ Cssxref("padding") }}, {{ Cssxref("font-size") }}, {{ Cssxref("border-width") }} und {{ Cssxref("text-shadow") }}.</p> + +<h2 id="Interpolation">Interpolation</h2> + +<p><code><length></code>-Werte können für Animationen interpoliert werden. Für die Berechnung werden sie als reelle Fließkommazahlen behandelt, dabei wird immer der berechnete Wert interpoliert. Die Geschwindigkeit bzw. die Zwischenschritte hängen von der der Animation zugeordneten <a href="/en/CSS/timing-function" title="timing-function">Zeitfunktion</a> ab.</p> + +<h2 id="Einheiten">Einheiten</h2> + +<h3 id="Relative_Längenmaße">Relative Längenmaße</h3> + +<h4 id="Relativ_zur_Schriftgröße">Relativ zur Schriftgröße</h4> + +<p>Die nachfolgenden Einheiten beziehen sich immer auf eine Eigenschaft der Schriftart des Elements, für das sie genutzt werden (Ausnahme: <code>rem</code> und <code>rlh</code>, diese beziehen sich auf das Wurzelelement, meist das {{HTMLElement("html")}}-Element).</p> + +<dl> + <dt id="em"><code>em</code></dt> + <dd><code>1em</code> entspricht der aus {{Cssxref("font-size")}} berechneten Schriftgröße. Wird em zusammen mit {{Cssxref("font-size")}} selbst benutzt, entspricht <code>1em</code> der Schriftgröße des Elternelements.<br> + em ist, zusammen mit Prozentwerten, das gebräuchlichste Maß, um den Fluss der Seitenelemente unabhängig von der vom Benutzer gewählten Schriftgröße einheitlich zu gewährleisten.</dd> + <dt id="rem"><code>rem</code></dt> + <dd>Wie <code>em</code>, bezieht sich jedoch immer auf die berechnete Schriftgröße des Wurzelelements. {{ gecko_minversion_inline("1.9.2") }}</dd> + <dt id="ex"><code>ex</code></dt> + <dd><code>1ex</code> enspricht üblicherweise der Höhe des kleinen x; oftmals ist 1ex ≈ 0,5em<code>.</code></dd> + <dt id="ch"><code>ch</code></dt> + <dd><code>1ch</code> enspricht der Breite der Ziffer '0' (Null, Unicode U+0030) {{gecko_minversion_inline("1.9.1") }}</dd> + <dt id="ch"><code>cap</code> {{experimental_inline}}</dt> + <dd>Nominale Höhe der Großbuchstaben.</dd> + <dt><code>lh</code> {{experimental_inline}}</dt> + <dd>Die aus {{Cssxref("line-height")}} berechnete Zeilenhöhe.</dd> + <dt><code>rlh</code> {{experimental_inline}}</dt> + <dd>Wie lh, bezieht sich jedoch immer auf die berechnete Zeilenhöhe des Wurzelelements.</dd> + <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">ic</span></font> {{experimental_inline}}</dt> + <dd>Größe des "水"-Zeichens (CJK "Wasser"-Ideograph U+6C34) in der aktuellen Schriftart.</dd> +</dl> + +<h4 id="Relativ_zum_Viewport">Relativ zum Viewport</h4> + +<p>Diese Werte werden vom sichtbaren Teil des Dokuments abgeleitet, dem Anzeigebereich (Englisch: Viewport). Sie sind also abhängig von der Fenster- bzw. Bildschirmgröße.</p> + +<p>Innerhalb einer {{cssxref("@page")}}-Regel sind Viewport-Werte nicht zulässig.</p> + +<dl> + <dt id="vh"><code>vh</code></dt> + <dd><code>1vh</code> entspricht 1% der Anzeigenhöhe (vh = viewport height).</dd> + <dt id="vw"><code>vw</code></dt> + <dd><code>1vw</code> entspricht 1% Anzeigenbreite (vh = viewport width).</dd> + <dt><code>vi</code> {{experimental_inline}}</dt> + <dd>Entspricht 1% der Länge der <a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS/CSS_Logical_Properties">Inlineachse</a> des umgebenden Blocks. Die Inlineachse ist die Richtung, in der Text geschrieben wird, also horizontal für deutschen Text.</dd> + <dt><code>vi</code> {{experimental_inline}}</dt> + <dd>Entspricht 1% der Länge der <a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS/CSS_Logical_Properties">Blockachse</a> des umgebenden Blocks. Die Blockachse verläuft im Winkel von 90° zur Inlineachse, also vertikal für deutschen Text.</dd> + <dt id="vmin"><code>vmin</code></dt> + <dd>Der kleinere der Werte <code>vh</code> und <code>vw</code>.</dd> + <dt id="vmax"><code>vmax</code></dt> + <dd>Der größere der Werte <code>vh</code> und <code>vw</code>.</dd> +</dl> + +<h3 id="Absolute_Längenmaße">Absolute Längenmaße</h3> + +<p>Absolute Längenmaße stehen für ein physikalisches Maß, sofern die physischen Eigenheiten des Ausgabemediums bekannt sind. Eine der Einheiten wird als Referenz festgelegt, alle anderen werden relativ zu ihr definiert. Die Festlegung hängt vom Ausgabegerät ab, genauer: von dessen Auflösung.</p> + +<p>Bei Geräten mit niedriger Auflösung (namentlich herkömmliche Flachbildschirme) ist die Bezugsgröße das sogenannte Referenzpixel. Die Größe des Referenzpixels ist definiert als die wahrgenommene Größe eines Pixels auf einem Bildschirm mit der Auflösung 96dpi in etwa einer Armlänge Abstand. In der Praxis wird jedoch meist das tatsächliche Bildschirmpixel des gerade angeschlossenen Bildschirms als Referenzpixel definiert.<br> + Ein Referenzpixel entspricht <code>1px</code>, alle anderen Einheiten sind bei niedrig auflösenden Geräten von px abgeleitet. <code>1in</code> ist in Abhängigkeit von px als <code>96px</code> festgelegt, was wiederum <code>72pt</code> entspricht.</p> + +<p>Aufgrund dieser eher ungenauen Definition können in <code>mm</code>, <code>cm</code> oder <code>in</code> gegebene Längen von jenen abweichen, die tatsächlich als solche gemessen werden würden – in anderen Worten: <code>1cm</code> auf dem Bildschirm ist üblicherweise nur ungefähr gleich einem Zentimeter auf dem Zollstock.</p> + +<p>Bei Geräten mit hoher Auflösung hingegen entsprechen die Einheiten <code>mm</code>, <code>cm</code> und <code>in</code> ihren tatsächlichen Maßen, mithin den Einheiten Millimeter, Zentimeter und Zoll (Englisch: Inch). Von ihnen abhängig ist die Einheit <code>px</code>, sie ist definiert als 1/96 eines Zolls.</p> + +<div class="blockIndicator note"> +<p><strong>Hinweis:</strong> Viele Benutzer erhöhen die Standardschriftgröße ihres Browsers zur besseren Lesbarkeit. Absolute Schriftgrößen können Probleme mit der Barrierefreiheit verursachen, weil sie nicht von den Benutzereinstellungen der Schriftgröße abhängen. Es wird deshalb empfohlen, relative Schriftgrößen wie <code>em</code> und <code>rem</code> zu benutzen, selbst für allgemeine Schriftgrößendefinitionen auf <code>p</code>- oder <code>body</code>-Ebene.</p> +</div> + +<dl> + <dt id="px"><code>px</code></dt> + <dd>Pixel, abhängig vom Anzeigegerät. Auf herkömmlichen Bildschirmen entspricht <code>1px</code> in der Regel einem physischen Pixel des Bildschirms.<br> + Bei hochauflösenden Geräten wird die Anzahl physischer Pixel so bemessen, dass 1 Zoll ungefähr 96px entspricht, also für <code>px</code> eine theoretische Auflösung von 96dpi beibehalten wird.</dd> + <dt id="cm"><code>cm</code></dt> + <dd>Zentimeter</dd> + <dt id="mm"><code>mm</code></dt> + <dd>Millimeter</dd> + <dt id="in"><code>in</code></dt> + <dd>Zoll (Englisch: Inch). 1 Zoll = 2,54cm</dd> + <dt id="pc"><code>pc</code></dt> + <dd>Picas. 1pc = 12pt = 1/6in</dd> + <dt id="pt"><code>pt</code></dt> + <dd>Punkt, ein Wert aus dem Druckgewerbe. 1pt = 1/72in. pt wird häufig für Schriftgrößen auch in anderen Anwendungen verwendet.</dd> + <dt id="mozmm"><code>mozmm</code> {{ non-standard_inline() }}</dt> + <dd>Experimentelle Maßeinheit, die unter Berücksichtigung der Auflösung des Anzeigegeräts <em>immer</em> exakten Millimetern entspricht.</dd> +</dl> + +<h2 id="Beispiel">Beispiel</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div style="width: 10em;">10em</div> +<div style="width: 10ex;">10ex</div> +<div style="width: 10ch;">10ch</div> +<div style="width: 10vh;">10vh</div> +<div style="width: 10vw;">10vw</div> +<div style="width: 10vmin;">10vmin</div> +<div style="width: 10vmax;">10vmax</div> +<div style="width: 100px;">100px</div> +<div style="width: 10cm;">10cm</div> +<div style="width: 10mm;">10mm</div> +<div style="width: 10in;">10in</div> +<div style="width: 10pc;">10pc</div> +<div style="width: 50pt;">50pt</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">div { + background-color: green; + margin: 6px; +} +</pre> + +<h3 id="Ergebnis">Ergebnis</h3> + +<p>{{ EmbedLiveSample('Beispiel', '', '', '', 'Web/CSS/length') }}</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th>Spezifikation</th> + <th>Status</th> + <th>Anmerkung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Values', '#lengths', '')}}</td> + <td>{{Spec2('CSS4 Values')}}</td> + <td><code>vi</code>, <code>vb</code>, <code>ic</code>, <code>lh</code>, und <code>rlh</code> hinzugefügt.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Values', '#lengths', '<length>') }}</td> + <td>{{ Spec2('CSS3 Values') }}</td> + <td><code>ch</code>, <code>rem</code>, <code>vw</code>, <code>vh</code>, <code>vmin</code>, <code>vmax</code> hinzugefügt</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'syndata.html#length-units', '<length>') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td><code>pt</code>, <code>pc</code>, <code>px</code> definiert</td> + </tr> + <tr> + <td>{{ SpecName('CSS1', '#length-units', '<length>') }}</td> + <td>{{ Spec2('CSS1') }}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browserkompatibilität</h2> + +<p>{{Compat("css.types.length")}}</p> diff --git a/files/de/web/css/letter-spacing/index.html b/files/de/web/css/letter-spacing/index.html new file mode 100644 index 0000000000..ffd4a58d94 --- /dev/null +++ b/files/de/web/css/letter-spacing/index.html @@ -0,0 +1,117 @@ +--- +title: letter-spacing +slug: Web/CSS/letter-spacing +tags: + - CSS + - CSS Eigenschaft + - NeedsMobileBrowserCompatibility + - Referenz + - SVG +translation_of: Web/CSS/letter-spacing +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <strong><code>letter-spacing</code></strong> CSS Eigenschaft gibt das Abstandsverhalten zwischen Textzeichen an.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">/* <length> Werte */ +letter-spacing: 0.3em; +letter-spacing: 3px; +letter-spacing: .3px; + +/* Schlüsselwortwerte */ +letter-spacing: normal; + +/* Globale Werte */ +letter-spacing: inherit; +letter-spacing: initial; +letter-spacing: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code>normal</code></dt> + <dd>Die Abstände sind die normalen Abstände für die aktuelle Schriftart. Im Gegensatz zu einem Wert von 0, erlaubt es dieser Wert dem User Agent, den Leerraum zwischen Zeichen zu ändern, um Text im Block anzuordnen.</dd> + <dt><code><length></code></dt> + <dd>Beschreibt Leerraum zwischen den Zeichen <strong><em>zusätzlich</em></strong> zum Standardleerraum zwischen Zeichen. Werte können negativ sein, aber es kann implementationsspezifische Beschränkungen geben. User Agents können den Leerraum zwischen den Zeichen nicht weiter verringern oder vergrößern, um den Text im Block anzuordnen.<br> + Siehe {{cssxref("length")}} Werte für mögliche Einheiten.</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="HTML_Inhalt">HTML Inhalt</h3> + +<pre class="brush: html"><p class="first-example"> letter spacing </p> +<p class="second-example"> letter spacing </p> +<p class="third-example"> letter spacing </p> +<p class="fourth-example"> letter spacing </p> +</pre> + +<h3 id="CSS_Inhalt">CSS Inhalt</h3> + +<pre class="brush: css">.first-example { letter-spacing: 0.4em; } +.second-example { letter-spacing: 1em; } +.third-example { letter-spacing: -0.05em; } +.fourth-example { letter-spacing: 6px; } +</pre> + +<p>{{ EmbedLiveSample('Beispiele', 440, 185) }}</p> + +<h2 id="Spezifikationen">Spezifikationen</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 Text', '#letter-spacing-property', 'letter-spacing')}}</td> + <td>{{Spec2('CSS3 Text')}}</td> + <td>Keine Änderung</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'letter-spacing')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Definiert <code>letter-spacing</code> als animierbar.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'text.html#propdef-letter-spacing', 'letter-spacing')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Keine Änderung</td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'text.html#LetterSpacingProperty', 'letter-spacing')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>Ursprüngliche SVG Definition</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#letter-spacing', 'letter-spacing')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.properties.letter-spacing")}} + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{cssxref("font-kerning")}}</li> +</ul> diff --git a/files/de/web/css/line-break/index.html b/files/de/web/css/line-break/index.html new file mode 100644 index 0000000000..7338a176c7 --- /dev/null +++ b/files/de/web/css/line-break/index.html @@ -0,0 +1,72 @@ +--- +title: line-break +slug: Web/CSS/line-break +tags: + - CSS + - CSS Text + - NeedsExample + - Property + - Referenz +translation_of: Web/CSS/line-break +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <strong><code>line-break</code></strong> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft wird dazu verwendet, wie (oder ob) Zeilen umgebrochen werden sollen.</p> + +<div>{{cssinfo}}</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">/* Schlüsselwortwerte */ +line-break: auto; +line-break: loose; +line-break: normal; +line-break: strict; + +/* Globale Werte */ +line-break: inherit; +line-break: initial; +line-break: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>Text wird nach der Standardregel zum Umbrechen von Zeilen umgebrochen.</dd> + <dt><code>loose</code></dt> + <dd>Text wird umgebrochen, sodass die Zeile kürzer ist, wie bei einer Zeitung.</dd> + <dt><code>normal</code></dt> + <dd>Text wird nach der allgemeinen Regel zum Umbrechen von Zeilen umgebrochen.</dd> + <dt><code>strict</code></dt> + <dd>Text wird nach der strikten Regel zum Umbrechen von Zeilen umgebrochen.</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Spezifikationen">Spezifikationen</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 Text', '#line-break-property', 'line-break')}}</td> + <td>{{Spec2('CSS3 Text')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.properties.line-break")}} diff --git a/files/de/web/css/linear-gradient()/index.html b/files/de/web/css/linear-gradient()/index.html new file mode 100644 index 0000000000..127a082f2a --- /dev/null +++ b/files/de/web/css/linear-gradient()/index.html @@ -0,0 +1,332 @@ +--- +title: linear-gradient() +slug: Web/CSS/linear-gradient() +translation_of: Web/CSS/linear-gradient() +--- +<p>{{ CSSRef() }}</p> + +<p>Die CSS <code>linear-gradient()</code> Funktion erstellt ein {{cssxref("<image>")}} welches aus einem konstanten Farbverlauf besteht. Das Ergebnis dieser Funktion ist ein Objekt des CSS {{cssxref("<gradient>")}} Daten-Typs. Wie jeder andere Farbverlauf, ist der CSS Farbverlauf keine CSS {{cssxref("<color>")}} sondern ein Bild mit <a href="/en/CSS/image#no_intrinsic" title="en/CSS/image#no_intrinsic">keinen spezifischen Dimensionen</a>; Also hat er weder eine natürliche oder bevorzugte Größe, noch ein Größenverhältnis. Seine genaue Größe wird durch die Größe seines zugehörigen Elements bedingt.</p> + +<p>Ein konstanter Farbverlauf wird durch eine Achse, die <em>gradient line</em>, definiert wobei jeder Punkt auf dieser Linie eine andere Farbe hat. Senkrecht zur <em>gradient line</em> stehende Linien haben jeweils eine Farbe, die des jeweiligen Schnittpunks mit der <em>gradient line</em>.</p> + +<p> </p> + +<p><img alt="linear-gradient.png" src="/files/3537/linear-gradient.png" style="float: left; height: 383px; width: 309px;">Die <em>gradient line</em> wird definiert durch einen Winkel und dem Mittelpunkt des Quadrates auf dem das gradienten Bild abgebildet wird. Der Farbverlauf wird durch verschiedene Punkte definiert, dem Startpunkt, dem Endpunkt und den optional dazwischen liegenden Farbunterbrechungspunkten.</p> + +<p>Der Startpunkt ist der Punkt auf der <em>gradient line</em>, auf dem auch die Farbe anfängt. Er liegt genau auf dem Schnittpunkt der <em>gradient line</em> und einer Linie die senkrecht zu der Ecke des Bildes verläuft das im gleichen Quadranten liegt. </p> + +<p>So ist auch der Endpunkt ein Punkt, an dem einer der beiden ausgesuchten Farben ganz erreicht wird. Er liegt auch genauso auf dem Schnittpunkt zwischen der <em>gradient line </em>und der aus der Ecke im gleichen Quadranten senkrecht verlaufenden Linie , einfacher ist er aber als Punktsymmetrische Spiegelung zum Startpunkt zu sehen, wobei der Spiegelpunkt dabei auf der Mitte des Bildes liegt. </p> + +<p>Diese ungefähre und komplexe Definition des Start- und Endpunkts führt uns zu einer interessanten Eigenschaft, die manchmal <em>magic corners</em> genannt wird: die benachbarten Ecken der Start- und Endpunkte haben die gleiche Farbe, wie die jeweiligen Start- und Endpunkte.</p> + +<p>Mehr als nur die Farben des Start- und Endpunkts können festgesetzt werden. Durch das definieren einiger Farbunterbrechungen, kann der Web-Entwickler einen mehr individuellen Übergang zwischen den Start- und den Endpunktfarben erreichen , oder einen mehrfarbigen Farbverlauf erstellen.</p> + +<p>Der Syntax eines konstanten Farberlaufes erlaubt zwar keine Wiederholung von Farbverläufen, aber durch das Setzen von Farbunterbrechungen kann ein ähnlicher Effekt erzielt werden. Für wiederholende Farbverläufe ist die {{ Cssxref("repeating-linear-gradient") }} CSS Eigenschaft geeignet.</p> + +<p>Wenn die Position einer Farbunterbrechung bedingungslos definiert wird, wird er genau auf halben Weg zwischen dem vorhergehenden und dem nachfolgenden Punkt gesetzt. Außerdem kann die Position genau bestimmt werden, indem ein {{cssxref("<length>")}} oder ein {{cssxref("<percentage>")}} CSS Datentyp benutzt wird.</p> + +<div class="note">Farbverläufe sind als CSS <code><image></code> Datentypen definiert; sie können nur dann benutzt werden, wenn auch ein <code><image></code> Datentyp benötigt ist. Aus diesem Grund,<code> </code>wird ein <code>linear-gradient</code> nicht bei einer {{ Cssxref("background-color") }} und anderen Eigenschaften, die eine {{cssxref("<color>")}} benötigen, funktionieren.</div> + +<h2 id="Syntax" style="">Syntax</h2> + +<pre class="twopartsyntaxbox notranslate">linear-gradient( + [ <a href="/en-US/CSS/angle" title="angle"><angle></a> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ ) + \---------------------------------/ \----------------------------/ + Definition of the gradient line List of color stops + +where <code><side-or-corner> = [left | right] || [top | bottom]</code> + and <code><color-stop> = <color> [ <percentage> | <length> ]?</code> +</pre> + +<pre class="notranslate">linear-gradient( 45deg, blue, red ); /* A gradient on 45deg axis starting blue and finishing red */ +linear-gradient( to left top, blue, red); /* A gradient going from the bottom right to the top left starting blue and + finishing red */ + +linear-gradient( 0deg, blue, green 40%, red ); /* A gradient going from the bottom to top, starting blue, being green after 40% + and finishing red */ +</pre> + +<h3 id="Values">Values</h3> + +<dl> + <dt><code><side-or-corner></code></dt> + <dd>Represents the position of the starting-point of the gradient line. It consists of two keywords: the first one indicates the horizontal side, <code>left</code> or <code>right</code>, and the second one the vertical side, <code>top</code> or <code>bottom</code>. The order is not relevant and each of the keyword is optional.<br> + The values <code>to top</code>, <code>to bottom</code>, <code>to left</code> and <code>to right</code> are translated into the angles <code>0deg</code>, <code>180deg</code>, <code>270deg</code>, <code>90deg</code> respectively. The others are translated into an <span style="background-color: #000044; color: #ffffff;">angle</span> that let the starting-point to be in the same quadrant than the described corner and so that the line defined by the starting-point and the corner is perpendicular to the gradient line. That way, the color described by the <code><color-stop></code> will exactly apply to the corner point. This is sometimes called the "<em>magic corner</em>" property. The end-point of the gradient line is the symmetrical point of the starting-point on the other direction of the center box.</dd> + <dt><code><angle></code></dt> + <dd>An angle of direction for the gradient. See {{ cssxref("<angle>") }}.</dd> + <dt><code><color-stop></code></dt> + <dd>This value is comprised of a {{cssxref("<color>")}} value, followed by an optional stop position (either a percentage or a {{cssxref("<length>")}} along the gradient axis).<br> + Rendering of color-stops in CSS gradients follows the same rules as color-stops in SVG gradients.</dd> +</dl> + +<h3 id="History_of_the_syntax">History of the syntax</h3> + +<p>The syntax of <code>linear-gradient</code> has evolved since the <a class="external" href="http://www.webkit.org/blog/175/introducing-css-gradients/" title="http://www.webkit.org/blog/175/introducing-css-gradients/">first Apple proposal</a> implemented in 2008:</p> + +<pre class="notranslate"><code>-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)</code> +</pre> + +<p>In the original syntax, the same function was used to create both linear and radial gradients. However, the parameters needed in each case were different, resulting in a syntax that varied with the value of the first parameter. The situation became more complicated if other types of gradients, like conical gradients, were added, requiring the use of functions and non-standard or inconsistent css value specifications. No draft was proposed to the W3C.</p> + +<p>An alternative syntax was proposed and implemented by Mozilla in 2009. In this syntax, two CSS functions would be required; one for linear gradients, and the other for radial gradients. However, this syntax never shipped in a released product. A third syntax was proposed. This third syntax simplified the syntax for linear gradients to:</p> + +<pre class="notranslate">-moz-linear-gradient(<code>[ [ [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);</code> +</pre> + +<p>The new syntax did not require the <code>to()</code>, <code>from()</code>and <code>color-stop()</code> functions, so they were dropped. The order of the <code>top</code>/<code>bottom</code> and <code>left</code>/<code>right</code> keywords was also recognized as unimportant, so Mozilla removed the constraint of having <code>top</code>/<code>bottom</code> defined first. </p> + +<p>But the new syntax had still had one drawback: it allowed only vertical and horizontal gradients. Finally, the syntax below was proposed to the W3C. Following two more changes to solve the limitation on the direction of gradients, it was added to the CSS Images Values and Content Replacement Level 3 draft in 2011.</p> + +<ul> + <li>The support of an {{ cssxref("<angle>") }} as an origin, allowing gradients of any direction.</li> + <li>The definition of the magic corner algorithm which eases the work of Web developers by allowing an easy definition of the exact color at the corners.</li> +</ul> + +<p>The color interpolation is also defined as happening in the pre-multiplied color space, in order to prevent non esthetic grey to appear when using color with different opacity. This syntax was implemented, prefixed, by both Webkit, without dropping the original one, and Trident (IE 10):</p> + +<pre class="notranslate">linear-gradient(<code> [ </code>[ {{cssxref("<angle>")}} | <code>[top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);</code> +</pre> + +<p>Unfortunately, the addition of the {{ cssxref("<angle>") }} values to the syntax introduced an incoherence: the angle indicates a destination, but the keywords indicate a starting point.<a class="external" href="http://lists.w3.org/Archives/Public/www-style/2011Jun/0377.html" title="http://lists.w3.org/Archives/Public/www-style/2011Jun/0377.html"># </a>This was fixed by a new syntax where the keyword are directions too, and preceded by the <code>to</code> keyword.</p> + +<pre class="notranslate">linear-gradient(<code>[ [ </code>[ {{cssxref("<angle>")}} | to <code>[top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);</code> +</pre> + +<p>This should be the final syntax.</p> + +<p>A last semantic curiosity still exists between the prefixed variants and the unprefixed proposal. Following the initial Apple proposal, the prefixed variants of the syntax all uses the an {{ cssxref("<angle>") }} defined like polar angles, that is with <code>0deg</code> representing the East. To be coherent with the rest of CSS, the specification defines an angle with <code>0deg</code> representing the North. To prevent sites using prefixed version of the property to get suddenly broken, even when adapting to the otherwise forward-compatible final syntax, they keep the original angle definition (<code>0deg</code> = East<code>)</code>. They will switch to the correct spec when unprefixing the property. Also, as they aren't incompatible, Gecko supports, prefixed, both the syntax with the <code>to</code> keyword and without. Here again, the syntax without the keyword will be dropped when unprefixing.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Gradient_at_a_45_degree_angle">Gradient at a 45 degree angle</h3> + +<p>Positions can be specified along the gradient axis with a color for each of them, called "color-stops", and the areas between every color-stop smoothly transition between each other. Any one color in the gradient forms a straight line that is perpendicular to the gradient axis. In the below image, the gradient's axis starts from the top-left corner of the div, and is directed at a 45 degree angle. Two color-stops are specified, red and blue.</p> + +<pre class="brush: html notranslate"><div style="width: 200px; height: 200px;"></div></pre> + +<pre class="brush: css notranslate">div { + background: linear-gradient(135deg, red, blue); +}</pre> + +<h4 id="Result">Result:</h4> + +<p>{{ EmbedLiveSample("Gradient_at_a_45_degree_angle") }}</p> + +<h3 id="Gradient_that_starts_at_60_of_the_gradient_line">Gradient that starts at 60% of the gradient line</h3> + +<p>Sometimes we don't want a gradient that starts at the beginning of the line, but later. To reach this, add a color stop with same color where you want the gradient to start.</p> + +<pre class="brush: html notranslate"><div style="width: 200px; height: 200px;"></div></pre> + +<pre class="brush: css notranslate">div { + background: linear-gradient(135deg, red, red 60%, blue); +}</pre> + +<h4 id="Result_2">Result:</h4> + +<p>{{ EmbedLiveSample("Gradient_that_starts_at_60_of_the_gradient_line") }}</p> + +<h3 id="Gradient_with_multiple_color_stops">Gradient with multiple color stops</h3> + +<p>If the first color-stop does not have a <code><length></code> or <code><percentage></code>, it defaults to 0%. If the last color-stop does not have a <code><length></code> or <code><percentage></code>, it defaults to 100%. If a color-stop doesn't have a specified position and it isn't the first or last stop, then it is assigned the position that is half way between the previous stop and next stop.</p> + +<p>Color-stops must be specified in order. After assigning default values to the first and last stops if necessary, if a color-stop has a specified position that is less than the specified position of any color-stop before it in the list, its position is changed to be equal to the largest specified position of any color-stop before it.</p> + +<pre class="brush: html notranslate"><div>A rainbow made from a gradient</div></pre> + +<pre class="brush: css notranslate">div { + background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); +} +</pre> + +<h4 id="Result_3">Result:</h4> + +<p>{{ EmbedLiveSample("Gradient_with_multiple_color_stops") }}</p> + +<h3 id="Repeating_a_linear_gradient">Repeating a linear gradient</h3> + +<p>The <code>linear-gradient</code> does not allow repeating gradients. By default, the gradient will stretch to fill the element it is defined on. For this functionality, see {{ Cssxref("repeating-linear-gradient") }}.</p> + +<h3 id="Using_transparency">Using transparency</h3> + +<pre class="brush: html notranslate"><div>Linear with transparency</div></pre> + +<pre class="brush: css notranslate">div { + background: linear-gradient(to bottom right, red, rgba(255,0,0,0)); +}</pre> + +<h4 id="Result_4">Result:</h4> + +<p>{{ EmbedLiveSample("Using_transparency") }}</p> + +<p>Gradient backgrounds are not affected by {{ Cssxref("background-size") }} if all points and lengths are specified using fixed units (as opposed to percentages or keywords, which are relative to the value of <code>background-size</code>).</p> + +<h2 id="Notes">Notes</h2> + +<p>If you set the {{ cssxref("background-image") }} property of the {{ HTMLElement("body") }} tag to a <code>linear-gradient</code>, the gradient <a class="external" href="https://web.archive.org/web/20120829151425/http://richard.milewski.org:80/archives/1014" title="http://richard.milewski.org/archives/1014">won't fill the browser screen unless </a>you also set the {{ cssxref("min-height") }} property of the document root (e.g. the {{ HTMLElement("html") }} tag) to 100%.</p> + +<h2 id="Specifications" name="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Images', '#linear-gradients', 'linear-gradient()') }}</td> + <td>{{ Spec2('CSS3 Images') }}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera (Presto)</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support (on {{ cssxref("background") }} and {{ cssxref("background-image") }})</td> + <td>{{ CompatGeckoDesktop("1.9.2") }}{{ property_prefix("-moz") }}<sup><a href="#bc3">[3]</a></sup><br> + {{ CompatGeckoDesktop("16") }}<sup><a href="#bc5">[5]</a></sup></td> + <td>10.0 (534.16){{ property_prefix("-webkit") }} <sup><a href="#bc2">[2]</a></sup><sup><a href="#bc3">[3]</a></sup></td> + <td>10.0 <sup><a href="#bc1">[1]</a></sup></td> + <td>11.10{{ property_prefix("-o") }} <sup><a href="#bc3">[3]</a></sup></td> + <td>5.1{{ property_prefix("-webkit") }}<sup><a href="#bc2">[2]</a></sup><sup><a href="#bc3">[3]</a></sup></td> + </tr> + <tr> + <td>On {{cssxref("border-radius")}}</td> + <td>{{CompatGeckoDesktop("29")}}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td>On any other property that accept {{cssxref("<image>")}}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td><a class="external" href="http://www.webkit.org/blog/175/introducing-css-gradients/">Legacy webkit syntax</a>{{ non-standard_inline() }}</td> + <td>{{ CompatNo() }}</td> + <td>3{{ property_prefix("-webkit") }} <sup><a href="#bc2">[2]</a></sup></td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>4.0{{ property_prefix("-webkit") }}<sup><a href="#bc2">[2]</a></sup></td> + </tr> + <tr> + <td>Legacy <em>from </em>syntax (without <code>to</code>){{ non-standard_inline() }}</td> + <td>{{ CompatGeckoDesktop("1.9.2") }}{{ property_prefix("-moz") }} <sup><a href="#bc4">[4]</a></sup></td> + <td>10.0 (534.16){{ property_prefix("-webkit") }} <sup><a href="#bc2">[2]</a></sup></td> + <td>10</td> + <td>11.10{{ property_prefix("-o") }}<sup><a href="#bc4">[4]</a></sup></td> + <td>5.1{{ property_prefix("-webkit") }}<sup><a href="#bc2%3E">[2]</a></sup></td> + </tr> + <tr> + <td>Standard syntax (using the <code>to</code> keyword)</td> + <td>{{CompatGeckoDesktop("16")}}</td> + <td>26.0 (537.27)</td> + <td>10</td> + <td>12.10</td> + <td>6.1</td> + </tr> + <tr> + <td>Interpolation hints (a percent without a color)</td> + <td>{{CompatGeckoDesktop("36")}}</td> + <td>40</td> + <td> </td> + <td>27</td> + <td> </td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera (Presto)</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatGeckoMobile("1.9.2") }}{{ property_prefix("-moz") }}<sup><a href="#bc3">[3]</a></sup><br> + {{ CompatGeckoMobile("16") }}<sup><a href="#bc5">[5]</a></sup></td> + <td> + <p>16{{property_prefix("-webkit")}}<br> + 26</p> + </td> + <td>10</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p><sup><a name="bc1">[1]</a></sup> Internet Explorer 5.5 through 9.0 supports proprietary <a class="external" href="http://msdn.microsoft.com/en-us/library/ms532997(VS.85,loband).aspx"><code>filter: progid:DXImageTransform.Microsoft.Gradient()</code> filter</a>.</p> + +<p><sup><a name="bc2">[2]</a></sup> WebKit since 528 supports the legacy <a class="external" href="http://developer.apple.com/safari/library/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradients.html"><code>-webkit-gradient(linear,…)</code> function</a>. As of WebKit 534.16, it also supports the standard gradient syntax. Unlike in Gecko, in legacy WebKit you cannot specify both a position and angle in <code>-webkit-linear-gradient()</code>. You can achieve the same effect by offsetting the color stops.</p> + +<p><sup><a name="bc3">[3]</a></sup> Gecko, Opera & Webkit considers {{ cssxref("<angle>") }} to start to the right, instead of the top. I.e. it considered an angle of <code>0deg</code> as a direction indicator pointing to the right. This is different from the latest specification where an angle of <code>0deg</code> as a direction indicator points to the top.</p> + +<p><sup><a name="bc4">[4]</a></sup> Firefox 3.6 and Opera 11.10 implemented, prefixed, an early syntax where the starting corner or side was indicated without the <code>to</code> keyword, and effectively considered as a <em>from</em> position. The <code>to</code> syntax has been added in Firefox 10 and Opera 11.60 , at first without removing the deprecated syntax and translation between the two is trivial:</p> + +<pre class="notranslate">linear-gradient(to top left, blue, red);</pre> + +<p>is almost the same as:</p> + +<pre class="notranslate">-moz-linear-gradient(bottom right, blue, red);</pre> + +<p>The legacy syntax, without <code>to</code>, is planned to go away when the prefix is removed.</p> + +<p><sup><a name="bc5">[5]</a></sup>Before Firefox 36, Gecko didn't apply gradient on the pre-multiplied color space, leading to shade of grey unexpectedly appearing when used with transparency.</p> + +<h3 id="Cross-browser_gradients">Cross-browser gradients</h3> + +<p>Considering all prefixes above, here is a gradient from pink to green, top to bottom.</p> + +<pre class="brush: css notranslate">.grad { + background-color: #F07575; /* fallback color if gradients are not supported */ + background-image: -webkit-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */ + background-image: -moz-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Firefox (3.6 to 15) */ + background-image: -o-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For old Opera (11.1 to 12.0) */ + background-image: linear-gradient(to bottom, hsl(0, 80%, 70%), #bada55); /* Standard syntax; must be last */ +} +</pre> + +<p>The -moz- prefixed rules are used for compatibility with older versions (Fx 3.6 to Fx 15). The -webkit-prefix is the only one that still needs to be included for Android 4.3-, iOS up to 6.1, and Safari 6. When using a prefix, do not use 'to'.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en/CSS/Using_CSS_gradients" title="en/Using gradients">Using CSS gradients</a>, {{ cssxref("radial-gradient", "radial-gradient()") }}, {{ cssxref("repeating-linear-gradient", "repeating-linear-gradient()") }}, {{ cssxref("repeating-radial-gradient", "repeating-radial-gradient()") }};</li> + <li>Some properties where it can be used: {{ cssxref("background-image") }}, {{ cssxref("background") }};</li> + <li><a class="external" href="http://lea.verou.me/css3patterns/" title="http://leaverou.me/css3patterns/">CSS Gradients Patterns Gallery, by Lea Verou</a><span class="external">;</span></li> + <li><a class="external" href="http://standardista.com/cssgradients" title="http://standardista.com/cssgradients">CSS3 Gradients Library, by Estelle Weyl</a>.</li> +</ul> + +<p> </p> diff --git a/files/de/web/css/list-style-image/index.html b/files/de/web/css/list-style-image/index.html new file mode 100644 index 0000000000..dba30b4191 --- /dev/null +++ b/files/de/web/css/list-style-image/index.html @@ -0,0 +1,102 @@ +--- +title: list-style-image +slug: Web/CSS/list-style-image +tags: + - CSS + - CSS Eigenschaft + - CSS Liste + - Layout + - Referenz + - Web +translation_of: Web/CSS/list-style-image +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>list-style-image</code> CSS Eigenschaft gibt das Bild an, das als Aufzählungszeichen verwendet wird.</p> + +<p>Es ist oft einfacher, die Kurzform Eigenschaft {{ cssxref("list-style") }} zu verwenden.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">/* Schlüsselwortwerte */ +list-style-image: none; + +/* <url> Werte */ +list-style-image: url('starsolid.gif'); + +/* Globale Werte */ +list-style-image: inherit; +list-style-image: initial; +list-style-image: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code><uri></code></dt> + <dd>Adresse des Bildes, das als Aufzählungszeichen verwendet werden soll.</dd> + <dt><code>none</code></dt> + <dd>Gibt an, dass kein Bild als Aufzählungszeichen verwendet werden soll. Falls dieser Wert gesetzt ist, wird das in {{ Cssxref("list-style-type") }} definierte Aufzählungszeichen verwendet.</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><ul> + <li>Item 1</li> + <li>Item 2</li> +</ul> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">ul { + list-style-image: url("https://mdn.mozillademos.org/files/11981/starsolid.gif") +}</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample('Beispiele')}}</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Anmerkung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Lists', '#list-style-image', 'list-style-image') }}</td> + <td>{{ Spec2('CSS3 Lists') }}</td> + <td>Erweitert die Unterstützung auf beliebige {{cssxref("<image>")}} Datentypen.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'generate.html#propdef-list-style-image', 'list-style-image') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.properties.list-style-image")}} + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{ Cssxref("list-style") }}, {{ Cssxref("list-style-type") }}, {{ Cssxref("list-style-position") }}</li> +</ul> diff --git a/files/de/web/css/list-style-position/index.html b/files/de/web/css/list-style-position/index.html new file mode 100644 index 0000000000..6645dafb85 --- /dev/null +++ b/files/de/web/css/list-style-position/index.html @@ -0,0 +1,116 @@ +--- +title: list-style-position +slug: Web/CSS/list-style-position +tags: + - CSS + - CSS Eigenschaft + - Layout + - Referenz + - Web +translation_of: Web/CSS/list-style-position +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>list-style-position</code> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft gibt die Position der Aufzählungszeichenbox innerhalb der Hauptblockbox an.</p> + +<p>Es ist oft einfacher, die Kurzform Eigenschaft {{cssxref("list-style")}} zu verwenden.</p> + +<p>{{cssinfo("list-style-position")}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="twopartsyntaxbox"><a href="/de/docs/Web/CSS/Wertdefinitionssyntax" title="CSS/Value_definition_syntax">Formale Syntax</a>: {{csssyntax("list-style-position")}}</pre> + +<pre>list-style-position: inside +list-style-position: outside + +list-style-position: inherit +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code>outside</code></dt> + <dd>Die Aufzählungszeichenbox liegt außerhalb der Hauptblockbox.</dd> + <dt><code>inside</code></dt> + <dd>Die Aufzählungszeichenbox ist die erste Inlinebox der Hauptblockbox, nach der der Inhalt des Elements steht.</dd> +</dl> + +<h2 id="Beispiel">Beispiel</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><ul class="one"> List 1 + <li>List Item 1-1</li> + <li>List Item 1-2</li> + <li>List Item 1-3</li> + <li>List Item 1-4</li> +</ul> +<ul class="two"> List 2 + <li>List Item 2-1</li> + <li>List Item 2-2</li> + <li>List Item 2-3</li> + <li>List Item 2-4</li> +</ul> +<ul class="three"> List 3 + <li>List Item 3-1</li> + <li>List Item 3-2</li> + <li>List Item 3-3</li> + <li>List Item 3-4</li> +</ul></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush:css;">.one { + list-style:square inside; +} + +.two { + list-style-position: outside; + list-style-type: circle; +} + +.three { + list-style-image: url("https://mdn.mozillademos.org/files/11979/starsolid.gif"); + list-style-position: inherit; +}</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample("Beispiel","200","420")}}</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Anmerkung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Lists', '#list-style-position', 'list-style-position')}}</td> + <td>{{Spec2('CSS3 Lists')}}</td> + <td>Keine Änderung</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'generate.html#propdef-list-style-position', 'list-style-position')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.properties.list-style-position")}} + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{Cssxref("list-style")}}, {{Cssxref("list-style-type")}}, {{Cssxref("list-style-image")}}</li> +</ul> diff --git a/files/de/web/css/list-style-type/index.html b/files/de/web/css/list-style-type/index.html new file mode 100644 index 0000000000..d2831799ac --- /dev/null +++ b/files/de/web/css/list-style-type/index.html @@ -0,0 +1,562 @@ +--- +title: list-style-type +slug: Web/CSS/list-style-type +tags: + - CSS + - CSS Eigenschaft + - CSS Liste + - NeedsMobileBrowserCompatibility + - Referenz +translation_of: Web/CSS/list-style-type +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die CSS-Eigenschaft <code>list-style-type</code> bestimmt, wie die Einträge einer Liste ausgezeichnet werden. Übliche Arten sind etwa Punkte oder eine Nummerierung vor jedem Eintrag:</p> + +<ul> + <li>Erster Eintrag</li> + <li>Zweiter Eintrag</li> +</ul> + +<ol> + <li>Numerierte Einträge</li> + <li>Numerierte Einträge</li> +</ol> + +<p>Meist wird diese Eigenschaft mit dem {{HTMLElement("li")}}-Element in Verbindung gebracht. Tatsächlich kann es sich jedoch um jedes beliebige Element handeln, dessen {{cssxref("display")}}-Eigenschaft <code>list-item</code> ist.</p> + +<div class="note"> +<p><strong>Hinweis:</strong> <code>list-style-type</code> ist eine Eigenschaft von Listenelementen, nicht von Listen. Da sie vererbt wird, kann sie jedoch statt beim Listenelement selbst auch bei seinem Elternelement gesetzt werden (in der Regel {{HTMLElement("ol")}} or {{HTMLElement("ul")}}).</p> +</div> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code>none</code></dt> + <dd>Es wird kein Aufzählungszeichen angezeigt.</dd> + <dt>{{cssxref("<string>")}}</dt> + <dd>Der gebene, in Anführungszeichen gesetzte Text wird vor jedem Listeneintrag angezeigt. Beispiel: <code>list-style-type: '-'</code></dd> + <dt>{{cssxref("symbols()")}}</dt> + <dd>Statt über {{cssxref("@counter-style")}} eine Aufzählungsweise zu definieren, kann dies mit der Funktion symbols() auch direkt in der Eigenschaft <code>list-style-type</code> geschehen.<br> + Da diese Aufzählungsweise im Gegensatz zu per @counter-style definierten keinen Namen hat, wird sie auch als "anonym" bezeichnet.</dd> + <dt>{{cssxref("custom-ident", "<custom-ident>")}}</dt> + <dd>Ein Bezeichner, der dem Wert einer {{cssxref("@counter-style")}}-Regel entspricht oder einem der folgenden Stile:</dd> +</dl> + +<dl style="background: rgb(238, 238, 238); padding: 0.5em 0px 0.5em 0.5em; border: 1px solid powderblue; font-size: 90%; -moz-column-width: 20em; -webkit-columns: 20em; -moz-column-rule: 1px solid powderblue; -webkit-column-rule: 1px solid powderblue;"> + <dt><code>disc</code></dt> + <dd> + <ul style="list-style-type: disc;"> + <li>Ein gefüllter Kreis (Standardwert)</li> + </ul> + </dd> + <dt><code>circle</code></dt> + <dd> + <ul style="list-style-type: circle;"> + <li>Ein leerer Kreis</li> + </ul> + </dd> + <dt><code>square</code></dt> + <dd> + <ul style="list-style-type: square;"> + <li>Ein gefülltes Quadrat</li> + </ul> + </dd> + <dt><code>decimal</code></dt> + <dd> + <ul style="list-style-type: decimal;"> + <li>Dezimalzahlen</li> + <li>Beginnend bei 1</li> + </ul> + </dd> + <dt><code>cjk-decimal</code> {{experimental_inline}}</dt> + <dd> + <ul> + <li>Han-Dezimalzahlen</li> + <li>z. B. 一, 二, 三, ..., 九八, 九九, 一〇〇</li> + </ul> + </dd> + <dt><code>decimal-leading-zero</code></dt> + <dd> + <ul style="list-style-type: decimal-leading-zero;"> + <li>Dezimalzahlen</li> + <li>Aufgefüllt mit vorangestellten Nullen</li> + <li>z. B. 01, 02, 03, … 98, 99</li> + </ul> + </dd> + <dt><code>lower-roman</code></dt> + <dd> + <ul style="list-style-type: lower-roman;"> + <li>Kleingeschriebene römische Zahlen</li> + <li>E.g. i, ii, iii, iv, v…</li> + </ul> + </dd> + <dt><code>upper-roman</code></dt> + <dd> + <ul style="list-style-type: upper-roman;"> + <li>Großgeschriebene römische Zahlen</li> + <li>E.g. I, II, III, IV, V…</li> + </ul> + </dd> + <dt><code>lower-greek</code></dt> + <dd> + <ul style="list-style-type: lower-greek;"> + <li>Kleingeschriebene griechische Zahlworte</li> + <li>Alpha, Beta, Gamma…</li> + <li>z. B. α, β, γ…</li> + </ul> + </dd> + <dt><code>lower-alpha</code></dt> + <dt><code>lower-latin</code></dt> + <dd> + <ul style="list-style-type: lower-alpha;"> + <li>Kleingeschriebene lateinische Buchstaben</li> + <li>z. B. a, b, c, … z</li> + <li><code>lower-latin</code> wird nicht von IE7 und früher unterstützt</li> + <li>Siehe den Unterpunkt {{anch("Browser-Kompatibilität")}}.</li> + </ul> + </dd> + <dt><code>upper-alpha</code></dt> + <dt><code>upper-latin</code></dt> + <dd> + <ul style="list-style-type: upper-alpha;"> + <li>Großgeschriebene lateinische Buchstaben</li> + <li>z. B. A, B, C, … Z</li> + <li><code>upper-latin</code> wird nicht von IE7 und früher unterstützt</li> + </ul> + </dd> + <dt><code>arabic-indic</code></dt> + <dt><code>-moz-arabic-indic</code></dt> + <dd> + <ul style="list-style-type: -moz-arabic-indic; list-style-type: arabic-indic;"> + <li>Beispiel</li> + </ul> + </dd> + <dt><code>armenian</code></dt> + <dd> + <ul style="list-style-type: armenian;"> + <li>Traditionelle armenische Nummerierung</li> + <li>z. B. ayb/ayp, ben/pen, gim/keem…</li> + </ul> + </dd> + <dt><code>bengali</code></dt> + <dt><code>-moz-bengali</code></dt> + <dd> + <ul style="list-style-type: -moz-bengali; list-style-type: bengali;"> + <li>Beispiel</li> + </ul> + </dd> + <dt><code>cambodian</code> {{experimental_inline}}*</dt> + <dd> + <ul style="list-style-type: cambodian;"> + <li>Beispiel</li> + <li>Ist ein Synonym für Khmer</li> + </ul> + </dd> + <dt><code>cjk-earthly-branch</code></dt> + <dt><code>-moz-cjk-earthly-branch</code></dt> + <dd> + <ul style="list-style-type: -moz-cjk-earthly-branch; list-style-type: cjk-earthly-branch;"> + <li>Beispiel</li> + </ul> + </dd> + <dt><code>cjk-heavenly-stem</code></dt> + <dt><code>-moz-cjk-heavenly-stem</code></dt> + <dd> + <ul style="list-style-type: -moz-cjk-heavenly-stem; list-style-type: cjk-heavenly-stem;"> + <li>Beispiel</li> + </ul> + </dd> + <dt><code>cjk-ideographic</code>{{experimental_inline}}</dt> + <dd> + <ul style="list-style-type: cjk-ideographic;"> + <li>Identisch zu <code>trad-chinese-informal</code></li> + <li>Z. B. 一萬一千一百一十一</li> + </ul> + </dd> + <dt><code>devanagari</code></dt> + <dt><code>-moz-devanagari</code></dt> + <dd> + <ul style="list-style-type: -moz-devanagari; list-style-type: devanagari;"> + <li>Beispiel</li> + </ul> + </dd> + <dt><code>ethiopic-numeric</code> {{experimental_inline}}</dt> + <dd> + <ul style="list-style-type: ethiopic-numeric;"> + <li>Beispiel</li> + </ul> + </dd> + <dt><code>georgian</code></dt> + <dd> + <ul style="list-style-type: georgian;"> + <li>Traditionelle georgische Nummerierung</li> + <li>z. B. an, ban, gan, … he, tan, in…</li> + </ul> + </dd> + <dt><code>gujarati</code></dt> + <dt><code>-moz-gujarati</code></dt> + <dd> + <ul style="list-style-type: -moz-gujarati; list-style-type: gujarati;"> + <li>Beispiel</li> + </ul> + </dd> + <dt><code>gurmukhi</code></dt> + <dt><code>-moz-gurmukhi</code></dt> + <dd> + <ul style="list-style-type: -moz-gurmukhi; list-style-type: gurmukhi;"> + <li>Beispiel</li> + </ul> + </dd> + <dt><code>hebrew</code> {{experimental_inline}}</dt> + <dd> + <ul> + <li>Traditionelle hebräische Nummerierung</li> + </ul> + </dd> + <dt><code>hiragana</code> {{experimental_inline}}</dt> + <dd> + <ul> + <li>a, i, u, e, o, ka, ki, …</li> + <li>(Japanisch)</li> + </ul> + </dd> + <dt><code>hiragana-iroha</code> {{experimental_inline}}</dt> + <dd> + <ul> + <li>i, ro, ha, ni, ho, he, to, …</li> + <li>{{interwiki('wikipedia', 'Iroha')}} ist die alte japanische Silbenreihenfolge.</li> + </ul> + </dd> + <dt><code>japanese-formal</code> {{experimental_inline}}</dt> + <dd> + <ul> + <li>Formelle japanische Nummerierung, wie sie in juristischen oder Wirtschaftsdokumenten verwendet wird.</li> + <li>z. B. 壱萬壱阡壱百壱拾壱</li> + <li>Änderungen an der Gestaltung der Kanji-Schriftzeichen, die zu Verwechslungen mit anderen führen könnten, werden unterdrückt.</li> + </ul> + </dd> + <dt><code>japanese-informal</code> {{experimental_inline}}</dt> + <dd> + <ul> + <li>Formlose japanische Nummerierung</li> + </ul> + </dd> + <dt><code>kannada</code></dt> + <dt><code>-moz-kannada</code></dt> + <dd> + <ul style="list-style-type: -moz-kannada; list-style-type: kannada;"> + <li>Beispiel</li> + </ul> + </dd> + <dt><code>katakana</code> {{experimental_inline}}</dt> + <dd> + <ul> + <li>A, I, U, E, O, KA, KI, …</li> + <li>(Japanisch)</li> + </ul> + </dd> + <dt><code>katakana-iroha</code> {{experimental_inline}}</dt> + <dd> + <ul> + <li>I, RO, HA, NI, HO, HE, TO, …</li> + <li>{{interwiki('wikipedia', 'Iroha')}} ist die alte japanische Silbenreihenfolge.</li> + </ul> + </dd> + <dt><code>khmer</code></dt> + <dt><code>-moz-khmer</code></dt> + <dd> + <ul style="list-style-type: -moz-khmer; list-style-type: khmer;"> + <li>Beispiel</li> + </ul> + </dd> + <dt><code>korean-hangul-formal</code> {{experimental_inline}}</dt> + <dd> + <ul> + <li>Koreanische Hangul-Nummerierung</li> + <li>z. B. 일만 일천일백일십일</li> + </ul> + </dd> + <dt><code>korean-hanja-formal</code> {{experimental_inline}}</dt> + <dd> + <ul> + <li>Formelle koreanische Han-Nummerierung</li> + <li>z. B. 壹萬 壹仟壹百壹拾壹</li> + </ul> + </dd> + <dt><code>korean-hanja-informal</code> {{experimental_inline}}</dt> + <dd> + <ul> + <li>Koreanische Hanja-Nummerierung</li> + <li>z. B. 萬 一千百十一</li> + </ul> + </dd> + <dt><code>lao</code></dt> + <dt><code>-moz-lao</code></dt> + <dd> + <ul style="list-style-type: -moz-lao; list-style-type: lao;"> + <li>Beispiel</li> + </ul> + </dd> + <dt><code>lower-armenian</code> {{experimental_inline}}*</dt> + <dd> + <ul style="list-style-type: lower-armenian;"> + <li>Beispiel</li> + </ul> + </dd> + <dt><code>malayalam</code></dt> + <dt><code>-moz-malayalam</code></dt> + <dd> + <ul style="list-style-type: -moz-malayalam; list-style-type: malayalam;"> + <li>Beispiel</li> + </ul> + </dd> + <dt><code>mongolian</code> {{experimental_inline}}</dt> + <dd> + <ul style="list-style-type: mongolian;"> + <li>Beispiel</li> + </ul> + </dd> + <dt><code>myanmar</code></dt> + <dt><code>-moz-myanmar</code></dt> + <dd> + <ul style="list-style-type: -moz-myanmar; list-style-type: myanmar;"> + <li>Beispiel</li> + </ul> + </dd> + <dt><code>oriya</code></dt> + <dt><code>-moz-oriya</code></dt> + <dd> + <ul style="list-style-type: -moz-oriya; list-style-type: oriya;"> + <li>Beispiel</li> + </ul> + </dd> + <dt><code>persian</code> {{experimental_inline}}</dt> + <dt><code>-moz-persian</code></dt> + <dd> + <ul style="list-style-type: -moz-persian; list-style-type: persian;"> + <li>Beispiel</li> + </ul> + </dd> + <dt><code>simp-chinese-formal</code> {{experimental_inline}}</dt> + <dd> + <ul> + <li>Formelle Nummerierung in vereinfachtem Chinesisch</li> + <li>z. B. 壹万壹仟壹佰壹拾壹</li> + </ul> + </dd> + <dt><code>simp-chinese-informal</code> {{experimental_inline}}</dt> + <dd> + <ul> + <li>Formlose Nummerierung in vereinfachtem Chinesisch</li> + <li>z. B. 一万一千一百一十一</li> + </ul> + </dd> + <dt><code>tamil</code> {{experimental_inline}}</dt> + <dt><code>-moz-tamil</code></dt> + <dd> + <ul style="list-style-type: -moz-tamil; list-style-type: tamil;"> + <li>Beispiel</li> + </ul> + </dd> + <dt><code>telugu</code></dt> + <dt><code>-moz-telugu</code></dt> + <dd> + <ul style="list-style-type: -moz-telugu; list-style-type: telugu;"> + <li>Beispiel</li> + </ul> + </dd> + <dt><code>thai</code></dt> + <dt><code>-moz-thai</code></dt> + <dd> + <ul style="list-style-type: -moz-thai; list-style-type: thai;"> + <li>Beispiel</li> + </ul> + </dd> + <dt><code>tibetan</code> {{experimental_inline}}*</dt> + <dd> + <ul style="list-style-type: tibetan;"> + <li>Beispiel</li> + </ul> + </dd> + <dt><code>trad-chinese-formal</code> {{experimental_inline}}</dt> + <dd> + <ul> + <li>Formelle Nummerierung in traditionellem Chinesisch</li> + <li>z. B. 壹萬壹仟壹佰壹拾壹</li> + </ul> + </dd> + <dt><code>trad-chinese-informal</code> {{experimental_inline}}</dt> + <dd> + <ul> + <li>Formlose Nummerierung in traditionellem Chinesisch</li> + <li>z. B. 一萬一千一百一十一</li> + </ul> + </dd> + <dt><code>upper-armenian</code> {{experimental_inline}}*</dt> + <dd> + <ul style="list-style-type: upper-armenian;"> + <li>Beispiel</li> + </ul> + </dd> + <dt><code>disclosure-open</code> {{experimental_inline}}</dt> + <dd> + <ul style="list-style-type: disclosure-open;"> + <li>Zeigt an, dass der zugehörige Seitenbereich (etwa {{HTMLElement("details")}}) sichtbar ist.</li> + </ul> + </dd> + <dt><code>disclosure-closed</code> {{experimental_inline}}</dt> + <dd> + <ul style="list-style-type: disclosure-closed;"> + <li>Zeigt an, dass der zugehörige Seitenbereich (etwa {{HTMLElement("details")}}) versteckt ist.</li> + </ul> + </dd> + <dd> + <ul> + </ul> + </dd> +</dl> + +<h3 id="Nicht_standardisierte_Erweiterungen">Nicht standardisierte Erweiterungen</h3> + +<p>Zusätzliche Werte, die von Gecko (Firefox), Blink (Chrome und Opera) und WebKit (Safari) unterstützt werden, um Listenarten in anderen Sprachen anzubieten. Die Kompatibilitätstabelle weiter unten gibt nähere Auskunft zu den einzelnen Browsern.</p> + +<dl style="background: rgb(238, 238, 238); padding: 0.5em 0px 0.5em 0.5em; border: 1px solid powderblue; font-size: 90%; -moz-column-width: 16em; -webkit-columns: 16em; -moz-column-rule: 1px solid powderblue; -webkit-column-rule: 1px solid powderblue;"> + <dt>-moz-ethiopic-halehame</dt> + <dd> + <ul> + <li>Beispiel</li> + </ul> + </dd> + <dt>-moz-ethiopic-halehame-am</dt> + <dd> + <ul> + <li>Beispiel</li> + </ul> + </dd> + <dt>ethiopic-halehame-ti-er</dt> + <dt>-moz-ethiopic-halehame-ti-er</dt> + <dd> + <ul> + <li>Beispiel</li> + </ul> + </dd> + <dt>ethiopic-halehame-ti-et</dt> + <dt>-moz-ethiopic-halehame-ti-et</dt> + <dd> + <ul> + <li>Beispiel</li> + </ul> + </dd> + <dt>hangul</dt> + <dt>-moz-hangul</dt> + <dd> + <ul> + <li>Beispiel</li> + <li>Beispiel</li> + <li>Beispiel</li> + </ul> + </dd> + <dt>hangul-consonant</dt> + <dt>-moz-hangul-consonant</dt> + <dd> + <ul> + <li>Beispiel</li> + <li>Beispiel</li> + <li>Beispiel</li> + </ul> + </dd> + <dt>urdu</dt> + <dt>-moz-urdu</dt> + <dd> + <ul> + <li>Beispiel</li> + </ul> + </dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">ol.normal { + list-style-type: upper-alpha; +} + +/* Es kann auch die Kurzschreibweise "list-style" verwendet werden: */ +ol.shortcut { + list-style: upper-alpha; +}</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><ol class="normal">Liste 1 + <li>Hallo</li> + <li>Welt</li> + <li>Was gibt's?</li> +</ol> + +<ol class="shortcut">Liste 2 + <li>Schaut</li> + <li>Gleich</li> + <li>aus</li> +</ol> +</pre> + +<h3 id="Ergebnis">Ergebnis</h3> + +<p>{{EmbedLiveSample("Beispiele", "200", "300")}}</p> + +<h2 id="Hinweise">Hinweise</h2> + +<ul> + <li>Manche Listenarten setzen für die korrekte Darstellung voraus, dass eine passende Schriftart installiert ist.</li> + <li><code>cjk-ideographic</code> ist identisch zu <code>trad-chinese-informal</code>; es existiert lediglich aus Gründen der Rückwärtskompatibilität.</li> +</ul> + +<h2 id="Spezifikationen">Spezifikationen</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 Lists', '#list-style-type', 'list-style-type')}}</td> + <td>{{Spec2('CSS3 Lists')}}</td> + <td>Definiert CSS2.1-Zähler neu.<br> + Erweitert die Syntax um Unterstützung für <code>@counter-style-</code>Regeln.<br> + Definiert unter Verwendung von <code>@counter-style</code> die üblichen Stiltypen: <code>hebrew</code>, <code>cjk-ideographic</code>, <code>hiragana</code>, <code>hiragana-iroha</code>, <code>katakana</code>, <code>katakana-iroha</code>, <code>japanese-formal</code>, <code>japanese-informal</code>, <code>simp-chinese-formal</code>, <code>trad-chinese-formal</code>, <code>simp-chinese-formal</code>, <code>trad-chinese-formal</code>,<code>korean-hangul-formal</code>, <code>korean-hanja-informal</code>, <code>korean-hanja-formal</code>, <code>cjk-decimal</code>, <code>ethiopic-numeric</code>, <code>disclosure-open</code> und <code>disclosure-closed</code>.<br> + Erweitert <code><counter-style></code> um die Funktion <code>symbols()</code>.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'generate.html#propdef-list-style-type', 'list-style-type')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<p>{{Compat("css.properties.list-style-type")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{Cssxref("list-style")}}, {{Cssxref("list-style-image")}}, {{Cssxref("list-style-position")}}</li> +</ul> diff --git a/files/de/web/css/list-style/index.html b/files/de/web/css/list-style/index.html new file mode 100644 index 0000000000..17e4e515f9 --- /dev/null +++ b/files/de/web/css/list-style/index.html @@ -0,0 +1,104 @@ +--- +title: list-style +slug: Web/CSS/list-style +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/list-style +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>list-style</code> Eigenschaft ist eine Kurzform für {{cssxref("list-style-type")}}, {{cssxref("list-style-image")}} und {{cssxref("list-style-position")}}.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="eval">list-style: [ list-style-type || list-style-position || list-style-image ] | inherit +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt>list-style-type</dt> + <dd>Siehe {{cssxref("list-style-type")}}</dd> + <dt>list-style-image</dt> + <dd>Siehe {{cssxref("list-style-image")}}</dd> + <dt>list-style-position</dt> + <dd>Siehe {{cssxref("list-style-position")}}</dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html">List 1 +<ul class="one"> + <li>List Item1</li> + <li>List Item2</li> + <li>List Item3</li> +</ul> +List 2 +<ul class="two"> + <li>List Item A</li> + <li>List Item B</li> + <li>List Item C</li> +</ul> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">.one { + list-style: circle; +} + +.two { + list-style: square inside; +}</pre> + +<h3 id="Ergebnis">Ergebnis</h3> + +<p>{{EmbedLiveSample('Beispiele')}}</p> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Browser</th> + <th>ab Version</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>4.0</td> + </tr> + <tr> + <td>Firefox (Gecko)</td> + <td>1.0 (1.0)</td> + </tr> + <tr> + <td>Opera</td> + <td>3.5</td> + </tr> + <tr> + <td>Safari (WebKit)</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> + +<h2 id="Spezifikation">Spezifikation</h2> + +<ul> + <li><a href="http://www.w3.org/TR/CSS21/generate.html#propdef-list-style">CSS 2.1 Generated content #list-style</a></li> +</ul> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{cssxref("list-style-type")}}, {{cssxref("list-style-image")}}, {{cssxref("list-style-position")}}</li> +</ul> + +<div class="noinclude">{{ languages({ "en": "en/CSS/list-style", "es": "es/CSS/list-style", "fr": "fr/CSS/list-style", "ja": "ja/CSS/list-style", "pl": "pl/CSS/list-style", "pt": "pt/CSS/list-style"}) }}</div> diff --git a/files/de/web/css/margin-bottom/index.html b/files/de/web/css/margin-bottom/index.html new file mode 100644 index 0000000000..522efd3f45 --- /dev/null +++ b/files/de/web/css/margin-bottom/index.html @@ -0,0 +1,87 @@ +--- +title: margin-bottom +slug: Web/CSS/margin-bottom +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/margin-bottom +--- +<p>{{ CSSRef() }}</p> +<h2 id="Übersicht">Übersicht</h2> +<p>Die <code>margin-bottom</code> Eigenschaft legt den unteren Außenabstand eines Elements fest. Negative Werte sind erlaubt.</p> +<ul> + <li>Standardwert: <code>0</code></li> + <li>Anwendbar auf: alle Elemente, in Tabellen nur auf Elemente mit <a href="/de/CSS/display" title="de/CSS/display">display</a> <code>table</code>, <code>table-caption</code> und <code>inline-table</code></li> + <li>Vererbbar: Nein</li> + <li>Prozentwerte: beziehen sich immer auf die <a href="/de/CSS/width" title="de/CSS/width">Breite</a> des umschließenden Blocks.</li> + <li>Medium: visuell</li> + <li>berechneter Wert: eine Prozentzahl wie festgelegt oder die absolute Länge.</li> +</ul> +<h2 id="Syntax">Syntax</h2> +<pre class="eval">margin-bottom: <Längenangabe> | <Prozentzahl> | auto | inherit +</pre> +<h3 id="Werte">Werte</h3> +<dl> + <dt> + <Längenangabe></dt> + <dd> + Legt eine bestimmte <a href="/de/CSS/Einheiten#L.c3.a4ngen" title="de/CSS/Einheiten#L.c3.a4ngen">Länge</a> fest. Negative Werte sind erlaubt.</dd> + <dt> + <Prozentzahl></dt> + <dd> + Ein <a href="/de/CSS/Einheiten#Prozent" title="de/CSS/Einheiten#Prozent">prozentualer</a> Wert, der sich auf die Breite des umschließenden Blocks (<em>containing block</em>) bezieht. Negative Werte sind erlaubt.</dd> + <dt> + auto</dt> + <dd> + <code>auto</code> wird von einem passendem Wert ersetzt, wobei die horizontalen bzw. vertikalen Dimensionen berücksichtigt werden.</dd> + <dt> + inherit</dt> + <dd> + Der Wert des Elternelements wird geerbt.</dd> +</dl> +<h2 id="Beispiele">Beispiele</h2> +<pre>.content { margin-bottom: 5%; } +.sidebox { margin-bottom: 10px; } +.logo { margin-bottom: -5px; } +</pre> +<h2 id="Browser_Kompatibilität">Browser <span>Kompatibilität</span></h2> +<table class="standard-table"> + <tbody> + <tr> + <th>Browser</th> + <th>ab Version</th> + <th><code>auto</code> Wert</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>3.0</td> + <td>6.0 (strict mode)</td> + </tr> + <tr> + <td>Firefox (Gecko)</td> + <td>1.0 (1.0)</td> + <td>1.0 (1.0)</td> + </tr> + <tr> + <td>Opera</td> + <td>3.5</td> + <td>3.5</td> + </tr> + <tr> + <td>Safari (WebKit)</td> + <td>1.0 (85)</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +<h2 id="Spezifikation">Spezifikation</h2> +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#margin-properties" lang="en">CSS 2.1 Visual formatting #margin</a></li> +</ul> +<h2 id="Siehe_auch">Siehe auch</h2> +<ul> + <li><a href="/de/CSS/margin" title="de/CSS/margin"><code>margin</code></a>, <a href="/de/CSS/margin-right" title="de/CSS/margin-right"><code>margin-right</code></a>, <a href="/de/CSS/margin-top" title="de/CSS/margin-top"><code>margin-top</code></a>, <a href="/de/CSS/margin-left" title="de/CSS/margin-left"><code>margin-left</code></a></li> + <li><a href="/de/CSS/-moz-margin-start" title="de/CSS/-moz-margin-start"><code>-moz-margin-start</code></a>, <a href="/de/CSS/-moz-margin-end" title="de/CSS/-moz-margin-end"><code>-moz-margin-end</code></a></li> + <li><a href="/de/CSS/padding" title="de/CSS/padding"><code>padding</code></a></li> +</ul> +<p>{{ languages( { "en": "en/CSS/margin-bottom", "ja": "ja/CSS/margin-bottom" } ) }}</p> diff --git a/files/de/web/css/margin-left/index.html b/files/de/web/css/margin-left/index.html new file mode 100644 index 0000000000..e540e1f456 --- /dev/null +++ b/files/de/web/css/margin-left/index.html @@ -0,0 +1,87 @@ +--- +title: margin-left +slug: Web/CSS/margin-left +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/margin-left +--- +<p>{{ CSSRef() }}</p> +<h2 id="Übersicht">Übersicht</h2> +<p>Die <code>margin-left</code> Eigenschaft legt den linken Außenabstand eines Elements fest. Negative Werte sind erlaubt.</p> +<ul> + <li>Standardwert: <code>0</code></li> + <li>Anwendbar auf: alle Elemente, in Tabellen nur auf Elemente mit <a href="/de/CSS/display" title="de/CSS/display">display</a> <code>table</code>, <code>table-caption</code> und <code>inline-table</code></li> + <li>Vererbbar: Nein</li> + <li>Prozentwerte: beziehen sich immer auf die <a href="/de/CSS/width" title="de/CSS/width">Breite</a> des umschließenden Blocks.</li> + <li>Medium: visuell</li> + <li>berechneter Wert: eine Prozentzahl wie festgelegt oder die absolute Länge.</li> +</ul> +<h2 id="Syntax">Syntax</h2> +<pre class="eval">margin-left: <Längenangabe> | <Prozentzahl> | auto | inherit +</pre> +<h3 id="Werte">Werte</h3> +<dl> + <dt> + <Längenangabe></dt> + <dd> + Legt eine bestimmte <a href="/de/CSS/Einheiten#L.c3.a4ngen" title="de/CSS/Einheiten#L.c3.a4ngen">Länge</a> fest. Negative Werte sind erlaubt.</dd> + <dt> + <Prozentzahl></dt> + <dd> + Ein <a href="/de/CSS/Einheiten#Prozent" title="de/CSS/Einheiten#Prozent">prozentualer</a> Wert, der sich auf die Breite des umschließenden Blocks (<em>containing block</em>) bezieht. Negative Werte sind erlaubt.</dd> + <dt> + auto</dt> + <dd> + <code>auto</code> wird von einem passendem Wert ersetzt, wobei die horizontalen bzw. vertikalen Dimensionen berücksichtigt werden.</dd> + <dt> + inherit</dt> + <dd> + Der Wert des Elternelements wird geerbt.</dd> +</dl> +<h2 id="Beispiele">Beispiele</h2> +<pre>.content { margin-left: 5%; } +.sidebox { margin-left: 10px; } +.logo { margin-left: -5px; } +</pre> +<h2 id="Browser_Kompatibilität">Browser <span>Kompatibilität</span></h2> +<table class="standard-table"> + <tbody> + <tr> + <th>Browser</th> + <th>ab Version</th> + <th><code>auto</code> Wert</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>3.0</td> + <td>6.0 (strict mode)</td> + </tr> + <tr> + <td>Firefox (Gecko)</td> + <td>1.0 (1.0)</td> + <td>1.0 (1.0)</td> + </tr> + <tr> + <td>Opera</td> + <td>3.5</td> + <td>3.5</td> + </tr> + <tr> + <td>Safari (WebKit)</td> + <td>1.0 (85)</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +<h2 id="Spezifikation">Spezifikation</h2> +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#margin-properties" lang="en">CSS 2.1 Visual formatting #margin</a></li> +</ul> +<h2 id="Siehe_auch">Siehe auch</h2> +<ul> + <li><a href="/de/CSS/margin" title="de/CSS/margin"><code>margin</code></a>, <a href="/de/CSS/margin-right" title="de/CSS/margin-right"><code>margin-right</code></a>, <a href="/de/CSS/margin-bottom" title="de/CSS/margin-bottom"><code>margin-bottom</code></a>, <a href="/de/CSS/margin-top" title="de/CSS/margin-top"><code>margin-top</code></a></li> + <li><a href="/de/CSS/-moz-margin-start" title="de/CSS/-moz-margin-start"><code>-moz-margin-start</code></a>, <a href="/de/CSS/-moz-margin-end" title="de/CSS/-moz-margin-end"><code>-moz-margin-end</code></a></li> + <li><a href="/de/CSS/padding" title="de/CSS/padding"><code>padding</code></a></li> +</ul> +<p>{{ languages( { "en": "en/CSS/margin-left", "ja": "ja/CSS/margin-left" } ) }}</p> diff --git a/files/de/web/css/margin-right/index.html b/files/de/web/css/margin-right/index.html new file mode 100644 index 0000000000..e651d4a53d --- /dev/null +++ b/files/de/web/css/margin-right/index.html @@ -0,0 +1,87 @@ +--- +title: margin-right +slug: Web/CSS/margin-right +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/margin-right +--- +<p>{{ CSSRef() }}</p> +<h2 id="Übersicht">Übersicht</h2> +<p>Die <code>margin-right</code> Eigenschaft legt den rechten Außenabstand eines Elements fest. Negative Werte sind erlaubt.</p> +<ul> + <li>Standardwert: <code>0</code></li> + <li>Anwendbar auf: alle Elemente, in Tabellen nur auf Elemente mit <a href="/de/CSS/display" title="de/CSS/display">display</a> <code>table</code>, <code>table-caption</code> und <code>inline-table</code></li> + <li>Vererbbar: Nein</li> + <li>Prozentwerte: beziehen sich immer auf die <a href="/de/CSS/width" title="de/CSS/width">Breite</a> des umschließenden Blocks.</li> + <li>Medium: visuell</li> + <li>berechneter Wert: eine Prozentzahl wie festgelegt oder die absolute Länge.</li> +</ul> +<h2 id="Syntax">Syntax</h2> +<pre class="eval">margin-right: <Längenangabe> | <Prozentzahl> | auto | inherit +</pre> +<h3 id="Werte">Werte</h3> +<dl> + <dt> + <Längenangabe></dt> + <dd> + Legt eine bestimmte <a href="/de/CSS/Einheiten#L.c3.a4ngen" title="de/CSS/Einheiten#L.c3.a4ngen">Länge</a> fest. Negative Werte sind erlaubt.</dd> + <dt> + <Prozentzahl></dt> + <dd> + Ein <a href="/de/CSS/Einheiten#Prozent" title="de/CSS/Einheiten#Prozent">prozentualer</a> Wert, der sich auf die Breite des umschließenden Blocks (<em>containing block</em>) bezieht. Negative Werte sind erlaubt.</dd> + <dt> + auto</dt> + <dd> + <code>auto</code> wird von einem passendem Wert ersetzt, wobei die horizontalen bzw. vertikalen Dimensionen berücksichtigt werden.</dd> + <dt> + inherit</dt> + <dd> + Der Wert des Elternelements wird geerbt.</dd> +</dl> +<h2 id="Beispiele">Beispiele</h2> +<pre>.content { margin-right: 5%; } +.sidebox { margin-right: 10px; } +.logo { margin-right: -5px; } +</pre> +<h2 id="Browser_Kompatibilität">Browser <span>Kompatibilität</span></h2> +<table class="standard-table"> + <tbody> + <tr> + <th>Browser</th> + <th>ab Version</th> + <th><code>auto</code> Wert</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>3.0</td> + <td>6.0 (strict mode)</td> + </tr> + <tr> + <td>Firefox (Gecko)</td> + <td>1.0 (1.0)</td> + <td>1.0 (1.0)</td> + </tr> + <tr> + <td>Opera</td> + <td>3.5</td> + <td>3.5</td> + </tr> + <tr> + <td>Safari (WebKit)</td> + <td>1.0 (85)</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +<h2 id="Spezifikation">Spezifikation</h2> +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#margin-properties" lang="en">CSS 2.1 Visual formatting #margin</a></li> +</ul> +<h2 id="Siehe_auch">Siehe auch</h2> +<ul> + <li><a href="/de/CSS/margin" title="de/CSS/margin"><code>margin</code></a>, <a href="/de/CSS/margin-top" title="de/CSS/margin-top"><code>margin-top</code></a>, <a href="/de/CSS/margin-bottom" title="de/CSS/margin-bottom"><code>margin-bottom</code></a>, <a href="/de/CSS/margin-left" title="de/CSS/margin-left"><code>margin-left</code></a></li> + <li><a href="/de/CSS/-moz-margin-start" title="de/CSS/-moz-margin-start"><code>-moz-margin-start</code></a>, <a href="/de/CSS/-moz-margin-end" title="de/CSS/-moz-margin-end"><code>-moz-margin-end</code></a></li> + <li><a href="/de/CSS/padding" title="de/CSS/padding"><code>padding</code></a></li> +</ul> +<p>{{ languages( { "en": "en/CSS/margin-right", "ja": "ja/CSS/margin-right" } ) }}</p> diff --git a/files/de/web/css/margin-top/index.html b/files/de/web/css/margin-top/index.html new file mode 100644 index 0000000000..daa9b03ad8 --- /dev/null +++ b/files/de/web/css/margin-top/index.html @@ -0,0 +1,87 @@ +--- +title: margin-top +slug: Web/CSS/margin-top +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/margin-top +--- +<p>{{ CSSRef() }}</p> +<h2 id="Übersicht">Übersicht</h2> +<p>Die <code>margin-top</code> Eigenschaft legt den oberen Außenabstand eines Elements fest. Negative Werte sind erlaubt.</p> +<ul> + <li>Standardwert: <code>0</code></li> + <li>Anwendbar auf: alle Elemente, in Tabellen nur auf Elemente mit <a href="/de/CSS/display" title="de/CSS/display">display</a> <code>table</code>, <code>table-caption</code> und <code>inline-table</code></li> + <li>Vererbbar: Nein</li> + <li>Prozentwerte: beziehen sich immer auf die <a href="/de/CSS/width" title="de/CSS/width">Breite</a> des umschließenden Blocks.</li> + <li>Medium: visuell</li> + <li>berechneter Wert: eine Prozentzahl wie festgelegt oder die absolute Länge.</li> +</ul> +<h2 id="Syntax">Syntax</h2> +<pre class="eval">margin-top: <Längenangabe> | <Prozentzahl> | auto | inherit +</pre> +<h3 id="Werte">Werte</h3> +<dl> + <dt> + <Längenangabe></dt> + <dd> + Legt eine bestimmte <a href="/de/CSS/Einheiten#L.c3.a4ngen" title="de/CSS/Einheiten#L.c3.a4ngen">Länge</a> fest. Negative Werte sind erlaubt.</dd> + <dt> + <Prozentzahl></dt> + <dd> + Ein <a href="/de/CSS/Einheiten#Prozent" title="de/CSS/Einheiten#Prozent">prozentualer</a> Wert, der sich auf die Breite des umschließenden Blocks (<em>containing block</em>) bezieht. Negative Werte sind erlaubt.</dd> + <dt> + auto</dt> + <dd> + <code>auto</code> wird von einem passendem Wert ersetzt, wobei die horizontalen bzw. vertikalen Dimensionen berücksichtigt werden.</dd> + <dt> + inherit</dt> + <dd> + Der Wert des Elternelements wird geerbt.</dd> +</dl> +<h2 id="Beispiele">Beispiele</h2> +<pre>.content { margin-top: 5%; } +.sidebox { margin-top: 10px; } +.logo { margin-top: -5px; } +</pre> +<h2 id="Browser_Kompatibilität">Browser <span>Kompatibilität</span></h2> +<table class="standard-table"> + <tbody> + <tr> + <th>Browser</th> + <th>ab Version</th> + <th><code>auto</code> Wert</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>3.0</td> + <td>6.0 (strict mode)</td> + </tr> + <tr> + <td>Firefox (Gecko)</td> + <td>1.0 (1.0)</td> + <td>1.0 (1.0)</td> + </tr> + <tr> + <td>Opera</td> + <td>3.5</td> + <td>3.5</td> + </tr> + <tr> + <td>Safari (WebKit)</td> + <td>1.0 (85)</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +<h2 id="Spezifikation">Spezifikation</h2> +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#margin-properties" lang="en">CSS 2.1 Visual formatting #margin</a></li> +</ul> +<h2 id="Siehe_auch">Siehe auch</h2> +<ul> + <li><a href="/de/CSS/margin" title="de/CSS/margin"><code>margin</code></a>, <a href="/de/CSS/margin-right" title="de/CSS/margin-right"><code>margin-right</code></a>, <a href="/de/CSS/margin-bottom" title="de/CSS/margin-bottom"><code>margin-bottom</code></a>, <a href="/de/CSS/margin-left" title="de/CSS/margin-left"><code>margin-left</code></a></li> + <li><a href="/de/CSS/-moz-margin-start" title="de/CSS/-moz-margin-start"><code>-moz-margin-start</code></a>, <a href="/de/CSS/-moz-margin-end" title="de/CSS/-moz-margin-end"><code>-moz-margin-end</code></a></li> + <li><a href="/de/CSS/padding" title="de/CSS/padding"><code>padding</code></a></li> +</ul> +<p>{{ languages( { "en": "en/CSS/margin-top", "ja": "ja/CSS/margin-top" } ) }}</p> diff --git a/files/de/web/css/margin/index.html b/files/de/web/css/margin/index.html new file mode 100644 index 0000000000..dac915749a --- /dev/null +++ b/files/de/web/css/margin/index.html @@ -0,0 +1,121 @@ +--- +title: margin +slug: Web/CSS/margin +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/margin +--- +<p>{{ CSSRef() }}</p> +<h2 id="Übersicht">Übersicht</h2> +<p>Die <code>margin</code> Eigenschaft ist eine Kurzform für die Außenabstände aller vier Seiten eines Elements.</p> +<ul> + <li>Standardwert: <code>0</code></li> + <li>Anwendbar auf: alle Elemente, in Tabellen nur auf Elemente mit <a href="/de/CSS/display" title="de/CSS/display">display</a> <code>table</code>, <code>table-caption</code> und <code>inline-table</code></li> + <li>Vererbbar: Nein</li> + <li>Prozentwerte: beziehen sich immer auf die <a href="/de/CSS/width" title="de/CSS/width">Breite</a> des umschließenden Blocks.</li> + <li>Medium: visuell</li> + <li>berechneter Wert: siehe einzelne Eigenschaften</li> +</ul> +<h2 id="Syntax">Syntax</h2> +<pre class="eval">margin: <Längenwert>{1,4} | <Prozentzahl>{1,4} | inherit | auto +</pre> +<h3 id="Werte">Werte</h3> +<p>Es werden bis zu vier der folgenden Werte akzeptiert:</p> +<dl> + <dt> + <Längenangabe></dt> + <dd> + Legt eine bestimmte <a href="/de/CSS/Einheiten#L.c3.a4ngen" title="de/CSS/Einheiten#L.c3.a4ngen">Länge</a> fest. Negative Werte sind erlaubt.</dd> + <dt> + <Prozentzahl></dt> + <dd> + Ein <a href="/de/CSS/Einheiten#Prozent" title="de/CSS/Einheiten#Prozent">prozentualer</a> Wert, der sich auf die Breite des umschließenden Blocks (<em>containing block</em>) bezieht. Negative Werte sind erlaubt.</dd> + <dt> + auto</dt> + <dd> + <code>auto</code> wird von einem passendem Wert ersetzt, wobei die horizontalen bzw. vertikalen Dimensionen berücksichtigt werden.<br> + Bei <code>div { width:50%; margin:0 auto; }</code> wird das div Element horizontal zentriert.</dd> + <dt> + inherit</dt> + <dd> + Der Wert des Elternelements wird geerbt.</dd> + <dt> + Ein Wert</dt> + <dd> + Gilt für alle vier Seiten.</dd> + <dt> + Zwei Werte</dt> + <dd> + Der erste Wert bestimmt die <a href="/de/CSS/margin-top" title="de/CSS/margin-top">oberen</a> und <a href="/de/CSS/margin-bottom" title="de/CSS/margin-bottom">unteren</a> Abstände, der zweite Wert legt die Abstände <a href="/de/CSS/margin-right" title="de/CSS/margin-right">rechts</a> und <a href="/de/CSS/margin-left" title="de/CSS/margin-left">links</a> fest.</dd> + <dt> + Drei Werte</dt> + <dd> + Der erste Wert bestimmt den <a href="/de/CSS/margin-top" title="de/CSS/margin-top">oberen</a> Abstand, der zweite Wert legt die Abstände für <a href="/de/CSS/margin-right" title="de/CSS/margin-right">rechts</a> und <a href="/de/CSS/margin-left" title="de/CSS/margin-left">links</a> zusammen fest und der dritte Wert bestimmt den <a href="/de/CSS/margin-bottom" title="de/CSS/margin-bottom">unteren</a> Abstand.</dd> + <dt> + Vier Werte</dt> + <dd> + Für jede Seite können die Abstände einzeln festgelegt werden. In der Reihenfolge: <a href="/de/CSS/margin-top" title="de/CSS/margin-top">oben</a>, <a href="/de/CSS/margin-right" title="de/CSS/margin-right">rechts</a>, <a href="/de/CSS/margin-bottom" title="de/CSS/margin-bottom">unten</a>, <a href="/de/CSS/margin-left" title="de/CSS/margin-left">links</a>.</dd> +</dl> +<h2 id="Beispiele">Beispiele</h2> +<pre>margin: 5%; /* 5% Abstand auf allen Seiten */ + +margin: 10px; /* 10px Abstand auf allen Seiten */ + +margin: 1.6em 20px; /* 1.6em Abstand für oben und unten, 20px Abstand für rechts und links */ + +margin: 10px 3% 1em; /* oben 10px, links und rechts 3%, unten 1em */ + +margin: 10px 3px 30px 5px; /* oben 10px, rechts 3px, unten 30px, links 5px */ + +margin: 1em auto; /* 1em Abstand oben und unten; die Box wird horizontal zentriert */ + +margin: auto; /* Die Box wird horizontal zentriert, kein Abstand (0) oben und unten */ +</pre> +<pre style="margin: auto; background: gold; width: 66%;">margin: auto; +background: gold; +width: 66%;</pre> +<pre style="margin: -1em 0 100px -40px; background: plum; width: 20em;">margin: -1em 0 100px -40px; +background: plum; +width: 20em</pre> +<h2 id="Browser_Kompatibilität">Browser <span>Kompatibilität</span></h2> +<table class="standard-table"> + <tbody> + <tr> + <th>Browser</th> + <th>ab Version</th> + <th><code>auto</code> Wert</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>3.0</td> + <td>6.0 (strict mode)</td> + </tr> + <tr> + <td>Firefox (Gecko)</td> + <td>1.0 (1.0)</td> + <td>1.0 (1.0)</td> + </tr> + <tr> + <td>Opera</td> + <td>3.5</td> + <td>3.5</td> + </tr> + <tr> + <td>Safari (WebKit)</td> + <td>1.0 (85)</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +<h2 id="Spezifikation">Spezifikation</h2> +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#margin-properties" lang="en">CSS 2.1 Visual formatting #margin</a></li> +</ul> +<h2 id="Siehe_auch">Siehe auch</h2> +<ul> + <li><a href="/de/CSS/margin-top" title="de/CSS/margin-top"><code>margin-top</code></a>, <a href="/de/CSS/margin-right" title="de/CSS/margin-right"><code>margin-right</code></a>, <a href="/de/CSS/margin-bottom" title="de/CSS/margin-bottom"><code>margin-bottom</code></a>, <a href="/de/CSS/margin-left" title="de/CSS/margin-left"><code>margin-left</code></a></li> + <li><a href="/de/CSS/-moz-margin-start" title="de/CSS/-moz-margin-start"><code>-moz-margin-start</code></a>, <a href="/de/CSS/-moz-margin-end" title="de/CSS/-moz-margin-end"><code>-moz-margin-end</code></a></li> + <li><a href="/de/CSS/padding" title="de/CSS/padding"><code>padding</code></a></li> +</ul> +<p>{{ languages( { "en": "en/CSS/margin", "ja": "ja/CSS/margin" } ) }}</p> diff --git a/files/de/web/css/mask/index.html b/files/de/web/css/mask/index.html new file mode 100644 index 0000000000..900127ae1b --- /dev/null +++ b/files/de/web/css/mask/index.html @@ -0,0 +1,96 @@ +--- +title: mask +slug: Web/CSS/mask +tags: + - CSS + - Layout + - NeedsBrowserCompatibility + - Referenz + - SVG + - Web +translation_of: Web/CSS/mask +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p><span class="seoSummary">The <code>mask</code> property in CSS allows users to alter the visibility of an item by either partially or fully hiding the item. This is accomplished by either masking or clipping the image at specific points.</span></p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">/* Schlüsselwortwerte */ +mask: none; + +/* Bildwerte */ +mask: url(mask.png); /* Pixelbild, das als Maske verwendet wird */ +mask: url(masks.svg#star); /* Element mit SVG-Grafik, die als Maske verwendet wird */ + +/* Kombinierte Werte */ +mask: url(masks.svg#star) luminance; /* Element mit SVG-Grafik, die als Helligkeitsmaske verwendet wird */ +mask: url(masks.svg#star) 40px 20px; /* Element mit SVG-Grafik, die als Maske verwendet wird, die 40px vom oberen Rand und 20px vom linken Rand positioniert ist */ +mask: url(masks.svg#star) 0 0/50px 50px; /* Element mit SVG-Grafik, die als Maske mit einer Breite und Höhe von 50px verwendet wird */ +mask: url(masks.svg#star) repeat-x; /* Element mit SVG-Grafik, die als horizontal wiederholte Maske verwendet wird */ +mask: url(masks.svg#star) stroke-box; /* Element mit SVG-Grafik, die als Maske verwendet wird, die sich bis zur Box erstreckt, die von der Kontur eingeschlossen wird */ +mask: url(masks.svg#star) exclude; /* Element mit SVG-Grafik, die als Maske verwendet wird und deren nicht überlappende Teile mit dem Hintergrund kombiniert werden */ + +/* Globale Werte */ +mask: inherit; +mask: initial; +mask: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<p>Falls der Wert ein URL Wert ist, wird das Element als SVG-Maske verwendet, dass durch die URI referenziert wird.</p> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush: css">.target { + mask: url(#c1); +} + +.anothertarget { + mask: url(resources.svg#c1); +} +</pre> + +<h2 id="Spezifikationen">Spezifikationen</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 Masks", "#the-mask", 'mask')}}</td> + <td>{{Spec2("CSS Masks")}}</td> + <td>Erweitert die Benutzung auf HTML Elemente.<br> + Erweitert die Syntax, indem sie als eine Kurzschreibweise für die neuen <code>mask-*</code> Eigenschaften in dieser Spezifikation definiert wird.</td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'masking.html#MaskProperty', 'mask')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.properties.mask")}} + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{Cssxref("clip-path")}}, {{Cssxref("filter")}}</li> + <li><a href="/de/docs/SVG_Effekte_auf_HTML_Inhalte_anwenden">SVG Effekte auf HTML Inhalte anwenden</a></li> + <li><a href="/de/docs/Web/SVG">SVG</a></li> +</ul> diff --git a/files/de/web/css/max-height/index.html b/files/de/web/css/max-height/index.html new file mode 100644 index 0000000000..51205487ba --- /dev/null +++ b/files/de/web/css/max-height/index.html @@ -0,0 +1,111 @@ +--- +title: max-height +slug: Web/CSS/max-height +tags: + - CSS + - CSS Eigenschaft + - Layout + - NeedsMobileBrowserCompatibility + - Referenz + - Web +translation_of: Web/CSS/max-height +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>max-height</code> Eigenschaft wird verwendet, um die maximale Höhe eines Elements festzulegen. Das verhindert, dass der benutzte Wert der {{ Cssxref("height") }} Eigenschaft größer wird als der festgelegte Wert von <code>max-height</code>.</p> + +<p>{{ Cssxref("max-height") }} überschreibt {{cssxref("height")}}, aber {{ Cssxref("min-height") }} überschreibt {{ Cssxref("max-height") }}.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">/* <length> Wert */ +max-height: 3.5em; + +/* <percentage> Wert */ +max-height: 75%; + +/* Schlüsselwortwerte */ +max-height: none; +max-height: max-content; +max-height: min-content; +max-height: fit-content; +max-height: fill-available; + +/* Globale Werte */ +max-height: inherit; +max-height: initial; +max-height: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code><length></code></dt> + <dd>Eine feste Maximalhöhe. Siehe {{cssxref("<length>")}} für mögliche Einheiten.</dd> + <dt><code><percentage></code></dt> + <dd>Der {{cssxref("<percentage>")}} Wert wird unter Berücksichtigung der Höhe des beinhaltenden Blocks berechnet. Falls die Höhe des beinhaltenden Blocks nicht explizit angegeben wurde, wird der prozentuale Wert als <code>none</code> behandelt.</dd> + <dt><code>none</code></dt> + <dd>Das Element verfügt über keine maximale Höhe.</dd> + <dt><code>max-content</code> {{experimental_inline()}}</dt> + <dd>Die innere bevorzugte Höhe.</dd> + <dt><code>min-content</code> {{experimental_inline()}}</dt> + <dd>Die innere Minimalhöhe.</dd> + <dt><code>fill-available</code> {{experimental_inline()}}</dt> + <dd>Die Höhe des beinhaltenden Blocks minus dem horizontalen Außenabstand, Rand und Innenabstand. Einige Browser implementieren hierfür das veraltete Schlüsselwort <code>available</code>.</dd> + <dt><code>fit-content</code> {{experimental_inline()}}</dt> + <dd>Hat die gleiche Bedeutung wie <code>max-content.</code></dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush: css">table { max-height: 75%; } + +form { max-height: none; } +</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Anmerkung</th> + </tr> + <tr> + <td>{{SpecName('CSS3 Sizing', '#width-height-keywords', 'max-height')}}</td> + <td>{{Spec2('CSS3 Sizing')}}</td> + <td>Fügt die Schlüsselwörter <code>max-content</code>, <code>min-content</code>, <code>fit-content</code> und <code>fill-available</code> hinzu.<br> + <em>Die Entwürfe zu CSS3 Box und CSS3 Writing Modes definierten zuvor beide diese Schlüsselwörter. Diese Entwürfe werden durch diese Spezifikation ersetzt.</em></td> + </tr> + <tr> + <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'max-height')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Definiert <code>max-height</code> als animierbar.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'visudet.html#min-max-heights', 'max-height')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.properties.max-height")}} + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/CSS/Boxmodell" title="en/CSS/box_model">Das Boxmodell</a></li> + <li>{{cssxref("max-width")}}, {{cssxref("box-sizing")}}, {{cssxref("height")}}, {{cssxref("min-height")}}</li> +</ul> diff --git a/files/de/web/css/max-width/index.html b/files/de/web/css/max-width/index.html new file mode 100644 index 0000000000..e8c6d3c08d --- /dev/null +++ b/files/de/web/css/max-width/index.html @@ -0,0 +1,139 @@ +--- +title: max-width +slug: Web/CSS/max-width +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/max-width +--- +<p>{{ CSSRef() }}</p> +<h2 id="Übersicht">Übersicht</h2> +<p>Die <code>max-width</code> Eigenschaft wird verwendet, um die maximale Breite eines Elements festzulegen. Das verhindert, dass der benutzte Wert der <a href="/de/CSS/width" title="de/CSS/width"><code>width</code></a> Eigenschaft nicht größer wird als der festgelegte Wert von <code>max-width</code>.</p> +<p>Hinweis: <code>max-width</code> überschreibt <a href="/de/CSS/width" title="de/CSS/width"><code>width</code></a>, allerdings überschreibt <a href="/de/CSS/min-width" title="de/CSS/min-width"><code>min-width</code></a> auch <code>max-width</code>.</p> +<ul> + <li>Standardwert: <code>none</code></li> + <li>Anwendbar auf: Blockelemente und ersetzte Elemente, für <table> siehe <a href="/de/CSS/max-width#Browser_Kompatibilit.c3.a4t" title="de/CSS/max-width#Browser_Kompatibilit.c3.a4t">Browser Kompatibilität</a></li> + <li>Vererbbar: Nein</li> + <li>Prozentwerte: beziehen sich auf die Breite des umschließenden Blocks</li> + <li>Medium: visuell</li> + <li>berechneter Wert: die Prozentzahl wie festgelegt, die absolute Länge oder <code>none</code></li> +</ul> +<h2 id="Syntax">Syntax</h2> +<pre class="eval">max-width: <Längenangabe> | <Prozentzahl> | none | -moz-max-content | -moz-min-content | -moz-fit-content | -moz-available | inherit +</pre> +<h3 id="Werte">Werte</h3> +<dl> + <dt> + <Längenangabe></dt> + <dd> + Siehe <a href="/de/CSS/Einheiten#L.c3.a4ngen" title="MDC">Länge</a> für mögliche Einheiten.</dd> + <dt> + Prozentzahl</dt> + <dd> + Eine <a href="/de/CSS/Einheiten#Prozent" title="MDC">prozentuale</a> Angabe, die sich auf die Breite des umschließenden Blocks bezieht.</dd> + <dt> + none</dt> + <dd> + Das Element verfügt über keine maximale Breite.</dd> + <dt> + inherit</dt> + <dd> + Der Wert des Elternelements wird geerbt.</dd> +</dl> +<h4 id="Mozilla_Erweiterungen">Mozilla Erweiterungen</h4> +<dl> + <dt> + -moz-max-content</dt> + <dd> + {{ gecko_minversion_inline("1.9") }} Bevorzugte intrinsische Breite.</dd> + <dt> + -moz-min-content</dt> + <dd> + {{ gecko_minversion_inline("1.9") }} Minimale intrinsische Breite.</dd> + <dt> + -moz-available</dt> + <dd> + {{ gecko_minversion_inline("1.9") }} Die Breite des umschließenden Blocks minus horizontalen margin, padding und border Werten.</dd> + <dt> + -moz-fit-content</dt> + <dd> + {{ gecko_minversion_inline("1.9") }} Gleichbedeutend zu <code>-moz-max-content.</code></dd> +</dl> +<h2 id="Beispiele">Beispiele</h2> +<pre>body { max-width: 40em; } +table { max-width: 75%; } +form { max-width: none; } +</pre> +<p id="Beispiel_1_.7B.7B_gecko_minversion_inline(.221.9.22)_.7D.7D">Beispiel 1 {{ gecko_minversion_inline("1.9") }}</p> +<pre>p { background: gold } +</pre> +<p style="background: gold;">The Mozilla community produces a lot of great software.</p> +<p id="Beispiel_2_.7B.7B_gecko_minversion_inline(.221.9.22)_.7D.7D">Beispiel 2 {{ gecko_minversion_inline("1.9") }}</p> +<pre>p { background: lightgreen; + max-width: intrinsic; /* Safari/WebKit */ + max-width: -moz-max-content; /* Firefox/Gecko */ + } +</pre> +<p style="background: lightgreen; max-width: -moz-max-content;">The Mozilla community produces a lot of great software.</p> +<p id="Beispiel_3_.7B.7B_gecko_minversion_inline(.221.9.22)_.7D.7D">Beispiel 3 {{ gecko_minversion_inline("1.9") }}</p> +<pre>p { background: lightblue; max-width: -moz-min-content; } +</pre> +<p style="background: lightblue; max-width: -moz-min-content;">The Mozilla community produces a lot of great software.</p> +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> +<table class="standard-table"> + <tbody> + <tr> + <th>Browser</th> + <th>ab Version</th> + <th>auf <code><table></code> anwendbar</th> + <th colspan="2">intrinsische Breite</th> + <th colspan="2">minimale intrinsische Breite</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td><strong>7.0</strong></td> + <td>nein</td> + <td>---</td> + <td>---</td> + <td>---</td> + <td>---</td> + </tr> + <tr> + <td>Firefox (Gecko)</td> + <td><strong>1.0</strong> (1.0)</td> + <td>ja</td> + <td>3.0 (1.9)</td> + <td><code>-moz-max-content</code></td> + <td>3.0 (1.9)</td> + <td><code>-moz-min-content</code></td> + </tr> + <tr> + <td>Opera</td> + <td><strong>4.0</strong></td> + <td>ja</td> + <td>---</td> + <td>---</td> + <td>---</td> + <td>---</td> + </tr> + <tr> + <td>Safari (WebKit)</td> + <td><strong>2.0.2</strong> (416), vorher fehlerhaft</td> + <td>nein</td> + <td>2.0 (412) ?</td> + <td><code>intrinsic</code></td> + <td>---</td> + <td>---</td> + </tr> + </tbody> +</table> +<h2 id="Spezifikation">Spezifikation</h2> +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths" lang="en">CSS 2.1 Visual formatting #max-width</a></li> +</ul> +<h2 id="Siehe_auch">Siehe auch</h2> +<ul> + <li><a href="/de/CSS/width" title="de/CSS/width"><code>width</code></a>, <a href="/de/CSS/min-width" title="de/CSS/min-width"><code>min-width</code></a></li> + <li><a href="/de/CSS/height" title="de/CSS/height"><code>height</code></a>, <a href="/de/CSS/min-height" title="de/CSS/min-height"><code>min-height</code></a>, <a href="/de/CSS/max-height" title="de/CSS/max-height"><code>max-height</code></a></li> +</ul> +<p>{{ languages( { "en": "en/CSS/max-width", "es": "es/CSS/max-width", "fr": "fr/CSS/max-width" } ) }}</p> diff --git a/files/de/web/css/media_queries/index.html b/files/de/web/css/media_queries/index.html new file mode 100644 index 0000000000..c6da1617ab --- /dev/null +++ b/files/de/web/css/media_queries/index.html @@ -0,0 +1,76 @@ +--- +title: Media queries +slug: Web/CSS/Media_Queries +tags: + - CSS + - Media Queries + - NeedsTranslation + - Overview + - Reference + - TopicStub +translation_of: Web/CSS/Media_Queries +--- +<p>{{CSSRef}}</p> + +<p><strong>Media Queries</strong> is a module of CSS that defines expressions allowing to tailor presentations to a specific range of output devices without changing the content itself.</p> + +<h2 id="Reference">Reference</h2> + +<h3 id="At-rules">At-rules</h3> + +<div class="index"> +<ul> + <li>{{cssxref("@import")}}</li> + <li>{{cssxref("@media")}}</li> +</ul> +</div> + +<h2 id="Guides">Guides</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">Using media queries</a></dt> + <dd>Presents what media queries are doing and explains the possible expressions.</dd> + <dt><a href="/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries">Testing media queries</a></dt> + <dd>Explains how to test a media query programmatically, from JavaScript.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Conditional')}}</td> + <td>{{Spec2('CSS3 Conditional')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS4 Media Queries')}}</td> + <td>{{Spec2('CSS4 Media Queries')}}</td> + <td> + <p><br> + </p> + </td> + </tr> + <tr> + <td>{{SpecName('CSS3 Media Queries')}}</td> + <td>{{Spec2('CSS3 Media Queries')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'media.html')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + +{{Compat("css.at-rules.media")}} diff --git a/files/de/web/css/media_queries/using_media_queries/index.html b/files/de/web/css/media_queries/using_media_queries/index.html new file mode 100644 index 0000000000..f4d15a6c53 --- /dev/null +++ b/files/de/web/css/media_queries/using_media_queries/index.html @@ -0,0 +1,644 @@ +--- +title: Using media queries +slug: Web/CSS/Media_Queries/Using_media_queries +tags: + - NeedsTranslation +translation_of: Web/CSS/Media_Queries/Using_media_queries +--- +<p><span class="seoSummary">A <strong>media query</strong> consists of a media type and at least one expression that limits the style sheets' scope by using media features, such as width, height, and color. Media queries, added in <a href="/en-US/docs/CSS/CSS3" title="/en-US/docs/CSS/CSS3">CSS3</a>, let the presentation of content be tailored to a specific range of output devices without having to change the content itself.</span></p> + +<h2 id="Syntax">Syntax</h2> + +<p>Media queries consist of a <a class="internal" href="/en-US/docs/CSS/@media" title="/en-US/docs/CSS/@media">media type</a> and can, as of the CSS3 specification, contain one or more expressions, expressed as media features, which resolve to either true or false. The result of the query is true if the media type specified in the media query matches the type of device the document is being displayed on <strong>and</strong> all expressions in the media query are true.</p> + +<pre class="brush: html"><!-- CSS media query on a link element --> +<link rel="stylesheet" media="(max-width: 800px)" href="example.css" /> + +<!-- CSS media query within a stylesheet --> +<style> +@media (max-width: 600px) { + .facet_sidebar { + display: none; + } +} +</style></pre> + +<p>When a media query is true, the corresponding style sheet or style rules are applied, following the normal cascading rules. Style sheets with media queries attached to their <code><link></code> tags <a href="http://scottjehl.github.com/CSS-Download-Tests/" title="http://scottjehl.github.com/CSS-Download-Tests/">will still download</a> even if their media queries would return false (they will not apply, however).</p> + +<p>Unless you use the <code>not</code> or <code>only</code> operators, the media type is optional and the <code>all</code><span style="line-height: 1.572;"> </span><span style="line-height: 1.572;">type will be implied</span><span style="font-family: courier new,andale mono,monospace; line-height: normal;">.</span></p> + +<h3 id="Logical_operators">Logical operators</h3> + +<p>You can compose complex media queries using logical operators, including <code>not</code>, <code>and</code>, and <code>only</code>. The <code>and</code> operator is used for combining multiple <a href="#Media_features" title="#Media_features">media features</a> together into a single media query, requiring each chained feature to return true in order for the query to be true. The <code>not</code> operator is used to negate an entire media query. The <code>only</code> operator is used to apply a style only if the entire query matches, useful for preventing older browsers from applying selected styles. If you use the <code>not</code> or <code>only</code> operators, you <em>must</em> specify an explicit media type.</p> + +<p>You can also combine multiple media queries in a comma-separated list; if any of the media queries in the list is true, the entire media statement returns true. This is equivalent to an <code>or</code> operator.</p> + +<h4 id="and">and</h4> + +<p>The <code>and</code> keyword is used for combining multiple media features together, as well as combining media features with media types. A basic media query, a single media feature with the implied <code>all</code> media type, could look like this:</p> + +<pre class="brush: css">@media (min-width: 700px) { ... }</pre> + +<p>If, however, you wanted this to apply only if the display is in landscape, you could use an <code>and</code> operator to chain the media features together.</p> + +<pre class="brush: css">@media (min-width: 700px) and (orientation: landscape) { ... }</pre> + +<p>Now the above media query will only return true if the viewport is 700px wide or wider and the display is in landscape. If, however, you only wanted this to apply if the display in question was of the media type TV, you could chain these features with a media type using an <code>and</code> operator.</p> + +<pre class="brush: css">@media tv and (min-width: 700px) and (orientation: landscape) { ... }</pre> + +<p>Now, the above media query will only apply if the media type is TV, the viewport is 700px wide or wider, and the display is in landscape.</p> + +<h4 id="comma-separated_lists">comma-separated lists</h4> + +<p>Comma-separated lists behave like the logical operator <code>or</code> when used in media queries. When using a comma-separated list of media queries, if any of the media queries returns true, the styles or style sheets get applied. Each media query in a comma-separated list is treated as an individual query, and any operator applied to one media query does not affect the others. This means the comma-separated media queries can target different media features, types, and states.</p> + +<p>For instance, if you wanted to apply a set of styles if the viewing device either had a minimum width of 700px or was a handheld in landscape, you could write the following:</p> + +<pre class="brush: css">@media (min-width: 700px), handheld and (orientation: landscape) { ... }</pre> + +<p>Above, if I were on a <code>screen</code> device with a viewport width of 800px, the media statement would return true because the first part, interpreted as <code>@media all and (min-width: 700px)</code> would apply to my device and therefore return true, despite the fact that my <code>screen</code> device would fail the <code>handheld</code> media type check in the second media query. Likewise, if I were on a <code>handheld</code> device held in landscape with a viewport width of 500px, while the first media query would fail due to the viewport width, the second media query would succeed and thus the media statement would return true.</p> + +<h4 id="not">not</h4> + +<p>The <code>not</code> keyword applies to the whole media query and returns true if the media query would otherwise return false (such as <code>monochrome</code> on a color display or a screen width of 600px with a <code>min-width: 700px</code> feature query). A <code>not</code> will only negate the media query it is applied to and not to every media query if present in a comma-separated list of media queries. The <code>not</code> keyword cannot be used to negate an individual feature query, only an entire media query. <span style="line-height: 1.572;">For example, the </span><code style="font-size: 14px;">not</code><span style="line-height: 1.572;"> is evaluated last in the following query:</span></p> + +<pre class="brush: css" style="font-size: 14px;">@media not all and (monochrome) { ... } +</pre> + +<p>This means that the query is evaluated like this:</p> + +<pre class="brush: css" style="font-size: 14px;">@media not (all and (monochrome)) { ... } +</pre> + +<p>... rather than like this:</p> + +<pre class="brush: css" style="font-size: 14px;">@media (not all) and (monochrome) { ... }</pre> + +<p>As another example, look at the following media query:</p> + +<pre class="brush: css" style="font-size: 14px;">@media not screen and (color), print and (color) +</pre> + +<p>It is evaluated like this:</p> + +<pre class="brush: css" style="font-size: 14px;">@media (not (screen and (color))), print and (color)</pre> + +<h4 id="only">only</h4> + +<p><span style="line-height: 21px;">The </span><code style="font-size: 14px;">only</code><span style="line-height: 21px;"> keyword prevents older browsers that do not support media queries with media features from applying the given styles:</span></p> + +<pre class="brush: html"><link rel="stylesheet" media="only screen and (color)" href="example.css" /> +</pre> + +<h3 id="Pseudo-BNF_(for_those_of_you_that_like_that_kind_of_thing)">Pseudo-BNF (for those of you that like that kind of thing)</h3> + +<pre>media_query_list: <media_query> [, <media_query> ]* +media_query: [[only | not]? <media_type> [ and <expression> ]*] + | <expression> [ and <expression> ]* +expression: ( <media_feature> [: <value>]? ) +media_type: all | aural | braille | handheld | print | + projection | screen | tty | tv | embossed +media_feature: width | min-width | max-width + | height | min-height | max-height + | device-width | min-device-width | max-device-width + | device-height | min-device-height | max-device-height + | aspect-ratio | min-aspect-ratio | max-aspect-ratio + | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio + | color | min-color | max-color + | color-index | min-color-index | max-color-index + | monochrome | min-monochrome | max-monochrome + | resolution | min-resolution | max-resolution + | scan | grid</pre> + +<p>Media queries are case insensitive. Media queries involving unknown media types are always false.</p> + +<div class="note"><strong>Note:</strong> Parentheses are required around expressions; failing to use them is an error.</div> + +<h2 id="Media_features">Media features</h2> + +<p>Most media features can be prefixed with "min-" or "max-" to express "greater or equal to" or "less than or equal to" constraints. This avoids using the "<" and ">" symbols, which would conflict with HTML and XML. If you use a media feature without specifying a value, the expression resolves to true if the feature's value is non-zero.</p> + +<div class="note"><strong>Note:</strong> If a media feature doesn't apply to the device on which the browser is running, expressions involving that media feature are always false. For example, querying the aspect ratio of an aural device always results in false.</div> + +<h3 id="color">color</h3> + +<p><strong>Value:</strong> {{cssxref("<color>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br> + <strong>Accepts min/max prefixes:</strong> yes</p> + +<p>Indicates the number of bits per color component of the output device. If the device is not a color device, this value is zero.</p> + +<div class="note"><strong>Note:</strong> If the color components have different numbers of bits per color component, the smallest number is used. For example, if a display uses 5 bits for blue and red and 6 bits for green, then the device is considered to use 5 bits per color component. If the device uses indexed colors, the minimum number of bits per color component in the color table is used.</div> + +<h4 id="Examples">Examples</h4> + +<p>To apply a style sheet to all color devices:</p> + +<pre class="brush: css">@media all and (color) { ... } +</pre> + +<p>To apply a style sheet to devices with at least 4 bits per color component:</p> + +<pre class="brush: css">@media all and (min-color: 4) { ... } +</pre> + +<h3 id="color-index">color-index</h3> + +<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br> + <strong>Accepts min/max prefixes:</strong> yes</p> + +<p>Indicates the number of entries in the color look-up table for the output device.</p> + +<h4 id="Examples_2">Examples</h4> + +<p>To indicate that a style sheet should apply to all devices using indexed color, you can do:</p> + +<pre class="brush: css">@media all and (color-index) { ... } +</pre> + +<p>To apply a style sheet to indexed color devices with at least 256 colors:</p> + +<pre class="brush: html"><link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" /> +</pre> + +<h3 id="aspect-ratio">aspect-ratio</h3> + +<p><strong>Value:</strong> {{cssxref("<ratio>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}, {{cssxref("Medien/Taktil")}}<br> + <strong>Accepts min/max prefixes:</strong> yes</p> + +<p>Describes the aspect ratio of the targeted display area of the output device. This value consists of two positive integers separated by a slash ("/") character. This represents the ratio of horizontal pixels (first term) to vertical pixels (second term).</p> + +<h4 id="Example">Example</h4> + +<p>The following selects a special style sheet to use for when the display area is at least as wide as it is high.</p> + +<pre class="brush: css">@media screen and (min-aspect-ratio: 1/1) { ... }</pre> + +<p>This selects the style when the aspect ratio is either 1:1 or greater. In other words, these styles will only be applied when the viewing area is square or landscape.</p> + +<h3 id="device-aspect-ratio">device-aspect-ratio</h3> + +<p><strong>Value:</strong> {{cssxref("<ratio>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}, {{cssxref("Medien/Taktil")}}<br> + <strong>Accepts min/max prefixes:</strong> yes</p> + +<p>Describes the aspect ratio of the output device. This value consists of two positive integers separated by a slash ("/") character. This represents the ratio of horizontal pixels (first term) to vertical pixels (second term).</p> + +<h4 id="Example_2">Example</h4> + +<p>The following selects a special style sheet to use for widescreen displays.</p> + +<pre class="brush: css">@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }</pre> + +<p>This selects the style when the aspect ratio is either 16:9 or 16:10.</p> + +<h3 id="device-height">device-height</h3> + +<p><strong>Value:</strong> {{cssxref("<length>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}, {{cssxref("Medien/Taktil")}}<br> + <strong>Accepts min/max prefixes:</strong> yes</p> + +<p>Describes the height of the output device (meaning the entire screen or page, rather than just the rendering area, such as the document window).</p> + +<h4 id="Example_3">Example</h4> + +<p>To apply a style sheet to a document when displayed on a screen that is less than 800 pixels long, you can use this:</p> + +<pre class="brush: html"><link rel="stylesheet" media="screen and (max-device-height: 799px)" /> +</pre> + +<h3 id="device-width">device-width</h3> + +<p><strong>Value:</strong> {{cssxref("<length>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}, {{cssxref("Medien/Taktil")}}<br> + <strong>Accepts min/max prefixes:</strong> yes</p> + +<p>Describes the width of the output device (meaning the entire screen or page, rather than just the rendering area, such as the document window).</p> + +<h4 id="Example_4">Example</h4> + +<p>To apply a style sheet to a document when displayed on a screen that is less than 800 pixels wide, you can use this:</p> + +<pre class="brush: html" style="font-size: 14px;"><link rel="stylesheet" media="screen and (max-device-width: 799px)" /></pre> + +<h3 id="grid">grid</h3> + +<p><strong>Value:</strong> <code><mq-boolean></code> which is an {{cssxref("<integer>")}} that can only have the <code>0</code> and <code>1</code> value.<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> all<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>Determines whether the output device is a grid device or a bitmap device. If the device is grid-based (such as a TTY terminal or a phone display with only one font), the value is 1. Otherwise it is zero.</p> + +<h4 id="Example_5">Example</h4> + +<p>To apply a style to handheld devices with a 15-character or narrower display:</p> + +<pre class="brush: css">@media handheld and (grid) and (max-width: 15em) { ... } +</pre> + +<div class="note"><strong>Note:</strong> The "em" unit has a special meaning for grid devices; since the exact width of an "em" can't be determined, 1em is assumed to be the width of one grid cell horizontally, and the height of one cell vertically.</div> + +<h3 id="height">height</h3> + +<p><strong>Value:</strong> {{cssxref("<length>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}, {{cssxref("Medien/Taktil")}}<br> + <strong>Accepts min/max prefixes:</strong> yes</p> + +<p>The <code>height</code> media feature describes the height of the output device's rendering surface (such as the height of the viewport or of the page box on a printer).</p> + +<div class="note"><strong>Note:</strong> As the user resizes the window, Firefox switches style sheets as appropriate based on media queries using the <code>width</code> and <code>height</code> media features.</div> + +<h3 id="monochrome">monochrome</h3> + +<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br> + <strong>Accepts min/max prefixes:</strong> yes</p> + +<p>Indicates the number of bits per pixel on a monochrome (greyscale) device. If the device isn't monochrome, the device's value is 0.</p> + +<h4 id="Examples_3">Examples</h4> + +<p>To apply a style sheet to all monochrome devices:</p> + +<pre class="brush: css">@media all and (monochrome) { ... } +</pre> + +<p>To apply a style sheet to monochrome devices with at least 8 bits per pixel:</p> + +<pre class="brush: css">@media all and (min-monochrome: 8) { ... } +</pre> + +<h3 id="orientation">orientation</h3> + +<p><strong>Value:</strong> <code>landscape</code> | <code>portrait</code><br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>Indicates whether the viewport is in landscape (the display is wider than it is tall) or portrait (the display is taller than it is wide) mode.</p> + +<h4 id="Example_6">Example</h4> + +<p>To apply a style sheet only in portrait orientation:</p> + +<pre class="brush: css">@media all and (orientation: portrait) { ... }</pre> + +<div class="note"><strong>Note:</strong> This value does not correspond to actual device orientation. Opening the soft keyboard on most devices in portrait orientation will cause the viewport to become wider than it is tall, thereby causing the browser to use landscape styles instead of portrait.</div> + +<h3 id="resolution">resolution</h3> + +<p><strong>Value:</strong> {{cssxref("<resolution>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Bitmap", "bitmap")}}<br> + <strong>Accepts min/max prefixes:</strong> yes</p> + +<p>Indicates the resolution (pixel density) of the output device. The resolution may be specified in either dots per inch (dpi) or dots per centimeter (dpcm).</p> + +<h4 id="Example_7">Example</h4> + +<p>To apply a style sheet to devices with at least 300 dots per inch of resolution:</p> + +<pre class="brush: css">@media print and (min-resolution: 300dpi) { ... } +</pre> + +<p>To replace the old <span style="font-family: courier new,andale mono,monospace; line-height: normal;">(min-device-pixel-ratio: 2) </span>syntax:</p> + +<pre class="brush: css">@media screen and (min-resolution: 2dppx) { ... }</pre> + +<h3 id="scan">scan</h3> + +<p><strong>Value:</strong> <code>progressive</code> | <code>interlace</code><br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/TV")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>Describes the scanning process of television output devices.</p> + +<h4 id="Example_8">Example</h4> + +<p>To apply a style sheet only to progressive scanning televisions:</p> + +<pre class="brush: css">@media tv and (scan: progressive) { ... } +</pre> + +<h3 id="width">width</h3> + +<p><strong>Value:</strong> {{cssxref("<length>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}, {{cssxref("Medien/Taktil")}}<br> + <strong>Accepts min/max prefixes:</strong> yes</p> + +<p>The <code>width</code> media feature describes the width of the rendering surface of the output device (such as the width of the document window, or the width of the page box on a printer).</p> + +<div class="note"><strong>Note:</strong> As the user resizes the window, Firefox switches style sheets as appropriate based on media queries using the <code>width</code> and <code>height</code> media features.</div> + +<h4 id="Examples_4">Examples</h4> + +<p>If you want to specify a style sheet for handheld devices, or screen devices with a width greater than 20em, you can use this query:</p> + +<pre class="brush: css">@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... } +</pre> + +<p>This media query specifies a style sheet that applies to printed media wider than 8.5 inches:</p> + +<pre class="brush: html"><link rel="stylesheet" media="print and (min-width: 8.5in)" + href="http://foo.com/mystyle.css" /> +</pre> + +<p>This query specifies a style sheet that is usable when the viewport is between 500 and 800 pixels wide:</p> + +<pre class="brush: css">@media screen and (min-width: 500px) and (max-width: 800px) { ... } +</pre> + +<h2 id="Mozilla-specific_media_features">Mozilla-specific media features</h2> + +<p>Mozilla offers several Gecko-specific media features. Some of these may be proposed as official media features.</p> + +<p>{{ h3_gecko_minversion("-moz-images-in-menus", "1.9.2") }}</p> + +<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>If the device allows images to appear in menus, this is 1; otherwise, the value is 0. This corresponds to the {{ cssxref(":-moz-system-metric(images-in-menus)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> + +<p>{{ h3_gecko_minversion("-moz-mac-graphite-theme", "1.9.2") }}</p> + +<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>If the user has configured their device to use the "Graphite" appearance on Mac OS X, this is 1. If the user is using the standard blue appearance, or is not on Mac OS X, this is 0.</p> + +<p>This corresponds to the {{ cssxref(":-moz-system-metric(mac-graphite-theme)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> + +<p>{{ h3_gecko_minversion("-moz-maemo-classic", "1.9.2") }}</p> + +<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>If the user is using Maemo with the original theme, this is 1; if it's using the newer Fremantle theme, this is 0.</p> + +<p>This corresponds to the {{ cssxref(":-moz-system-metric(maemo-classic)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> + +<p>{{ h3_gecko_minversion("-moz-device-pixel-ratio", "2.0") }} {{ deprecated_inline("gecko&16") }}</p> + +<p><strong>Value:</strong> {{cssxref("<number>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br> + <strong>Accepts min/max prefixes:</strong> yes</p> + +<p>Gives the number of device pixels per CSS pixel.</p> + +<div class="geckoVersionNote"> +<p><strong>Do not use this feature. </strong></p> + +<p>Use the <code>resolution</code> feature with the <code>dppx</code> unit instead.<br> + <br> + <code>-moz-device-pixel-ratio</code> may be used for compatibility with Firefox older than 16 and <code>-webkit-device-pixel-ratio</code> with WebKit-based browsers that do not support <code>dppx</code>.</p> + +<p>Example:</p> + +<pre>@media (-webkit-min-device-pixel-ratio: 2), /* Webkit-based browsers */ + (min--moz-device-pixel-ratio: 2), /* Older Firefox browsers (prior to Firefox 16) */ + (min-resolution: 2dppx), /* The standard way */ + (min-resolution: 192dpi) /* dppx fallback */ </pre> + +<p>See this <a href="http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/" title="http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/">CSSWG article</a> for compatibility good practices regarding <code>resolution</code> and <code>dppx</code>.</p> +</div> + +<div class="note"><strong>Note</strong>: This media feature is also implemented by Webkit and by <a href="https://msdn.microsoft.com/en-us/library/ie/dn760733(v=vs.85).aspx">IE 11 for Windows Phone 8.1</a> as <span style="font-family: courier new;">-webkit-device-pixel-ratio</span>. The min and max prefixes as implemented by Gecko are named <span style="font-family: courier new;">min--moz-device-pixel-ratio</span> and <span style="font-family: courier new;">max--moz-device-pixel-ratio</span>; but the same prefixes as implemented by Webkit are named <span style="font-family: courier new;">-webkit-min-device-pixel-ratio</span> and <span style="font-family: courier new;">-webkit-max-device-pixel-ratio</span>.</div> + +<p>{{ h3_gecko_minversion("-moz-os-version", "25.0") }}</p> + +<p><strong>Value:</strong> <code>windows-xp</code> | <code>windows-vista</code> | <code>windows-win7</code> | <code>windows-win8 | windows-win10</code><br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>Indicates which operating system version is currently being used. Currently only implemented on Windows. Possible values are:</p> + +<ul> + <li><code>windows-xp</code></li> + <li><code>windows-vista</code></li> + <li><code>windows-win7</code></li> + <li><code>windows-win8</code></li> + <li><code>windows-win10</code></li> +</ul> + +<p>This is provided for application skins and other chrome code to be able to adapt to work well with the current operating system version.</p> + +<p>{{ h3_gecko_minversion("-moz-scrollbar-end-backward", "1.9.2") }}</p> + +<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>If the device's user interface displays a backward arrow button at the end of scrollbars, this is 1. Otherwise it's 0.</p> + +<p>This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-end-backward)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> + +<p>{{ h3_gecko_minversion("-moz-scrollbar-end-forward", "1.9.2") }}</p> + +<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>If the device's user interface displays a forward arrow button at the end of scrollbars, this is 1. Otherwise it's 0.</p> + +<p>This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-end-forward)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> + +<p>{{ h3_gecko_minversion("-moz-scrollbar-start-backward", "1.9.2") }}</p> + +<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>If the device's user interface displays a backward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.</p> + +<p>This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-start-backward)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> + +<p>{{ h3_gecko_minversion("-moz-scrollbar-start-forward", "1.9.2") }}</p> + +<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>If the device's user interface displays a forward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.</p> + +<p>This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-start-forward)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> + +<p>{{ h3_gecko_minversion("-moz-scrollbar-thumb-proportional", "1.9.2") }}</p> + +<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>If the device's user interface displays the thumb of scrollbars proportionally (that is, sized based on the percentage of the document that is visible), this is 1. Otherwise it's 0.</p> + +<p>This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-thumb-proportional)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> + +<p>{{ h3_gecko_minversion("-moz-touch-enabled", "1.9.2") }}</p> + +<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>If the device supports touch events (for a touch screen), this is 1. Otherwise it's 0.</p> + +<p>This corresponds to the {{ cssxref(":-moz-system-metric(touch-enabled)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> + +<h4 id="Example_9">Example</h4> + +<p>You might use this to render your buttons slightly larger, for example, if the user is on a touch-screen device, to make them more finger-friendly.</p> + +<p>{{ h3_gecko_minversion("-moz-windows-classic", "1.9.2") }}</p> + +<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>If the user is using Windows unthemed (in classic mode instead of using uxtheme), this is 1; otherwise it's 0.</p> + +<p>This corresponds to the {{ cssxref(":-moz-system-metric(windows-classic)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> + +<p>{{ h3_gecko_minversion("-moz-windows-compositor", "1.9.2") }}</p> + +<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>If the user is using Windows with the DWM compositor, this is 1; otherwise it's 0.</p> + +<p>This corresponds to the {{ cssxref(":-moz-system-metric(windows-compositor)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> + +<p>{{ h3_gecko_minversion("-moz-windows-default-theme", "1.9.2") }}</p> + +<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>If the user is currently using one of the default Windows themes (Luna, Royale, Zune, or Aero (including Vista Basic, Vista Advanced, and Aero Glass), this is 1. Otherwise it's 0.</p> + +<p>This corresponds to the {{ cssxref(":-moz-system-metric(windows-default-theme)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> + +<p>{{ h3_gecko_minversion("-moz-windows-glass", "21.0") }}</p> + +<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>If the user is using Windows Glass theme, this is 1; otherwise it's 0. Note that this only exists for Windows 7 and earlier.</p> + +<p>{{ h3_gecko_minversion("-moz-windows-theme", "2.0") }}</p> + +<p><strong>Value:</strong> <code>aero</code> | <code>luna-blue</code> | <code>luna-olive</code> | <code>luna-silver</code> | <code>royale</code> | <code>generic</code> | <code>zune</code><br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>Indicates which Windows theme is currently being used. Only available on Windows. Possible values are:</p> + +<ul> + <li><code>aero</code></li> + <li><code>luna-blue</code></li> + <li><code>luna-olive</code></li> + <li><code>luna-silver</code></li> + <li><code>royale</code></li> + <li><code>generic</code></li> + <li><code>zune</code></li> +</ul> + +<p>This is provided for application skins and other chrome code to be able to adapt to work well with the current Windows theme.</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatChrome("21") }}</td> + <td>{{ CompatGeckoDesktop("1.9.1") }}</td> + <td>{{ CompatIE("9.0") }}</td> + <td>{{ CompatOpera("9") }}</td> + <td>{{ CompatSafari("4") }}</td> + </tr> + <tr> + <td>grid</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }} [1]</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>resolution</td> + <td>{{ CompatChrome("29") }}</td> + <td>{{ CompatGeckoDesktop("1.9.1") }} [2]<br> + {{ CompatGeckoDesktop("8.0") }} [3]</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>scan</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }} [4]</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] <code>grid</code> media type is not supported</p> + +<p>[2] Supports {{cssxref("<integer>")}} values;</p> + +<p>[3] Supports {{cssxref("<number>")}} values, as per the spec.</p> + +<p>[4] <code>tv</code> media type is not supported</p> + +<p> </p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/css3-mediaqueries/" title="http://www.w3.org/TR/css3-mediaqueries/">CSS 3 media query specification</a></li> + <li><a class="internal" href="/en-US/docs/CSS/@media" title="En/CSS/@media">Media types</a></li> + <li><a href="/en-US/docs/CSS/Using_media_queries_from_code" title="en/CSS/Using media queries from code">Using media queries from code</a></li> + <li><a href="http://i-skool.co.uk/mobile-development/web-design-for-mobiles-and-tablets-viewport-sizes/">List of mobile and tablet viewport sizes with pixel ratios and physical sizes</a></li> + <li><a href="http://davidwalsh.name/animate-media-queries">CSS Animations Between Media Queries</a> by David Walsh</li> +</ul> diff --git a/files/de/web/css/min-height/index.html b/files/de/web/css/min-height/index.html new file mode 100644 index 0000000000..2214fc01a9 --- /dev/null +++ b/files/de/web/css/min-height/index.html @@ -0,0 +1,77 @@ +--- +title: min-height +slug: Web/CSS/min-height +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/min-height +--- +<p>{{ CSSRef() }}</p> +<h2 id="Übersicht">Übersicht</h2> +<p>Die <code>min-height</code> Eigenschaft wird verwendet, um die minimale Höhe eines Elements festzulegen. Das verhindert, dass der benutzte Wert der <a href="/de/CSS/height" title="de/CSS/height"><code>height</code></a> Eigenschaft nicht kleiner wird als der festgelegte Wert von <code>min-height</code>.</p> +<p>Hinweis: <code>min-height</code> überschreibt sowohl <a href="/de/CSS/height" title="de/CSS/height"><code>height</code></a>, als auch <a href="/de/CSS/max-height" title="de/CSS/max-height"><code>max-height</code></a>.</p> +<ul> + <li>Standardwert: <code>0</code></li> + <li>Anwendbar auf: Blockelemente und ersetzte Elemente</li> + <li>Vererbbar: Nein</li> + <li>Prozentwerte: beziehen sich auf die Höhe des umschließenden Blocks</li> + <li>Medium: visuell</li> + <li>berechneter Wert: die Prozentzahl wie festgelegt oder die absolute Länge</li> +</ul> +<h2 id="Syntax">Syntax</h2> +<pre class="eval">min-height: <Längenangabe> | <Prozentzahl> | inherit +</pre> +<h3 id="Werte">Werte</h3> +<dl> + <dt> + <Längenangabe></dt> + <dd> + Siehe <a href="/de/CSS/Einheiten#L.c3.a4ngen" title="de/CSS/Einheiten#L.c3.a4ngen">Länge</a> für mögliche Einheiten.</dd> + <dt> + Prozentzahl</dt> + <dd> + Eine <a href="/de/CSS/Einheiten#Prozent" title="de/CSS/Einheiten#Prozent">prozentuale</a> Angabe, die sich auf die Höhe des umschließenden Blocks bezieht.</dd> + <dt> + inherit</dt> + <dd> + Der Wert des Elternelements wird geerbt.</dd> +</dl> +<h2 id="Beispiele">Beispiele</h2> +<pre>table { min-height: 75%; } +form { min-height: 0; } +</pre> +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> +<table class="standard-table"> + <tbody> + <tr> + <th>Browser</th> + <th>ab Version</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td><strong>7.0</strong></td> + </tr> + <tr> + <td>Firefox (Gecko)</td> + <td><strong>1.0</strong> (1.0)</td> + </tr> + <tr> + <td>Opera</td> + <td><strong>4.0</strong></td> + </tr> + <tr> + <td>Safari (WebKit)</td> + <td><strong>2.0.2</strong> (416), vorher fehlerhaft</td> + </tr> + </tbody> +</table> +<h2 id="Spezifikation">Spezifikation</h2> +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-heights" lang="en">CSS 2.1 Visual formatting #min-height</a></li> +</ul> +<h2 id="Siehe_auch">Siehe auch</h2> +<ul> + <li><a href="/de/CSS/height" title="de/CSS/height"><code>height</code></a>, <a href="/de/CSS/max-height" title="de/CSS/max-height"><code>max-height</code></a></li> + <li><a href="/de/CSS/width" title="de/CSS/width"><code>width</code></a>, <a href="/de/CSS/max-width" title="de/CSS/max-width"><code>max-width</code></a>, <a href="/de/CSS/min-width" title="de/CSS/min-width"><code>min-width</code></a></li> +</ul> +<p>{{ languages( { "en": "en/CSS/min-height", "es": "es/CSS/min-height", "fr": "fr/CSS/min-height" } ) }}</p> diff --git a/files/de/web/css/min-width/index.html b/files/de/web/css/min-width/index.html new file mode 100644 index 0000000000..085949c9d6 --- /dev/null +++ b/files/de/web/css/min-width/index.html @@ -0,0 +1,101 @@ +--- +title: min-width +slug: Web/CSS/min-width +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/min-width +--- +<p>{{ CSSRef() }}</p> +<h2 id="Übersicht">Übersicht</h2> +<p>Die <code>min-width</code> Eigenschaft wird verwendet, um die minimale Breite eines Elements festzulegen. Das verhindert, dass der benutzte Wert der <a href="/de/CSS/width" title="de/CSS/width"><code>width</code></a> Eigenschaft nicht kleiner wird als der festgelegte Wert von <code>min-width</code>.</p> +<p>Hinweis: <code>min-width</code> überschreibt sowohl <a href="/de/CSS/width" title="de/CSS/width"><code>width</code></a>, als auch <a href="/de/CSS/max-width" title="de/CSS/max-width"><code>max-width</code></a>.</p> +<ul> + <li>Standardwert: <code>0</code></li> + <li>Anwendbar auf: Blockelemente und ersetzte Elemente, für <table> siehe <a href="/de/CSS/min-width#Browser_Kompatibilit.c3.a4t" title="de/CSS/min-width#Browser_Kompatibilit.c3.a4t">Browser Kompatibilität</a></li> + <li>Vererbbar: Nein</li> + <li>Prozentwerte: beziehen sich auf die Breite des umschließenden Blocks</li> + <li>Medium: visuell</li> + <li>berechneter Wert: die Prozentzahl wie festgelegt oder die absolute Länge</li> +</ul> +<h2 id="Syntax">Syntax</h2> +<pre class="eval">min-width: <Längenangabe> | <Prozentzahl> | -moz-max-content | -moz-min-content | -moz-fit-content | -moz-available | inherit +</pre> +<h3 id="Werte">Werte</h3> +<dl> + <dt> + <Längenangabe></dt> + <dd> + Siehe <a href="/de/CSS/Einheiten#L.c3.a4ngen" title="de/CSS/Einheiten#L.c3.a4ngen">Länge</a> für mögliche Einheiten.</dd> + <dt> + Prozentzahl</dt> + <dd> + Eine <a href="/de/CSS/Einheiten#Prozent" title="de/CSS/Einheiten#Prozent">prozentuale</a> Angabe, die sich auf die Breite des umschließenden Blocks bezieht.</dd> + <dt> + inherit</dt> + <dd> + Der Wert des Elternelements wird geerbt.</dd> +</dl> +<h4 id="Mozilla_Erweiterungen">Mozilla Erweiterungen</h4> +<dl> + <dt> + -moz-max-content</dt> + <dd> + {{ gecko_minversion_inline("1.9") }} Bevorzugte intrinsische Breite.</dd> + <dt> + -moz-min-content</dt> + <dd> + {{ gecko_minversion_inline("1.9") }} Minimale intrinsische Breite.</dd> + <dt> + -moz-available</dt> + <dd> + {{ gecko_minversion_inline("1.9") }} Die Breite des umschließenden Blocks minus horizontalen margin, padding und border Werten.</dd> + <dt> + -moz-fit-content</dt> + <dd> + {{ gecko_minversion_inline("1.9") }} Gleichbedeutend zu <code>-moz-max-content.</code></dd> +</dl> +<h2 id="Beispiele">Beispiele</h2> +<pre>table { min-width: 75%; } +form { min-width: 0; } +</pre> +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> +<table class="standard-table"> + <tbody> + <tr> + <th>Browser</th> + <th>ab Version</th> + <th>auf <code><table></code> anwendbar</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td><strong>7.0</strong></td> + <td>nein</td> + </tr> + <tr> + <td>Firefox (Gecko)</td> + <td><strong>1.0</strong> (1.0)</td> + <td>ja</td> + </tr> + <tr> + <td>Opera</td> + <td><strong>4.0</strong></td> + <td>ja</td> + </tr> + <tr> + <td>Safari (WebKit)</td> + <td><strong>2.0.2</strong> (416), vorher fehlerhaft</td> + <td>nein</td> + </tr> + </tbody> +</table> +<h2 id="Spezifikation">Spezifikation</h2> +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths" lang="en">CSS 2.1 Visual formatting #min-width</a></li> +</ul> +<h2 id="Siehe_auch">Siehe auch</h2> +<ul> + <li><a href="/de/CSS/width" title="de/CSS/width"><code>width</code></a>, <a href="/de/CSS/max-width" title="de/CSS/max-width"><code>max-width</code></a></li> + <li><a href="/de/CSS/height" title="de/CSS/height"><code>height</code></a>, <a href="/de/CSS/min-height" title="de/CSS/min-height"><code>min-height</code></a>, <a href="/de/CSS/max-height" title="de/CSS/max-height"><code>max-height</code></a></li> +</ul> +<p>{{ languages( { "en": "en/CSS/min-width", "es": "es/CSS/min-width", "fr": "fr/CSS/min-width", "ja": "ja/CSS/min-width" } ) }}</p> diff --git a/files/de/web/css/mix-blend-mode/index.html b/files/de/web/css/mix-blend-mode/index.html new file mode 100644 index 0000000000..59efbddadd --- /dev/null +++ b/files/de/web/css/mix-blend-mode/index.html @@ -0,0 +1,97 @@ +--- +title: mix-blend-mode +slug: Web/CSS/mix-blend-mode +tags: + - CSS + - CSS Compositing + - CSS Eigenschaft +translation_of: Web/CSS/mix-blend-mode +--- +<p>{{CSSRef()}}</p> + +<h2 id="Summary" name="Summary">Übersicht</h2> + +<p>Die <code>mix-blend-mode</code> CSS Eigenschaft beschreibt, wie sich der Inhalt des Elements mit dem Inhalt des Elements unter ihm und dem Element-Hintergrund vermischen soll.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="brush:css">/* Keyword values */ +mix-blend-mode: normal; +mix-blend-mode: multiply; +mix-blend-mode: screen; +mix-blend-mode: overlay; +mix-blend-mode: darken; +mix-blend-mode: lighten; +mix-blend-mode: color-dodge; +mix-blend-mode: color-burn; +mix-blend-mode: hard-light; +mix-blend-mode: soft-light; +mix-blend-mode: difference; +mix-blend-mode: exclusion; +mix-blend-mode: hue; +mix-blend-mode: saturation; +mix-blend-mode: color; +mix-blend-mode: luminosity; + +/* Global values */ +mix-blend-mode: initial; +mix-blend-mode: inherit; +mix-blend-mode: unset; +</pre> + +<h3 id="Values" name="Values">Werte</h3> + +<dl> + <dt><code><blend-mode></code></dt> + <dd>Ein {{cssxref("<blend-mode>")}} der den zu verwendenden Mischmodus festlegt. Mehrere Werte können per Komma getrennt angegeben werden.</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples" name="Examples">Beispiele</h2> + +<pre class="brush: html"><svg> + <circle cx="40" cy="40" r="40" fill="red"/> + <circle cx="80" cy="40" r="40" fill="lightgreen"/> + <circle cx="60" cy="80" r="40" fill="blue"/> +</svg></pre> + +<pre class="brush:css">circle { mix-blend-mode: screen; }</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample("Examples", "100%", "180")}}</p> + +<h2 id="Specifications" name="Specifications">Spezifikationen</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('Compositing', '#mix-blend-mode', 'mix-blend-mode') }}</td> + <td>{{ Spec2('Compositing') }}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser Unterstützung</h2> + +{{Compat("css.properties.mix-blend-mode")}} + +<h2 id="See_also" name="See_also">Siehe auch</h2> + +<ul> + <li>{{cssxref("<blend-mode>")}}</li> + <li>{{cssxref("background-blend-mode")}}</li> +</ul> diff --git a/files/de/web/css/motion_path/index.html b/files/de/web/css/motion_path/index.html new file mode 100644 index 0000000000..5c09de0a90 --- /dev/null +++ b/files/de/web/css/motion_path/index.html @@ -0,0 +1,104 @@ +--- +title: Bewegungspfad +slug: Web/CSS/Motion_Path +tags: + - Bewegungspfad + - CSS + - Experimentell + - Referenz + - Übersicht +translation_of: Web/CSS/CSS_Motion_Path +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p><strong>Motion Path</strong> ist ein CSS Modul, das es Autoren erlaubt, beliebige grafische Objekte entlang eines benutzerdefinierten Pfads zu animieren.</p> + +<h2 id="Referenz">Referenz</h2> + +<h3 id="Eigenschaften">Eigenschaften</h3> + +<div class="index"> +<ul> + <li>{{cssxref("motion")}}</li> + <li>{{cssxref("motion-path")}}</li> + <li>{{cssxref("motion-offset")}}</li> + <li>{{cssxref("motion-rotation")}}</li> +</ul> +</div> + +<h2 id="Anleitungen">Anleitungen</h2> + +<p><em>Keine.</em></p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Spezifikation</th> + <th>Status</th> + <th>Kommentar</th> + </tr> + <tr> + <td>{{SpecName('Motion Path Level 1')}}</td> + <td>{{Spec2('Motion Path Level 1')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome für Android</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/de/web/css/mozilla_extensions/index.html b/files/de/web/css/mozilla_extensions/index.html new file mode 100644 index 0000000000..d91ad7bb00 --- /dev/null +++ b/files/de/web/css/mozilla_extensions/index.html @@ -0,0 +1,661 @@ +--- +title: Mozilla CSS Erweiterungen +slug: Web/CSS/Mozilla_Extensions +tags: + - CSS + - CSS Referenz + - 'CSS:Mozilla Erweiterungen' +translation_of: Web/CSS/Mozilla_Extensions +--- +<div>{{CSSRef}}</div> + +<p>Mozilla unterstützt eine Reihe von Erweiterungen zu <a href="/de/docs/Web/CSS">CSS</a>, die durch das Präfix <code>-moz-</code> gekennzeichnet sind.</p> + +<p>Manche dieser Eigenschaften wurden zu Entwürfen zu CSS Spezifikationen für die Aufnahme in der finalen Empfehlung hinzugefügt, sind jedoch immer noch experimentell. Die entgültige Standardeigenschaft kann sich von der Implementierung mit Präfix unterscheiden. Einige dieser nicht standardisierten Eigenschaften beziehen sich nur auf XUL Elemente.</p> + +<p>Wenn sie standardisiert und die Unterstützung für die Variante ohne Präfix hinzugefügt wurde, werden die Eigenschaften mit Präfix entfernt.</p> + +<h2 id="Eigenschaften_mit_Mozilla-Präfix_die_standardisiert_werden">Eigenschaften mit Mozilla-Präfix, die standardisiert werden</h2> + +<div class="index"> +<h3 id="A_–_C">A – C</h3> + +<ul> + <li>{{Cssxref("clip-path")}} (bezieht sich auf mehr als SVG)</li> + <li>{{Cssxref("-moz-column-count")}}</li> + <li>{{Cssxref("-moz-column-fill")}}</li> + <li>{{Cssxref("-moz-column-gap")}}</li> + <li>{{Cssxref("-moz-column-width")}}</li> + <li>{{Cssxref("-moz-column-rule")}}</li> + <li>{{Cssxref("-moz-column-rule-width")}}</li> + <li>{{Cssxref("-moz-column-rule-style")}}</li> + <li>{{Cssxref("-moz-column-rule-color")}}</li> +</ul> + +<h3 id="F">F</h3> + +<ul> + <li>{{Cssxref("filter")}} (bezieht sich auf mehr als SVG)</li> +</ul> + +<h3 id="G_–_H">G – H</h3> + +<ul> + <li>{{Cssxref("-moz-hyphens")}}</li> +</ul> + +<h3 id="I_–_M">I – M</h3> + +<ul> + <li>{{Cssxref("mask")}} (bezieht sich auf mehr als SVG)</li> +</ul> + +<h3 id="N_–_P">N – P</h3> + +<ul> + <li>{{Cssxref("pointer-events")}} (bezieht sich auf mehr als SVG)</li> +</ul> + +<h3 id="Q_–_Z">Q – Z</h3> + +<ul> + <li>{{cssxref("-moz-tab-size")}}</li> + <li>{{cssxref("-moz-text-align-last")}}</li> + <li>{{cssxref("-moz-text-size-adjust")}}</li> +</ul> +</div> + +<h2 id="Proprietäre_Eigenschaften_mit_Mozilla-Präfix_(nicht_auf_Webseiten_verwenden)">Proprietäre Eigenschaften mit Mozilla-Präfix (nicht auf Webseiten verwenden)</h2> + +<div class="index"> +<h3 id="A">A</h3> + +<ul> + <li>{{Cssxref("-moz-appearance")}}</li> +</ul> + +<h3 id="B">B</h3> + +<ul> + <li>{{Cssxref("-moz-binding")}}</li> + <li>{{Cssxref("-moz-border-bottom-colors")}}</li> + <li>{{Cssxref("-moz-border-left-colors")}}</li> + <li>{{Cssxref("-moz-border-right-colors")}}</li> + <li>{{Cssxref("-moz-border-top-colors")}}</li> + <li>{{Cssxref("-moz-box-align")}}</li> + <li>{{Cssxref("-moz-box-direction")}}</li> + <li>{{Cssxref("-moz-box-flex")}}</li> + <li>{{Cssxref("-moz-box-ordinal-group")}}</li> + <li>{{Cssxref("-moz-box-orient")}}</li> + <li>{{Cssxref("-moz-box-pack")}}</li> +</ul> + +<h3 id="C_–_F">C – F</h3> + +<ul> + <li>{{Cssxref("-moz-float-edge")}}</li> + <li>{{Cssxref("-moz-force-broken-image-icon")}}</li> +</ul> + +<h3 id="G_H_I">G H I</h3> + +<ul> + <li>{{Cssxref("-moz-image-region")}}</li> +</ul> + +<h3 id="J_–_O">J – O</h3> + +<ul> + <li>{{cssxref("-moz-orient")}}</li> + <li>{{cssxref("-moz-osx-font-smoothing")}}</li> + <li>{{Cssxref("-moz-outline-radius")}}</li> + <li>{{Cssxref("-moz-outline-radius-bottomleft")}}</li> + <li>{{Cssxref("-moz-outline-radius-bottomright")}}</li> + <li>{{Cssxref("-moz-outline-radius-topleft")}}</li> + <li>{{Cssxref("-moz-outline-radius-topright")}}</li> +</ul> + +<h3 id="P_–_S">P – S</h3> + +<ul> + <li>{{Cssxref("-moz-stack-sizing")}}</li> +</ul> + +<h3 id="T_U">T U</h3> + +<ul> + <li>{{Cssxref("-moz-user-focus")}}</li> + <li>{{Cssxref("-moz-user-input")}}</li> + <li>{{Cssxref("-moz-user-modify")}}</li> + <li>{{Cssxref("-moz-user-select")}}</li> +</ul> + +<h3 id="V_–_Z">V – Z</h3> + +<ul> + <li>{{cssxref("-moz-window-dragging")}}</li> + <li>{{Cssxref("-moz-window-shadow")}}</li> +</ul> +</div> + +<h2 id="Zuvor_mit_Präfix_versehene_Eigenschaften_jetzt_standardisiert">Zuvor mit Präfix versehene Eigenschaften, jetzt standardisiert</h2> + +<div class="index"> +<ul> + <li>{{Cssxref("animation", "-moz-animation")}} [Version mit Präfix immer noch akzeptiert]</li> + <li>{{Cssxref("animation-delay", "-moz-animation-delay")}} [Version mit Präfix immer noch akzeptiert]</li> + <li>{{Cssxref("animation-direction", "-moz-animation-direction")}} [Version mit Präfix immer noch akzeptiert]</li> + <li>{{Cssxref("animation-duration", "-moz-animation-duration")}} [Version mit Präfix immer noch akzeptiert]</li> + <li>{{Cssxref("animation-fill-mode", "-moz-animation-fill-mode")}} [Version mit Präfix immer noch akzeptiert]</li> + <li>{{Cssxref("animation-iteration-count", "-moz-animation-iteration-count")}} [Version mit Präfix immer noch akzeptiert]</li> + <li>{{Cssxref("animation-name", "-moz-animation-name")}} [Version mit Präfix immer noch akzeptiert]</li> + <li>{{Cssxref("animation-play-state", "-moz-animation-play-state")}} [Version mit Präfix immer noch akzeptiert]</li> + <li>{{Cssxref("animation-timing-function","-moz-animation-timing-function")}} [Version mit Präfix immer noch akzeptiert]</li> + <li>{{Cssxref("backface-visibility", "-moz-backface-visibility")}} [Version mit Präfix immer noch akzeptiert]</li> + <li>{{Cssxref("background-clip", "-moz-background-clip")}}</li> + <li>{{Cssxref("background-origin", "-moz-background-origin")}}</li> + <li>{{Cssxref("-moz-background-inline-policy")}} [Überholt durch die Standardversion {{cssxref("box-decoration-break")}}]</li> + <li>{{Cssxref("background-size", "-moz-background-size")}}</li> + <li>{{Cssxref("-moz-border-end")}} [Überholt durch die Standardversion {{cssxref("border-inline-end")}}]</li> + <li>{{Cssxref("-moz-border-end-color")}} [Überholt durch die Standardversion {{cssxref("border-inline-end-color")}}]</li> + <li>{{Cssxref("-moz-border-end-style")}} [Überholt durch die Standardversion {{cssxref("border-inline-end-style")}}]</li> + <li>{{Cssxref("-moz-border-end-width")}} [Überholt durch die Standardversion {{cssxref("border-inline-end-width")}}]</li> + <li>{{Cssxref("border-image","-moz-border-image")}}</li> + <li>{{Cssxref("-moz-border-start")}} [Überholt durch die Standardversion {{cssxref("border-inline-start")}}]</li> + <li>{{Cssxref("-moz-border-start-color")}} [Überholt durch die Standardversion {{cssxref("border-inline-start-color")}}]</li> + <li>{{Cssxref("-moz-border-start-style")}} [Überholt durch die Standardversion {{cssxref("border-inline-start-style")}}]</li> + <li>{{Cssxref("-moz-border-start-width")}} [Überholt durch die Standardversion {{cssxref("border-inline-start-width")}}]</li> + <li>{{cssxref("box-sizing", "-moz-box-sizing")}} [Version mit Präfix immer noch akzeptiert]</li> + <li>{{Cssxref("-moz-font-feature-settings")}} [Version mit Präfix immer noch akzeptiert]</li> + <li>{{cssxref("-moz-font-language-override")}} [Version mit Präfix immer noch akzeptiert]</li> + <li>{{Cssxref("-moz-margin-end")}} [Überholt durch die Standardversion {{cssxref("margin-inline-end")}}]</li> + <li>{{Cssxref("-moz-margin-start")}} [Überholt durch die Standardversion {{cssxref("margin-inline-start")}}]</li> + <li>{{Cssxref("opacity","-moz-opacity")}}</li> + <li>{{Cssxref("outline","-moz-outline")}}</li> + <li>{{Cssxref("outline-color","-moz-outline-color")}}</li> + <li>{{Cssxref("outline-offset","-moz-outline-offset")}}</li> + <li>{{Cssxref("outline-style","-moz-outline-style")}}</li> + <li>{{Cssxref("outline-width","-moz-outline-width")}}</li> + <li>{{Cssxref("-moz-padding-end")}} [Überholt durch die Standardversion {{cssxref("padding-inline-end")}}]</li> + <li>{{Cssxref("-moz-padding-start")}} [Überholt durch die Standardversion {{cssxref("padding-inline-start")}}]</li> + <li>{{Cssxref("perspective", "-moz-perspective")}} [Version mit Präfix immer noch akzeptiert]</li> + <li>{{Cssxref("perspective-origin","-moz-perspective-origin")}} [Version mit Präfix immer noch akzeptiert]</li> + <li>{{Cssxref("text-decoration-color","-moz-text-decoration-color")}}</li> + <li>{{Cssxref("text-decoration-line","-moz-text-decoration-line")}}</li> + <li>{{Cssxref("text-decoration-style","-moz-text-decoration-style")}}</li> + <li>{{Cssxref("transform", "-moz-transform")}} [Version mit Präfix immer noch akzeptiert]</li> + <li>{{Cssxref("transform-origin", "-moz-transform-origin")}} [Version mit Präfix immer noch akzeptiert]</li> + <li>{{Cssxref("transform-style", "-moz-transform-style")}} [Version mit Präfix immer noch akzeptiert]</li> + <li>{{cssxref("transition", "-moz-transition")}} [Version mit Präfix immer noch akzeptiert]</li> + <li>{{cssxref("transition-delay", "-moz-transition-delay")}} [Version mit Präfix immer noch akzeptiert]</li> + <li>{{cssxref("transition-duration", "-moz-transition-duration")}} [Version mit Präfix immer noch akzeptiert]</li> + <li>{{cssxref("transition-property", "-moz-transition-property")}} [Version mit Präfix immer noch akzeptiert]</li> + <li>{{cssxref("transition-timing-function", "-moz-transition-timing-function")}} [Version mit Präfix immer noch akzeptiert]</li> +</ul> +</div> + +<h2 id="Werte">Werte</h2> + +<h3 id="Für_alle_Eigenschaften">Für alle Eigenschaften</h3> + +<div class="index"> +<ul> + <li>{{cssxref("initial","-moz-initial")}}</li> +</ul> +</div> + +<h3 id="Cssxref(-moz-appearance)">{{Cssxref("-moz-appearance")}}</h3> + +<div class="index"> +<ul> + <li><code>button</code></li> + <li><code>button-arrow-down</code></li> + <li><code>button-arrow-next</code></li> + <li><code>button-arrow-previous</code></li> + <li><code>button-arrow-up</code></li> + <li><code>button-bevel</code></li> + <li><code>checkbox</code></li> + <li><code>checkbox-container</code></li> + <li><code>checkbox-label</code></li> + <li><code>checkmenuitem</code></li> + <li><code>dialog</code></li> + <li><code>groupbox</code></li> + <li><code>listbox</code></li> + <li><code>menuarrow</code></li> + <li><code>menucheckbox</code></li> + <li><code>menuimage</code></li> + <li><code>menuitem</code></li> + <li><code>menuitemtext</code></li> + <li><code>menulist</code></li> + <li><code>menulist-button</code></li> + <li><code>menulist-text</code></li> + <li><code>menulist-textfield</code></li> + <li><code>menupopup</code></li> + <li><code>menuradio</code></li> + <li><code>menuseparator</code></li> + <li><code>-moz-mac-unified-toolbar</code> {{Fx_minversion_inline(3.5)}}</li> + <li><code>-moz-win-borderless-glass</code></li> + <li><code>-moz-win-browsertabbar-toolbox</code> {{Fx_minversion_inline(3)}}</li> + <li><code>-moz-win-communications-toolbox</code> {{Fx_minversion_inline(3)}}</li> + <li><code>-moz-win-glass</code></li> + <li><code>-moz-win-media-toolbox</code> {{Fx_minversion_inline(3)}}</li> + <li><code>-moz-window-button-box</code></li> + <li><code>-moz-window-button-box-maximized</code></li> + <li><code>-moz-window-button-close</code></li> + <li><code>-moz-window-button-maximize</code></li> + <li><code>-moz-window-button-minimize</code></li> + <li><code>-moz-window-button-restore</code></li> + <li><code>-moz-window-titlebar</code></li> + <li><code>-moz-window-titlebar-maximized</code></li> + <li><code>progressbar</code></li> + <li><code>progresschunk</code></li> + <li><code>radio</code></li> + <li><code>radio-container</code></li> + <li><code>radio-label</code></li> + <li><code>radiomenuitem</code></li> + <li><code>resizer</code></li> + <li><code>resizerpanel</code></li> + <li><code>scale-horizontal</code></li> + <li><code>scalethumb-horizontal</code></li> + <li><code>scalethumb-vertical</code></li> + <li><code>scale-vertical</code></li> + <li><code>scrollbarbutton-down</code></li> + <li><code>scrollbarbutton-left</code></li> + <li><code>scrollbarbutton-right</code></li> + <li><code>scrollbarbutton-up</code></li> + <li><code>scrollbar-small</code></li> + <li><code>scrollbarthumb-horizontal</code></li> + <li><code>scrollbarthumb-vertical</code></li> + <li><code>scrollbartrack-horizontal</code></li> + <li><code>scrollbartrack-vertical</code></li> + <li><code>separator</code></li> + <li><code>spinner</code></li> + <li><code>spinner-downbutton</code></li> + <li><code>spinner-textfield</code></li> + <li><code>spinner-upbutton</code></li> + <li><code>statusbar</code></li> + <li><code>statusbarpanel</code></li> + <li><code>tab</code></li> + <li><code>tabpanels</code></li> + <li><code>tab-scroll-arrow-back</code></li> + <li><code>tab-scroll-arrow-forward</code></li> + <li><code>textfield</code></li> + <li><code>textfield-multiline</code></li> + <li><code>toolbar</code></li> + <li><code>toolbarbutton-dropdown</code></li> + <li><code>toolbox</code></li> + <li><code>tooltip</code></li> + <li><code>treeheadercell</code></li> + <li><code>treeheadersortarrow</code></li> + <li><code>treeitem</code></li> + <li><code>treetwisty</code></li> + <li><code>treetwistyopen</code></li> + <li><code>treeview</code></li> + <li><code>window</code></li> +</ul> +</div> + +<h3 id="cssxref(background-image)">{{cssxref("background-image")}}</h3> + +<div class="index"> +<ul> + <li>Farbverläufe {{Gecko_minversion_inline("1.9.2")}} + <ul> + <li>{{cssxref("-moz-linear-gradient")}}</li> + <li>{{cssxref("-moz-radial-gradient")}}</li> + </ul> + </li> + <li>Elemente {{gecko_minversion_inline("2.0")}} + <ul> + <li>{{cssxref("-moz-element")}}</li> + </ul> + </li> + <li>Teilbilder + <ul> + <li>{{cssxref("-moz-image-rect")}} {{gecko_minversion_inline("2.0")}}</li> + </ul> + </li> +</ul> +</div> + +<h3 id="Cssxref(border-color)">{{Cssxref("border-color")}}</h3> + +<div class="index"> +<ul> + <li><code>-moz-use-text-color</code> {{Deprecated_inline}} Use {{Cssxref("currentColor")}}</li> +</ul> +</div> + +<h3 id="Cssxref(border-style)_und_Cssxref(outline-style)">{{Cssxref("border-style")}} und {{Cssxref("outline-style")}}</h3> + +<div class="index"> +<ul> + <li><code>-moz-bg-inset | -moz-bg-outset | -moz-bg-solid </code> {{obsolete_inline}} entfernt in Gecko 1.9 {{geckoRelease("1.9")}}</li> +</ul> +</div> + +<h3 id="cssxref(<color>)_Schlüsselwörter">{{cssxref("<color>")}} Schlüsselwörter</h3> + +<div class="index"> +<ul> + <li><code>-moz-activehyperlinktext</code></li> + <li><code>-moz-hyperlinktext</code></li> + <li><code>-moz-visitedhyperlinktext</code></li> + <li><code>-moz-buttondefault</code></li> + <li><code>-moz-buttonhoverface</code></li> + <li><code>-moz-buttonhovertext</code></li> + <li><code>-moz-default-background-color</code> {{Gecko_minversion_inline("5.0")}}</li> + <li><code>-moz-default-color</code> {{Gecko_minversion_inline("5.0")}}</li> + <li><code>-moz-cellhighlight</code></li> + <li><code>-moz-cellhighlighttext</code></li> + <li><code>-moz-field</code></li> + <li><code>-moz-fieldtext</code></li> + <li><code>-moz-dialog</code></li> + <li><code>-moz-dialogtext</code></li> + <li><code>-moz-dragtargetzone</code></li> + <li><code>-moz-mac-accentdarkestshadow</code></li> + <li><code>-moz-mac-accentdarkshadow</code></li> + <li><code>-moz-mac-accentface</code></li> + <li><code>-moz-mac-accentlightesthighlight</code></li> + <li><code>-moz-mac-accentlightshadow</code></li> + <li><code>-moz-mac-accentregularhighlight</code></li> + <li><code>-moz-mac-accentregularshadow</code></li> + <li><code>-moz-mac-chrome-active</code> {{Gecko_minversion_inline("1.9.1")}}</li> + <li><code>-moz-mac-chrome-inactive</code> {{Gecko_minversion_inline("1.9.1")}}</li> + <li><code>-moz-mac-focusring</code></li> + <li><code>-moz-mac-menuselect</code></li> + <li><code>-moz-mac-menushadow</code></li> + <li><code>-moz-mac-menutextselect</code></li> + <li><code>-moz-menuhover</code></li> + <li><code>-moz-menuhovertext</code></li> + <li><code>-moz-win-communicationstext</code> {{Fx_minversion_inline(3)}}</li> + <li><code>-moz-win-mediatext</code> {{gecko_minversion_inline(1.9)}}</li> + <li><code>-moz-nativehyperlinktext</code> {{Gecko_minversion_inline("1.9.1")}}</li> +</ul> +</div> + +<h3 id="Cssxref(display)">{{Cssxref("display")}}</h3> + +<div class="index"> +<ul> + <li><code>-moz-box</code></li> + <li><code>-moz-inline-block</code> {{obsolete_inline}}</li> + <li><code>-moz-inline-box</code></li> + <li><code>-moz-inline-grid</code></li> + <li><code>-moz-inline-stack</code></li> + <li><code>-moz-inline-table</code> {{obsolete_inline}}</li> + <li><code>-moz-grid</code></li> + <li><code>-moz-grid-group</code></li> + <li><code>-moz-grid-line</code></li> + <li><code>-moz-groupbox</code></li> + <li><code>-moz-deck</code></li> + <li><code>-moz-popup</code></li> + <li><code>-moz-stack</code></li> + <li><code>-moz-marker</code></li> +</ul> +</div> + +<h3 id="cssxref(empty-cells)">{{cssxref("empty-cells")}}</h3> + +<div class="index"> +<ul> + <li><code>-moz-show-background</code> (Standardwert in {{Glossary("Quirksmode")}})</li> +</ul> +</div> + +<h3 id="Cssxref(font)">{{Cssxref("font")}}</h3> + +<div class="index"> +<ul> + <li><code>-moz-button</code></li> + <li><code>-moz-info</code></li> + <li><code>-moz-desktop</code></li> + <li><code>-moz-dialog</code> (auch eine Farbe)</li> + <li><code>-moz-document</code></li> + <li><code>-moz-workspace</code></li> + <li><code>-moz-window</code></li> + <li><code>-moz-list</code></li> + <li><code>-moz-pull-down-menu</code></li> + <li><code>-moz-field</code> (auch eine Farbe)</li> +</ul> +</div> + +<h3 id="Cssxref(font-family)">{{Cssxref("font-family")}}</h3> + +<div class="index"> +<ul> + <li><code>-moz-fixed</code></li> +</ul> +</div> + +<h3 id="Cssxref(image-rendering)">{{Cssxref("image-rendering")}}</h3> + +<div class="index"> +<ul> + <li>{{Cssxref("image-rendering","-moz-crisp-edges")}} {{Gecko_minversion_inline("1.9.2")}}</li> +</ul> +</div> + +<h3 id="cssxref(<length>)_Werte">{{cssxref("<length>")}} Werte</h3> + +<div class="index"> +<ul> + <li>{{cssxref("-moz-calc")}} {{gecko_minversion_inline("2.0")}}</li> +</ul> +</div> + +<h3 id="Cssxref(list-style-type)">{{Cssxref("list-style-type")}}</h3> + +<div class="index"> +<ul> + <li><code>-moz-arabic-indic</code></li> + <li><code>-moz-bengali</code></li> + <li><code>-moz-cjk-earthly-branch</code></li> + <li><code>-moz-cjk-heavenly-stem</code></li> + <li><code>-moz-devanagari</code></li> + <li><code>-moz-ethiopic-halehame</code></li> + <li><code>-moz-ethiopic-halehame-am</code></li> + <li><code>-moz-ethiopic-halehame-ti-er</code></li> + <li><code>-moz-ethiopic-halehame-ti-et</code></li> + <li><code>-moz-ethiopic-numeric</code></li> + <li><code>-moz-gujarati</code></li> + <li><code>-moz-gurmukhi</code></li> + <li><code>-moz-hangul</code></li> + <li><code>-moz-hangul-consonant</code></li> + <li><code>-moz-japanese-formal</code></li> + <li><code>-moz-japanese-informal</code></li> + <li><code>-moz-kannada</code></li> + <li><code>-moz-khmer</code></li> + <li><code>-moz-lao</code></li> + <li><code>-moz-malayalam</code></li> + <li><code>-moz-myanmar</code></li> + <li><code>-moz-oriya</code></li> + <li><code>-moz-persian</code></li> + <li><code>-moz-simp-chinese-formal</code></li> + <li><code>-moz-simp-chinese-informal</code></li> + <li><code>-moz-tamil</code></li> + <li><code>-moz-telugu</code></li> + <li><code>-moz-thai</code></li> + <li><code>-moz-trad-chinese-formal</code></li> + <li><code>-moz-trad-chinese-informal</code></li> + <li><code>-moz-urdu</code></li> +</ul> +</div> + +<h3 id="Cssxref(overflow)">{{Cssxref("overflow")}}</h3> + +<div class="index"> +<ul> + <li>{{Cssxref("-moz-scrollbars-none")}} {{obsolete_inline}}</li> + <li>{{Cssxref("-moz-scrollbars-horizontal")}} {{Deprecated_inline}}</li> + <li>{{Cssxref("-moz-scrollbars-vertical")}} {{Deprecated_inline}}</li> + <li>{{Cssxref("-moz-hidden-unscrollable")}}</li> +</ul> +</div> + +<h3 id="Cssxref(text-align)">{{Cssxref("text-align")}}</h3> + +<div class="index"> +<ul> + <li><code>-moz-center</code></li> + <li><code>-moz-left</code></li> + <li><code>-moz-right</code></li> +</ul> +</div> + +<h3 id="Cssxref(text-decoration)">{{Cssxref("text-decoration")}}</h3> + +<div class="index"> +<ul> + <li><code>-moz-anchor-decoration</code></li> +</ul> +</div> + +<h3 id="Cssxref(-moz-user-select)">{{Cssxref("-moz-user-select")}}</h3> + +<div class="index"> +<ul> + <li><code>-moz-all</code></li> + <li><code>-moz-none</code></li> +</ul> +</div> + +<h3 id="Cssxref(width)_Cssxref(min-width)_und_Cssxref(max-width)">{{Cssxref("width")}}, {{Cssxref("min-width")}} und {{Cssxref("max-width")}}</h3> + +<div class="index"> +<ul> + <li><code>-moz-min-content</code> {{Fx_minversion_inline(3)}}</li> + <li><code>-moz-fit-content</code> {{Fx_minversion_inline(3)}}</li> + <li><code>-moz-max-content</code> {{Fx_minversion_inline(3)}}</li> + <li><code>-moz-available</code> {{Fx_minversion_inline(3)}}</li> +</ul> +</div> + +<h2 id="Pseudoelemente_und_Pseudoklassen">Pseudoelemente und Pseudoklassen</h2> + +<div class="index"> +<ul> + <li>{{Cssxref("::-moz-anonymous-block")}} <span class="comment">eg@:- bug 331432</span></li> + <li>{{Cssxref("::-moz-anonymous-positioned-block")}}</li> + <li>{{cssxref(":-moz-any")}} {{gecko_minversion_inline("2.0")}}</li> + <li>{{Cssxref(":-moz-any-link")}} (matcht <code>:link</code> und <code>:visited</code>)</li> + <li>{{Cssxref(":-moz-bound-element")}}</li> + <li>{{Cssxref(":-moz-broken")}} {{gecko_minversion_inline("1.9")}}</li> + <li>{{Cssxref("::-moz-canvas")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li> + <li>{{Cssxref("::-moz-cell-content")}} <span class="comment">eg@:- bug 331432</span></li> + <li>{{Cssxref(":-moz-drag-over")}}</li> + <li>{{Cssxref(":-moz-first-node")}}</li> + <li>{{cssxref("::-moz-focus-inner")}}</li> + <li>{{cssxref("::-moz-focus-outer")}}</li> + <li>{{cssxref(":-moz-focusring")}} {{gecko_minversion_inline("2.0")}}</li> + <li>{{cssxref(":-moz-full-screen")}} {{gecko_minversion_inline("9.0")}}</li> + <li>{{cssxref(":-moz-full-screen-ancestor")}} {{gecko_minversion_inline("10.0")}}</li> + <li>{{cssxref(":-moz-handler-blocked")}} {{gecko_minversion_inline("1.9.1")}}</li> + <li>{{cssxref(":-moz-handler-crashed")}} {{gecko_minversion_inline("2.0")}}</li> + <li>{{cssxref(":-moz-handler-disabled")}} {{gecko_minversion_inline("1.9.1")}}</li> + <li>{{Cssxref("::-moz-inline-table")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li> + <li>{{Cssxref(":-moz-last-node")}}</li> + <li>{{Cssxref(":-moz-list-bullet")}}</li> + <li>{{cssxref(":-moz-list-number")}}</li> + <li>{{cssxref(":-moz-loading")}} {{gecko_minversion_inline("1.9")}}</li> + <li>{{Cssxref(":-moz-locale-dir(ltr)")}} {{gecko_minversion_inline("1.9.2")}}</li> + <li>{{Cssxref(":-moz-locale-dir(rtl)")}} {{gecko_minversion_inline("1.9.2")}}</li> + <li>{{Cssxref(":-moz-lwtheme")}} {{gecko_minversion_inline("1.9.2")}}</li> + <li>{{Cssxref(":-moz-lwtheme-brighttext")}} {{gecko_minversion_inline("1.9.2")}}</li> + <li>{{Cssxref(":-moz-lwtheme-darktext")}} {{gecko_minversion_inline("1.9.2")}}</li> + <li>{{Cssxref(":-moz-native-anonymous")}} {{gecko_minversion_inline("36")}}</li> + <li>{{Cssxref(":-moz-only-whitespace")}}</li> + <li>{{Cssxref("::-moz-page")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li> + <li>{{Cssxref("::-moz-page-sequence")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li> + <li>{{Cssxref("::-moz-pagebreak")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li> + <li>{{Cssxref("::-moz-pagecontent")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li> + <li>{{Cssxref(":-moz-placeholder")}} {{gecko_minversion_inline("1.9")}}</li> + <li>{{cssxref("::-moz-placeholder")}} {{gecko_minversion_inline("19")}}</li> + <li>{{Cssxref("::-moz-progress-bar")}}</li> + <li>{{Cssxref("::-moz-range-thumb")}}</li> + <li>{{Cssxref("::-moz-range-track")}}</li> + <li>{{Cssxref(":-moz-read-only")}}</li> + <li>{{Cssxref(":-moz-read-write")}}</li> + <li>{{cssxref("::selection","::-moz-selection")}}</li> + <li>{{Cssxref("::-moz-scrolled-canvas")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li> + <li>{{Cssxref("::-moz-scrolled-content")}} <span class="comment">eg@:- bug 331432</span></li> + <li>{{Cssxref("::-moz-scrolled-page-sequence")}} <span class="comment">eg@:- bug 331432</span></li> + <li>{{cssxref(":-moz-suppressed")}} {{gecko_minversion_inline("1.9")}}</li> + <li>{{cssxref(":-moz-submit-invalid")}} {{gecko_minversion_inline("2.0")}}</li> + <li>{{Cssxref("::-moz-svg-foreign-content")}} <span class="comment">example at <a rel="freelink">resource://gre/res/svg.css</a> , *|*::-moz-svg-foreign-content {display: block !important;position: static !important;}</span></li> + <li>{{Cssxref(":-moz-system-metric(images-in-menus)")}} {{gecko_minversion_inline("1.9")}}</li> + <li>{{Cssxref(":-moz-system-metric(mac-graphite-theme)")}} {{gecko_minversion_inline("1.9.1")}}</li> + <li>{{Cssxref(":-moz-system-metric(scrollbar-end-backward)")}} {{gecko_minversion_inline("1.9")}}</li> + <li>{{Cssxref(":-moz-system-metric(scrollbar-end-forward)")}} {{gecko_minversion_inline("1.9")}}</li> + <li>{{Cssxref(":-moz-system-metric(scrollbar-start-backward)")}} {{gecko_minversion_inline("1.9")}}</li> + <li>{{Cssxref(":-moz-system-metric(scrollbar-start-forward)")}} {{Fx_minversion_inline(3)}}</li> + <li>{{Cssxref(":-moz-system-metric(scrollbar-thumb-proportional)")}} {{gecko_minversion_inline("1.9")}}</li> + <li>{{Cssxref(":-moz-system-metric(touch-enabled)")}} {{gecko_minversion_inline("1.9.2")}}</li> + <li>{{Cssxref(":-moz-system-metric(windows-default-theme)")}} {{Fx_minversion_inline(3)}}</li> + <li>{{Cssxref("::-moz-table")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li> + <li>{{Cssxref("::-moz-table-cell")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li> + <li>{{Cssxref("::-moz-table-column")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li> + <li>{{Cssxref("::-moz-table-column-group")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li> + <li>{{Cssxref("::-moz-table-outer")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li> + <li>{{Cssxref("::-moz-table-row")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li> + <li>{{Cssxref("::-moz-table-row-group")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li> + <li>{{Cssxref(":-moz-tree-checkbox")}}</li> + <li>{{Cssxref(":-moz-tree-cell")}}</li> + <li>{{Cssxref(":-moz-tree-cell-text")}}</li> + <li>{{Cssxref(":-moz-tree-cell-text(hover)")}} {{gecko_minversion_inline("1.9")}}</li> + <li>{{Cssxref(":-moz-tree-column")}}</li> + <li>{{Cssxref(":-moz-tree-drop-feedback")}}</li> + <li>{{Cssxref(":-moz-tree-image")}}</li> + <li>{{Cssxref(":-moz-tree-indentation")}}</li> + <li>{{Cssxref(":-moz-tree-line")}}</li> + <li>{{Cssxref(":-moz-tree-progressmeter")}}</li> + <li>{{Cssxref(":-moz-tree-row")}}</li> + <li>{{Cssxref(":-moz-tree-row(hover)")}} {{gecko_minversion_inline("1.9")}}</li> + <li>{{Cssxref(":-moz-tree-separator")}}</li> + <li>{{Cssxref(":-moz-tree-twisty")}}</li> + <li>{{Cssxref(":-moz-ui-invalid")}}{{gecko_minversion_inline("2.0")}}</li> + <li>{{Cssxref(":-moz-ui-valid")}}{{gecko_minversion_inline("2.0")}}</li> + <li>{{cssxref(":-moz-user-disabled")}} {{gecko_minversion_inline("1.9")}}</li> + <li>{{Cssxref("::-moz-viewport")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li> + <li>{{Cssxref("::-moz-viewport-scroll")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li> + <li>{{cssxref(":-moz-window-inactive")}} {{gecko_minversion_inline("2.0")}}</li> + <li>{{Cssxref("::-moz-xul-anonymous-block")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li> +</ul> +</div> + +<h2 id="At-Regeln">At-Regeln</h2> + +<div class="index"> +<ul> + <li>{{Cssxref("@-moz-document")}}</li> +</ul> +</div> + +<h2 id="Media_Queries">Media Queries</h2> + +<div class="index"> +<ul> + <li>{{Cssxref("Media_queries", "-moz-images-in-menus", "#-moz-images-in-menus")}} {{gecko_minversion_inline("1.9.2")}}</li> + <li>{{Cssxref("Media_queries", "-moz-mac-graphite-theme", "#-moz-mac-graphite-theme")}} {{gecko_minversion_inline("1.9.2")}}</li> + <li>{{Cssxref("Media_queries", "-moz-maemo-classic", "#-moz-maemo-classic")}} {{gecko_minversion_inline("1.9.2")}}</li> + <li>{{Cssxref("Media_queries", "-moz-device-pixel-ratio", "#-moz-device-pixel-ratio")}} {{gecko_minversion_inline("2.0")}}</li> + <li>{{Cssxref("Media_queries", "-moz-scrollbar-end-backward", "#-moz-scrollbar-end-backward")}} {{gecko_minversion_inline("1.9.2")}}</li> + <li>{{Cssxref("Media_queries", "-moz-scrollbar-end-forward", "#-moz-scrollbar-end-forward")}} {{gecko_minversion_inline("1.9.2")}}</li> + <li>{{Cssxref("Media_queries", "-moz-scrollbar-start-backward", "#-moz-scrollbar-start-backward")}} {{gecko_minversion_inline("1.9.2")}}</li> + <li>{{Cssxref("Media_queries", "-moz-scrollbar-start-forward", "#-moz-scrollbar-start-forward")}} {{gecko_minversion_inline("1.9.2")}}</li> + <li>{{Cssxref("Media_queries", "-moz-scrollbar-thumb-proportional", "#-moz-scrollbar-thumb-proportional")}} {{gecko_minversion_inline("1.9.2")}}</li> + <li>{{Cssxref("Media_queries", "-moz-touch-enabled", "#-moz-touch-enabled")}} {{gecko_minversion_inline("1.9.2")}}</li> + <li>{{Cssxref("Media_queries", "-moz-windows-classic", "#-moz-windows-classic")}} {{gecko_minversion_inline("1.9.2")}}</li> + <li>{{Cssxref("Media_queries", "-moz-windows-compositor", "#-moz-windows-compositor")}} {{gecko_minversion_inline("1.9.2")}}</li> + <li>{{Cssxref("Media_queries", "-moz-windows-default-theme", "#-moz-windows-default-theme")}} {{gecko_minversion_inline("1.9.2")}}</li> + <li>{{Cssxref("Media_queries", "-moz-windows-theme", "#-moz-windows-theme")}} {{gecko_minversion_inline("2.0")}}</li> +</ul> +</div> + +<h2 id="Andere">Andere</h2> + +<div class="index"> +<ul> + <li>{{Cssxref("-moz-alt-content")}} {{Bug("11011")}}</li> +</ul> +</div> diff --git a/files/de/web/css/none/index.html b/files/de/web/css/none/index.html new file mode 100644 index 0000000000..3f5680c26f --- /dev/null +++ b/files/de/web/css/none/index.html @@ -0,0 +1,25 @@ +--- +title: none +slug: Web/CSS/none +translation_of: Web/CSS/float +--- +<div> + {{ CSSRef() }}</div> +<h2 id="Summary" name="Summary">Übersicht</h2> +<p><code>none</code> ist ein oft gebrauchter Wert, welcher in einem Grossteil der Eigenschaften verwendet werden kann. Meistens ist er der Standartwert einer Eigenschaft. Ein vergleichbarer Wert ist {{ Cssxref("normal") }}.</p> +<h2 id="Used_in" name="Used_in">Verwendet in</h2> +<ul> + <li>{{ Cssxref("background-image") }}</li> + <li>{{ Cssxref("border-style") }}</li> + <li>{{ Cssxref("clear") }}</li> + <li>{{ Cssxref("content") }}</li> + <li>{{ Cssxref("counter-increment") }}</li> + <li>{{ Cssxref("counter-reset") }}</li> + <li>{{ Cssxref("display") }}</li> + <li>{{ Cssxref("float") }}</li> + <li>{{ Cssxref("list-style-type") }}</li> + <li>{{ Cssxref("max-height") }} / {{ Cssxref("max-width") }}</li> + <li>{{ Cssxref("quotes") }}</li> + <li>{{ Cssxref("text-decoration") }}</li> + <li>{{ Cssxref("text-transform") }}</li> +</ul> diff --git a/files/de/web/css/normal/index.html b/files/de/web/css/normal/index.html new file mode 100644 index 0000000000..c70bf8921f --- /dev/null +++ b/files/de/web/css/normal/index.html @@ -0,0 +1,27 @@ +--- +title: normal +slug: Web/CSS/normal +translation_of: Web/CSS/font-variant +--- +<div>{{ CSSRef() }}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p><code>normal</code> ist ein oft gebrauchter Wert. Meistens ist es der Standartwert der entsprechenden Eigenschaften. It is comparable to the value {{ Cssxref("none") }}, used in a similar manner for other properties.</p> + +<h2 id="Verwendet_in">Verwendet in</h2> + +<ul> + <li>{{ Cssxref("content") }}</li> + <li>{{ Cssxref("font-style") }}</li> + <li>{{ Cssxref("font-variant") }}</li> + <li>{{ Cssxref("font-weight") }}</li> + <li>{{ Cssxref("letter-spacing") }}</li> + <li>{{ Cssxref("line-height") }}</li> + <li>{{ Cssxref("speak") }}</li> + <li>{{ Cssxref("unicode-bidi") }}</li> + <li>{{ Cssxref("white-space") }}</li> + <li>{{ Cssxref("word-spacing") }}</li> +</ul> + +<div>{{ languages({ "ja": "ja/CSS/normal" }) }}</div> diff --git a/files/de/web/css/number/index.html b/files/de/web/css/number/index.html new file mode 100644 index 0000000000..8da756e1ff --- /dev/null +++ b/files/de/web/css/number/index.html @@ -0,0 +1,80 @@ +--- +title: <number> +slug: Web/CSS/number +tags: + - CSS + - CSS Datentyp + - Layout + - NeedsMobileBrowserCompatibility + - Referenz + - Web +translation_of: Web/CSS/number +--- +<div>{{CSSRef}}</div> + +<p>Der <code><number></code> <a href="/de/docs/Web/CSS">CSS</a> Datentyp repräsentiert eine Zahl, entweder Ganzzahl oder Bruchzahl. Ihre Syntax erweitert die des {{cssxref("<integer>")}} Datentyps. Um einen Bruchwert darzustellen, wird der Bruchteil — ein '.' gefolgt von einer oder mehreren Ziffern — einem beliebigen {{cssxref("<integer>")}} Datentyp angehängt. Wie für {{cssxref("<integer>")}} Datentypen wird auch für <code><number></code> Werte keine Einheit angegeben, welche keine CSS Größe ist.</p> + +<h2 id="Interpolation">Interpolation</h2> + +<p>Werte des <code><number></code> CSS Datentyps können interpoliert werden, um Animationen zu ermöglichen. In diesem Fall werden sie als reale Fließkommazahlen interpoliert. Die Geschwindigkeit der Interpolation wird durch die der Animation zugehörigen {{cssxref("timing-function", "Timingfunktion")}} bestimmt.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<p>Dies sind gültige Zahlenwerte:</p> + +<pre class="eval">12 Reiner <integer> ist ebenfalls eine <number> +4.01 Positive <number>, die keine Ganzzahl ist +-456.8 Negative <number>, die keine Ganzzahl ist +0.0 Null ++0.0 Null mit führendem + +-0.0 Null mit führendem - (obwohl seltsam, ist dies ein erlaubter Wert) +.60 Ziffern vor dem Punkt sind optional +10e3 Wissenschaftliche Notation ist erlaubt +-3.4e-2 Komplexester Fall wissenschaftlicher Notation +</pre> + +<p>Dies sind ungültige Zahlenwerte:</p> + +<pre class="eval">12. Dem Punkt sollte eine Zahl folgen ++-12.2 Nur ein führendes +/- ist erlaubt +12.1.1 Nur ein Punkt ist erlaubt +</pre> + +<h2 id="Spezifikationen">Spezifikationen</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 Values', '#numbers', '<number>')}}</td> + <td>{{Spec2('CSS3 Values')}}</td> + <td>Keine wesentliche Änderung in Bezug auf CSS Level 2 (Revision 1)</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'syndata.html#numbers', '<number>')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Explizit definiert</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '', '<number>')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Implizit definiert</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{Compat("css.types.number")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{CSSxRef("<integer>")}}</li> +</ul> diff --git a/files/de/web/css/object-fit/index.html b/files/de/web/css/object-fit/index.html new file mode 100644 index 0000000000..7fbbc5267e --- /dev/null +++ b/files/de/web/css/object-fit/index.html @@ -0,0 +1,148 @@ +--- +title: object-fit +slug: Web/CSS/object-fit +tags: + - CSS + - CSS Eigenschaft + - CSS Image + - Grafik + - Layout + - Referenz + - Web +translation_of: Web/CSS/object-fit +--- +<div>{{ CSSRef }}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>object-fit</code> CSS Eigenschaft gibt an, wie die Inhalte eines ersetzten Elements an die Box angepasst werden, die durch dessen verwendeter Höhe und Breite erzeugt wird.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="twopartsyntaxbox">{{csssyntax}}</pre> + +<pre><code>object-fit: fill</code> +<code>object-fit: contain</code> +<code>object-fit: cover</code> +<code>object-fit: none</code> +<code>object-fit: scale-down</code> +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code>fill</code></dt> + <dd>Der ersetzte Inhalt wird in der Größe angepasst, sodass er die Inhaltsbox des Elements ausfüllt: die konkrete Objektgröße entspricht der verwendeten Breite und Höhe des Elements.</dd> + <dt><code>contain</code></dt> + <dd>Der ersetzte Inhalt wird in der Größe angepasst, sodass das Seitenverhältnis beibehalten wird während es an die Inhaltsbox des Elements angepasst wird: die konkrete Objektgröße wird als eine Inhaltsbeschränkung auf die verwendete Breite und Höhe des Elements bestimmt.</dd> + <dt><code>cover</code></dt> + <dd>Der ersetzte Inhalt wird in der Größe angepasst, sodass das Seitenverhältnis beibehalten wird während die gesamte Inhaltsbox des Elements ausgefüllt wird: die konkrete Objektgröße wird als eine Abdeckbeschränkung auf die verwendete Breite und Höhe des Elements bestimmt.</dd> + <dt><code>none</code></dt> + <dd>Der ersetzte Inhalt wird nicht in der Größe angepasst, um in die Inhaltsbox des Elements zu passen: die konkrete Objektgröße wird durch den Standardalgorithmus zur Größenanpassung und eine Standardobjektgröße gleich der verwendeten Breite und Höhe des ersetzten Elements bestimmt.</dd> + <dt><code>scale-down</code></dt> + <dd>Der Inhalt wird in der Größe geändert als ob none oder contain angegeben wäre, je nachdem welches in einer kleineren konkreten Objektgröße resultieren würde.</dd> +</dl> + +<h2 id="Beispiel">Beispiel</h2> + +<h3 id="HTML_Inhalt">HTML Inhalt</h3> + +<pre class="brush: html"><div> + <h2>object-fit: fill</h2> + <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill"/> + + <h2>object-fit: contain</h2> + <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain"/> + + <h2>object-fit: cover</h2> + <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover"/> + + <h2>object-fit: none</h2> + <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none"/> + + <h2>object-fit: scale-down</h2> + <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down"/> +</div></pre> + +<h3 id="CSS_Inhalt">CSS Inhalt</h3> + +<pre class="brush: css">h2 { + font-family: Courier New, monospace; + font-size: 1em; + margin: 1em 0 0.3em; +} + +div { + display: flex; + flex-direction: column; + flex-wrap: wrap; + align-items: flex-start; + height: 450px; +} + +img { + width: 150px; + height: 100px; + border: 1px solid #000; +} + +.fill { + object-fit: fill; +} + +.contain { + object-fit: contain; +} + +.cover { + object-fit: cover; +} + +.none { + object-fit: none; +} + +.scale-down { + object-fit: scale-down; +} +</pre> + +<h3 id="Ausgabe">Ausgabe</h3> + +<p>{{ EmbedLiveSample('Beispiel', 500, 450) }}</p> + +<h2 id="Spezifikationen">Spezifikationen</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('CSS4 Images', '#the-object-fit', 'object-fit')}}</td> + <td>{{Spec2('CSS4 Images')}}</td> + <td>Die Schlüsselwörter <code>from-image</code> und <code>flip</code> wurden hinzugefügt.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Images', '#the-object-fit', 'object-fit')}}</td> + <td>{{Spec2('CSS3 Images')}}</td> + <td>Ursprüngliche Spezifikation</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{Compat("css.properties.object-fit")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Andere Bild bezogene CSS Eigenschaften: {{cssxref("object-position")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}.</li> +</ul> diff --git a/files/de/web/css/object-position/index.html b/files/de/web/css/object-position/index.html new file mode 100644 index 0000000000..e3b2dd4f80 --- /dev/null +++ b/files/de/web/css/object-position/index.html @@ -0,0 +1,147 @@ +--- +title: object-position +slug: Web/CSS/object-position +translation_of: Web/CSS/object-position +--- +<div>{{CSSRef}}</div> + +<p>Die Eigenschaft <strong><code>object-position </code></strong>bestimmt die Ausrichtung des Elements in seiner Box.</p> + +<pre class="brush:css no-line-numbers">/* <position> Werte */ +object-position: 100px 50px; + +/* Globale Werte */ +object-position: inherit; +object-position: initial; +object-position: unset; +</pre> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<h3 id="Values" name="Values">Values</h3> + +<dl> + <dt><code><position></code></dt> + <dd>Is a {{ cssxref("<position>") }}, that is one to four values representing a 2D position regarding the edges of the element's box. Relative or absolute offsets can be given. Note that the position can be set outside of the element's box.</dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Example" name="Example">Example</h2> + +<h3 id="HTML_content">HTML content</h3> + +<pre class="brush: html"><img id="object-position-1" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN Logo"/> +<img id="object-position-2" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN Logo"/> +</pre> + +<h3 id="CSS_content">CSS content</h3> + +<pre class="brush: css">img { + width: 300px; + height: 250px; + border: 1px solid black; + background-color: silver; + margin-right: 1em; + object-fit: none; +} + +#object-position-1 { + object-position: 10px; +} + +#object-position-2 { + object-position: 100% 10%; +} +</pre> + +<h3 id="Output">Output</h3> + +<p>{{ EmbedLiveSample('Example', '100%','300px') }}</p> + +<h2 id="Specifications" name="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Images', '#the-object-position', 'object-position')}}</td> + <td>{{Spec2('CSS4 Images')}}</td> + <td>The <code>from-image</code> and <code>flip</code> keywords have been added.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Images', '#the-object-position', 'object-position')}}</td> + <td>{{Spec2('CSS3 Images')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>31.0</td> + <td>{{ CompatGeckoDesktop("36") }}</td> + <td>{{CompatNo}}</td> + <td>11.60{{ property_prefix("-o") }}<br> + 19.0</td> + <td>10.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>4.4.4</td> + <td>{{ CompatGeckoDesktop("36") }}</td> + <td>{{CompatNo}}</td> + <td>11.5{{ property_prefix("-o") }}<br> + 24</td> + <td>{{ CompatNo }}</td> + </tr> + </tbody> +</table> +<br> +[1] WebKit Nightly fixed in bug <a href="https://bugs.webkit.org/show_bug.cgi?id=122811">122811</a>.</div> + +<h2 id="See_also" name="See_also">See also</h2> + +<ul> + <li>Other image-related CSS properties: {{cssxref("object-fit")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}.</li> +</ul> diff --git a/files/de/web/css/opacity/index.html b/files/de/web/css/opacity/index.html new file mode 100644 index 0000000000..6781cbfee6 --- /dev/null +++ b/files/de/web/css/opacity/index.html @@ -0,0 +1,158 @@ +--- +title: opacity +slug: Web/CSS/opacity +tags: + - CSS + - CSS Eigenschaft + - Referenz +translation_of: Web/CSS/opacity +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <strong><code>opacity</code></strong> CSS Eigenschaft gibt die Transparenz eines Elements an, d. h. den Grad, zu welchem der Hintergrund des Elements überlagert wird.</p> + +<p>Der Wert wird dem gesamten Element zugewiesen einschließlich dessen Inhalten, auch wenn der Wert nicht durch Kindelemente geerbt wird. Dadurch haben ein Element und seine Kindelemente alle dieselbe Deckkraft relativ zum Hintergrund des Elements, auch wenn das Element und seine Kindelemente untereinander unterschiedliche Werte für die Deckkraft haben.</p> + +<p>Wird für diese Eigenschaft ein Wert anders als <code>1</code> festgelegt, bewirkt dies, dass das Element in einen neuen <a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">Stapelkontext</a> versetzt wird.</p> + +<p>Falls <a href="http://stackoverflow.com/questions/13508877/resetting-the-opacity-of-a-child-elements-maple-browser-samsung-tv-app">ein Kindelement nicht den Wert für die Deckkraft haben soll</a>, kann stattdessen die {{cssxref("background")}} Eigenschaft verwendet werden. Zum Beispiel:</p> + +<pre class="brush:css">background: rgba(0, 0, 0, 0.4);</pre> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">/* Komplett undurchsichtig */ +opacity: 1; +opacity: 1.0; + +/* Durchscheinend */ +opacity: 0.6; + +/* Komplett transparent */ +opacity: 0.0; +opacity: 0; + +/* Globale Werte */ +opacity: inherit; +opacity: initial; +opacity: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code><number></code></dt> + <dd>Ist eine {{cssxref("<number>")}} im Bereich von <code>0.0</code> bis <code>1.0</code>, beide einschließlich, die die Deckkraft des Alphakanals repräsentiert. Jeder Wert außerhalb des Intervalls, obwohl gültig, wird abgeschnitten auf die nächstliegende Grenze innerhalb des Bereichs. + <table class="standard-table"> + <tbody> + <tr> + <th>Wert</th> + <th>Bedeutung</th> + </tr> + <tr> + <td><code>0</code></td> + <td>Das Element ist vollkommen transparent (d. h. unsichtbar).</td> + </tr> + <tr> + <td>Irgendeine {{cssxref("<number>")}} genau zwischen <code>0</code> und <code>1</code></td> + <td>Das Element ist durchsichtig (d. h. der Hintergrund scheint durch).</td> + </tr> + <tr> + <td><code>1</code></td> + <td>Das Element ist vollkommen opak (blickdicht).</td> + </tr> + </tbody> + </table> + </dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Einfaches_Beispiel">Einfaches Beispiel</h3> + +<pre class="brush: css">div { + background-color: yellow; +} + +.light { + opacity: 0.2; /* Der Text kann kaum über dem Hintergrund gelesen werden */ +} + +.medium { + opacity: 0.5; /* Der Text ist besser über dem Hintergrund lesbar */ +} + +.heavy { + opacity: 0.9; /* Der Text ist sehr deutlich über dem Hintergrund lesbar */ +} +</pre> + +<pre class="brush: html"><div class="light">Dies kann kaum gesehen werden.</div> +<div class="medium">Dies ist einfacher zu sehen.</div> +<div class="heavy">Dies ist sehr deutlich sichtbar.</div> +</pre> + +<p>{{EmbedLiveSample('Einfaches_Beispiel', '640', '64')}}</p> + +<h3 id="Andere_Deckkraft_mit_hover">Andere Deckkraft mit <code>:hover</code></h3> + +<pre class="brush: css">img.opacity { + opacity: 1; + filter: alpha(opacity=100); /* IE8 and lower */ + zoom: 1; /* Triggers "hasLayout" in IE 7 and lower */ +} + +img.opacity:hover { + opacity: 0.5; + filter: alpha(opacity=50); + zoom: 1; +}</pre> + +<pre class="brush: html"><img src="//developer.mozilla.org/media/img/mdn-logo.png" + alt="MDN logo" width="128" height="146" + class="opacity"> +</pre> + +<p>{{EmbedLiveSample('Andere_Deckkraft_mit_hover', '150', '175')}}</p> + +<h2 id="Spezifikationen">Spezifikationen</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 Transitions', '#animatable-css', 'opacity')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Definiert <code>opacity</code> als animierbar.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Colors', '#propdef-opacity', 'opacity')}}</td> + <td>{{Spec2('CSS3 Colors')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.properties.opacity")}} + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="https://msdn.microsoft.com/en-us/library/ms532910%28VS.85%29.aspx">MSDN Microsofts <code>filter:alpha(opacity=xx)</code></a></li> +</ul> diff --git a/files/de/web/css/order/index.html b/files/de/web/css/order/index.html new file mode 100644 index 0000000000..7b3a099ded --- /dev/null +++ b/files/de/web/css/order/index.html @@ -0,0 +1,104 @@ +--- +title: order +slug: Web/CSS/order +tags: + - CSS + - CSS Eigenschaft + - CSS Flexible Boxes + - Layout + - NeedsLiveSample + - Referenz + - Web +translation_of: Web/CSS/order +--- +<div>{{ CSSRef("CSS Flexible Boxes") }}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>order</code> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft gibt die Reihenfolge an, in der Flexelemente innerhalb ihres Flexcontainers dargestellt werden. Elemente werden in aufsteigender Reihenfolge des <code>order</code> Werts dargestellt. Elemente mit dem gleichen <code>order</code> Wert werden in der Reihenfolge dargestellt, in der sie im Quelltext auftauchen.</p> + +<div class="note"> +<p><strong>Hinweis:</strong> <code>order</code> beeinflusst nur die visuelle Reihenfolge von Elementen und nicht deren logische oder Tab-Reihenfolge. <code>order</code> darf nicht bei nicht visuellen Medien wie Sprache verwendet werden.</p> +</div> + +<p>{{cssinfo}}</p> + +<p>Siehe die <a class="new" href="https://developer.mozilla.org/de/docs/Web/Guide/CSS/Flexible_boxes" title="/en/CSS/Using_CSS_flexible_boxes">Verwendung von flexiblen Boxen</a> für mehr Informationen.</p> + +<p>{{ Note("<code>order</code> ist nur dazu gedacht, die visuelle Reihenfolge festzulegen, nicht die logische Reihenfolge der Elemente. Die Eigenschaft darf nicht auf nicht-visuelle Medien wie beispielsweise Sprache angewendet werden.") }}</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="brush:css">/* Nummerische Werte inklusive negativer Zahlen */ +order: 5; +order: -5; + +/* Globale Werte */ +order: inherit; +order: initial; +order: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code><integer></code></dt> + <dd>Repräsentiert die ordinale Position des Flexelements.</dd> +</dl> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiele" name="Beispiele">Beispiele</h2> + +<p>Einfache HTML-Struktur:</p> + +<pre class="brush:html;"><!DOCTYPE html> +<header>…</header> +<div id='main'> + <article>…</article> + <nav>…</nav> + <aside>…</aside> +</div> +<footer>…</footer></pre> + +<p>Der folgende CSS Code erzeugt ein klassisches Layout mit zwei Seitenleisten, die einen Inhaltsbereich umschließen. Das Flexible Box Layout Modul erzeugt automatisch Blöcke gleicher vertikaler Größe und verwendet gesamten zur Verfügung stehenden horizontalen Platz.</p> + +<pre class="brush:css;">#main { display: flex; } +#main > article { flex:1; order: 2; } +#main > nav { width: 200px; order: 1; } +#main > aside { width: 200px; order: 3; }</pre> + +<h2 id="Spezifikationen">Spezifikationen</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 Flexbox', '#order-property', 'order') }}</td> + <td>{{ Spec2('CSS3 Flexbox') }}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.properties.order")}} + +<p>[1] Firefox unterstützt bis Version 28 nur einzeiliges Flexbox Layout. Um Flexbox Unterstützung für Firefox 18 und 19 zu aktivieren, muss die Einstellung <code>layout.css.flexbox.enabled</code> in <code>about:config</code> auf <code>true</code> gesetzt werden.</p> + +<p>Firefox verändert aktuell fälschlicherweise die Tab-Reihenfolge der Elemente. Siehe {{bug("812687")}}.</p> + +<p>[2] Im Internet Explorer 10 wird ein flexibler Container durch <code>display:-ms-flexbox</code> angegeben, nicht durch <code>display:flex</code>.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a class="new" href="https://developer.mozilla.org/de/docs/Web/Guide/CSS/Flexible_boxes" title="CSS/Using_CSS_flexible_boxes">Verwenden von CSS Flexible Boxes</a></li> +</ul> diff --git a/files/de/web/css/orphans/index.html b/files/de/web/css/orphans/index.html new file mode 100644 index 0000000000..0e1c984025 --- /dev/null +++ b/files/de/web/css/orphans/index.html @@ -0,0 +1,121 @@ +--- +title: orphans +slug: Web/CSS/orphans +tags: + - CSS + - CSS3 + - Layout + - Referenz + - mehrspaltige Layouts +translation_of: Web/CSS/orphans +--- +<div>{{CSSRef}}</div> + +<p>Die <a href="/de/docs/CSS">CSS</a>-Eigenschaft <strong><code>orphans</code></strong> legt die Mindestanzahl von Zeilen in einem Blockcontainer fest, die unten auf einer <a href="/de/docs/Web/CSS/Paged_Media">Seite</a>, eines Bereichs oder einer <a href="/de/docs/Web/CSS/CSS_Columns">Spalte</a> angezeigt werden müssen.</p> + +<pre class="brush:css no-line-numbers notranslate">/* <integer> values */ +orphans: 2; +orphans: 3; + +/* Global values */ +orphans: inherit; +orphans: initial; +orphans: unset; +</pre> + +<div class="note"> +<p><strong>Hinweis:</strong> In der Typografie ist ein <em>Schusterjunge</em> die erste Zeile eines Absatzes, die allein am unteren Rand einer Seite angezeigt wird (der Absatz wird auf einer nachfolgenden Seite fortgesetzt).</p> +</div> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<h3 id="Values" name="Values">Werte</h3> + +<dl> + <dt>{{cssxref("<integer>")}}</dt> + <dd>Die Mindestanzahl von Zeilen, die vor einem Fragmentierungsbruch am unteren Rand eines Fragments verbleiben können. Der Wert muss positiv sein.</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="Beispiel">Beispiel</h2> + +<h3 id="Festlegung_einer_Mindestgröße_für_Waisenkinder_von_drei_Zeilen">Festlegung einer Mindestgröße für Waisenkinder von drei Zeilen</h3> + +<h4 id="HTML">HTML</h4> + +<div id="Setting_a_minimum_orphan_size_of_three_lines"> +<pre class="brush: html notranslate"><div> + <p>This is the first paragraph containing some text.</p> + <p>This is the second paragraph containing some more text than the first one. It is used to demonstrate how orphans work.</p> + <p>This is the third paragraph. It has a little bit more text than the first one.</p> +</div> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css; highlight[5] notranslate">div { + background-color: #8cffa0; + height: 150px; + columns: 3; + orphans: 3; +} + +p { + background-color: #8ca0ff; +} + +p:first-child { + margin-top: 0; +} +</pre> +</div> + +<h4 id="Ergebnis">Ergebnis</h4> + +<p>{{EmbedLiveSample("Setting_a_minimum_orphan_size_of_three_lines", 380, 150)}}</p> + +<h2 id="Specifications" name="Specifications">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('CSS3 Fragmentation', '#widows-orphans', 'orphans')}}</td> + <td>{{Spec2('CSS3 Fragmentation')}}</td> + <td>Erweitert <code>orphans</code>, die auf alle Fragmenttypen angewendet werden können, einschließlich Seiten, Regionen oder Spalten.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'page.html#break-inside', 'orphans')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Initiale Definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browserkompatibilität</h2> + +<div> + + +<p>{{Compat("css.properties.orphans")}}</p> +</div> + +<h2 id="See_also" name="See_also">Siehe auch</h2> + +<ul> + <li>{{cssxref("widows")}}</li> + <li><a href="https://developer.mozilla.org/de/docs/Web/CSS/Paged_Media">Seitennummerierte Medien</a></li> +</ul> diff --git a/files/de/web/css/outline-color/index.html b/files/de/web/css/outline-color/index.html new file mode 100644 index 0000000000..c802720159 --- /dev/null +++ b/files/de/web/css/outline-color/index.html @@ -0,0 +1,154 @@ +--- +title: outline-color +slug: Web/CSS/outline-color +translation_of: Web/CSS/outline-color +--- +<div><span style="line-height: 1.5;">{{CSSRef}}</span></div> + +<h2 id="Zusammenfassung">Zusammenfassung</h2> + +<p>Die <strong><code>outline-color</code></strong> CSS-Eigenschaft bestimmt die Farbe der Outline (den Umriss) eines Elements. Eine Outline ist eine Linie, die außerhalb des Rahmens (border) um Elemente gezeigt wird, damit das Element hervorsticht.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">/* Keyword values */ +outline-color: invert; +outline-color: red; + +/* Global values */ +outline-color: inherit; +outline-color: initial; +outline-color: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code><color></code></dt> + <dd>See {{cssxref("<color>")}} for the various color keywords and notations.</dd> + <dt><code>invert</code></dt> + <dd>To ensure the outline is visible, performs a color inversion of the background. This makes the focus border more salient, regardless of the color in the background. Note that browsers are not required to support it. If not, they just consider the statement as invalid</dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiel">Beispiel</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html;"><p class="example">My outline is blue, da ba dee.</p></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css; highlight:[3]">.example { + /* first need to set "outline" */ + outline: 2px solid; + /* make the outline blue */ + outline-color: #0000FF; +}</pre> + +<h3 id="Live">Live:</h3> + +<p>{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/outline-color') }}</p> + +<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('CSS3 Basic UI', '#outline-color', 'outline-color')}}</td> + <td>{{Spec2('CSS3 Basic UI')}}</td> + <td>No change</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'outline-color')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Defines <code>outline-color</code> as animatable.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'ui.html#propdef-outline-color', 'outline-color')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser Kompatibilität</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.8")}} [1]</td> + <td>8.0</td> + <td>7.0</td> + <td>1.2 (125)</td> + </tr> + <tr> + <td><code>invert</code> value</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}} [2]</td> + <td>8.0</td> + <td>{{CompatNo}} [3]</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] In versions previous to Gecko 1.8: <code>-moz-outline-color</code>.</p> + +<p>[2] Support had been dropped in version 3.0 (1.9).</p> + +<p>[3] Supported in Opera 7 but support was dropped in Opera 15 with the adoption of Chromium/Blink engine.</p> diff --git a/files/de/web/css/outline/index.html b/files/de/web/css/outline/index.html new file mode 100644 index 0000000000..48b3666cce --- /dev/null +++ b/files/de/web/css/outline/index.html @@ -0,0 +1,162 @@ +--- +title: outline +slug: Web/CSS/outline +tags: + - CSS + - CSS Eigenschaft + - CSS Outline + - Layout + - Referenz + - 'recipe:css-shorthand-property' +translation_of: Web/CSS/outline +--- +<div>{{CSSRef}}</div> + +<p>Das <strong><code>outline</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Shorthand_properties">Eigenschaftskürzel</a> setzt alle outline Eigenschaften in einer einzigen Deklaration.</p> + +<div>{{EmbedInteractiveExample("pages/css/outline.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> + +<h2 id="Bestandteileigenschaften"><strong class="b5">Bestandteileigenschaften</strong></h2> + +<p>Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:</p> + +<ul> + <li><a href="/en-US/docs/Web/CSS/outline-color"><code>outline-color</code></a></li> + <li><a href="/en-US/docs/Web/CSS/outline-style"><code>outline-style</code></a></li> + <li><a href="/en-US/docs/Web/CSS/outline-width"><code>outline-width</code></a></li> +</ul> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: css no-line-numbers notranslate">/* style */ +outline: solid; + +/* color | style */ +outline: #f66 dashed; + +/* style | width */ +outline: inset thick; + +/* color | style | width */ +outline: green solid 3px; + +/* Global values */ +outline: inherit; +outline: initial; +outline: unset; +</pre> + +<p>Die <code>outline</code> Eigenschaft kann mit einem, zwei oder drei der unten aufgeführten Werte angegeben werden. Die Reihenfolge der Werte spielt dabei keine Rolle.</p> + +<div class="note"> +<p><strong>Hinweis:</strong> Der Umriss ist für viele Elemente unsichtbar, wenn sein Stil nicht definiert ist. Dies liegt daran, dass der Stil standardmäßig auf keinen Stil eingestellt ist: <code>none</code>. Eine bemerkenswerte Ausnahme bilden <code>input</code> Elemente, die von den Browsern als Standard-Stil vorgegeben werden.</p> +</div> + +<h3 id="Values">Values</h3> + +<dl> + <dt><code><'outline-color'></code></dt> + <dd>Legt die Farbe des Umrisses fest. Standardeinstellung ist die <code>currentcolor</code> (aktuelle Farbe), wenn sie nicht vorhanden ist. Siehe {{cssxref("outline-color")}}.</dd> + <dt><code><'outline-style'></code></dt> + <dd>Legt den Stil des Umrisses fest. Standardeinstellung ist <code>none</code>, wenn nicht vorhanden. Siehe {{cssxref("outline-style")}}.</dd> + <dt><code><'outline-width'></code></dt> + <dd>Legt die Dicke der Umrisslinie fest. Standardeinstellung ist <code>medium</code>, wenn nicht vorhanden. Siehe {{cssxref("outline-width")}}.</dd> +</dl> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p><a href="/de/docs/Web/CSS/border">Borders</a> und <code>outline</code> sind sehr ähnlich. Allerdings unterscheiden sich die Umrisse von den Grenzen in den folgenden Punkten:</p> + +<ul> + <li>Outlines nehmen nie Raum ein, da sie außerhalb des Inhalts eines Elements gezeichnet werden.</li> + <li> + <p>Gemäß der Spezifikation müssen Umrisse nicht rechteckig sein, obwohl sie es normalerweise sind.</p> + </li> +</ul> + +<p>Wie bei allen Kurzform-Eigenschaften werden alle ausgelassenen Unterwerte auf ihren <a href="/de/docs/Web/CSS/Initialwert">Initialwert</a> gesetzt.</p> + +<h2 id="Bedenken_zu_Zugänglichkeit">Bedenken zu Zugänglichkeit</h2> + +<p>Wenn Sie <code>outline</code> den Wert von <code>0</code> oder <code>none</code> zuweisen, wird der Standard-Fokussierungsstil des Browsers entfernt. Wenn ein Element mit ihm interagiert werden kann, muss es einen sichtbaren Fokusindikator haben. Sorgen Sie für eine offensichtliche Fokusgestaltung, wenn der Standardfokusstil entfernt wird.</p> + +<ul> + <li><a href="https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/">How to Design Useful and Usable Focus Indicators</a></li> + <li> + <p><abbr>WCAG</abbr> 2.1: <a href="https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html">Understanding Success Criterion 2.4.7: Focus Visible</a></p> + </li> +</ul> + +<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="Beschreibung_2">Beschreibung</h2> + +<h3 id="Verwendung_von_Umrissen_zum_Setzen_eines_Fokusstils">Verwendung von Umrissen zum Setzen eines Fokusstils</h3> + +<h4 id="HTML">HTML</h4> + +<div id="Using_outline_to_set_a_focus_style"> +<pre class="brush: html notranslate"><a href="#">This link has a special focus style.</a> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">a { + border: 1px solid; + border-radius: 3px; + display: inline-block; + margin: 10px; + padding: 5px; +} + +a:focus { + outline: 4px dotted #e73; + outline-offset: 4px; + background: #ffa; +} +</pre> +</div> + +<h4 id="Ergebnis">Ergebnis</h4> + +<p>{{EmbedLiveSample("Using_outline_to_set_a_focus_style", "100%", 60)}}</p> + +<h2 id="Spezifikationen">Spezifikationen</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 Basic UI', '#outline', 'outline')}}</td> + <td>{{Spec2('CSS3 Basic UI')}}</td> + <td>Keine Änderung.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'ui.html#propdef-outline', 'outline')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Anfangsdefinition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<div> +<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.properties.outline")}}</p> +</div> diff --git a/files/de/web/css/overflow-clip-box/index.html b/files/de/web/css/overflow-clip-box/index.html new file mode 100644 index 0000000000..bc8b4bb4ff --- /dev/null +++ b/files/de/web/css/overflow-clip-box/index.html @@ -0,0 +1,97 @@ +--- +title: overflow-clip-box +slug: Web/CSS/overflow-clip-box +tags: + - CSS + - CSS Eigenschaft + - CSS Referenz + - Referenz + - Web +translation_of: Mozilla/Gecko/Chrome/CSS/overflow-clip-box +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>overflow-clip-box</code> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft bestimmt, bezogen auf welche Box die Zuschnitt erfolgt, wenn ein Überlauf stattfindet.</p> + +<div class="note"> +<p>In Gecko wird standardmäßig <code>padding-box</code> überall verwendet, aber <code><input type="text"></code> und ähnliche Elemente verwenden den Wert <code>content-box</code>. Vor Firefox 29 war das Verhalten fest kodiert; seitdem benutzt Firefox diese Eigenschaft, die auch an anderen Stellen verwendet werden kann. Beachte, dass diese Eigenschaft nur in {{Glossary("User Agent")}} Stylesheets und dem Chrome Kontext standardmäßig aktiviert ist.</p> +</div> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">/* Schlüsselwortwerte */ +overflow-clip-box: padding-box; +overflow-clip-box: content-box; + +/* Globale Werte */ +overflow-clip-box: inherited; +overflow-clip-box: initial; +overflow-clip-box: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code>padding-box</code></dt> + <dd>Diese Schlüsselwort gibt an, dass der Zuschnitt relativ zur <a href="/de/docs/Web/CSS/Boxmodell">Paddingbox</a> erfolgt.</dd> + <dt><code>content-box</code></dt> + <dd>Diese Schlüsselwort gibt an, dass der Zuschnitt relativ zur <a href="/de/docs/Web/CSS/Boxmodell">Contentbox</a> erfolgt.</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="padding-box">padding-box</h3> + +<pre class="brush: html"><div class="things"> + <input value="ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ" class="scroll padding-box"> + <div class="scroll padding-box"><span>ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ</span></div> +</div> +</pre> + +<pre class="brush: css">.scroll { + overflow: auto; + padding: 0 30px; + width: 6em; + border: 1px solid black; + background: lime content-box; +}</pre> + +<pre class="brush: css">.padding-box { + overflow-clip-box: padding-box; +} +</pre> + +<pre class="brush: js">function scrollSomeElements() { + var elms = document.querySelectorAll('.scroll'); + for (i=0; i < elms.length; ++i) { + elms[i].scrollLeft=80; + } +} +var elt = document.queryElementsByTagName('body')[0]; + +elt.addEventListener("load", scrollSomeElements, false); +</pre> + +<p>{{EmbedLiveSample('padding-box')}}</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<p>Diese Eigenschaft wurde der W3C CSSWG vorgeschlagen; sie ist noch nicht standardisiert, aber, falls sie akzeptiert wird, sollte sie in {{SpecName("CSS3 Overflow")}} erscheinen.</p> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.properties.overflow-clip-box")}} + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Ähnliche CSS Eigenschaften: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{Cssxref("overflow")}}, {{Cssxref("overflow-x")}}, {{Cssxref("overflow-y")}}, {{Cssxref("clip")}}, {{Cssxref("display")}}</li> +</ul> diff --git a/files/de/web/css/overflow/index.html b/files/de/web/css/overflow/index.html new file mode 100644 index 0000000000..eec5ccd2bc --- /dev/null +++ b/files/de/web/css/overflow/index.html @@ -0,0 +1,130 @@ +--- +title: overflow +slug: Web/CSS/overflow +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/overflow +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>overflow</code> Eigenschaft legt fest, ob Inhalte aus einem Element hinausragen dürfen oder, ob Scrollbalken beim Überlauf zum Einsatz kommen.</p> + +<ul> + <li>Standardwert: visible</li> + <li>Anwendbar auf: block, inline und table-cell Elemente</li> + <li>Vererbbar: Nein</li> + <li>Prozentwerte: Nein</li> + <li>Medium: visuell</li> + <li>berechneter Wert: wie festgelegt</li> +</ul> + +<h2 id="Syntax">Syntax</h2> + +<pre class="eval">overflow: visible | hidden | scroll | auto | inherit +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt>visible</dt> + <dd>Standardwert. Der Inhalt wird nicht abgeschnitten und kann aus dem Element hinausragen.</dd> + <dt>hidden</dt> + <dd>Der Inhalt wird abgeschnitten und es werden keine Scrollbalken angezeigt.</dd> + <dt>scroll</dt> + <dd>Es werden immer Scrollbalken angezeigt, auch wenn der Inhalt nicht überläuft.</dd> + <dt>auto</dt> + <dd>Hängt vom Browser ab. Firefox stellt Scrollbalken zur Verfügung, wenn der Inhalt überläuft.</dd> + <dt>inherit</dt> + <dd>Der Wert des Elternelements wird geerbt.</dd> +</dl> + +<h4 id="Mozilla_Erweiterungen">Mozilla Erweiterungen</h4> + +<dl> + <dt>-moz-scrollbars-none</dt> + <dd>{{ obsolete_inline() }} stattdessen overflow:hidden</dd> + <dt>-moz-scrollbars-horizontal</dt> + <dd>{{ Deprecated_inline() }} Verwendung von <a href="/de/docs/Web/CSS/overflow-x" title="de/CSS/overflow-x"><code>overflow-x</code></a> und <a href="/de/docs/Web/CSS/overflow-y" title="de/CSS/overflow-y"><code>overflow-y</code></a> wird bevorzugt.</dd> + <dt>-moz-scrollbars-vertical</dt> + <dd>{{ Deprecated_inline() }} Verwendung von <a href="/de/docs/Web/CSS/overflow-x" title="de/CSS/overflow-x"><code>overflow-x</code></a> und <a href="/de/docs/Web/CSS/overflow-y" title="de/CSS/overflow-y"><code>overflow-y</code></a> wird bevorzugt.</dd> + <dt>-moz-hidden-unscrollable</dt> + <dd>Deaktiviert das Scrollen für das Wurzelelement (<html>, <body>) und ist nur für interne Zwecke gedacht (z.B. Themes).</dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<pre>p { + width: 12em; + height: 6em; + border: dotted; + overflow: auto; /* Scrollbalken erscheinen nur wenn nötig */ +} + +</pre> + +<p style="overflow: hidden; width: 12em; height: 6em; border: dotted;"><code>overflow: hidden</code><br> + Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p> + +<p style="overflow: scroll; width: 12em; height: 6em; border: dotted;"><code>overflow: scroll</code><br> + Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p> + +<p style="overflow: auto; width: 12em; height: 6em; border: dotted;"><code>overflow: auto</code><br> + Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p> + +<p style="overflow: auto; width: 12em; height: 6em; border: dotted;"><code>overflow: auto</code><br> + wenig Text</p> + +<p style="overflow: visible; width: 12em; height: 6em; border: dotted;"><code>overflow: visible</code><br> + Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p> + +<h2 id="Hinweise">Hinweise</h2> + +<p>Bis einschließlich Gecko 1.9.2 (Firefox 3.6), war die <code>overflow</code> Eigenschaft fälschlicherweise auch für Tabellengruppen verfügbar (<code><thead></code> , <code><tbody></code> , <code><tfoot></code>). Dieses Verhalten wurde in späteren Versionen korrigiert.</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 Overflow', '#propdef-overflow', 'overflow')}}</td> + <td>{{Spec2('CSS3 Overflow')}}</td> + <td> + <p>Changed syntax to allow one or two keywords instead of only one</p> + </td> + </tr> + <tr> + <td>{{SpecName('CSS3 Box', '#propdef-overflow', 'overflow')}}</td> + <td>{{Spec2('CSS3 Box')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'visufx.html#overflow', 'overflow')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_Kompatibilität">Browser <span>Kompatibilität</span></h2> + +<p>{{Compat("css.properties.overflow")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Ähnliche CSS Eigenschaften: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{Cssxref("overflow-x")}}, {{Cssxref("overflow-y")}}, {{Cssxref("clip")}} +</li></ul> + +<p>{{ languages( { "en": "en/CSS/overflow" } ) }}</p> diff --git a/files/de/web/css/overscroll-behavior-y/index.html b/files/de/web/css/overscroll-behavior-y/index.html new file mode 100644 index 0000000000..996350ccac --- /dev/null +++ b/files/de/web/css/overscroll-behavior-y/index.html @@ -0,0 +1,85 @@ +--- +title: overscroll-behavior-y +slug: Web/CSS/overscroll-behavior-y +translation_of: Web/CSS/overscroll-behavior-y +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary">Die <strong><code>overscroll-behavior-y</code></strong> CSS Eigenschaft ändert das Browserverhalten, wenn die vertikale Grenze des Scrollbereichs erreicht wurde.</span></p> + +<div class="note"> +<p><strong>Eine vollständige Erklärung gibt es auch unter</strong> {{cssxref("overscroll-behavior")}} .</p> +</div> + +<pre class="brush:css no-line-numbers">/* Keyword values */ +overscroll-behavior: auto; /* default */ +overscroll-behavior: contain; +overscroll-behavior: none; + +/* Global values */ +overflow: inherit; +overflow: initial; +overflow: unset; +</pre> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<p>Die <code>overscroll-behavior-y</code> Eigenschaft kann mit einem der untenstehenden Schlüsselworte definiert werden:</p> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>Das standardmäßige Scrollüberlaufverhalten wird eingestellt.</dd> + <dt><code>contain</code></dt> + <dd>Es wird das standardmäßige Scrollüberlaufverhalten im aktuellen Element eingestellt, die Scrollverkettung, d.h. das gelichzeitige Scrollen von darunterliegenden Elementen wird verhindert.</dd> + <dt><code>none</code></dt> + <dd>Es gibt keine Scrollverkettung zu benachbarten Scrollzonen und das Standard-Scrollverhalten wird verhindert.</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush: css">.messages { + height: 220px; + overflow: auto; + overscroll-behavior-y: contain; +} </pre> + +<p>Eine vollständige Erklärung gibt es auch unter {{cssxref("overscroll-behavior")}}</p> + +<h2 id="Spezifikationen">Spezifikationen</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('Overscroll Behavior', '#propdef-overscroll-behavior-y','overscroll-behavior-y')}}</td> + <td>{{Spec2('Overscroll Behavior')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("css.properties.overscroll-behavior-y")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="https://developers.google.com/web/updates/2017/11/overscroll-behavior#demo">Scroll-Aktionen überwachen: "Pull-to-Refresh" und Überlaufeffekte individualisieren</a></li> +</ul> diff --git a/files/de/web/css/overscroll-behavior/index.html b/files/de/web/css/overscroll-behavior/index.html new file mode 100644 index 0000000000..f2a7e10165 --- /dev/null +++ b/files/de/web/css/overscroll-behavior/index.html @@ -0,0 +1,104 @@ +--- +title: overscroll-behavior +slug: Web/CSS/overscroll-behavior +translation_of: Web/CSS/overscroll-behavior +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary">The <strong><code>overscroll-behavior</code></strong> CSS property sets what a browser does when reaching the boundary of a scrolling area. It's a shorthand for {{cssxref("overscroll-behavior-x")}} and {{cssxref("overscroll-behavior-y")}}.</span></p> + +<pre class="brush:css no-line-numbers">/* Keyword values */ +overscroll-behavior: auto; /* default */ +overscroll-behavior: contain; +overscroll-behavior: none; + +/* Two values */ +overscroll-behavior: auto contain; + +/* Global values */ +overflow: inherit; +overflow: initial; +overflow: unset; +</pre> + +<p>By default, mobile browsers tend to provide a "bounce" effect or even a page refresh when the top or bottom of a page (or other scroll area) is reached. You may also have noticed that when you have a dialog box with scrolling content on top of a page of scrolling content, once the dialog box's scroll boundary is reached, the underlying page will then start to scroll — this is called <strong>scroll chaining</strong>.</p> + +<p>In some cases these behaviors are not desirable. you can use <code>overscroll-behavior</code> to get rid of unwanted scroll chaining and the browser's Facebook/Twitter app-inspired "pull to refresh"-type behavior.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<p>The <code>overscroll-behavior</code> property is specified as one or two keywords chosen from the list of values below.</p> + +<p>Two keywords specifies the <code>overscroll-behavior</code> value on the <code>x</code> and <code>y</code> axes respectively. If only one value is specified, both x and y are assumed to have the same value.</p> + +<h3 id="Values">Values</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>The default scroll overflow behavior occurs as normal.</dd> + <dt><code>contain</code></dt> + <dd>Default scroll overflow behavior is observed inside the element this value is set on (e.g. "bounce" effects or refreshes), but no scroll chaining occurs to neighbouring scrolling areas, e.g. underlying elements will not scroll.</dd> + <dt><code>none</code></dt> + <dd>No scroll chaining occurs to neighbouring scrolling areas, and default scroll overflow behavior is prevented.</dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples">Examples</h2> + +<p>In our <a href="https://mdn.github.io/css-examples/overscroll-behavior/">overscroll-behavior example</a> (see the <a href="https://github.com/mdn/css-examples/tree/master/overscroll-behavior">source code</a> also), we present a full-page list of fake contacts, and a dialog box containing a chat window. </p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15778/example.png" style="border-style: solid; border-width: 1px; display: block; height: 622px; margin: 0px auto; width: 350px;"></p> + +<p>Both of these areas scroll; normally if you scrolled the chat window until you hit a scroll boundary, the underlying contacts window would start to scroll too, which is not desirable. This can be stopped using <code>overscroll-behavior-y</code> (<code>overscroll-behavior</code> would also work) on the chat window, like this:</p> + +<pre class="brush: css">.messages { + height: 220px; + overflow: auto; + overscroll-behavior-y: contain; +} </pre> + +<p>We also wanted to get rid of the standard overscroll effects when the contacts are scrolled to the top or bottom (e.g. Chrome on Android refreshes the page when you scroll past the top boundary). This can be prevented by setting <code>overscroll-behavior: none</code> on the {{htmlelement("body")}} element:</p> + +<pre class="brush: css">body { + margin: 0; + overscroll-behavior: none; +}</pre> + +<h2 id="Specifications">Specifications</h2> + +<p>Until the CSSWG publishes their own draft, the specification can only be found in its <a href="https://wicg.github.io/overscroll-behavior/">WICG Github Repository</a>.</p> + +<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 Overscroll Behavior', '#propdef-overscroll-behavior', 'overscroll-behavior')}}</td> + <td>{{Spec2('CSS Overscroll Behavior')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("css.properties.overscroll-behavior")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a dir="ltr" href="https://developers.google.com/web/updates/2017/11/overscroll-behavior#demo" id="PPElite" lang="de" name="Patrick Malinowski">Take control of your scroll: customizing pull-to-refresh and overflow effects</a></li> + <li>{{cssxref("-ms-scroll-chaining")}}</li> +</ul> diff --git a/files/de/web/css/padding-bottom/index.html b/files/de/web/css/padding-bottom/index.html new file mode 100644 index 0000000000..dc288c4904 --- /dev/null +++ b/files/de/web/css/padding-bottom/index.html @@ -0,0 +1,76 @@ +--- +title: padding-bottom +slug: Web/CSS/padding-bottom +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/padding-bottom +--- +<p>{{ CSSRef() }}</p> +<h2 id="Übersicht">Übersicht</h2> +<p>Die <code>padding-bottom</code> Eigenschaft legt den unteren Innenabstand eines Elementes fest. Der Innenabstand ist der Bereich zwischen dem Inhalt und dem <a href="/de/CSS/border" title="de/CSS/border">Rahmen</a> (auch: <em>padding area</em>).</p> +<ul> + <li>Standardwert: <code>0</code></li> + <li>Anwendbar auf: alle Elemente außer <code>table-*-group</code>, <code>table-row</code> und <code>table-column</code></li> + <li>Vererbbar: Nein</li> + <li>Prozentwerte: beziehen sich auf die <a href="/de/CSS/width" title="de/CSS/width">Breite</a> des umschließenden Blocks.</li> + <li>Medium: visuell</li> + <li>berechneter Wert: eine Prozentzahl wie festgelegt oder die absolute Länge.</li> +</ul> +<h2 id="Syntax">Syntax</h2> +<pre class="eval">padding-bottom: <Längenangabe> | <Prozentzahl> | inherit</pre> +<h3 id="Werte">Werte</h3> +<dl> + <dt> + <Längenangabe></dt> + <dd> + Legt eine bestimmte <a href="/de/CSS/Einheiten#L.c3.a4ngen" title="de/CSS/Einheiten#L.c3.a4ngen">Länge</a> fest. Negative Werte sind <strong>nicht</strong> erlaubt.</dd> + <dt> + <Prozentzahl></dt> + <dd> + Ein <a href="/de/CSS/Einheiten#Prozent" title="de/CSS/Einheiten#Prozent">prozentualer</a> Wert, der sich auf die Breite des umschließenden Blocks (containing block) bezieht. Negative Werte <strong>nicht</strong> sind erlaubt.</dd> + <dt> + inherit</dt> + <dd> + Der Wert des Elternelements wird geerbt.</dd> +</dl> +<h2 id="Beispiele">Beispiele</h2> +<pre>.content { padding-bottom: 5%; } +.sidebox { padding-bottom: 10px; } +</pre> +<h2 id="Browser_Kompatibilität">Browser <span>Kompatibilität</span></h2> +<table class="standard-table"> + <tbody> + <tr> + <th>Browser</th> + <th>ab Version</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>4.0</td> + </tr> + <tr> + <td>Firefox (Gecko)</td> + <td>1.0 (1.0)</td> + </tr> + <tr> + <td>Opera</td> + <td>3.5</td> + </tr> + <tr> + <td>Safari (WebKit)</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +<h2 id="Spezifikation">Spezifikation</h2> +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#padding-properties" lang="en">CSS 2.1 Box #padding</a></li> +</ul> +<h2 id="Siehe_auch">Siehe auch</h2> +<ul> + <li><a href="/de/CSS/padding" title="de/CSS/padding"><code>padding</code></a>, <a href="/de/CSS/padding-right" title="de/CSS/padding-right"><code>padding-right</code></a>, <a href="/de/CSS/padding-top" title="de/CSS/padding-top"><code>padding-top</code></a>, <a href="/de/CSS/padding-left" title="de/CSS/padding-left"><code>padding-left</code></a></li> + <li><a href="/de/CSS/-moz-padding-start" title="de/CSS/-moz-padding-start"><code>-moz-padding-start</code></a>, <a href="/de/CSS/-moz-padding-end" title="de/CSS/-moz-paddding-end"><code>-moz-padding-end</code></a></li> + <li><a href="/de/CSS/margin" title="de/CSS/margin"><code>margin</code></a></li> +</ul> +<p>{{ languages( { "en": "en/CSS/padding-bottom", "ja": "ja/CSS/padding-bottom" } ) }}</p> diff --git a/files/de/web/css/padding-left/index.html b/files/de/web/css/padding-left/index.html new file mode 100644 index 0000000000..601e6a5037 --- /dev/null +++ b/files/de/web/css/padding-left/index.html @@ -0,0 +1,86 @@ +--- +title: padding-left +slug: Web/CSS/padding-left +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/padding-left +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>padding-left</code> Eigenschaft legt den linken Innenabstand eines Elementes fest. Der Innenabstand ist der Bereich zwischen dem Inhalt und dem <a href="/de/CSS/border" title="de/CSS/border">Rahmen</a> (auch: <em>padding area</em>).</p> + +<ul> + <li>Standardwert: <code>0</code></li> + <li>Anwendbar auf: alle Elemente außer <code>table-*-group</code>, <code>table-row</code> und <code>table-column</code></li> + <li>Vererbbar: nein</li> + <li>Prozentwerte: beziehen sich auf die <a href="/de/CSS/width" title="de/CSS/width">Breite</a> des umschließenden Blocks.</li> + <li>Medium: visuell</li> + <li>berechneter Wert: eine Prozentzahl wie festgelegt oder die absolute Länge.</li> +</ul> + +<h2 id="Syntax">Syntax</h2> + +<pre class="eval">padding-left: <Längenangabe> | <Prozentzahl> | inherit</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><Längenangabe></dt> + <dd>Legt eine bestimmte <a href="/de/CSS/Einheiten#L.c3.a4ngen" title="de/CSS/Einheiten#L.c3.a4ngen">Länge</a> fest. Negative Werte sind <strong>nicht</strong> erlaubt.</dd> + <dt><Prozentzahl></dt> + <dd>Ein <a href="/de/CSS/Einheiten#Prozent" title="de/CSS/Einheiten#Prozent">prozentualer</a> Wert, der sich auf die Breite des umschließenden Blocks (containing block) bezieht. Negative Werte <strong>nicht</strong> sind erlaubt.</dd> + <dt>inherit</dt> + <dd>Der Wert des Elternelements wird geerbt.</dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<pre>.content { padding-left: 5%; } +.sidebox { padding-left: 10px; } +</pre> + +<h2 id="Browser_Kompatibilität">Browser <span>Kompatibilität</span></h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Browser</th> + <th>ab Version</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>4.0</td> + </tr> + <tr> + <td>Firefox (Gecko)</td> + <td>1.0 (1.0)</td> + </tr> + <tr> + <td>Opera</td> + <td>3.5</td> + </tr> + <tr> + <td>Safari (WebKit)</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> + +<h2 id="Spezifikation">Spezifikation</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#padding-properties" lang="en">CSS 2.1 Box #padding</a></li> +</ul> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/CSS/padding" title="de/CSS/padding"><code>padding</code></a>, <a href="/de/CSS/padding-right" title="de/CSS/padding-right"><code>padding-right</code></a>, <a href="/de/CSS/padding-bottom" title="de/CSS/padding-bottom"><code>padding-bottom</code></a>, <a href="/de/CSS/padding-top" title="de/CSS/padding-top"><code>padding-top</code></a></li> + <li><a href="/de/CSS/-moz-padding-start" title="de/CSS/-moz-padding-start"><code>-moz-padding-start</code></a>, <a href="/de/CSS/-moz-padding-end" title="de/CSS/-moz-paddding-end"><code>-moz-padding-end</code></a></li> + <li><a href="/de/CSS/margin" title="de/CSS/margin"><code>margin</code></a></li> +</ul> + +<p>{{ languages( { "en": "en/CSS/padding-left", "ja": "ja/CSS/padding-left" } ) }}</p> diff --git a/files/de/web/css/padding-right/index.html b/files/de/web/css/padding-right/index.html new file mode 100644 index 0000000000..a41d823d52 --- /dev/null +++ b/files/de/web/css/padding-right/index.html @@ -0,0 +1,76 @@ +--- +title: padding-right +slug: Web/CSS/padding-right +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/padding-right +--- +<p>{{ CSSRef() }}</p> +<h2 id="Übersicht">Übersicht</h2> +<p>Die <code>padding-right</code> Eigenschaft legt den rechten Innenabstand eines Elementes fest. Der Innenabstand ist der Bereich zwischen dem Inhalt und dem <a href="/de/CSS/border" title="de/CSS/border">Rahmen</a> (auch: <em>padding area</em>).</p> +<ul> + <li>Standardwert: <code>0</code></li> + <li>Anwendbar auf: alle Elemente außer <code>table-*-group</code>, <code>table-row</code> und <code>table-column</code></li> + <li>Vererbbar: Nein</li> + <li>Prozentwerte: beziehen sich auf die <a href="/de/CSS/width" title="de/CSS/width">Breite</a> des umschließenden Blocks.</li> + <li>Medium: visuell</li> + <li>berechneter Wert: eine Prozentzahl wie festgelegt oder die absolute Länge.</li> +</ul> +<h2 id="Syntax">Syntax</h2> +<pre class="eval">padding-right: <Längenangabe> | <Prozentzahl> | inherit</pre> +<h3 id="Werte">Werte</h3> +<dl> + <dt> + <Längenangabe></dt> + <dd> + Legt eine bestimmte <a href="/de/CSS/Einheiten#L.c3.a4ngen" title="de/CSS/Einheiten#L.c3.a4ngen">Länge</a> fest. Negative Werte sind <strong>nicht</strong> erlaubt.</dd> + <dt> + <Prozentzahl></dt> + <dd> + Ein <a href="/de/CSS/Einheiten#Prozent" title="de/CSS/Einheiten#Prozent">prozentualer</a> Wert, der sich auf die Breite des umschließenden Blocks (containing block) bezieht. Negative Werte <strong>nicht</strong> sind erlaubt.</dd> + <dt> + inherit</dt> + <dd> + Der Wert des Elternelements wird geerbt.</dd> +</dl> +<h2 id="Beispiele">Beispiele</h2> +<pre>.content { padding-right: 5%; } +.sidebox { padding-right: 10px; } +</pre> +<h2 id="Browser_Kompatibilität">Browser <span>Kompatibilität</span></h2> +<table class="standard-table"> + <tbody> + <tr> + <th>Browser</th> + <th>ab Version</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>4.0</td> + </tr> + <tr> + <td>Firefox (Gecko)</td> + <td>1.0 (1.0)</td> + </tr> + <tr> + <td>Opera</td> + <td>3.5</td> + </tr> + <tr> + <td>Safari (WebKit)</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +<h2 id="Spezifikation">Spezifikation</h2> +<ul> + <li>{{ spec("http://www.w3.org/TR/CSS21/box.html#padding-properties","CSS 2.1 Box: padding", "CR") }}</li> +</ul> +<h2 id="Siehe_auch">Siehe auch</h2> +<ul> + <li><a href="/de/CSS/padding" title="de/CSS/padding"><code>padding</code></a>, <a href="/de/CSS/padding-top" title="de/CSS/padding-top"><code>padding-top</code></a>, <a href="/de/CSS/padding-bottom" title="de/CSS/padding-bottom"><code>padding-bottom</code></a>, <a href="/de/CSS/padding-left" title="de/CSS/padding-left"><code>padding-left</code></a></li> + <li><a href="/de/CSS/-moz-padding-start" title="de/CSS/-moz-padding-start"><code>-moz-padding-start</code></a>, <a href="/de/CSS/-moz-padding-end" title="de/CSS/-moz-paddding-end"><code>-moz-padding-end</code></a></li> + <li><a href="/de/CSS/margin" title="de/CSS/margin"><code>margin</code></a></li> +</ul> +<p>{{ languages( { "en": "en/CSS/padding-right", "ja": "ja/CSS/padding-right" } ) }}</p> diff --git a/files/de/web/css/padding-top/index.html b/files/de/web/css/padding-top/index.html new file mode 100644 index 0000000000..319bde784a --- /dev/null +++ b/files/de/web/css/padding-top/index.html @@ -0,0 +1,76 @@ +--- +title: padding-top +slug: Web/CSS/padding-top +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/padding-top +--- +<p>{{ CSSRef() }}</p> +<h2 id="Übersicht">Übersicht</h2> +<p>Die <code>padding-top</code> Eigenschaft legt den oberen Innenabstand eines Elementes fest. Der Innenabstand ist der Bereich zwischen dem Inhalt und dem <a href="/de/CSS/border" title="de/CSS/border">Rahmen</a> (auch: <em>padding area</em>).</p> +<ul> + <li>Standardwert: <code>0</code></li> + <li>Anwendbar auf: alle Elemente außer <code>table-*-group</code>, <code>table-row</code> und <code>table-column</code></li> + <li>Vererbbar: Nein</li> + <li>Prozentwerte: beziehen sich auf die <a href="/de/CSS/width" title="de/CSS/width">Breite</a> des umschließenden Blocks.</li> + <li>Medium: visuell</li> + <li>berechneter Wert: eine Prozentzahl wie festgelegt oder die absolute Länge.</li> +</ul> +<h2 id="Syntax">Syntax</h2> +<pre class="eval">padding-top: <Längenangabe> | <Prozentzahl> | inherit</pre> +<h3 id="Werte">Werte</h3> +<dl> + <dt> + <Längenangabe></dt> + <dd> + Legt eine bestimmte <a href="/de/CSS/Einheiten#L.c3.a4ngen" title="de/CSS/Einheiten#L.c3.a4ngen">Länge</a> fest. Negative Werte sind <strong>nicht</strong> erlaubt.</dd> + <dt> + <Prozentzahl></dt> + <dd> + Ein <a href="/de/CSS/Einheiten#Prozent" title="de/CSS/Einheiten#Prozent">prozentualer</a> Wert, der sich auf die Breite des umschließenden Blocks (containing block) bezieht. Negative Werte <strong>nicht</strong> sind erlaubt.</dd> + <dt> + inherit</dt> + <dd> + Der Wert des Elternelements wird geerbt.</dd> +</dl> +<h2 id="Beispiele">Beispiele</h2> +<pre>.content { padding-top: 5%; } +.sidebox { padding-top: 10px; } +</pre> +<h2 id="Browser_Kompatibilität">Browser <span>Kompatibilität</span></h2> +<table class="standard-table"> + <tbody> + <tr> + <th>Browser</th> + <th>ab Version</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>4.0</td> + </tr> + <tr> + <td>Firefox (Gecko)</td> + <td>1.0 (1.0)</td> + </tr> + <tr> + <td>Opera</td> + <td>3.5</td> + </tr> + <tr> + <td>Safari (WebKit)</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +<h2 id="Spezifikation">Spezifikation</h2> +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#padding-properties" lang="en">CSS 2.1 Box #padding</a></li> +</ul> +<h2 id="Siehe_auch">Siehe auch</h2> +<ul> + <li><a href="/de/CSS/padding" title="de/CSS/padding"><code>padding</code></a>, <a href="/de/CSS/padding-right" title="de/CSS/padding-right"><code>padding-right</code></a>, <a href="/de/CSS/padding-bottom" title="de/CSS/padding-bottom"><code>padding-bottom</code></a>, <a href="/de/CSS/padding-left" title="de/CSS/padding-left"><code>padding-left</code></a></li> + <li><a href="/de/CSS/-moz-padding-start" title="de/CSS/-moz-padding-start"><code>-moz-padding-start</code></a>, <a href="/de/CSS/-moz-padding-end" title="de/CSS/-moz-paddding-end"><code>-moz-padding-end</code></a></li> + <li><a href="/de/CSS/margin" title="de/CSS/margin"><code>margin</code></a></li> +</ul> +<p>{{ languages( { "en": "en/CSS/padding-top", "ja": "ja/CSS/padding-top" } ) }}</p> diff --git a/files/de/web/css/padding/index.html b/files/de/web/css/padding/index.html new file mode 100644 index 0000000000..96406d0299 --- /dev/null +++ b/files/de/web/css/padding/index.html @@ -0,0 +1,125 @@ +--- +title: padding +slug: Web/CSS/padding +tags: + - CSS + - CSS Eigenschaft + - CSS Innenabstand + - CSS Referenz + - Layout + - Web +translation_of: Web/CSS/padding +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>padding</code> Eigenschaft ist eine Kurzform für die Innenabstände aller vier Seiten eines Elementes. Der Innenabstand ist der Bereich zwischen dem Inhalt und dem <a href="/de/CSS/border" title="de/CSS/border">Rahmen</a> (auch: <em>padding area</em>).</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="eval">padding: [ <Längenangabe> | <Prozentzahl> ] {1,4} | inherit</pre> + +<h3 id="Werte">Werte</h3> + +<p>Es werden bis zu vier der folgenden Werte akzeptiert:</p> + +<dl> + <dt><Längenangabe></dt> + <dd>Legt eine bestimmte <a href="/de/CSS/Einheiten#L.c3.a4ngen" title="de/CSS/Einheiten#L.c3.a4ngen">Länge</a> fest. Negative Werte sind <strong>nicht</strong> erlaubt.</dd> + <dt><Prozentzahl></dt> + <dd>Ein <a href="/de/CSS/Einheiten#Prozent" title="de/CSS/Einheiten#Prozent">prozentualer</a> Wert, der sich auf die Breite des umschließenden Blocks (containing block) bezieht. Negative Werte <strong>nicht</strong> sind erlaubt.</dd> + <dt>inherit</dt> + <dd>Der Wert des Elternelements wird geerbt.</dd> + <dt>Ein Wert</dt> + <dd>Gilt für alle vier Seiten.</dd> + <dt>Zwei Werte</dt> + <dd>Der erste Wert bestimmt die <a href="/de/CSS/padding-top" title="de/CSS/padding-top">oberen</a> und <a href="/de/CSS/padding-bottom" title="de/CSS/padding-bottom">unteren</a> Abstände, der zweite Wert legt die Abstände <a href="/de/CSS/padding-right" title="de/CSS/padding-right">rechts</a> und <a href="/de/CSS/padding-left" title="de/CSS/padding-left">links</a> fest.</dd> + <dt>Drei Werte</dt> + <dd>Der erste Wert bestimmt den <a href="/de/CSS/padding-top" title="de/CSS/padding-top">oberen</a> Abstand, der zweite Wert legt die Abstände für <a href="/de/CSS/padding-right" title="de/CSS/padding-right">rechts</a> und <a href="/de/CSS/padding-left" title="de/CSS/padding-left">links</a> zusammen fest und der dritte Wert bestimmt den <a href="/de/CSS/padding-bottom" title="de/CSS/padding-bottom">unteren</a> Abstand.</dd> + <dt>Vier Werte</dt> + <dd>Für jede Seite können die Abstände einzeln festgelegt werden. In der Reihenfolge: <a href="/de/CSS/padding-top" title="de/CSS/padding-top">oben</a>, <a href="/de/CSS/padding-right" title="de/CSS/padding-right">rechts</a>, <a href="/de/CSS/padding-bottom" title="de/CSS/padding-bottom">unten</a>, <a href="/de/CSS/padding-left" title="de/CSS/padding-left">links</a>.</dd> +</dl> + +<h3 id="Beispiele">Beispiele</h3> + +<pre>padding: 5%; /* 5% Abstand auf allen Seiten */ + +padding: 10px; /* 10px Abstand auf allen Seiten */ + +padding: 10px 20px; /* oben und unten 10px */ + /* links und rechts 20px */ + +padding: 10px 3% 20px; /* oben 10px */ + /* links und rechts 3% */ + /* unten 20px */ + +padding: 1em 3px 30px 5px; /* oben 1em */ + /* rechts 3px */ + /* unten 30px */ + /* links 5px */ +</pre> + +<p style="border: outset; padding: 5% 1em;">border:outset; padding:5% 1em;</p> + +<h2 id="Livebeispiel" name="Livebeispiel">Livebeispiel</h2> + +<h3 id="HTML_Inhalt">HTML Inhalt</h3> + +<pre class="brush: html language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h4</span><span class="punctuation token">></span></span>Hallo Welt!<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h4</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h3</span><span class="punctuation token">></span></span>Der Innenabstand ist in dieser Zeile anders.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h3</span><span class="punctuation token">></span></span></code></pre> + +<h3 id="CSS_Inhalt">CSS Inhalt</h3> + +<pre class="brush: css language-css"><code class="language-css"><span class="selector token">h4 </span><span class="punctuation token">{</span> +<span class="property token"> background-color</span><span class="punctuation token">:</span> green<span class="punctuation token">;</span> +<span class="property token"> padding</span><span class="punctuation token">:</span> 50px 20px 20px 50px<span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="selector token">h3</span><span class="punctuation token">{</span> +<span class="property token"> background-color</span><span class="punctuation token">:</span> blue<span class="punctuation token">;</span> +<span class="property token"> padding</span><span class="punctuation token">:</span> 400px 50px 50px 400px<span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<p>{{ EmbedLiveSample('Livebeispiel') }}</p> + +<h2 id="Spezifikationen">Spezifikationen</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 Box', '#the-padding', 'padding') }}</td> + <td>{{ Spec2('CSS3 Box') }}</td> + <td>keine Änderung</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'box.html#propdef-padding', 'padding-top') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>keine Änderung</td> + </tr> + <tr> + <td>{{ Specname('CSS1', '#padding', 'padding') }}</td> + <td>{{ Spec2('CSS1') }}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browserkompatiblität</h2> + +{{Compat("css.properties.padding")}} + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a class="internal" href="/de/docs/Web/CSS/Boxmodell" title="en/CSS/box model">CSS Boxmodell</a></li> +</ul> diff --git a/files/de/web/css/page-break-after/index.html b/files/de/web/css/page-break-after/index.html new file mode 100644 index 0000000000..ef08a19da6 --- /dev/null +++ b/files/de/web/css/page-break-after/index.html @@ -0,0 +1,90 @@ +--- +title: page-break-after +slug: Web/CSS/page-break-after +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/page-break-after +--- +<p>{{ CSSRef() }}</p> +<h2 id="Übersicht">Übersicht</h2> +<p>Die <code>page-break-after</code> Eigenschaft dient zur Regulierung von Seitenumbrüchen nach dem aktuellen Element.</p> +<ul> + <li>Standardwert: <code>auto</code></li> + <li>Anwendbar auf: Blockelemente</li> + <li>Vererbbar: Nein</li> + <li>Prozentwerte: Nein</li> + <li>Medium: visuell, Seiten</li> + <li>berechneter Wert: wie festgelegt</li> +</ul> +<h2 id="Syntax">Syntax</h2> +<pre class="eval">page-break-after: auto | always | avoid | left | right | inherit +</pre> +<h3 id="Werte">Werte</h3> +<dl> + <dt> + auto</dt> + <dd> + Standardwert. Automatischer Seitenumbruch.</dd> + <dt> + always</dt> + <dd> + Es wird immer ein Seitenumbruch nach einem Element eingefügt.</dd> + <dt> + avoid {{ Unimplemented_inline() }}</dt> + <dd> + Ein Seitenumbruch nach einem Element wird vermieden.</dd> + <dt> + left {{ Unimplemented_inline() }}</dt> + <dd> + Es wird ein Seitenumbruch eingefügt, sodass das folgende Element auf der nächsten linken Seite platziert wird.</dd> + <dt> + right {{ Unimplemented_inline() }}</dt> + <dd> + Es wird ein Seitenumbruch eingefügt, sodass das folgende Element auf der nächsten rechten Seite platziert wird.</dd> + <dt> + inherit {{ Unimplemented_inline() }}</dt> + <dd> + Der Wert des Elternelements wird geerbt.</dd> +</dl> +<h2 id="Beispiele">Beispiele</h2> +<pre>/* Überschriften auf eine neue Seite platzieren */ +h1,h2, h3 { page-break-after:always; } +</pre> +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> +<table class="standard-table"> + <tbody> + <tr> + <th>Browser</th> + <th>ab Version</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>4.0</td> + </tr> + <tr> + <td>Firefox (Gecko)</td> + <td>1.0 (1.0) [*]</td> + </tr> + <tr> + <td>Opera</td> + <td>7.0</td> + </tr> + <tr> + <td>Safari (WebKit)</td> + <td>1.2 (125)</td> + </tr> + </tbody> +</table> +<p>[*] Gecko unterstützt nur <code>page-break-after:always</code>. Siehe {{ bug(132035) }}</p> +<h2 id="Spezifikation">Spezifikation</h2> +<ul> + <li><a class="external" href="http://www.w3.org/TR/css3-page/#page-break-after" lang="en">CSS 3 Paged Media #page-break-after</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS2/page.html#propdef-page-break-after" lang="en">CSS 2.1 Paged Media #page-break-after</a></li> +</ul> +<h2 id="Siehe_auch">Siehe auch</h2> +<ul> + <li><a href="/de/CSS/page-break-before"><code>page-break-before</code></a>, <a href="/de/CSS/page-break-inside" title="de/CSS/page-break-inside"><code>page-break-inside</code></a></li> + <li><a href="/de/CSS/orphans" title="de/CSS/orphans"><code>orphans</code></a>, <a href="/de/CSS/widows" title="de/CSS/widows"><code>widows</code></a></li> +</ul> +<p>{{ languages( {"en": "en/CSS/page-break-after" } ) }}</p> diff --git a/files/de/web/css/page-break-before/index.html b/files/de/web/css/page-break-before/index.html new file mode 100644 index 0000000000..7dfffaf948 --- /dev/null +++ b/files/de/web/css/page-break-before/index.html @@ -0,0 +1,90 @@ +--- +title: page-break-before +slug: Web/CSS/page-break-before +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/page-break-before +--- +<p>{{ CSSRef() }}</p> +<h2 id="Übersicht">Übersicht</h2> +<p>Die <code>page-break-before</code> Eigenschaft dient zur Regulierung von Seitenumbrüchen vor dem aktuellen Element.</p> +<ul> + <li>Standardwert: <code>auto</code></li> + <li>Anwendbar auf: Blockelemente</li> + <li>Vererbbar: Nein</li> + <li>Prozentwerte: Nein</li> + <li>Medium: visuell, Seiten</li> + <li>berechneter Wert: wie festgelegt</li> +</ul> +<h2 id="Syntax">Syntax</h2> +<pre class="eval">page-break-before: auto | always | avoid | left | right | inherit +</pre> +<h3 id="Werte">Werte</h3> +<dl> + <dt> + auto</dt> + <dd> + Standardwert. Automatischer Seitenumbruch.</dd> + <dt> + always</dt> + <dd> + Es wird immer ein Seitenumbruch vor einem Element eingefügt.</dd> + <dt> + avoid {{ Unimplemented_inline() }}</dt> + <dd> + Ein Seitenumbruch vor einem Element wird vermieden.</dd> + <dt> + left {{ Unimplemented_inline() }}</dt> + <dd> + Es wird ein Seitenumbruch eingefügt, sodass das folgende Element auf der nächsten linken Seite platziert wird.</dd> + <dt> + right {{ Unimplemented_inline() }}</dt> + <dd> + Es wird ein Seitenumbruch eingefügt, sodass das folgende Element auf der nächsten rechten Seite platziert wird.</dd> + <dt> + inherit {{ Unimplemented_inline() }}</dt> + <dd> + Der Wert des Elternelements wird geerbt.</dd> +</dl> +<h2 id="Beispiele">Beispiele</h2> +<pre>/* Vermeide Seitenumbruch vor dem div-Element */ +div.note { page-break-before: avoid; } +</pre> +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> +<table class="standard-table"> + <tbody> + <tr> + <th>Browser</th> + <th>ab Version</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>4.0</td> + </tr> + <tr> + <td>Firefox (Gecko)</td> + <td>1.0 (1.0) [*]</td> + </tr> + <tr> + <td>Opera</td> + <td>7.0</td> + </tr> + <tr> + <td>Safari (WebKit)</td> + <td>1.2 (125)</td> + </tr> + </tbody> +</table> +<p>[*] Gecko unterstützt nur <code>page-break-before:always</code>. Siehe {{ bug(132035) }}</p> +<h2 id="Spezifikation">Spezifikation</h2> +<ul> + <li><a class="external" href="http://www.w3.org/TR/css3-page/#page-break-before" lang="en">CSS 3 Paged Media #page-break-before</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS2/page.html#propdef-page-break-before" lang="en">CSS 2.1 Paged Media #page-break-before</a></li> +</ul> +<h2 id="Siehe_auch">Siehe auch</h2> +<ul> + <li><a href="/de/CSS/page-break-after"><code>page-break-after</code></a>, <a href="/de/CSS/page-break-inside"><code>page-break-inside</code></a></li> + <li><a href="/de/CSS/orphans" title="de/CSS/orphans"><code>orphans</code></a>, <a href="/de/CSS/widows" title="de/CSS/widows"><code>widows</code></a></li> +</ul> +<p>{{ languages( {"en": "en/CSS/page-break-before" } ) }}</p> diff --git a/files/de/web/css/page-break-inside/index.html b/files/de/web/css/page-break-inside/index.html new file mode 100644 index 0000000000..6136f98b9e --- /dev/null +++ b/files/de/web/css/page-break-inside/index.html @@ -0,0 +1,87 @@ +--- +title: page-break-inside +slug: Web/CSS/page-break-inside +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/page-break-inside +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>page-break-inside</code> Eigenschaft dient zur Regulierung von Seitenumbrüchen innerhalb des aktuellen Elements.</p> + +<ul> + <li>Standardwert: <code>auto</code></li> + <li>Anwendbar auf: Blockelemente</li> + <li>Vererbbar: Nein</li> + <li>Prozentwerte: Nein</li> + <li>Medium: visuell, Seiten</li> + <li>berechneter Wert: wie festgelegt</li> +</ul> + +<h2 id="Syntax">Syntax</h2> + +<pre class="eval">page-break-inside: auto | avoid | inherit +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt>auto</dt> + <dd>Standardwert. Automatischer Seitenumbruch.</dd> + <dt>avoid</dt> + <dd>Ein Seitenumbruch innerhalb eines Elements wird vermieden.</dd> + <dt>inherit</dt> + <dd>Der Wert des Elternelements wird geerbt.</dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<pre>/* Vermeide Seitenumbruch innerhalb des Absatzes */ +p { page-break-inside: avoid; } +</pre> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Browser</th> + <th>ab Version</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>8.0</td> + </tr> + <tr> + <td>Firefox (Gecko)</td> + <td>---</td> + </tr> + <tr> + <td>Opera</td> + <td>7.0</td> + </tr> + <tr> + <td>Safari (WebKit)</td> + <td>1.3 (312)</td> + </tr> + </tbody> +</table> + +<h2 id="Spezifikation">Spezifikation</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/css3-page/#page-break-inside" lang="en">CSS 3 Paged Media #page-break-inside</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS2/page.html#propdef-page-break-inside" lang="en">CSS 2.1 Paged Media #page-break-inside</a></li> +</ul> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/CSS/page-break-after" title="de/CSS/page-break-after"><code>page-break-after</code></a>, <a href="/de/docs/Web/CSS/page-break-before" title="de/CSS/page-break-before"><code>page-break-before</code></a></li> + <li><a href="/de/docs/Web/CSS/orphans" title="de/CSS/orphans"><code>orphans</code></a>, <a href="/de/docs/Web/CSS/widows" title="de/CSS/widows"><code>widows</code></a></li> +</ul> + +<p>{{ languages( {"en": "en/CSS/page-break-inside" } ) }}</p> diff --git a/files/de/web/css/paged_media/index.html b/files/de/web/css/paged_media/index.html new file mode 100644 index 0000000000..1a9fafe9cf --- /dev/null +++ b/files/de/web/css/paged_media/index.html @@ -0,0 +1,21 @@ +--- +title: Seitennummerierte Medien +slug: Web/CSS/Paged_Media +tags: + - CSS + - CSS3 + - Seitenumbrüche +translation_of: Web/CSS/Paged_Media +--- +<div>{{cssref}}</div> + +<p><strong>Seitennummerierte Medieneigenschaften</strong> steuern die Darstellung von Inhalten für den Druck oder andere Medien, die den Inhalt in separate Seiten aufteilen. Sie erlauben es, Seitenumbrüche zu setzen, den Druckbereich festzulegen, linke und rechte Seiten unterschiedlich zu gestalten und Umbrüche innerhalb von Elementen zu steuern. Allgemein unterstützte Eigenschaften beinhalten</p> + +<ul> + <li>{{cssxref("page-break-before")}}</li> + <li>{{cssxref("page-break-after")}}</li> + <li>{{cssxref("page-break-inside")}}</li> + <li>{{cssxref("orphans")}}</li> + <li>{{cssxref("widows")}}</li> + <li>{{cssxref("@page")}}</li> +</ul> diff --git a/files/de/web/css/percentage/index.html b/files/de/web/css/percentage/index.html new file mode 100644 index 0000000000..36cc54c434 --- /dev/null +++ b/files/de/web/css/percentage/index.html @@ -0,0 +1,84 @@ +--- +title: <percentage> +slug: Web/CSS/percentage +tags: + - CSS + - CSS Datentypen + - Layout + - Referenz + - Web +translation_of: Web/CSS/percentage +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Der <code><percentage></code> <a href="/de/docs/Web/CSS" title="CSS">CSS</a> Datentyp repräsentiert einen Prozentwert. Viele <a href="/de/docs/Web/CSS/CSS_Referenz" title="en/CSS_Reference">CSS Eigenschaften</a> akzeptieren Prozentwerte, oft um Größen bezüglich Elternobjekten zu definieren. Prozentwerte werden durch einen {{cssxref("<number>")}} Wert unmittelbar gefolgt von einem Prozentzeichen <code>%</code> angegeben. Wie bei allen Einheiten in CSS wird kein Leerzeichen zwischen der Zahl und dem '%' geschrieben.</p> + +<p>Viele Längeneigenschaften verwenden Prozentwerte, wie {{ Cssxref("width") }}, {{ Cssxref("margin") }} und {{ Cssxref("padding") }}. Prozentwerte können auch in {{ Cssxref("font-size") }} vorkommen, wo die Größe des Texts direkt von der Textgröße des Elternelements abhängt.</p> + +<div class="note"><strong>Hinweis:</strong> Nur berechnete Werte werden vererbt. D. h. auch wenn ein Prozentwert für eine Elterneigenschaft verwendet wird, wird für die vererbte Eigenschaft ein realer Wert, wie beispielsweise eine Breite in Pixeln für einen {{cssxref("<length>")}} Wert, verwendet, nicht der Prozentwert.</div> + +<h2 id="Interpolation">Interpolation</h2> + +<p>Werte des <code><percentage></code> CSS Datentyps können interpoliert werden, um Animationen zu erlauben. In diesem Fall werden sie als reale Fließkommazahlen interpoliert. Die Geschwindigkeit der Interpolation wird durch die <a href="/de/docs/Web/CSS/timing-function">Timingfunktion</a> bestimmt, die mit der Animation verbunden ist.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<div id="Beispiel_1"> +<pre class="brush: html"><div style="background-color:#0000FF;"> + <div style="width:50%;margin-left:20%;background-color:#00FF00;">Breite: 50%, linker Außenabstand: 20%</div> + <div style="width:30%;margin-left:60%;background-color:#FF0000;">Breite: 30%, linker Außenabstand: 60%</div> +</div> +</pre> +</div> + +<p>Ergibt:</p> + +<p>{{ EmbedLiveSample('Beispiel_1','600','70') }}</p> + +<div id="Beispiel_2"> +<pre class="brush: html"><div style="font-size:18px;"> + Text in Normalgröße (18px) + <span style="font-size:50%;">50%</span> + <span style="font-size:200%;">200%</span> +</div> +</pre> +</div> + +<p>Ergibt:</p> + +<p>{{ EmbedLiveSample('Beispiel_2','600','50') }}</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 Values', '#percentages', '<percentage>') }}</td> + <td>{{ Spec2('CSS3 Values') }}</td> + <td>Keine signifikante Änderung zu CSS Level 2 (Revision 1)</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'syndata.html#percentage-units', '<percentage>') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Keine Änderung zu CSS Level 1</td> + </tr> + <tr> + <td>{{ SpecName('CSS1', '#percentage-units', '<percentage>') }}</td> + <td>{{ Spec2('CSS1') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.types.percentage")}} diff --git a/files/de/web/css/pointer-events/index.html b/files/de/web/css/pointer-events/index.html new file mode 100644 index 0000000000..29916ac619 --- /dev/null +++ b/files/de/web/css/pointer-events/index.html @@ -0,0 +1,184 @@ +--- +title: pointer-events +slug: Web/CSS/pointer-events +translation_of: Web/CSS/pointer-events +--- +<div>{{CSSRef}}</div> + +<h2 id="Zusammenfassung">Zusammenfassung</h2> + +<p>Die CSS-Eigenschaft<strong> <code>pointer-events</code></strong> erlaubt es dem Autor zu steuern, unter welchen Umständen (wenn überhaupt) ein spezifisches grafisches Element <a href="/en-US/docs/Web/API/event.target">target</a> eines Mouse-Events wird. Wenn die Eigenschaft nicht gesetzt ist, werden die Eigenschaften von <code>visiblePainted</code> auf den SVG Inhalt angewandt.</p> + +<p>Der Wert <code>none</code> ist nicht nur Indikator, dass das Element kein Ziel für Mouse-Events ist, sondern weist den Mouse-Event zusätzlich an, "durch" das Element zu gehen und stattdessen auf was auch immer auch "darunterliegend" ist, zu zielen.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: css">/* Keyword values */ +pointer-events: auto; +pointer-events: none; +pointer-events: visiblePainted; +pointer-events: visibleFill; +pointer-events: visibleStroke; +pointer-events: visible; +pointer-events: painted; +pointer-events: fill; +pointer-events: stroke; +pointer-events: all; + +/* Global values */ +pointer-events: inherit; +pointer-events: initial; +pointer-events: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>Das Element verhält sich als ob die <code>pointer-events <font face="Open Sans, Arial, sans-serif">Eigenschaft nicht spezifiziert wurde. Im SVG-Inhalt hat dieser Wert und der Wert </font>visiblePainted</code> <code><font face="Open Sans, Arial, sans-serif">den selben Effekt.</font></code></dd> + <dt><code>none</code></dt> + <dd>Das Element ist nie das Ziel von Mouse-Events; trotzdem werden abstämmige Elemente angezielt, sofern Ihre <code>pointer-events </code>einen abweichenden Wert haben. In diesem Fall lösen Mouse-Events während Ihrem Weg zu/von den Nachkömmlingen während der Event-Capture/<a href="/en-US/docs/Web/API/event.bubbles">bubble</a>-Phasen gegebenenfalls die Event-Listener des übergeordneten Elements aus.</dd> + <dt><code>visiblePainted</code></dt> + <dd>Nur SVG. Das Element kann nur Ziel eines Mouse-Events werden, wenn die <code>visibility</code> Eigenschaft auf <code>visible</code> gesetzt ist, sich der Mauszeiger im Inneren (z. B. 'fill') befindet und die <code>fill-</code>Eigenschaft einen anderen Wert als <code>none</code> hat oder wenn sich der Mauszeiger über einem Umgrenzung (z. B. 'stroke') des Elements befindet und die <code>stroke-</code>Eigenschaft einen anderen Wert als <code>none </code>hat.</dd> + <dt><code>visibleFill</code></dt> + <dd>Nur SVG. Das Element kann nur Ziel eines Mouse-Events werden, wenn die <code>visibility</code> Eigenschaft auf <code>visible</code> gesetzt ist und sich der Mauszeiger im Inneren (z. B. 'fill') befindet. Der Wert der <code>fill-</code>Eigenschaft beinflusst die Event-Verarbeitung nicht.</dd> + <dt><code>visibleStroke</code></dt> + <dd>Nur SVG. Das Element kann nur Ziel eines Mouse-Events werden, wenn die <code>visibility</code> Eigenschaft auf <code>visible</code> gesetzt ist und sich der Mauszeiger über einem Umgrenzung (z. B. 'stroke') des Elements befindet. Der Wert der <code>stroke-</code>Eigenschaft beinflusst die Event-Verarbeitung nicht.</dd> + <dt><code>visible</code></dt> + <dd>Nur SVG. Das Element kann nur Ziel eines Mouse-Events werden, wenn die <code>visibility</code> Eigenschaft auf <code>visible</code> gesetzt ist und sich der Mauszeiger entweder im Inneren (z. B. 'fill') oder über einem Umgrenzung (z. B. 'stroke') des Elements befindet. Die Werte der <code>stroke- </code>und <code>fill-</code>Eigenschaft beinflussen die Event-Verarbeitung nicht.</dd> + <dt><code>painted</code></dt> + <dd>Nur SVG. Das Element kann nur Ziel eines Mouse-Events werden, wenn sich der Mauszeiger im Inneren (z. B. 'fill') des Elements befindet, und die <code>fill-</code>Eigenschaft einen anderen Wert als <code>none</code> hat, oder sich der Mauszeiger über einem Umgrenzung (z. B. 'stroke') des Elements befindet, und die <code>stroke-</code>Eigenschaft einen anderen Wert als <code>none </code>hat. Die Werte der <code>stroke- </code>und <code>fill-</code>Eigenschaft beinflussen die Event-Verarbeitung nicht.</dd> + <dt><code>fill</code></dt> + <dd>Nur SVG. Das Element kann nur Ziel eines Mouse-Events werden, wenn sich der Mauszeiger im Inneren (z. B. 'fill') des Elements befindet. Die Werte der <code>stroke- </code>und <code>fill-</code>Eigenschaft beinflussen die Event-Verarbeitung nicht.</dd> + <dt><code>stroke</code></dt> + <dd>Nur SVG. Das Element kann nur Ziel eines Mouse-Events werden, wenn sich der Mauszeiger über einem Umgrenzung (z. B. 'stroke') des Elements befinden. Die Werte der <code>stroke- </code>und <code>fill-</code>Eigenschaft beinflussen die Event-Verarbeitung nicht.</dd> + <dt><code>all</code></dt> + <dd>Nur SVG. Das Element kann nur Ziel eines Mouse-Events werden, wenn sich der Mauszeiger entweder im Inneren (z. B. 'fill') oder über einem Umgrenzung (z. B. 'stroke') des Elements befinden. Die Werte der <code>stroke- </code>und <code>fill-</code>Eigenschaft beinflussen die Event-Verarbeitung nicht.</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Beispiel_1">Beispiel 1</h3> + +<pre class="brush:css">/* Beispiel 1: Unterbinden die Reaktion von `img` auf alle Mouse-Events wie z. B. dragging, hovering, clicking */ +img { + pointer-events: none; +}</pre> + +<h3 id="Example_2" name="Example_2">Beispiel 2</h3> + +<p>Unterbinden eine Reaktion des Link-Tags mit der Eigenschaft href=http://example.com.</p> + +<pre class="brush:html"><ul> + <li><a href="https://developer.mozilla.org">MDN</a></li> + <li><a href="http://example.com">example.com</a></li> +</ul></pre> + +<pre class="brush:css">a[href="http://example.com"] { + pointer-events: none; +}</pre> + +<div>{{EmbedLiveSample('Example_2', "500", "100")}}</div> + +<h2 id="Anmerkungen">Anmerkungen</h2> + +<p>Es gilt zu beachten: Durch <code>pointer-events</code> zu verhindern, dass ein Element Ziel eines Mouse-Events wird, bedeutet nicht, dass Mouse-Event-Listeners auf diesem Element nicht ausgelößt <em>werden</em> oder <em>werden können</em>. Wenn bei einem der Kinder des Elements <code>pointer-events</code> explizit gesetzt wurde, um <em>zu erlauben</em>, dass dieses Ziel eines Mouse-Events wird, werden alle auf das Kind gerichteten Events entlang der Elternkette durch das Elternelement wandern und wohlmöglich Events des Elternelements auslösen. Natürlich wird jede Mausinteraktion auf einem Punkt des Bildschirms, welcher vom Eltern- aber nicht vom Kindelement bedeckt ist, weder vom Kind noch vom Elternelement eingefangen (sie wird durch das Elternelement <em>hindurchgehen und </em>auf das zielen, was immer "darunterliegend" ist).</p> + +<p>Wir würden gerne feingranularere Kontrolle (als lediglich <code>auto</code> und <code>none</code>) über die Teile eines Elements welche Mouse-Events "einfangen" und wann, im HTML bereitstellen. Um uns bei der Entscheidung zu helfen, welche <code>pointer-events</code> für HTML weiter ausgebaut werden sollten, oder wenn Sie irgend welche speziellen Wünsche haben, was Ihnen diese Eigenschaft ermöglichen sollte, dann fügen Sie diese bitte dem Use cases Abschnitt dieser <a class="link-https" href="https://wiki.mozilla.org/SVG:pointer-events">Wiki Seite</a> hinzu (Machen Sie sich über die Ordentlichkeit keine Sorgen).</p> + +<p>Diese Eigenschaft kann auch benutzt werden um bessere Bildraten beim Scrollen zu erzielen. Tatsächlich, während des Scrollens fährt die Maus über einige Elemente auf denen der <a href="/en-US/docs/Web/CSS/:hover">hover</a>-Effekt angewendet wird. Diese Effekte hingegen bleiben meist unbemerkt und resultieren trotzdem meist in hakeligen Scrollen. <code>pointer-events: none</code> auf den <code>body</code> anzuwenden deaktiviert Mouse-Events inkl. <code>hover</code> und wirkt sich positiv auf die Flüssigkeit des Scrollens. </p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikationen</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('SVG1.1', 'interact.html#PointerEventsProperty', 'pointer-events')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<p>Seine Erweiterung für HTML-Elemente, trotz Präsenz in frühen Entwürfen von CSS Basic User Interface Module Level 3, wurde auf sein <a class="external" href="http://wiki.csswg.org/spec/css4-ui#pointer-events">level 4</a> erhoben.</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser-Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>SVG support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.8")}}</td> + <td>11.0</td> + <td>9.0 (2.0)</td> + <td>3.0 (522)</td> + </tr> + <tr> + <td>HTML/XML content</td> + <td>2.0</td> + <td>{{CompatGeckoDesktop("1.9.2")}} [1]</td> + <td>11.0</td> + <td>15.0</td> + <td>4.0 (530)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Vor Firefox 41, standardmäßig deaktiviert. Seit Firefox 41, standardmäßig auf Desktop aktiviert, allerdings nur in Nightly builds.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Das SVG-Attribut {{SVGAttr("pointer-events")}}</li> + <li><a class="external" href="http://webkit.org/specs/PointerEventsProperty.html">WebKit Specs PointerEventsProperty</a> erweitert für den Gebrauch im (X)HTML Inhalt</li> + <li><a href="http://www.thecssninja.com/javascript/pointer-events-60fps">60fps scrolling using pointer-events: none</a></li> +</ul> diff --git a/files/de/web/css/position/index.html b/files/de/web/css/position/index.html new file mode 100644 index 0000000000..7acf3f3009 --- /dev/null +++ b/files/de/web/css/position/index.html @@ -0,0 +1,104 @@ +--- +title: position +slug: Web/CSS/position +tags: + - CSS + - CSS Eigenschaft + - CSS Positionierung + - Referenz +translation_of: Web/CSS/position +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>position</code> Eigenschaft legt die Positionsart eines Elements fest. Für die Positionierung selbst werden die Eigenschaften <a href="/De/CSS/Top" title="de/CSS/top"><code>top</code></a>, <a href="/De/CSS/Right" title="de/CSS/right"><code>right</code></a>, <a href="/De/CSS/Bottom" title="de/CSS/bottom"><code>bottom</code></a> oder <a href="/De/CSS/Left" title="de/CSS/left"><code>left</code></a> verwendet.</p> + +<p>Ein <em>positioniertes Element</em> ist ein Element für das <code>absolute</code>, <code>fixed</code> oder <code>relative</code> als <code>position</code> definiert wurde.<br> + Ein <em>absolut positioniertes Element</em> ist ein Element für das <code>absolute</code> oder <code>fixed</code> als <code>position</code> definiert wurde.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt>static</dt> + <dd>Standardwert. Das Element ist im normalen Fluss. Die Eigenschaften <code>top</code>, <code>right</code>, <code>bottom</code> oder <code>left</code> haben keine Auswirkungen.</dd> + <dt>relative</dt> + <dd>Das Element wird vom normalen Fluss aus verschoben und hat keinen Einfluss auf andere Elemente, da an der ursprünglichen Position Platz gelassen wird. Bei <code> table-*-group</code>,<code> table-row</code>,<code> table-column</code>,<code> table-cell</code>, und<code> table-caption </code>Elementen ist kein Effekt definiert.</dd> + <dt>absolute</dt> + <dd>Das Element wird aus dem normalen Fluss gelöst und unabhängig verschoben. Dabei können andere Elemente verdeckt werden. Diese verhalten sich so, als ob das Element nicht vorhanden wäre und lassen keinen Platz für das Element.</dd> + <dt>sticky {{Experimental_inline}}</dt> + <dd>Eine Mischung zwischen <code>fixed</code> und <code>relative</code>: Das Element wird vom normalen Fluss aus verschoben und hat keinen Einfluss auf andere Elemente, solange es sich innerhalb des Viewports befindet. Sobald es sich ausserhalb befindet, wird das Element aus dem normalen Fluss gelöst und bleibt so beim Scrollen an seiner fest definierten Position.</dd> + <dt>fixed</dt> + <dd>Die Verschiebung orientiert sich am Viewport. Das Element wird aus dem normalen Fluss gelöst und bleibt auch beim Scrollen an seiner fest definierten Position. Beim Drucken wird das Element auf <em>jeder Seite</em> an der positionierten Stelle angezeigt.</dd> + <dt>inherit</dt> + <dd>Der Wert des Elternelements wird geerbt.</dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<p>Das folgende Beispiel verdeutlicht den Unterschied zwischen <code>position: absolute</code> und <code>position: fixed</code>. Während das absolut positionierte Element beim Scrollen mitwandert, bleibt das mit <code>fixed</code> positionierte Element fest an seiner Position.</p> + +<pre><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> +<meta http-equiv="content-type" content="text/html; charset=utf-8"> +<title>Position absolute und fixed</title> +<style type="text/css"> +p {font-size:30px; line-height:3em;} +div.pos {width:49%; text-align:center; border:2px solid #00f;} +div#abs {position:absolute; bottom:0; left:0;} +div#fix {position:fixed; bottom:0; right:0;} +</style> +</head> +<body> + <p>This<br>is<br>some<br>tall,<br>tall, + <br>tall,<br>tall,<br>tall<br>content.</p> + <div id="fix" class="pos"><p>Fixed</p></div> + <div id="abs" class="pos"><p>Absolute</p></div> +</body> +</html> +</pre> + +<h2 id="Specifications" name="Specifications">Spezifikation</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Anmerkung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS2.1', 'visuren.html#propdef-position', 'position')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS3 Positioning')}}</td> + <td>{{Spec2('CSS3 Positioning')}}</td> + <td><code>sticky</code> hinzugefügt</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser Kompatibilität</h2> + +<p>{{Compat("css.properties.position")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/De/CSS/Top" title="de/CSS/top"><code>top</code></a>, <a href="/De/CSS/Left" title="de/CSS/left"><code>left</code></a>, <a href="/De/CSS/Bottom" title="de/CSS/bottom"><code>bottom</code></a>, <a href="/De/CSS/Right" title="de/CSS/right"><code>right</code></a></li> +</ul> + +<p>{{ languages( { "en": "en/CSS/position", "fr": "fr/CSS/position", "es": "es/CSS/position" } ) }}</p> diff --git a/files/de/web/css/position_value/index.html b/files/de/web/css/position_value/index.html new file mode 100644 index 0000000000..6ed01c98ab --- /dev/null +++ b/files/de/web/css/position_value/index.html @@ -0,0 +1,86 @@ +--- +title: <position> +slug: Web/CSS/position_value +tags: + - CSS + - CSS Datentyp + - Layout + - Referenz + - Web +translation_of: Web/CSS/position_value +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Der <code><position></code> <a href="/de/docs/Web/CSS">CSS</a> Datentyp beschreibt eine Koordinate im 2D-Raum, die dazu verwendet wird, die Position relativ zu einer Box zu setzen.</p> + +<p><img alt="" src="/files/3797/position_type.png" style="float: left; height: 208px; width: 306px;">Eine bestimmte Position kann durch zwei Schlüsselwörter mit bestimmten Versätzen angegeben werden. Ein Schlüsselwort repräsentiert einen Rand der Elementbox oder die Mittellinie zwischen zwei Rändern: <code>left</code>, <code>right</code>, <code>top</code>, <code>bottom</code> oder <code>center</code> (was entweder die Mitte zwischen dem linken und rechten Rand repräsentiert oder die Mitte zwischen dem oberen und unteren Rand, abhängig vom Kontext).</p> + +<p>{{experimental_inline}}Ein Versatz kann entweder ein relativer Wert sein, ausgedrückt durch einen {{cssxref("<percentage>")}} Wert, oder ein absoluter {{cssxref("<length>")}} Wert. Positive Werte werden nach rechts oder unten versetzt, je nachdem, was zutrifft. Negative Werte werden in die anderen Richtungen versetzt.</p> + +<p>Die endgültige Position, die durch den <code><position></code> Wert beschrieben wird, muss nicht innerhalb der Elementbox liegen.</p> + +<p>Falls ein Versatz ohne zugehöriges Schlüsselwort angegeben wurde, wird für es <code>center</code> angenommen.</p> + +<h2 id="Interpolation" style="">Interpolation</h2> + +<p>Die Werte für die Abzisse und die Ordinate werden unabhängig voneinander interpoliert. Da die Geschwindigkeit für beide durch dieselbe {{cssxref("<timing-function>")}} definiert wird, folgt der Punkt einer Linie.</p> + +<h2 id="Werte">Werte</h2> + +<pre class="brush:css">/* 1-Wert-Syntax */ +<var>Schlüsselwort</var> /* Der zugehörige Rand, die andere Richtung verweist auf center, die Mitte des Randes. */ +<var><length></var> oder <var><percentage></var> /* Die Position auf der x-Achse, 50% für die y-Achse. */ + +/* 2-Werte-Syntax */ +<var>Schlüsselwort</var> <var>Schlüsselwort</var> /* Ein Schlüsselwort für jede Richtung, die Reihenfolge ist unwichtig. */ +<var>Schlüsselwort</var> <var>Wert</var> /* Der Wert ist der Versatz für den Rand, der durch das Schlüsselwort definiert wird. */ +</pre> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">[ [ left | center | right | top | bottom | <var><percentage></var> | <var><length></var> ] | + [ left | center | right | <var><percentage></var> | <var><length></var> ] [ top | center | bottom | <var><percentage></var> | <var><length></var> ] | + [ center | [ left | right ] [ <var><percentage></var> | <var><length></var> ]? ] && + [ center | [ top | bottom ] [ <var><percentage></var> | <var><length></var> ]? ] + ] +</pre> + +<h2 id="Spezifikationen">Spezifikationen</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 Values', '#position', '<position>')}}</td> + <td>{{Spec2('CSS3 Values')}}</td> + <td>Listed die Links zu beiden Definitionen auf mit der Voraussetzung, dass diese koherent sind: falls {{SpecName('CSS3 Backgrounds')}} unterstützt wird, muss deren Definition von <code><position></code> ebenfalls verwendet werden.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Backgrounds', '#position', '<position>')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>Definiert <code><position></code> explizit und erweitert es um die Unterstützung von Versätzen von einem beliebigen Rand.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-position', '<position>')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Erlaubt die Kombination von einem Schlüsselwort mit einem {{cssxref("<length>")}} oder einem {{cssxref("<percentage>")}} Wert.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#background-position', '<position>')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Definiert <code><position></code> anonym als Wert von {{cssxref("background-position")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.types.position")}} diff --git a/files/de/web/css/property_template/index.html b/files/de/web/css/property_template/index.html new file mode 100644 index 0000000000..57b2483609 --- /dev/null +++ b/files/de/web/css/property_template/index.html @@ -0,0 +1,165 @@ +--- +title: Eigenschaft Vorlage +slug: Web/CSS/Property_Template +tags: + - CSS + - CSS Referenz + - MDN Meta +translation_of: MDN/Contribute/Howto/Document_a_CSS_property/Property_template +--- +<div>{{MDNSidebar}}</div><div>{{ CSSRef() }}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Eine Beschreibung der Eigenschaft, welche erklärt was diese Eigenschaft bewirkt.</p> + +<div class="note">(Falls vorhanden) Wichtige Informationen zu dieser Eigenschaft</div> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">/* Schlüsselwortwerte */ +property: value1; +property: value2; + +/* <length> Werte */ +property: 12.8em; + +/* Globale Werte */ +property: inherit; <em><-- To remember those are a possible values</em> +property: initial; +property: unset; +</pre> + +<p><strong><Wert></strong>: wert | wert2 | wert3 | wert2</p> + +<h2 id="Werte">Werte</h2> + +<dl> + <dt>wert1 {{ gecko_minversion_inline("9.9") }}</dt> + <dd>Erläuterung.</dd> + <dt>wert2</dt> + <dd>....</dd> +</dl> + +<h3 id="(Falls_vorhanden)_Mozilla_Erweiterungen">(Falls vorhanden) Mozilla Erweiterungen</h3> + +<dl> + <dt>-moz-*</dt> + <dd>Erklärung</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Beispiel_1">Beispiel 1</h3> + +<h4 id="CSS">CSS</h4> + +<pre class="brush:css">ElementName { + Eigenschaft: Wert; + dazu: "Beispiel"; + Traum: 10000000mm; + Liebe: "Gefahr"; +}</pre> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><ElementName>foo bar</ElementName></pre> + +<h4 id="Ergebnis">Ergebnis</h4> + +<p>{{EmbedLiveSample("Beispiel_1")}}</p> + +<h3 id="Beispiel_2_gecko_minversion_inline(9.9)">Beispiel 2 {{ gecko_minversion_inline("9.9") }}</h3> + +<pre class="brush:css">ElementName { + eigenschaft: wert; + /* ... */ +}</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<p><em>Benutze ausschließlich die Standardtabelle. Füge andere Spezifikationen am Ende an. Benutze das Makro \{{SpecName()}} für den Name und \{{Spec2()}} für den Status. Auf diese Weise wird der Tabelleninhalt automatisch angepasst, sobald sich der Status einer Spezifikation ändert.</em></p> + +<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 Animations", "#fake-link", "fake-value")}}</td> + <td>{{Spec2("CSS3 Animations")}}</td> + <td>Keine Änderung</td> + </tr> + <tr> + <td>{{SpecName("CSS2.1", "#fake-link", "fake value")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{CompatibilityTable()}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>100</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>100</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><code>Links zu verwandten Eigenschaften</code></li> +</ul> diff --git a/files/de/web/css/pseudo-classes/index.html b/files/de/web/css/pseudo-classes/index.html new file mode 100644 index 0000000000..ecbf7e24dc --- /dev/null +++ b/files/de/web/css/pseudo-classes/index.html @@ -0,0 +1,122 @@ +--- +title: Pseudo-Klassen +slug: Web/CSS/Pseudo-classes +translation_of: Web/CSS/Pseudo-classes +--- +<div>{{CSSRef}}</div> + +<p>Eine <strong><em><dfn>Pseudoklasse</dfn></em></strong> in CSS ist ein Schlüsselbegriff, welcher hinter einen Selektor gestellt wird, um einen besonderen Zustand abzufragen. So steht beispielsweise {{ Cssxref(":hover") }} für Elemente, die gerade mit dem Mauszeiger berührt werden.</p> + +<p>Mit Pseudoklassen und Pseudoelementen lässt sich eine Seite nicht nur in Bezug auf die Struktur des Inhalts gestalten, sondern auch im Bezug auf andere Faktoren wie zum Beispiel den Browserverlauf ({{ cssxref(":visited") }}), eingegebene Formulardaten ({{ cssxref(":checked") }}) oder die Position des Mauszeigers ({{ cssxref(":hover") }}).</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">selector:pseudo-class { + property: value; +} +</pre> + +<h2 id="Übersicht_der_standardisierten_Pseudoklassen">Übersicht der standardisierten Pseudoklassen</h2> + +<div class="index"> +<ul> + <li>{{ Cssxref(":active") }}</li> + <li>{{ Cssxref(":checked") }}</li> + <li>{{ Cssxref(":default") }}</li> + <li>{{ Cssxref(":dir", ":dir()")}}</li> + <li>{{ Cssxref(":disabled") }}</li> + <li>{{ Cssxref(":empty") }}</li> + <li>{{ Cssxref(":enabled") }}</li> + <li>{{ Cssxref(":first") }}</li> + <li>{{ Cssxref(":first-child") }}</li> + <li>{{ Cssxref(":first-of-type") }}</li> + <li>{{ Cssxref(":fullscreen") }}</li> + <li>{{ Cssxref(":focus") }}</li> + <li>{{ Cssxref(":hover") }}</li> + <li>{{ Cssxref(":indeterminate") }}</li> + <li>{{ Cssxref(":in-range") }}</li> + <li>{{ Cssxref(":invalid") }}</li> + <li>{{ Cssxref(":lang", ":lang()") }}</li> + <li>{{ Cssxref(":last-child") }}</li> + <li>{{ Cssxref(":last-of-type") }}</li> + <li>{{ Cssxref(":left") }}</li> + <li>{{ Cssxref(":link") }}</li> + <li>{{ Cssxref(":not", ":not()") }}</li> + <li>{{ Cssxref(":nth-child", ":nth-child()") }}</li> + <li>{{ Cssxref(":nth-last-child", ":nth-last-child()") }}</li> + <li>{{ Cssxref(":nth-last-of-type", ":nth-last-of-type()") }}</li> + <li>{{ Cssxref(":nth-of-type", ":nth-of-type()") }}</li> + <li>{{ Cssxref(":only-child") }}</li> + <li>{{ Cssxref(":only-of-type") }}</li> + <li>{{ Cssxref(":optional") }}</li> + <li>{{ Cssxref(":out-of-range") }}</li> + <li>{{ Cssxref(":read-only") }}</li> + <li>{{ Cssxref(":read-write") }}</li> + <li>{{ Cssxref(":required") }}</li> + <li>{{ Cssxref(":right") }}</li> + <li>{{ Cssxref(":root") }}</li> + <li>{{ Cssxref(":scope") }}</li> + <li>{{ Cssxref(":target") }}</li> + <li>{{ Cssxref(":valid") }}</li> + <li>{{ Cssxref(":visited") }}</li> +</ul> +</div> + +<h2 id="Spezifikation">Spezifikation</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Anmerkung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('Fullscreen') }}</td> + <td>{{ Spec2('Fullscreen') }}</td> + <td><code>:fullscreen</code> hinzugefügt</td> + </tr> + <tr> + <td>{{ SpecName('HTML WHATWG') }}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td>Keine Änderungen seit {{ SpecName('HTML5 W3C') }}.</td> + </tr> + <tr> + <td>{{SpecName('CSS4 Selectors')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td><code>:any-link</code>, <code>:local-link</code>, <code>:scope</code>, <code>:active-drop-target</code>, <code>:valid-drop-target</code>, <code>:invalid-drop-target</code>, <code>:current</code>, <code>:past</code>, <code>:future</code>, <code>:placeholder-shown</code>, <code>:user-error</code>, <code>:blank</code>, <code>:nth-match()</code>, <code>:nth-last-match()</code>, <code>:nth-column()</code>, <code>:nth-last-column()</code>und <code>:matches()</code> hinzugefügt.<br> + Keine Änderungen der bisherigen Pseudoklassen aus {{SpecName('CSS3 Selectors')}} und {{SpecName('HTML5 W3C')}}.</td> + </tr> + <tr> + <td>{{ SpecName('HTML5 W3C') }}</td> + <td>{{ Spec2('HTML5 W3C') }}</td> + <td><code>:link</code>, <code>:visited</code>, <code>:active</code>, <code>:enabled</code>, <code>:disabled</code>, <code>:checked</code> und <code>:indeterminate</code> geändert<br> + <code>:default</code>, <code>:valid</code>, <code>:invalid</code>, <code>:in-range</code>, <code>:out-of-range</code>, <code>:required</code>, <code>:optional</code>, <code>:read-only</code>, <code>:read-write</code> und <code>:dir()</code> hinzugefügt</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Basic UI') }}</td> + <td>{{ Spec2('CSS3 Basic UI') }}</td> + <td><code>:default</code>, <code>:valid</code>, <code>:invalid</code>, <code>:in-range</code>, <code>:out-of-range</code>, <code>:required</code>, <code>:optional</code>, <code>:read-only</code> und <code>:read-write</code> hinzugefügt</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td><code>:target</code>, <code>:root</code>, <code>:nth-child()</code>, <code>:nth-last-of-child()</code>, <code>:nth-of-type()</code>, <code>:nth-last-of-type()</code>, <code>:last-child</code>, <code>:first-of-type</code>, <code>:last-of-type</code>, <code>:only-child</code>, <code>:only-of-type</code>, <code>:empty</code> und <code>:not() </code><br> + Defined the syntax of <code>:enabled</code>, <code>:disabled</code>, <code>:checked</code> und <code>:indeterminate</code>, hinzugefügt.<br> + Keine Änderungen der bisherigen Pseudoklassen aus {{SpecName('CSS2.1')}}.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td><code>:lang()</code>, <code>:first-child</code>, <code>:hover</code> und <code>:focus</code> hinzugefügt.<br> + Keine Änderungen der bisherigen Pseudoklassen aus {{SpecName('CSS1')}}.</td> + </tr> + <tr> + <td>{{SpecName('CSS1')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td><code>:link</code>, <code>:visited</code> und <code>:active</code> hinzugefügt</td> + </tr> + </tbody> +</table> diff --git a/files/de/web/css/pseudo-elements/index.html b/files/de/web/css/pseudo-elements/index.html new file mode 100644 index 0000000000..399548ad95 --- /dev/null +++ b/files/de/web/css/pseudo-elements/index.html @@ -0,0 +1,78 @@ +--- +title: Pseudoelemente +slug: Web/CSS/Pseudo-elements +translation_of: Web/CSS/Pseudo-elements +--- +<div>{{ CSSRef() }}</div> + +<h2 id="Summary">Summary</h2> + +<p>Wie auch {{ Cssxref("pseudo-classes") }} können Pseudoelemente einem Selektor hinzugefügt werden, aber statt einzelen Zustände ermöglichen Sie das gestalten eines einzelnen Teils von einem Element. Das Pseudoelement {{ Cssxref("::first-line") }} richtet sich bspw. nur an die erste Zeile eines Elements.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">selector::pseudo-element { + property: value; +}</pre> + +<h2 id="Pseudoelemente">Pseudoelemente</h2> + +<ul> + <li>{{ Cssxref("::after") }}</li> + <li>{{ Cssxref("::before") }}</li> + <li>{{ Cssxref("::first-letter") }}</li> + <li>{{ Cssxref("::first-line") }}</li> + <li>{{ Cssxref("::selection") }}</li> +</ul> + +<h2 id="Hinweis">Hinweis</h2> + +<p>Pseudoelemente sind sowohl mit zwei Doppelpunkten (::), als auch mit nur einem (:) anzutreffen. In der CSS3 Spezifikation wurde darin der Unterschied zwischen Pseudoelement und Pseudoklasse festgelegt. Die meisten Browser unterstützten aber beide Varianten.</p> + +<div class="note"><strong>Hinweis:</strong> <code>::selection</code> muss zwingend mit zwei Doppelpunkten (::) geschrieben werden.</div> + +<p class="note">Es ist immer nur ein Pseudoelement pro Selektor möglich.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th>Browser</th> + <th>Lowest Version</th> + <th>Support of</th> + </tr> + <tr> + <td rowspan="2">Internet Explorer</td> + <td>8.0</td> + <td><code>:pseudo-element</code></td> + </tr> + <tr> + <td>9.0</td> + <td><code>:pseudo-element ::pseudo-element</code></td> + </tr> + <tr> + <td rowspan="2">Firefox (Gecko)</td> + <td>1.0 (1.0)</td> + <td><code>:pseudo-element</code></td> + </tr> + <tr> + <td>1.0 (1.5)</td> + <td><code>:pseudo-element ::pseudo-element</code></td> + </tr> + <tr> + <td rowspan="2">Opera</td> + <td>4.0</td> + <td><code>:pseudo-element</code></td> + </tr> + <tr> + <td>7.0</td> + <td><code>:pseudo-element ::pseudo-element</code></td> + </tr> + <tr> + <td>Safari (WebKit)</td> + <td>1.0 (85)</td> + <td><code>:pseudo-element ::pseudo-element</code></td> + </tr> + </tbody> +</table> + +<p> </p> diff --git a/files/de/web/css/quotes/index.html b/files/de/web/css/quotes/index.html new file mode 100644 index 0000000000..884ed4cf44 --- /dev/null +++ b/files/de/web/css/quotes/index.html @@ -0,0 +1,86 @@ +--- +title: quotes +slug: Web/CSS/quotes +tags: + - CSS + - CSS Eigenschaft + - Layout + - Referenz + - Web +translation_of: Web/CSS/quotes +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>quotes</code> <a href="/de/docs/Web/CSS" title="CSS">CSS</a> Eigenschaft gibt an, wie User Agents Anführungszeichen darstellen sollen.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">/* Schlüsselwortwert */ +quotes: none; + +/* <string> Werte */ +quotes: "«" "»" /* Setzt <em>open-quote</em> und <em>close-quote</em> auf französische Anführungszeichen */ +quotes: "«" "»" "‹" "›" /* Setzt zwei Ebenen von Anführungszeichen */ + +/* Globale Werte */ +quotes: inherit; +quotes: initial; +quotes: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code>none</code></dt> + <dd>Die <code>open-quote</code> und <code>close-quote</code> Werte der {{cssxref("content")}} Eigenschaft erzeugen keine Anführungszeichen.</dd> + <dt><code>[<string> <string>]+</code></dt> + <dd>Ein oder mehrere Paare von {{cssxref("<string>")}} Werten für <code>open-quote</code> und <code>close-quote</code>. Das erste Paar stellt die äußere Ebene des Zitats dar, das zweite Paar das erste Unterebene, das nächste die dritte Ebene usw.</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush:css">q { quotes: '"' '"' "'" "'" } +q:before { content: open-quote } +q:after { content: close-quote } +</pre> + +<h2 id="Hinweise">Hinweise</h2> + +<p>Seit Firefox 3.5 kann der ursprüngliche Wert der <code>quotes</code> Eigenschaft über <code>-moz-<a class="internal" href="/de/docs/CSS/initial" title="en-US/docs/CSS/initial">initial</a></code> gelesen werden. Dies war in früheren Versionen von Firefox nicht möglich.</p> + +<h2 id="Spezifikationen">Spezifikationen</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('CSS2.1', 'generate.html#quotes', 'quotes')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.properties.quotes")}} + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{cssxref("content")}}</li> +</ul> diff --git a/files/de/web/css/ratio/index.html b/files/de/web/css/ratio/index.html new file mode 100644 index 0000000000..e4052bb133 --- /dev/null +++ b/files/de/web/css/ratio/index.html @@ -0,0 +1,79 @@ +--- +title: <ratio> +slug: Web/CSS/ratio +tags: + - CSS + - CSS Datentypen + - Layout + - Referenz + - Web +translation_of: Web/CSS/ratio +--- +<div>{{CSSRef}}</div> + +<p>Der <code><ratio></code> <a href="/de/docs/Web/CSS">CSS</a> Datentyp, der zur Beschreibung von Seitenverhältnissen in <a class="internal" href="/de/docs/Web/Guide/CSS/Media_queries">Media Queries</a> verwendet wird, bezeichnet das Verhältnis zwischen zwei einheitenlosen Werten. Es ist ein strikt positiver {{cssxref("<integer>")}} Wert gefolgt von einem Slash ('/', Unicode <code>U+002F SOLIDUS</code>) und einem zweiten strikt positivem {{cssxref("<integer>")}}. Vor und nach dem Schrägstrich können Leerzeichen stehen.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col"> </th> + <th scope="col">Verhältnis</th> + <th scope="col">Verwendung</th> + </tr> + </thead> + <tbody> + <tr> + <td><img alt="Ratio4_3.png" class="default internal" src="/@api/deki/files/5714/=Ratio4_3.png"></td> + <td><code>4/3</code></td> + <td>Traditionelles TV-Format im 20sten Jahrhundert.</td> + </tr> + <tr> + <td><img alt="Ratio16_9.png" src="/@api/deki/files/5711/=Ratio16_9.png"></td> + <td><code>16/9</code></td> + <td>Modernes Breitbild-TV-Format.</td> + </tr> + <tr> + <td><img alt="Ratio1_1.85.png" src="/@api/deki/files/5712/=Ratio1_1.85.png"></td> + <td><code>185/100</code> = <code>91/50</code><br> + <em>(Nicht-Ganzzahl-Dividenden und -Divisoren sind nicht erlaubt.)</em></td> + <td>Die häufigsten Filmformate seit den 1960ern.</td> + </tr> + <tr> + <td><img alt="Ratio1_2.39.png" src="/@api/deki/files/5713/=Ratio1_2.39.png"></td> + <td><code>239/100</code><br> + <em>(Nicht-Ganzzahl-Dividenden und -Divisoren sind nicht erlaubt.)</em></td> + <td>Das anamorphe Breitbild-Filmformat.</td> + </tr> + </tbody> +</table> + +<h2 id="Spezifikationen">Spezifikationen</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 Media Queries', '#values', '<ratio>')}}</td> + <td>{{Spec2('CSS3 Media Queries')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.types.ratio")}} + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a class="internal" href="/de/docs/Web/Guide/CSS/Media_queries">CSS Media Queries</a></li> +</ul> diff --git a/files/de/web/css/resize/index.html b/files/de/web/css/resize/index.html new file mode 100644 index 0000000000..82162a06bf --- /dev/null +++ b/files/de/web/css/resize/index.html @@ -0,0 +1,196 @@ +--- +title: resize +slug: Web/CSS/resize +tags: + - CSS + - CSS Eigenschaft + - Referenz +translation_of: Web/CSS/resize +--- +<div>{{CSSRef}}</div> + +<div></div> + +<div> +<p>Die <a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS">CSS</a> Eigenschaft <strong><code>resize</code></strong> CSS legt fest, ob ein Element größenveränderbar ist, und wenn ja, in welche Richtungen.</p> + +<div>{{EmbedInteractiveExample("pages/css/resize.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><code>resize</code> gilt nicht für die folgenden Elemente:</p> + +<ul> + <li>Inline Elemente</li> + <li>Blockelemente, für die die Eigenschaft {{cssxref("overflow")}} auf <code>visible</code> gesetzt ist</li> +</ul> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: css notranslate">/* Schlüsselwortwerte */ +resize: none; +resize: both; +resize: horizontal; +resize: vertical; +resize: block; +resize: inline; + +/* Globale Werte */ +resize: inherit; +resize: initial; +resize: unset; +</pre> + +<p>Die Eigenschaft <code>resize</code> wird als ein einzelner Schlüsselwortwert aus der folgenden Liste angegeben.</p> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code>none</code></dt> + <dd>Das Element bietet keine vom Benutzer steuerbare Möglichkeit zur Größenänderung des Elements.</dd> + <dt><code>both</code></dt> + <dd>Das Element zeigt eine Möglichkeit an, die es dem Benutzer erlaubt, sowohl die horizontale als auch die vertikale Größe des Elements zu ändern.</dd> + <dt><code>horizontal</code></dt> + <dd>Das Element zeigt eine Möglichkeit an, die es dem Benutzer erlaubt, die horizontale Größe des Elements zu ändern.</dd> + <dt><code>vertical</code></dt> + <dd>Das Element zeigt eine Möglichkeit an, die es dem Benutzer erlaubt, die vertikale Größe des Elements zu ändern.</dd> + <dt><code>block</code> {{experimental_inline}}</dt> + <dd>Abhängig von den Werten für {{cssxref("writing-mode")}} und {{cssxref("direction")}}, zeigt das Element eine Möglichkeit an, die es dem Benutzer erlaubt, die horizontale oder vertikale Größe des Elements in Blockrichtung zu ändern.</dd> + <dt><code>inline</code> {{experimental_inline}}</dt> + <dd>Abhängig von den Werten für {{cssxref("writing-mode")}} und {{cssxref("direction")}}, zeigt das Element eine Möglichkeit an, die es dem Benutzer erlaubt, die horizontale oder vertikale Größe des Elements in Inlinerichtung zu ändern.</dd> +</dl> + +<div class="note"><strong>Hinweis:</strong> <code>resize</code> wird nicht auf Blöcke angewendet, für die die {{cssxref("overflow")}} Eigenschaft auf <code>visible</code> gesetzt ist.</div> + +<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="Beispiele">Beispiele</h2> + +<h3 id="Deaktivierung_der_Größenänderungsmöglichkeit_von_textareas">Deaktivierung der Größenänderungsmöglichkeit von textareas</h3> + +<p>In vielen Browsern sind {{HTMLElement("textarea")}} Elemente standardmäßig in der Größe veränderbar. Sie können dieses Verhalten mit der <code>resize</code> Eigenschaft überschreiben.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><textarea>Type some text here.</textarea></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">textarea { + resize: none; /* Disables resizability */ +} </pre> + +<div id="Disabling_resizability_of_textareas"> +<pre class="brush: html notranslate" style="display: none;"><textarea>Type some text here.</textarea></pre> + +<pre class="brush: css notranslate" style="display: none;">textarea { + resize: none; /* Disables resizability */ +} </pre> +</div> + +<h4 id="Ergebnis">Ergebnis</h4> + +<p>{{EmbedLiveSample("Disabling_resizability_of_textareas","200","100")}}</p> + +<h3 id="Verwendung_von_resize_bei_beliebigen_Elementen">Verwendung von resize bei beliebigen Elementen</h3> + +<p>Sie können die Eigenschaft <code>resize</code> verwenden, um die Größe eines beliebigen Elements zu ändern. Im folgenden Beispiel enthält ein größenveränderbares {{HTMLElement("div")}} einen größenveränderbaren Absatz ({{HTMLElement("p")}} Element).</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html notranslate"><div class="resizable"> + <p class="resizable"> + This paragraph is resizable in all directions, because + the CSS `resize` property is set to `both` on this element. + </p> +</div></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css notranslate">.resizable { + resize: both; + overflow: scroll; + border: 1px solid black; +} + +div { + height: 300px; + width: 300px; +} + +p { + height: 200px; + width: 200px; +} </pre> + + +<div id="Using_resize_with_arbitrary_elements"> +<pre class="brush: html notranslate"><div class="resizable"> + <p class="resizable"> + This paragraph is resizable in all directions, because + the CSS `resize` property is set to `both` on this element. + </p> +</div></pre> + +<pre class="brush: css notranslate">.resizable { + resize: both; + overflow: scroll; + border: 1px solid black; +} + +div { + height: 300px; + width: 300px; +} + +p { + height: 200px; + width: 200px; +} </pre> + +</div> + +<h4 id="Ergebnis_2">Ergebnis</h4> + +<p>{{EmbedLiveSample("Using_resize_with_arbitrary_elements","450","450")}}</p> + +<h2 id="Spezifikationen">Spezifikationen</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 Logical Properties', '#resize', 'resize')}}</td> + <td>{{Spec2('CSS Logical Properties')}}</td> + <td>Fügt die Werte <code>block</code> und <code>inline</code> hinzu.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Basic UI', '#resize', 'resize')}}</td> + <td>{{Spec2('CSS3 Basic UI')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{Compat("css.properties.resize")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{HTMLElement("textarea")}}</li> +</ul> diff --git a/files/de/web/css/resolution/index.html b/files/de/web/css/resolution/index.html new file mode 100644 index 0000000000..d1f3c3512e --- /dev/null +++ b/files/de/web/css/resolution/index.html @@ -0,0 +1,145 @@ +--- +title: <resolution> +slug: Web/CSS/resolution +translation_of: Web/CSS/resolution +--- +<div>{{CSSRef}}</div> + +<h2 id=".C3.9Cbersicht" name=".C3.9Cbersicht">Übersicht</h2> + +<p>Der <code><resolution></code> <a href="/de/docs/Web/CSS">CSS</a> Datentyp, der in <a href="/de/docs/Web/Guide/CSS/Media_Queries">Media Queries</a> verwendet wird, kennzeichnet die Pixeldichte eines Ausgabemediums, seine Auflösung. Er ist eine {{cssxref("<number>")}}, der direkt eine Auflösungseinheit (<code>dpi</code>, <code>dpcm</code>, ...) folgt. Wie bei allen CSS Einheiten gibt es kein Leerzeichen zwischen der Einheit und der Zahl.</p> + +<p>Auf Bildschirmen ist die Länge relativ zu CSS Zoll, Zentimetern oder Pixeln, nicht zu physikalischen Werten.</p> + +<p>Auch wenn alle Einheiten die gleiche Auflösung für den Wert <code>0</code> darstellen, darf die Einheit in diesem Fall nicht weggelassen werden, da sie keine {{cssxref("<length>")}} ist: <code>0</code> ist ungültig und repräsentiert weder <code>0dpi</code>, <code>0dpcm</code>, noch <code>0dppx</code>.</p> + +<h2 id="Einheiten" name="Einheiten">Einheiten</h2> + +<dl> + <dt><code><a name="dpi">dpi</a></code></dt> + <dd>Diese Einheit repräsentiert die Anzahl an Punkten pro Zoll. Ein Bildschirm hat typischerweise 72 oder 96dpi; ein gedrucktes Dokument erreicht normalerweise weit höhrere dpi Zahlen. Da 1 Zoll 2.54cm entspricht, <code>1dpi ≈ 0.39dpcm</code>.</dd> + <dt><code><a name="dpcm">dpcm</a></code></dt> + <dd>Diese Einheit repräsentiert die Anzahl an Punkten pro Zentimeter. Da 1 Zoll 2.54cm entspricht, <code>1dpcm ≈ 2.54dpi</code>.</dd> + <dt><code><a name="dppx">dppx</a></code></dt> + <dd>Diese Einheit repräsentiert die Anzahl an Punkten pro <code>px</code> Einheit. Wegen dem festen 1:96 Verhältnis von CSS <code class="css">in</code> zu CSS <code class="css">px</code>, ist <code class="css">1dppx</code> äquivalent zu <code class="css">96dpi</code>, dies enspricht der Standardauflösung von Bildern, die in CSS dargestellt werden, wie in {{cssxref("image-resolution")}} definiert.</dd> +</dl> + +<h2 id="Beispiele" name="Beispiele">Beispiele</h2> + +<p>Hier sind einige korrekte Verwendungen von <code><resolution></code> Werten:</p> + +<pre>96dpi Korrekte Verwendung: ein {{cssxref("<number>")}} Wert (hier ein {{cssxref("<integer>")}}) gefolgt von einer Einheit. +@media print and (min-resolution: 300dpi) { ... } Korrekte Verwendung im Kontext einer <a href="/de/docs/Web/Guide/CSS/Media_Queries">Media Query</a>. +</pre> + +<p>Hier sind einige inkorrekte Verwendungen:</p> + +<pre>72 dpi Falsch: Keine Leerzeichen erlaubt zwischen {{cssxref("<number>")}} und der Einheit. +ten dpi Falsch: Nur Ziffern dürfen verwendet werden. +0 Falsch: Die Einheit kann nur für 0 Werte weggelassen werden, die einen {{cssxref("<length>")}} Wert darstellen. +</pre> + +<h2 id="Spezifization" name="Spezifization">Spezifization</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 Values', '#resolution', '<resolution>')}}</td> + <td>{{Spec2('CSS3 Values')}}</td> + <td>Faktorisierung des Typs in einer allgemeineren Spezifikation. Keine Änderung.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Images', '#resolution-units', '<resolution>')}}</td> + <td>{{Spec2('CSS3 Images')}}</td> + <td><code>dppx</code> Einheit hinzugefügt</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Media Queries', '#resolution', '<resolution>')}}</td> + <td>{{Spec2('CSS3 Media Queries')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilit.C3.A4t" name="Browser_Kompatibilit.C3.A4t">Browser Kompatibilität</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>29</td> + <td>3.5 (1.9.1) [**]</td> + <td>9</td> + <td>9.5</td> + <td>{{CompatNo}} [*]</td> + </tr> + <tr> + <td><code>dppx</code></td> + <td>29</td> + <td>{{CompatGeckoDesktop("16.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>12.10</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatNo}} [*]</td> + <td>yes</td> + <td>?</td> + <td>yes</td> + <td>{{CompatNo}} [*]</td> + </tr> + <tr> + <td><code>dppx</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("16.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>12.10</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[*] Die Webkit Engine unterstützt die CSS Auflösungsabfrage, wie sie in der Spezifikation definiert wird, nicht. Die Benutzung der nicht standardisierten <code>device-pixel-ratio</code> Abfrage wird für Safari Browser benötigt, siehe <a href="https://bugs.webkit.org/show_bug.cgi?id=16832">Bug 16832</a>.</p> + +<p>[**] Vor Firefox 8 (Gecko 8.0) hat die Eigenschaft fälschlicherweise nur CSS {{cssxref("<integer>")}} Größenangaben erlaubt, gefolgt von der Einheit. Ab dieser Version werden alle gültigen CSS Größenangaben unterstützt ({{cssxref("<number>")}} direkt gefolgt von der Einheit).</p> + +<h2 id="Siehe_auch" name="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/Guide/CSS/Media_Queries">CSS Media Queries</a></li> +</ul> diff --git a/files/de/web/css/right/index.html b/files/de/web/css/right/index.html new file mode 100644 index 0000000000..0eee367917 --- /dev/null +++ b/files/de/web/css/right/index.html @@ -0,0 +1,97 @@ +--- +title: right +slug: Web/CSS/Right +tags: + - CSS + - CSS Positionierung + - Layout + - NeedsLiveSample + - Referenz + - Web +translation_of: Web/CSS/right +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>right</code> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft gibt einen Teil der Position eines positionierten Elements an.</p> + +<p>Bei absolut positionierten Elementen (<code>{{Cssxref("position")}}: absolute</code> oder <code>position: fixed</code>) gibt sie den Abstand zwischen der rechten, äußeren Kante des Elements und der rechten Kante des umschließenden Blocks an.</p> + +<p>Bei relativ positionierten Elementen (<code>position: relative</code>) wird das Element aus seiner normalen Position im Elementfluss verschoben. Dabei gilt: Wenn die {{Cssxref("left")}} Eigenschaft definiert wurde, überschreibt diese den Wert der {{Cssxref("right")}} Eigenschaft. Wenn <code>left</code> den Wert <code>auto</code> besitzt, ist der berechnete Wert für <code>right</code> gleich dem Wert von <code>left</code> mit umgedrehtem Vorzeichen.<br> + Wenn beide Eigenschaften einen anderen Wert als <code>auto</code> besitzen, wird <code>right</code> ignoriert und auf <code>auto</code> gesetzt.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><Länge></dt> + <dd>Eine <a href="/de/CSS/Einheiten#L.c3.a4ngen">Längenangabe</a>, die positive und negative Werte sowie Null erlaubt.</dd> + <dt><Prozentzahl></dt> + <dd>Eine <a href="/de/CSS/Einheiten#Prozent">prozentuale Angabe</a>, die sich auf den umschließenden Block bezieht. Die Prozentangabe kann nur berücksichtigt werden, wenn die Breite des umschließenden Blocks festgelegt wurde, andernfalls wird die definierte Prozentzahl wie <code>auto</code> behandelt.</dd> + <dt>auto</dt> + <dd>Standardwert. Die horizontale Position des Elementes wird nicht weiter beeinflusst, es sei denn durch <a href="/De/CSS/Left" title="De/CSS/Left"><code>left</code></a>, <a href="/de/CSS/margin" title="de/CSS/margin"><code>margin</code></a>, <a href="/de/CSS/padding" title="de/CSS/padding"><code>padding</code></a> oder durch die <a href="/de/CSS/width" title="de/CSS/width">Breite</a>.</dd> + <dt>inherit</dt> + <dd>Der Wert des Elternelements wird geerbt.</dd> +</dl> + +<h3 id="Formelle_Syntax">Formelle Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush: css; highlight:[16]">#left { + width: 100px; + height: 100px; + background-color: #FFC7E4; + position: relative; + top: 20px; + left: 20px; +} + +#right { + width: 100px; + height: 100px; + background-color: #FFD7C2; + position: absolute; + bottom: 10px; + right: 20px; +}</pre> + +<pre class="brush: html"><div id="left">links</div> +<div id="right">rechts</div> +</pre> + +<p>{{ EmbedLiveSample('Beispiele', 500, 220) }}</p> + +<h2 id="Spezifikationen">Spezifikationen</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 Transitions', '#animatable-css', 'right')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Definiert <code>right</code> als animierbar.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'visuren.html#propdef-right', 'right')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.properties.right")}} diff --git a/files/de/web/css/row-gap/index.html b/files/de/web/css/row-gap/index.html new file mode 100644 index 0000000000..c6754e69ad --- /dev/null +++ b/files/de/web/css/row-gap/index.html @@ -0,0 +1,163 @@ +--- +title: row-gap (grid-row-gap) +slug: Web/CSS/row-gap +tags: + - CSS + - CSS Flexible Boxes + - CSS Grid + - CSS-Eigenschaften + - Referenz + - row-gab +translation_of: Web/CSS/row-gap +--- +<div>{{CSSRef}}</div> + +<p>Die <a href="/en-US/docs/Web/CSS">CSS</a>-Eigenschaft <strong><code>row-gap</code></strong> legt die Größe der Zwischenräume ({{glossary("gutters","gutter")}}) zwischen den Grid-Reihen eines Elements fest.</p> + +<div>{{EmbedInteractiveExample("pages/css/row-gap.html")}}</div> + +<p class="hidden">Die Quelle für dieses interaktive Beispiel ist in einem GitHub-Repository gespeichert. Wenn Sie zum Projekt Interaktive 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 einen Pull-Request.</p> + +<div class="note"> +<p>CSS Grid Layout definierte zunächst die Eigenschaft {{CSSxRef('grid-row-gap')}}}. Diese vorangestellte Eigenschaft wird durch <code>row-gap</code> ersetzt. Um jedoch Browser zu unterstützen, die <code>grid-row-gap</code> und nicht <code>row-gap</code> für grid implementiert haben, müssen Sie die Eigenschaft mit Präfix verwenden, wie im obigen interaktiven Beispiel.</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: css no-line-numbers notranslate">/* <length> Längen-Werte */ +row-gap: 20px; +row-gap: 1em; +row-gap: 3vmin; +row-gap: 0.5cm; + +/* <percentage> Prozent-Werte*/ +row-gap: 10%; + +/* Globale Werte */ +row-gap: inherit; +row-gap: initial; +row-gap: unset; +</pre> + +<h3 id="Values">Values</h3> + +<dl> + <dt><code><length-percentage></code></dt> + <dd>Ist die Breite des Abstands (<code>gutter</code>) zwischen den Reihen. {{CSSxRef("<percentage>")}} Werte sind relativ zur Dimension des Elements.</dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre> + +<h2 id="Examples">Examples</h2> + +<h3 id="Flex_layout">Flex layout</h3> + +<p>{{SeeCompatTable}}</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html; notranslate"><div id="flexbox"> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> +</div> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css; highlight[5] notranslate">#flexbox { + display: flex; + flex-wrap: wrap; + width: 300px; + row-gap: 20px; +} + +#flexbox > div { + border: 1px solid green; + background-color: lime; + flex: 1 1 auto; + width: 100px; + height: 50px; +} +</pre> + +<h4 id="Result">Result</h4> + +<p>{{EmbedLiveSample('Flex_layout', "auto", "120px")}}</p> + +<h3 id="Grid_layout">Grid layout</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html; notranslate"><div id="grid"> + <div></div> + <div></div> + <div></div> +</div></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css; highlight[6] notranslate">#grid { + display: grid; + height: 200px; + grid-template-columns: 200px; + grid-template-rows: repeat(3, 1fr); + row-gap: 20px; +} + +#grid > div { + border: 1px solid green; + background-color: lime; +} +</pre> + + + +<h4 id="Result_2">Result</h4> + +<p>{{EmbedLiveSample('Grid_layout', 'auto', 120)}}</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">Bemerkung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS3 Box Alignment", "#propdef-row-gap", "row-gap")}}</td> + <td>{{Spec2("CSS3 Box Alignment")}}</td> + <td>Erstdefinition</td> + </tr> + </tbody> +</table> + +<p>{{CSSInfo}}</p> + +<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 einen Pull-Request.</div> + +<h3 id="Support_in_Flex_layout">Support in Flex layout</h3> + +<p>{{Compat("css.properties.row-gap.flex_context")}}</p> + +<h3 id="Support_in_Grid_layout">Support in Grid layout</h3> + +<p>{{Compat("css.properties.row-gap.grid_context")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Verwandte CSS-Eigenschaften: {{CSSxRef("column-gap")}}, {{CSSxRef("gap")}}</li> + <li>Grid Layout Anleitung: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Gutters">Basic concepts of grid layout - Gutters</a></em></li> +</ul> diff --git a/files/de/web/css/ruby-align/index.html b/files/de/web/css/ruby-align/index.html new file mode 100644 index 0000000000..f38d8257bb --- /dev/null +++ b/files/de/web/css/ruby-align/index.html @@ -0,0 +1,153 @@ +--- +title: ruby-align +slug: Web/CSS/ruby-align +tags: + - CSS + - CSS Referenz + - CSS Ruby + - Eigenschaft + - Referenz +translation_of: Web/CSS/ruby-align +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code><strong>ruby-align</strong></code> CSS Eigenschaft definiert die Verteilung der verschiedenen {{Glossary("Ruby")}}elemente über die Basis.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">/* Schlüsselwortwerte */ +ruby-align: start; +ruby-align: center; +ruby-align: space-between; +ruby-align: space-around; + +/* Globale Werte */ +ruby-align: inherit; +ruby-align: initial; +ruby-align: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code>start</code></dt> + <dd>Ist ein Schlüsselwort, dass angibt, dass die Anmerkung am dem Start des Basistexts ausgerichtet wird.</dd> + <dt><code>center</code></dt> + <dd>Ist ein Schlüsselwort, dass angibt, dass die Anmerkung mittig am Basistext ausgerichtet wird.</dd> + <dt><code>space-between</code></dt> + <dd>Ist ein Schlüsselwort, das angibt, dass der zusätzliche Abstand zwischen die Elemente der Anmerkung verteilt wird.</dd> + <dt><code>space-around</code></dt> + <dd>Ist ein Schlüsselwort, das angibt, dass der zusätzliche Abstand zwischen und um die Elemente der Anmerkung verteilt wird.</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<p>Dieses HTML wird mit jedem Wert von <code>ruby-align</code> unterschiedlich dargestellt:</p> + +<pre class="brush: html"><ruby> + <rb>Dies ist ein langer Text als Beispiel</rb> + <rp>（</rp><rt>kurzes Ruby</rt><rp>）</rp> +</ruby> +</pre> + +<h3 id="Ruby_am_Start_des_Basistexts_ausgerichtet">Ruby am Start des Basistexts ausgerichtet</h3> + +<pre class="brush: html" style="display: none;"><ruby> + <rb>Dies ist ein langer Text als Beispiel</rb> + <rp>（</rp><rt>kurzes Ruby</rt><rp>）</rp> +</ruby> +</pre> + +<pre class="brush: css">ruby { + ruby-align:start; +}</pre> + +<p>Dies ergibt folgende Ausgabe:</p> + +<p>{{EmbedLiveSample("Ruby_am_Start_des_Basistexts_ausgerichtet", 240, 40)}}</p> + +<h3 id="Ruby_mittig_am_Basistext_ausgerichtet">Ruby mittig am Basistext ausgerichtet</h3> + +<pre class="brush: html" style="display: none;"><ruby> + <rb>Dies ist ein langer Text als Beispiel</rb> + <rp>（</rp><rt>kurzes Ruby</rt><rp>）</rp> +</ruby> +</pre> + +<pre class="brush: css">ruby { + ruby-align:center; +}</pre> + +<p>Dies ergibt folgende Ausgabe:</p> + +<p>{{EmbedLiveSample("Ruby_mittig_am_Basistext_ausgerichtet", 240, 40)}}</p> + +<h3 id="Zusätzlicher_Abstand_verteilt_zwischen_Rubyelementen">Zusätzlicher Abstand verteilt zwischen Rubyelementen</h3> + +<pre class="brush: html" style="display: none;"><ruby> + <rb>Dies ist ein langer Text als Beispiel</rb> + <rp>（</rp><rt>kurzes Ruby</rt><rp>）</rp> +</ruby> +</pre> + +<pre class="brush: css">ruby { + ruby-align:space-between; +}</pre> + +<p>Dies ergibt folgende Ausgabe:</p> + +<p>{{EmbedLiveSample("Zusätzlicher_Abstand_verteilt_zwischen_Rubyelementen", 240, 40)}}</p> + +<h3 id="Zusätzlicher_Abstand_verteilt_zwischen_und_um_Rubyelemente">Zusätzlicher Abstand verteilt zwischen und um Rubyelemente</h3> + +<pre class="brush: html" style="display: none;"><ruby> + <rb>Dies ist ein langer Text als Beispiel</rb> + <rp>（</rp><rt>kurzes Ruby</rt><rp>）</rp> +</ruby> +</pre> + +<pre class="brush: css">ruby { + ruby-align:space-around; +}</pre> + +<p>Dies ergibt folgende Ausgabe:</p> + +<p>{{EmbedLiveSample("Zusätzlicher_Abstand_verteilt_zwischen_und_um_Rubyelemente", 240, 40)}}</p> + +<h2 id="Spezifikationen">Spezifikationen</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 Ruby', '#ruby-align-property', 'ruby-align')}}</td> + <td>{{Spec2('CSS3 Ruby')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.properties.ruby-align")}} + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>HTML Ruby Elemente: {{HTMLElement("ruby")}}, {{HTMLElement("rt")}}, {{HTMLElement("rp")}} und {{HTMLElement("rtc")}}.</li> + <li>CSS Ruby Eigenschaften: {{cssxref("ruby-position")}}, {{cssxref("ruby-merge")}}.</li> +</ul> diff --git a/files/de/web/css/scroll-behavior/index.html b/files/de/web/css/scroll-behavior/index.html new file mode 100644 index 0000000000..9505393d2a --- /dev/null +++ b/files/de/web/css/scroll-behavior/index.html @@ -0,0 +1,143 @@ +--- +title: scroll-behavior +slug: Web/CSS/scroll-behavior +translation_of: Web/CSS/scroll-behavior +--- +<div>{{ CSSRef }}<br> +Die <strong><code>scroll-behavior</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a>-Eigenschaft spezifiziert das Scroll-Verhalten einer Scroll-Box, wenn ein Scroll-Event durch eine Navigation oder durch CSSOM APIs ausgelöst wird.</div> + +<div>{{cssinfo}}</div> + +<div></div> + +<div> +<div> +<div>{{EmbedInteractiveExample("pages/css/scroll-behavior.html")}}</div> + +<p class="hidden">Der Quellcode für dieses interaktive Beispiel liegt in einem GitHub-Repository. Falls du zu dem interactive examples Projekt beitragen möchtest, klone bitte <a class="tgwf_grey" href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> und schick uns einen Pull Request.</p> +</div> +</div> + +<div>Beachte, dass andere Scroll-Verhalten, wie etwa solche durch den Nutzer ausgelöste, nicht durch diese Eigenschaft beeinflusst werden. Wenn diese Eigenschaft für das Wurzel-Element spezifiziert wird, beeinflusst es stattdessen den Viewport. Wird diese Eigenschaft für das <code>body</code>-Element spezifiziert, wird es <em>nicht</em> an den Viewport weitergegeben.</div> + +<div></div> + +<div>User Agents dürfen diese Eigenschaft ignorieren.</div> + +<hr> +<div> +<h2 id="Syntax" name="Syntax">Syntax</h2> +</div> + +<pre class="brush:css no-line-numbers">/* Keyword values */ +scroll-behavior: auto; +scroll-behavior: smooth; + +/* Global values */ +scroll-behavior: inherit; +scroll-behavior: initial; +scroll-behavior: unset; +</pre> + +<p>Sämltiche anderen Arten des Scrollens, beispielsweise durch den User, sind von dieser Eigenschaft nicht betroffen.<br> + Wenn diese Eigenschaft auf ein Root-Element angewendet, betrifft sie stattdessen den gesamten Viewport.<br> + Wird die Eigenschaft dem <code>body</code> zugeordnet, wrikt sie sich hingegen <em>nicht</em> auf den Viewport aus.<br> + <br> + Ein User Agent kann diese Eigenschaft auch ignorieren.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<p>Die Eigenschaft <code>scroll-behavior</code> kann dabei folgende Werte annehmen:</p> + +<h3 class="brush:css" id="Werte">Werte</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>Die scrolling Box scrollt sofort.</dd> + <dt><code>smooth</code></dt> + <dd>Die scrolling Box scrollt mit einem flüssigen/smoothen Verhalten.<br> + Der User Agent definiert dabei sowohl die Geschwindigkeit als auch die dafür benötigte Dauer. Der User Agent sollte dabei nach Möglichkeit den Platform-Konventionen folgen.</dd> +</dl> + +<h3 id="Formelle_Syntax">Formelle Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Example" name="Example">Beispiel</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><nav> + <a href="#page-1">1</a> + <a href="#page-2">2</a> + <a href="#page-3">3</a> +</nav> +<scroll-container> + <scroll-page id="page-1">1</scroll-page> + <scroll-page id="page-2">2</scroll-page> + <scroll-page id="page-3">3</scroll-page> +</scroll-container></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">a { + display: inline-block; + width: 50px; + text-decoration: none; +} +nav, scroll-container { + display: block; + margin: 0 auto; + text-align: center; +} +nav { + width: 339px; + padding: 5px; + border: 1px solid black; +} +scroll-container { + display: block; + width: 350px; + height: 200px; + overflow-y: scroll; + scroll-behavior: smooth; +} +scroll-page { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + font-size: 5em; +} +</pre> + +<h3 id="Ergebnis">Ergebnis</h3> + +<p>{{ EmbedLiveSample("Example", "100%", 250) }}</p> + +<h2 id="Specifications" name="Specifications">Spezifikationen</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('CSSOM View', "#propdef-scroll-behavior", 'scroll-behavior')}}</td> + <td>{{Spec2('CSSOM View')}}</td> + <td>Initial specification</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("css.properties.scroll-behavior")}}</p> diff --git a/files/de/web/css/shape/index.html b/files/de/web/css/shape/index.html new file mode 100644 index 0000000000..b186d495aa --- /dev/null +++ b/files/de/web/css/shape/index.html @@ -0,0 +1,93 @@ +--- +title: <shape> +slug: Web/CSS/shape +tags: + - CSS + - CSS Datentyp + - Layout + - Reference + - Référence(2) + - Web +translation_of: Web/CSS/shape +--- +<p>{{ CSSRef() }}</p> + +<h2 id=".C3.9Cbersicht" name=".C3.9Cbersicht">Übersicht</h2> + +<p>Der <code><shape></code> <a href="/de/docs/Web/CSS" title="CSS">CSS</a> Datentyp beschreibt die genaue Form eines Bereichs. Dieser Bereich wird benutzt, um zu definieren, auf welchen Teil eines Elements Eigenschaften wie {{ Cssxref("clip") }} angewendet werden.</p> + +<p>In der aktuellen Spezifikation kann ein <code><shape></code>, obwohl er entworfen wurde, um beliebige Formen zu beschreiben, ausschließlich einen rechteckigen Bereich repräsentieren, der durch die Funktion <code>rect()</code> definiert wird.</p> + +<h2 id="Die_rect_Funktion" name="Die_rect_Funktion">Die <code>rect()</code> Funktion</h2> + +<p>Die <code>rect()</code> Funktion erstellt einen Bereich in Form eines Rechtecks.</p> + +<h3 id="Syntax">Syntax</h3> + +<pre class="eval">rect(<em>top</em>, <em>right</em>, <em>bottom</em>, <em>left</em>) +</pre> + +<h4 id="Werte">Werte</h4> + +<p><img alt="rect.png" class="internal rwrap" src="/@api/deki/files/5730/=rect.png" style="float: right;"></p> + +<dl> + <dt><em>top</em></dt> + <dd>Ist eine {{cssxref("<length>")}}, die den Versatz der Oberkante des Rechtecks relativ zur Oberkante der Element Box beschreibt.</dd> +</dl> + +<dl> + <dt><em>right</em></dt> + <dd>Ist eine {{cssxref("<length>")}}, die den Versatz der rechten Kante des Rechtecks relativ zur linken Kante der Element Box beschreibt.</dd> +</dl> + +<dl> + <dt><em>bottom</em></dt> + <dd>Ist eine {{cssxref("<length>")}}, die den Versatz der Unterkante des Rechtecks relativ zur Oberkante der Element Box beschreibt.</dd> +</dl> + +<dl> + <dt><em>left</em></dt> + <dd>Ist eine {{cssxref("<length>")}}, die den Versatz der linken Kante des Rechtecks relativ zur linken Kante der Element Box beschreibt.</dd> +</dl> + +<h3 id="Interpolation">Interpolation</h3> + +<p>Werte des <code><shape></code> Datentyps, welche Rechtecke darstellen, können interpoliert werden, um Animationen zu erlauben. In diesem Fall werden sie über ihre <code>top</code>, <code>right</code>, <code>bottom</code> und <code>left</code> Komponenten interpoliert, wovon jede als reale Fließkommazahl behandelt wird. Die Geschwindigkeit der Interpolation wird bestimmt durch die <a href="/de/docs/Web/CSS/Timing_Funktion" title="timing-function">Timing Funktion</a> associated with the animation.</p> + +<h3 id="Beispiel" name="Beispiel">Beispiel</h3> + +<pre class="eval"> img.clip04 { + clip: rect(10px, 20px, 20px, 10px); + } +</pre> + +<h2 id="Spezifikation" name="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('CSS2.1', 'visufx.html#value-def-shape', '<shape>') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Definiert durch die {{ cssxref("clip") }} Eigenschaft</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilit.C3.A4t" name="Browser_Kompatibilit.C3.A4t">Browser Kompatibilität</h2> + +{{Compat("css.types.shape")}} + +<h2 id="Siehe_auch" name="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Verwandte CSS Eigenschaften: {{ Cssxref("clip") }}</li> + <li>Die <a href="/de/docs/Web/CSS/-moz-image-rect" title="en/CSS/-moz-image-rect">-moz-image-rect()</a> Funktion mit ähnlichen Koordinaten wie <code>rect()</code>.</li> +</ul> diff --git a/files/de/web/css/spezifität/index.html b/files/de/web/css/spezifität/index.html new file mode 100644 index 0000000000..e8a0e22302 --- /dev/null +++ b/files/de/web/css/spezifität/index.html @@ -0,0 +1,197 @@ +--- +title: Spezifität +slug: Web/CSS/Spezifität +tags: + - Beispiel + - CSS + - Guide + - Web +translation_of: Web/CSS/Specificity +--- +<div>{{cssref}}</div> + +<h2 id="Das_Konzept">Das Konzept</h2> + +<p>Spezifität ist das Mittel, mit dem ein Browser bestimmt, welche Eigenschaftswerte die relevantesten für ein Element sind und zugewiesen werden. Spezifität basiert ausschließlich auf den Matchingregeln, welche durch die verschiedenen <a href="/de/docs/Web/CSS/CSS_Referenz#Selektoren">Selektoren</a> gebildet werden.</p> + +<h2 id="Berechnung">Berechnung</h2> + +<p>Die Spezifität wird durch die Verkettung der Anzahl jedes Selektortyps berechnet. Sie entspricht <strong>keiner</strong> Gewichtung, die dem passenden Ausdruck zugewiesen wird.</p> + +<p>Im Falle einer Spezifitätsgleichheit wird die letzte im CSS gefundene Deklaration auf das Element angewandt.</p> + +<p>{{ Note("Die Nähe von Elementen in einem Dokumentenbaum zueinander hat keine Auswirkung auf die Spezifität.") }}</p> + +<h3 id="Reihenfolge_der_Spezifität">Reihenfolge der Spezifität</h3> + +<p>Die folgende Selektorenliste ist nach aufsteigender Spezifität sortiert:</p> + +<ul> + <li>Universelle Selektoren</li> + <li>Typselektoren</li> + <li>Klassenselektoren</li> + <li>Attributselektoren</li> + <li>Pseudoklassen</li> + <li>ID-Selektoren</li> + <li>Inlinestile</li> +</ul> + +<h3 id="Die_!important_Ausnahme">Die <code>!important</code> Ausnahme</h3> + +<p>Wenn eine <code>!important</code> Regel auf eine Stildeklaration angewendet wird, überschreibt diese Deklaration alle anderen Deklarationen des CSS, unabhängig davon, wo sie in der Deklarationsliste steht. Jedoch hat <code>!important</code> nichts mit Spezifität zu tun. Es wird davon <strong>abgeraten</strong>, <code>!important </code>zu verwenden, da es das Debuggen erschwert, weil die normale <em>Kaskadierung</em> der Stylesheets dadurch unterbrochen wird.</p> + +<p><strong>Einige allgemeine Regeln:</strong></p> + +<ul> + <li><strong>Niemals</strong> <code>!important</code> in CSS verwenden, das auf der gesamten Seite Verwendung findet.</li> + <li><code>!important</code> <strong>nur</strong> in Seiten spezifischem CSS verwenden, das seitenweites oder fremdes CSS (wie beispielsweise von ExtJS oder YUI) überschreibt.</li> + <li><strong>Niemals</strong> !important verwenden, wenn ein Plugin/Mashup geschrieben wird.</li> + <li><strong>Immer</strong> nach einem Weg suchen, Spezifität zu verwenden, bevor <code>!important</code> in Erwägung gezogen wird.</li> +</ul> + +<p><strong>Anstatt <code>!important</code> zu verwenden kann folgendes getan werden:</strong></p> + +<ol> + <li>Besseren Gebrauch der CSS Kaskadierungseigenschaften machen.</li> + <li> + <p>Spezifischere Regeln verwenden. Eines oder mehrere Elemente vor dem Element anzugeben, das selektiert werden soll, ist spezifischer und erhält eine höhere Priorität:</p> + + <pre class="lang-html prettyprint prettyprinted"><code><span class="tag"><div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"test"</span><span class="tag">></span><span class="pln"> + </span><span class="tag"><span></span><span class="pln">Text</span><span class="tag"></span></span><span class="pln"> +</span><span class="tag"></div></span></code></pre> + + <pre class="lang-css prettyprint prettyprinted"><code><span class="pln">div</span><span class="pun">#</span><span class="pln">test span </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">color</span><span class="pun">:</span><span class="pln"> green; </span><span class="pun">}</span><span class="pln"> +span </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">color</span><span class="pun">:</span><span class="pln"> red; </span><span class="pun">}</span><span class="pln"> +div span </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">color</span><span class="pun">:</span><span class="pln"> blue; </span><span class="pun">}</span></code></pre> + </li> +</ol> + +<p>Unabhängig von der Reihenfolge, in der der Text steht, wird der Text grün dargestellt, da die Regel spezifischer ist. (Des weiteren überschreibt die Regel für blau die Regel für rot unabhängig von deren Reihenfolge.)</p> + +<p><strong>!Important sollte in folgenden Fällen verwendet werden:</strong></p> + +<p>A) Erstes Szenario</p> + +<ol> + <li>Eine globale CSS Datei wird verwendet, die die visuellen Aspekte der Seite global setzt.</li> + <li>Es werden Inline Styles in Elementen verwendet, wovon grundsätzlich abgeraten wird.</li> +</ol> + +<p>In diesem Fall sollten bestimmte Stile in der globalen CSS Datei als !important deklariert werden, was Inline Styles überschreibt.</p> + +<p>B) Weiteres Szenario</p> + +<pre class="default prettyprint prettyprinted"><code><span class="com">#someElement p {</span><span class="pln"> + color</span><span class="pun">:</span><span class="pln"> blue</span><span class="pun">;</span><span class="pln"> +</span><span class="pun">}</span><span class="pln"> + +p</span><span class="pun">.</span><span class="pln">awesome </span><span class="pun">{</span><span class="pln"> + color</span><span class="pun">:</span><span class="pln"> red</span><span class="pun">;</span><span class="pln"> +</span><span class="pun">}</span></code></pre> + +<p>Ohne <code>!important</code> hat die erste Regel eine höhere Spezifität und hat damit Vorrang vor der zweiten Regel. Somit werden alle <code>awesome</code> Absätze blau dargestellt.</p> + +<p><strong>Wie <code>!important</code> überschrieben werden kann</strong></p> + +<p>Eine Eigenschaft, die mit !important gekennzeichnet ist, kann durch eine weitere !important Eigenschaft überschrieben werden. Hierbei muss jedoch die zweite Eigenschaft entweder eine höhere Spezifität besitzen (indem im Selektor ein zusätzlicher Tag, eine ID oder Klasse angegeben wird) oder eine CSS Regel mit dem gleichen Selektor muss weiter unten als die existierende platziert werden.</p> + +<p>Einige Beispiele mit höherer Spezifität:</p> + +<pre class="default prettyprint prettyprinted"><code><span class="pln">table td </span><span class="pun">{</span><span class="pln">height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">50px</span><span class="pln"> </span><span class="pun">!</span><span class="pln">important</span><span class="pun">;}</span><span class="pln"> +</span><span class="pun">.</span><span class="pln">myTable td </span><span class="pun">{</span><span class="pln">height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">50px</span><span class="pln"> </span><span class="pun">!</span><span class="pln">important</span><span class="pun">;}</span><span class="pln"> +</span><span class="com">#myTable td {height: 50px !important;}</span></code></pre> + +<p>Beispiel für gleichen Selektor nach dem existierenden:</p> + +<pre class="default prettyprint prettyprinted"><code><span class="pln">td </span><span class="pun">{</span><span class="pln">height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">50px</span><span class="pln"> </span><span class="pun">!</span><span class="pln">important</span><span class="pun">;}</span></code></pre> + +<h3 id="Die_not_Ausnahme">Die <code>:not</code> Ausnahme</h3> + +<p>Die Negations-Pseudoklasse <code>:not</code> wird nicht als Pseudoklasse in der Spezifitätsberechnung berücksichtigt. Jedoch werden Selektoren innerhalb der Negations-Pseudoklasse als normale Selektoren behandelt.</p> + +<div id="Beispiel_not"> +<p>Beispiel CSS:</p> + +<pre class="brush: css">div.outer p { + color:orange; +} +div:not(.outer) p { + color: lime; +} +</pre> + +<p>Angewendet auf folgendes HTML:</p> + +<pre class="brush: html"><div class="outer"> + <p>Dies ist im äußeren div.</p> + <div class="inner"> + <p>Dieser Text ist innerhalb des inneren divs.</p> + </div> +</div> +</pre> +</div> + +<p>Ergibt:</p> + +<p>{{ EmbedLiveSample('Beispiel_not','600','100') }}</p> + +<h3 id="Formbasierte_Spezifität">Formbasierte Spezifität</h3> + +<p>Spezifität basiert auf der Form eines Selektors. Im folgenden Fall zählt der Selektor als ein Attribut im Algorithmus zur Bestimmung der Spezifität, obwohl er eine ID selektiert.</p> + +<p>CSS:</p> + +<div id="Beispiel_formbasierte_Spezifitaet"> +<pre class="brush: css">* #foo { + color: green; +} +*[id="foo"] { + color: purple; +} +</pre> + +<p>Angewendet auf folgendes HTML:</p> + +<pre class="brush: html"><p id="foo">I am a sample text.</p> +</pre> +</div> + +<p>Ergibt:</p> + +<p>{{ EmbedLiveSample('Beispiel_formbasierte_Spezifitaet','600','100') }}</p> + +<p>Da das gleiche Element selektiert wird, der ID-Selektor jedoch eine höhere Spezifität aufweist.</p> + +<h3 id="Nichtbeachtung_der_Position_innerhalb_des_Baumes">Nichtbeachtung der Position innerhalb des Baumes</h3> + +<div id="Beispiel_Nichtbeachtung_Baumposition"> +<p>CSS:</p> + +<pre class="brush: css">body h1 { + color: green; +} +html h1 { + color: purple; +} +</pre> + +<p>Angewendet auf folgendes HTML:</p> + +<pre class="brush: html"><html> + <body> + <h1>Here is a title!</h1> + </body> +</html> +</pre> +</div> + +<p>Ergibt:</p> + +<p>{{ EmbedLiveSample('Beispiel_Nichtbeachtung_Baumposition','600','100') }}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>CSS3 Selektoren Spezifität - <a class="external" href="http://www.w3.org/TR/selectors/#specificity" rel="freelink">http://www.w3.org/TR/selectors/#specificity</a></li> + <li>{{ CSS_key_concepts() }}</li> +</ul> diff --git a/files/de/web/css/string/index.html b/files/de/web/css/string/index.html new file mode 100644 index 0000000000..9918c42d77 --- /dev/null +++ b/files/de/web/css/string/index.html @@ -0,0 +1,70 @@ +--- +title: <string> +slug: Web/CSS/string +tags: + - CSS + - CSS Datentypen + - Layout + - Referenz + - Web +translation_of: Web/CSS/string +--- +<div>{{CSSRef}}</div> + +<p>Der <code><string></code> <a href="/de/docs/Web/CSS">CSS</a> Datentyp repräsentiert eine Zeichenfolge. Er setzt sich aus <a class="external" href="http://de.wikipedia.org/wiki/Unicode">Unicode</a> Zeichen umschlossen von doppelten (") oder einfachen (') Anführungszeichen zusammen. Ein in doppelte Anführungszeichen eingeschlossener String darf keine doppelten Anführungszeichen enthalten, außer sie sind durch einen Backslash (\) escapt. Das gleiche Prinzip gilt für in einfache Anführungszeichen eingeschlossene Strings. Sie dürfen keine einfachen Anführungszeichen enthalten, außer sie sind durch einen Backslash (\) escapt. Das Backslash Zeichen muss escapt sein, um Teil des Strings zu sein.</p> + +<p>Zeilenumbrüche werden nicht akzeptiert, sofern sie nicht durch ein Zeilenvorschubzeichen wie \A oder \00000a escapt sind. Jedoch können Strings sich über mehrere Zeilen erstrecken. In diesem Fall muss das Zeilenumbruchszeichen durch einen Backslash (\) als letztes Zeichen der Zeile escapt werden.</p> + +<p>Zeichen können durch ihren <a class="external" href="https://de.wikipedia.org/wiki/Unicode#Codepunkte_und_Zeichen">Unicode Codepunkt</a> in Hexadezimalschreibweise beschrieben werden, wenn sie durch einen Backslash (\) escapt werden. \27 stellt dabei das einfache Anführungszeichen (') dar.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush: css">/* Einfaches Escapen von Anführungszeichen */ +"String mit doppelten Anführungszeichen" +"String mit \" escapten doppelten Anführungszeichen" +'String mit einfachen Anführungszeichen' +"String mit \' escapten einfachen Anführungszeichen" + +/* Zeilenumbruch in einem String */ +"String mit \AZeilenumbruch" + +/* String, der sich über zwei Zeilen erstreckt (diese zwei Strings sind exakt gleich) */ +"Ein äußerst langer \ +String" +"Ein äußerst langer String" +</pre> + +<div class="note"><strong>Hinweis:</strong> Strings in doppelten Anführungszeichen können auch mit Hilfe von \22 escapt werden und Strings mit einfachen Anführungszeichen mit Hilfe von \27.</div> + +<h2 id="Spezifikationen">Spezifikationen</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 Values', '#strings', '<string>')}}</td> + <td>{{Spec2('CSS3 Values')}}</td> + <td>Keine signifikante Änderung in Bezug auf CSS Level 2 (Revision 1)</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'syndata.html#strings', '<string>')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Explizit definiert; erlaubt 6-stellige escapte Unicodezeichen</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '', '<string>')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Implizit definiert; erlaubt 4-stellige escapte Unicodezeichen</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.types.string")}} diff --git a/files/de/web/css/tab-size/index.html b/files/de/web/css/tab-size/index.html new file mode 100644 index 0000000000..b324828746 --- /dev/null +++ b/files/de/web/css/tab-size/index.html @@ -0,0 +1,94 @@ +--- +title: tab-size +slug: Web/CSS/tab-size +tags: + - CSS + - CSS Eigenschaft + - Experimentell + - Referenz +translation_of: Web/CSS/tab-size +--- +<p>{{ CSSRef() }}</p> + +<p>{{ SeeCompatTable() }}</p> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>tab-size</code> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft wird verwendet, um die Breite eines Tabulatorzeichens (<code>U+0009</code>) anzupassen.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">/* <integer> Werte */ +tab-size: 4; +tab-size: 0; + +/* <length> Werte */ +tab-size: 10px; +tab-size: 2em; + +/* Globale Werte */ +tab-size: inherit; +tab-size: initial; +tab-size: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt>{{cssxref("<integer>")}}</dt> + <dd>Die Anzahl der Leerzeichen in einem Tabulator. Darf nicht negativ sein.</dd> + <dt>{{cssxref("<length>")}}</dt> + <dd>Die Breite eines Tabulators. Darf nicht negativ sein.</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush: css">pre { + tab-size: 4; /* Setzt die Tabgröße auf 4 Leerzeichen */ +} +</pre> + +<pre class="brush: css">pre { + tab-size: 0; /* Entfernt die Einrückung */ +} +</pre> + +<pre class="brush: css">pre { + tab-size: 99; /* Verwende keine Tabs! */ +} +</pre> + +<h2 id="Spezifikationen">Spezifikationen</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 Text', '#tab-size', 'tab-size')}}</td> + <td>{{Spec2('CSS3 Text')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{Compat("css.properties.tab-size")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a class="external" href="http://lists.w3.org/Archives/Public/www-style/2008Dec/0009.html"><cite>Controlling size of a tab character (U+0009)</cite></a>, ein E-Mail von Anne van Kesteren an das CSSWG.</li> +</ul> diff --git a/files/de/web/css/table-layout/index.html b/files/de/web/css/table-layout/index.html new file mode 100644 index 0000000000..1a7136e994 --- /dev/null +++ b/files/de/web/css/table-layout/index.html @@ -0,0 +1,117 @@ +--- +title: table-layout +slug: Web/CSS/table-layout +tags: + - CSS + - CSS Eigenschaft + - CSS Tabelle + - Referenz + - 'recipe:css-property' +translation_of: Web/CSS/table-layout +--- +<div>{{CSSRef}}</div> + +<p>Die CSS Eigenschaft <strong><code>table-layout</code></strong> legt den Algorithmus fest, der für das Layout von {{htmlelement("table")}} Zellen, Zeilen und Spalten verwendet wird.</p> + +<div>{{EmbedInteractiveExample("pages/css/table-layout.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> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css no-line-numbers notranslate">/* Keyword values */ +table-layout: auto; +table-layout: fixed; + +/* Global values */ +table-layout: inherit; +table-layout: initial; +table-layout: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt>{{Cssxref("auto")}}</dt> + <dd>Standardwert. Die meisten Browser haben einen automatischen Tabellenlayout-Algorithmus. Die Breiten der Tabelle und ihrer Zellen werden an den Inhalt angepasst.</dd> + <dt><code>fixed</code></dt> + <dd>Die Tabellen- und Spaltenbreiten werden durch die Breiten der Tabellen- und Spaltenelemente oder durch die Breite der ersten Zellenzeile festgelegt. Zellen in nachfolgenden Zeilen haben keinen Einfluss auf die Spaltenbreiten.</dd> + <dd>Bei der "festen" oder "fixierten" <code>fixed</code> Layoutmethode kann die gesamte Tabelle gerendert werden, sobald die erste Tabellenzeile heruntergeladen und analysiert wurde. Dies kann die Renderingzeit bei der "automatischen" <code>auto</code> Layoutmethode beschleunigen, aber der Inhalt nachfolgender Zellen passt möglicherweise nicht in die bereitgestellten Spaltenbreiten. Zellen verwenden die Eigenschaft {{Cssxref("overflow")}}, um zu bestimmen, ob überlaufende Inhalte abgeschnitten werden sollen. Dies erfolgt aber nur, wenn die Breite der Tabelle bekannt ist; andernfalls werden die Zellen nicht überlaufen.</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="Beispiele">Beispiele</h2> + +<h3 id="Tabellen_fester_Breite_mit_Text-Überlauf">Tabellen fester Breite mit Text-Überlauf</h3> + +<p>In diesem Beispiel wird ein festes <code>fixed</code> Tabellenlayout in Kombination mit der Eigenschaft {{cssxref("width")}} verwendet, um die Breite der Tabelle einzuschränken. Die Eigenschaft {{cssxref("text-overflow")}} wird verwendet, um eine Ellipse auf Wörter anzuwenden, die zu lang sind, um in die Tabelle zu passen.<br> + Wenn das Tabellenlayout automatisch <code>auto</code> wäre, würde die Tabelle trotz der angegebenen Breite wachsen, um ihren Inhalt aufzunehmen.</p> + +<h4 id="HTML">HTML</h4> + +<div id="Fixed-width_tables_with_text-overflow"> +<pre class="brush: html notranslate"><table> + <tr><td>Ed</td><td>Wood</td></tr> + <tr><td>Albert</td><td>Schweitzer</td></tr> + <tr><td>Jane</td><td>Fonda</td></tr> + <tr><td>William</td><td>Shakespeare</td></tr> +</table></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">table { + table-layout: fixed; + width: 120px; + border: 1px solid red; +} + +td { + border: 1px solid blue; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +}</pre> + +</div> + +<h4 id="Ergebnis">Ergebnis</h4> + +<p>{{EmbedLiveSample('Fixed-width_tables_with_text-overflow')}}</p> + +<h2 id="Spezifikationen">Spezifikationen</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('CSS2.1', 'tables.html#width-layout', 'table-layout')}}</td> + <td>{{Spec2('CSS2.1')}}</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.properties.table-layout")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><code><a href="/en-US/docs/Web/HTML/Element/table"><table></a></code></li> +</ul> diff --git a/files/de/web/css/tatsächlicher_wert/index.html b/files/de/web/css/tatsächlicher_wert/index.html new file mode 100644 index 0000000000..5e77670cac --- /dev/null +++ b/files/de/web/css/tatsächlicher_wert/index.html @@ -0,0 +1,36 @@ +--- +title: tatsächlicher Wert +slug: Web/CSS/tatsächlicher_Wert +translation_of: Web/CSS/actual_value +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Der <strong>tatsächliche Wert</strong> einer CSS Eigenschaft ist der verwendete Wert nachdem alle Annäherungen angewendet wurden. Zum Beispiel kann ein User Agent nur in der Lage sein, Ränder mit einem ganzzahligen Pixelwert darzustellen und daher gezwungen sein, die berechnete Breite des Randes anzunähern.</p> + +<h2 id="Spezifikationen">Spezifikationen</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('CSS2.1', 'cascade.html#actual-value', 'actual value')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/CSS/Referenz">CSS Referenz</a></li> + <li>{{CSS_key_concepts}}</li> +</ul> diff --git a/files/de/web/css/text-align-last/index.html b/files/de/web/css/text-align-last/index.html new file mode 100644 index 0000000000..41b0607160 --- /dev/null +++ b/files/de/web/css/text-align-last/index.html @@ -0,0 +1,106 @@ +--- +title: text-align-last +slug: Web/CSS/text-align-last +tags: + - CSS + - CSS Eigenschaft + - CSS Text + - Experimentell + - Referenz +translation_of: Web/CSS/text-align-last +--- +<div>{{CSSRef}}</div> + +<p>Die CSS Eigenschaft<strong> <code>text-align-last</code></strong> beschreibt, wie die letzte Zeile eines Blocks, oder die letzte Zeile unmittelbar vor einem erzwungenem Umbruch, ausgerichtet ist</p> + +<div>{{EmbedInteractiveExample("pages/css/text-align-last.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css no-line-numbers">/* Keyword values */ +text-align-last: auto; +text-align-last: start; +text-align-last: end; +text-align-last: left; +text-align-last: right; +text-align-last: center; +text-align-last: justify; + +/* Global values */ +text-align-last: inherit; +text-align-last: initial; +text-align-last: unset; +</pre> + +<h3 id="Values">Values</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>Die Ausrichtung der Zeile ist gleich dem Wert von {{cssxref("text-align")}}, außer wenn {{cssxref("text-align")}} den Wert <code>justify</code> hat; in diesem Fall entspricht der Wert von <code>text-align-last</code> der Einstellung <code>start</code>.</dd> + <dt><code>start</code></dt> + <dd>Das Gleiche wie <code>left</code>, wenn die Leserichtung links-nach-rechts ist, und <code>right</code>, wenn die Leserichtung rechts-nach-links ist.</dd> + <dt><code>end</code></dt> + <dd>Das Gleiche wie <code>right</code>, wenn die Leserichtung links-nach-rechts ist, und <code>left</code>, wenn die Leserichtung rechts-nach-links ist.</dd> + <dt><code>left</code></dt> + <dd>Die Inhalte werden an der linken Kante des inline-Elements ausgerichtet.</dd> + <dt><code>right</code></dt> + <dd>Die Inhalte werden an der rechten Kante des inline-Elements ausgerichtet.</dd> + <dt><code>center</code></dt> + <dd>Die Inhalte werden innerhalb des inline-Elements zentriert.</dd> + <dt><code>justify</code></dt> + <dd>Der Text wird im Blocksatz angezeigt, d.h. der Text schließt sowohl links als auch rechts mit der Kante des inline-Elements ab.</dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiel">Beispiel</h2> + +<div class="hidden"> +<pre class="brush: html"><p>Integer elementum massa at nulla placerat varius. Suspendisse in libero risus, in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque. Nullam est eros, suscipit sed dictum quis, accumsan a ligula.</p> +</pre> +</div> + +<pre class="brush: css">p { + font-size: 1.4em; + text-align: justify; + text-align-last: center; +}</pre> + +<p>{{EmbedLiveSample('Example','560')}}</p> + +<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('CSS3 Text', '#text-align-last-property', 'text-align-last')}}</td> + <td>{{Spec2('CSS3 Text')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<div>{{cssinfo}}</div> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("css.properties.text-align-last")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{cssxref("text-align")}}</li> +</ul> diff --git a/files/de/web/css/text-align/index.html b/files/de/web/css/text-align/index.html new file mode 100644 index 0000000000..5af079ca81 --- /dev/null +++ b/files/de/web/css/text-align/index.html @@ -0,0 +1,238 @@ +--- +title: text-align +slug: Web/CSS/text-align +tags: + - CSS + - CSS Eigenschaft + - CSS Text + - Referenz +translation_of: Web/CSS/text-align +--- +<div>{{CSSRef}}</div> + +<div> +<p>Die <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft <strong><code>text-align</code></strong> egt die horizontale Ausrichtung eines Blockelements oder eines Tabellenzellenrahmens fest. Dies bedeutet, dass sie wie {{cssxref("vertical-align")}} funktioniert, jedoch in horizontaler Richtung.</p> + +<div>{{EmbedInteractiveExample("pages/css/text-align.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> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: css no-line-numbers notranslate">/* Keyword values */ +text-align: left; +text-align: right; +text-align: center; +text-align: justify; +text-align: justify-all; +text-align: start; +text-align: end; +text-align: match-parent; + +/* Character-based alignment in a table column */ +text-align: "."; +text-align: "." center; + +/* Block alignment values (Non-standard syntax) */ +text-align: -moz-center; +text-align: -webkit-center; + +/* Global values */ +text-align: inherit; +text-align: initial; +text-align: unset;</pre> + +<p>Die Eigenschaft <code>text-align</code> wird auf eine der folgenden Arten angegeben:</p> + +<ul> + <li>Mit den Schlüsselwortwerten <code><a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS/text-align$edit#start">start</a></code>, <code><a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS/text-align$edit#end">end</a></code>, <code><a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS/text-align$edit#left">left</a></code>, <code><a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS/text-align$edit#right">right</a></code>, <code><a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS/text-align$edit#center">center</a></code>, <code><a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS/text-align$edit#justify">justify</a></code>, <code><a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS/text-align$edit#justify-all">justify-all</a></code>, or <code><a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS/text-align$edit#match-parent">match-parent</a></code>.</li> + <li>Nur mit einem <code><a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS/text-align$edit#string"><string></a></code> Wert, wobei in diesem Fall der andere Wert standardmäßig auf <code><a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS/text-align$edit#right">right</a></code> gesetzt wird.</li> + <li> Die Verwendung sowohl eines Schlüsselwortwerts als auch eines <code><a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS/text-align$edit#string"><string></a></code> Wertes.</li> +</ul> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code>start</code> {{experimental_inline}}</dt> + <dd>Dasselbe wie <code>left</code>, falls {{cssxref("direction")}} <code>ltr</code> ist und <code>right</code>, falls <code>direction</code> <code>rtl</code> ist.</dd> + <dt><code>end</code> {{experimental_inline}}</dt> + <dd>Dasselbe wie <code>right</code>, falls {{cssxref("direction")}} <code>ltr</code> ist und <code>left</code>, falls <code>direction</code> <code>rtl</code> ist.</dd> + <dt><code>left</code></dt> + <dd>Die Inlineinhalte werden am linken Rand (linksbündig) der Zeilenbox ausgerichtet.</dd> + <dt><code>right</code></dt> + <dd>Die Inlineinhalte werden am rechten Rand (rechtsbündig) der Zeilenbox ausgerichtet.</dd> + <dt><code>center</code></dt> + <dd>Die Inlineinhalte werden innerhalb der Zeilenbox zentriert.</dd> + <dt><code>justify</code></dt> + <dd>Der Text wird im Blocksatz angeordnet. Text sollte seinen linken und rechten Rand bündig am linken und rechten Rand des Absatzinhalts ausrichten.</dd> + <dt><code>justify-all</code> {{experimental_inline}}</dt> + <dd>Dasselbe wie <code>justify</code>, erzwingt jedoch, dass die letzte Zeile ebenfalls im Blocksatz angeordnet wird.</dd> + <dt><code>match-parent</code> {{experimental_inline}}</dt> + <dd>Ähnlich zu <code>inherit</code> mit dem Unterschied, dass die Werte <code>start</code> und <code>end</code> in Bezug auf die {{cssxref("direction")}} des Elternelements berechnet werden und durch den passenden <code>left</code> oder <code>right</code> Wert ersetzt werden.</dd> + <dt id="string">{{cssxref("<string>")}} {{experimental_inline}}</dt> + <dd>Gibt bei Anwendung auf eine Tabellenzelle das Zeichen an, um das der Inhalt der Zelle ausgerichtet wird.</dd> +</dl> + +<h2 id="Bedenken_zur_Zugänglichkeit">Bedenken zur Zugänglichkeit</h2> + +<p>Der inkonsistente Abstand zwischen den Wörtern, der durch einen gerechtfertigten Text entsteht, kann für Menschen mit kognitiven Problemen wie Legasthenie problematisch sein.</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html">Understanding Success Criterion 1.4.8 | Understanding WCAG 2.0</a></li> +</ul> + +<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="Beispiele">Beispiele</h2> + +<h3 id="Linksbündig">Linksbündig</h3> + +<h4 id="HTML">HTML</h4> + +<div id="Left_alignment"> +<pre class="brush: html notranslate"><p class="example"> + Integer elementum massa at nulla placerat varius. + Suspendisse in libero risus, in interdum massa. + Vestibulum ac leo vitae metus faucibus gravida ac in neque. + Nullam est eros, suscipit sed dictum quis, accumsan a ligula. +</p></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css; highlight:[2] notranslate">.example { + text-align: left; + border: solid; +}</pre> +</div> + +<h4 id="Ergebnis">Ergebnis</h4> + +<p>{{EmbedLiveSample("Left_alignment","100%","100%")}}</p> + +<h3 id="Zentriert">Zentriert</h3> + +<h4 id="HTML_2">HTML</h4> + +<div id="Centered_text"> +<pre class="brush: html notranslate"><p class="example"> + Integer elementum massa at nulla placerat varius. + Suspendisse in libero risus, in interdum massa. + Vestibulum ac leo vitae metus faucibus gravida ac in neque. + Nullam est eros, suscipit sed dictum quis, accumsan a ligula. +</p></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css; highlight:[2] notranslate">.example { + text-align: center; + border: solid; +}</pre> +</div> + +<h4 id="Ergebnis_2">Ergebnis</h4> + +<p>{{EmbedLiveSample("Centered_text","100%","100%")}}</p> + +<h3 id="Blocksatz">Blocksatz</h3> + +<h4 id="HTML_3">HTML</h4> + +<div id="Justify"> +<pre class="brush: html notranslate"><p class="example"> + Integer elementum massa at nulla placerat varius. + Suspendisse in libero risus, in interdum massa. + Vestibulum ac leo vitae metus faucibus gravida ac in neque. + Nullam est eros, suscipit sed dictum quis, accumsan a ligula. +</p></pre> + +<h4 id="CSS_3">CSS</h4> + +<pre class="brush: css; highlight:[2] notranslate">.example { + text-align: justify; + border: solid; +}</pre> + +</div> + +<h4 id="Ergebnis_3">Ergebnis</h4> + +<p>{{EmbedLiveSample("Justify","100%","100%")}}</p> + +<h3 id="Hinweis">Hinweis</h3> + +<p>Der Standard-kompatible Weg, einen Block selbst zu zentrieren, ohne seinen Inline-Inhalt zu zentrieren, ist z.B. das Setzen der linken und rechten {{cssxref("margin")}} auf <code>auto</code>, z.B..:</p> + +<pre class="brush: css notranslate">.something { + margin: auto; +} +</pre> + +<pre class="brush: css notranslate">.something { + margin: 0 auto; +} +</pre> + +<pre class="brush: css notranslate">.something { + margin-left: auto; + margin-right: auto; +} +</pre> + +<h2 id="Spezifikationen">Spezifikationen</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 Logical Properties', '#text-align', 'text-align')}}</td> + <td>{{Spec2('CSS Logical Properties')}}</td> + <td>Keine Änderungen</td> + </tr> + <tr> + <td>{{SpecName('CSS4 Text', '#alignment', 'text-align')}}</td> + <td>{{Spec2('CSS4 Text')}}</td> + <td>Fügt den Wert <code><string></code> hinzu.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Text', '#text-align-property', 'text-align')}}</td> + <td>{{Spec2('CSS3 Text')}}</td> + <td>Fügt die <code>start</code>, <code>end</code> und <code>match-parent</code> Werte hinzu. Ändert den unbenannten Initialwert zu <code>start</code> (der er war).</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'text.html#alignment-prop', 'text-align')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Keine Änderungen</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#text-align', 'text-align')}}</td> + <td>{{Spec2('CSS1')}}</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.properties.text-align")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{cssxref("margin", "margin:auto")}}, {{cssxref("margin-left", "margin-left:auto")}}, {{cssxref("vertical-align")}}</li> +</ul> diff --git a/files/de/web/css/text-decoration-color/index.html b/files/de/web/css/text-decoration-color/index.html new file mode 100644 index 0000000000..32f9355d51 --- /dev/null +++ b/files/de/web/css/text-decoration-color/index.html @@ -0,0 +1,135 @@ +--- +title: text-decoration-color +slug: Web/CSS/text-decoration-color +translation_of: Web/CSS/text-decoration-color +--- +<div>{{ CSSRef }}</div> + +<h2 id="Zusammenfassung">Zusammenfassung</h2> + +<p>Mit der CSS-Eigenschaft <code>text-decoration-color</code> kann die Farbe für Unterstreichungen, Überstreichungen oder Durchstreichungen gesetzt werden, spezifiziert durch {{cssxref("text-decoration-line")}}. Das ist die bevorzugte Art und Weise, Textdekorationen eine Farbe zuzuweisen.</p> + +<div>{{cssinfo}}</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formale Syntax</a>: {{csssyntax("text-decoration-color")}} +</pre> + +<pre>text-decoration-color: currentColor +text-decoration-color: red +text-decoration-color: #00ff00 +text-decoration-color: rgba(255, 128, 128, 0.5) +text-decoration-color: transparent + +text-decoration-color: inherit +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code><color></code></dt> + <dd>Die Eigenschaft <code>color</code> akzeptiert verschiedene Schlüsselwörter und numerische Daten. Siehe {{cssxref("<color>")}}-Werte für genauere Details.</dd> +</dl> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush: css; highlight:[3]">.beispiel { + text-decoration: underline; + text-decoration-color: red; +} +</pre> + +<p>Das obige Beispiel hat denselben Effekt wie der folgende Code, der auch noch einen Hover-Style hinzufügt.</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> +<head> +<style> +.beispiel { + font-size: 24px; + text-decoration: underline; + color: red; +} +.beispiel:hover { + color: blue; + text-decoration: line-through; +} +</style> +</head> +<body> +<span class="beispiel"> + <span style="color:black">schwarzer Text mit roter Linie und blauem Hovereffekt</span> +</span> +</body> +</html> +</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Anmerkung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Text-decoration', '#text-decoration-color', 'text-decoration-color') }}</td> + <td>{{ Spec2('CSS3 Text-decoration') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompabilität">Browserkompabilität</h2> + +<p>{{ CompatibilityTable }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funktion</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Elementare Unterstützung</td> + <td>{{ CompatUnknown }}</td> + <td>{{ CompatGeckoDesktop("6.0") }}{{ property_prefix("-moz") }}</td> + <td>{{ CompatUnknown }}</td> + <td>{{ CompatUnknown }}</td> + <td>{{ CompatUnknown }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funktion</th> + <th>Android</th> + <th>Firefox mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Elementare Unterstützung</td> + <td>{{ CompatUnknown }}</td> + <td>{{ CompatGeckoMobile("6.0") }}{{ property_prefix("-moz") }}</td> + <td>{{ CompatUnknown }}</td> + <td>{{ CompatUnknown }}</td> + <td>{{ CompatUnknown }}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/de/web/css/text-decoration-line/index.html b/files/de/web/css/text-decoration-line/index.html new file mode 100644 index 0000000000..ac3ab5bfb1 --- /dev/null +++ b/files/de/web/css/text-decoration-line/index.html @@ -0,0 +1,94 @@ +--- +title: text-decoration-line +slug: Web/CSS/text-decoration-line +tags: + - CSS + - CSS Eigenschaft + - Layout + - Referenz + - Web +translation_of: Web/CSS/text-decoration-line +--- +<div>{{ CSSRef() }}</div> + +<h2 id=".C3.9Cbersicht" name=".C3.9Cbersicht">Übersicht</h2> + +<p>Die <code>text-decoration-line</code> CSS Eigenschaft repräsentiert die Art der Liniendekoration eines Elements.</p> + +<p>Unter- und Überstreichungsdekorationen werden hinter dem Text dargestellt, während Durchstreichungen über dem Text dargestellt werden.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="twopartsyntaxbox"><a href="/de/docs/CSS/Wertdefinitionssyntax" title="CSS/Value_definition_syntax">Formale Syntax</a>: {{csssyntax("text-decoration-line")}} +</pre> + +<pre>text-decoration-line: none /* This is the only keyword that cannot be mixed with other */ + +text-decoration-line: underline +text-decoration-line: overline +text-decoration-line: line-through +text-decoration-line: underline overline +text-decoration-line: overline underline line-through + +text-decoration-line: inherit +</pre> + +<h3 id="Werte" name="Werte">Werte</h3> + +<p>Akzeptiert entweder <code>none</code> als Wert oder einen oder mehrere durch Leerzeichen getrennte Werte:</p> + +<dl> + <dt><code>none</code></dt> + <dd>Erzeugt keine Textdekoration.</dd> + <dt><code>underline</code></dt> + <dd>Jede Zeile des Texts wird unterstrichen.</dd> + <dt><code>overline</code></dt> + <dd>Über jeder Zeile des Texts wird eine Linie dargestellt.</dd> + <dt><code>line-through</code></dt> + <dd>Jede Zeile des Texts wird durchgestrichen.</dd> + <dt><code>blink {{deprecated_inline}}</code></dt> + <dd>Der Text blinkt (wechselt zwischen sichtbar und unsichtbar). Dem Standard folgende User Agents können das Blinken ignorieren. Dieser Wert ist <strong>missbilligt</strong> und es sollten stattdessen <a href="/de/docs/Web/Guide/CSS/CSS_Animationen_nutzen">Animationen</a> verwendet werden.</dd> + <dt><code>-moz-anchor-decoration</code></dt> + <dd><a href="/de/docs/Web/CSS/CSS_Referenz/Mozilla_CSS_Erweiterungen" title="CSS_Reference/Mozilla_Extensions">Mozilla CSS Erweiterung</a>, nicht geeignet für Webinhalte.</dd> +</dl> + +<h2 id="Beispiel" name="Beispiel">Beispiel</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p>Hier steht Text mit einer roten Unterkringelung!</p></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">p { + -moz-text-decoration-line: underline; + -moz-text-decoration-style: wavy; + -moz-text-decoration-color: red; +}</pre> + +<p>{{ EmbedLiveSample('Beispiel') }}</p> + +<h2 id="Spezifikation" name="Spezifikation">Spezifikation</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Text-decoration', '#text-decoration-line', 'text-decoration-line') }}</td> + <td>{{ Spec2('CSS3 Text-decoration') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.properties.text-decoration-line")}} diff --git a/files/de/web/css/text-decoration/index.html b/files/de/web/css/text-decoration/index.html new file mode 100644 index 0000000000..af1de281c1 --- /dev/null +++ b/files/de/web/css/text-decoration/index.html @@ -0,0 +1,116 @@ +--- +title: text-decoration +slug: Web/CSS/text-decoration +tags: + - CSS + - CSS Eigenschaft + - CSS Text + - NeedsMobileBrowserCompatibility + - Referenz +translation_of: Web/CSS/text-decoration +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <strong><code>text-decoration</code></strong> CSS Eigenschaft wird dazu verwendet, die Textformatierung auf <code>underline</code>, <code>overline</code>, <code>line-through</code> oder <code>blink</code> zu setzen. Unter- und Überstrichdekorationen werden unterhalb des Texts positioniert, Durchstreichungen über dem Text.</p> + +<p>Textdekorationen werden auf Unterelemente gezeichnet. Das bedeutet, dass es nicht möglich ist, die Textdekoration, die für ein übergeordnetes Element angegeben wurde, für ein Unterelement zu deaktivieren. Zum Beispiel würde in folgendem Markup <code><p>Dieser Text hat <em>ein paar hervorgehobene Wörter</em>.</p></code> die Stilregel <code>p { text-decoration: underline; }</code> den gesamten Absatz unterstreichen. Die Stilregel <code>em { text-decoration: none; }</code> würde nichts ändern; der gesamte Absatz wäre immer noch unterstrichen. Jedoch würde die Regel <code>em { text-decoration: overline; }</code> eine zweite Dekoration für "ein paar hervorgehobene Wörter" erscheinen lassen.</p> + +<div class="note style-wrap"> +<p><strong>Hinweis:</strong> CSS Text Decoration Level 3 hat diese Eigenschaft zu einer Kurzschreibweise für die drei neuen CSS Eigenschaften {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}} und {{cssxref("text-decoration-style")}} gemacht. Wie für andere Kurzschreibweiseeigenschaften bedeutet dies, dass sie deren Werte auf deren Standardwerte zurücksetzt, falls diese nicht explizit in der Kurzschreibweiseeigenschaft angegeben sind.</p> +</div> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: css">/* Schlüsselwortwerte */ +text-decoration: none; /* Keine Textdekoration */ +text-decoration: underline red; /* Rote Unterstreichung */ +text-decoration: underline wavy red; /* Rote gewellte Unterstreichung */ + +/* Globale Werte */ +text-decoration: inherit; +text-decoration: initial; +text-decoration: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<p>Die <code>text-decoration</code> Eigenschaft ist eine Kurzschreibweise und kann die Werte jeder der drei Langschreibweiseeigenschaften annehmen: {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-color")}} und {{cssxref("text-decoration-style")}}</p> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush: css">h1.under { + text-decoration: underline; +} +h1.over { + text-decoration: overline; +} +p.line { + text-decoration: line-through; +} +p.blink { + text-decoration: blink; +} +a.none { + text-decoration: none; +} +p.underover { + text-decoration: underline overline; +} +</pre> + +<pre class="brush: html" style="display: none;"><h1 class="under">Unterstrichene Überschrift</h1> +<p class="line">Falls Text durchgestrichen werden soll, verwende <code>line-through</code>.</p> +<p class="blink">Dieser Text könnte blinken.</p> +<h1 class="over">Und jetzt eine überstrichene Überschrift.</h1> +<p>Dieser <a class="none" href="textdecoration.html">Link wird nicht unterstrichen</a>, wie das bei den meisten Links standardmäßig ist. Vorsicht beim Entfernen der Textdekoration bei Links, da die meisten Benutzer davon ausgehen, dass Hyperlinks unterstrichen sind.</p> +<p class="underover">Dieser Text hat beides, eine Unter- und eine Überstreichung.</p> +</pre> + +<p>{{EmbedLiveSample('Beispiele','100%','310')}}</p> + +<h2 id="Spezifikationen">Spezifikationen</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 Text Decoration', '#text-decoration-property', 'text-decoration')}}</td> + <td>{{Spec2('CSS3 Text Decoration')}}</td> + <td>Hat die Eigenschaft in eine Kurzschreibweiseeigenschaft ungewandelt. Unterstützung für den Wert von {{cssxref('text-decoration-style')}} wurde hinzugefügt.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'text.html#lining-striking-props', 'text-decoration')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Keine wesentlichen Änderungen</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#text-decoration', 'text-decoration')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{Compat("css.properties.text-decoration")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Das {{cssxref("list-style")}} Attribut steuert die Darstellung von Einträgen in HTML {{HTMLElement("ol")}} und {{HTMLElement("ul")}} Listen.</li> +</ul> diff --git a/files/de/web/css/text-indent/index.html b/files/de/web/css/text-indent/index.html new file mode 100644 index 0000000000..7c5c74219c --- /dev/null +++ b/files/de/web/css/text-indent/index.html @@ -0,0 +1,119 @@ +--- +title: text-indent +slug: Web/CSS/text-indent +tags: + - CSS + - CSS Eigenschaft + - CSS Text + - Layout + - Referenz +translation_of: Web/CSS/text-indent +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die CSS Eigenschaft <code>text-indent</code><font face="Consolas"> </font>legt den Einzug vor der ersten Zeile eines Textes fest. Dabei wird der Abstand zur linken Seite des enthaltenden Elements angegeben.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("text-indent")}}</pre> + +<pre>text-indent: 3mm /* Beispielwerte */ +text-indent: 40px +text-indent: 15% /* Prozentuale Angaben sind relativ zur Breite des Blockelements */ +text-indent: each-line /* Festgelegte Werte */ +text-indent: hanging + +text-indent: inherit +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code><length></code></dt> + <dd>Der Einzug wird absolut angegeben. Negative Angaben sind erlaubt. Für mögliche Einheiten, siehe {{cssxref("<length>")}} .</dd> + <dt><code><percentage></code></dt> + <dd>Abstand wird prozentual {{cssxref("<percentage>")}} zur Breite des enthaltenden Blockelements angegeben.</dd> + <dt><code>each-line</code> {{experimental_inline}}</dt> + <dd>Der Einzug beeinflusst die erste Zeile des Blockelements sowie jede Zeile nach einem erzwungenem Zeilenumbruch (<em>forced line break</em> ), lässt Zeilen nach einem <em>soft wrap break</em> allerdings unberührt.</dd> + <dt><code>hanging</code> {{experimental_inline}}</dt> + <dd>Kehrt den Texteinzug um. Jede Zeile, außer der ersten, wird eingerückt.</dd> +</dl> + +<h2 id="Simple_indent" name="Simple_indent">Beispiel mit absoluter Angabe</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy +nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> +<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy +nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">p { + text-indent: 5em; + background: powderblue; +}</pre> + +<p>{{ EmbedLiveSample('Simple_indent','100%','100%') }}</p> + +<h2 id="Percentage_indent_example" name="Percentage_indent_example">Beispiel mit prozentualer Angabe</h2> + +<h3 id="HTML_Content">HTML Content</h3> + +<pre class="brush: html"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy +nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> +<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy +nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> </pre> + +<h3 id="CSS_Content">CSS Content</h3> + +<pre class="brush: css">p { + text-indent: 30%; + background: plum; +}</pre> + +<p>{{ EmbedLiveSample('Percentage_indent_example','100%','100%') }}</p> + +<h2 id="Details">Details</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Text', '#text-indent', 'text-indent')}}</td> + <td>{{Spec2('CSS3 Text')}}</td> + <td>Schlüsselwerte <code>hanging</code> und <code>each-line</code> hinzugefügt</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'text-indent')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td><code>text-indent</code> als Eigenschaft, die animiert werden kann</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'text.html#indentation-prop', 'text-indent')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Verhalten von <code>display: inline-block</code> und anderen <code>block </code>Containern explizit definiert</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#text-indent', 'text-indent')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<p>{{Compat("css.properties.text-indent")}}</p> diff --git a/files/de/web/css/text-justify/index.html b/files/de/web/css/text-justify/index.html new file mode 100644 index 0000000000..441321a862 --- /dev/null +++ b/files/de/web/css/text-justify/index.html @@ -0,0 +1,117 @@ +--- +title: text-justify +slug: Web/CSS/text-justify +tags: + - CSS + - CSS Eigenschaft + - CSS Text + - Referenz +translation_of: Web/CSS/text-justify +--- +<div>{{CSSRef}}</div> + +<p>Die CSS Eigenschaft <strong><code>text-justify</code></strong> legt fest, wie der Blocksatz ausgeführt werden soll, wenn ein Element auf {{cssxref("text-align")}}<code>: justify;</code> gesetzt ist.</p> + +<pre class="brush: css no-line-numbers">text-justify: none; +text-justify: auto; +text-justify: inter-word; +text-justify: inter-character; +text-justify: distribute; /* Deprecated value */ +</pre> + +<div>{{cssinfo}}</div> + +<h2 id="Syntax">Syntax</h2> + +<p>Die Eigenschaft <code>text-justify</code> wird mit einem der Schlüsselwörter aus der folgenden Liste definiert.</p> + +<h3 id="Values">Values</h3> + +<dl> + <dt><code>none</code></dt> + <dd>Der Blocksatz ist abgeschaltet. Dies hat den gleichen Effekt wie wenn {{cssxref("text-align")}} überhaupt nicht definiert ist. Diese Einstellung is nützlich, wenn man den Blocksatz dynamisch ein- und ausschalten möchte.</dd> + <dt><code>auto</code></dt> + <dd>Der Browser entscheidet, wie der Blocksatz ausgeführt wird, abhängig von Performance und Qualität, aber auch, was angemessen ist für die Sprache des Textes (z.B. Deutsch, asiatische Sprachen). Dies ist die Standardeinstellung, wenn <code>text-justify</code> nicht definiert ist.</dd> + <dt><code>inter-word</code></dt> + <dd>Um den Blocksatz zu erreichen, wird Weißraum zwischen den <em>Wörtern </em>eingefügt (also eine Variante zu {{cssxref("word-spacing")}}). Diese Form ist gebräuchlich für Sprachen, die Wörter mit Leerzeichen trennen, wie Deutsch oder Koreanisch.</dd> + <dt><code>inter-character</code></dt> + <dd>Um den Blocksatz zu erreichen, wird Weißraum zwischen den <em>Zeichen </em>eingefügt (also eine Variante zu {{cssxref("letter-spacing")}}). Diese Form ist gebräuchlich für Sprachen wie Japanisch.</dd> + <dt><code>distribute</code> {{deprecated_inline}}</dt> + <dd>Zeigt das gleiche Verhalten wie <code>inter-character</code>; dieser Wert wird beibehalten, um Abwärtskompatibilität zu gewährleisten.</dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<div class="hidden"> +<pre class="brush: html"><p class="none"><code>text-justify: none</code> —<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.</p> +<p class="auto"><code>text-justify: auto</code> —<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.</p> +<p class="dist"><code>text-justify: distribute</code> —<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.</p> +<p class="word"><code>text-justify: inter-word</code> —<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.</p> +<p class="char"><code>text-justify: inter-character</code> —<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.</p></pre> +</div> + +<pre class="brush: css">p { + font-size: 1.5em; + border: 1px solid black; + padding: 10px; + width: 95%; + margin: 10px auto; + text-align: justify; +} + +.none { + text-justify: none; +} + +.auto { + text-justify: auto; +} + +.dist { + text-justify: distribute; +} + +.word { + text-justify: inter-word; +} + +.char { + text-justify: inter-character; +}</pre> + +<p>{{EmbedLiveSample("Examples","100%",400)}}</p> + +<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('CSS3 Text', '#text-justify-property', 'text-justify')}}</td> + <td>{{Spec2('CSS3 Text')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("css.properties.text-justify")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{cssxref("text-align")}}</li> +</ul> diff --git a/files/de/web/css/text-overflow/index.html b/files/de/web/css/text-overflow/index.html new file mode 100644 index 0000000000..c513eca823 --- /dev/null +++ b/files/de/web/css/text-overflow/index.html @@ -0,0 +1,274 @@ +--- +title: text-overflow +slug: Web/CSS/text-overflow +tags: + - CSS + - CSS Eigenschaft + - NeedsLiveSample + - NeedsMobileBrowserCompatibility + - Referenz +translation_of: Web/CSS/text-overflow +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <strong><code>text-overflow</code></strong> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft bestimmt, wie überlaufende Inhalte die nicht angezeigt werden (Siehe {{cssxref("overflow")}}) dem Nutzer signalisiert werden. Sie können abgeschnitten (clipped) oder durch ein Auslassungszeichen ('<code>…</code>', <code style="text-transform: uppercase;">U+2026 Horizontal Ellipsis</code>) beziehungsweise eine vom Webautor definierte Zeichenfolge markiert sein.</p> + +<p><img alt="text-overflow.png" class="default internal" src="/@api/deki/files/5846/=text-overflow.png"></p> + +<p>Das Abschneiden des überlaufenden Textes findet exakt am Rand des Inhaltselements statt. Um erst nach einem vollen Zeichen abzuschneiden, kann eine leere benutzerdefinierte Zeichenfolge angegeben werden (' ').</p> + +<p>Diese Eigenschaft beeinflusst nur Inhalte, welche aus einem Blockelement in dessen <em>inline</em>-Richtung überlaufen (beispielsweise wird Text der am unteren Ende eines Kastens überläuft nicht beeinflusst). Ein Textüberlauf kann auftreten, wenn ein Text-wrapping verhindert wird (z.B., durch ‘<code class="css"><code>white-space:nowrap</code></code>’) oder wenn ein einzelnes Wort zu lang ist.</p> + +<p>Diese CSS Eigenschaft erzwingt keinen Textüberlauf; um dies zu erreichen und somit die <code>text-overflow</code>-Eigenschaft anzuwenden, muss der Autor dem Element weitere Eigenschaften zuweisen, u. a. den {{cssxref("overflow")}} auf <code>hidden</code> setzen.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: css">/* Überlaufverhalten am Zeilenende + Rechtes Ende, falls links nach rechts, linkes Ende, falls rechts nach links */ +text-overflow: clip; +text-overflow: ellipsis; +text-overflow: "…"; + +/* Überlaufverhalten am linken/rechten Ende + Richtung hat keinen Einfluss */ +text-overflow: clip ellipsis; +text-overflow: "…" "…"; + +/* Globale Werte */ +text-overflow: inherit; +text-overflow: initial; +text-overflow: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code>clip</code></dt> + <dd>Dieses Schlüsselwort führt dazu, dass Text genau am Ende des <a href="/de/docs/Web/CSS/Boxmodell">Inhaltsbereichs</a> abgeschnitten wird. Daher kann der Schnitt auch innerhalb eines Zeichens geschehen. Um am Übergang zwischen zwei Zeichen abzuschneiden, muss eine leere Zeichenfolge (<code>''</code>) verwendet werden. Der Wert <code>clip</code> ist der Standardwert für diese Eigenschaft.</dd> + <dt><code>ellipsis</code></dt> + <dd>Dieses Schlüsselwort führt dazu, dass ein Auslassungszeichen (<code>'…'</code>, <code style="text-transform: uppercase;">U+2026 Horizontal Ellipsis</code>) an der Schnittstelle angezeigt wird, um abgeschnittenen Text zu repräsentieren. Das Auslassungszeichen wird innerhalb des <a href="/de/docs/Web/CSS/Boxmodell">Inhaltsbereichs angezeigt, wodurch die Menge des angezeigten Texts verringert wird. Wenn nicht genug Platz für das Auslassungszeichen selbst zur Verfügung steht, wird es abgeschnitten.</a></dd> + <dt><a href="/de/docs/Web/CSS/Boxmodell"><code><string></code> {{experimental_inline}}</a></dt> + <dd><a href="/de/docs/Web/CSS/Boxmodell">Der </a>{{cssxref("<string>")}}<a href="/de/docs/Web/CSS/Boxmodell">, welcher zur Anzeige des abgeschnittenen Texts genutzt werden soll. Diese Zeichenfolge wird innerhalb des Inhaltsbereichs</a> angezeigt und führt dazu, dass die Menge des angezeigten Texts verringert wird. Wenn nicht genug Platz für die Zeichenfolge selbst zur Verfügung steht, wird sie abgeschnitten.</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush: css">p { + white-space: nowrap; + width: 100%; + overflow: hidden; /* "overflow"-Wert darf nicht "visible" sein */ + + text-overflow: ellipsis; +} +</pre> + +<table class="standard-table"> + <thead> + <tr> + <th colspan="1" rowspan="2" scope="col">CSS Wert</th> + <th colspan="2" rowspan="1" scope="col" style="text-align: center;"><code>direction: ltr</code></th> + <th colspan="2" rowspan="1" scope="col" style="text-align: center;"><code>direction: rtl</code></th> + </tr> + <tr> + <th scope="col">Erwartetes Ergebnis</th> + <th scope="col">Live-Ergebnis</th> + <th scope="col">Erwartetes Ergebnis</th> + <th scope="col">Live-Ergebnis</th> + </tr> + </thead> + <tbody> + <tr> + <td><em>visible overflow</em></td> + <td style="font-family: monospace;">1234567890</td> + <td style="direction: ltr;"> + <div style="float: left; font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: visible;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + <td style="font-family: monospace;">0987654321</td> + <td> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: visible;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + </tr> + <tr> + <td><code>text-overflow: clip</code></td> + <td style="padding: 1px; font-family: monospace;"><img alt="t-o_clip.png" class="default internal" src="/@api/deki/files/6056/=t-o_clip.png"></td> + <td style="direction: ltr;"> + <div style="float: left; font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip;">123456</div> + </td> + <td style="padding: 1px; font-family: monospace;"><img alt="t-o_clip_rtl.png" class="default internal" src="/@api/deki/files/6057/=t-o_clip_rtl.png"></td> + <td style="direction: rtl;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + </tr> + <tr> + <td><code>text-overflow: ''</code></td> + <td style="font-family: monospace;">12345</td> + <td style="direction: ltr;"> + <div style="float: left; font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: '';">123456</div> + </td> + <td style="font-family: monospace;">54321</td> + <td style="direction: rtl;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: '';"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + </tr> + <tr> + <td><code>text-overflow: ellipsis</code></td> + <td style="font-family: monospace;">1234…</td> + <td style="direction: ltr;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + <td style="font-family: monospace;">…4321</td> + <td style="direction: rtl;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + </tr> + <tr> + <td><code>text-overflow: '.'</code></td> + <td style="font-family: monospace;">1234.</td> + <td style="direction: ltr;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: '.';"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + <td style="font-family: monospace;">.4321</td> + <td style="direction: rtl;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: '.';"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + </tr> + <tr> + <td><code>text-overflow: clip clip</code></td> + <td style="font-family: monospace;">123456</td> + <td style="direction: ltr;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip clip;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + <td style="font-family: monospace;">654321</td> + <td style="direction: rtl;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip clip;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + </tr> + <tr> + <td><code>text-overflow: clip ellipsis</code></td> + <td style="font-family: monospace;">1234…</td> + <td style="direction: ltr;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip ellipsis;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + <td style="font-family: monospace;">6543…</td> + <td style="direction: rtl;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip ellipsis;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + </tr> + <tr> + <td><code>text-overflow: clip '.'</code></td> + <td style="font-family: monospace;">1234.</td> + <td style="direction: ltr;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip '.';"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + <td style="font-family: monospace;">6543.</td> + <td style="direction: rtl;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip '.';"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + </tr> + <tr> + <td><code>text-overflow: ellipsis clip</code></td> + <td style="font-family: monospace;">…3456</td> + <td style="direction: ltr;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis clip;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + <td style="font-family: monospace;">…4321</td> + <td style="direction: rtl;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis clip;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + </tr> + <tr> + <td><code>text-overflow: ellipsis ellipsis</code></td> + <td style="font-family: monospace;">…34…</td> + <td style="direction: ltr;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis ellipsis;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + <td style="font-family: monospace;">…43…</td> + <td style="direction: rtl;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis ellipsis;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + </tr> + <tr> + <td><code>text-overflow: ellipsis '.'</code></td> + <td style="font-family: monospace;">…34.</td> + <td style="direction: ltr;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis '.';"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + <td style="font-family: monospace;">…43.</td> + <td style="direction: rtl;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis '.';"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + </tr> + <tr> + <td><code>text-overflow: ',' clip</code></td> + <td style="font-family: monospace;">,3456</td> + <td style="direction: ltr;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ',' clip;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + <td style="font-family: monospace;">,4321</td> + <td style="direction: rtl;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ',' clip;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + </tr> + <tr> + <td><code>text-overflow: ',' ellipsis</code></td> + <td style="font-family: monospace;">,34…</td> + <td style="direction: ltr;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ','ellipsis;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + <td style="font-family: monospace;">,43…</td> + <td style="direction: rtl;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ','ellipsis;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + </tr> + <tr> + <td><code>text-overflow: ',' '.'</code></td> + <td style="font-family: monospace;">,34.</td> + <td style="direction: ltr;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ',' '.';"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + <td style="font-family: monospace;">,53.</td> + <td style="direction: rtl;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ',' '.';"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> + </td> + </tr> + </tbody> +</table> + +<h2 id="Spezifikationen">Spezifikationen</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 UI', '#text-overflow', 'text-overflow')}}</td> + <td>{{Spec2('CSS3 UI')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<p>Eine vorherige Version dieser Schnittstelle erreichte den <em>Candidate Recommendation</em>-Status (CR). Da einige der nicht aufgeführten gefährdeten Eigenschaften entfernt werden mussten, wurde die Spezifikation auf <em>Working Draft</em>-Niveau herabgesetzt. Das erklärt, weshalb Browser diese Eigenschaft ohne Präfix, jedoch nicht im CR-Zustand, umgesetzt haben. Momentan hat die Spezifikation das <em>Editor's Draft</em>-Niveau erreicht.</p> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.properties.text-overflow")}} + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Verwandte CSS Eigenschaften: {{cssxref("overflow")}}, {{cssxref("white-space")}}</li> +</ul> diff --git a/files/de/web/css/text-rendering/index.html b/files/de/web/css/text-rendering/index.html new file mode 100644 index 0000000000..57d8ffb78d --- /dev/null +++ b/files/de/web/css/text-rendering/index.html @@ -0,0 +1,133 @@ +--- +title: text-rendering +slug: Web/CSS/text-rendering +tags: + - CSS + - CSS Eigenschaft + - CSS Text + - NeedsLiveSample + - NeedsMobileBrowserCompatibility + - Referenz + - SVG +translation_of: Web/CSS/text-rendering +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <strong><code>text-rendering</code></strong> CSS Eigenschaft liefert der Renderingengine Informationen darüber, wie die Darstellung von Text optimiert werden soll.</p> + +<p>Der Browser macht Abstriche bezüglich Geschwindigkeit, Lesbarkeit und geometrischer Präzision. Die <code>text-rendering</code> Eigenschaft ist eine SVG Eigenschaft, die in keinem CSS Standard definiert ist. Jedoch erlauben Gecko und WebKit Browser es unter Windows, Mac OS X und Linux, diese Eigenschaft auf HTML und XML Inhalte anzuwenden.</p> + +<p>Ein offensichtlicher Effekt ist <code>optimizeLegibility</code>, welches Ligaturen (ff, fi, fl etc.) in Text kleiner als 20px für einige Schriftarten aktiviert (zum Beispiel Microsofts <em>Calibri</em>, <em>Candara</em>, <em>Constantia</em> und <em>Corbel</em> oder die <em>DejaVu</em> Schriftfamilie).</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: css">/* Schlüsselwortwerte */ +text-rendering: auto; +text-rendering: optimizeSpeed; +text-rendering: optimizeLegibility; +text-rendering: geometricPrecision; + +/* Globale Werte */ +text-rendering: inherit; +text-rendering: initial; +text-rendering: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>Der Browser bestimmt, wann auf Geschwindigkeit, Lesbarkeit oder geometrische Präzision optimiert werden soll, wenn Text gezeichnet wird. Für Unterschiede, wie dieser Wert von den Browser interpretiert wird, siehe die Kompatibilitätstabelle.</dd> + <dt><code>optimizeSpeed</code></dt> + <dd>Der Browser betont Geschwindigkeit gegenüber Lesbarkeit und geometrischer Präzision, wenn Text gezeichnet wird. Dies deaktiviert Unterschneidung und Ligaturen.</dd> + <dt><code>optimizeLegibility</code></dt> + <dd>Der Browser betont Lesbarkeit gegenüber Geschwindigkeit und geometrischer Präzision, wenn Text gezeichnet wird. Dies aktiviert Unterschneidung und optionale Ligaturen.</dd> + <dt><code>geometricPrecision</code></dt> + <dd> + <p>Der Browser betont geometrischer Präzision gegenüber Geschwindigkeit und Lesbarkeit. Bestimmte Aspekte von Schriften — wie Unterschneidung — skalieren nicht linear. Daher erlaubt es dieser Wert, Text in diesen Schriften gut aussehen zu lassen.</p> + + <p>Wenn Text in SVG hoch- oder runterskaliert wird, berechnen Browser die finale Größe des Texts (welche durch die angegebene Schriftgröße und die Skalierung bestimmt wird) und fordern eine Schriftart dieser berechneten Größe vom Schriftsystem der Plattform an. Aber falls eine Schriftgröße von beispielsweise 9 mit einer Skalierung von 140% angefordert wird, existiert die sich ergebende Schriftgröße von 12.6 nicht explizit im Schriftsystem, sodass der Browser stattdessen die Schriftgröße auf 12 abrundet. Dies resultiert in einer schrittweisen Skalierung von Text.</p> + + <p>Der <code>geometricPrecision</code> Wert — falls von der Renderingengine vollständig unterstützt — erlaubt es, Text übergangslos zu skalieren. Große Skalierungsfaktoren können eine weniger schöne Textdarstellung zur Folge haben, aber die Größe ist, was erwartet wird — weder auf- noch abgerundet auf die nächstmögliche Schriftgröße, die von Windows oder Linux unterstützt wird.</p> + + <p class="note"><strong>Hinweis</strong>: WebKit wendet exakt den angegebenen Wert an, aber Gecko behandelt den Wert genauso wie <code>optimizeLegibility</code>.</p> + </dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush:css">/* stellt sicher, dass alle Schriften innerhalb des HTML Dokuments in all ihrer Pracht dargestellt werden, + aber verhindert unangemessene Ligaturen in Elementen mit der Klasse 'foo' */ + +body { + text-rendering: optimizeLegibility; +} + +.foo { + text-rendering: optimizeSpeed; +}</pre> + +<h3 id="Livebeispiele">Livebeispiele</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th>CSS Code</th> + <th>Unterschneidung</th> + <th>Ligaturen</th> + </tr> + <tr style="font: 19.9px 'DejaVu Serif', Constantia;"> + <td style="font: medium monospace;">font: 19.9px 'DejaVu Serif', Constantia;</td> + <td>LYoWAT</td> + <td>ff fi fl ffl</td> + </tr> + <tr style="font: 20px 'DejaVu Serif', Constantia;"> + <td style="font: medium monospace;">font: 20px 'DejaVu Serif', Constantia;</td> + <td>LYoWAT</td> + <td>ff fi fl ffl</td> + </tr> + <tr style="font: 3em 'DejaVu Serif', Constantia; text-rendering: optimizeSpeed;"> + <td style="font: medium monospace;">font: 3em 'DejaVu Serif', Constantia;<br> + text-rendering: optimizeSpeed;</td> + <td>LYoWAT</td> + <td>ff fi fl ffl</td> + </tr> + <tr style="font: 3em 'Dejavu Serif', Constantia; text-rendering: optimizeLegibility;"> + <td style="font: medium monospace;">font: 3em 'Dejavu Serif', Constantia;<br> + text-rendering: optimizeLegibility;</td> + <td>LYoWAT</td> + <td>ff fi fl ffl</td> + </tr> + </tbody> +</table> + +<h2 id="Spezifikationen">Spezifikationen</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('SVG1.1', 'painting.html#TextRenderingProperty', 'text-rendering')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.properties.text-rendering")}} diff --git a/files/de/web/css/text-shadow/index.html b/files/de/web/css/text-shadow/index.html new file mode 100644 index 0000000000..89b3f6907e --- /dev/null +++ b/files/de/web/css/text-shadow/index.html @@ -0,0 +1,145 @@ +--- +title: text-shadow +slug: Web/CSS/text-shadow +tags: + - CSS + - CSS Text + - Eigenschaft + - NeedsMobileBrowserCompatibility + - Referenz +translation_of: Web/CSS/text-shadow +--- +<div>{{Cssref}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <strong><code>text-shadow</code></strong> CSS Eigenschaft fügt Text Schatten hinzu. Sie akzeptiert eine kommaseparierte Liste von Schatten, die auf den Text und {{cssxref("text-decoration","Textdekorationen")}} des Elements angewendet werden sollen.</p> + +<p>Jeder Schatten wird mit einem Versatz vom Text angegeben, zusammen mit optionalen Farb- und Unschärferadiuswerten.</p> + +<p>Mehrere Schatten werden von vorne nach hinten angewendet, wobei der zuerst angewendete Schatten oben ist.</p> + +<p>Diese Eigenschaft gilt sowohl für {{cssxref("::first-line")}} als auch {{cssxref("::first-letter")}} <a href="/de/docs/Web/CSS/Pseudo-elements">Pseudoelemente</a>.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: css">/* offset-x | offset-y | blur-radius | color */ +text-shadow: 1px 1px 2px black; + +/* color | offset-x | offset-y | blur-radius */ +text-shadow: #CCC 1px 0 10px; + +/* offset-x | offset-y | color */ +text-shadow: 5px 5px #558ABB; + +/* color | offset-x | offset-y */ +text-shadow: white 2px 5px; + +/* offset-x | offset-y */ +/* Für color und blur-radius werden Standardwerte verwendet */ +text-shadow: 5px 10px; + +/* Globale Werte */ +text-shadow: inherit; +text-shadow: initial; +text-shadow: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><color></dt> + <dd>Optional. Kann entweder vor oder nach dem Versatzwert angegeben werden. Falls die Farbe nicht angegeben wurde, wird eine vom User Agent bestimmte Farbe verwendet. {{note("Falls Konsistenz zwischen den Browsern gewünscht ist, sollte eine Farbe explizit gewählt werden.")}}</dd> + <dt><offset-x> <offset-y></dt> + <dd>Benötigt. Diese <code><length></code> Werte bestimmen den Versatz des Schattens vom Text. <code><offset-x></code> bestimmt die horizontale Distanz; ein negativer Wert platziert den Schatten links vom Text. <code><offset-y></code> bestimmt die vertikale Distanz; ein negativer Wert platziert den Schatten oberhalb des Texts. Falls beide Werte <code>0</code> sind, wird der Schatten hinter dem Text platziert (und kann einen Unschärfeeffekt erzeugen, falls <code><blur-radius></code> gesetzt ist).<br> + Siehe {{cssxref("<length>")}} für mögliche Einheiten.</dd> + <dt><blur-radius></dt> + <dd>Optional. Dies ist ein {{cssxref("<length>")}} Wert. Falls nicht angegeben, ist der Standardwert <code>0</code>. Je größer dieser Wert ist, desto größer ist die Unschärfe; der Schatten wird ausgedehnter und geringer.</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<div id="Beispiel1"> +<pre class="brush: css">.red-text-shadow { + text-shadow: red 0 -2px; +}</pre> + +<pre class="brush: html"><p class="red-text-shadow"> + Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo + inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. +</p></pre> +</div> + +<p>{{EmbedLiveSample('Beispiel1', '689px', '90px')}}</p> + +<div id="Beispiel2"> +<pre class="brush:css">.white-with-blue-shadow { + text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue; + color: white; + font: 1.5em Georgia, "Bitstream Charter", "URW Bookman L", "Century Schoolbook L", serif; +}</pre> + +<pre class="brush: html"><p class="white-with-blue-shadow"> + Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore + veritatis et quasi architecto beatae vitae dicta sunt explicabo. +</p></pre> +</div> + +<p>{{EmbedLiveSample('Beispiel2', '689px', '180px')}}</p> + +<div id="Beispiel3"> +<pre class="brush:css">.gold-on-gold { + text-shadow: rgba(0,0,0,0.1) -1px 0, rgba(0,0,0,0.1) 0 -1px, + rgba(255,255,255,0.1) 1px 0, rgba(255,255,255,0.1) 0 1px, + rgba(0,0,0,0.1) -1px -1px, rgba(255,255,255,0.1) 1px 1px; + color: gold; + background: gold; +}</pre> + +<pre class="brush: html"><p class="gold-on-gold"> + Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore + veritatis et quasi architecto beatae vitae dicta sunt explicabo. +</p></pre> +</div> + +<p>{{EmbedLiveSample('Beispiel3', '689px', '90px')}}</p> + +<h2 id="Spezifikationen">Spezifikationen</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 Transitions', '#animatable-css', 'text-shadow')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Definiert <code>text-shadow</code> als animierbar.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow')}}</td> + <td>{{Spec2('CSS3 Text Decoration')}}</td> + <td>Die CSS Eigenschaft <code>text-shadow</code> wurde <a class="external" href="http://www.w3.org/TR/2008/REC-CSS2-20080411/text.html#text-shadow-props">in CSS2 inkorrekt definiert</a> und in CSS2 (Level 1) verworfen. Die <em>CSS Text Module Level 3</em> Spezifikation hat die Syntax verbessert und präzisiert. Später wurde sie in den neuen Arbeitsentwurf <em><a href="http://www.w3.org/TR/2012/WD-css-text-decor-3-20121113/">CSS Text Decoration Module Level 3</a></em> verschoben.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{Compat("css.properties.text-shadow")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{cssxref("box-shadow")}}</li> +</ul> diff --git a/files/de/web/css/text-transform/index.html b/files/de/web/css/text-transform/index.html new file mode 100644 index 0000000000..5461a868a2 --- /dev/null +++ b/files/de/web/css/text-transform/index.html @@ -0,0 +1,504 @@ +--- +title: text-transform +slug: Web/CSS/text-transform +translation_of: Web/CSS/text-transform +--- +<div>{{CSSRef}}</div> + +<h2 id="Summary" name="Summary">Übersicht</h2> + +<p>Das <code>text-transform</code> CSS Attribut legt die Groß- und Kleinschreibung eines Elementes fest. Es kann verwendet werden, um den Text eines Elementes komplett klein oder klein zu schreiben oder den ersten Buchstaben jedes Wortes groß zu schreiben.</p> + +<div class="note"> +<p>Das <code>text-transform</code> Attribut berücksichtigt sprachspezifische Regeln:</p> + +<ul> + <li>in Turksprachen, wie Türkisch (tr), Aserbaidschanisch (az), Krimtatarisch (crh), und Baschkirisch (ba), gibt es zwei Arten von i, mit und ohne Punkt, und jeweils die Groß- bzw. Kleinschreibung: <code>i</code>/<code>İ</code> and <code>ı</code>/<code>I</code>.</li> + <li>auf Deutsch (de) wird das <code>ß</code> in der Großschreibung zu <code>SS</code>.</li> + <li>auf Niederländisch (nl) wird der Digraph <code>ij</code> auch bei <code style="font-size: 14px;">text-transform: capitalize</code> zu <code>IJ</code>.</li> + <li>auf Griechisch (el) verlieren Vokale ihren Akzent wenn wenn ganze Worte is in Großschreibung geschrieben werden (<code>ά</code>/<code>Α</code>), außer beim Eta (<code>ή</code>/<code>Ή</code>). Doppelvokale mit einem Akzent auf dem ersten Vokal verlieren den Akzent und bekommen einen Trema auf dem zweiten Vokal (<code>άι</code>/<code>ΑΪ</code>).</li> + <li>auf Griechisch (el) hat das kleine Sigma zwei Formen: <code style="font-size: 14px;">σ</code> and <code style="font-size: 14px;">ς</code>. <code style="font-size: 14px;">ς</code> wird nur dann genutzt, wenn Sigma ein Wort beendet. Wird <code style="font-size: 14px;">text-transform: lowercase</code> auf ein großes Sigma (<span style="font-family: courier new,andale mono,monospace; line-height: normal;">Σ</span>) angewandt, so muss der Browser aus dem Kontext heraus entscheiden, welches verwendet wird.</li> +</ul> + +<p>Die Sprache wird durch das <code>lang</code> HTML Attribut oder das <code>xml:lang</code> XML Attribut festgelegt..</p> + +<p>Die Unterstützung dieser spezifischen Fälle unterscheidet sich von Browser zu Browser, also prüfen Sie dies anhand der <a href="/en-US/docs/CSS/text-transform#Browser_compatibility" title="CSS/text-transform#Browser_compatibility">Kompatibilitätstabelle</a>.</p> +</div> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("text-transform")}} +</pre> + +<pre>text-transform: capitalize +text-transform: uppercase +text-transform: lowercase +text-transform: none +text-transform: full-width + +text-transform: inherit +</pre> + +<h3 id="Values" name="Values">Werte</h3> + +<dl> + <dt><code>capitalize</code></dt> + <dd>Ein Schlüsselwort, dass die Großschreibung des Anfachsbuchstaben jedes Wortes erzwingt. Geändert werden alle Unicode-basierten Zeichen außer Symbole. Dabei bleiben alle anderen Zeichen unverändert.</dd> + <dd> + <div class="note">Bei der automatischen Großschreibung sollte je nach Sprache die Kompatibilität beachtet und überprüft werden. </div> + </dd> + <dt><code>uppercase</code></dt> + <dd>Wendet die Großschreibung auf alle Zeichen an.</dd> + <dt><code>lowercase</code></dt> + <dd>Erzwingt die Kleinschreibung aller Zeichen.</dd> + <dt><code>none</code></dt> + <dd>Verhindert Änderungen; alle Buchstaben bleiben unverändert.</dd> + <dt><code>full-width</code> {{experimental_inline}}</dt> + <dd>Erzwingt das Rendern der Buchstaben als rechteckige Form, was z.B. die Interaktion mit ostasiatischen Sprachen (z.B. Chinesisch oder Japanisch) erlaubt.</dd> +</dl> + +<h2 id="Examples" name="Examples">Beispiele</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td colspan="2"><code>p { text-transform: none; }</code></td> + </tr> + <tr> + <td>Zeichenkette</td> + <td><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></td> + </tr> + <tr> + <td>Echtzeitbeispiel</td> + <td><code style="text-transform: none;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></td> + </tr> + <tr> + <td>Referenzwert</td> + <td><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <tbody> + <tr> + <td colspan="2"><code>p { text-transform: capitalize; }</code></td> + </tr> + <tr> + <td>Zeichenkette</td> + <td><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></td> + </tr> + <tr> + <td>Echtzeitbeispiel</td> + <td><code style="text-transform: capitalize;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></td> + </tr> + <tr> + <td>Referenzwert</td> + <td><code>Lorem Ipsum Dolor Sit Amet, Consectetur Adipisicing Elit, ...</code></td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <tbody> + <tr> + <td colspan="2"> + <p><code>p { text-transform: capitalize; }</code></p> + + <p>Die Großschreibung beginnt bei Zeichen, die nach Unicode der Buchstabenkategorie angehören.</p> + </td> + </tr> + <tr> + <td>Zeichenkette</td> + <td><code>(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!</code></td> + </tr> + <tr> + <td>Echtzeitbeispiel</td> + <td><code style="text-transform: capitalize;">(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!</code></td> + </tr> + <tr> + <td>Referenzwert</td> + <td><code>(This) “Is” [A] –Short– -Test- «For» *The* _Css_ ¿Capitalize? ?¡Transform!</code></td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <tbody> + <tr> + <td colspan="2"> + <p><code>p { text-transform: capitalize; }</code></p> + + <p>Symbole werden ignoriert. Auch hier wird erst der erste gefundene Buchstabe in einer Zeichenkette großgeschrieben.</p> + </td> + </tr> + <tr> + <td>Zeichenkette</td> + <td><code>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</code></td> + </tr> + <tr> + <td>Echtzeitbeispiel</td> + <td style="text-transform: capitalize;"><code>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</code></td> + </tr> + <tr> + <td>Referenzwert</td> + <td><code>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙKl</code></td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <tbody> + <tr> + <td colspan="2"><code>p { text-transform: capitalize; }</code><br> + Das dänische Digraph <code>ij </code>muss wie ein einzelnes Zeichen behandelt werden.</td> + </tr> + <tr> + <td>Zeichenkette</td> + <td><code>The Dutch word: "<span lang="nl">ijsland</span>" starts with a digraph.</code></td> + </tr> + <tr> + <td>Echtzeitbeispiel</td> + <td style="text-transform: capitalize;"><code>The Dutch word: "<span lang="nl">ijsland</span>" starts with a digraph.</code></td> + </tr> + <tr> + <td>Referenzwert</td> + <td><code>The Dutch Word: "IJsland" Starts With A Digraph.</code></td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <tbody> + <tr> + <td colspan="2"><code>p { text-transform: uppercase; }</code></td> + </tr> + <tr> + <td>Zeichenkette</td> + <td><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></td> + </tr> + <tr> + <td>Echtzeitbeispiel</td> + <td><code style="text-transform: uppercase;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></td> + </tr> + <tr> + <td>Referenzwert</td> + <td><code>LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISICING ELIT, ...</code></td> + </tr> + </tbody> +</table> + +<table class="standard-table" lang="el"> + <tbody> + <tr> + <td colspan="2"> + <p><code>p { text-transform: uppercase; }</code></p> + + <p>Bei Griechischen Vokalen sollte, außer bei einem trennenden <code>eta</code>, auf Akzente verzichtet werden. Bei der Großschreibung eines ersten Vokals mit Akzent kommt es bei zwei direkt aufeinander folgenden Vokalen zu einer Diaräse.</p> + </td> + </tr> + <tr> + <td>Zeichenkette</td> + <td><code>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα";</code></td> + </tr> + <tr> + <td>Echtzeitbeispiel</td> + <td><code style="text-transform: uppercase;">Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα";</code></td> + </tr> + <tr> + <td>Referenzwert</td> + <td><code>ΘΑ ΠΑΜΕ ΣΤΟ "ΘΕΪΚΟ ΦΑΪ" Ή ΣΤΗ "ΝΕΡΑΪΔΑ";</code></td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <tbody> + <tr> + <td colspan="2"><code>p { text-transform: lowercase; }</code></td> + </tr> + <tr> + <td>Zeichenkette</td> + <td><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></td> + </tr> + <tr> + <td>Echtzeitbeispiel</td> + <td><code style="text-transform: lowercase;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></td> + </tr> + <tr> + <td>Referenzwert</td> + <td><code>lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <tbody> + <tr> + <td colspan="2"> + <p><code>p { text-transform: lowercase; }</code></p> + + <p>Der griechische Buchstabe Sigma (<font face="Consolas">Σ</font>) wird je nach Kontext in ein kleingeschriebenes Sigma (<font face="Consolas">σ</font>) oder die entsprechene Wortvariante (<font face="Consolas">ς</font>) umgewandelt.</p> + </td> + </tr> + <tr> + <td>Zeichenkette</td> + <td><code>Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</code></td> + </tr> + <tr> + <td>Echtzeitbeispiel</td> + <td><code style="text-transform: lowercase;">Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</code></td> + </tr> + <tr> + <td>Referenzwert</td> + <td><code>σ is a greek letter that appears several times in </code><code style="text-transform: lowercase;">ΟΔΥΣΣΕΥ</code><code>ς.</code></td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <tbody> + <tr> + <td colspan="2"><code>p { text-transform: full-width; }</code><br> + Some characters exists in two formats, normal width and a full-width, with different Unicode code points. The full-width version is used to mix them smoothly with Asian ideographic characters.</td> + </tr> + <tr> + <td>Zeichenkette</td> + <td>0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~</td> + </tr> + <tr> + <td>Echtzeitbeispiel</td> + <td><span>0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~</span></td> + </tr> + <tr> + <td>Referenzwert</td> + <td>０１２３４５６７８９ａｂｃｄｅｆｇｈｉｊｋｌｍｎｏｐｑｒｓｔｕｖｗｘｙｚＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺ！＂＃＄％＆（）＊＋，－．／：；＜＝＞？＠｛｜｝～</td> + </tr> + </tbody> +</table> + +<h2 id="Specifications" name="Specifications">Details</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentrar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Text', '#text-transform', 'text-transform')}}</td> + <td>{{Spec2('CSS4 Text')}}</td> + <td>Aus{{SpecName('CSS3 Text', '#text-transform', 'text-transform')}} :Fügt das Schlüsselwort <code>full-size-kana</code> hinzu und erlaubt die Kombination von Schlüsselwörtern mit <code>full-width</code></td> + </tr> + <tr> + <td>{{SpecName('CSS3 Text', '#text-transform', 'text-transform')}}</td> + <td>{{Spec2('CSS3 Text')}}</td> + <td> + <p>Aus {{SpecName('CSS2.1', 'text.html#caps-prop', 'text-transform')}} : Mehr Zahlen und Buchstaben können verwendet werden. Das Schlüsselwort <font face="Consolas">capitalize</font> aktiviert die Großschreibung nur beim <em>ersten unterstützten </em>Zeichen eines Wortes; andere Zeichen werden ignoriert. Erhöhung der Kompatibilität des Schlüsselwortes <font face="Consolas">full-width.</font></p> + </td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'text.html#caps-prop', 'text-transform')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Aus {{SpecName('CSS1', '#text-transform', 'text-transform')}} : Ergänzung des Umfangs an unterstützten Zeichen um einige nicht-lateinische Buchstaben</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#text-transform', 'text-transform')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Grundfunktionalität</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>4.0</td> + <td>7.0</td> + <td>1.0</td> + </tr> + <tr> + <td><code>capitalize</code> (CSS3 version)</td> + <td>siehe Bemerkung</td> + <td>{{CompatGeckoDesktop("14")}} (siehe Bemerkung)</td> + <td>siehe Bemerkung</td> + <td>{{CompatUnknown}}</td> + <td>siehe Bemerkung</td> + </tr> + <tr> + <td><code>full-size-kana</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>full-width</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("19")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>ß</code> → <code>SS</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>i</code> → <code>İ</code> and <code>ı</code> → <code>I</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("14")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Dänisches <code>IJ D</code>igraph</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("14")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Griech. Zeichen mit Akzent</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("15")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>Σ</code> → <code>σ</code> bzw. <code>ς</code></td> + <td>30</td> + <td>{{CompatGeckoDesktop("14")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>6.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundfunktionalität</td> + <td>1.0</td> + <td>{{CompatGeckoMobile("1")}}</td> + <td>6.0</td> + <td>6.0</td> + <td>1.0</td> + </tr> + <tr> + <td><code>capitalize</code> (CSS3 version)</td> + <td>siehe Bemerkung</td> + <td>{{CompatGeckoMobile("14")}} siehe Bemerkung</td> + <td>siehe Bemerkung</td> + <td>{{CompatUnknown}}</td> + <td>siehe Bemerkung</td> + </tr> + <tr> + <td><code>full-size-kana</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>full-width</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("19")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>ß</code> → <code>SS</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("1")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>i</code> → <code>İ</code> and <code>ı</code> → <code>I</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("14")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Dänisches <code>IJ D</code>igraph</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("14")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Griech. Zeichen mit Akzent</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>Σ</code> → <code>σ</code> bzw. <code>ς</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("14")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Browser_notes" name="Browser_notes">Browserinformationen</h3> + +<p>Das capitalize Schlüsselwort wurde in CSS1 bzw. CSS 2.1 nicht eindeutig spezifiziert. Dadurch wurde der erste großzuschreibende Buchstabe unterschiedlich ermittelt. Sowohl Webkit-basierte Browser als auch die Gecko Engine identifizierte Symbole fälschlicherwiese als Buchstaben. Beispielsweise galten bei Firefox <code>- </code>respektive <code>_</code> als Buchstaben. Internet Explorer 9 hielt sich den Spezifikationen insgesamt am nächsten. Mit CSS3 wurde das Verhalten vereinheitlicht. Der Kompatibilitätstabelle können die Browserversionen entnommen werden, mit denen der Standard erstmals exakt umgesetzt wurde.</p> + +<h2 id="See_also" name="See_also">Siehe auch</h2> + +<ul> + <li>{{cssxref("font-variant")}}</li> +</ul> diff --git a/files/de/web/css/text-underline-position/index.html b/files/de/web/css/text-underline-position/index.html new file mode 100644 index 0000000000..90fd9ddafd --- /dev/null +++ b/files/de/web/css/text-underline-position/index.html @@ -0,0 +1,92 @@ +--- +title: text-underline-position +slug: Web/CSS/text-underline-position +tags: + - CSS + - CSS Eigenschaft + - NeedsMobileBrowserCompatibility + - Referenz +translation_of: Web/CSS/text-underline-position +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>text-underline-position</code> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft legt die Position der Linie einer Unterstreichung, die über die {{cssxref("text-decoration")}}-Eigenschaft mit dem Wert <code>underline</code> gesetzt wurde, fest.</p> + +<p>Diese Eigenschaft wird vererbt und nicht von {{cssxref("text-decoration")}} zurückgesetzt, wodurch sie auch für das gesamte Dokument festgelegt werden kann:</p> + +<pre class="brush: css">:root { /* nützlich für Dokumente mit vielen chemischen Formeln */ + text-underline-position: under; +}</pre> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">/* Schlüsselwortwerte */ +text-underline-position: auto; +text-underline-position: under; +text-underline-position: left; +text-underline-position: right; +text-underline-position: under left; +text-underline-position: right under; + +/* Globale Werte */ +text-underline-position: inherit; +text-underline-position: initial; +text-underline-position: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>Der Browser verwendet einen Algorithmus, um zwischen <code>under</code> und der Grundlinie zu unterscheiden.</dd> + <dt><code>under</code></dt> + <dd>Die Linie wird <em>unterhalb</em> der Grundlinie, wo keine Unterlängen berührt werden, gesetzt. Dies ist nützlich, um zu verhindern, dass chemische oder mathematische Formeln, die oft Tiefstellungen enthalten, schwer lesbar werden.</dd> + <dt><code>left</code></dt> + <dd>In vertikalen Schreibrichtungen wird die Linie auf der <em>linken</em> Seite der Zeichen platziert. In horizontalen Schreibrichtungen ist dies ein Synonym für <code>under</code>.</dd> + <dt><code>right</code></dt> + <dd>In vertikalen Schreibrichtungen wird die Linie auf der <em>rechten</em> Seite der Zeichen platziert. In horizontalen Schreibrichtungen ist dies ein Synonym für <code>under</code>.</dd> + <dt><code>auto-pos</code>{{non-standard_inline}}</dt> + <dd>Dies ist ein Synonym für <code>auto</code> und sollte nicht verwendet werden.</dd> + <dt><code>above</code>{{non-standard_inline}}</dt> + <dd>Die Linie wird <em>über</em> dem Text gesetzt. In ostasiatischem Text führt der Wert <code>auto</code> zum gleichen Ergebnis.</dd> + <dt><code>below</code>{{non-standard_inline}}</dt> + <dd>Die Linie wird <em>unter</em> dem Text gesetzt. In aus Buchstaben bestehendem Text führt der Wert <code>auto</code> zum gleichen Ergebnis.</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Spezifikationen" name="Spezifikationen">Spezifikationen</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 Text-decoration', '#text-underline-position', 'text-underline-position')}}</td> + <td>{{Spec2('CSS3 Text-decoration')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.properties.text-underline-position")}} + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Verwandte CSS-Eigenschaften: {{cssxref("text-decoration")}}, {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}}, {{cssxref("text-decoration-color")}}.</li> + <li><a href="https://msdn.microsoft.com/en-us/library/ie/ms531176%28v=vs.85%29.aspx" title="https://msdn.microsoft.com/en-us/library/ie/ms531176%28v=vs.85%29.aspx">Microsoft-Dokumentation der nicht-standardisierten Werte</a> (englisch).</li> +</ul> diff --git a/files/de/web/css/time/index.html b/files/de/web/css/time/index.html new file mode 100644 index 0000000000..e8e0f07a88 --- /dev/null +++ b/files/de/web/css/time/index.html @@ -0,0 +1,75 @@ +--- +title: <time> +slug: Web/CSS/time +tags: + - CSS + - CSS Datentyp + - Layout + - NeedsMobileBrowserCompatibility + - Referenz + - Web +translation_of: Web/CSS/time +--- +<p>{{CSSRef}}</p> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Der <code><time></code> <a href="/de/docs/Web/CSS">CSS</a> Datentyp bestimmt eine Zeitangabe in Sekunden oder Millisekunden. Dieser setzt sich aus einem {{cssxref("<number>")}} Wert und der entsprächenden Einheit zusammen. Dazwischen darf sich kein Leerzeichen befinden.</p> + +<p>Die verschiedenen Einheiten sind:</p> + +<ul> + <li><code>s</code> für Sekunden (bspw. <code>0s</code>, <code>1.5s</code>, <code>-60s)</code></li> + <li><code>ms</code> für Millisekunden(bspw. <code>0ms</code>, <code>1500ms</code>, <code>-60000ms)</code></li> +</ul> + +<p>Die Umwandlung zwischen <code>s</code> und <code>ms</code> folgt dem logischen <code>1s</code> = <code>1000ms</code>.</p> + +<p>Auch wenn alle Einheiten dieselbe Zeit für den Wert <code>0</code> repräsentieren, darf die Einheit in diesem Fall nicht ausgelassen werden, da sie keine {{cssxref("<length>")}} ist: <code>0</code> ist ungültig und entspricht nicht <code>0s</code> oder <code>0ms</code>.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<p>Dies sind gültige Zeitwerte:</p> + +<pre class="eval">12s Positive Ganzzahl +-456ms Negative Ganzzahl +4.3ms keine Ganzzahl +14mS Die Einheit ist unabhängig von Groß- und Kleinschreibung, jedoch werden Großbuchstaben für s und ms nicht empfohlen. ++0s Null mit einem führenden + und der Einheit +-0ms Null mit einem führenden - und der Einheit (obwohl seltsam ist dies ein erlaubter Wert) +</pre> + +<p>Dies sind ungültige Zeitwerte:</p> + +<pre class="eval">0 Obwohl die einheitenlose Null für {{cssxref("length")}} erlaubt ist, ist sie ungültig für alle anderen Einheiten. +12.0 Dies ist eine {{cssxref("<number>")}}, keine <code><time></code>; sie muss eine Einheit haben. +7 ms Leerzeichen zwischen {{cssxref("<number>")}} und Einheit sind nicht erlaubt. +</pre> + +<h2 id="Spezifikationen">Spezifikationen</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 Values','#time','<time>')}}</td> + <td>{{Spec2('CSS3 Values')}}</td> + <td>Definiert <code>s</code> und <code>ms</code> normativ</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1','aural.html#times','<time>')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Definiert <code>s</code> und <code>ms</code> informativ</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.types.time")}} diff --git a/files/de/web/css/tools/cubic_bezier_generator/index.html b/files/de/web/css/tools/cubic_bezier_generator/index.html new file mode 100644 index 0000000000..a385d685be --- /dev/null +++ b/files/de/web/css/tools/cubic_bezier_generator/index.html @@ -0,0 +1,321 @@ +--- +title: Cubic Bezier Generator +slug: Web/CSS/Tools/Cubic_Bezier_Generator +tags: + - CSS + - Werkzeuge +translation_of: Web/CSS/Tools/Cubic_Bezier_Generator +--- +<div id="Tool"> +<div style="display: none;"> +<pre class="brush:html"><html> + <canvas id="bezier" width="336" height="336"> + </canvas> + <form> + <label for="x1">x1 = </label><input onchange="updateCanvas();" type="text" maxlength=6 id="x1" value="0.79" class='field'> + <label for="y1">y1 = </label><input onchange="updateCanvas();return true;" type="text" maxlength=6 id="y1" value="0.33" class='field'> + <label for="x2">x2 = </label><input onchange="updateCanvas();return true;" type="text" maxlength=6 id="x2" value="0.14" class='field'> + <label for="y2">y2 = </label><input onchange="updateCanvas();return true;" type="text" maxlength=6 id="y2" value="0.53" class='field'> + <br> + <output id="output">Log</output> + </form> +</html> + </pre> + +<pre class="brush:css">.field { + width: 40px; +} + </pre> + +<pre class="brush:js">function updateCanvas() { + + var x1 = document.getElementById('x1').value; + var y1 = document.getElementById('y1').value; + var x2 = document.getElementById('x2').value; + var y2 = document.getElementById('y2').value; + + drawBezierCurve(x1, y1, x2, y2); +} + +const radius = 4; +// Place needed to draw the rulers +const rulers = 30.5; +const margin = 10.5; +const basic_scale_size = 5; // Size of 0.1 tick on the rulers +var scaling; //LIMITATION: scaling is computed once: if canvas.height/canvas.width change it won't be recalculated +var dragSM = 0; // Drag state machine: 0 = nodrag, others = object being dragged + +function initCanvas() { + // get the canvas element using the DOM + var canvas = document.getElementById('bezier'); + + // Make sure we don't execute when canvas isn't supported + if (canvas.getContext) { + // use getContext to use the canvas for drawing + var ctx = canvas.getContext('2d'); + + scaling = Math.min(canvas.height - rulers - margin, canvas.width - rulers - margin); + + canvas.onmousedown = mouseDown; + canvas.onmouseup = mouseUp; + } else { + alert('You need Safari or Firefox 1.5+ to see this demo.'); + } +} + +function cX(x) { + return x * scaling + rulers; +} + +function reverseX(x) { + return (x - rulers) / scaling; +} + +function lX(x) { + //Used when drawing vertical lines to prevent subpixel blur + var result = cX(x); + return Math.round(result) == result ? result + 0.5 : result; +} + +function cY(y) { + + return (1 - y) * scaling + margin; +} + +function reverseY(y) { + return (margin - y) / scaling + 1; +} + +function lY(y) { + // Used when drawing horizontal lines to prevent subpixel blur + var result = cY(y); + return Math.round(result) == result ? result + 0.5 : result; +} + +function drawBezierCurve(x1, y1, x2, y2) { + + // get the canvas element using the DOM + var canvas = document.getElementById('bezier'); + + // Make sure we don't execute when canvas isn't supported + if (canvas.getContext) { + + // use getContext to use the canvas for drawing + var ctx = canvas.getContext('2d'); + + + + // Clear canvas + ctx.clearRect(0, 0, canvas.width, canvas.height); + + // Draw the rulers + ctx.beginPath(); + ctx.strokeStyle = "black"; + + // Draw the Y axis + ctx.moveTo(cX(0), cY(0)); + ctx.lineTo(cX(1), cY(0)); + ctx.textAlign = "right"; + + for (var i = 0.1; i <= 1; i = i + 0.1) { + ctx.moveTo(-basic_scale_size + cX(0), lY(i)); + if ((i == 0.5) || (i > 0.9)) { + ctx.moveTo(-2 * basic_scale_size + cX(0), lY(i)); + ctx.fillText(Math.round(i * 10) / 10, -3 * basic_scale_size + cX(0), cY(i) + 4); + // Limitation the constant 4 should be font size dependant + } + ctx.lineTo(cX(0), lY(i)); + } + ctx.stroke(); + ctx.closePath(); + ctx.beginPath(); + + // Draw the Y axis label + ctx.save(); + ctx.rotate(-Math.PI / 2); + ctx.textAlign = "left"; + ctx.fillText("Output (Value Ratio)", -cY(0), -3 * basic_scale_size + cX(0)); + ctx.restore(); + + // Draw the X axis + ctx.moveTo(cX(0), cY(0)); + ctx.lineTo(cX(0), cY(1)); + ctx.textAlign = "center"; + for (i = 0.1; i <= 1; i = i + 0.1) { + ctx.moveTo(lX(i), basic_scale_size + cY(0)); + if ((i == 0.5) || (i > 0.9)) { + ctx.moveTo(lX(i), 2 * basic_scale_size + cY(0)); + ctx.fillText(Math.round(i * 10) / 10, cX(i), 4 * basic_scale_size + cY(0)); + // Limitation the constant 4 should be dependant of the font size + } + ctx.lineTo(lX(i), cY(0)); + } + + // Draw the X axis label + ctx.textAlign = "left"; + ctx.fillText("Input (Time Duration Ratio)", cX(0), 4 * basic_scale_size + cY(0)); + // Limitation the constant 4 should be dependant of the font size + ctx.stroke(); + ctx.closePath(); + + // Draw the Bézier Curve + ctx.beginPath(); + ctx.moveTo(cX(0), cY(0)); + ctx.strokeStyle = 'blue'; + ctx.bezierCurveTo(cX(x1), cY(y1), cX(x2), cY(y2), cX(1), cY(1)); + ctx.stroke(); + ctx.closePath(); + + + + // Draw the P2 point (with a line to P0) + ctx.beginPath(); + ctx.strokeStyle = 'red'; + ctx.moveTo(cX(x1), cY(y1)); + ctx.lineTo(cX(0), cY(0)); + ctx.stroke(); + ctx.closePath(); + ctx.beginPath(); + ctx.moveTo(cX(x1), cY(y1)); + ctx.arc(cX(x1), cY(y1), radius, 0, 2 * Math.PI); + ctx.stroke(); + ctx.fillStyle = 'white'; + ctx.fill(); + ctx.closePath(); + + + + // Draw the P3 point (with a line to P1) + ctx.beginPath(); + ctx.strokeStyle = 'red'; + ctx.moveTo(cX(x2), cY(y2)); + ctx.lineTo(cX(1), cY(1)); + ctx.stroke(); + ctx.closePath(); + + ctx.beginPath(); + ctx.moveTo(cX(x2), cY(y2)); + ctx.arc(cX(x2), cY(y2), radius, 0, 2 * Math.PI); + ctx.stroke(); + ctx.fill(); + ctx.closePath(); + + // Draw the P1(1,1) point (with dashed hints) + ctx.beginPath(); + ctx.moveTo(cX(1), cY(1)); + ctx.strokeStyle = 'lightgrey'; + ctx.lineTo(cX(0), cY(1)); + ctx.moveTo(cX(1), cY(1)); + ctx.lineTo(cX(1), cY(0)); + ctx.stroke(); + ctx.closePath(); + + ctx.beginPath(); + ctx.strokeStyle = "black"; + ctx.fillStyle = "black"; + ctx.arc(cX(1), cY(1), radius, 0, 2 * Math.PI); + ctx.fill(); + ctx.stroke(); + ctx.closePath(); + + + // Draw the P0(0,0) point + ctx.beginPath(); + ctx.arc(cX(0), cY(0), radius, 0, 2 * Math.PI); + ctx.fill(); + ctx.stroke(); + ctx.closePath(); + + + } else { + alert('You need Safari or Firefox 1.5+ to see this demo.'); + } +} + +function mouseDown(e) { + + var canvas = document.getElementById('bezier'); + + var x1 = cX(document.getElementById('x1').value); + var y1 = cY(document.getElementById('y1').value); + + var x = e.pageX - canvas.offsetLeft; + var y = e.pageY - canvas.offsetTop; + + var output = document.getElementById('output'); + output.value = "(" + x + "," + y + ") should be (" + x1 + "," + y1 + ")"; + + + if ((x1 + radius >= x) && (x1 - radius <= x) && (y1 + radius >= y) && (y1 - radius <= y)) { + var output = document.getElementById('output'); + output.value = "P1!"; + dragSM = 1; + } + + var x2 = cX(document.getElementById('x2').value); + var y2 = cY(document.getElementById('y2').value); + + if ((x2 + radius >= x) && (x2 - radius <= x) && (y2 + radius >= y) && (y2 - radius <= y)) { + var output = document.getElementById('output'); + output.value = "P2!"; + dragSM = 2; + } + + // If we are starting a drag + if (dragSM != 0) { + canvas.onmousemove = mouseMove; + } +} + +function mouseUp(e) { + + var output = document.getElementById('output'); + output.value = "Mouse up!"; + dragSM = 0; + canvas.onmousemove = null; +} + +function mouseMove(e) { + if (dragSM != 0) { + var canvas = document.getElementById('bezier'); + + var x = e.pageX - canvas.offsetLeft; + var y = e.pageY - canvas.offsetTop; + + var output = document.getElementById('output'); + output.value = "Drag!"; + + if (dragSM == 1) { + var x1 = document.getElementById('x1'); + var y1 = document.getElementById('y1'); + x1.value = reverseX(x); + x1.value = Math.round(x1.value * 10000) / 10000; + y1.value = reverseY(y); + y1.value = Math.round(y1.value * 10000) / 10000; + if (x1.value < 0) { x1.value = 0; } + if (x1.value > 1) { x1.value = 1; } + } else if (dragSM == 2) { + var x2 = document.getElementById('x2'); + var y2 = document.getElementById('y2'); + x2.value = reverseX(x); + x2.value = Math.round(x2.value * 10000) / 10000; + y2.value = reverseY(y); + y2.value = Math.round(y2.value * 10000) / 10000; + if (x2.value < 0) { x2.value = 0; } + if (x2.value > 1) { x2.value = 1; } + } + updateCanvas(); + } +} + +initCanvas(); +updateCanvas(); + </pre> +</div> + +<p>{{draft}}</p> + +<p><span class="seoSummary">Dies ist ein Beispielwerkzeug; es erlaubt die Bearbeitung von Bezierkurven. Es ist noch nicht wirklich nützlich, wird es aber sein!</span></p> + +<p>{{EmbedLiveSample("Tool", 1000, 2000)}}</p> +</div> diff --git a/files/de/web/css/tools/index.html b/files/de/web/css/tools/index.html new file mode 100644 index 0000000000..f107c81ddb --- /dev/null +++ b/files/de/web/css/tools/index.html @@ -0,0 +1,25 @@ +--- +title: Tools +slug: Web/CSS/Tools +tags: + - CSS +translation_of: Web/CSS/Tools +--- +<p>CSS bietet eine Reihe mächtiger Features, die knifflig in der Anwendung sein können oder eine Reihe von Parametern haben, sodass es hilfreich ist, diese während an ihnen gearbeitet wird, zu visualisieren. Dieses Seite bietet Links zu verschiedenen nützlichen Werkzeugen, die helfen, das CSS unter Verwendung dieser Features zu erstellen, um den Inhalt zu stylen.</p> + +<p>{{LandingPageListSubpages}}</p> + +<h2 id="Weitere_Werkzeuge">Weitere Werkzeuge</h2> + +<ul> + <li> + <h4 id="CSS_Animation_-_Stylie">CSS Animation - <a href="http://jeremyckahn.github.io/stylie/">Stylie</a></h4> + </li> + <li>Um die Gerätedarstellungsinformationen zu überprüfen (hilfreich in {{Glossary("Responsive Web Design")}}) - <a href="http://mydevice.io">mydevice.io</a></li> +</ul> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/CSS">CSS</a></li> +</ul> diff --git a/files/de/web/css/tools/linear-gradient_generator/index.html b/files/de/web/css/tools/linear-gradient_generator/index.html new file mode 100644 index 0000000000..bc5f7b2465 --- /dev/null +++ b/files/de/web/css/tools/linear-gradient_generator/index.html @@ -0,0 +1,3328 @@ +--- +title: Linear-gradient Generator +slug: Web/CSS/Tools/Linear-gradient_Generator +tags: + - CSS + - Werkzeuge +translation_of: Web/CSS/Tools/Linear-gradient_Generator +--- +<div style="display: none;"> +<h2 id="linear-gradient_generator" name="linear-gradient_generator">linear-gradient generator</h2> + +<h3 id="HTML_Content">HTML Content</h3> + +<pre class="brush: html"> <div id="container"> + <div id="gradient-container" data-alpha="true"> + </div> + + <div id="controls"> + <div class="section"> + <div class="title"> Active point </div> + <div class="property"> + <div class="ui-input-slider" data-topic="point-position" data-info="position" + data-unit="px" data-min="-1000" data-value="0" data-max="1000" data-sensivity="5"></div> + <div id="delete-point" class="button"> delete point </div> + </div> + <div class="ui-color-picker" data-topic="picker"></div> + </div> + + <div class="section"> + <div class="title"> Active axis </div> + <div class="property"> + <div class="name"> axis unit </div> + <div class="ui-dropdown" data-topic="axis-unit" data-selected="1"> + <div data-value='px'> pixels (px) </div> + <div data-value='%'> percentage (%) </div> + </div> + <div id="delete-axis" class="button"> delete line </div> + </div> + <div class="property"> + <div class="ui-slider" data-topic="axis-rotation" data-info="rotation" + data-min="-180" data-value="0" data-max="180"></div> + </div> + </div> + + <div id="tool-section" class="section"> + <div class="title"> Tool settings </div> + <div class="property"> + <div class="name"> alpha background </div> + <div id="canvas-bg"></div> + <div id="add-axis" class="button"> add line </div> + </div> + <div id="order"> + <div id="gradient-axes"></div> + <div id="gradient-order"></div> + </div> + </div> + </div> + + <div id="output"> + <div class="css-property"> + <span class="property">background:</span> + <span class="value"></span> + </div> + </div> + </div></pre> + +<h3 id="CSS_Content">CSS Content</h3> + +<pre class="brush: css">/* + * COLOR PICKER TOOL + */ + +.ui-color-picker { + width: 420px; + margin: 0; + border: 1px solid #DDD; + background-color: #FFF; + display: table; + + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.ui-color-picker .picking-area { + width: 198px; + height: 198px; + margin: 5px; + border: 1px solid #DDD; + position: relative; + float: left; + display: table; +} + +.ui-color-picker .picking-area:hover { + cursor: default; +} + +/* HSV format - Hue-Saturation-Value(Brightness) */ +.ui-color-picker .picking-area { + background: url("images/picker_mask.png"); + + background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), + -moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%); + background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), + -webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%); + background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), + -ms-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%); + background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), + -o-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%); + + background-color: #F00; +} + +/* HSL format - Hue-Saturation-Lightness */ +.ui-color-picker[data-mode='HSL'] .picking-area { + background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, + hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), + -moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); + background: -webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, + hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), + -webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); + background: -ms-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, + hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), + -ms-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); + background: -o-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, + hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), + -o-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); + background-color: #F00; +} + +.ui-color-picker .picker { + width: 10px; + height: 10px; + margin: -5px 0 0 -5px; + border-radius: 50%; + border: 1px solid #FFF; + position: absolute; + top: 45%; + left: 45%; +} + +.ui-color-picker .picker:before { + width: 8px; + height: 8px; + content: ""; + position: absolute; + border: 1px solid #999; + border-radius: 50%; +} + +.ui-color-picker .hue, +.ui-color-picker .alpha { + width: 198px; + height: 28px; + margin: 5px; + border: 1px solid #FFF; + float: left; +} + +.ui-color-picker .hue { + background: url("images/hue_mask.png"); + background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, + #00F 66.66%, #F0F 83.33%, #F00 100%); + background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, + #00F 66.66%, #F0F 83.33%, #F00 100%); + background: -ms-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, + #00F 66.66%, #F0F 83.33%, #F00 100%); + background: -o-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, + #00F 66.66%, #F0F 83.33%, #F00 100%); +} + +.ui-color-picker .alpha { + border: 1px solid #CCC; + background: url("images/alpha_mask.png"); +} + +.ui-color-picker .slider-picker { + width: 2px; + height: 100%; + margin: 0 0 0 -2px; + border: 1px solid #777; + background-color: #FFF; + position: relative; + top: -1px; +} + +/* input HSV and RGB */ + +.ui-color-picker .info { + width: 200px; + margin: 5px; + float: left; +} + +.ui-color-picker .info * { + float: left; +} + +.ui-color-picker .input { + width: 64px; + margin: 5px 2px; + float: left; +} + +.ui-color-picker .input .name { + height: 20px; + width: 30px; + text-align: center; + font-size: 14px; + line-height: 18px; + float: left; +} + +.ui-color-picker .input input { + width: 30px; + height: 18px; + margin: 0; + padding: 0; + border: 1px solid #DDD; + text-align: center; + float: right; + + -moz-user-select: text; + -webkit-user-select: text; + -ms-user-select: text; +} + +.ui-color-picker .input[data-topic="lightness"] { + display: none; +} + +.ui-color-picker[data-mode='HSL'] .input[data-topic="value"] { + display: none; +} + +.ui-color-picker[data-mode='HSL'] .input[data-topic="lightness"] { + display: block; +} + +.ui-color-picker .input[data-topic="alpha"] { + margin-top: 10px; + width: 93px; +} + +.ui-color-picker .input[data-topic="alpha"] > .name { + width: 60px; +} + +.ui-color-picker .input[data-topic="alpha"] > input { + float: right; +} + +.ui-color-picker .input[data-topic="hexa"] { + width: auto; + float: right; + margin: 6px 8px 0 0; +} + +.ui-color-picker .input[data-topic="hexa"] > .name { + display: none; +} + +.ui-color-picker .input[data-topic="hexa"] > input { + width: 90px; + height: 24px; + padding: 2px 0; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +/* Preview color */ +.ui-color-picker .preview { + width: 95px; + height: 53px; + margin: 5px; + margin-top: 10px; + border: 1px solid #DDD; + background-image: url("images/alpha.png"); + float: left; + position: relative; +} + +.ui-color-picker .preview:before { + height: 100%; + width: 50%; + left: 50%; + top: 0; + content: ""; + background: #FFF; + position: absolute; + z-index: 1; +} + +.ui-color-picker .preview-color { + width: 100%; + height: 100%; + background-color: rgba(255, 0, 0, 0.5); + position: absolute; + z-index: 1; +} + +.ui-color-picker .switch_mode { + width: 10px; + height: 20px; + position: relative; + border-radius: 5px 0 0 5px; + border: 1px solid #DDD; + background-color: #EEE; + left: -12px; + top: -1px; + z-index: 1; + transition: all 0.5s; +} + +.ui-color-picker .switch_mode:hover { + background-color: #CCC; + cursor: pointer; +} + +/* + * UI Component + */ + +.ui-input-slider { + height: 20px; + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + -moz-user-select: none; + user-select: none; +} + +.ui-input-slider * { + float: left; + height: 100%; +} + +/* Input Slider */ + +.ui-input-slider > input { + margin: 0; + padding: 0; + width: 50px; + text-align: center; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +.ui-input-slider-info { + width: 90px; + padding: 0px 10px 0px 0px; + text-align: right; + text-transform: lowercase; + line-height: inherit; +} + +.ui-input-slider-left, .ui-input-slider-right { + width: 16px; + cursor: pointer; + background: url("arrows.png") center left no-repeat; +} + +.ui-input-slider-right { + background: url("arrows.png") center right no-repeat; +} + +.ui-input-slider-name { + width: 90px; + padding: 0 10px 0 0; + text-align: right; + text-transform: lowercase; +} + +.ui-input-slider-btn-set { + width: 25px; + background-color: #2C9FC9; + border-radius: 5px; + color: #FFF; + font-weight: bold; + line-height: 14px; + text-align: center; +} + +.ui-input-slider-btn-set:hover { + background-color: #379B4A; + cursor: pointer; +} + +/* + * UI Slider + */ + +.ui-slider { + height: 20px; + margin: 10px 0; + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + -moz-user-select: none; + user-select: none; +} + +.ui-slider > * { + float: left; + height: 100%; + line-height: 100%; +} + +/* Slider */ + +.ui-slider-slider { + height: 10px; + width: 200px; + margin: 4px 10px; + display: block; + border: 1px solid #999; + border-radius: 3px; + background: #EEE; +} + +.ui-slider-slider:hover { + cursor: pointer; +} + +.ui-slider-name { + width: 90px; + padding: 0 10px 0 0; + text-align: right; + text-transform: lowercase; +} + +.ui-slider-pointer { + width: 12px; + height: 13px; + margin: 0 0 0 -7px; + background-color: #EEE; + border: 1px solid #2C9FC9; + border-radius: 3px; + position: relative; + top: -3px; + left: 0%; +} + +.ui-slider-button { + width: 25px; + background-color: #2C9FC9; + border-radius: 3px; + color: #FFF; + font-weight: bold; + line-height: 14px; + text-align: center; +} + +.ui-slider-button:hover { + background-color: #379B4A; + cursor: pointer; +} + +.ui-slider > input { + width: 50px; + margin: 0 10px; + padding: 0; + text-align: center; +} + +/* + * UI DropDown + */ + +/* Dropdown */ + +.ui-dropdown { + height: 2em; + width: 120px; + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + font-size: 12px; + + background-image: url("dropdown_arrow.svg"); + background-position: right 0.3em center; + background-repeat: no-repeat; + background-color: #359740; + background-size: 1.1em; + + position: relative; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.ui-dropdown:hover { + cursor: pointer; + background-color: #208B20; +} + +/* Dropdown Select Button */ + +.ui-dropdown-select { + padding: 0 0.75em; + color: #FFF; + line-height: 2em; +} + +/* Dropdown List */ + +.ui-dropdown-list { + width: 100%; + height: 150px; + max-height: 150px; + margin: 0; + padding: 0 0.3em; + + border: 1px solid #3490D2; + border-color: #208B20; + background: #666; + background-color: #EEF1F5; + color: #000; + + position: absolute; + top: 100%; + left: 0; + z-index: 100; + + overflow: hidden; + transition: all 0.3s; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +.ui-dropdown-list:hover { + overflow: auto; +} + +.ui-dropdown-list[data-hidden='true'] { + height: 0 !important; + opacity: 0; + visibility: hidden; +} + +.ui-dropdown[data-position='left'] .ui-dropdown-list { + left: -100%; + top: 0; +} + +.ui-dropdown[data-position='right'] .ui-dropdown-list { + left: 100%; + top: 0; +} + +.ui-dropdown-list > div { + width: 80%; + height: 1.6em; + margin: 0.3em 0; + padding: 0.3em 10%; + line-height: 1.6em; +} + +.ui-dropdown-list > div:hover { + background: #3490D2; + color:#FFF; + border-radius: 2px; + cursor: pointer; +} + +/* + * COLOR PICKER TOOL + */ + +body { + width: 100%; + height: 100%; + margin: 0 auto; + + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; +} + +body[data-dragging="true"] { +} + +/** + * Resize Handle + */ + +.resize-handle { + width: 10px; + height: 10px; + background: url("images/resize.png") center center no-repeat; + position: absolute; + bottom: 0; + right: 0; +} + +[data-resize='both']:hover { + cursor: nw-resize !important; +} + +[data-resize='width']:hover { + cursor: w-resize !important; +} + +[data-resize='height']:hover { + cursor: n-resize !important; +} + +/** + * Main Container + */ + +#container { + width: 1000px; + height: 100%; + display: table; + margin: 0 auto; +} + + +#gradient-container { + width: 450px; + height: 250px; + min-width: 8px; + min-height: 8px; + margin: 100px auto; + border: 1px solid #DDD; + position: relative; +} + +#gradient-container[data-alpha="true"]:after { + content: ""; + width: 100%; + height: 100%; + background: url('images/canvas-pattern.png'); + position: absolute; + z-index: -1; +} + +/** + * Gradient Axis + */ + +.gradient-axis { + width: 125%; + height: 4px; + margin: -3px 0 0 0; + border: 1px solid #CCC; + position: absolute; + top: 50%; + left: 0; + opacity: 0.5; +} + +.gradient-axis[data-active='true'] { + opacity: 1; + z-index: 1; +} + +.gradient-axis:after { + content: ""; + width: 25px; + height: 100%; + background-color: #CCC; + position: absolute; + left: 0; + top: 0; +} + +.gradient-axis .gradient-line { + width: 80%; + height: 100%; + margin: 0px auto; + position: relative; +} + +.gradient-axis .gradient-line:hover { + cursor: pointer; +} + +.gradient-axis .gradient-line:after, +.gradient-axis .gradient-line:before { + content: ""; + width: 1px; + height: 100px; + background-color: #CCC; + position: absolute; + top: -48px; +} + +.gradient-axis .gradient-line:after { + left: -1px; +} + +.gradient-axis .gradient-line:before { + right: -1px; +} + +.gradient-axis .gradient-point { + width: 16px; + height: 16px; + margin: 0 0 0 -8px; + top: -7px; + border-radius: 50%; + background-color: #FFF; + border: 1px solid #999; + position: absolute; + z-index: 1; +} + +.gradient-axis .gradient-point:after { + content: ""; + width: 6px; + height: 6px; + border-radius: 50%; + background-color: #FFF; + border: 1px solid #999; + position: absolute; + top: 4px; + left: 4px; +} + +.gradient-axis .gradient-point:hover:after, +.gradient-axis .gradient-point[data-active="true"]:after { + background-color: #CCC; +} + +.gradient-axis .rotate-point { + width: 25px; + height: 25px; + position: absolute; + top: -10.5px; + right: -12px; +} + +.gradient-axis[axisID='0']:after { + background-color: #DA5C5C; +} + +.gradient-axis[axisID='1']:after { + background-color: #5CDA9B; +} + +.gradient-axis[axisID='2']:after { + background-color: #5C9BDA; +} + +.gradient-axis[axisID='3']:after { + background-color: #5C5CDA; +} + +.gradient-axis[axisID='0'] path { + fill: #DA5C5C; +} + +.gradient-axis[axisID='1'] path { + fill: #5CDA9B; +} + +.gradient-axis[axisID='2'] path { + fill: #5C9BDA; +} + +.gradient-axis[axisID='3'] path { + fill: #5C5CDA; +} + + +.gradient-axis .rotate-point:hover { + cursor: pointer; +} + +/** + * Controls + */ + +#controls { + width: 100%; + margin: 0 auto; + display: table; +} + +#controls .section { + width: 50%; + padding: 10px; + display: table; + float: left; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +#controls .section .title { + width: 90%; + margin: 0 0 10px 0; + padding: 5px; + border-bottom: 1px solid #DDD; + font-size: 18px; + color: #777; +} + +#controls .property { + width: 100%; + height: 24px; + margin: 10px 0; + padding: 3px 0; + display: table; +} + +#controls .property > * { + float: left; +} + +#controls .property .name { + width: 90px; + padding: 0px 10px 0px 0px; + text-align: right; + line-height: 150%; +} + +/* Button */ + +#controls .button { + height: 24px; + padding: 0 10px; + background-color: #379B4A; + border-radius: 3px; + font-size: 14px; + color: #FFF; + display: inline; + float: left; +} + +#controls .button[data-state='disabled'] { + background-color: #CCC !important; + color: #777 !important; +} + +#controls .button[data-state='disabled']:hover { + background-color: #CCC !important; + cursor: default !important; +} + +#controls .button:hover { + cursor: pointer; + background-color: #208B20; +} + +/* Active Point */ + +.ui-input-slider { + height: 24px; + line-height: 20px; +} + +#delete-point { + margin: 0 58px 0 0; + float: right !important; +} + +#controls .ui-color-picker[data-topic="picker"] { + margin: 20px 0 0 0; +} + +#controls .ui-input-slider[data-topic="axis-rotation"] { +} + +#controls .ui-dropdown { + width: 130px; + height: 24px; +} + +#controls .ui-dropdown-select { + line-height: 24px; +} + +#controls .ui-dropdown-list { + height: 66px; + line-height: 2.5em; + overflow: hidden; +} + +#delete-axis { + margin: 0 38px 0 0; + float: right !important; +} + +/* Tool controls */ + +#tool-section .property .name { + width: 150px; +} + +#canvas-bg { + width: 16px; + height: 16px; + margin: 5px; + background: url("images/toggle-background.png") center right no-repeat; +} + +#canvas-bg:hover { + cursor: pointer; +} + +#canvas-bg[data-alpha='false'] { + background-position: center left; +} + +#canvas-bg[data-alpha='true'] { + background-position: center right; +} + +/* Order gradients */ + +#order { + margin-left: 24px; +} + +#gradient-axes { + width: 100%; + height: 30px; + padding: 0 0 0 15px; + display: table; + position: relative; +} + +#gradient-axes .axis { + width: 50px; + height: 20px; + margin: 5px 0; + background-color: #DDD; + text-align: center; + float: left; + transition: all 0.3s; + position: absolute; +} + +#gradient-axes .axis:hover { + margin: 2px 0; + height: 26px; + background-color: #CCC; + cursor: pointer; +} + +#gradient-axes .axis[data-state='active'] { + margin: 2px 0; + height: 26px; +} + +#gradient-axes .axis[data-state='active']:after { + content: "*"; + color: #FFF; + padding: 3px; +} + +#gradient-axes .axis[axisID='0'] { + background-color: #DA5C5C; +} + +#gradient-axes .axis[axisID='1'] { + background-color: #5CDA9B; +} + +#gradient-axes .axis[axisID='2'] { + background-color: #5C9BDA; +} + +#gradient-axes .axis[axisID='3'] { + background-color: #5C5CDA; +} + +#add-axis.button { + margin: 0 38px 0 0; + float: right; +} + +#gradient-order { + width: 60%; + height: 5px; + margin: 5px 0 0 0; + overflow: visible; + background-color: #CCC; + position: relative; +} + +#gradient-order:before { + content: "gradient order - drag to order"; + position: absolute; + top: 100%; + color: #CCC; +} + +#gradient-order:after { + content: ""; + width: 24px; + height: 24px; + background: url('images/arrow.svg'); + background-size: 24px 24px; + position: absolute; + right: -10px; + top: -9.5px; +} + + +/** + * Output + */ + +#output { + width: 100%; + padding: 10px 0; + margin: 20px 0 50px 0; + border: 2px dashed #CCC; + border-radius: 5px; + display: table; + font-size: 13px; + overflow: hidden; + + -moz-user-select: text; + -webkit-user-select: text; + -ms-user-select: text; + user-select: text; +} + +#output .css-property { + width: 90%; + margin: 5px 5%; + color: #777; + position: relative; + float: left; +} + +#output .property { + height: 100%; + width: 12%; + position: absolute; + left: 0; +} + +#output .value { + width: 88%; + position: absolute; + white-space: pre; + word-wrap: break-word; + display: block; + right: 0; + +} + + +</pre> + +<h3 id="JavaScript_Content">JavaScript Content</h3> + +<pre class="brush: js">var UIColorPicker = (function UIColorPicker() { + 'use strict'; + + function getElemById(id) { + return document.getElementById(id); + } + + var subscribers = []; + var pickers = []; + + /** + * RGBA Color class + * + * HSV/HSB and HSL (hue, saturation, value / brightness, lightness) + * @param hue 0-360 + * @param saturation 0-100 + * @param value 0-100 + * @param lightness 0-100 + */ + + function Color(color) { + + if(color instanceof Color === true) { + this.copy(color); + return; + } + + this.r = 0; + this.g = 0; + this.b = 0; + this.a = 1; + this.hue = 0; + this.saturation = 0; + this.value = 0; + this.lightness = 0; + this.format = 'HSV'; + } + + function RGBColor(r, g, b) { + var color = new Color(); + color.setRGBA(r, g, b, 1); + return color; + } + + function RGBAColor(r, g, b, a) { + var color = new Color(); + color.setRGBA(r, g, b, a); + return color; + } + + function HSVColor(h, s, v) { + var color = new Color(); + color.setHSV(h, s, v); + return color; + } + + function HSVAColor(h, s, v, a) { + var color = new Color(); + color.setHSV(h, s, v); + color.a = a; + return color; + } + + function HSLColor(h, s, l) { + var color = new Color(); + color.setHSL(h, s, l); + return color; + } + + function HSLAColor(h, s, l, a) { + var color = new Color(); + color.setHSL(h, s, l); + color.a = a; + return color; + } + + Color.prototype.copy = function copy(obj) { + if(obj instanceof Color !== true) { + console.log('Typeof parameter not Color'); + return; + } + + this.r = obj.r; + this.g = obj.g; + this.b = obj.b; + this.a = obj.a; + this.hue = obj.hue; + this.saturation = obj.saturation; + this.value = obj.value; + this.format = '' + obj.format; + this.lightness = obj.lightness; + }; + + Color.prototype.setFormat = function setFormat(format) { + if (format === 'HSV') + this.format = 'HSV'; + if (format === 'HSL') + this.format = 'HSL'; + }; + + /*========== Methods to set Color Properties ==========*/ + + Color.prototype.isValidRGBValue = function isValidRGBValue(value) { + return (typeof(value) === 'number' && isNaN(value) === false && + value >= 0 && value <= 255); + }; + + Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) { + if (this.isValidRGBValue(red) === false || + this.isValidRGBValue(green) === false || + this.isValidRGBValue(blue) === false) + return; + + this.r = red | 0; + this.g = green | 0; + this.b = blue | 0; + + if (this.isValidRGBValue(alpha) === true) + this.a = alpha | 0; + }; + + Color.prototype.setByName = function setByName(name, value) { + if (name === 'r' || name === 'g' || name === 'b') { + if(this.isValidRGBValue(value) === false) + return; + + this[name] = value; + this.updateHSX(); + } + }; + + Color.prototype.setHSV = function setHSV(hue, saturation, value) { + this.hue = hue; + this.saturation = saturation; + this.value = value; + this.HSVtoRGB(); + }; + + Color.prototype.setHSL = function setHSL(hue, saturation, lightness) { + this.hue = hue; + this.saturation = saturation; + this.lightness = lightness; + this.HSLtoRGB(); + }; + + Color.prototype.setHue = function setHue(value) { + if (typeof(value) !== 'number' || isNaN(value) === true || + value < 0 || value > 359) + return; + this.hue = value; + this.updateRGB(); + }; + + Color.prototype.setSaturation = function setSaturation(value) { + if (typeof(value) !== 'number' || isNaN(value) === true || + value < 0 || value > 100) + return; + this.saturation = value; + this.updateRGB(); + }; + + Color.prototype.setValue = function setValue(value) { + if (typeof(value) !== 'number' || isNaN(value) === true || + value < 0 || value > 100) + return; + this.value = value; + this.HSVtoRGB(); + }; + + Color.prototype.setLightness = function setLightness(value) { + if (typeof(value) !== 'number' || isNaN(value) === true || + value < 0 || value > 100) + return; + this.lightness = value; + this.HSLtoRGB(); + }; + + Color.prototype.setAlpha = function setAlpha(value) { + if (typeof(value) !== 'number' || isNaN(value) === true || + value < 0 || value > 1) + return; + this.a = parseFloat(value.toFixed(2)); + }; + + Color.prototype.setHexa = function setHexa(value) { + var valid = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value); + + if (valid !== true) + return; + + if (value[0] === '#') + value = value.slice(1, value.length); + + if (value.length === 3) + value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,'$1$1$2$2$3$3'); + + this.r = parseInt(value.substr(0, 2), 16); + this.g = parseInt(value.substr(2, 2), 16); + this.b = parseInt(value.substr(4, 2), 16); + + this.alpha = 1; + this.RGBtoHSV(); + }; + + /*========== Conversion Methods ==========*/ + + Color.prototype.convertToHSL = function convertToHSL() { + if (this.format === 'HSL') + return; + + this.setFormat('HSL'); + this.RGBtoHSL(); + }; + + Color.prototype.convertToHSV = function convertToHSV() { + if (this.format === 'HSV') + return; + + this.setFormat('HSV'); + this.RGBtoHSV(); + }; + + /*========== Update Methods ==========*/ + + Color.prototype.updateRGB = function updateRGB() { + if (this.format === 'HSV') { + this.HSVtoRGB(); + return; + } + + if (this.format === 'HSL') { + this.HSLtoRGB(); + return; + } + }; + + Color.prototype.updateHSX = function updateHSX() { + if (this.format === 'HSV') { + this.RGBtoHSV(); + return; + } + + if (this.format === 'HSL') { + this.RGBtoHSL(); + return; + } + }; + + Color.prototype.HSVtoRGB = function HSVtoRGB() { + var sat = this.saturation / 100; + var value = this.value / 100; + var C = sat * value; + var H = this.hue / 60; + var X = C * (1 - Math.abs(H % 2 - 1)); + var m = value - C; + var precision = 255; + + C = (C + m) * precision | 0; + X = (X + m) * precision | 0; + m = m * precision | 0; + + if (H >= 0 && H < 1) { this.setRGBA(C, X, m); return; } + if (H >= 1 && H < 2) { this.setRGBA(X, C, m); return; } + if (H >= 2 && H < 3) { this.setRGBA(m, C, X); return; } + if (H >= 3 && H < 4) { this.setRGBA(m, X, C); return; } + if (H >= 4 && H < 5) { this.setRGBA(X, m, C); return; } + if (H >= 5 && H < 6) { this.setRGBA(C, m, X); return; } + }; + + Color.prototype.HSLtoRGB = function HSLtoRGB() { + var sat = this.saturation / 100; + var light = this.lightness / 100; + var C = sat * (1 - Math.abs(2 * light - 1)); + var H = this.hue / 60; + var X = C * (1 - Math.abs(H % 2 - 1)); + var m = light - C/2; + var precision = 255; + + C = (C + m) * precision | 0; + X = (X + m) * precision | 0; + m = m * precision | 0; + + if (H >= 0 && H < 1) { this.setRGBA(C, X, m); return; } + if (H >= 1 && H < 2) { this.setRGBA(X, C, m); return; } + if (H >= 2 && H < 3) { this.setRGBA(m, C, X); return; } + if (H >= 3 && H < 4) { this.setRGBA(m, X, C); return; } + if (H >= 4 && H < 5) { this.setRGBA(X, m, C); return; } + if (H >= 5 && H < 6) { this.setRGBA(C, m, X); return; } + }; + + Color.prototype.RGBtoHSV = function RGBtoHSV() { + var red = this.r / 255; + var green = this.g / 255; + var blue = this.b / 255; + + var cmax = Math.max(red, green, blue); + var cmin = Math.min(red, green, blue); + var delta = cmax - cmin; + var hue = 0; + var saturation = 0; + + if (delta) { + if (cmax === red ) { hue = ((green - blue) / delta); } + if (cmax === green ) { hue = 2 + (blue - red) / delta; } + if (cmax === blue ) { hue = 4 + (red - green) / delta; } + if (cmax) saturation = delta / cmax; + } + + this.hue = 60 * hue | 0; + if (this.hue < 0) this.hue += 360; + this.saturation = (saturation * 100) | 0; + this.value = (cmax * 100) | 0; + }; + + Color.prototype.RGBtoHSL = function RGBtoHSL() { + var red = this.r / 255; + var green = this.g / 255; + var blue = this.b / 255; + + var cmax = Math.max(red, green, blue); + var cmin = Math.min(red, green, blue); + var delta = cmax - cmin; + var hue = 0; + var saturation = 0; + var lightness = (cmax + cmin) / 2; + var X = (1 - Math.abs(2 * lightness - 1)); + + if (delta) { + if (cmax === red ) { hue = ((green - blue) / delta); } + if (cmax === green ) { hue = 2 + (blue - red) / delta; } + if (cmax === blue ) { hue = 4 + (red - green) / delta; } + if (cmax) saturation = delta / X; + } + + this.hue = 60 * hue | 0; + if (this.hue < 0) this.hue += 360; + this.saturation = (saturation * 100) | 0; + this.lightness = (lightness * 100) | 0; + }; + + /*========== Get Methods ==========*/ + + Color.prototype.getHexa = function getHexa() { + var r = this.r.toString(16); + var g = this.g.toString(16); + var b = this.b.toString(16); + if (this.r < 16) r = '0' + r; + if (this.g < 16) g = '0' + g; + if (this.b < 16) b = '0' + b; + var value = '#' + r + g + b; + return value.toUpperCase(); + }; + + Color.prototype.getRGBA = function getRGBA() { + + var rgb = '(' + this.r + ', ' + this.g + ', ' + this.b; + var a = ''; + var v = ''; + var x = parseFloat(this.a); + if (x !== 1) { + a = 'a'; + v = ', ' + x; + } + + var value = 'rgb' + a + rgb + v + ')'; + return value; + }; + + Color.prototype.getHSLA = function getHSLA() { + if (this.format === 'HSV') { + var color = new Color(this); + color.setFormat('HSL'); + color.updateHSX(); + return color.getHSLA(); + } + + var a = ''; + var v = ''; + var hsl = '(' + this.hue + ', ' + this.saturation + '%, ' + this.lightness +'%'; + var x = parseFloat(this.a); + if (x !== 1) { + a = 'a'; + v = ', ' + x; + } + + var value = 'hsl' + a + hsl + v + ')'; + return value; + }; + + Color.prototype.getColor = function getColor() { + if (this.a | 0 === 1) + return this.getHexa(); + return this.getRGBA(); + }; + + /*=======================================================================*/ + /*=======================================================================*/ + + /*========== Capture Mouse Movement ==========*/ + + var setMouseTracking = function setMouseTracking(elem, callback) { + elem.addEventListener('mousedown', function(e) { + callback(e); + document.addEventListener('mousemove', callback); + }); + + document.addEventListener('mouseup', function(e) { + document.removeEventListener('mousemove', callback); + }); + }; + + /*====================*/ + // Color Picker Class + /*====================*/ + + function ColorPicker(node) { + this.color = new Color(); + this.node = node; + this.subscribers = []; + + var type = this.node.getAttribute('data-mode'); + var topic = this.node.getAttribute('data-topic'); + + this.topic = topic; + this.picker_mode = (type === 'HSL') ? 'HSL' : 'HSV'; + this.color.setFormat(this.picker_mode); + + this.createPickingArea(); + this.createHueArea(); + + this.newInputComponent('H', 'hue', this.inputChangeHue.bind(this)); + this.newInputComponent('S', 'saturation', this.inputChangeSaturation.bind(this)); + this.newInputComponent('V', 'value', this.inputChangeValue.bind(this)); + this.newInputComponent('L', 'lightness', this.inputChangeLightness.bind(this)); + + this.createAlphaArea(); + + this.newInputComponent('R', 'red', this.inputChangeRed.bind(this)); + this.newInputComponent('G', 'green', this.inputChangeGreen.bind(this)); + this.newInputComponent('B', 'blue', this.inputChangeBlue.bind(this)); + + this.createPreviewBox(); + this.createChangeModeButton(); + + this.newInputComponent('alpha', 'alpha', this.inputChangeAlpha.bind(this)); + this.newInputComponent('hexa', 'hexa', this.inputChangeHexa.bind(this)); + + this.setColor(this.color); + pickers[topic] = this; + } + + /*************************************************************************/ + // Function for generating the color-picker + /*************************************************************************/ + + ColorPicker.prototype.createPickingArea = function createPickingArea() { + var area = document.createElement('div'); + var picker = document.createElement('div'); + + area.className = 'picking-area'; + picker.className = 'picker'; + + this.picking_area = area; + this.color_picker = picker; + setMouseTracking(area, this.updateColor.bind(this)); + + area.appendChild(picker); + this.node.appendChild(area); + }; + + ColorPicker.prototype.createHueArea = function createHueArea() { + var area = document.createElement('div'); + var picker = document.createElement('div'); + + area.className = 'hue'; + picker.className ='slider-picker'; + + this.hue_area = area; + this.hue_picker = picker; + setMouseTracking(area, this.updateHueSlider.bind(this)); + + area.appendChild(picker); + this.node.appendChild(area); + }; + + ColorPicker.prototype.createAlphaArea = function createAlphaArea() { + var mask = document.createElement('div'); + var picker = document.createElement('div'); + + mask.className = 'alpha'; + picker.className = 'slider-picker'; + + this.alpha_mask = mask; + this.alpha_picker = picker; + setMouseTracking(mask, this.updateAlphaSlider.bind(this)); + + mask.appendChild(picker); + this.node.appendChild(mask); + }; + + ColorPicker.prototype.createPreviewBox = function createPreviewBox(e) { + var preview_box = document.createElement('div'); + var preview_color = document.createElement('div'); + + preview_box.className = 'preview'; + preview_color.className = 'preview-color'; + + this.preview_color = preview_color; + + preview_box.appendChild(preview_color); + this.node.appendChild(preview_box); + }; + + ColorPicker.prototype.newInputComponent = function newInputComponent(title, topic, onChangeFunc) { + var wrapper = document.createElement('div'); + var input = document.createElement('input'); + var info = document.createElement('span'); + + wrapper.className = 'input'; + wrapper.setAttribute('data-topic', topic); + info.textContent = title; + info.className = 'name'; + input.setAttribute('type', 'text'); + + wrapper.appendChild(info); + wrapper.appendChild(input); + this.node.appendChild(wrapper); + + input.addEventListener('change', onChangeFunc); + input.addEventListener('click', function() { + this.select(); + }); + + this.subscribe(topic, function(value) { + input.value = value; + }); + }; + + ColorPicker.prototype.createChangeModeButton = function createChangeModeButton() { + + var button = document.createElement('div'); + button.className = 'switch_mode'; + button.addEventListener('click', function() { + if (this.picker_mode === 'HSV') + this.setPickerMode('HSL'); + else + this.setPickerMode('HSV'); + + }.bind(this)); + + this.node.appendChild(button); + }; + + /*************************************************************************/ + // Updates properties of UI elements + /*************************************************************************/ + + ColorPicker.prototype.updateColor = function updateColor(e) { + var x = e.pageX - this.picking_area.offsetLeft; + var y = e.pageY - this.picking_area.offsetTop; + + // width and height should be the same + var size = this.picking_area.clientWidth; + + if (x > size) x = size; + if (y > size) y = size; + if (x < 0) x = 0; + if (y < 0) y = 0; + + var value = 100 - (y * 100 / size) | 0; + var saturation = x * 100 / size | 0; + + if (this.picker_mode === 'HSV') + this.color.setHSV(this.color.hue, saturation, value); + if (this.picker_mode === 'HSL') + this.color.setHSL(this.color.hue, saturation, value); + + this.color_picker.style.left = x + 'px'; + this.color_picker.style.top = y + 'px'; + + this.updateAlphaGradient(); + this.updatePreviewColor(); + + this.notify('value', value); + this.notify('lightness', value); + this.notify('saturation', saturation); + + this.notify('red', this.color.r); + this.notify('green', this.color.g); + this.notify('blue', this.color.b); + this.notify('hexa', this.color.getHexa()); + + notify(this.topic, this.color); + }; + + ColorPicker.prototype.updateHueSlider = function updateHueSlider(e) { + var x = e.pageX - this.hue_area.offsetLeft; + var width = this.hue_area.clientWidth; + + if (x < 0) x = 0; + if (x > width) x = width; + + var hue = ((359 * x) / width) | 0; + + this.updateSliderPosition(this.hue_picker, x - 1); + this.setHue(hue); + }; + + ColorPicker.prototype.updateAlphaSlider = function updateAlphaSlider(e) { + var x = e.pageX - this.alpha_mask.offsetLeft; + var width = this.alpha_mask.clientWidth; + + if (x < 0) x = 0; + if (x > width) x = width; + + this.color.a = (x / width).toFixed(2); + + this.updateSliderPosition(this.alpha_picker, x - 1); + this.updatePreviewColor(); + + this.notify('alpha', this.color.a); + notify(this.topic, this.color); + }; + + ColorPicker.prototype.setHue = function setHue(value) { + this.color.setHue(value); + + this.updatePickerBackground(); + this.updateAlphaGradient(); + this.updatePreviewColor(); + + this.notify('red', this.color.r); + this.notify('green', this.color.g); + this.notify('blue', this.color.b); + this.notify('hexa', this.color.getHexa()); + this.notify('hue', this.color.hue); + + notify(this.topic, this.color); + }; + + // Updates when one of Saturation/Value/Lightness changes + ColorPicker.prototype.updateSLV = function updateSLV() { + this.updatePickerPosition(); + this.updateAlphaGradient(); + this.updatePreviewColor(); + + this.notify('red', this.color.r); + this.notify('green', this.color.g); + this.notify('blue', this.color.b); + this.notify('hexa', this.color.getHexa()); + + notify(this.topic, this.color); + }; + + /*************************************************************************/ + // Update positions of various UI elements + /*************************************************************************/ + + ColorPicker.prototype.updatePickerPosition = function updatePickerPosition() { + var size = this.picking_area.clientWidth; + var value = 0; + + if (this.picker_mode === 'HSV') + value = this.color.value; + if (this.picker_mode === 'HSL') + value = this.color.lightness; + + var x = (this.color.saturation * size / 100) | 0; + var y = size - (value * size / 100) | 0; + + this.color_picker.style.left = x + 'px'; + this.color_picker.style.top = y + 'px'; + }; + + ColorPicker.prototype.updateSliderPosition = function updateSliderPosition(elem, pos) { + elem.style.left = pos + 'px'; + }; + + ColorPicker.prototype.updateHuePicker = function updateHuePicker() { + var size = this.hue_area.clientWidth; + var pos = (this.color.hue * size / 360 ) | 0; + this.hue_picker.style.left = pos + 'px'; + }; + + ColorPicker.prototype.updateAlphaPicker = function updateAlphaPicker() { + var size = this.alpha_mask.clientWidth; + var pos = (this.color.a * size) | 0; + this.alpha_picker.style.left = pos + 'px'; + }; + + /*************************************************************************/ + // Update background colors + /*************************************************************************/ + + ColorPicker.prototype.updatePickerBackground = function updatePickerBackground() { + var nc = new Color(this.color); + nc.setHSV(nc.hue, 100, 100); + this.picking_area.style.backgroundColor = nc.getHexa(); + }; + + ColorPicker.prototype.updateAlphaGradient = function updateAlphaGradient() { + this.alpha_mask.style.backgroundColor = this.color.getHexa(); + }; + + ColorPicker.prototype.updatePreviewColor = function updatePreviewColor() { + this.preview_color.style.backgroundColor = this.color.getColor(); + }; + + /*************************************************************************/ + // Update input elements + /*************************************************************************/ + + ColorPicker.prototype.inputChangeHue = function inputChangeHue(e) { + var value = parseInt(e.target.value); + this.setHue(value); + this.updateHuePicker(); + }; + + ColorPicker.prototype.inputChangeSaturation = function inputChangeSaturation(e) { + var value = parseInt(e.target.value); + this.color.setSaturation(value); + e.target.value = this.color.saturation; + this.updateSLV(); + }; + + ColorPicker.prototype.inputChangeValue = function inputChangeValue(e) { + var value = parseInt(e.target.value); + this.color.setValue(value); + e.target.value = this.color.value; + this.updateSLV(); + }; + + ColorPicker.prototype.inputChangeLightness = function inputChangeLightness(e) { + var value = parseInt(e.target.value); + this.color.setLightness(value); + e.target.value = this.color.lightness; + this.updateSLV(); + }; + + ColorPicker.prototype.inputChangeRed = function inputChangeRed(e) { + var value = parseInt(e.target.value); + this.color.setByName('r', value); + e.target.value = this.color.r; + this.setColor(this.color); + }; + + ColorPicker.prototype.inputChangeGreen = function inputChangeGreen(e) { + var value = parseInt(e.target.value); + this.color.setByName('g', value); + e.target.value = this.color.g; + this.setColor(this.color); + }; + + ColorPicker.prototype.inputChangeBlue = function inputChangeBlue(e) { + var value = parseInt(e.target.value); + this.color.setByName('b', value); + e.target.value = this.color.b; + this.setColor(this.color); + }; + + ColorPicker.prototype.inputChangeAlpha = function inputChangeAlpha(e) { + var value = parseFloat(e.target.value); + + if (typeof value === 'number' && isNaN(value) === false && + value >= 0 && value <= 1) + this.color.a = value.toFixed(2); + + e.target.value = this.color.a; + this.updateAlphaPicker(); + this.updatePreviewColor(); + }; + + ColorPicker.prototype.inputChangeHexa = function inputChangeHexa(e) { + var value = e.target.value; + this.color.setHexa(value); + this.setColor(this.color); + }; + + /*************************************************************************/ + // Internal Pub/Sub + /*************************************************************************/ + + ColorPicker.prototype.subscribe = function subscribe(topic, callback) { + this.subscribers[topic] = callback; + }; + + ColorPicker.prototype.notify = function notify(topic, value) { + if (this.subscribers[topic]) + this.subscribers[topic](value); + }; + + /*************************************************************************/ + // Set Picker Properties + /*************************************************************************/ + + ColorPicker.prototype.setColor = function setColor(color) { + if(color instanceof Color !== true) { + console.log('Typeof parameter not Color'); + return; + } + + if (color.format !== this.picker_mode) { + color.setFormat(this.picker_mode); + color.updateHSX(); + } + + this.color.copy(color); + this.updateHuePicker(); + this.updatePickerPosition(); + this.updatePickerBackground(); + this.updateAlphaPicker(); + this.updatePreviewColor(); + this.updateAlphaGradient(); + + this.notify('red', this.color.r); + this.notify('green', this.color.g); + this.notify('blue', this.color.b); + + this.notify('hue', this.color.hue); + this.notify('saturation', this.color.saturation); + this.notify('value', this.color.value); + this.notify('lightness', this.color.lightness); + + this.notify('alpha', this.color.a); + this.notify('hexa', this.color.getHexa()); + notify(this.topic, this.color); + }; + + ColorPicker.prototype.setPickerMode = function setPickerMode(mode) { + if (mode !== 'HSV' && mode !== 'HSL') + return; + + this.picker_mode = mode; + this.node.setAttribute('data-mode', this.picker_mode); + this.setColor(this.color); + }; + + /*************************************************************************/ + // UNUSED + /*************************************************************************/ + + var setPickerMode = function setPickerMode(topic, mode) { + if (pickers[topic]) + pickers[topic].setPickerMode(mode); + }; + + var setColor = function setColor(topic, color) { + if (pickers[topic]) + pickers[topic].setColor(color); + }; + + var getColor = function getColor(topic) { + if (pickers[topic]) + return new Color(pickers[topic].color); + }; + + var subscribe = function subscribe(topic, callback) { + if (subscribers[topic] === undefined) + subscribers[topic] = []; + + subscribers[topic].push(callback); + }; + + var unsubscribe = function unsubscribe(callback) { + subscribers.indexOf(callback); + subscribers.splice(index, 1); + }; + + var notify = function notify(topic, value) { + if (subscribers[topic] === undefined || subscribers[topic].length === 0) + return; + + var color = new Color(value); + for (var i in subscribers[topic]) + subscribers[topic][i](color); + }; + + var init = function init() { + var elem = document.querySelectorAll('.ui-color-picker'); + var size = elem.length; + for (var i = 0; i < size; i++) + new ColorPicker(elem[i]); + }; + + return { + init : init, + Color : Color, + RGBColor : RGBColor, + RGBAColor : RGBAColor, + HSVColor : HSVColor, + HSVAColor : HSVAColor, + HSLColor : HSLColor, + HSLAColor : HSLAColor, + setColor : setColor, + getColor : getColor, + subscribe : subscribe, + unsubscribe : unsubscribe, + setPickerMode : setPickerMode + }; + +})(); + +/** + * UI-DropDown Select + */ + +var DropDownManager = (function DropdownManager() { + 'use strict'; + + var subscribers = {}; + var dropdowns = []; + var active = null; + + var visbility = ["hidden", "visible"]; + + var DropDown = function DropDown(node) { + var topic = node.getAttribute('data-topic'); + var label = node.getAttribute('data-label'); + var selected = node.getAttribute('data-selected') | 0; + + var select = document.createElement('div'); + var list = document.createElement('div'); + var uval = 0; + var option = null; + var option_value = null; + + list.className = 'ui-dropdown-list'; + select.className = 'ui-dropdown-select'; + + while (node.firstElementChild !== null) { + option = node.firstElementChild; + option_value = option.getAttribute('data-value'); + + if (option_value === null) + option.setAttribute('data-value', uval); + + list.appendChild(node.firstElementChild); + uval++; + } + + node.appendChild(select); + node.appendChild(list); + + select.onclick = this.toggle.bind(this); + list.onclick = this.updateValue.bind(this); + document.addEventListener('click', clickOut); + + this.state = 0; + this.time = 0; + this.dropmenu = list; + this.select = select; + this.toggle(false); + this.value = {}; + this.topic = topic; + + if (label) + select.textContent = label; + else + this.setNodeValue(list.children[selected]); + + dropdowns[topic] = this; + + }; + + DropDown.prototype.toggle = function toggle(state) { + if (typeof(state) === 'boolean') + this.state = state === false ? 0 : 1; + else + this.state = 1 ^ this.state; + + if (active !== this) { + if (active) + active.toggle(false); + active = this; + } + + if (this.state === 0) + this.dropmenu.setAttribute('data-hidden', 'true'); + else + this.dropmenu.removeAttribute('data-hidden'); + + }; + + DropDown.prototype.updateValue = function updateValue(e) { + + if (Date.now() - this.time < 500) + return; + + if (e.target.className !== "ui-dropdown-list") { + this.setNodeValue(e.target); + this.toggle(false); + } + + this.time = Date.now(); + }; + + DropDown.prototype.setNodeValue = function setNodeValue(node, send_notify) { + this.value['name'] = node.textContent; + this.value['value'] = node.getAttribute('data-value'); + + this.select.textContent = node.textContent; + this.select.setAttribute('data-value', this.value['value']); + + if (send_notify !== false) + notify.call(this); + }; + + var clickOut = function clickOut(e) { + if (active.state === 0 || + e.target === active.dropmenu || + e.target === active.select) + return; + + active.toggle(false); + }; + + var createDropDown = function createDropDown(topic, options) { + + var dropdown = document.createElement('div'); + dropdown.setAttribute('data-topic', topic); + dropdown.className = 'ui-dropdown'; + + for (var i in options) { + var x = document.createElement('div'); + x.setAttribute('data-value', i); + x.textContent = options[i]; + dropdown.appendChild(x); + } + + new DropDown(dropdown); + + return dropdown; + }; + + var setValue = function setValue(topic, index, send_notify) { + if (dropdowns[topic] === undefined || + index >= dropdowns[topic].dropmenu.children.length) + return; + + dropdowns[topic].setNodeValue(dropdowns[topic].dropmenu.children[index], send_notify); + }; + + var subscribe = function subscribe(topic, callback) { + if (subscribers[topic] === undefined) + subscribers[topic] = []; + subscribers[topic].push(callback); + }; + + var unsubscribe = function unsubscribe(topic, callback) { + var index = subscribers[topic].indexOf(callback); + subscribers[topic].splice(index, 1); + }; + + var notify = function notify() { + if (subscribers[this.topic] === undefined) + return; + + for (var i in subscribers[this.topic]) { + subscribers[this.topic][i](this.value); + } + }; + + var init = function init() { + var elem, size; + + elem = document.querySelectorAll('.ui-dropdown'); + size = elem.length; + for (var i = 0; i < size; i++) + new DropDown(elem[i]); + + }; + + return { + init : init, + setValue : setValue, + subscribe : subscribe, + unsubscribe : unsubscribe, + createDropDown : createDropDown + }; + +})(); + +/** + * UI-SlidersManager + */ + +var InputSliderManager = (function InputSliderManager() { + 'use strict'; + + var subscribers = {}; + var sliders = []; + + var InputComponent = function InputComponent(obj) { + var input = document.createElement('input'); + input.setAttribute('type', 'text'); + input.style.width = 50 + obj.precision * 10 + 'px'; + + input.addEventListener('click', function(e) { + this.select(); + }); + + input.addEventListener('change', function(e) { + var value = parseFloat(e.target.value); + + if (isNaN(value) === true) + setValue(obj.topic, obj.value); + else + setValue(obj.topic, value); + }); + + return input; + }; + + var SliderComponent = function SliderComponent(obj, sign) { + var slider = document.createElement('div'); + var startX = null; + var start_value = 0; + + slider.addEventListener("click", function(e) { + document.removeEventListener("mousemove", sliderMotion); + setValue(obj.topic, obj.value + obj.step * sign); + }); + + slider.addEventListener("mousedown", function(e) { + startX = e.clientX; + start_value = obj.value; + document.body.style.cursor = "e-resize"; + + document.addEventListener("mouseup", slideEnd); + document.addEventListener("mousemove", sliderMotion); + }); + + var slideEnd = function slideEnd(e) { + document.removeEventListener("mousemove", sliderMotion); + document.body.style.cursor = "auto"; + slider.style.cursor = "pointer"; + }; + + var sliderMotion = function sliderMotion(e) { + slider.style.cursor = "e-resize"; + var delta = (e.clientX - startX) / obj.sensivity | 0; + var value = delta * obj.step + start_value; + setValue(obj.topic, value); + }; + + return slider; + }; + + var InputSlider = function(node) { + var min = parseFloat(node.getAttribute('data-min')); + var max = parseFloat(node.getAttribute('data-max')); + var step = parseFloat(node.getAttribute('data-step')); + var value = parseFloat(node.getAttribute('data-value')); + var topic = node.getAttribute('data-topic'); + var unit = node.getAttribute('data-unit'); + var name = node.getAttribute('data-info'); + var sensivity = node.getAttribute('data-sensivity') | 0; + var precision = node.getAttribute('data-precision') | 0; + + this.min = isNaN(min) ? 0 : min; + this.max = isNaN(max) ? 100 : max; + this.precision = precision >= 0 ? precision : 0; + this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision); + this.topic = topic; + this.node = node; + this.unit = unit === null ? '' : unit; + this.sensivity = sensivity > 0 ? sensivity : 5; + value = isNaN(value) ? this.min : value; + + var input = new InputComponent(this); + var slider_left = new SliderComponent(this, -1); + var slider_right = new SliderComponent(this, 1); + + slider_left.className = 'ui-input-slider-left'; + slider_right.className = 'ui-input-slider-right'; + + if (name) { + var info = document.createElement('span'); + info.className = 'ui-input-slider-info'; + info.textContent = name; + node.appendChild(info); + } + + node.appendChild(slider_left); + node.appendChild(input); + node.appendChild(slider_right); + + this.input = input; + sliders[topic] = this; + setValue(topic, value); + }; + + InputSlider.prototype.setInputValue = function setInputValue() { + this.input.value = this.value.toFixed(this.precision) + this.unit; + }; + + var setValue = function setValue(topic, value, send_notify) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + value = parseFloat(value.toFixed(slider.precision)); + + if (value > slider.max) value = slider.max; + if (value < slider.min) value = slider.min; + + slider.value = value; + slider.node.setAttribute('data-value', value); + + slider.setInputValue(); + + if (send_notify === false) + return; + + notify.call(slider); + }; + + var setMax = function setMax(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + slider.max = value; + setValue(topic, slider.value); + }; + + var setMin = function setMin(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + slider.min = value; + setValue(topic, slider.value); + }; + + var setUnit = function setUnit(topic, unit, send_notify) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + slider.unit = unit; + setValue(topic, slider.value, send_notify); + }; + + var setStep = function setStep(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + slider.step = parseFloat(value); + setValue(topic, slider.value); + }; + + var setPrecision = function setPrecision(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + value = value | 0; + slider.precision = value; + + var step = parseFloat(slider.step.toFixed(value)); + if (step === 0) + slider.step = 1 / Math.pow(10, value); + + setValue(topic, slider.value); + }; + + var setSensivity = function setSensivity(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + value = value | 0; + + slider.sensivity = value > 0 ? value : 5; + }; + + var getNode = function getNode(topic) { + return sliders[topic].node; + }; + + var getPrecision = function getPrecision(topic) { + return sliders[topic].precision; + }; + + var getStep = function getStep(topic) { + return sliders[topic].step; + }; + + var subscribe = function subscribe(topic, callback) { + if (subscribers[topic] === undefined) + subscribers[topic] = []; + subscribers[topic].push(callback); + }; + + var unsubscribe = function unsubscribe(topic, callback) { + subscribers[topic].indexOf(callback); + subscribers[topic].splice(index, 1); + }; + + var notify = function notify() { + if (subscribers[this.topic] === undefined) + return; + for (var i = 0; i < subscribers[this.topic].length; i++) + subscribers[this.topic][i](this.value); + }; + + var createSlider = function createSlider(topic, label) { + var slider = document.createElement('div'); + slider.className = 'ui-input-slider'; + slider.setAttribute('data-topic', topic); + + if (label !== undefined) + slider.setAttribute('data-info', label); + + new InputSlider(slider); + return slider; + }; + + var init = function init() { + var elem = document.querySelectorAll('.ui-input-slider'); + var size = elem.length; + for (var i = 0; i < size; i++) + new InputSlider(elem[i]); + }; + + return { + init : init, + setMax : setMax, + setMin : setMin, + setUnit : setUnit, + setStep : setStep, + getNode : getNode, + getStep : getStep, + setValue : setValue, + subscribe : subscribe, + unsubscribe : unsubscribe, + setPrecision : setPrecision, + setSensivity : setSensivity, + getPrecision : getPrecision, + createSlider : createSlider, + }; + +})(); + +/** + * UI-SlidersManager + */ + +var SliderManager = (function SliderManager() { + 'use strict'; + + var subscribers = {}; + var sliders = []; + + function trackMouse(elem, callback, startFunc, endFunc) { + startFunc = startFunc || function(e) {}; + endFunc = endFunc || function(e) {}; + + elem.addEventListener('mousedown', function(e) { + e.preventDefault(); + startFunc(e); + + document.addEventListener('mousemove', callback); + document.addEventListener('mouseup', function up(e) { + document.removeEventListener('mousemove', callback); + document.removeEventListener('mouseup', up); + endFunc(e); + }); + }); + + elem.addEventListener('click', function(e) { + e.stopPropagation(); + }); + } + + var Slider = function(node) { + var topic = node.getAttribute('data-topic'); + var info = node.getAttribute('data-info'); + var unit = node.getAttribute('data-unit'); + var min = node.getAttribute('data-min') | 0; + var max = node.getAttribute('data-max') | 0; + var step = node.getAttribute('data-step') | 0; + var value = node.getAttribute('data-value') | 0; + var snap = node.getAttribute('data-snap'); + + this.min = min; + this.max = max > 0 ? max : 100; + this.step = step === 0 ? 1 : step; + this.value = value <= max && value >= min ? value : (min + max) / 2 | 0; + this.snap = snap === "true" ? true : false; + this.topic = topic; + this.unit = unit; + + var name = document.createElement('div'); + var slider = document.createElement('div'); + var pointer = document.createElement('div'); + + name.className = 'ui-slider-name'; + name.textContent = info; + + slider.className = 'ui-slider-slider'; + pointer.className = 'ui-slider-pointer'; + + node.appendChild(name); + slider.appendChild(pointer); + + this.pointer = pointer; + this.slider = slider; + this.node = node; + + this.createSetButton('-', this.decrement.bind(this)); + node.appendChild(slider); + this.createSetButton('+', this.increment.bind(this)); + this.createInputField(); + + new trackMouse(slider, this.updateSlider.bind(this), this.startMove.bind(this)); + slider.addEventListener('click', function(e) { + this.startMove(); + this.updateSlider(e); + }.bind(this)); + + sliders[topic] = this; + this.setValue(this.value); + }; + + Slider.prototype.createSetButton = function createSetButton(type, callback) { + var button = document.createElement('div'); + button.className = 'ui-slider-button'; + button.textContent = type; + button.addEventListener("click", callback); + this.node.appendChild(button); + }; + + Slider.prototype.createInputField = function createInputField() { + var input = document.createElement('input'); + input.setAttribute('type', 'text'); + this.node.appendChild(input); + + input.addEventListener('click', function(e) { + this.select(); + }); + + input.addEventListener('change', function(e) { + this.setValue(e.target.value | 0); + }.bind(this)); + + subscribe(this.topic, function(value) { + input.value = value + this.unit; + }.bind(this)); + }; + + Slider.prototype.startMove = function startMove(e) { + this.sliderX = this.slider.getBoundingClientRect().left; + }; + + Slider.prototype.updateSlider = function updateSlider(e) { + var width = this.slider.clientWidth; + var pos = e.clientX - this.sliderX; + var delta = this.max - this.min; + + if (pos < 0) pos = 0; + if (pos > width) pos = width; + + var value = pos * delta / width | 0; + var precision = value % this.step; + value = value - precision + this.min; + + if (precision > this.step / 2) + value = value + this.step; + + if (this.snap) + pos = (value - this.min) * width / delta; + + this.pointer.style.left = pos + "px"; + this.value = value; + notify.call(this); + }; + + Slider.prototype.increment = function increment() { + this.setValue(this.value + this.step); + }; + + Slider.prototype.decrement = function decrement() { + this.setValue(this.value - this.step); + }; + + Slider.prototype.setValue = function setValue(value) { + if (value > this.max || value < this.min) + return; + + var delta = this.max - this.min; + var width = this.slider.clientWidth; + var pos = (value - this.min) * width / delta | 0; + this.value = value; + this.pointer.style.left = pos + "px"; + notify.call(this); + }; + + var setValue = function setValue(topic, value) { + var slider = sliders[topic]; + slider.setValue(value); + }; + + var subscribe = function subscribe(topic, callback) { + if (subscribers[topic] === undefined) + subscribers[topic] = []; + subscribers[topic].push(callback); + }; + + var unsubscribe = function unsubscribe(topic, callback) { + subscribers[topic].indexOf(callback); + subscribers[topic].splice(index, 1); + }; + + var notify = function notify() { + if (subscribers[this.topic] === undefined) + return; + for (var i = 0; i < subscribers[this.topic].length; i++) + subscribers[this.topic][i](this.value); + }; + + var init = function init() { + var elem = document.querySelectorAll('.ui-slider'); + var size = elem.length; + for (var i = 0; i < size; i++) + new Slider(elem[i]); + }; + + return { + init : init, + setValue : setValue, + subscribe : subscribe, + unsubscribe : unsubscribe + }; + +})(); + +window.addEventListener("load", function() { + LinearGradientTool.init(); +}); + +window.addEventListener("load", function() { + LinearGradientTool.init(); +}); + +var LinearGradientTool = (function LinearGradientTool() { + 'use strict'; + + var radian = 180 / Math.PI; + var inv_radian = Math.PI / 180; + var units = {'%': 1, 'px' : 0}; + + /*========== DOM Methods ==========*/ + + function getElemById(id) { + return document.getElementById(id); + } + + function allowDropEvent(e) { + e.preventDefault(); + } + + function createClassElement(tag, className, parent) { + var elem = document.createElement(tag); + elem.className = className; + if (parent) parent.appendChild(elem); + return elem; + }; + + function trackMouse(elem, callback, startFunc, endFunc) { + startFunc = startFunc || function(e) {}; + endFunc = endFunc || function(e) {}; + + elem.addEventListener('mousedown', function(e) { + e.preventDefault(); + startFunc(e); + + document.addEventListener('mousemove', callback); + + document.addEventListener('mouseup', function up(e) { + document.removeEventListener('mousemove', callback); + document.removeEventListener('mouseup', up); + endFunc(e); + }); + }); + + elem.addEventListener('click', function(e) { + e.stopPropagation(); + }); + } + + var Color = UIColorPicker.Color; + var HSVColor = UIColorPicker.HSVColor; + + var UIComponent = (function UIComponent() { + + function makeResizable(elem, axis, callback, endFunc) { + var valueX = 0; + var valueY = 0; + var action = 0; + var callback = typeof callback === "function" ? callback : null; + + endFunc = endFunc || function(e) {}; + + var resizeStart = function resizeStart(e) { + e.stopPropagation(); + e.preventDefault(); + if (e.button !== 0) + return; + + valueX = e.clientX - elem.clientWidth; + valueY = e.clientY - elem.clientHeight; + + document.body.setAttribute('data-resize', axis); + document.addEventListener('mousemove', mouseMove); + document.addEventListener('mouseup', resizeEnd); + }; + + var mouseMove = function mouseMove(e) { + if (action >= 0) + elem.style.width = e.clientX - valueX + 'px'; + if (action <= 0) + elem.style.height = e.clientY - valueY + 'px'; + if (callback) + callback(); + }; + + var resizeEnd = function resizeEnd(e) { + if (e.button !== 0) + return; + + document.body.removeAttribute('data-resize', axis); + document.removeEventListener('mousemove', mouseMove); + document.removeEventListener('mouseup', resizeEnd); + endFunc(); + }; + + var handle = document.createElement('div'); + handle.className = 'resize-handle'; + + if (axis === 'width') action = 1; + else if (axis === 'height') action = -1; + else axis = 'both'; + + handle.className = 'resize-handle'; + handle.setAttribute('data-resize', axis); + handle.addEventListener('mousedown', resizeStart); + elem.appendChild(handle); + }; + + return { + makeResizable : makeResizable + }; + })(); + + + /** + * Gradient Point + */ + var GradientPoint = function GradientPoint(Axis) { + var point = document.createElement('div'); + + point.className = 'gradient-point'; + + this.position = 0; + this.node = point; + this.Axis = Axis; + this.color = new HSVColor(0, 0, 100); + this.CSScolor = this.color.getColor(); + this.CSSposition = 0; + this.PrevPoint = null; + this.NextPoint = null; + + this.Axis.num_points++; + + point.addEventListener('click', this.activate.bind(this)); + trackMouse(point, this.updatePositionM.bind(this), this.startMove.bind(this), + this.endMove.bind(this)); + + Axis.line.appendChild(point); + return this; + }; + + GradientPoint.prototype.deletePoint = function deletePoint() { + this.Axis.line.removeChild(this.node); + }; + + GradientPoint.prototype.activate = function activate() { + if (this.Axis.state === false) + return; + + this.Axis.setActivePoint(this); + this.node.setAttribute('data-active', 'true'); + UIColorPicker.setColor('picker', this.color); + InputSliderManager.setValue('point-position', this.CSSposition); + if (this.Axis.num_points > 2) + AxesManager.setDeleteButtonState('active'); + }; + + GradientPoint.prototype.deactivate = function deactivate() { + this.node.removeAttribute('data-active'); + }; + + GradientPoint.prototype.startMove = function startMove(e) { + this.Axis.updateCenterPointPos(); + this.node.setAttribute('data-active', 'true'); + document.body.setAttribute('data-dragging', 'true'); + }; + + GradientPoint.prototype.endMove = function endMove(e) { + this.node.removeAttribute('data-active', 'true'); + document.body.removeAttribute('data-dragging'); + }; + + GradientPoint.prototype.updatePositionM = function updatePositionM(e) { + var A = this.Axis; + var Qx = e.clientX - A.centerX; + var Qy = e.clientY - A.centerY; + this.position = (A.Px * Qx + A.Py * Qy) / A.Pmod + A.lsize; + this.updateCSSPosition(); + this.Axis.reorderPoint(this); + this.Axis.updateGradient(); + this.updateSlider(); + }; + + GradientPoint.prototype.setPositionM = function setPositionM(posX, posY) { + var A = this.Axis; + var Qx = posX - A.centerX; + var Qy = posY - A.centerY; + this.position = (A.Px * Qx + A.Py * Qy) / A.Pmod + A.lsize; + this.updateCSSPosition(); + this.Axis.reorderPoint(this); + this.Axis.updateGradient(); + this.updateSlider(); + }; + + GradientPoint.prototype.updateAbsolutePosition = function updateAbsolutePosition() { + if (this.Axis.unit ='%') + this.position = parseFloat(((this.CSSposition / 100) * (2 * this.Axis.lsize)).toFixed(1));; + }; + + GradientPoint.prototype.setPosition = function setPosition(pos) { + this.position = pos; + if (this.Axis.unit === '%') + this.position = parseFloat(((this.position / 100) * (2 * this.Axis.lsize)).toFixed(1));; + this.updateCSSPosition(); + this.Axis.reorderPoint(this); + this.Axis.updateGradient(); + }; + + GradientPoint.prototype.updateSlider = function updateSlider() { + if (this.Axis.ActivePoint === this && this.Axis.state === true) + InputSliderManager.setValue('point-position', this.CSSposition, false); + }; + + GradientPoint.prototype.updateColor = function updateColor(color) { + this.color.copy(color); + this.CSScolor = color.getColor(); + this.updateCSSvalue(); + }; + + GradientPoint.prototype.updateCSSPosition = function updateCSSPosition() { + this.CSSposition = this.position | 0; + if (this.Axis.unit === '%') + this.CSSposition = parseFloat((100 * this.position / (2 * this.Axis.lsize)).toFixed(1)); + + this.node.style.left = this.CSSposition + this.Axis.unit; + this.updateCSSvalue(); + }; + + GradientPoint.prototype.updateCSSvalue = function updateCSSvalue() { + this.CSSvalue = this.CSScolor + ' ' + this.CSSposition + this.Axis.unit; + }; + + GradientPoint.prototype.insertBefore = function insertBefore(point) { + this.NextPoint = point; + this.PrevPoint = point.PrevPoint; + point.PrevPoint = this; + if (this.PrevPoint) + this.PrevPoint.NextPoint = this; + }; + + GradientPoint.prototype.insertAfter = function insertAfter(point) { + this.NextPoint = point.NextPoint; + this.PrevPoint = point; + point.NextPoint = this; + if (this.NextPoint) + this.NextPoint.PrevPoint = this; + }; + + + /** + * Gradient Axis + */ + function GradientAxis(container, id) { + var axis = createClassElement('div', 'gradient-axis', null); + var line = createClassElement('div', 'gradient-line', axis); + var rotate_point = createClassElement('div', 'rotate-point', axis); + + axis.setAttribute('axisID', id); + + var svg = this.createSVGArrow(id); + rotate_point.appendChild(svg); + + this.id = id; + this.axis = axis; + this.unit = '%'; + this.line = line; + this.container = container; + this.lsize = container.clientWidth / 2; + this.FirstPoint = null; + this.ActivePoint = null; + this.gradient = ''; + this.num_points = 0; + + this.size = 0; + this.angle = 0; + this.state = false; + this.updateOnResize(); + + trackMouse(rotate_point, this.updateAxisAngle.bind(this), + this.startRotation.bind(this)); + + container.appendChild(axis); + line.addEventListener('click', this.placeGradientPoint.bind(this)); + }; + + + GradientAxis.prototype.createSVGArrow = function createSVGArrow(id) { + var xmlns = 'http://www.w3.org/2000/svg'; + var svg = document.createElementNS(xmlns, 'svg'); + var path = document.createElementNS(xmlns, 'path'); + + svg.setAttribute('class', 'gradient-arrow'); + + svg.setAttribute('width', '25'); + svg.setAttribute('height', '25'); + + path.setAttribute('fill', '#CCC'); + path.setAttribute('d', 'M 25,12.5 L 0,0 L 7.5,12.5 L 0,25'); + svg.appendChild(path); + + return svg; + }; + + GradientAxis.prototype.placeGradientPoint = function placeGradientPoint(e) { + this.updateCenterPointPos(); + var point = new GradientPoint(this); + point.setPositionM(e.clientX, e.clientY); + point.activate(); + this.attachPoint(point); + this.updateGradient(); + }; + + GradientAxis.prototype.newGradientPoint = function newGradientPoint(pos) { + var point = new GradientPoint(this); + point.setPosition(pos); + point.activate(); + this.attachPoint(point); + this.updateGradient(); + }; + + GradientAxis.prototype.attachPoint = function attachPoint(point) { + + // add the first point + if (this.FirstPoint === null) { + this.FirstPoint = point; + return; + } + + // insert the point into the list + var p = this.FirstPoint; + while (p.NextPoint) { + if (point.CSSposition < p.CSSposition) { + point.insertBefore(p); + if (point.PrevPoint === null) + this.FirstPoint = point; + return; + } + p = p.NextPoint; + }; + + // test the last point + if (point.CSSposition < p.CSSposition) + point.insertBefore(p); + else + point.insertAfter(p); + + if (point.PrevPoint === null) + this.FirstPoint = point; + + return; + }; + + GradientAxis.prototype.detachPoint = function detachPoint(point) { + if (this.FirstPoint === point) + this.FirstPoint = point.NextPoint; + if (point.PrevPoint) + point.PrevPoint.NextPoint = point.NextPoint; + if (point.NextPoint) + point.NextPoint.PrevPoint = point.PrevPoint; + point.NextPoint = null; + point.PrevPoint = null; + }; + + GradientAxis.prototype.deleteActivePoint = function deleteActivePoint() { + // return if only 2 points left on the axis + if (this.num_points === 2) + return; + + if (this.ActivePoint) { + this.ActivePoint.deletePoint(); + this.detachPoint(this.ActivePoint); + this.updateGradient(); + this.num_points--; + } + }; + + GradientAxis.prototype.reorderPoint = function reorderPoint(point) { + if (point.NextPoint && point.NextPoint.CSSposition > point.CSSposition && + point.PrevPoint && point.PrevPoint.CSSposition < point.CSSposition) + return; + if (point.NextPoint === point.PrevPoint) + return; + + this.detachPoint(point); + this.attachPoint(point); + }; + + GradientAxis.prototype.setActivePoint = function setActivePoint(point) { + if (this.ActivePoint) + this.ActivePoint.deactivate(); + this.ActivePoint = point; + }; + + GradientAxis.prototype.activate = function activate() { + this.state = true; + this.axis.setAttribute('data-active', this.state); + InputSliderManager.setUnit('point-position', this.unit, false); + SliderManager.setValue('axis-rotation', this.angle | 0, false); + DropDownManager.setValue('axis-unit', units[this.unit], false); + + if (this.ActivePoint) + this.ActivePoint.activate(); + }; + + GradientAxis.prototype.deactivate = function deactivate() { + this.state = false; + this.axis.removeAttribute('data-active', this.state); + if (this.ActivePoint) + this.ActivePoint.deactivate(); + }; + + GradientAxis.prototype.deleteAxis = function deleteAxis() { + this.deactivate(); + this.container.removeChild(this.axis); + }; + + GradientAxis.prototype.updatePointColor = function updatePointColor(color) { + if (this.ActivePoint) + this.ActivePoint.updateColor(color); + this.updateGradient(); + }; + + GradientAxis.prototype.updatePointPosition = function updatePointPosition(value) { + if (this.ActivePoint) + this.ActivePoint.setPosition(value); + }; + + GradientAxis.prototype.setUnit = function setUnit(unit) { + this.unit = unit; + this.updateAllPoints(); + InputSliderManager.setUnit('point-position', unit, false); + + if (this.ActivePoint) + this.ActivePoint.updateSlider(); + + this.updateGradient(); + }; + + GradientAxis.prototype.updateAllPoints = function updateAllPoints() { + var p = this.FirstPoint; + while(p) { + p.updateCSSPosition(); + p = p.NextPoint; + } + }; + + /* Axis events */ + GradientAxis.prototype.startRotation = function startRotation(e) { + this.updateCenterPointPos(); + this.updateAxisAngle(e); + }; + + GradientAxis.prototype.updateOnResize = function updateOnResize() { + this.updateContainer(); + this.updateCenterPointPos(); + this.setAxisAngle(this.angle); + }; + + GradientAxis.prototype.updateCenterPointPos = function updateCenterPointPos() { + var pos = this.container.getBoundingClientRect(); + this.centerX = (pos.left + pos.right) / 2; + this.centerY = (pos.top + pos.bottom) / 2; + }; + + GradientAxis.prototype.updateContainer = function updateContainer() { + var W = this.container.clientWidth; + var H = this.container.clientHeight; + + var max_size = Math.sqrt(W * W + H * H) + 50; + + this.axis.style.width = max_size + 'px'; + this.axis.style.left = (W - max_size)/2 - 1 + 'px'; + + this.mW = W / 2; + this.mH = H / 2; + }; + + GradientAxis.prototype.updateAxisAngle = function updateAxisAngle(e) { + + var Px = e.clientX - this.centerX; + var Py = e.clientY - this.centerY; + var deg = -Math.atan2(Py, Px) * radian; + var Pmod = Math.sqrt(Px * Px + Py * Py); + this.lsize = (this.mW * Math.abs(Px) + this.mH * Math.abs(Py)) / Pmod; + + if (this.state === true) + SliderManager.setValue('axis-rotation', deg | 0, false); + + this.angle = deg; + this.updateCSS(); + AxesManager.updateCSSGradient(); + + this.Px = Px; + this.Py = Py; + this.Pmod = Pmod; + }; + + GradientAxis.prototype.setAxisAngle = function setAxisAngle(deg) { + var rad = -deg * inv_radian; + var Px = Math.cos(rad); + var Py = Math.sin(rad); + this.lsize = this.mW * Math.abs(Px) + this.mH * Math.abs(Py); + + this.angle = deg; + this.updateCSS(); + AxesManager.updateCSSGradient(); + + this.Px = Px; + this.Py = Py; + this.Pmod = 1; + }; + + /* UI Methods - apply CSS */ + + GradientAxis.prototype.updateCSS = function updateCSS() { + this.line.style.width = 2 * this.lsize + 'px'; + this.axis.style.transform = 'rotate('+ -this.angle +'deg)'; + this.axis.style.webkitTransform = 'rotate('+ -this.angle +'deg)'; + }; + + GradientAxis.prototype.updateGradient = function updateGradient() { + var p = this.FirstPoint; + if (p === null) + return; + + this.gradient = p.CSSvalue; + p = p.NextPoint; + while(p) { + this.gradient += ', ' + p.CSSvalue; + p = p.NextPoint; + }; + AxesManager.updateCSSGradient(); + }; + + // this is the standard syntax + GradientAxis.prototype.getCSSGradient = function getCSSGradient() { + return 'linear-gradient('+ (-this.angle + 90 | 0) +'deg, ' + this.gradient + ')'; + }; + + /** + * AxesManager + */ + var AxesManager = (function AxesManager() { + + var lg_axes = []; + var ActiveAxis = null; + var ActiveShortcut = null; + var axes_menu = null; + var gradient_container = null; + var add_axis_btn; + var delete_axis_btn; + var delete_point_btn; + var update_output; + var dragElem; + + var createStartAxis = function createStartAxis(angle) { + + if (ActiveAxis) + ActiveAxis.deactivate(); + + var axisID = getNextAxisID(); + var axis = new GradientAxis(gradient_container, axisID); + var color = new HSVColor(210, 90, 90); + ActiveAxis = axis; + + axis.activate(); + axis.setAxisAngle(angle); + axis.newGradientPoint(10); + axis.updatePointColor(color); + + color.setAlpha(0.5); + axis.newGradientPoint(50); + axis.updatePointColor(color); + + color.setHue(275); + axis.newGradientPoint(50); + axis.updatePointColor(color); + + color.setAlpha(1); + axis.newGradientPoint(90); + axis.updatePointColor(color); + + UIColorPicker.setColor('picker', color); + lg_axes.push(axis); + + axis.Shortcut = createAxisShortcut(axisID); + axis.activate(); + }; + + var createAxis = function createAxis(angle) { + + if (ActiveAxis) + ActiveAxis.deactivate(); + + var axisID = getNextAxisID(); + var axis = new GradientAxis(gradient_container, axisID); + var color = new HSVColor(0, 0, 50); + ActiveAxis = axis; + + axis.activate(); + axis.setAxisAngle(angle); + axis.newGradientPoint(10); + axis.updatePointColor(color); + + color.setValue(90); + axis.newGradientPoint(90); + axis.updatePointColor(color); + + UIColorPicker.setColor('picker', color); + lg_axes.push(axis); + + axis.Shortcut = createAxisShortcut(axisID); + axis.activate(); + }; + + var createAxisShortcut = function createAxisShortcut(axisID) { + var axis = createClassElement('div', 'axis', axes_menu); + + axis.setAttribute('axisID', axisID); + axis.setAttribute('draggable', 'true'); + axis.style.left = (lg_axes.length - 1) * 60 + 'px'; + + axis.addEventListener('click', function() { + activateAxisShortcut(axis); + var axisID = this.getAttribute('axisID') | 0; + activateAxis(axisID); + }); + + axis.addEventListener('dragstart', function (e) { + dragElem = this; + e.dataTransfer.setData('axisID', this.getAttribute('axisID')); + }); + axis.addEventListener('dragover', allowDropEvent); + axis.addEventListener('drop', function swap(e) { + if (dragElem === this) + return; + + var from = getOrderID(e.dataTransfer.getData('axisID')); + var to = getOrderID(this.getAttribute('axisID')); + + var swap = lg_axes[from]; + lg_axes[from] = lg_axes[to]; + lg_axes[to] = swap; + + var left = dragElem.offsetLeft; + dragElem.style.left = this.offsetLeft + 'px'; + this.style.left = left + 'px'; + + updateCSSGradient(); + }); + + activateAxisShortcut(axis); + return axis; + }; + + var activateAxisShortcut = function activateAxisShortcut(node) { + if (ActiveShortcut) + ActiveShortcut.removeAttribute('data-state'); + node.setAttribute('data-state', 'active'); + ActiveShortcut = node; + }; + + var getNextAxisID = function getNextAxisID() { + var ids = []; + var idx = 0; + var len = lg_axes.length; + + for (var i=0; i 1) + delete_axis_btn.removeAttribute('data-state'); + }; + + /* Axis functions */ + + var updateAxisRotation = function updateAxisRotation(value) { + ActiveAxis.setAxisAngle(value); + }; + + var setAxisUnit = function setAxisUnit(obj) { + ActiveAxis.setUnit(obj.value); + }; + + var setAddAxisButton = function setAddAxisButton() { + add_axis_btn = getElemById('add-axis'); + add_axis_btn.addEventListener('click', function() { + if (lg_axes.length === 4) + return; + + createAxis(0); + + if (lg_axes.length > 1) + delete_axis_btn.removeAttribute('data-state'); + if (lg_axes.length === 4) + this.setAttribute('data-state', 'disabled'); + }); + }; + + var setDeleteAxisButton = function setDeleteAxisButton() { + delete_axis_btn = getElemById('delete-axis'); + delete_axis_btn.addEventListener('click', function () { + if (this.hasAttribute('data-state')) + return; + if (lg_axes.length === 1) + return; + + axes_menu.removeChild(ActiveAxis.Shortcut); + ActiveAxis.deleteAxis(); + lg_axes.splice(getOrderID(ActiveAxis.id), 1); + + ActiveAxis = null; + updateCSSGradient(); + + var len = lg_axes.length; + for (var i=0; i</pre> +</div> + +<p>{{Draft}}</p> + +<p>Dieses Werkzeug kann dazu verwendet werden, um benutzerdefinierte CSS3 {{cssxref("linear-gradient")}} Hintergründe zu erstellen.</p> + +<p>{{EmbedLiveSample('linear-gradient_generator', '100%', '1000')}}</p> diff --git a/files/de/web/css/top/index.html b/files/de/web/css/top/index.html new file mode 100644 index 0000000000..51000ba020 --- /dev/null +++ b/files/de/web/css/top/index.html @@ -0,0 +1,83 @@ +--- +title: top +slug: Web/CSS/Top +tags: + - CSS + - CSS Eigenschaft + - CSS Positionierung + - CSS Referenz +translation_of: Web/CSS/top +--- +<p>{{CSSRef}}</p> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>top</code> Eigenschaft macht eine Angabe zur Position von Elementen und wird daher zusammen mit der <a href="/de/CSS/position" title="de/CSS/position"><code>position</code></a> Eigenschaft notiert, wenn für die Positionsart der Wert <code>absolute</code>, <code>fixed</code> oder <code>relative</code> definiert wurde.</p> + +<p>Bei absolut positionierten Elementen (<code>position: absolute</code> oder <code>position: fixed</code>) wird der Abstand zwischen der oberen, äußeren Kante (<em>margin edge</em>) des Elements und der oberen Kante des umschließenden Blocks definiert.</p> + +<p>Bei relativ positionierten Elementen (<code>position: relative</code>) wird das Element aus seiner normalen Position im Elementfluss verschoben. Dabei gilt: Wenn die <code>top</code> Eigenschaft definiert wurde, überschreibt diese den Wert der <a href="/De/CSS/Bottom" title="De/CSS/Bottom"><code>bottom</code></a> Eigenschaft. Wenn <code>top</code> den Wert <code>auto</code> besitzt, ist der berechnete Wert für <a href="/De/CSS/Bottom" title="De/CSS/Bottom"><code>bottom</code></a> gleich dem Wert der <code>top</code> Eigenschaft mit umgedrehtem Vorzeichen.<br> + Wenn beide Eigenschaften nicht den Wert <code>auto</code> besitzen, wird <a href="/De/CSS/Bottom" title="De/CSS/Bottom"><code>bottom</code></a> ignoriert und auf <code>auto</code> gesetzt.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><Länge></dt> + <dd>Eine <a href="/de/CSS/Einheiten#L.c3.a4ngen">Längenangabe</a>, die positive und negative Werte sowie Null erlaubt.</dd> + <dt><Prozentzahl></dt> + <dd>Eine <a href="/de/CSS/Einheiten#Prozent">prozentuale Angabe</a>, die sich auf den umschließenden Block bezieht. Die Prozentangabe kann nur berücksichtigt werden, wenn die Höhe des umschließenden Blocks festgelegt wurde, andernfalls wird die definierte Prozentzahl wie <code>auto</code> behandelt.</dd> + <dt>auto</dt> + <dd>Standardwert. Die vertikale Position des Elementes wird nicht weiter beeinflusst, es sei denn durch <a href="/De/CSS/Bottom" title="De/CSS/Bottom"><code>bottom</code></a>, <a href="/de/CSS/margin" title="de/CSS/margin"><code>margin</code></a>, <a href="/de/CSS/padding" title="de/CSS/padding"><code>padding</code></a> oder durch die <a href="/de/CSS/height" title="de/CSS/height">Höhe</a>.</dd> + <dt>inherit</dt> + <dd>Der Wert des Elternelements wird geerbt.</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiel">Beispiel</h2> + +<pre>element { + position: absolute; +} +</pre> + +<h2 id="Spezifikation">Spezifikation</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Anmerkung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'top')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Definiert <code>top</code> als animierbar</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'visuren.html#propdef-top', 'top')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser <span>Kompatibilität</span></h2> + +{{Compat("css.properties.top")}} + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/CSS/position" title="de/CSS/position"><code>position</code></a></li> + <li><a href="/De/CSS/Bottom" title="De/CSS/Bottom"><code>bottom</code></a>, <a href="/De/CSS/Left" title="De/CSS/Left"><code>left</code></a>, <a href="/De/CSS/Right" title="De/CSS/Right"><code>right</code></a></li> +</ul> diff --git a/files/de/web/css/touch-action/index.html b/files/de/web/css/touch-action/index.html new file mode 100644 index 0000000000..c746406011 --- /dev/null +++ b/files/de/web/css/touch-action/index.html @@ -0,0 +1,72 @@ +--- +title: touch-action +slug: Web/CSS/touch-action +tags: + - CSS + - CSS Eigenschaft + - Referenz + - Web +translation_of: Web/CSS/touch-action +--- +<div>{{ CSSRef }}{{SeeCompatTable}}</div> + +<h2 id="Summary" name="Summary">Übersicht</h2> + +<p>Die CSS-Eigenschaft <code>touch-action</code> spezifiziert, ob das Standardverhalten des Browsers ausgeführt wird oder nicht (z. B. durch Scrollen oder Zoomen).</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h3 id="Values" name="Values">Werte</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>Der User-Agent führt das voreingestellte Verhalten für Berührungen aus, wie die Manipulation des Elements durch Scrollen oder Zoomen bei Berührungen, die in dem Element beginnen.</dd> + <dt><code>none</code></dt> + <dd>Berührungen, die auf dem Element beginnen, lösen nicht das Standardverhalten aus.</dd> + <dt><code>pan-x</code></dt> + <dd>Der User-Agent reagiert nur auf Berührungen, die das horizontale Scrollen des nächsten scrollbaren Elements auslösen.</dd> + <dt><code>pan-y</code></dt> + <dd>Der User-Agent reagiert nur auf Berührungen, die das vertikale Scrollen des nächsten scrollbaren Elements auslösen.</dd> + <dt><code>manipulation</code></dt> + <dd>Der User-Agent reagiert nur auf Berührungen, die dem Scrollen oder dem ununterbrochenen Zoomen dienen.</dd> +</dl> + +<h2 id="Example" name="Example">Beispiel</h2> + +<pre class="brush: css">.list { + width: 200px; + height: 50px; + overflow-x: scroll; +} + +.list > .entry { + touch-action: pan-x; +} +</pre> + +<h2 id="Specifications" name="Specifications">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Anmerkung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Pointer Events', '#the-touch-action-css-property', 'touch-action')}}</td> + <td>{{Spec2('Pointer Events')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser Kompatibilität</h2> + +{{compat("css.properties.touch-action")}} diff --git a/files/de/web/css/transform-origin/index.html b/files/de/web/css/transform-origin/index.html new file mode 100644 index 0000000000..83f8a833ed --- /dev/null +++ b/files/de/web/css/transform-origin/index.html @@ -0,0 +1,692 @@ +--- +title: transform-origin +slug: Web/CSS/transform-origin +tags: + - CSS + - CSS Transformationen + - CSS3 + - Fortgeschritten +translation_of: Web/CSS/transform-origin +--- +<div>{{ CSSRef("CSS Transforms") }}</div> + +<p>Die CSS-Eigenschaft <strong><code>transform-origin</code></strong> legt den Ankerpunkt für die Transformationen eines Elements fest.</p> + +<pre class="brush: css no-line-numbers">/* One-value syntax */ +transform-origin: 2px<em>;</em> +transform-origin: bottom; + +/* x-offset y-offset */ +transform-origin: 3cm 2px; + +/* x-offset-keyword y-offset */ +transform-origin: left 2px; + +/* x-offset-keyword y-offset-keyword */ +transform-origin: right top; + +/* y-offset-keyword x-offset-keyword */ +transform-origin: top right; + +/* x-offset y-offset z-offset */ +transform-origin: 2px 30% 10px; + +/* x-offset-keyword y-offset z-offset */ +transform-origin: left 5px -3px; + +/* x-offset-keyword y-offset-keyword z-offset */ +transform-origin: right bottom 2cm; + +/* y-offset-keyword x-offset-keyword z-offset */ +transform-origin: bottom right 2cm; + +/* Global values */ +transform-origin: inherit; +transform-origin: initial; +transform-origin: unset; +</pre> + +<div class="hidden" id="transform-origin"> +<pre class="brush: html"><div class="grid"> + <div class="col"> + <div class="row"> + <div class="cell"> + rotate(<span class="angle">-120</span>deg); + <div class="border"> + <div class="content"> + <div class="center"></div> + <div class="tr d2"></div> + </div> + </div> + </div> + <div class="cell"> + rotatex(<span class="angle">-120</span>deg); + <div class="border"> + <div class="content"> + <div class="center"></div> + <div class="tr d3x"></div> + </div> + </div> + </div> + <div class="cell"> + rotatey(<span class="angle">-120</span>deg); + <div class="border"> + <div class="content"> + <div class="center"></div> + <div class="tr d3y"></div> + </div> + </div> + </div> + <div class="cell"> + rotatez(<span class="angle">-120</span>deg); + <div class="border"> + <div class="content"> + <div class="center"></div> + <div class="tr d3z"></div> + </div> + </div> + </div> + </div> + <div class="cell note"> + transform-origin: <input type="text" value="30% top -20px"> (<i>rotate by <input type="number" min="-360" max="360" value="-120"> deg</i>) + </div> + </div> +</div></pre> + +<pre class="brush: css">html,body { + height: 100%; + box-sizing: border-box; +} + +.grid { + width: 100%; + height: 100%; + display: flex; + background: #EEE; + font: 1em monospace; +} + +.row { + display: flex; + flex: 1 auto; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-between; +} + +.col { + display: flex; + flex: 1 auto; + flex-direction: column; +} + +.cell { + box-sizing: border-box; + margin: .5em; + padding: .5em; + background-color: #FFF; + overflow: hidden; + text-align: center; +} + +.note { + background: #fff3d4; + padding: 1em; + margin: 0 .5em .5em; + font: .8em sans-serif; + text-align: center; + flex: none; +} + +input[type=number] { + width: 3rem; +} + +.border { + width : 140px; + height: 140px; + border: 1px solid #E4F0F5; + margin: .5rem auto; + overflow: hidden; +} + +.content { + width : 50px; + height: 50px; + margin: 44px; + border: 1px dotted hsla(0, 100%, 50%, .5); + position: relative; +} + +.center { + position: absolute; + width : 5px; + height: 5px; + border-radius: 100%; + background: red; + top : 50%; + left: 50%; + transform: translate(-3px, -3px); + z-index: 1; +} + +.center:before { + content: ''; + position: absolute; + left : 2px; + right : 2px; + top : -6px; + bottom: -6px; + background: red; +} + +.center:after { + content: ''; + position: absolute; + left : -6px; + right : -6px; + top : 2px; + bottom: 2px; + background: red; +} + +.tr { + width : 50px; + height: 50px; + background: hsla(215, 100%, 50%, 0.3); + transition: transform 2s linear; +} + +.tr.d2 { transform: rotate(-120deg); } +.tr.d3x { transform: rotatex(-120deg); } +.tr.d3y { transform: rotatey(-120deg); } +.tr.d3z { transform: rotatez(-120deg); }</pre> + +<pre class="brush: js">window.addEventListener('load', function () { + var LENGTH = /^-?\d+(?:em|ex|cap|ch|ic|rem|lh|rlh|vh|vw|vi|vb|vmin|vmax|px|mm|q|cm|in|pt|pc$)/ + var LENGTH_PERCENT = /^-?\d+(?:em|ex|cap|ch|ic|rem|lh|rlh|vh|vw|vi|vb|vmin|vmax|px|mm|q|cm|in|pt|pc|%$)/ + + var KEYX = /^left|center|right$/ + var KEYY = /^top|center|bottom$/ + var KEYALL = /^left|center|right|top|bottom$/ + + var INPUT = document.querySelector('input[type=text]') + var ANGLE = document.querySelector('input[type=number]') + var CENTER= Array.from(document.querySelectorAll('.center')) + var TR = Array.from(document.querySelectorAll('.tr')) + + function update () { + INPUT.style.boxShadow = 'none' + var val = INPUT.value.trim() + var isValid = true + var v = val.split(/\s+/) + + isValid = isValid && (v[2] === undefined || LENGTH.test(v[2])) + isValid = isValid && (v[1] === undefined || LENGTH_PERCENT.test(v[1]) || KEYALL.test(v[1])) + isValid = isValid && (LENGTH_PERCENT.test(v[0]) || KEYALL.test(v[0])) + + if (v.length === 2) { + var double_key_words = KEYY.test(v[0]) && KEYX.test(v[1]) + var ordinary_value = (LENGTH_PERCENT.test(v[0]) || KEYX.test(v[0])) && (LENGTH_PERCENT.test(v[1]) || KEYY.test(v[1])) + + isValid = isValid && (double_key_words || ordinary_value) + } + + + if (!isValid) { + val = '50% 50%' + + if (v[0] !== '') { + INPUT.style.boxShadow = '0 0 .5em red' + } + } + + TR.forEach(function (tr, index) { + tr.style.transformOrigin = val; + + setTimeout(function () { + var pos = window.getComputedStyle(tr).transformOrigin.split(/\s+/); + + CENTER[index].style.left = pos[0] + CENTER[index].style.top = pos[1] + }, 0) + }) + } + + function rotate() { + var value = Math.min(360, Math.max(-360, Number(ANGLE.value) || 0)); + + document.querySelector('.d2').style.transform = 'rotate(' + value + 'deg)' + document.querySelector('.d3x').style.transform = 'rotatex(' + value + 'deg)' + document.querySelector('.d3y').style.transform = 'rotatey(' + value + 'deg)' + document.querySelector('.d3z').style.transform = 'rotatez(' + value + 'deg)' + Array.from(document.querySelectorAll('.angle')).forEach(function (node){ + node.innerText = value + }) + } + + function mouseenter() { + document.querySelector('.tr.d2' ).style.transform = 'rotate(0)' + document.querySelector('.tr.d3x').style.transform = 'rotatex(0)' + document.querySelector('.tr.d3y').style.transform = 'rotatey(0)' + document.querySelector('.tr.d3z').style.transform = 'rotatez(0)' + } + + INPUT.addEventListener('input', update) + ANGLE.addEventListener('input', rotate) + update() + rotate() + + document.querySelector('.row').addEventListener('mouseenter', mouseenter) + document.querySelector('.row').addEventListener('mouseleave', rotate) +})</pre> +</div> + +<p>{{EmbedLiveSample("transform-origin", "100%", 250, "", "", "example-outcome-frame")}}</p> + +<p><span id="result_box" lang="de"><span>Der Ankerpunkt ist somit der Punkt, um den eine Transformation angewendet wird.</span> <span>Zum Beispiel ist der Ankerpunkt der Funktion rotate() der Rotationsmittelpunkt.</span> <span>(Diese Eigenschaft wird angewendet, indem zuerst das Element durch den negierten Wert der Eigenschaft verschoben wird, dann die Transformation des Elements angewendet wird und dann um den Eigenschaftswert zurück verschoben wird.)</span><br> + <br> + <span>Werte, die nicht explizit definiert sind, werden auf die entsprechenden Standardwerte zurückgesetzt.</span></span></p> + +<p>{{Cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<p><span id="result_box" lang="de"><span>Die Eigenschaft </span></span> <code>transform-origin</code> <span id="result_box" lang="de"><span>kann mit einem, zwei oder drei Werten angegeben werden.</span></span></p> + +<ul> + <li>Syntax mit einem Wert: + <ul> + <li>Der Wert muss als <a href="/de/docs/Web/CSS/length" lang="de">{{cssxref("<length>")}}</a>, <a href="/en-US/docs/Web/CSS/percentage">{{cssxref("<percentage>")}}</a>, oder eines der Schlüsselwörter <code>left</code>, <code>center</code>, und <code>right</code> angegeben werden.</li> + </ul> + </li> + <li>Syntax mit zwei Werten: + <ul> + <li>Ein Wert muss eine Länge (<a href="/de/docs/Web/CSS/length" lang="de">{{cssxref("<length>")}}</a>), ein Prozentwert (<a href="/en-US/docs/Web/CSS/percentage">{{cssxref("<percentage>")}}</a>) oder eines der Schlüsselwörter <code>left</code>, <code>center</code>, und <code>right</code> sein.</li> + <li>Der andere Wert muss als eine Länge (<a href="/de/docs/Web/CSS/length" lang="de">{{cssxref("<length>")}}</a>), ein Prozentwert(<a href="/en-US/docs/Web/CSS/percentage">{{cssxref("<percentage>")}}</a>) oder eines der Schlüsselwörter <code>top</code>, <code>center</code>, und <code>bottom</code> sein.</li> + </ul> + </li> + <li>Syntax mit drei Werten: + <ul> + <li>Die ersten zwei Werte entsprechen der Syntax mit zwei Werten.</li> + <li>Der dritte Wert muss ein {{cssxref("<length>")}}-Wert sein. Er repräsentiert immer den Wert auf der Z-Achse.</li> + </ul> + </li> +</ul> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><em>x-offset</em></dt> + <dd>Ist als {{cssxref("<length>")}} oder {{cssxref("<percentage>")}} angegebener Versatz auf der X-Achse von der oberden linken Ecke.</dd> + <dt><em>offset-keyword</em></dt> + <dd>Die Schlüsselwörter <code>left</code>, <code>right</code>, <code>top</code>, <code>bottom</code>, und <code>center</code> beschreiben entsprechende Werte.</dd> + <dt><em>y-offset</em></dt> + <dd>Ist als {{cssxref("<length>")}} oder {{cssxref("<percentage>")}} angegebener Versatz auf der Y-Achse von der oberden linken Ecke.</dd> + <dt><em>x-offset-keyword</em></dt> + <dd>Die Schlüsselwörter <code>left</code>, <code>right</code>, oder <code>center</code> beschreiben entsprechende Werte für die horizontale Transformation.</dd> + <dt><em>y-offset-keyword</em></dt> + <dd>Die Schlüsselwörter <code>top</code>, <code>bottom</code>, oder <code>center</code> beschreiben entsprechende Werte für die vertikale Transformation.</dd> + <dt><em>z-offset</em></dt> + <dd>Als {{cssxref("<length>")}} (und nicht als {{cssxref("<percentage>")}}) beschreibt den Versatz auf der Z-Achse relativ zu 0.</dd> +</dl> + +<p>Die Schlüsselwörte entschprechen folgenden Angaben in {{cssxref("<percentage>")}}:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Schlüsselwort</th> + <th scope="col">Wert</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>left</code></td> + <td><code>0%</code></td> + </tr> + <tr> + <td><code>center</code></td> + <td><code>50%</code></td> + </tr> + <tr> + <td><code>right</code></td> + <td><code>100%</code></td> + </tr> + <tr> + <td><code>top</code></td> + <td><code>0%</code></td> + </tr> + <tr> + <td><code>bottom</code></td> + <td><code>100%</code></td> + </tr> + </tbody> +</table> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Quellcode</th> + <th>Ausgabe</th> + </tr> + <tr> + <td> + <p><code>transform: none;</code></p> + </td> + <td> + <div class="hidden" id="transform_none"> + <pre class="brush: html"> +<div class="box1">&nbsp;</div> +</pre> + + <pre class="brush: css"> +.box1 { +margin: 0.5em; +width: 3em; +height: 3em; +border: solid 1px; +background-color: palegreen; +transform: none; +-webkit-transform: none; +} +</pre> + </div> + + <p>{{EmbedLiveSample('transform_none', '', '', '', '', 'no-button') }}</p> + </td> + </tr> + <tr> + <td> + <p><code>transform: rotate(30deg);</code></p> + </td> + <td> + <div class="hidden" id="transform_rotate_only"> + <pre class="brush: html"> +<div class="box2">&nbsp;</div> +</pre> + + <pre class="brush: css"> +.box2 { +margin: 0.5em; +width: 3em; +height: 3em; +border: solid 1px; +background-color: palegreen; +transform: rotate(30deg); +-webkit-transform: rotate(30deg); +} +</pre> + </div> + + <p>{{EmbedLiveSample('transform_rotate_only', '', '', '', '', 'no-button') }}</p> + </td> + </tr> + <tr> + <td> + <p><code>transform: rotate(30deg);<br> + transform-origin: 0 0;</code></p> + </td> + <td> + <div class="hidden" id="transform_rotate"> + <pre class="brush: html"> +<div class="box3">&nbsp;</div> +</pre> + + <pre class="brush: css"> +.box3 { +margin: 0.5em; +width: 3em; +height: 3em; +border: solid 1px; +background-color: palegreen; +transform-origin: 0 0; +-webkit-transform-origin: 0 0; +transform: rotate(30deg); +-webkit-transform: rotate(30deg); +} +</pre> + </div> + + <p>{{EmbedLiveSample('transform_rotate', '', '', '', '', 'no-button') }}</p> + </td> + </tr> + <tr> + <td> + <p><code>transform: rotate(30deg);<br> + transform-origin: 100% 100%;</code></p> + </td> + <td> + <div class="hidden" id="transform_rotate_with_percentage"> + <pre class="brush: html"> +<div class="box4">&nbsp;</div> +</pre> + + <pre class="brush: css"> +.box4 { +margin: 0.5em; +width: 3em; +height: 3em; +border: solid 1px; +background-color: palegreen; +transform-origin: 100% 100%; +-webkit-transform-origin: 100% 100%; +transform: rotate(30deg); +-webkit-transform: rotate(30deg); +} +</pre> + </div> + + <p>{{EmbedLiveSample('transform_rotate_with_percentage', '', '', '', '', 'no-button') }}</p> + </td> + </tr> + <tr> + <td> + <p><code>transform: rotate(30deg);<br> + transform-origin: -1em -3em;</code></p> + </td> + <td> + <div class="hidden" id="transform_rotate_with_em"> + <pre class="brush: html"> +<div class="box5">&nbsp;</div> +</pre> + + <pre class="brush: css"> +.box5 { +margin: 0.5em; +width: 3em; +height: 3em; +border: solid 1px; +background-color: palegreen; +transform-origin: -1em -3em; +-webkit-transform-origin: -1em -3em; +transform: rotate(30deg); +-webkit-transform: rotate(30deg); +} +</pre> + </div> + + <p>{{EmbedLiveSample('transform_rotate_with_em', '', '', '', '', 'no-button') }}</p> + </td> + </tr> + <tr> + <td> + <p><code>transform: scale(1.9);</code></p> + </td> + <td> + <div class="hidden" id="transform_scale_only"> + <pre class="brush: html"> +<div class="box6">&nbsp;</div> +</pre> + + <pre class="brush: css"> +.box6 { +margin: 0.5em; +width: 3em; +height: 3em; +border: solid 1px; +background-color: palegreen; +transform: scale(1.9); +-webkit-transform: scale(1.9); +} +</pre> + </div> + + <p>{{EmbedLiveSample('transform_scale_only', '', '', '', '', 'no-button') }}</p> + </td> + </tr> + <tr> + <td> + <p><code>transform: scale(1.9);<br> + transform-origin: 0 0;</code></p> + </td> + <td> + <div class="hidden" id="transform_scale_without_origin"> + <pre class="brush: html"> +<div class="box7">&nbsp;</div> +</pre> + + <pre class="brush: css"> +.box7 { +margin: 0.5em; +width: 3em; +height: 3em; +border: solid 1px; +background-color: palegreen; +transform: scale(1.9); +-webkit-transform: scale(1.9); +transform-origin: 0 0; +-webkit-transform-origin: 0 0; +} +</pre> + </div> + + <p>{{EmbedLiveSample('transform_scale_without_origin', '', '', '', '', 'no-button') }}</p> + </td> + </tr> + <tr> + <td> + <p><code>transform: scale(1.9);<br> + transform-origin: 100% -30%;</code></p> + </td> + <td> + <div class="hidden" id="transform_scale"> + <pre class="brush: html"> +<div class="box8">&nbsp;</div> +</pre> + + <pre class="brush: css"> +.box8 { +margin: 0.5em; +width: 3em; +height: 3em; +border: solid 1px; +background-color: palegreen; +transform: scale(1.9); +-webkit-transform: scale(1.9); +transform-origin: 100% -30%; +-webkit-transform-origin: 100% -30%; +} +</pre> + </div> + + <p>{{EmbedLiveSample('transform_scale', '', '', '', '', 'no-button') }}</p> + </td> + </tr> + <tr> + <td> + <p><code>transform: skewX(50deg);<br> + transform-origin: 100% -30%;</code></p> + </td> + <td> + <div class="hidden" id="transform_skew_x"> + <pre class="brush: html"> +<div class="box9">&nbsp;</div> +</pre> + + <pre class="brush: css"> +.box9 { +margin: 0.5em; +width: 3em; +height: 3em; +border: solid 1px; +background-color: palegreen; +transform: skewX(50deg); +-webkit-transform: skewX(50deg); +transform-origin: 100% -30%; +-webkit-transform-origin: 100% -30%; +} +</pre> + </div> + + <p>{{EmbedLiveSample('transform_skew_x', '', '', '', '', 'no-button') }}</p> + </td> + </tr> + <tr> + <td> + <p><code>transform: skewY(50deg);<br> + transform-origin: 100% -30%;</code></p> + </td> + <td> + <div class="hidden" id="transform_skew_y"> + <pre class="brush: html"> +<div class="box10">&nbsp;</div> +</pre> + + <pre class="brush: css"> +.box10 { +margin: 0.5em; +width: 3em; +height: 3em; +border: solid 1px; +background-color: palegreen; +transform: skewY(50deg); +-webkit-transform: skewY(50deg); +transform-origin: 100% -30%; +-webkit-transform-origin: 100% -30%; +} +</pre> + </div> + + <p>{{EmbedLiveSample('transform_skew_y', '', '', '', '', 'no-button') }}</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="Spezifikation"><span class="short_text" id="result_box" lang="de"><span>Spezifikation</span></span></h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col"><span class="short_text" id="result_box" lang="de"><span>Spezifikation</span></span></th> + <th scope="col">Status</th> + <th scope="col">Notiz</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Transforms', '#transform-origin-property', 'transform-origin') }}</td> + <td>{{ Spec2('CSS3 Transforms') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserunterstützung">Browserunterstützung</h2> + + + +<p>{{Compat("css.properties.transform-origin")}}</p> + +<h2 id="Siehe_auch"><span class="short_text" id="result_box" lang="de"><span>Siehe auch</span></span></h2> + +<ul> + <li><a href="/de/docs/Web/CSS/CSS_Transforms/CSS_Transformationen_verwenden">CSS Transformationen verwenden</a></li> +</ul> diff --git a/files/de/web/css/transform/index.html b/files/de/web/css/transform/index.html new file mode 100644 index 0000000000..3e001247e1 --- /dev/null +++ b/files/de/web/css/transform/index.html @@ -0,0 +1,123 @@ +--- +title: transform +slug: Web/CSS/transform +tags: + - BrauchtBeispiele + - BrauchtBrowserKompatibilität + - CSS-Eigenschaft + - Referenz +translation_of: Web/CSS/transform +--- +<p> {{CSRef}} {{SeheCompatTable}}</p> + +<p>Mit der Eigenschaft "CSS übersetzen" können Sie Übersetzungstransformationen einzeln und unabhängig von der Eigenschaft<br> + {{CSSxRef ("transform")}} angeben. Dadurch wird die typische Verwendung der Benutzeroberfläche besser abgebildet, und Sie müssen sich nicht die genaue Reihenfolge der Transformationsfunktionen merken, die im Transformationswerte angegeben werden müssen.</p> + +<p>Syntax</p> + +<p>/ * Schlüsselwortwerte * / translate: none; / * Einzelwerte * / translate: 100px; übersetzen: 50%; / * Zwei Werte * / translate: 100px 200px; übersetzen: 50% 105px; / * Drei Werte * / übersetzen: 50% 105px 5rem;</p> + +<p><br> + Values</p> + +<p><p> {{HTMLSidebar ("Global_attributes")}} </p></p> + +<p> <p> <span class = "seoSummary"> Das <strong> translate </strong> <a href="/en-US/docs/Web/HTML/Global_attributes"> globale Attribut </a> ist ein aufgezähltes Attribut, das wird verwendet, um anzugeben, ob die <em> übersetzbaren Attributwerte </em> eines Elements und die untergeordneten Knoten {{domxref ("Text")}} beim Lokalisieren der Seite übersetzt werden sollen oder ob sie unverändert bleiben sollen. </span> Es kann folgende Werte annehmen:<br> + </p></p> + +<p><ul><br> + <li> leere Zeichenfolge oder <code> "yes" </code>, die angibt, dass das Element übersetzt werden soll, wenn die Seite lokalisiert wird. </i><br> + <li> <code> "no" </code> gibt an, dass das Element nicht übersetzt werden darf. </li><br> + </ul></p> + +<p> <p> Obwohl nicht alle Browser dieses Attribut erkennen, wird es von automatischen Übersetzungssystemen wie Google Translate und möglicherweise auch von Tools, die von menschlichen Übersetzern verwendet werden, respektiert. Aus diesem Grund ist es wichtig, dass Webautoren dieses Attribut verwenden, um Inhalte zu markieren, die nicht übersetzt werden sollen. </P></p> + +<p> <h2 id = "Specifications"> Spezifikationen </h2></p> + +<p> <table class = "standard-table"><br> + <tbody><br> + <tr><br> + <th scope = "col"> Spezifikation </th><br> + <th scope = "col"> Status </th><br> + <th scope = "col"> Kommentar </th><br> + </tr><br> + <tr><br> + <td> {{SpecName ('HTML WHATWG', "dom.html # attr-translate", "translate")}} </td><br> + <td> {{Spec2 ('HTML WHATWG')}} </td><br> + <td> Keine Änderung gegenüber dem letzten Snapshot {{SpecName ('HTML5.1')}} </td><br> + </tr><br> + <tr><br> + <td> {{SpecName ('HTML5.1', "dom.html # the-translate-attribute", "translate")}} </td><br> + <td> {{Spec2 ('HTML5.1')}} </td><br> + <td> Momentaufnahme von {{SpecName ('HTML WHATWG')}}, ursprüngliche Definition </td><br> + </tr><br> + </tbody><br> + </table></p> + +<p> <h2 id = "Browser_compatibility"> Browserkompatibilität </h2></p> + +<p> <div class = "hidden"> Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert. Wenn Sie zu den Daten beitragen möchten, lesen Sie <a href="https://github.com/mdn/browser-compat-data"> https://github.com/mdn/browser-compat- Daten </a> und senden Sie uns eine Pull-Anfrage. </div></p> + +<p> <p> {{Compat ("html.global_attributes.translate")}} </p></p> + +<p> <h2 id = "See_also"> Siehe auch </h2></p> + +<p> <ul><br> + <li> Alle <a href="/en-US/docs/Web/HTML/Global_attributes"> globalen Attribute </a>. </li><br> + <li> Die Eigenschaft {{domxref ("HTMLElement.translate")}}, die dieses Attribut widerspiegelt. </li><br> + <li> <a href="https://www.w3.org/International/questions/qa-translate-flag"> Verwenden des HTML-Übersetzungsattributs </a> </li><br> + </ul></p> + +<p><br> + Formal syntax</p> + +<p>{{CSSSyntax}}</p> + +<p>Examples</p> + +<p>HTML</p> + +<p><div><br> + <p class="translate"> Translation<br> + </p> </div></p> + +<p>CSS</p> + +<p>* { 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; }</p> + +<p>Result</p> + +<p>{{EmbedLiveSample<br> + ('Examples')}}</p> + +<p>Specifications</p> + +<p>SpecificationStatusComment{{SpecName('CSS Transforms 2', '#individual-transforms', 'individual transforms')}}{{Spec2('CSS Transforms 2')}}Initial definition.</p> + +<p>{{CSSInfo}}</p> + +<p>Browser-Kompatibilität</p> + +<p>Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert. Wenn Sie zu den Daten beitragen möchten, lesen Sie bitte https://github.com/mdn/browser-compat-data und senden Sie uns eine Pull-Anfrage.<br> + {{Compat("css.properties.translate")}}</p> + +<p> Siehe auch</p> + +<p>{{cssxref ('scale')}}</p> + +<p>{{cssxref ('rotate')}}</p> + +<p>{{cssxref ('transform')}}</p> + +<p>hinweis: skew ist kein unabhängiger Transformationswert</p> + +<p><br> + Übersetzung in Deutsch:</p> + +<p>Benötigen Sie Hilfe? • Leitfaden für Redakteure • Stilleitfaden</p> + +<p>Sie haben einen Entwurf vom: 21.10.2019 16:52:53.</p> + +<p>Entwurf automatisch gespeichert: 21.10.2019 16:55:27</p> + +<p> </p> diff --git a/files/de/web/css/transition-property/index.html b/files/de/web/css/transition-property/index.html new file mode 100644 index 0000000000..02a492097e --- /dev/null +++ b/files/de/web/css/transition-property/index.html @@ -0,0 +1,91 @@ +--- +title: transition-property +slug: Web/CSS/transition-property +tags: + - CSS + - CSS Animationen + - CSS Übergänge + - Reference + - Référence(2) +translation_of: Web/CSS/transition-property +--- +<div>{{CSSRef("CSS Transitions")}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die CSS Eigenschaft <code>transition-property</code> wird verwendet, um den <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">Übergangseffekte</a> auf bestimmte CSS Eigenschaften anzuwenden.</p> + +<div class="note"><strong>Hinweis:</strong> Die Eigenschaften, die animiert werden können, könnten sich unter Umständen ändern. Eigenschaften, die bis jetzt noch nicht animierbar sind, sollten nicht angegeben werden, da sie vielleicht eines Tages animierbar sein werden, und es dann unerwartete Auswirkungen haben könnte.</div> + +<p>Wird eine Kurzform einer CSS Eigenschaft (zum Beispiel {{cssxref("background")}}) angegeben, so werden alle Untereigenschaften (zum Beispiel {{cssxref("background-color")}}), wenn diese animierbar sind, ebenfalls animiert.</p> + +<div>{{cssinfo}}</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: css">/* Schlüsselwortwerte */ +transition-property: none; +transition-property: all; +transition-property: test_05; +transition-property: -specific; +transition-property: sliding-vertically; + +transition-property: test1; +transition-property: test1, animation4; +transition-property: all, height, all; +transition-property: all, -moz-specific, sliding; + +/* Globale Werte */ +transition-property: inherit; +transition-property: initial; +transition-property: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code>none</code></dt> + <dd>Keine Eigenschaften werden animiert.</dd> + <dt><code>all</code></dt> + <dd>An allen animierbaren Eigenschaften werden Übergangsanimationen angewant.</dd> + <dt><code>IDENT</code></dt> + <dd>Zeichenkette, die eine Eigenschaft bezeichnet, an der bei einer Änderung des Wertes der jeweiligen Eigenschaft, eine Übergangsanimation angewant werden soll. Die Groß- und Kleinschreibung des Eingenschaftsnamen wird ignoriert. Ein Eigenschaftsname darf nur alphabetische (<code>a</code> bis <code>z)</code> und numerische (<code>0</code> bis <code>9) Zeichen</code>, sowie Unter- (<code>_</code>) und Bindestriche(<code>-</code>) erhalten. Das erste Zeichen, das kein Bindestrich ist, muss ein alphabetisches Zeichen sein (Es darf keine Zahl am Anfang stehen, auch wenn kein Bindestrich vorangestellt wurde). Der Eigenschaftsname darf ebenfalls nicht mit zwei Bindestrichen beginnen.</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<p>Es gibt mehrere Beispiele von CSS Übergängen im <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">CSS Animationen</a> Hauptartikel.</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Komentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Transitions', '#transition-property', 'transition-property')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Initiale definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.properties.transition-property")}} + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/Web/Guide/CSS/Using_CSS_transitions">CSS Animationen nutzen</a></li> + <li>{{domxref("TransitionEvent")}}</li> +</ul> diff --git a/files/de/web/css/transition/index.html b/files/de/web/css/transition/index.html new file mode 100644 index 0000000000..89a4533cdc --- /dev/null +++ b/files/de/web/css/transition/index.html @@ -0,0 +1,104 @@ +--- +title: transition +slug: Web/CSS/transition +tags: + - CSS + - CSS Eigenschaft + - CSS Transitions + - Referenz +translation_of: Web/CSS/transition +--- +<div>{{CSSRef}}</div> + +<p>Die <strong><code>transition</code></strong> <a href="/en/CSS" title="CSS">CSS </a>Eigenschaft ist eine <a href="/en-US/docs/Web/CSS/Shorthand_properties">Kurzschreibweise</a> für {{ cssxref("transition-property") }}, {{ cssxref("transition-duration") }}, {{ cssxref("transition-timing-function") }} und {{ cssxref("transition-delay") }}.</p> + +<div>{{EmbedInteractiveExample("pages/css/transition.html")}}</div> + +<p class="hidden">Der Quellcode dieses interaktiven Beispiels wird in einem Github-Repository gepflegt. Falls Sie zu dem Projekt für interaktive Beispiele beitragen möchten, klonen Sie bitte <a class="tgwf_grey" href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> und schicken Sie uns einen Pull Request.</p> + +<p>Übergänge erlauben Ihnen, den Übergang zwischen zwei Stati eines Elements zu betimmen. Verschiedene Stati können etwa durch das Nutzen von <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes" title="/en-US/docs/CSS/Pseudo-classes">pseudo-classes</a> wie {{cssxref(":hover")}} oder {{cssxref(":active")}} bestimmt oder dynamisch durch JavaScript gesetzt werden.</p> + +<h2 id="Syntax"><strong>Syntax</strong></h2> + +<pre class="brush:css no-line-numbers">/* Apply to 1 property */ +/* property name | duration */ +transition: margin-right 4s; + +/* property name | duration | delay */ +transition: margin-right 4s 1s; + +/* property name | duration | timing function */ +transition: margin-right 4s ease-in-out; + +/* property name | duration | timing function | delay */ +transition: margin-right 4s ease-in-out 1s; + +/* Apply to 2 properties */ +transition: margin-right 4s, color 1s; + +/* Apply to all changed properties */ +transition: all 0.5s ease-out; + +/* Global values */ +transition: inherit; +transition: initial; +transition: unset; +</pre> + +<p>Die <code>transition</code> Eigenschaft wird durch eine einzelne Eigenschaft oder durch mehrere Eigenschaften von transitions ausgezeichnet. Mehrere Eigenschaften müssen durch Kommas getrennt werden.</p> + +<p>Jede einzelne transition Eigenschaft beschreibt die transition, die auf eine einzelne Eigenschaft (oder die speziellen Werte <code>all</code> und <code>none</code>) angewandt werden soll. Das bezieht mit ein:</p> + +<ul> + <li>kein oder ein Wert repräsentiert die Eigenschaft, auf welche die transition angewandt werden soll. Diese Eigenschaft kann eine der folgenden sein: + <ul> + <li>das Schlüsselwort <code>none</code></li> + <li>das Schlüsselwort <code>all</code></li> + <li>ein {{cssxref("<custom-ident>")}}, das eine CSS Eigenschaft nennt.</li> + </ul> + </li> + <li>kein oder ein {{cssxref("<single-transition-timing-function>")}} Wert, der die zu benutzende timing function definiert</li> + <li>kein, ein oder zwei {{cssxref("<time>")}} Werte. Der erste Wert, der als Zeit geparst werden kann, wird der {{cssxref("transition-duration")}} zugewiesen. Der zweite als Zeit parsbare Wert wird der {{cssxref("transition-delay")}} zugewiesen.</li> +</ul> + +<p>Sehen Sie <a href="/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#When_property_value_lists_are_of_different_lengths" title="en/CSS/CSS transitions#When property value lists are of different lengths">wie Dinge gehandhabt werden</a>, wenn die Liste der Eigenschaftswerte nicht unterschiedliche Länge haben. Die Kurzfassung ist, dass zusätzliche transition Beschreibungen ignoriert werden, wenn sie die Anzahl der Eigenschaften überschreiten.</p> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<p>Es gibt viele weitere Beispiele über CSS transitions in dem Hauptartikel über <a href="/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions" title="en/CSS/CSS transitions">CSS transitions</a>.</p> + +<h2 id="Spezifikationen">Spezifikationen</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 Transitions', '#transition-shorthand-property', 'transition') }}</td> + <td>{{ Spec2('CSS3 Transitions') }}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div class="hidden">Die Kompatibilitätstabelle dieser Seite wird aus strukturierten Daten generiert. Falls Sie Daten beitragen möchten, checken Sie bitte <a class="tgwf_grey" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> aus und senden Sie uns einen Pull Request.</div> + +<p>{{Compat("css.properties.transition")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/en-US/docs/CSS/Using_CSS_transitions" title="en/CSS/CSS transitions">Verwendung von CSS transitions</a></li> + <li>{{ domxref("TransitionEvent") }}</li> +</ul> diff --git a/files/de/web/css/tutorials/index.html b/files/de/web/css/tutorials/index.html new file mode 100644 index 0000000000..5b65112de4 --- /dev/null +++ b/files/de/web/css/tutorials/index.html @@ -0,0 +1,62 @@ +--- +title: CSS Tutorials +slug: Web/CSS/Tutorials +tags: + - CSS + - Guide + - Junk + - Tutorial +translation_of: Web/CSS/Tutorials +--- +<p>CSS zu erlernen mag abschreckend sein. Um dir zu helfen haben wir zahlreiche <strong>Tutorials zu CSS</strong> geschrieben. Ein paar sind an Neuanfänger gerichtet und andere stellen komplexe Funktionen vor, die von erfahreneren Nutzern genutz werden.</p> + +<p>Die Seite zählt sie alle auf, mit einer kurzen Beschreibung. Sie sind nach Schwierigkeitsgrad geordnet, sodass du die für dich passenden Tutorials heraussuchen kannst.</p> + +<div class="note"> +<p><strong>Editor's note:</strong><strong> </strong>We should look at using "difficulty level" tags on the tutorial/guide pages so that difficulty-based lists can be automatically built.</p> +</div> + +<h2 id="CSS-Tutorials_für_Anfänger">CSS-Tutorials für Anfänger</h2> + +<dl> + <dt><a href="/en-US/docs/CSS/Getting_Started" title="/en-US/docs/CSS/Getting_Started">Getting started</a></dt> + <dd>Dieser Guide richtet sich an <u>komplette Neuanfänger</u>: Hast du noch keine einzige Zeile in CSS geschrieben? — das ist für dich. Es erklärt dir die grundlegenden Konzepte der Sprache und führt dich in das Schreiben von einfachen Stylesheets ein.</dd> + <dt><a href="/en-US/docs/CSS/Using_CSS_multiple_backgrounds" title="/en-US/docs/CSS/Using_CSS_multiple_backgrounds">Using multiple backgrounds</a></dt> + <dd>Hintergründe sind essentiell für eine hübsche Gestaltung: Mit CSS kannst du gleich mehrere auf jede Box anwenden. Dieses Tutorial erklärt dir, wie sie miteinander interagieren und wie du schöne Effekte erstellen kannst.</dd> + <dt><a href="/en-US/docs/CSS/Scaling_background_images" title="/en-US/docs/CSS/Scaling_background_images">Scaling background images</a></dt> + <dd>Mit CSS kannst du Bilder skalieren, die als Hintergrund verwendet werden. Dieses Tutorial bringt dir bei, wie du das einfacherweise erreichen kannst.</dd> + <dt><a href="/en-US/docs/CSS/Media_queries" title="/en-US/docs/CSS/Media_queries">Media queries</a></dt> + <dd>Die Größe der Bildschirme oder die Art von Geräten wie Touchscreens oder gedruckte Seiten kann heutzutage stark variieren. Media queries sind die fundamentalen Bausteine um Websites überall in ihrer besten Form erscheinen zu lassen.</dd> + <dt><a href="/en-US/docs/CSS/Understanding_z-index" title="/en-US/docs/CSS/Understanding_z-index">Understanding z-index</a></dt> + <dd>Controlling superposition of boxes is a basic feature that is very quickly needed by Web developers. Though not that difficult, it requires a basic knowledge of CSS.</dd> +</dl> + +<h2 id="CSS-Tutorials_für_fortgeschrittene_Anfänger">CSS-Tutorials für fortgeschrittene Anfänger</h2> + +<p>Nach dem Release von CSS 2 (Level 1) wurden neue Funktionen zu CSS hinzugefügt. Manche von ihnen sind schick und ziemlich eigenständig. Sie sind einfach zu verwenden für Leute mit einem guten Verständnis der Grundkonzepte.</p> + +<dl> + <dt><a href="/en-US/docs/CSS/Counters" title="/en-US/docs/CSS/Counters">CSS Counters</a></dt> + <dd>Counting items and pages is an easy task in CSS. Learn to use {{cssxref("counter-reset")}}, {{cssxref("counter-increment")}}, {{cssxref("counters", "counters()")}}, and {{cssxref("counter", "counter()")}}.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_animations" title="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_animations">CSS Animations</a></dt> + <dd>CSS3 Animations allow you to define configurations of style, as <a href="/en-US/docs/CSS/@keyframes" title="/en-US/docs/CSS/@keyframes">keyframes</a>, and to transition between them defining an animation.</dd> + <dt><a href="/en-US/docs/CSS/Tutorials/Using_CSS_transitions" title="/en-US/docs/CSS/Using_CSS_transitions">CSS Transitions</a></dt> + <dd>CSS3 Transitions allow you to define an animation between several styles and to control the way this transition happens.</dd> + <dt><a href="/en-US/docs/CSS/Tutorials/Using_CSS_transforms">CSS Transforms</a></dt> + <dd>Transforms allow you to change the position of elements by modifying their coordinate space: it allows for translating, rotating, and deforming them in the 2D or 3D spaces.</dd> + <dt><a href="/en-US/docs/CSS/Using_CSS_gradients" title="/en-US/docs/CSS/Using_CSS_gradients">CSS Gradients</a></dt> + <dd>Gradients (Farbverläufe) sind Bilder die sanft von einer Farbe zur anderen verlaufen. Es gibt mehrere Arten von Farbverläufen die in CSS möglich sind: linear oder radial, wiederholend oder nicht. Dieses Tutorial beschreibt, wie man sie benutzt.</dd> +</dl> + +<h2 id="CSS-Tutorials_für_Fortgeschrittene">CSS-Tutorials für Fortgeschrittene</h2> + +<p>CSS hat auch neue Funktionen um anspruchsvolle Layouts zu erstellen. Neben den einfachen Methoden, um so ein Layout zu erstellen, sind sie viel anspruchsvoller für Leute mit zu viel Erfahrung.</p> + +<dl> + <dt><a href="/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="/en-US/docs/CSS/Using_CSS_multi-column_layouts">CSS multi-column layouts</a></dt> + <dd>CSS3 introduces a new layout allowing you to easily define multiple columns in an element. Though multi-column text is not that common on devices like screens, this is particularly useful on printed pages, or for indexes.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_flexible_boxes" title="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_flexible_boxes">CSS flexible boxes layouts</a></dt> + <dd>This new layout allow you to give boxes flexibility, allowing them to be resized smoothly. It is a powerful way to describe complex interfaces.</dd> +</dl> + +<p> </p> diff --git a/files/de/web/css/type_selectors/index.html b/files/de/web/css/type_selectors/index.html new file mode 100644 index 0000000000..9c86b0e07d --- /dev/null +++ b/files/de/web/css/type_selectors/index.html @@ -0,0 +1,78 @@ +--- +title: Typselektoren +slug: Web/CSS/Type_selectors +tags: + - Anfänger + - CSS + - CSS Referenz + - Selektoren +translation_of: Web/CSS/Type_selectors +--- +<div>{{CSSRef("Selectors")}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>CSS Typselektoren matchen Elemente über den Knotennamen. Alleine verwendet markiert ein Typselektor für einen bestimmten Knotennamen daher alle Elemente dieses Typs - d. h. mit diesem Knotennamen - innerhalb des Dokuments.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox">element { <em>Stileigenschaften</em> } +</pre> + +<h2 id="Beispiel">Beispiel</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">span { + background-color: DodgerBlue; + color: #ffffff; +} +</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><span>Hier ist ein span mit Text.</span> +<p>Hier ist ein p mit Text.</p> +</pre> + +<h3 id="Ergebnis">Ergebnis</h3> + +<p>{{EmbedLiveSample('Beispiel', 200, 100)}}</p> + +<h2 id="Spezifikationen">Spezifikationen</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('CSS4 Selectors', '#type-selectors', 'Typselektoren')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Keine Änderung</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#type-selectors', 'Typselektoren')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Keine Änderung</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#type-selectors', 'Typselektoren')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#basic-concepts', 'Typselektoren')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.selectors.type")}} diff --git a/files/de/web/css/unicode-bidi/index.html b/files/de/web/css/unicode-bidi/index.html new file mode 100644 index 0000000000..b8853c8add --- /dev/null +++ b/files/de/web/css/unicode-bidi/index.html @@ -0,0 +1,102 @@ +--- +title: unicode-bidi +slug: Web/CSS/unicode-bidi +tags: + - CSS + - CSS Eigenschaft + - NeedsLiveSample + - Reference + - Referenz +translation_of: Web/CSS/unicode-bidi +--- +<div>{{CSSRef}}</div> + +<h2 id="Zusammenfassung">Zusammenfassung</h2> + +<p>Die <strong><code>unicode-bidi</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> Eigenschaft zusammen mit der {{Cssxref("direction")}} Eigenschaft hat damit zu tun wie bidirektionaler Text in einem Dokument behandelt wird. Zum Beispiel, wenn ein Textblock sowohl Text der von links nach recht als auch von rechts nach links läuft enthält, dann entscheidet das System mithilfe eines komplexen Unicode Algorithmus wie es den Text darstellen soll. Diese Eigenschaft überschreibt den Algorithmus und gibt dem Entwickler die Kontrolle über die Textdarstellung.</p> + +<p>Die <code>unicode-bidi</code> und{{cssxref("direction")}} Eigenschaften sind die einzigen zwei Werte welche nicht von der {{cssxref("all")}} Kurzform betroffen sind.</p> + +<div class="note"><strong>Hinweis:</strong> Die Eigenschaft ist für DTD Designer gedacht. Web Designer und ähnliche sollten es nicht überschreiben.</div> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">/* Schlüsselwerte */ +unicode-bidi: normal; +unicode-bidi: embed; +unicode-bidi: isolate; +unicode-bidi: bidi-override; +unicode-bidi: isolate-override; +unicode-bidi: plaintext; + +/* Globale Werte*/ +unicode-bidi: inherit; +unicode-bidi: initial; +unicode-bidi: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code>normal</code></dt> + <dd>The element does not offer a additional level of embedding with respect to the bidirectional algorithm. For inline elements implicit reordering works across element boundaries.</dd> + <dt><code>embed</code></dt> + <dd>If the element is inline, this value opens an additional level of embedding with respect to the bidirectional algorithm. The direction of this embedding level is given by the {{Cssxref("direction")}} property.</dd> + <dt><code>bidi-override</code></dt> + <dd>For inline elements this creates an override. For block container elements this creates an override for inline-level descendants not within another block container element. This means that inside the element, reordering is strictly in sequence according to the {{Cssxref("direction")}} property; the implicit part of the bidirectional algorithm is ignored.</dd> + <dt><code>isolate</code> {{experimental_inline}}</dt> + <dd>This keyword indicates that the element's container directionality should be calculated without considering the content of this element. The element is therefore <em>isolated</em> from its siblings. When applying its bidirectional-resolution algorithm, its container element treats it as one or several <code>U+FFFC Object Replacement Character</code>, i.e. like an image.</dd> + <dt><code>isolate-override</code>{{experimental_inline}}</dt> + <dd>This keyword applies the isolation behavior of the <code>isolate</code> keyword to the surrounding content and the override behavior of the <code>bidi-override</code> keyword to the inner content.</dd> + <dt><code>plaintext</code>{{experimental_inline}}</dt> + <dd>This keyword makes the elements directionality calculated without considering its parent bidirectional state or the value of the {{cssxref("direction")}} property. The directionality is calculated using the P2 and P3 rules of the Unicode Bidirectional Algorithm.<br> + This value allows to display data which has already formatted using a tool following the Unicode Bidirectional Algorithm.</dd> +</dl> + +<h3 id="Formaler_Syntax">Formaler Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush: css">.bible-quote { + direction: rtl; + unicode-bidi: embed; +} +</pre> + +<h2 id="Spezifikation">Spezifikation</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Writing Modes', '#unicode-bidi', 'unicode-bidi')}}</td> + <td>{{Spec2('CSS3 Writing Modes')}}</td> + <td>Added <code>plaintext</code>, <code>isolate</code>, and <code>isolate-override</code> keywords</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'visuren.html#propdef-unicode-bidi', 'unicode-bidi')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.properties.unicode-bidi")}} + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{Cssxref("direction")}}</li> +</ul> diff --git a/files/de/web/css/universal_selectors/index.html b/files/de/web/css/universal_selectors/index.html new file mode 100644 index 0000000000..4253374c81 --- /dev/null +++ b/files/de/web/css/universal_selectors/index.html @@ -0,0 +1,80 @@ +--- +title: Universalselektoren +slug: Web/CSS/Universal_selectors +tags: + - Anfänger + - CSS + - CSS Referenz + - Selektoren +translation_of: Web/CSS/Universal_selectors +--- +<div>{{CSSRef("Selectors")}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Ein Sternchen (<code>*</code>) ist der Universalselektor für CSS. Es matcht ein einzelnes Element eines beliebigen Typs. Das Weglassen des Sternchens bei einfachen Selektoren hat denselben Effekt. Zum Beispiel sind <code>*.warning</code> und <code>.warning</code> gleich.</p> + +<p>In CSS 3 kann das Sternchen in Kombination mit Namensräumen verwendet werden:</p> + +<ul> + <li><code>ns|*</code> - matcht alle Elemente im Namensraum ns</li> + <li><code>*|*</code> - matcht alle Elemente</li> + <li><code>|*</code> - matcht alle Elemente ohne einen angegebenen Namensraum</li> +</ul> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush: css">* [lang^=en] { + color: green; +} + +* .warning { + color: red; +} + +* #maincontent { + border: 1px solid blue; +} +</pre> + +<pre class="brush: html"><p class="warning"> + <span lang="en-us">Ein grüner &lt;span&gt;</span> in einem roten Absatz. +</p> +<p id="maincontent" lang="en-gb"> + <span class="warning">Ein roter &lt;span&gt;</span> in einem grünen Absatz. +</p></pre> + +<p>{{EmbedLiveSample('Beispiel', 250, 100)}}</p> + +<h2 id="Spezifikationen">Spezifikationen</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('CSS4 Selectors', '#the-universal-selector', 'Universalselektor')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Keine Änderung</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#universal-selector', 'Universalselektor')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Definiert das Verhalten in Bezug auf Namensräume weist darauf hin, dass das Weglassen des Selektors innerhalb von Pseudoelementen erlaubt ist</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#universal-selector', 'Universalselektor')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.selectors.universal")}} diff --git a/files/de/web/css/unset/index.html b/files/de/web/css/unset/index.html new file mode 100644 index 0000000000..0e1ac7bc76 --- /dev/null +++ b/files/de/web/css/unset/index.html @@ -0,0 +1,64 @@ +--- +title: unset +slug: Web/CSS/unset +tags: + - CSS + - CSS Cascade + - Layout + - NeedsLiveSample + - Referenz + - Schlüsselwort + - Web +translation_of: Web/CSS/unset +--- +<div>{{CSSRef}}</div> + +<p>Das <code>unset</code> <a href="/de/docs/Web/CSS">CSS</a> Schlüsselwort ist eine Kombination der Schlüsselwörter {{cssxref("initial")}} und {{cssxref("inherit")}}. Wie diese beiden anderen CSS-weiten Schlüsselwörter kann es auf alle CSS-Eigenschaften angewendet werden, einschließlich des CSS-Shorthands {{cssxref("all")}}. Dieses Schlüsselwort setzt die Eigenschaft auf ihren geerbten Wert zurück, falls er vom Elternelement geerbt wurde, oder andernfalls auf den ursprünglichen Wert. Mit anderen Worten, es verhält sich im ersten Fall wie das <code>inherit</code> Schlüsselwort und wie das <code>initial</code> Schlüsselwort im zweiten Fall.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush: css">/* Kopfzeilen erhalten einen grünen Rand */ +h2 { + border: medium solid green; +} + +/* Aber die in der Seitenleiste verwenden den Wert der "color" Eigenschaft (Initialwert) */ +#sidebar h2 { + border-color: unset; +} +</pre> + +<pre class="brush: css"><p style="color: red;"> + Dieser Text ist rot. + <em style="color:initial"> + Dieser Text ist in der Initialfarbe gehalten, d. h. schwarz + </em> + Dieser Text ist wieder rot. +</p> </pre> + +<h2 id="Spezifikationen">Spezifikationen</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 Cascade', '#unset', 'unset') }}</td> + <td>{{ Spec2('CSS3 Cascade') }}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +{{Compat("css.types.global_keywords.unset")}} + +<h2 id="Siehe_auch">Siehe auch</h2> + +<p>Die CSS-weiten Eigenschaftswerte: {{cssxref("initial")}}, {{cssxref("inherit")}} und {{cssxref("unset")}}.</p> diff --git a/files/de/web/css/url/index.html b/files/de/web/css/url/index.html new file mode 100644 index 0000000000..52f9bad5e5 --- /dev/null +++ b/files/de/web/css/url/index.html @@ -0,0 +1,84 @@ +--- +title: <url> +slug: Web/CSS/url +tags: + - CSS + - Layout + - Referenz + - URI + - URL +translation_of: Web/CSS/url +--- +<div>{{ CssRef() }}</div> + +<p>Der <strong><code><url></code></strong> <a href="/de/docs/Web/CSS" title="CSS">CSS</a>-<a href="/de/docs/Web/CSS/CSS_Types">Datentyp</a> bezeichnet einen Zeiger auf eine Ressource, z.B. ein Bild oder eine Schriftart. URLs können in zahlreichen CSS Eigenschaften verwendet werden, wie etwa {{ Cssxref("background-image") }}, {{ Cssxref("cursor") }}, und {{ cssxref("list-style") }}.</p> + +<div class="note"> +<p><strong>URI oder URL?</strong> Es gibt einen Unterschied zwischen einem <a class="external" href="https://de.wikipedia.org/wiki/Uniform_Resource_Identifier" title="https://de.wikipedia.org/wiki/Uniform_Resource_Identifier">URI</a> und einem <a class="external" href="https://de.wikipedia.org/wiki/Uniform_Resource_Locator" title="https://de.wikipedia.org/wiki/Uniform_Resource_Locator">URL</a>. Ein URI identifiziert einfach eine Ressource. Ein URL ist eine Art von URI und beschreibt den <em>Speicherort</em> einer Ressource. Ein URI kann entweder ein URL oder ein Name (<a class="external" href="https://de.wikipedia.org/wiki/Uniform_Resource_Name" title="https://de.wikipedia.org/wiki/Uniform_Resource_Name">URN</a>) einer Ressource sein.</p> + +<p>In CSS1 die funktionale Notation <code>url()</code> beschrieb nur echte URLs. In CSS2.1 die Definition von <code>url()</code> wurde erweitert, um alle URIs zu beschreiben, ob URL oder URN. Verwirrenderweise bedeutete es, dass <code>url()</code> verwendet werden konnte, um ein <code><uri></code> CSS-Datentyp zu erstellen. Diese Änderung war nicht nur ungünstig, sondern auch überflüßig, weil die URNs so oft wie nie in CSS verwendet werden. Um die Verwirrung zu vermindern, kehrte CSS3 zu der engeren Anfangsdefinition. Jetzt bezeichnet <code>url()</code> nur echte <code><url></code>s.</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<p>Der <code><url></code> Datentyp wird mit der funktionalen Notation <code><a id="The_url()_functional_notation" name="The_url()_functional_notation">url()</a></code> spezifiziert. Es kann sowohl ohne Anführungszeichen als auch mit einfachen oder doppelten Anführungszeichen geschrieben werden. Relative URLs sind erlaubt und sind relativ zum URL des Stylesheets (nicht zum URL der Webseite).</p> + +<pre class="syntaxbox"><a_css_property>: url("http://mysite.example.com/mycursor.png") +<a_css_property>: url('http://mysite.example.com/mycursor.png') +<a_css_property>: url(http://mysite.example.com/mycursor.png) +</pre> + +<div class="note"> +<p><strong>Hinweis:</strong> Steuerzeichen über <span id="summary_alias_container"><span id="short_desc_nonedit_display">0x7e sind ab Firefox 15 </span></span><span><span>in URLs ohne Anführungszeichen nicht erlaubt. Sieh</span></span> {{Bug(752230)}} für mehr Details.</p> +</div> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush: css">.topbanner { + background: url("topbanner.png") #00D no-repeat fixed; +} +</pre> + +<pre class="brush: css">ul { + list-style: square url(http://www.example.com/redball.png); +} +</pre> + +<h2 id="Specifications" name="Specifications">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('CSS3 Values', '#urls', '<url>') }}</td> + <td>{{ Spec2('CSS3 Values') }}</td> + <td>Keine wichtige Änderungen seit CSS2.1.</td> + </tr> + <tr> + <td>{{ Specname('CSS2.1', 'syndata.html#uri', '<uri>') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Keine wichtige Änderungen seit CSS1.</td> + </tr> + <tr> + <td>{{ SpecName('CSS1', '#url', '<url>') }}</td> + <td>{{ Spec2('CSS1') }}</td> + <td>Erste Definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browserkompatibilität</h2> + +<p> </p> + +<div class="hidden">Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten erzeugt. 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 schicken Sie uns ein Pull-Request.</div> + +<p>{{Compat("css.types.url")}}</p> + +<p> </p> diff --git a/files/de/web/css/vererbung/index.html b/files/de/web/css/vererbung/index.html new file mode 100644 index 0000000000..f5d4a097b2 --- /dev/null +++ b/files/de/web/css/vererbung/index.html @@ -0,0 +1,33 @@ +--- +title: Vererbung +slug: Web/CSS/Vererbung +tags: + - CSS + - Guide + - Web +translation_of: Web/CSS/inheritance +--- +<h2 id="Übersicht">Übersicht</h2> +<p>Die Übersicht jeder <a href="/de/docs/Web/CSS/CSS_Referenz" title="en/CSS_Reference">CSS Eigenschaft Definition</a> gibt an, ob jene Eigenschaft standardmäßig vererbt ist ("Vererbt: Ja") oder nicht ("Vererbt: Nein"). Dies steuert, was passiert, falls kein Wert für eine Eigenschaft eines Elements angegeben wird.</p> +<h2 id="Vererbte_Eigenschaften">Vererbte Eigenschaften</h2> +<p>Falls kein Wert für eine <strong>vererbte Eigenschaft</strong> für ein Element angegeben wurde, erhält das Element den <a href="/de/docs/Web/CSS/Berechneter_Wert" title="en/CSS/computed_value">berechneten Wert</a> dieser Eigenschaft des Elternelements. Nur das Wurzelelement des Dokuments erhält den in der Übersicht angegebenen <a href="/de/docs/Web/CSS/Initialwert" title="en/CSS/initial_value">Initialwert</a>.</p> +<p>Ein typisches Beispiel für eine vererbte Eigenschaft ist die {{ Cssxref("color") }} Eigenschaft. Für die gegebene Stilregel:</p> +<pre class="brush: css">p { color: green }</pre> +<p>und den Markup:</p> +<pre class="brush: html"><p>Dieser Absatz beinhaltet <em>hervorgehobenen Text</em>.</p></pre> +<p>werden die Wörter "hervorgehobenen Text" in grün erscheinen, da das <code>em</code> Element den Wert der {{ Cssxref("color") }} Eigenschaft vom <code>p</code> Element erbt. Es erhält <em>nicht</em> den Initialwert der Eigenschaft (welcher die Farbe des Wurzelelements ist, falls die Seite keine Farbe definiert).</p> +<h2 id="Nicht_vererbte_Eigenschaften">Nicht vererbte Eigenschaften</h2> +<p>Falls kein Wert für eine <strong>nicht vererbte Eigenschaft</strong> (in Mozilla Code manchmal auch <strong>rücksetzende Eigenschaft</strong> genannt) für ein Element angegeben wurde, erhält das Element den <a href="/de/docs/Web/CSS/Initialwert" title="en/CSS/initial_value">Initialwert</a> dieser Eigenschaft (wie in der Übersicht der Eigenschaft angegeben).</p> +<p>Ein typisches Beispiel für eine nicht vererbte Eigenschaft ist die {{ Cssxref("border") }} Eigenschaft. Für die gegebene Stilregel:</p> +<pre class="brush: css"> p { border: medium solid }</pre> +<p>und den Markup:</p> +<pre class="brush: html"> <p>Dieser Absatz beinhaltet <em>hervorgehobenen Text</em>.</p></pre> +<p>werden die Wörter "hervorgehobenen Text" keinen Rahmen haben (da der Initialwert von {{ Cssxref("border-style") }} <code>none</code> ist).</p> +<h2 id="Hinweise">Hinweise</h2> +<p>Das {{ Cssxref("inherit") }} Schlüsselwort erlaubt es Autoren, die Vererbung explizit anzugeben. Dies funktioniert sowohl für vererbte als auch nicht vererbte Eigenschaften.</p> +<h2 id="Siehe_auch">Siehe auch</h2> +<ul> + <li><a href="/de/docs/Web/CSS/CSS_Referenz" title="CSS Reference">CSS Referenz</a></li> + <li>{{ CSS_key_concepts() }}</li> + <li>{{ Cssxref("inherit") }}</li> +</ul> diff --git a/files/de/web/css/vertical-align/index.html b/files/de/web/css/vertical-align/index.html new file mode 100644 index 0000000000..2a6779dbee --- /dev/null +++ b/files/de/web/css/vertical-align/index.html @@ -0,0 +1,240 @@ +--- +title: vertical-align +slug: Web/CSS/vertical-align +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/vertical-align +--- +<div>{{CSSRef}}</div> + +<p>Die <strong><code>vertical-align</code></strong> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft bestimmt die vertikale Ausrichtung in inline Elementen oder in Tabellenzellen.</p> + +<div>{{EmbedInteractiveExample("pages/css/vertical-align.html")}}</div> + +<p>Die vertical-align Eigenschaft kann in zwei Anwendungsfällen genutzt werden:</p> + +<ul> + <li>Um die Box eines inline-Elements vertikal in der beinhaltenden Box auszurichten. Beispielsweise kann sie eingesetzt werden um die ein {{HTMLElement("img")}} in einer Textzeile vertikal auszurichten:</li> +</ul> + +<div id="vertical-align-inline"> +<pre class="hidden brush: html"><p> +top:<img style="vertical-align:top" src="https://mdn.mozillademos.org/files/15189/star.png"/> +middle:<img style="vertical-align:middle" src="https://mdn.mozillademos.org/files/15189/star.png"/> +bottom:<img style="vertical-align:bottom" src="https://mdn.mozillademos.org/files/15189/star.png"/> +super:<img style="vertical-align:super" src="https://mdn.mozillademos.org/files/15189/star.png"/> +sub:<img style="vertical-align:sub" src="https://mdn.mozillademos.org/files/15189/star.png"/> +</p> +<p> +text-top:<img style="vertical-align:text-top" src="https://mdn.mozillademos.org/files/15189/star.png"/> +text-bottom:<img style="vertical-align:text-bottom" src="https://mdn.mozillademos.org/files/15189/star.png"/> +0.2em:<img style="vertical-align:0.2em" src="https://mdn.mozillademos.org/files/15189/star.png"/> +-1em:<img style="vertical-align:-1em" src="https://mdn.mozillademos.org/files/15189/star.png"/> +20%:<img style="vertical-align:20%" src="https://mdn.mozillademos.org/files/15189/star.png"/> +-100%:<img style="vertical-align:-100%" src="https://mdn.mozillademos.org/files/15189/star.png"/> +</p> + +</pre> + +<pre class="hidden brush: css">#* { + box-sizing: border-box; +} + +img { + margin-right: 0.5em; +} + +p { + height: 3em; + padding: 0 .5em; + font-family: monospace; + text-decoration: underline overline; + margin-left: auto; + margin-right: auto; + width: 80%; +} +</pre> +</div> + +<p>{{EmbedLiveSample("vertical-align-inline", 1200, 120, "", "", "example-outcome-frame")}}</p> + +<ul> + <li>Um den Inhalt einer Zelle vertikal in einer Tabelle auszurichten:</li> +</ul> + +<div id="vertical-align-table"> +<pre class="hidden brush: html"><table> + <tr> + <td style="vertical-align: baseline">baseline</td> + <td style="vertical-align: top">top</td> + <td style="vertical-align: middle">middle</td> + <td style="vertical-align: bottom">bottom</td> + <td> + <p>There is a theory which states that if ever anyone discovers exactly what the Universe is for and why it is here, it will instantly disappear and be replaced by something even more bizarre and inexplicable.</p> +<p>There is another theory which states that this has already happened.</p> + </td> + </tr> +</table> + +</pre> + +<pre class="hidden brush: css">table { + margin-left: auto; + margin-right: auto; + width: 80%; +} + +table, th, td { + border: 1px solid black; +} + +td { + padding: 0.5em; + font-family: monospace; +} +</pre> +</div> + +<p>{{EmbedLiveSample("vertical-align-table", 1200, 210, "", "", "example-outcome-frame")}}</p> + +<p>Beachte, dass sich <code>vertical-align</code> nur auf inline- und Tabellenzellenelemente bezieht: es kann nicht eingesetzt werden um <a href="/de/docs/Web/HTML/Block-level_elemente">Block-level Elemente</a> auszurichten.</p> + +<h2 id="Syntax">Syntax</h2> + +<p> </p> + +<pre class="brush: css no-line-numbers language-css"><code class="language-css"><span class="comment token">/* Schlüsselwörter */</span> +<span class="property token">vertical-align</span><span class="punctuation token">:</span> baseline<span class="punctuation token">;</span> +<span class="property token">vertical-align</span><span class="punctuation token">:</span> sub<span class="punctuation token">;</span> +<span class="property token">vertical-align</span><span class="punctuation token">:</span> super<span class="punctuation token">;</span> +<span class="property token">vertical-align</span><span class="punctuation token">:</span> text-top<span class="punctuation token">;</span> +<span class="property token">vertical-align</span><span class="punctuation token">:</span> text-bottom<span class="punctuation token">;</span> +<span class="property token">vertical-align</span><span class="punctuation token">:</span> middle<span class="punctuation token">;</span> +<span class="property token">vertical-align</span><span class="punctuation token">:</span> top<span class="punctuation token">;</span> +<span class="property token">vertical-align</span><span class="punctuation token">:</span> bottom<span class="punctuation token">;</span> + +<span class="comment token">/* <length> Werte */</span> +<span class="property token">vertical-align</span><span class="punctuation token">:</span> <span class="number token">10</span>em<span class="punctuation token">;</span> +<span class="property token">vertical-align</span><span class="punctuation token">:</span> <span class="number token">4</span>px<span class="punctuation token">;</span> + +<span class="comment token">/* <percentage> Werte */</span> +<span class="property token">vertical-align</span><span class="punctuation token">:</span> <span class="number token">20%</span><span class="punctuation token">;</span> + +<span class="comment token">/* Globale Werte */</span> +<span class="property token">vertical-align</span><span class="punctuation token">:</span> inherit<span class="punctuation token">;</span> +<span class="property token">vertical-align</span><span class="punctuation token">:</span> initial<span class="punctuation token">;</span> +<span class="property token">vertical-align</span><span class="punctuation token">:</span> unset<span class="punctuation token">;</span></code></pre> + +<p>Bei Elementen, die keine Grundlinie besitzen, beziehen sich die Angaben auf die untere äußere Kante (<em>bottom margin edge</em>).</p> + +<h3 id="Werte_für_inline-Elemente">Werte für inline-Elemente</h3> + +<dl> + <dt>baseline</dt> + <dd>Die Grundlinie des Elements liegt auf der Grundlinie des Elternelements.</dd> + <dt>sub</dt> + <dd>Das Element ist tiefgestellt.</dd> + <dt>super</dt> + <dd>Das Element ist hochgestellt.</dd> + <dt>text-top</dt> + <dd>Die Oberkante des Elements liegt auf der Oberkante der Schrift des Elternelements.</dd> + <dt>text-bottom</dt> + <dd>Die Unterkante des Elements liegt auf der Unterkante der Schrift des Elternelements.</dd> + <dt>middle</dt> + <dd>Die Mitte des Elements liegt auf der Mitte der Kleinbuchstaben des Elternelements.</dd> + <dt>top</dt> + <dd>Die Oberkante des Elements liegt auf der Oberkante des Elternelements.</dd> + <dt>bottom</dt> + <dd>Die Unterkante des Elements liegt auf der Unterkante des Elternelements.</dd> + <dt><Prozentzahl></dt> + <dd>Die Unterkante des Elements liegt um einen <a href="/de/CSS/Einheiten#Prozent">prozentualen Wert</a> höher als die Unterkante des Elternelements. Die Anteile beziehen sich auf den Wert der <a href="/de/CSS/line-height" title="de/CSS/line-height"><code>line-height</code></a> Eigenschaft.</dd> + <dt><Länge></dt> + <dd>Die Unterkante des Elements liegt um einen <a href="/de/CSS/Einheiten#L.c3.a4ngen">bestimmten Wert</a> höher als die Unterkante des Elternelements. Negative Werte sind erlaubt.</dd> + <dt>inherit</dt> + <dd>Der Wert des Elternelements wird geerbt.</dd> +</dl> + +<h3 id="Werte_für_Tabellenzellen">Werte für Tabellenzellen</h3> + +<dl> + <dt>baseline, sub, super, text-top, text-bottom, <Prozentzahl> und <Länge></dt> + <dd>Die Grundlinie des Elements liegt auf der Grundlinie des Elternelements</dd> + <dt>top</dt> + <dd>Die Oberkante der Textzeile liegt auf der Oberkante der Tabellenzelle.</dd> + <dt>middle</dt> + <dd>Die vertikale Mitte der Textzeile liegt auf der Mitte der Tabellenzelle.</dd> + <dt>bottom</dt> + <dd>Die Unterkante der Textzeile liegt auf der Unterkante der Tabellenzelle.</dd> + <dt>inherit</dt> + <dd>Der Wert des Elternelements wird geerbt.</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiel">Beispiel</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div>Ein <img src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> Bild mit default Ausrichtung.</div> +<div>Ein <img class="top" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> Bild mit text-top Ausrichtung.</div> +<div>Ein <img class="bottom" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> Bild mit text-bottom Ausrichtung.</div> +<div>Ein <img class="middle" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> Bild mit middle Ausrichtung.</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">img.top { vertical-align: text-top; } +img.bottom { vertical-align: text-bottom; } +img.middle { vertical-align: middle; } +</pre> + +<h3 id="Ergebnis">Ergebnis</h3> + +<p>{{EmbedLiveSample("Beispiel")}}</p> + +<h2 id="Spezifikation">Spezifikation</h2> + +<p> </p> + +<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 Transitions', '#animatable-css', 'vertical-align')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Definiert<code>vertical-align</code> als animierbar.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'visudet.html#propdef-vertical-align', 'vertical-align')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Fügt den {{cssxref("<length>")}} Wert hinzu und erlaubt die Anwendung auf Elemente mit <code>table-cell </code>{{cssxref("display")}}-Typ.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#vertical-align', 'vertical-align')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Einführung.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<p>{{Compat("css.properties.vertical-align")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{Cssxref("line-height")}}</li> + <li>{{Cssxref("text-align")}}</li> +</ul> diff --git a/files/de/web/css/visibility/index.html b/files/de/web/css/visibility/index.html new file mode 100644 index 0000000000..f724ee51bd --- /dev/null +++ b/files/de/web/css/visibility/index.html @@ -0,0 +1,99 @@ +--- +title: visibility +slug: Web/CSS/visibility +tags: + - CSS + - CSS Eigenschaft + - CSS Positionierung + - Layout + - NeedsLiveSample + - Referenz + - Web +translation_of: Web/CSS/visibility +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>visibility</code> Eigenschaft legt fest, ob ein Element sichtbar ist.</p> + +<p>Sie kann dazu verwendet werden, ein Element zu verstecken, aber den Raum, den es eingenommen hätte zu belassen. Sie kann auch Zeilen oder Spalten einer Tabelle verstecken.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: css">/* Schlüsselwortwerte */ +visibility: visible; +visibility: hidden; +visibility: collapse; + +/* Globale Werte */ +visibility: inherit; +visibility: initial; +visibility: unset;</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code>visible</code></dt> + <dd>Standardwert. Das Element ist sichtbar.</dd> + <dt><code>hidden</code></dt> + <dd>Das Element ist unsichtbar (komplett transparent), es beeinflusst jedoch immernoch das Layout. Kindelemente mit <code>visibility:visible</code> sind sichtbar (funktioniert nicht im IE bis Version 7).</dd> + <dt><code>collapse</code></dt> + <dd>Bei Tabellenzeilen, Spalten und Zeilengruppen wird/werden die Spalte(n) bzw. Zeile(n) entfernt und der Platz, den sie eingenommen hätten, wird entfernt (als ob <code>{{cssxref("display")}}: none;</code> für die Zeile/Spalte der Tabelle angegeben worden wäre). Jedoch wird die Größe der anderen Zeilen und Spalten immer noch so berechnet, als ob die zusammengefallene(n) Zeile(n)/Spalte(n) da wären. Die Funktion ist zum schnellen Entfernen von Tabellenspalten/-zeilen gedacht ohne die Breiten und Höhen jedes Teils der Tabelle neuberechnen zu müssen. Für XUL-Elemente ist die berechnete Größe des Elements immer 0, unabhängig von anderen Styles, die normalerweise die Größe beeinflussen würden. Jedoch werden Außenabstände immer noch berücksichtigt. Bei anderen Elementen ist <code>collapse</code> gleichbedeutend zu <code>hidden</code>.</dd> +</dl> + +<h3 id="Interpolation">Interpolation</h3> + +<p>Sichtbarkeitswerte sind interpolierbar zwischen <em>sichtbar</em> und <em>nicht sichtbar</em>. Einer der Start- oder Endwerte muss daher <code>visible</code> sein, damit eine Interpolation stattfinden kann. Falls einer der Werte <code>visible</code> ist, wird er in einem einzelnen Schritt interpoliert, wobei Werte der Timingfunktion zwischen <code>0</code> und <code>1</code> auf <code>visible</code> und andere Werte der Timingfunktion (welche nur am Start/Ende des Übergangs oder als das Ergebnis aus <code>cubic-bezier()</code> Funktionen mit y-Werten außerhalb von [0, 1]) abgebildet werden.</p> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush: css">p { visibility: hidden; } /* Absätze sind unsichtbar */ +p.showme { visibility: visible; } /* Absätze der Klasse "showme" sind sichtbar */ +tr.col { visibility: collapse; } /* Tabellenzeilen mit der Klasse "col" fallen zusammen. */ +</pre> + +<h3 id="Hinweise">Hinweise</h3> + +<p>Die Unterstützung von <code>visibility:collapse</code> fehlt oder ist teilweise fehlerhaft in manchen modernen Browsern. In einigen Fällen wird es bei Elementen mit Ausnahme von Tabellenzeilen und -spalten nicht korrekt interpretiert.</p> + +<p><code>visibility:collapse</code> kann die Darstellung einer Tabelle ändern, falls die Tabelle verschachtelte Tabellen in den zusammengefallenen Zellen beinhaltet, sofern <code>visibility:visible</code> explizit bei den Tabellen angegeben ist.</p> + +<h2 id="Spezifikationen">Spezifikationen</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 Box', '#the-visibility-property', 'visibility')}}</td> + <td>{{Spec2('CSS3 Box')}}</td> + <td>Keine Änderungen</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'visibility')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Definiert <code>visibility</code> als animierbar.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'visufx.html#visibility', 'visibility')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +{{Compat("css.properties.visibility")}} diff --git a/files/de/web/css/webkit_extensions/index.html b/files/de/web/css/webkit_extensions/index.html new file mode 100644 index 0000000000..f6f60969cb --- /dev/null +++ b/files/de/web/css/webkit_extensions/index.html @@ -0,0 +1,271 @@ +--- +title: WebKit extensions +slug: Web/CSS/WebKit_Extensions +translation_of: Web/CSS/WebKit_Extensions +--- +<p>{{ CSSRef() }}</p> +<p>WebKit unterstützt eine Reihe von <a href="/de/CSS" title="en/CSS">CSS</a> Erweiterungen, welche mit dem Präfix<code> -webkit</code> versehen sind. Alle Erweiterungen mit dem Präfix <code>-webkit</code> funktionieren auch mit dem Präfix <code>-apple</code>.</p> +<p>Einige dieser Eigenschaften sind für eine Aufnahme in die CSS Spezifikation vorgeschlagen. Es kann allerdings Abweichungen von der im Standard definierten Eigenschaft und der durch <code>-webkit-</code> eingeführten Eigenschaften geben.</p> +<h2 id="Standardisierte_Eigenschaften_mit_Präfix">Standardisierte Eigenschaften mit Präfix</h2> +<div style="-moz-column-width: 20em; -webkit-columns: 20em; columns: 20em;"> + <span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em;">A</span> + <ul style="margin-left: 0; padding-left: 0; list-style-type: none;"> + <li>{{ Cssxref("-webkit-animation") }}</li> + <li>{{ Cssxref("-webkit-animation-delay") }}</li> + <li>{{ Cssxref("-webkit-animation-direction") }}</li> + <li>{{ Cssxref("-webkit-animation-duration") }}</li> + <li>{{ Cssxref("-webkit-animation-fill-mode") }}</li> + <li>{{ Cssxref("-webkit-animation-iteration-count") }}</li> + <li>{{ Cssxref("-webkit-animation-name") }}</li> + <li>{{ Cssxref("-webkit-animation-play-state") }}</li> + <li>{{ Cssxref("-webkit-animation-timing-function") }}</li> + <li>{{ Cssxref("-webkit-appearance") }}</li> + </ul> + <span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em;">B</span> + <ul style="margin-left: 0; padding-left: 0; list-style-type: none;"> + <li>{{ Cssxref("-webkit-backface-visibility") }}</li> + <li>{{ Cssxref("-webkit-border-image") }}</li> + </ul> + <span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em;">C D E</span> + <ul style="margin-left: 0; padding-left: 0; list-style-type: none;"> + <li>{{ Cssxref("-webkit-column-count") }}</li> + <li>{{ Cssxref("-webkit-column-gap") }}</li> + <li>{{ Cssxref("-webkit-column-width") }}</li> + <li>{{ Cssxref("-webkit-column-rule") }}</li> + <li>{{ Cssxref("-webkit-column-rule-width") }}</li> + <li>{{ Cssxref("-webkit-column-rule-style") }}</li> + <li>{{ Cssxref("-webkit-column-rule-color") }}</li> + <li>{{ Cssxref("-webkit-columns") }}</li> + <li>{{ Cssxref("-webkit-column-span") }}</li> + </ul> + <span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em;">F</span><br> + <ul style="margin-left: 0; padding-left: 0; list-style-type: none;"> + <li>{{ Cssxref("-webkit-font-feature-settings") }}</li> + <li>{{ Cssxref("-webkit-font-kerning") }}</li> + <li>{{ Cssxref("-webkit-font-size-delta") }}</li> + <li>{{ Cssxref("-webkit-font-variant-ligatures") }}</li> + </ul> + <span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em;">G</span><br> + <ul style="margin-left: 0; padding-left: 0; list-style-type: none;"> + <li>{{ Cssxref("-webkit-grid-column") }}</li> + <li>{{ Cssxref("-webkit-grid-columns") }}</li> + <li>{{ Cssxref("-webkit-grid-row") }}</li> + <li>{{ Cssxref("-webkit-grid-rows") }}</li> + </ul> + <span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em;">H</span><span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em;">—O</span><br> + <ul style="margin-left: 0; padding-left: 0; list-style-type: none;"> + <li>{{ Cssxref("-webkit-hyphens") }}</li> + </ul> + <span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em;">P</span> + <ul style="margin-left: 0; padding-left: 0; list-style-type: none;"> + <li>{{ Cssxref("-webkit-perspective") }}</li> + <li>{{ Cssxref("-webkit-perspective-origin") }}</li> + </ul> + <p><span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em; line-height: 1.572;">Q—Z</span></p> + <ul style="margin-left: 0; padding-left: 0; list-style-type: none;"> + <li>{{ cssxref("-webkit-region-overflow") }}</li> + <li>{{ Cssxref("-webkit-transform") }}</li> + <li>{{ Cssxref("-webkit-transform-origin") }}</li> + <li>{{ Cssxref("-webkit-transform-style") }}</li> + <li>{{ cssxref("-webkit-transition") }}</li> + <li>{{ cssxref("-webkit-transition-delay") }}</li> + <li>{{ cssxref("-webkit-transition-duration") }}</li> + <li>{{ cssxref("-webkit-transition-property") }}</li> + <li>{{ cssxref("-webkit-transition-timing-function") }}</li> + <li>{{ cssxref("-epub-word-break") }}</li> + <li>{{ cssxref("-epub-writing-mode") }}</li> + </ul> +</div> +<h2 id="Eigenschaften_deren_Präfix_entfernt_wurde">Eigenschaften, deren Präfix entfernt wurde</h2> +<div class="warning"> + <p>Diese Eigenschaften sollten nur noch als Fallbacks genutzt werden.</p> +</div> +<p><span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em;">A B</span></p> +<ul style="margin-left: 0; padding-left: 0; list-style-type: none;"> + <li>{{ Cssxref("-webkit-background-clip") }}</li> + <li>{{ Cssxref("-webkit-background-origin") }}</li> + <li>{{ Cssxref("-webkit-background-size") }}</li> + <li>{{ Cssxref("-webkit-border-bottom-left-radius") }}</li> + <li>{{ Cssxref("-webkit-border-bottom-right-radius") }}</li> + <li>{{ Cssxref("-webkit-border-radius") }}</li> + <li>{{ Cssxref("-webkit-border-top-left-radius") }}</li> + <li>{{ Cssxref("-webkit-border-top-right-radius") }}</li> + <li>{{ Cssxref("-webkit-box-sizing") }}</li> + <li>{{ Cssxref("-epub-caption-side") }}</li> + <li>{{ Cssxref("-webkit-opacity") }}</li> + <li>{{ Cssxref("-epub-text-transform") }}</li> +</ul> +<h2 id="Unstandardisierte_Eigenschaften_mit_Präfix">Unstandardisierte Eigenschaften mit Präfix</h2> +<div class="warning"> + <p>Diese Eigenschaften sind nicht für den Einsatz auf gebräuchlichen Webseiten gedacht.</p> +</div> +<div style="-moz-column-width: 20em; -webkit-columns: 20em; columns: 20em;"> + <p><span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em;">A</span></p> + <ul style="margin-left: 0; padding-left: 0; list-style-type: none;"> + <li>{{ Cssxref("-webkit-aspect-ratio") }}</li> + <li><span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em;">B</span></li> + <li>{{ Cssxref("-webkit-background-composite") }}</li> + <li>{{ Cssxref("background-origin-x") }} (unprefixed!)</li> + <li>{{ Cssxref("background-origin-y") }} (unprefixed!)</li> + <li>{{ Cssxref("-webkit-border-after") }}</li> + <li>{{ Cssxref("-webkit-border-after-color") }}</li> + <li>{{ Cssxref("-webkit-border-after-style") }}</li> + <li>{{ Cssxref("-webkit-border-after-width") }}</li> + <li>{{ Cssxref("-webkit-border-before") }}</li> + <li>{{ Cssxref("-webkit-border-before-color") }}</li> + <li>{{ Cssxref("-webkit-border-before-style") }}</li> + <li>{{ Cssxref("-webkit-border-before-width") }}</li> + <li>{{ Cssxref("-webkit-border-end") }}</li> + <li>{{ Cssxref("-webkit-border-end-color") }}</li> + <li>{{ Cssxref("-webkit-border-end-style") }}</li> + <li>{{ Cssxref("-webkit-border-end-width") }}</li> + <li>{{ Cssxref("-webkit-border-fit") }}</li> + <li>{{ Cssxref("-webkit-border-horizontal-spacing") }}</li> + <li>{{ Cssxref("-webkit-border-start") }}</li> + <li>{{ Cssxref("-webkit-border-start-color") }}</li> + <li>{{ Cssxref("-webkit-border-start-style") }}</li> + <li>{{ Cssxref("-webkit-border-start-width") }}{{ Cssxref("-webkit-border-vertical-spacing") }}</li> + <li>{{ Cssxref("-webkit-box-align") }}</li> + <li>{{ Cssxref("-webkit-box-direction") }}</li> + <li>{{ Cssxref("-webkit-box-flex") }}</li> + <li>{{ Cssxref("-webkit-box-flex-group") }}</li> + <li>{{ Cssxref("-webkit-box-lines") }}</li> + <li>{{ Cssxref("-webkit-box-ordinal-groups") }}</li> + <li>{{ Cssxref("-webkit-box-orient") }}</li> + <li>{{ cssxref("-webkit-box-pack") }}</li> + <li>{{ Cssxref("-webkit-box-reflect") }}</li> + <li>{{ Cssxref("-webkit-box-shadow") }}</li> + </ul> + <p><span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em;">C</span></p> + <ul style="margin-left: 0; padding-left: 0; list-style-type: none;"> + <li>{{ Cssxref("-webkit-column-axis") }}</li> + <li>{{ Cssxref("-webkit-column-break-after") }}</li> + <li>{{ Cssxref("-webkit-column-break-before") }}</li> + <li>{{ Cssxref("-webkit-column-break-inside") }}</li> + <li><span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em;">D</span></li> + <li>{{ Cssxref("-webkit-dashboard-region") }}</li> + <li><span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em;">E—G</span></li> + <li>{{ Cssxref("-webkit-filter") }}</li> + <li>{{ Cssxref("-webkit-font-smoothing") }}</li> + </ul> + <p><span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em;">H</span></p> + <ul style="margin-left: 0; padding-left: 0; list-style-type: none;"> + <li>{{ Cssxref("-webkit-highlight") }}</li> + <li>{{ Cssxref("-webkit-hyphenate-charset") }}</li> + <li>{{ Cssxref("-webkit-hyphenate-limit-after") }}</li> + <li>{{ Cssxref("-webkit-hyphenate-limit-before") }}</li> + <li>{{ Cssxref("-webkit-hyphenate-limit-lines") }}</li> + </ul> + <p><span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em;">I—L</span></p> + <ul style="margin-left: 0; padding-left: 0; list-style-type: none;"> + <li>{{ Cssxref("-webkit-line-align") }}</li> + <li>{{ Cssxref("-webkit-line-box-contain") }}</li> + <li>{{ Cssxref("-webkit-line-break") }}</li> + <li>{{ Cssxref("-webkit-line-clamp") }}</li> + <li>{{ Cssxref("-webkit-line-grid") }}</li> + <li>{{ Cssxref("-webkit-line-snap") }}</li> + <li>{{ Cssxref("-webkit-locale") }}</li> + <li>{{ Cssxref("-webkit-logical-height") }}</li> + <li>{{ Cssxref("-webkit-logical-width") }}</li> + </ul> + <p><span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em;">M</span></p> + <ul style="margin-left: 0; padding-left: 0; list-style-type: none;"> + <li>{{ Cssxref("-webkit-margin-after") }}</li> + <li>{{ Cssxref("-webkit-margin-after-collapse") }}</li> + <li>{{ Cssxref("-webkit-margin-before") }}</li> + <li>{{ Cssxref("-webkit-margin-before-collapse") }}</li> + <li>{{ Cssxref("-webkit-margin-bottom-collapse") }}</li> + <li>{{ Cssxref("-webkit-margin-collapse") }}</li> + <li>{{ Cssxref("-webkit-margin-end") }}</li> + <li>{{ Cssxref("-webkit-margin-start") }}</li> + <li>{{ Cssxref("-webkit-margin-top-collapse") }}</li> + <li>{{ Cssxref("-webkit-marquee") }}</li> + <li>{{ Cssxref("-webkit-marquee-direction") }}</li> + <li>{{ Cssxref("-webkit-marquee-increment") }}</li> + <li>{{ Cssxref("-webkit-marquee-repetition") }}</li> + <li>{{ Cssxref("-webkit-marquee-speed") }}</li> + <li>{{ Cssxref("-webkit-marquee-style") }}</li> + <li>{{ Cssxref("-webkit-mask") }}</li> + <li>{{ Cssxref("-webkit-mask-attachment") }}</li> + <li>{{ Cssxref("-webkit-mask-box-image") }}</li> + <li>{{ Cssxref("-webkit-mask-box-image-outset") }}</li> + <li>{{ Cssxref("-webkit-mask-box-image-repeat") }}</li> + <li>{{ Cssxref("-webkit-mask-box-image-slice") }}</li> + <li>{{ Cssxref("-webkit-mask-boximage-source") }}</li> + <li>{{ Cssxref("-webkit-mask-box-image-width") }}</li> + <li>{{ Cssxref("-webkit-mask-clip") }}</li> + <li>{{ Cssxref("-webkit-mask-composite") }}</li> + <li>{{ Cssxref("-webkit-mask-image") }}</li> + <li>{{ Cssxref("-webkit-mask-origin") }}</li> + <li>{{ Cssxref("-webkit-mask-position") }}</li> + <li>{{ Cssxref("-webkit-mask-position-x") }}</li> + <li>{{ Cssxref("-webkit-mask-position-y") }}</li> + <li>{{ Cssxref("-webkit-mask-repeat") }}</li> + <li>{{ Cssxref("-webkit-mask-repeat-x") }}</li> + <li>{{ Cssxref("-webkit-mask-repeat-y") }}</li> + <li>{{ Cssxref("-webkit-mask-size") }}</li> + <li>{{ Cssxref("-webkit-match-nearest-mail-blockquote-color") }}</li> + <li>{{ Cssxref("-webkit-max-logical-height") }}</li> + <li>{{ Cssxref("-webkit-max-logical-width") }}</li> + <li>{{ Cssxref("-webkit-min-logical-height") }}</li> + <li>{{ Cssxref("-webkit-min-logical-width") }}</li> + </ul> + <p><span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em;">N</span></p> + <ul style="margin-left: 0; padding-left: 0; list-style-type: none;"> + <li>{{ Cssxref("-webkit-nbsp-mode") }}</li> + </ul> + <p><span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em;">O</span></p> + <ul style="margin-left: 0; padding-left: 0; list-style-type: none;"> + <li>{{ cssxref("-webkit-overflow-scrolling") }}</li> + </ul> + <p><span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em;">P Q R</span></p> + <ul style="margin-left: 0; padding-left: 0; list-style-type: none;"> + <li>{{ Cssxref("-webkit-padding-after") }}</li> + <li>{{ Cssxref("-webkit-padding-before") }}</li> + <li>{{ Cssxref("-webkit-padding-end") }}</li> + <li>{{ Cssxref("-webkit-padding-start") }}</li> + <li>{{ Cssxref("-webkit-perspective-origin-x") }}</li> + <li>{{ Cssxref("-webkit-perspective-origin-y") }}</li> + <li>{{ Cssxref("-webkit-print-color-adjust") }}<br> + <p> </p> + </li> + <li> + <p><span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em;">R</span></p> + </li> + <li>{{ Cssxref("-webkit-region-break-after") }}</li> + <li>{{ Cssxref("-webkit-region-break-before") }}</li> + <li>{{ Cssxref("-webkit-region-break-inside") }}</li> + <li>{{ Cssxref("-webkit-rtl-ordering") }}</li> + </ul> + <p><span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em;">S</span></p> + <ul style="margin-left: 0; padding-left: 0; list-style-type: none;"> + <li>{{ Cssxref("-webkit-shape-insided") }}</li> + <li>{{ Cssxref("-webkit-shape-outside") }}</li> + <li>{{ Cssxref("-webkit-svg-shadow") }}</li> + </ul> + <p><span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em;">T U V</span></p> + <ul style="margin-left: 0; padding-left: 0; list-style-type: none;"> + <li>{{ Cssxref("-webkit-tap-highlight-color") }}</li> + <li>{{ Cssxref("-epub-text-combine") }}</li> + <li>{{ Cssxref("-webkit-text-decorations-in-effect") }}</li> + <li>{{ Cssxref("-epub-text-emphasis") }}</li> + <li>{{ Cssxref("-epub-text-emphasis-color") }}</li> + <li>{{ Cssxref("-webkit-text-emphasis-position") }}</li> + <li>{{ Cssxref("-epub-text-emphasis-style") }}</li> + <li>{{ Cssxref("-webkit-text-fill-color") }}</li> + <li>{{ Cssxref("-epub-text-orientation") }}</li> + <li>{{ Cssxref("-webkit-text-security") }}</li> + <li>{{ Cssxref("-webkit-text-size-adjust") }}</li> + <li>{{ Cssxref("-webkit-text-stroke") }}</li> + <li>{{ Cssxref("-webkit-text-stroke-color") }}</li> + <li>{{ Cssxref("-webkit-text-stroke-width") }}</li> + <li>{{ Cssxref("-webkit-touch-callout") }}</li> + </ul> + <p><span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em;">W—Z</span></p> + <ul style="margin-left: 0; padding-left: 0; list-style-type: none;"> + </ul> +</div> +<h2 id="Siehe_auch">Siehe auch</h2> +<ul> + <li><a href="https://trac.webkit.org/wiki/Styling%20Form%20Controls" title="https://trac.webkit.org/wiki/Styling Form Controls">Styling Form Controls on the WebKit Trac</a></li> +</ul> diff --git a/files/de/web/css/wertdefinitionssyntax/index.html b/files/de/web/css/wertdefinitionssyntax/index.html new file mode 100644 index 0000000000..da49131901 --- /dev/null +++ b/files/de/web/css/wertdefinitionssyntax/index.html @@ -0,0 +1,405 @@ +--- +title: Wertdefinitionssyntax +slug: Web/CSS/Wertdefinitionssyntax +tags: + - CSS + - Referenz +translation_of: Web/CSS/Value_definition_syntax +--- +<p>{{ CSSRef() }}</p> + +<p><span class="seoSummary">Eine formale Grammatik, die <strong>CSS Wertdefinitionssyntax</strong>, wird für die Definition einer Menge von gültigen Werten für eine CSS Eigenschaft oder Funktion verwendet.</span> Zusätzlich zu dieser Syntax kann die Menge an gültigen Werten durch semantische Beschränkungen (wie z. B. dass eine Zahl positiv sein muss) weiter eingegrenzt werden.</p> + +<p>Die Definitionssyntax beschreibt, welche Werte erlaubt sind und die Interaktionen zwischen ihnen. Eine Komponente kann ein <em>Schlüsselwort</em> sein, einige Zeichen, die als <em>Literal</em> interpretiert werden, oder ein Wert eines vorhandenen CSS Datentyps einer anderen CSS Eigenschaft.</p> + +<h2 id="Komponentenwert_Typen">Komponentenwert Typen</h2> + +<h3 id="Schlüsselwörter">Schlüsselwörter</h3> + +<h4 id="Generische_Schlüsselwörter">Generische Schlüsselwörter</h4> + +<p>Ein Schlüsselwort mit einer vordefinierten Bedeutung wird wortgetreu, ohne Anführungszeichen, dargestellt, zum Beispiel: <code>auto</code>, <code>smaller</code> oder <code>ease-in</code>.</p> + +<h4 id="Die_Spezialfälle_inherit_und_initial">Die Spezialfälle <code>inherit</code> und <code>initial</code></h4> + +<p>Alle CSS Eigenschaften akzeptieren die Schlüsselwörter <code>inherit</code> und <code>initial</code>, die durchweg in CSS definiert werden. Sie werden nicht in der Wertdefinition angezeigt und werden implizit definiert.</p> + +<h3 id="Literale">Literale</h3> + +<p>In CSS können einige Zeichen getrennt auftreten, wie der Schrägstrich ('<code>/</code>') oder das Komma ('<code>,</code>'), und werden in der Eigenschaftendefinition verwendet, um Teile voneinander zu trennen. Das Komma wird oft verwendet, um Werte in Aufzählungen oder Parameter in Mathematik ähnlichen Funktionen zu trennen; der Schrägstrich trennt oft Teile eines Wertes, die semantisch unterscheiden, jedoch eine gemeinsame Syntax haben. Normalerweise wird der Schrägstrich manchmal in Kurzform Eigenschaften verwendet, um Komponenten von einander zu trennen, die vom gleichen Typ sind, aber zu verschiedenen Eigenschaften gehören.</p> + +<p>Beide Symbole erscheinen buchstäblich in einer Wertdefinition.</p> + +<h3 id="Datentypen">Datentypen</h3> + +<h4 id="Elementare_Datentypen">Elementare Datentypen</h4> + +<p>Bestimmte Daten werden überall in CSS verwendet und werden einmalig für alle Werte in der Spezifikation definiert. Die sogenannten <em>elementaren Datentypen</em> werden durch ihren von den Symbolen '<code><</code>' und '<code>></code>' umschlossenen Namen gekennzeichnet: {{ cssxref("<angle>") }}, {{cssxref("<string>")}}, …</p> + +<h4 id="Nichtterminale_Datentypen">Nichtterminale Datentypen</h4> + +<p>Weniger häufige Datentypen, genannt <em>nichtterminale Datentypen</em>, werden ebenfalls von '<code><</code>' und '<code>></code>' umschlossen.</p> + +<p>Es gibt zwei Arten von nichtterminalen Datentypen:</p> + +<ul> + <li>Datentypen, die <em>den Namen einer Eigenschaft teilen</em>, eingeschlossen von Anführungszeichen. In diesem Fall teilt der Datentyp die gleiche Menge an Werten wie die Eigenschaft. Sie werden oft in der Definition von Kurzform Eigenschaften verwendet.</li> + <li>Datentypen, die <em>den Namen einer Eigenschaft nicht teilen</em>. Diese Datentypen ähneln den elementaren Datentypen. Sie unterscheiden sich lediglich in der Stelle ihrer Definition von den elementaren Datentypen: In diesem Fall ist die Definition normalerweise sehr nahe bei der Definition der Eigenschaft, die sie benutzt.</li> +</ul> + +<h2 id="Komponentenwert_Kombinatoren">Komponentenwert Kombinatoren</h2> + +<h3 id="Eckige_Klammern">Eckige Klammern</h3> + +<p><em>Eckige Klammern</em> schließen mehrere Entitäten, Kombinatoren und Multiplikatoren ein und transformieren diese anschließend als eine einzige Komponente. Sie werden benutzt, um <strong>Komponenten zu gruppieren und so die Rangordnungsregeln zu umgehen</strong>.</p> + +<pre class="syntaxbox"><code>bold [ thin && <length> ]</code></pre> + +<p>Dieses Beispiel passt auf die folgenden Werte:</p> + +<ul> + <li><code>bold thin 2vh</code></li> + <li><code>bold 0 thin</code></li> + <li><code>bold thin 3.5em</code></li> +</ul> + +<p>Aber nicht:</p> + +<ul> + <li><code>thin bold 3em</code>; da <code>bold</code> neben die durch die Klammern definierte Komponente gestellt ist, muss sie davor erscheinen.</li> +</ul> + +<h3 id="Nebeneinanderstellung">Nebeneinanderstellung</h3> + +<p>Wenn mehrere Schlüsselwörter, Literale oder Datentypen aufgereiht werden und nur durch ein oder mehrere Leerzeichen getrennt werden, nennt man dies <em>Nebeneinanderstellung</em>. Alle nebeneinander gestellten Komponenten sind zwingend und müssen in der exakten Reihenfolge angegeben werden.</p> + +<pre class="syntaxbox">bold <length> , thin +</pre> + +<p>Dieses Beispiel passt auf die folgenden Werte:</p> + +<ul> + <li><code>bold 1em, thin</code></li> + <li><code>bold 0, thin</code></li> + <li><code>bold 2.5cm, thin</code></li> + <li><code>bold 3vh, thin</code></li> +</ul> + +<p>Aber nicht:</p> + +<ul> + <li><code>thin 1em, bold</code>, da die Entitäten in der beschriebenen Reihenfolge stehen müssen.</li> + <li><code>bold 1em thin</code>, da die Entitäten zwingend angegeben werden müssen; das Komma und ein Literal müssen vorhanden sein.</li> + <li><code>bold 0.5ms, thin</code>, da <code>ms</code> Werte keine {{cssxref("<length>")}} Werte sind.</li> +</ul> + +<h3 id="Doppeltes_Und-Zeichen">Doppeltes Und-Zeichen</h3> + +<p>Wenn zwei oder mehrere Komponenten durch ein <em>doppeltes Und-Zeichen</em>, <code>&&</code>, getrennt sind, bedeutet das, dass alle diese Entitäten <strong>zwingend sind, jedoch in beliebiger Reihenfolge auftreten können</strong>.</p> + +<pre class="syntaxbox">bold && <length> +</pre> + +<p>Dieses Beispiel passt auf die folgenden Werte:</p> + +<ul> + <li><code>bold 1em</code></li> + <li><code>bold 0</code></li> + <li><code>2.5cm bold</code></li> + <li><code>3vh bold</code></li> +</ul> + +<p>Aber nicht:</p> + +<ul> + <li><code>bold</code>, da beide Komponenten im Wert vorkommen müssen.</li> + <li><code>bold 1em bold</code>, da beide Komponenten nur einmal vorkommen dürfen.</li> +</ul> + +<div class="note"><strong>Hinweis:</strong> Juxtaposition hat Vorrang gegenüber dem doppelten Und-Zeichen, was bedeutet, dass <code>bold thin && <length></code> gleichbedeutend ist mit <code>[ </code><code>bold thin ] && <length></code>. Dies beschreibt <code>bold thin <length></code> oder <code><length></code><code> bold thin</code>, aber nicht <code>bold <length></code><code> thin</code>.</div> + +<h3 id="Doppelter_Balken">Doppelter Balken</h3> + +<p>Wenn zwei oder mehrere Komponenten durch einen <em>doppelten Balken</em>, <code>||</code>, getrennt sind, bedeutet das, dass alle Entitäten optional sind: <strong>mindestens eine davon muss angegeben werden, und sie können in beliebiger Reihenfolge auftreten</strong>. Normalerweise wird dies verwendet, um die verschiedenen Werte einer <a href="/de/docs/Web/CSS/Kurzform_Eigenschaft" title="/en-US/docs/CSS/Shorthand_properties">Kurzform Eigenschaft</a> zu definieren.</p> + +<pre class="syntaxbox"><'border-width'> || <'border-style'> || <'border-color'> +</pre> + +<p>Dieses Beispiel passt auf die folgenden Werte:</p> + +<ul> + <li><code>1em solid blue</code></li> + <li><code>blue 1em</code></li> + <li><code>solid 1px yellow</code></li> +</ul> + +<p>Aber nicht:</p> + +<ul> + <li><code>blue yellow</code>, da eine Komponente nur einmal vorkommen darf.</li> + <li><code>bold</code>, da es kein erlaubtes Schlüsselwort als Wert für irgendeine Entität ist.</li> +</ul> + +<div class="note"><strong>Hinweis:</strong> Das doppelte Und-Zeichen hat Vorrang gegenüber dem doppelten Balken, was bedeutet, dass <code>bold || thin && <length></code> gleichbedeutend ist mit <code>bold || [ thin && <length> ]</code>. Dies beschreibt <code>bold</code>, <code>thin</code>, <code><length></code>, <code>bold thin</code>, <code><length> bold</code>, oder <code>thin <length> bold</code>, aber nicht <code>bold <length></code><code> bold thin</code>, da <code>bold</code>, falls nicht weggelassen, vor oder nach der gesamten <code>thin && <length></code> Komponente platziert werden muss.</div> + +<h3 id="Einfacher_Balken">Einfacher Balken</h3> + +<p>Wenn zwei oder mehrere Entitäten durch einen <em>einfachen Balken</em>, <code>|</code>, getrennt werden, bedeutet das, dass alle Entitäten exklusive Optionen sind: <strong>genau eine dieser Optionen muss angegeben werden</strong>. Dies wird normalerweise benutzt, um eine Liste möglicher Schlüsselwörter zu trennen.</p> + +<pre class="syntaxbox"><percentage> | <length> | left | center | right | top | bottom</pre> + +<p>Dieses Beispiel passt auf die folgenden Werte:</p> + +<ul> + <li><code>3%</code></li> + <li><code>0</code></li> + <li><code>3.5em</code></li> + <li><code>left</code></li> + <li><code>center</code></li> + <li><code>right</code></li> + <li><code>top</code></li> + <li><code>bottom</code></li> +</ul> + +<p>Aber nicht:</p> + +<ul> + <li><code>center 3%</code>, da nur eine der Komponenten angegeben werden darf.</li> + <li><code>3em 4.5em</code>, da eine Komponente nur einmal vorkommen darf.</li> +</ul> + +<div class="note"> +<p><strong>Hinweis:</strong> Der doppelte Balken hat Vorrang gegenüber dem einfachen Balken, was bedeutet, dass <code>bold | thin || <length></code> gleichbedeutend ist mit <code>bold | [ thin || <length> ]</code>. Dies beschreibt <code>bold</code>, <code>thin</code>, <code><length></code>, <code><length> thin</code>, oder <code>thin <length></code>, aber nicht <code>bold <length></code>, da nur eine Entität jeder Seite des <code>|</code> Kombinators vorkommen darf.</p> +</div> + +<h2 id="Komponentenwert_Multiplikatoren">Komponentenwert Multiplikatoren</h2> + +<p>Ein Multiplikator ist ein Zeichen, das angibt, wie oft eine vorhergehende Entität wiederholt werden kann. Ohne einen Multiplikator muss eine Entität exakt einmal vorkommen.</p> + +<p>{{Note("Multiplikatoren können nicht zu Kombinatoren hinzugefügt werden und haben auch keinen Vorrang vor diesen.")}}</p> + +<h3 id="Asterisk_(*)">Asterisk (<code>*</code>)</h3> + +<p>Der <em>Asterisk Multiplikator</em> gibt an, dass die Entität <strong>keinmal, einmal oder mehrmals</strong> vorkommen kann.</p> + +<pre class="syntaxbox"><code>bold smaller*</code></pre> + +<p>Dieses Beispiel passt auf die folgende Werte:</p> + +<ul> + <li><code>bold</code></li> + <li><code>bold smaller</code></li> + <li><code>bold smaller smaller</code></li> + <li><code>bold smaller smaller smaller</code> and so on.</li> +</ul> + +<p>Aber nicht:</p> + +<ul> + <li><code>smaller</code>, da <code>bold</code> eine Nebeneinanderstellung ist und vor jeglichem <code>smaller</code> Schlüsselwort stehen muss.</li> +</ul> + +<h3 id="Plus_()">Plus (<code>+</code>)</h3> + +<p>Der <em>Plus Multiplikator</em> gibt an, dass die Entität <strong>einmal oder mehrmals</strong> vorkommen kann.</p> + +<pre class="syntaxbox"><code>bold smaller+</code></pre> + +<p>Dieses Beispiel passt auf die folgenden Werte:</p> + +<ul> + <li><code>bold smaller</code></li> + <li><code>bold smaller smaller</code></li> + <li><code>bold smaller smaller smaller</code> and so on.</li> +</ul> + +<p>Aber nicht:</p> + +<ul> + <li><code>bold</code>, da <code>smaller</code> mindestens einmal vorkommen muss.</li> + <li><code>smaller</code>, da <code>bold</code> eine Nebeneinanderstellung ist und vor jeglichem <code>smaller</code> Schlüsselwort stehen muss.</li> +</ul> + +<h3 id="Fragezeichen_()">Fragezeichen (<code>?</code>)</h3> + +<p>Der <em>Fragezeichen Multiplikator</em> gibt an, dass die Entität optional ist und <strong>keinmal oder einmal</strong> vorkommen kann.</p> + +<pre class="syntaxbox"><code>bold smaller?</code></pre> + +<p>Dieses Beispiel passt auf die folgenden Werte:</p> + +<ul> + <li><code>bold</code></li> + <li><code>bold smaller</code></li> +</ul> + +<p>Aber nicht:</p> + +<ul> + <li><code>bold smaller smaller</code>, da <code>smaller</code> höchstens einmal vorkommen darf.</li> + <li><code>smaller</code>, da <code>bold</code> eine Nebeneinanderstellung ist und vor jeglichem <code>smaller</code> Schlüsselwort stehen muss.</li> +</ul> + +<h3 id="Geschweifte_Klammern_(_)">Geschweifte Klammern (<code>{ }</code>)</h3> + +<p>Der <em>Geschweifte Klammern Multiplikator</em> schließt zwei durch Komma getrennte Ganzzahlen A und B ein und gibt an, dass die Entität <strong>mindestens A-mal vorkommen muss und höchstens B-mal vorkommen darf</strong>.</p> + +<pre class="syntaxbox"><code>bold smaller{1,3}</code></pre> + +<p>Dieses Beispiel passt auf die folgenden Werte:</p> + +<ul> + <li><code>bold smaller</code></li> + <li><code>bold smaller smaller</code></li> + <li><code>bold smaller smaller smaller</code></li> +</ul> + +<p>Aber nicht:</p> + +<ul> + <li><code>bold</code>, da <code>smaller</code> mindestens einmal vorkommen muss.</li> + <li><code>bold smaller smaller smaller smaller</code>, da <code>smaller</code> höchstens dreimal vorkommen darf.</li> + <li><code>smaller</code>, da <code>bold</code> eine Nebeneinanderstellung ist und vor jeglichem <code>smaller</code> Schlüsselwort stehen muss.</li> +</ul> + +<h3 id="Rautensymbol_()">Rautensymbol (<code>#</code>)</h3> + +<p>Der <em>Rautensymbol Multiplizierer</em> gibt an, dass die Entität <strong>einmal oder mehrmals</strong> wiederholt werden kann (wie beim <em>Plus Multiplikator</em>), jedoch jedes Vorkommen durch <strong>ein Komma </strong>('<code>,</code>')<strong> getrennt</strong> wird.</p> + +<pre class="syntaxbox"><code>bold smaller#</code></pre> + +<p>Dieses Beispiel passt auf die folgenden Werte:</p> + +<ul> + <li><code>bold smaller</code></li> + <li><code>bold smaller, smaller</code></li> + <li><code>bold smaller, smaller, smaller</code> and so on.</li> +</ul> + +<p>Aber nicht:</p> + +<ul> + <li><code>bold</code>, da <code>smaller</code> mindestens einmal vorkommen muss.</li> + <li><code>bold smaller smaller smaller</code>, da verschiedene Vorkommen von <code>smaller</code> durch Komma getrennt werden müssen.</li> + <li><code>smaller</code>, da <code>bold</code> eine Nebeneinanderstellung ist und vor jeglichem <code>smaller</code> Schlüsselwort stehen muss.</li> +</ul> + +<h2 id="Übersicht">Übersicht</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Zeichen</th> + <th scope="col">Name</th> + <th scope="col">Beschreibung</th> + <th scope="col">Beispiel</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4">Kombinatoren</th> + </tr> + <tr> + <td> </td> + <td>Nebeneinanderstellung</td> + <td>Komponenten sind zwingend und müssen in der angegebenen Reihenfolge vorkommen</td> + <td><code>solid <length></code></td> + </tr> + <tr> + <td><code>&&</code></td> + <td>Doppeltes Und-Zeichen</td> + <td>Komponenten sind zwingend, aber können in beliebiger Reihenfolge vorkommen</td> + <td><code><length> && <string></code></td> + </tr> + <tr> + <td><code>||</code></td> + <td>Doppelter Balken</td> + <td>Mindestens eine der Komponenten muss angegeben werden und sie können in beliebiger Reihenfolge vorkommen</td> + <td><code><'border-image-outset'> || <'border-image-slice'></code></td> + </tr> + <tr> + <td><code>|</code></td> + <td>Einfacher Balken</td> + <td>Genau eine der Komponenten muss angegeben werden</td> + <td><code>smaller | small | normal | big | bigger</code></td> + </tr> + <tr> + <td><code>[ ]</code></td> + <td>Eckige Klammern</td> + <td>Gruppierung von Komponenten, um Rangordnungsregeln zu umgehen</td> + <td><code>bold [ thin && <length> ]</code></td> + </tr> + <tr> + <th colspan="4">Multiplizierer</th> + </tr> + <tr> + <td> </td> + <td>Kein Multiplizierer</td> + <td>Genau einmal</td> + <td><code>solid</code></td> + </tr> + <tr> + <td><code>*</code></td> + <td>Asterisk</td> + <td>0 oder mehrmals</td> + <td><code>bold smaller*</code></td> + </tr> + <tr> + <td><code>+</code></td> + <td>Pluszeichen</td> + <td>1 oder mehrmals</td> + <td><code>bold smaller+</code></td> + </tr> + <tr> + <td><code>?</code></td> + <td>Fragezeichen</td> + <td>0 oder 1-mal (that is <em>optional)</em></td> + <td><code>bold smaller?</code></td> + </tr> + <tr> + <td><code>{A,B}</code></td> + <td>Geschweifte Klammern</td> + <td>Mindestens <code>A</code>-mal, höchstens <code>B</code>-mal</td> + <td><code>bold smaller{1,3}</code></td> + </tr> + <tr> + <td><code>#</code></td> + <td>Rautensymbol</td> + <td>1 oder mehrmals, aber jedes Vorkommen getrennt durch Komma ('<code>,</code>')</td> + <td><code>bold smaller#</code></td> + </tr> + </tbody> +</table> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{ SpecName('CSS3 Values', '#value-defs', 'Value definition syntax') }}</td> + <td>{{ Spec2('CSS3 Values') }}</td> + <td>Fügt den Rautensymbol Multiplizierer hinzu.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'about.html#value-defs', 'Value definition syntax') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Fügt den doppelten Und-Zeichen Kombinator hinzu.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#notation-for-property-values', 'Value definition syntax') }}</td> + <td>{{ Spec2('CSS1') }}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{ CSS_key_concepts() }}</li> +</ul> diff --git a/files/de/web/css/white-space/index.html b/files/de/web/css/white-space/index.html new file mode 100644 index 0000000000..5bd5f70eae --- /dev/null +++ b/files/de/web/css/white-space/index.html @@ -0,0 +1,244 @@ +--- +title: white-space +slug: Web/CSS/white-space +tags: + - CSS + - CSS Eigenschaft + - CSS Text + - NeedsLiveSample + - NeedsMobileBrowserCompatibility + - Referenz +translation_of: Web/CSS/white-space +--- +<div>{{CSSRef}}</div> + +<p>Die CSS Eigenschaft <strong><code>white-space</code></strong> wird benutzt, um Leerzeichen innerhalb eines Elementes zu handhaben.</p> + +<div>{{EmbedInteractiveExample("pages/css/white-space.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> + +<div class="note"> +<p><strong>Hinweis:</strong> Um Wörter umzubrechen, verwenden Sie stattdessen {{CSSxRef("overflow-wrap")}}, {{CSSxRef("word-break")}}, oder {{CSSxRef("hyphens")}}.</p> +</div> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="brush: css notranslate">/* Schlüsselwortwerte */ +white-space: normal; +white-space: nowrap; +white-space: pre; +white-space: pre-wrap; +white-space: pre-line; +white-space: break-spaces; + +/* Globale Werte */ +white-space: inherit; +white-space: initial; +white-space: unset; +</pre> + +<p>Die Eigenschaft <code>white-space</code> wird als ein einzelnes Schlüsselwort angegeben, das aus der untenstehenden Liste von Werten ausgewählt wird.</p> + +<h3 id="Values" name="Values">Werte</h3> + +<dl> + <dt><code>normal</code></dt> + <dd>Aufeinanderfolgende Leerzeichen fallen zusammen. Zeilenumbruch-Zeichen im Quellcode werden als andere Leerzeichen gehandhabt. Bricht Zeilen notwendigen Stellen um und füllt die Zeile.</dd> + <dt><code>nowrap</code></dt> + <dd>Wie <code>normal</code>, aber unterdrückt Zeilenumbrüche im Text.</dd> + <dt><code>pre</code></dt> + <dd>Aufeinanderfolgende Leerzeichen bleiben erhalten, Zeilen werden nur an Zeilenumbruch-Zeichen im Quellcode und an {{HTMLElement("br")}}-Elementen gebrochen.</dd> + <dt><code>pre-wrap</code></dt> + <dd>Aufeinanderfolgende Zwischenraumzeichen bleiben erhalten. Zeilen werden an Zeilenumbruch-Zeichen, an {{HTMLElement("br")}} und an notwendigen Stellen um die Zeile zu füllen umgebrochen.</dd> + <dt><code>pre-line</code></dt> + <dd>Aufeinanderfolgende Zwischenraumzeichen fallen zusammen. Zeilen werden an Zeilenumbruch-Zeichen, an {{HTMLElement("br")}} und an notwendigen Stellen um die Zeile zu füllen umgebrochen.</dd> + <dt><code>break-spaces</code></dt> + <dd> Das Verhalten ist bis auf eine Ausnahme identisch mit <code>pre-line</code>: + <ul> + <li>Jede Sequenz von erhaltenen Zwischenraumzeichen nimmt immer Platz ein, auch am Ende der Zeile.</li> + <li>Nach jedem enthaltenen Zwischenraumzeichen besteht die Möglichkeit eines Zeilenumbruchs, auch zwischen Zwischenraumzeichen.</li> + <li>Solche beibehaltenen Leerräume nehmen Platz in Anspruch und beeinflussen somit die intrinsischen Größen der Box (Min-Inhaltsgröße und Max-Inhaltsgröße).</li> + </ul> + </dd> +</dl> + +<p>Die folgende Tabelle fasst das Verhalten der verschiedenen <code>white-space</code> Zwischenraumzeichen zusammen:</p> + +<table class="standard-table"> + <thead> + <tr> + <th></th> + <th>Neue Zeilen</th> + <th>Leerzeichen und Tabulatoren</th> + <th>Textumbruch</th> + <th>Zeilenende-Raum</th> + </tr> + </thead> + <tbody> + <tr> + <th><code>normal</code></th> + <td>Fallen zusammen</td> + <td>Fallen zusammen</td> + <td>Umbruch</td> + <td>Entfernt</td> + </tr> + <tr> + <th><code>nowrap</code></th> + <td>Fallen zusammen</td> + <td>Fallen zusammen</td> + <td>Kein Umbruch</td> + <td>Entfernt</td> + </tr> + <tr> + <th><code>pre</code></th> + <td>Bleiben erhalten</td> + <td>Bleiben erhalten</td> + <td>Kein Umbruch</td> + <td>Entfernt</td> + </tr> + <tr> + <th><code>pre-wrap</code></th> + <td>Bleiben erhalten</td> + <td>Bleiben erhalten</td> + <td>Umbruch</td> + <td>hängend</td> + </tr> + <tr> + <th><code>pre-line</code></th> + <td>Bleiben erhalten</td> + <td>Fallen zusammen</td> + <td>Umbruch</td> + <td>Entfernt</td> + </tr> + <tr> + <th><code>break-space</code></th> + <td>Bleiben erhalten</td> + <td>Bleiben erhalten</td> + <td>Umbruch</td> + <td>Umbruch</td> + </tr> + </tbody> +</table> + +<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">Beispiele</h2> + +<h3 id="Einfaches_Beispiel">Einfaches Beispiel</h3> + +<pre class="brush: css notranslate">code { + white-space: pre; +}</pre> + +<h3 id="Line_breaks_inside_pre_elements" name="Line_breaks_inside_pre_elements">Zeilenumbrüche innerhalb von <pre> Elementen</h3> + +<pre class="brush: css notranslate">pre { + word-wrap: break-word; /* IE 5.5-7 */ + white-space: pre-wrap; /* Modern browsers */ +}</pre> + +<h3 id="In_Aktion">In Aktion</h3> + +<h4 id="HTML">HTML</h4> + +<div class="hidden" id="In_action"> +<pre class="brush: html notranslate"><div id="css-code" class="box"> + p { white-space: + <select> + <option>normal</option> + <option>nowrap</option> + <option>pre</option> + <option>pre-wrap</option> + <option>pre-line</option> + <option>break-spaces</option> + </select> } +</div> +<div id="results" class="box"> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + + Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. + + Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> +</div></pre> + +<pre class="brush: css notranslate">.box { + width: 300px; + padding: 16px; + border-radius: 10px; +} + +#css-code { + background-color: rgb(220, 220, 220); + font-size: 16px; + font-family: monospace; +} + +#css-code select { + font-family: inherit; +} + +#results { + background-color: rgb(230, 230, 230); + overflow-x: scroll; + height: 400px; + white-space: normal; + font-size: 14px; +}</pre> + +<pre class="brush: js notranslate">var select = document.querySelector("#css-code select"); +var results = document.querySelector("#results p"); +select.addEventListener("change", function(e) { + results.setAttribute("style", "white-space: "+e.target.value); +})</pre> +</div> + +<pre class="brush: html notranslate"><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </pre> + +<h4 id="Ergebnis">Ergebnis</h4> + +<p>{{EmbedLiveSample("In_action", "100%", 500)}}</p> + +<h2 id="Specifications" name="Specifications">Spezifikationen</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 Text', '#white-space', 'white-space')}}</td> + <td>{{Spec2('CSS3 Text')}}</td> + <td>Präzisiert den Umbruch-Algorithmus. Äußerlich bewirkt der <code>white-space</code> eine kompakte Eigenschaft.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'text.html#white-space-prop', 'white-space')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">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.properties.white-space")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Eigenschaften, die definieren, wie Wörter umgebrochen werden: {{CSSxRef("overflow-wrap")}}, {{CSSxRef("word-break")}}, {{CSSxRef("hyphens")}}</li> +</ul> diff --git a/files/de/web/css/widows/index.html b/files/de/web/css/widows/index.html new file mode 100644 index 0000000000..7d2179c80b --- /dev/null +++ b/files/de/web/css/widows/index.html @@ -0,0 +1,128 @@ +--- +title: widows +slug: Web/CSS/widows +tags: + - CSS + - CSS Eigenschaft + - CSS3 + - Layout + - Referenz + - Web + - mehrspaltiges Layout + - print +translation_of: Web/CSS/widows +--- +<div>{{CSSRef}}</div> + +<p>Die <a href="/de/docs/CSS">CSS</a>-Eigenschaft <strong><code>widows</code></strong> legt die Mindestanzahl von Zeilen in einem Blockcontainer fest, die <em>oben</em> auf einer <a href="/de/docs/Web/CSS/Paged_Media">Seite</a>, einem Bereich oder einer <a href="/de/docs/Web/CSS/CSS_Columns">Spalte</a> angezeigt werden müssen.</p> + +<pre class="brush:css no-line-numbers notranslate">/* <integer> values */ +widows: 2; +widows: 3; + +/* Global values */ +widows: inherit; +widows: initial; +widows: unset; +</pre> + +<div class="note"> +<p><strong>Hinweis</strong>: In der Typografie ist ein <em>Hurenkind</em> die letzte Zeile eines Absatzes, die allein oben auf einer Seite angezeigt wird (der Absatz wird von einer vorherigen Seite fortgesetzt).</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt>{{cssxref("<integer>")}}</dt> + <dd>Die Mindestanzahl von Zeilen, die nach einem Fragmentierungsbruch ganz oben an einem neuen Fragment bleiben können. Der Wert muss positiv sein.</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="Beispiel">Beispiel</h2> + +<h3 id="Spalten_kontrollierendes_widows">Spalten kontrollierendes widows</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><div> + <p>This is the first paragraph containing some text.</p> + <p>This is the second paragraph containing some more text than the first one. It is used to demonstrate how widows work.</p> + <p>This is the third paragraph. It has a little bit more text than the first one.</p> +</div> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css; highlight[4] notranslate">div { + background-color: #8cffa0; + columns: 3; + widows: 2; +} + +p { + background-color: #8ca0ff; +} + +p:first-child { + margin-top: 0; +} +</pre> + +<h4 id="Ergebnis">Ergebnis</h4> + +<p>{{EmbedLiveSample("Controlling_column_widows", 400, 160)}}</p> + +<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('CSS3 Fragmentation', '#widows-orphans', 'widows')}}</td> + <td>{{Spec2('CSS3 Fragmentation')}}</td> + <td>Erweitert <code>widows</code>, die auf alle Fragmenttypen angewendet werden können, einschließlich Seiten, Regionen oder Spalten.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Multicol', '#filling-columns', 'widows')}}</td> + <td>{{Spec2('CSS3 Multicol')}}</td> + <td> + <p>Empfehlungen zur Berücksichtigung von <code>widows</code> in Bezug auf Spalten.</p> + </td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'page.html#break-inside', 'widows')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Initiale Definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div> + + +<p>{{Compat("css.properties.widows")}}</p> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{cssxref("orphans")}}</li> + <li><a href="/de/docs/Web/CSS/Paged_Media">Seitennummerierte Medien</a></li> +</ul> diff --git a/files/de/web/css/width/index.html b/files/de/web/css/width/index.html new file mode 100644 index 0000000000..b31a069823 --- /dev/null +++ b/files/de/web/css/width/index.html @@ -0,0 +1,191 @@ +--- +title: width +slug: Web/CSS/width +tags: + - CSS + - CSS Eigenschaft + - NeedsBrowserCompatibility + - NeedsMobileBrowserCompatibility + - Referenz +translation_of: Web/CSS/width +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <strong><code>width</code></strong> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft legt die Breite des Inhaltsbereichs eines Elements fest. Der <a href="/de/docs/Web/CSS/Boxmodell#Inhaltsbereich">Inhaltsbereich</a> ist <em>innerhalb</em> des Innenabstands, Rahmens und Außenabstands des Elements.</p> + +<p>Die {{cssxref("min-width")}} und {{cssxref("max-width")}} Eigenschaften überschreiben <code>width</code>.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">/* <length> Werte */ +width: 300px; +width: 25em; + +/* <percentage> Werte */ +width: 75%; + +/* Schlüsselwortwerte */ +width: border-box; +width: content-box; +width: max-content; +width: min-content; +width: available; +width: fit-content; +width: auto; + +/* Globale Werte */ +width: inherit; +width: initial; +width: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code><length></code></dt> + <dd>Siehe {{cssxref("<length>")}} für mögliche Einheiten.</dd> + <dt><code><percentage></code></dt> + <dd>Angegeben als {{cssxref("<percentage>")}} der Breite des beinhaltenden Blocks.</dd> + <dt><code>border-box </code>{{experimental_inline}}</dt> + <dd>Falls angegeben, wird der vorherige {{cssxref("<length>")}} oder {{cssxref("<percentage>")}} Wert auf die Borderbox des Elements angewendet.</dd> + <dt><code>content-box</code> {{experimental_inline}}</dt> + <dd>Falls angegeben, wird der vorherige {{cssxref("<length>")}} oder {{cssxref("<percentage>")}} Wert auf die Contentbox des Elements angewendet.</dd> + <dt><code>auto</code></dt> + <dd>Der Browser berechnet die Breite für das angegebene Element.</dd> + <dt><code>max-content</code> {{experimental_inline}}</dt> + <dd>Die innere bevorzugte Breite.</dd> + <dt><code>min-content</code> {{experimental_inline}}</dt> + <dd>Die innere Minimalbreite.</dd> + <dt><code>available</code> {{experimental_inline}}</dt> + <dd>Die Breite des beinhaltenden Blocks minus horizontalem Rand, Außen- und Innenabstand.</dd> + <dt><code>fit-content</code> {{experimental_inline}}</dt> + <dd>Der größere Werte von: + <ul> + <li>der inneren Minimalbreite.</li> + <li>der kleineren Größe der inneren bevorzugten und der verfügbaren Breite.</li> + </ul> + </dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Standardbreite">Standardbreite</h3> + +<pre class="brush:css">p.goldie { + background: gold; +}</pre> + +<pre class="brush:html"><p class="goldie">Die Mozilla Community produziert tolle Software.</p></pre> + +<p>{{EmbedLiveSample('Standardbreite', '500px', '64px')}}</p> + +<h3 id="Pixel_und_ems">Pixel und ems</h3> + +<pre class="brush: css">.px_length { + width: 200px; + background-color: red; + color: white; + border: 1px solid black; +} + +.em_length { + width: 20em; + background-color: white; + color: red; + border: 1px solid black; +} +</pre> + +<pre class="brush: html"><div class="px_length">Breite gemessen in px</div> +<div class="em_length">Breite gemessen in em</div></pre> + +<p>{{EmbedLiveSample('Pixel_und_ems', '500px', '64px')}}</p> + +<h3 id="Prozentwert">Prozentwert</h3> + +<pre class="brush: css">.percent { + width: 20%; + background-color: silver; + border: 1px solid red; +}</pre> + +<pre class="brush: html"><div class="percent">Breite in Prozent</div></pre> + +<p>{{EmbedLiveSample('Prozentwert', '500px', '64px')}}</p> + +<h3 id="max-content">max-content</h3> + +<pre class="brush:css;">p.maxgreen { + background: lightgreen; + width: intrinsic; /* Safari/WebKit verwendet einen nicht standardisierten Namen */ + width: -moz-max-content; /* Firefox/Gecko */ + width: -webkit-max-content; /* Chrome */ +}</pre> + +<pre class="brush:html"><p class="maxgreen">Die Mozilla Community produziert tolle Software.</p></pre> + +<p>{{EmbedLiveSample('max-content', '500px', '64px')}}</p> + +<h3 id="min-content">min-content</h3> + +<pre class="brush:css">p.minblue { + background: lightblue; + width: -moz-min-content; /* Firefox */ + width: -webkit-min-content; /* Chrome */ +}</pre> + +<pre class="brush:html"><p class="minblue">Die Mozilla Community produziert tolle Software.</p></pre> + +<p>{{EmbedLiveSample('min-content', '500px', '155px')}}</p> + +<h2 id="Spezifikationen">Spezifikationen</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 Box', '#the-width-and-height-properties', 'width')}}</td> + <td>{{Spec2('CSS3 Box')}}</td> + <td>Fügt die Schlüsselwörter <code>max-content</code>, <code>min-content</code>, <code>available</code>, <code>fit-content</code>, <code>border-box</code> und <code>content-box</code> hinzu.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'width')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Listet <code>width</code> als animierbar.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'visudet.html#the-width-property', 'width')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Präzisiert die Art von Elementen, auf die die Eigenschaft angewendet werden kann.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#width', 'width')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{Compat("css.properties.width")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/CSS/Boxmodell#Inhaltsbereich">Boxmodell</a>, {{cssxref("height")}}, {{cssxref("box-sizing")}}, {{cssxref("min-width")}} und {{cssxref("max-width")}}</li> +</ul> diff --git a/files/de/web/css/word-break/index.html b/files/de/web/css/word-break/index.html new file mode 100644 index 0000000000..658ca59cf3 --- /dev/null +++ b/files/de/web/css/word-break/index.html @@ -0,0 +1,115 @@ +--- +title: word-break +slug: Web/CSS/word-break +tags: + - CSS + - CSS Eigenschaft + - CSS3 + - Layout + - NeedsContent + - NeedsExample + - Referenz + - Web + - css3-text +translation_of: Web/CSS/word-break +--- +<div>{{CSSRef}}</div> + +<p>Die <code>word-break</code> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft wird verwendet, um anzugeben, ob zwischen Wörtern Zeilenumbrüche sein können.</p> + +<div>{{cssinfo}}</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">/* Schlüsselwortwerte */ +word-break: normal; +word-break: break-all; +word-break: keep-all; + +/* Globale Werte */ +word-break: inherit; +word-break: initial; +word-break: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code>normal</code></dt> + <dd>Die Standardregeln für Zeilenumbrüche werden verwendet.</dd> + <dt><code>break-all</code></dt> + <dd>Zeilenumbrüche können bei Text, der nicht in CJK (chinesisch/japanisch/koreanisch) geschrieben ist, nach irgendeinem Zeichen eingefügt werden.</dd> + <dt><code>keep-all</code></dt> + <dd>Erlaubt keine Zeilenumbrüche in CJK-Text. Das Verhalten bei Nicht-CJK-Text ist das gleiche wie bei <code>normal</code>.</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="HTML-Inhalt">HTML-Inhalt</h3> + +<pre class="brush: html"><p>1. <code>word-break: normal</code></p> +<p class="normal narrow"> Die Schönbrunn wurde von einem Donaudampfschiffahrtsgesellschaftskapitän gesteuert. 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉 </p> + +<p>2. <code>word-break: break-all</code></p> +<p class="breakAll narrow"> Die Schönbrunn wurde von einem Donaudampfschiffahrtsgesellschaftskapitän gesteuert. 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉 </p> + +<p>3. <code>word-break: keep-all</code></p> +<p class="keep narrow"> Die Schönbrunn wurde von einem Donaudampfschiffahrtsgesellschaftskapitän gesteuert. 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉</p> +</pre> + +<h3 id="CSS-Inhalt">CSS-Inhalt</h3> + +<pre class="brush: css">.narrow { + padding: 5px; + border: 1px solid; + width: 8em; +} + +.normal { + word-break: normal; +} + +.breakAll { + word-break: break-all; +} + +.keep { + word-break: keep-all; +} + +</pre> + +<p>{{EmbedLiveSample('Beispiele', 600, 580, '', 'Web/CSS/word-break')}}</p> + +<h2 id="Spezifikationen">Spezifikationen</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 Text', '#word-break-property', 'word-break')}}</td> + <td>{{Spec2('CSS3 Text')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<p>{{Compat("css.properties.word-break")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{cssxref("overflow-wrap")}}</li> +</ul> diff --git a/files/de/web/css/word-spacing/index.html b/files/de/web/css/word-spacing/index.html new file mode 100644 index 0000000000..f9f6fb1e83 --- /dev/null +++ b/files/de/web/css/word-spacing/index.html @@ -0,0 +1,107 @@ +--- +title: word-spacing +slug: Web/CSS/word-spacing +tags: + - CSS + - CSS Text + - NeedsLiveSample + - NeedsMobileBrowserCompatibility + - Property + - Referenz +translation_of: Web/CSS/word-spacing +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die<strong> <code>word-spacing</code></strong> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft gibt das Abstandsverhalten zwischen Tags und Wörtern an.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">/* Schlüsselwortwerte */ +word-spacing: normal; + +/* <length> Werte */ +word-spacing: 3px; +word-spacing: 0.3em; + +/* <percentage> Werte */ +word-spacing: 50%; +word-spacing: 200%; + +/* Globale Werte */ +word-spacing: inherit; +word-spacing: initial; +word-spacing: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code>normal</code></dt> + <dd>Der normale Abstand zwischen Wörtern, wie durch die aktuelle Schriftart und/oder den Browser angegeben.</dd> + <dt><code><length></code></dt> + <dd>Definiert Abstände zusätzlich zu den immanenten Abständen zwischen den Wörtern, die durch die Schriftart definiert werden. Siehe {{cssxref("<length>")}} für mögliche Einheiten.</dd> + <dt><code><percentage></code></dt> + <dd>Definiert die zusätzlichen Abstände als Prozentwert der Breite des betreffenden Zeichens.</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<p>Der folgende CSS Code:</p> + +<pre class="brush: css">#mozdiv1 { + word-spacing: 15px; +} + +#mozdiv2 { + word-spacing: 5em; +}</pre> + +<p>formatiert zwei {{HTMLElement("div")}} Tags, die Text beinhalten wie hier gezeigt:</p> + +<p><img alt="example.png" class="default internal" src="/@api/deki/files/6103/=example.png"></p> + +<h2 id="Spezifikationen">Spezifikationen</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 Text', '#propdef-word-spacing', 'word-spacing')}}</td> + <td>{{Spec2('CSS3 Text')}}</td> + <td>Ersetzt die vorherigen Werte mit einem <code><spacing-limit></code> Wert, der denselben Wert definiert plus den <code><percentage></code> Wert und erlaubt bis zu drei Werte, die den Optimal-, Minimal- und Maximalwert beschreiben.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'word-spacing')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Definiert <code>word-spacing</code> als animierbar.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'text.html#propdef-word-spacing', 'word-spacing')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Keine Änderung</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#word-spacing', 'word-spacing')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.properties.word-spacing")}} diff --git a/files/de/web/css/word-wrap/index.html b/files/de/web/css/word-wrap/index.html new file mode 100644 index 0000000000..fd803452d4 --- /dev/null +++ b/files/de/web/css/word-wrap/index.html @@ -0,0 +1,83 @@ +--- +title: word-wrap +slug: Web/CSS/word-wrap +tags: + - CSS + - CSS Eigenschaft + - NeedsLiveSample + - Referenz +translation_of: Web/CSS/overflow-wrap +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>word-wrap</code> Eigenschaft wird verwendet, um anzugeben ob der Webbrowser Zeilenumbrüche innerhalb von Wörtern machen darf. Dies ist nötig um einem Overflow vorzubeugen, wenn ein sonst nicht trennbarer Text zu lang für die beinhaltende Box wäre.</p> + +<div class="note"><strong>Hinweis:</strong> Die ursprünglich (unprefixed) proprietäre Erweiterung <code>word-wrap</code> von Microsoft wurde im aktuellen Entwurf der CSS3 Text Spezifikation in {{cssxref("overflow-wrap")}} umbenannt. <code>word-wrap</code> wird jetzt als "alternativer Name" für <code>overflow-wrap</code> angesehen. Stabile Builds von Google Chrome und Opera unterstützen die neue Syntax.</div> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">/* Keyword values */ +word-wrap: normal; +word-wrap: break-word; + +/* Global values */ +word-wrap: inherit; +word-wrap: initial; +word-wrap: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code>normal</code></dt> + <dd>Zeilen dürfen nur bei normal Trennstellen von Wörtern umbrechen.</dd> + <dt><code>break-word</code></dt> + <dd>Normalerweise nicht trennbare Wörter dürfen an beliebigen Stellen getrennt werden, wenn es sonst keine anwendbaren Trennstellen in der Zeile gibt.</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush: css">p { width: 13em; background: gold; }</pre> + +<p style="width: 13em; background: gold;">FStrPrivFinÄndG (Gesetz zur Änderung des Fernstraßenbauprivatfinanzierungsgesetzes und straßenverkehrsrechtlicher Vorschriften)</p> + +<pre class="brush: css">p { width: 13em; background: gold; word-wrap: break-word; }</pre> + +<p style="word-wrap: break-word; width: 13em; background: gold;">FStrPrivFinÄndG (Gesetz zur Änderung des Fernstraßenbauprivatfinanzierungsgesetzes und straßenverkehrsrechtlicher Vorschriften)</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Bemerkung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Text', '#propdef-word-wrap', 'word-wrap') }}</td> + <td>{{ Spec2('CSS3 Text') }}</td> + <td>Initiale Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Webbrowserkompatibilität">Webbrowserkompatibilität</h2> + +{{Compat("css.properties.overflow-wrap")}} + +<h2 id="See_also" name="See_also">Siehe auch</h2> + +<ul> + <li>{{cssxref("word-break")}}</li> +</ul> diff --git a/files/de/web/css/z-index/index.html b/files/de/web/css/z-index/index.html new file mode 100644 index 0000000000..014b0c53c8 --- /dev/null +++ b/files/de/web/css/z-index/index.html @@ -0,0 +1,150 @@ +--- +title: z-index +slug: Web/CSS/z-index +tags: + - CSS + - CSS Eigenschaft + - CSS Positionierung + - Referenz +translation_of: Web/CSS/z-index +--- +<div>{{CSSRef}}</div> + +<div> +<p>Die CSS-Eigenschaft <strong><code>z-index</code></strong> legt die z-Reihenfolge eines <a href="/de/docs/Web/CSS/position">positionierten</a> Elements und seiner Abkömmlinge oder Flex-Elemente fest. Überlappende Elemente mit einem größeren <code>z-index</code> überdecken diejenigen mit einem kleineren.</p> + +<div>{{EmbedInteractiveExample("pages/css/z-index.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>Für einen positionierte Box (d.h. eine mit einer <code>position</code> anders als <code>static</code>) ist für die Eigenschaft <code>z-index</code> spezifiert:</p> + +<p>For a positioned box (that is, one with any <code>position</code> other than <code>static</code>), the <code>z-index</code> property specifies:</p> + +<ol> + <li>Die Stapelebene der Box im aktuellen <a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">Stapel-Zusammenhang</a>.</li> + <li>Ob die Box einen lokalen Stapel-Zusammenhang herstellt.</li> +</ol> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css notranslate">/* Schlüsselwortwert */ +z-index: auto; + +/* <integer> Werte */ +z-index: 0; +z-index: 3; +z-index: 289; +z-index: -1; /* Negative Werte, um die Priorität zu senken */ + +/* Globale Werte*/ +z-index: inherit; +z-index: initial; +z-index: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>Die Box etabliert keinen neuen lokalen Stapelkontext. Die generierte Box befindet sich im aktuellen Stapelkontext auf gleicher Ebene wie dessen Elternbox. </dd> + <dt><code><integer></code></dt> + <dd>Der {{cssxref("integer")}} legt die Stapelebene des momentanen Stapelkontexts fest. Die Box etabliert zudem einen neuen Stapelkontext, dessen Stapelebene 0 ist. Dadurch werden die z-Indizes von Kinder-Elementen nicht mit z-Indizes außerhalb des Elements verglichen.</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="Beispiele">Beispiele</h2> + +<h3 id="Visuelle_Schichtenelement">Visuelle Schichtenelement</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="dashed-box">Dashed box</div> + <div class="gold-box">Gold box</div> + <div class="green-box">Green box</div> +</div> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css; notranslate">.wrapper { + position: relative; +} + +.dashed-box { + position: relative; + z-index: 1; + border: dashed; + height: 8em; + margin-bottom: 1em; + margin-top: 2em; +} +.gold-box { + position: absolute; + z-index: 3; /* put .gold-box above .green-box and .dashed-box */ + background: gold; + width: 80%; + left: 60px; + top: 3em; +} +.green-box { + position: absolute; + z-index: 2; /* put .green-box above .dashed-box */ + background: lightgreen; + width: 20%; + left: 65%; + top: -25px; + height: 7em; + opacity: 0.9; +} +</pre> + +<h4 id="Ergebnis">Ergebnis</h4> + +<p>{{ EmbedLiveSample('Visually_layering_elements', '550', '200', '') }}</p> + +<h2 id="Spezifikationen">Spezifikationen</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 Transitions', '#animatable-css', 'animation behavior for z-index')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Definiert <code>z-index</code> als animierbar.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'visuren.html#z-index', 'z-index')}}</td> + <td>{{Spec2('CSS2.1')}}</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.properties.z-index")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>CSS-Eigenschaft {{cssxref("position")}}</li> + <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index">Understanding CSS z-index</a></li> +</ul> |