diff options
Diffstat (limited to 'files/de/web/css')
| -rw-r--r-- | files/de/web/css/-moz-cell/index.html | 12 | ||||
| -rw-r--r-- | files/de/web/css/@media/aural/index.html (renamed from files/de/web/css/aural/index.html) | 0 | ||||
| -rw-r--r-- | files/de/web/css/_colon_autofill/index.html (renamed from files/de/web/css/_colon_-webkit-autofill/index.html) | 0 | ||||
| -rw-r--r-- | files/de/web/css/_colon_placeholder-shown/index.html (renamed from files/de/web/css/_colon_-moz-placeholder/index.html) | 0 | ||||
| -rw-r--r-- | files/de/web/css/_colon_user-invalid/index.html (renamed from files/de/web/css/_colon_-moz-ui-invalid/index.html) | 0 | ||||
| -rw-r--r-- | files/de/web/css/_doublecolon_-moz-placeholder/index.html | 108 | ||||
| -rw-r--r-- | files/de/web/css/actual_value/index.html (renamed from files/de/web/css/tatsächlicher_wert/index.html) | 0 | ||||
| -rw-r--r-- | files/de/web/css/adjacent_sibling_combinator/index.html (renamed from files/de/web/css/angrenzende_geschwisterselektoren/index.html) | 0 | ||||
| -rw-r--r-- | files/de/web/css/alias/index.html | 11 | ||||
| -rw-r--r-- | files/de/web/css/attribute_selectors/index.html (renamed from files/de/web/css/attributselektoren/index.html) | 0 | ||||
| -rw-r--r-- | files/de/web/css/auto/index.html | 27 | ||||
| -rw-r--r-- | files/de/web/css/box-flex/index.html (renamed from files/de/web/css/-moz-box-flex/index.html) | 0 | ||||
| -rw-r--r-- | files/de/web/css/box-ordinal-group/index.html (renamed from files/de/web/css/-moz-box-ordinal-group/index.html) | 0 | ||||
| -rw-r--r-- | files/de/web/css/box-pack/index.html (renamed from files/de/web/css/-moz-box-pack/index.html) | 0 | ||||
| -rw-r--r-- | files/de/web/css/child_combinator/index.html (renamed from files/de/web/css/kindselektoren/index.html) | 0 | ||||
| -rw-r--r-- | files/de/web/css/class_selectors/index.html (renamed from files/de/web/css/klassenselektoren/index.html) | 0 | ||||
| -rw-r--r-- | files/de/web/css/color_value/index.html (renamed from files/de/web/css/farben/index.html) | 0 | ||||
| -rw-r--r-- | files/de/web/css/compositing_and_blending/index.html (renamed from files/de/web/css/css_compositing_and_blending/index.html) | 0 | ||||
| -rw-r--r-- | files/de/web/css/computed_value/index.html (renamed from files/de/web/css/berechneter_wert/index.html) | 0 | ||||
| -rw-r--r-- | files/de/web/css/css_animations/using_css_animations/index.html (renamed from files/de/web/css/css_animations/css_animationen_nutzen/index.html) | 0 | ||||
| -rw-r--r-- | files/de/web/css/css_background_and_borders/box-shadow_generator/index.html (renamed from files/de/web/css/css_boxmodell/box-shadow_generator/index.html) | 0 | ||||
| -rw-r--r-- | files/de/web/css/css_backgrounds_and_borders/index.html (renamed from files/de/web/css/css_background_and_borders/index.html) | 0 | ||||
| -rw-r--r-- | files/de/web/css/css_backgrounds_and_borders/resizing_background_images/index.html | 112 | ||||
| -rw-r--r-- | files/de/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html (renamed from files/de/web/css/css_background_and_borders/mehrere_hintergründe_in_css_verwenden/index.html) | 0 | ||||
| -rw-r--r-- | files/de/web/css/css_box_model/index.html (renamed from files/de/web/css/css_boxmodell/index.html) | 0 | ||||
| -rw-r--r-- | files/de/web/css/css_box_model/introduction_to_the_css_box_model/index.html (renamed from files/de/web/css/css_boxmodell/einführung_in_das_css_boxmodell/index.html) | 0 | ||||
| -rw-r--r-- | files/de/web/css/css_box_model/mastering_margin_collapsing/index.html (renamed from files/de/web/css/css_boxmodell/zusammenfallen_von_außenabständen_meistern/index.html) | 0 | ||||
| -rw-r--r-- | files/de/web/css/css_color/index.html (renamed from files/de/web/css/css_colors/index.html) | 0 | ||||
| -rw-r--r-- | files/de/web/css/css_colors/color_picker_tool/index.html (renamed from files/de/web/css/css_colors/farbauswahl_werkzeug/index.html) | 0 | ||||
| -rw-r--r-- | files/de/web/css/css_columns/using_multi-column_layouts/index.html | 63 | ||||
| -rw-r--r-- | files/de/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html (renamed from files/de/web/css/css_flexible_box_layout/grundlegende_konzepte_der_flexbox/index.html) | 0 | ||||
| -rw-r--r-- | files/de/web/css/css_flexible_box_layout/ordering_flex_items/index.html (renamed from files/de/web/css/css_flexible_box_layout/flex_elemente_sortieren/index.html) | 0 | ||||
| -rw-r--r-- | files/de/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html | 398 | ||||
| -rw-r--r-- | files/de/web/css/css_images/using_css_gradients/index.html | 408 | ||||
| -rw-r--r-- | files/de/web/css/css_lists_and_counters/consistent_list_indentation/index.html (renamed from files/de/web/css/css_lists_and_counters/konsistente_listeneinrückung/index.html) | 0 | ||||
| -rw-r--r-- | files/de/web/css/css_lists_and_counters/using_css_counters/index.html (renamed from files/de/web/css/css_lists_and_counters/css_zähler_verwenden/index.html) | 0 | ||||
| -rw-r--r-- | files/de/web/css/css_masking/index.html (renamed from files/de/web/css/css_masken/index.html) | 0 | ||||
| -rw-r--r-- | files/de/web/css/css_motion_path/index.html (renamed from files/de/web/css/motion_path/index.html) | 0 | ||||
| -rw-r--r-- | files/de/web/css/css_namespaces/index.html (renamed from files/de/web/css/css_namensräume/index.html) | 0 | ||||
| -rw-r--r-- | files/de/web/css/css_text_decoration/index.html (renamed from files/de/web/css/css_textdekoration/index.html) | 0 | ||||
| -rw-r--r-- | files/de/web/css/css_transforms/using_css_transforms/index.html (renamed from files/de/web/css/css_transforms/css_transformationen_verwenden/index.html) | 0 | ||||
| -rw-r--r-- | files/de/web/css/css_types/index.html (renamed from files/de/web/css/css_typen/index.html) | 0 | ||||
| -rw-r--r-- | files/de/web/css/css_user_interface/index.html | 117 | ||||
| -rw-r--r-- | files/de/web/css/gap/index.html (renamed from files/de/web/css/grid-gap/index.html) | 0 | ||||
| -rw-r--r-- | files/de/web/css/id_selectors/index.html (renamed from files/de/web/css/id-selektoren/index.html) | 0 | ||||
| -rw-r--r-- | files/de/web/css/index/index.html | 8 | ||||
| -rw-r--r-- | files/de/web/css/inheritance/index.html (renamed from files/de/web/css/vererbung/index.html) | 0 | ||||
| -rw-r--r-- | files/de/web/css/initial_value/index.html (renamed from files/de/web/css/initialwert/index.html) | 0 | ||||
| -rw-r--r-- | files/de/web/css/mask-origin/index.html (renamed from files/de/web/css/-webkit-mask-origin/index.html) | 0 | ||||
| -rw-r--r-- | files/de/web/css/mask-repeat/index.html (renamed from files/de/web/css/-webkit-mask-repeat/index.html) | 0 | ||||
| -rw-r--r-- | files/de/web/css/none/index.html | 26 | ||||
| -rw-r--r-- | files/de/web/css/normal/index.html | 28 | ||||
| -rw-r--r-- | files/de/web/css/overflow-wrap/index.html (renamed from files/de/web/css/word-wrap/index.html) | 0 | ||||
| -rw-r--r-- | files/de/web/css/property_template/index.html | 165 | ||||
| -rw-r--r-- | files/de/web/css/reference/index.html (renamed from files/de/web/css/css_referenz/index.html) | 0 | ||||
| -rw-r--r-- | files/de/web/css/replaced_element/index.html (renamed from files/de/web/css/ersetztes_element/index.html) | 0 | ||||
| -rw-r--r-- | files/de/web/css/shorthand_properties/index.html (renamed from files/de/web/css/kurzformat_eigenschaft/index.html) | 0 | ||||
| -rw-r--r-- | files/de/web/css/specificity/index.html (renamed from files/de/web/css/spezifität/index.html) | 0 | ||||
| -rw-r--r-- | files/de/web/css/url()/index.html (renamed from files/de/web/css/url/index.html) | 0 | ||||
| -rw-r--r-- | files/de/web/css/user-modify/index.html (renamed from files/de/web/css/-moz-user-modify/index.html) | 0 | ||||
| -rw-r--r-- | files/de/web/css/user-select/index.html (renamed from files/de/web/css/-moz-user-select/index.html) | 0 | ||||
| -rw-r--r-- | files/de/web/css/value_definition_syntax/index.html (renamed from files/de/web/css/wertdefinitionssyntax/index.html) | 0 |
62 files changed, 583 insertions, 900 deletions
diff --git a/files/de/web/css/-moz-cell/index.html b/files/de/web/css/-moz-cell/index.html deleted file mode 100644 index 2fbbb81111..0000000000 --- a/files/de/web/css/-moz-cell/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: '-moz-cell' -slug: Web/CSS/-moz-cell -tags: - - CSS - - Non-standard -translation_of: Web/CSS/cursor -translation_of_original: Web/CSS/-moz-cell ---- -<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/aural/index.html b/files/de/web/css/@media/aural/index.html index 37d115443e..37d115443e 100644 --- a/files/de/web/css/aural/index.html +++ b/files/de/web/css/@media/aural/index.html diff --git a/files/de/web/css/_colon_-webkit-autofill/index.html b/files/de/web/css/_colon_autofill/index.html index 2030c723b3..2030c723b3 100644 --- a/files/de/web/css/_colon_-webkit-autofill/index.html +++ b/files/de/web/css/_colon_autofill/index.html diff --git a/files/de/web/css/_colon_-moz-placeholder/index.html b/files/de/web/css/_colon_placeholder-shown/index.html index e4f65acf99..e4f65acf99 100644 --- a/files/de/web/css/_colon_-moz-placeholder/index.html +++ b/files/de/web/css/_colon_placeholder-shown/index.html diff --git a/files/de/web/css/_colon_-moz-ui-invalid/index.html b/files/de/web/css/_colon_user-invalid/index.html index cc133a4d28..cc133a4d28 100644 --- a/files/de/web/css/_colon_-moz-ui-invalid/index.html +++ b/files/de/web/css/_colon_user-invalid/index.html diff --git a/files/de/web/css/_doublecolon_-moz-placeholder/index.html b/files/de/web/css/_doublecolon_-moz-placeholder/index.html deleted file mode 100644 index eb6775111e..0000000000 --- a/files/de/web/css/_doublecolon_-moz-placeholder/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: '::-moz-placeholder' -slug: 'Web/CSS/::-moz-placeholder' -tags: - - CSS - - CSS Pseudo-class - - CSS Reference - - Non-standard -translation_of: 'Web/CSS/::placeholder' -translation_of_original: 'Web/CSS/::-moz-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/tatsächlicher_wert/index.html b/files/de/web/css/actual_value/index.html index 5e77670cac..5e77670cac 100644 --- a/files/de/web/css/tatsächlicher_wert/index.html +++ b/files/de/web/css/actual_value/index.html diff --git a/files/de/web/css/angrenzende_geschwisterselektoren/index.html b/files/de/web/css/adjacent_sibling_combinator/index.html index b5ff92dda2..b5ff92dda2 100644 --- a/files/de/web/css/angrenzende_geschwisterselektoren/index.html +++ b/files/de/web/css/adjacent_sibling_combinator/index.html diff --git a/files/de/web/css/alias/index.html b/files/de/web/css/alias/index.html deleted file mode 100644 index abed12bcdf..0000000000 --- a/files/de/web/css/alias/index.html +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: alias -slug: Web/CSS/Alias -tags: - - CSS -translation_of: Web/CSS/cursor -translation_of_original: Web/CSS/Alias ---- -<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/attributselektoren/index.html b/files/de/web/css/attribute_selectors/index.html index a4b6449af3..a4b6449af3 100644 --- a/files/de/web/css/attributselektoren/index.html +++ b/files/de/web/css/attribute_selectors/index.html diff --git a/files/de/web/css/auto/index.html b/files/de/web/css/auto/index.html deleted file mode 100644 index 9279631046..0000000000 --- a/files/de/web/css/auto/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: auto -slug: Web/CSS/auto -translation_of: Web/CSS/width -translation_of_original: Web/CSS/auto ---- -<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/-moz-box-flex/index.html b/files/de/web/css/box-flex/index.html index 8c54ffa75a..8c54ffa75a 100644 --- a/files/de/web/css/-moz-box-flex/index.html +++ b/files/de/web/css/box-flex/index.html diff --git a/files/de/web/css/-moz-box-ordinal-group/index.html b/files/de/web/css/box-ordinal-group/index.html index 5b99280453..5b99280453 100644 --- a/files/de/web/css/-moz-box-ordinal-group/index.html +++ b/files/de/web/css/box-ordinal-group/index.html diff --git a/files/de/web/css/-moz-box-pack/index.html b/files/de/web/css/box-pack/index.html index 517c6fce72..517c6fce72 100644 --- a/files/de/web/css/-moz-box-pack/index.html +++ b/files/de/web/css/box-pack/index.html diff --git a/files/de/web/css/kindselektoren/index.html b/files/de/web/css/child_combinator/index.html index 2e351964ed..2e351964ed 100644 --- a/files/de/web/css/kindselektoren/index.html +++ b/files/de/web/css/child_combinator/index.html diff --git a/files/de/web/css/klassenselektoren/index.html b/files/de/web/css/class_selectors/index.html index eafd714a05..eafd714a05 100644 --- a/files/de/web/css/klassenselektoren/index.html +++ b/files/de/web/css/class_selectors/index.html diff --git a/files/de/web/css/farben/index.html b/files/de/web/css/color_value/index.html index 9e0baf0720..9e0baf0720 100644 --- a/files/de/web/css/farben/index.html +++ b/files/de/web/css/color_value/index.html diff --git a/files/de/web/css/css_compositing_and_blending/index.html b/files/de/web/css/compositing_and_blending/index.html index a4fcc2636e..a4fcc2636e 100644 --- a/files/de/web/css/css_compositing_and_blending/index.html +++ b/files/de/web/css/compositing_and_blending/index.html diff --git a/files/de/web/css/berechneter_wert/index.html b/files/de/web/css/computed_value/index.html index d98a8be023..d98a8be023 100644 --- a/files/de/web/css/berechneter_wert/index.html +++ b/files/de/web/css/computed_value/index.html diff --git a/files/de/web/css/css_animations/css_animationen_nutzen/index.html b/files/de/web/css/css_animations/using_css_animations/index.html index ea0dc4e7de..ea0dc4e7de 100644 --- a/files/de/web/css/css_animations/css_animationen_nutzen/index.html +++ b/files/de/web/css/css_animations/using_css_animations/index.html diff --git a/files/de/web/css/css_boxmodell/box-shadow_generator/index.html b/files/de/web/css/css_background_and_borders/box-shadow_generator/index.html index b087898d03..b087898d03 100644 --- a/files/de/web/css/css_boxmodell/box-shadow_generator/index.html +++ b/files/de/web/css/css_background_and_borders/box-shadow_generator/index.html diff --git a/files/de/web/css/css_background_and_borders/index.html b/files/de/web/css/css_backgrounds_and_borders/index.html index 59c2117194..59c2117194 100644 --- a/files/de/web/css/css_background_and_borders/index.html +++ b/files/de/web/css/css_backgrounds_and_borders/index.html diff --git a/files/de/web/css/css_backgrounds_and_borders/resizing_background_images/index.html b/files/de/web/css/css_backgrounds_and_borders/resizing_background_images/index.html new file mode 100644 index 0000000000..abd1e8f200 --- /dev/null +++ b/files/de/web/css/css_backgrounds_and_borders/resizing_background_images/index.html @@ -0,0 +1,112 @@ +--- +title: Hintergrundbilder skalieren +slug: Web/Guide/CSS/Scaling_background_images +tags: + - CSS Hintergrundbild + - Skalierung Hintergrundbild +translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images +translation_of_original: Web/CSS/CSS_Background_and_Borders/Scaling_background_images +--- +<p><span class="seoSummary">Die {{ cssxref("background-size") }} CSS Eigenschaft ermöglicht es, die Größe von Hintergrundbildern einzustellen, anstatt das voreingestellte Verhalten, das Bild auf die volle Größe zu kacheln, zu verwenden.</span>Man kann das Bild nach Wunsch nach oben oder unten skalieren.</p> + +<h2 id="Tiling_a_large_image" name="Tiling_a_large_image">Kacheln eines großen Bildes</h2> + +<p>Nehmen wir ein großes Bild, ein 2982x2808 Firefox Logo. Wir wollen (auch wenn das höchstwahrscheinlichst ein grauenhaft schlechtes Seitendesign ergibt) vier Kopien dieses Bildes in ein 300x300 Pixel Quadrat kacheln, damit es so aussieht:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8965/ss1.png"></p> + +<p>Das wird erreicht, indem wir folgendes CSS verwenden:</p> + +<pre class="brush: css; highlight:[8]">.square { + width: 300px; + height: 300px; + background-image: url(firefox_logo.png); + border: solid 2px; + text-shadow: white 0px 0px 2px; + font-size: 16px; + background-size: 150px; +} +</pre> + +<p>Man braucht für {{ cssxref("background-size") }} kein Präfix mehr zu setzen, jedoch können Präfix-Versionen hinzugefügt werden, wenn ältere Browser angesprochen werden sollen.</p> + +<h2 id="Stretching_an_image" name="Stretching_an_image">Dehnen eines Bildes</h2> + +<p>Sowohl die horizontale als auch die vertikale Größe des Bildes kann angegeben werden, wie hier angegeben:</p> + +<pre class="brush:css">background-size: 300px 150px; +</pre> + +<p>So sieht das Ergebnis aus:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8967/ss2.png"></p> + +<h2 id="Scaling_an_image_up" name="Scaling_an_image_up">Hochskalieren eines Bildes</h2> + +<p>Auf der anderen Seite des Spektrums kann ein Bild im Hintergrund auch hochskaliert werden. Hier wird ein 32x32 Pixel favicon auf 300x300 Pixel skaliert:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8969/ss3.png"></p> + +<pre class="brush: css; highlight:[5]">.square2 { + width: 300px; + height: 300px; + background-image: url(favicon.png); + background-size: 300px; + border: solid 2px; + text-shadow: white 0px 0px 2px; + font-size: 16px; +} +</pre> + +<p>Wie man sehen kann, ist das CSS im Grunde identisch, außer dem Namen der Bilddatei.</p> + +<h2 id="Special_values.3A_.22contain.22_and_.22cover.22" name="Special_values.3A_.22contain.22_and_.22cover.22">Spezielle Werte: "contain" und "cover"</h2> + +<p>Neben den {{cssxref("<length>")}} Werten, bietet die {{ cssxref("background-size") }} CSS Eigenschaft zwei spezielle Werte für Größen, <code>contain</code> und <code>cover</code>. Sehen wir uns diese an.</p> + +<h3 id="contain" name="contain"><code>contain</code></h3> + +<p>Der contain Wert spezifiziert, unabhängig von der Größe der umgebenden Box, die Skalierung des Hintergrundbildes so, dass jede Seite so breit als irgend möglich angezeigt wird ohne über die Länge der korrespondierenden Seite des Containers hinauszugehen. Versuche mit einem Browser, der skalierende Hintergründe unterstützt (wie z. B. Firefox 3.6 oder höher), dieses Fenster in der Größe zu verändern, um das Verhalten am untenstehenden Live-Beispiel zu sehen.</p> + +<figure> +<p>{{ EmbedLiveSample("contain", "100%", "220") }}</p> +</figure> + +<pre class="brush:html"><div class="bgSizeContain"> + <p>Try resizing this window and see what happens.</p> +</div></pre> + +<pre class="brush:css;highlight:[4]">.bgSizeContain { + height: 200px; + background-image: url(https://mdn.mozillademos.org/files/8971/firefox_logo.png); + background-size: contain; + border: 2px solid darkgray; + color: #000; text-shadow: 1px 1px 0 #fff; +}</pre> + +<h3 id="cover" name="cover"><code>cover</code></h3> + +<p>Der cover Wert spezifizert, dass das Hintergundbild in der Größe so angezeigt wird, dass es selbst so klein als möglich ist, dabei aber auf alle Fälle in beiden Dimensionen größer oder gleich der jeweiligen korresponierenden Maße des Containers ist. </p> + +<figure>{{ EmbedLiveSample("cover", "100%", "220") }}</figure> + +<p>Das Beispiel verwendet folgendes HTML & CSS:</p> + +<pre class="brush:html"><div class="bgSizeCover"> + <p>Try resizing this window and see what happens.</p> +</div></pre> + +<pre class="brush:css;highlight:[4]">.bgSizeCover { + height: 200px; + background-image: url('https://mdn.mozillademos.org/files/8971/firefox_logo.png'); + background-size: cover; + border: 2px solid darkgray; + color: #000; text-shadow: 1px 1px 0 #fff; +</pre> + +<h2 id="See_also" name="See_also">Siehe auch</h2> + +<ul> + <li>{{ cssxref("background-size") }}</li> + <li>{{ cssxref("background") }}</li> +</ul> 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_backgrounds_and_borders/using_multiple_backgrounds/index.html index 9b717083f8..9b717083f8 100644 --- a/files/de/web/css/css_background_and_borders/mehrere_hintergründe_in_css_verwenden/index.html +++ b/files/de/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html diff --git a/files/de/web/css/css_boxmodell/index.html b/files/de/web/css/css_box_model/index.html index 37440c9523..37440c9523 100644 --- a/files/de/web/css/css_boxmodell/index.html +++ b/files/de/web/css/css_box_model/index.html diff --git a/files/de/web/css/css_boxmodell/einführung_in_das_css_boxmodell/index.html b/files/de/web/css/css_box_model/introduction_to_the_css_box_model/index.html index 1bf796b36b..1bf796b36b 100644 --- a/files/de/web/css/css_boxmodell/einführung_in_das_css_boxmodell/index.html +++ b/files/de/web/css/css_box_model/introduction_to_the_css_box_model/index.html diff --git a/files/de/web/css/css_boxmodell/zusammenfallen_von_außenabständen_meistern/index.html b/files/de/web/css/css_box_model/mastering_margin_collapsing/index.html index edf1fa050c..edf1fa050c 100644 --- a/files/de/web/css/css_boxmodell/zusammenfallen_von_außenabständen_meistern/index.html +++ b/files/de/web/css/css_box_model/mastering_margin_collapsing/index.html diff --git a/files/de/web/css/css_colors/index.html b/files/de/web/css/css_color/index.html index a85506c9de..a85506c9de 100644 --- a/files/de/web/css/css_colors/index.html +++ b/files/de/web/css/css_color/index.html diff --git a/files/de/web/css/css_colors/farbauswahl_werkzeug/index.html b/files/de/web/css/css_colors/color_picker_tool/index.html index 3f822f9f73..3f822f9f73 100644 --- a/files/de/web/css/css_colors/farbauswahl_werkzeug/index.html +++ b/files/de/web/css/css_colors/color_picker_tool/index.html diff --git a/files/de/web/css/css_columns/using_multi-column_layouts/index.html b/files/de/web/css/css_columns/using_multi-column_layouts/index.html new file mode 100644 index 0000000000..8ca450b7c2 --- /dev/null +++ b/files/de/web/css/css_columns/using_multi-column_layouts/index.html @@ -0,0 +1,63 @@ +--- +title: CSS3 Spalten +slug: CSS3_Columns +tags: + - CSS + - CSS3 +translation_of: Web/CSS/CSS_Columns/Using_multi-column_layouts +--- +<p>Viele Benutzer haben Schwierigkeiten Texte zu lesen, wenn die Zeilen sehr lang sind. Es dauert dann zu lange für das Auge vom Ende der Zeile zum Anfang einer Neuen zu springen. Sie verrutschen unter Umständen in der Zeile und der Lesefluss wird unterbrochen. Um dennoch das Maximum an Bildfläche von großen Bildschirmen zu nutzen, sollten Autoren eine begrenzte Spaltenbreite verwenden, die den Text dann nebeneinander platziert (vergleichbar mit dem Spaltensatz in Zeitungen). Unglücklicherweise ist es mittels HTML und CSS 2.1 nicht möglich Spaltenumbrüche festzulegen, ohne dass diese an festen Positionen gebunden sind. Das erlaubte Markup im Text muss stark eingeschränkt werden oder die Spalten müssen durch die Verwendung von Scripts erstellt werden.</p> +<p>Die <a class="external" href="http://www.w3.org/TR/css3-multicol/">CSS3 Multi-column Spezifikation</a> schlägt einige neue CSS Eigenschaften vor, die diese Funktionen mittels CSS ermöglichen. In Firefox 1.5 und später wurde ein Teil dieser Eigenschaften implementiert, um das Verhalten, so wie es in der Spezifikation beschrieben ist (mit einer Ausnahme; siehe unten), zu realisieren.</p> +<p>In <a class="external" href="http://weblogs.mozillazine.org/roc/">Robert O'Callahans Blog</a> kann man den Einsatz von CSS Columns mit einem Firefox 1.5 oder später betrachten.</p> +<h2 id="Verwendung_von_Spalten">Verwendung von Spalten</h2> +<h3 id="Spaltenanzahl_und_-breite">Spaltenanzahl und -breite</h3> +<p>Zwei CSS Eigenschaften steuern, ob und wie viele Spalten erscheinen werden: <a href="/de/CSS/-moz-column-count" title="de/CSS/-moz-column-count"><code>-moz-column-count</code></a> und <a href="/de/CSS/-moz-column-width" title="de/CSS/-moz-column-width"><code>-moz-column-width</code></a>.</p> +<p><code>-moz-column-count</code> legt die Anzahl an Spalten auf eine bestimmte Zahl fest, z.B.:</p> +<pre class="brush: html"><div style="-moz-column-count:2">In Vorbereitung zum Release von Mozilla Firefox 1.5 Beta 1, +wird der Tree heute Nacht um 11:59pm Pacific Daylight Time (UTC -0700) geschlossen. +Nach diesem Zeitpunkt werden keine weiteren Checkins für Firefox 1.5 Beta 1 erlaubt, +da dieser am Donnerstag released werden soll.</div></pre> +<p>Dieser Codeschnipsel wird den Inhalt in zwei Spalten anzeigen (funktioniert nur unter Firefox 1.5 oder höher):</p> +<div style=""> + In Vorbereitung zum Release von Mozilla Firefox 1.5 Beta 1, wird der Tree heute Nacht um 11:59pm Pacific Daylight Time (UTC -0700) geschlossen. Nach diesem Zeitpunkt werden keine weiteren Checkins für Firefox 1.5 Beta 1 erlaubt, da dieser am Donnerstag released werden soll.</div> +<p> </p> +<p><code>-moz-column-width</code> legt die minimal erwünschte Spaltenbreite fest.<br> + Wenn <code>-moz-column-count</code> nicht ebenfalls festgelegt wurde, wird der Browser automatisch so viele Spalten erstellen, wie in die verfügbare Breite passen.</p> +<pre class="brush: html"><div style="-moz-column-width:20em;">In Vorbereitung zum Release von Mozilla Firefox 1.5 Beta 1, +wird der Tree heute Nacht um 11:59pm Pacific Daylight Time (UTC -0700) geschlossen. +Nach diesem Zeitpunkt werden keine weiteren Checkins für Firefox 1.5 Beta 1 erlaubt, +da dieser am Donnerstag released werden soll.</div></pre> +<p>Wird so angezeigt:</p> +<div style="-moz-column-width: 20em;"> + In Vorbereitung zum Release von Mozilla Firefox 1.5 Beta 1, wird der Tree heute Nacht um 11:59pm Pacific Daylight Time (UTC -0700) geschlossen. Nach diesem Zeitpunkt werden keine weiteren Checkins für Firefox 1.5 Beta 1 erlaubt, da dieser am Donnerstag released werden soll.</div> +<p> </p> +<p>Die genauen Details dazu sind in der <a class="external" href="http://www.w3.org/TR/css3-multicol/">CSS3 Spezifikation</a> beschrieben.</p> +<p>In einem mehrspaltigen Block, wird der Inhalt (wenn nötig) automatisch von der einen in die nächste Spalte transportiert. Alle HTML, CSS und DOM Funktionen werden innerhalb von Spalten unterstützt, auch beim Bearbeiten und Drucken des Textes.</p> +<h3 id="Höhenausgleich">Höhenausgleich</h3> +<p>In der CSS3 Spezifikation ist festgelegt, dass sich die Spaltenhöhen ausgleichen müssen: Das bedeutet, dass der Browser die maximale Höhe automatisch festlegt, sodass die Höhe jeder Spalte ungefähr gleich sind. Firefox macht genau das.</p> +<p>Es ist jedoch in einigen Situationen nützlich eine maximale Höhe der Spalten explizit festzulegen, den Inhalt in die erste Spalte zu legen und dann soviele Spalten wie nötig zu erstellen, die sich nach rechts austrecken. Daher wurde das Spaltenmodel erweitert. Wenn die <a href="/de/CSS/height" title="de/CSS/height"><code>height</code></a> Eigenschaft in einem mehrspaltigen Block festgelegt wurde, kann jede Spalte nur so hoch wie diese Höhenangabe werden und nicht größer, bevor dann eine neue Spalte hinzugefügt wird. Dieser Modus ist effizienter für das Layout.</p> +<h3 id="Spaltenlücken">Spaltenlücken</h3> +<p>Seit Firefox 3 gibt es standardmäßig eine Lücke von <code>1em</code> zwischen den einzelnen Spalten (vorher war jede Spalte direkt neben der nächsten Spalte).<br> + Es ist einfach das Standardverhalten zu ändern, in dem man die <a href="/de/CSS/-moz-column-gap" title="de/CSS/-moz-column-gap"><code>-moz-column-gap</code></a> Eigenschaft einsetzt:</p> +<pre class="brush: html"><div style="-moz-column-width:20em; -moz-column-gap:2em;">In Vorbereitung zum Release von Mozilla Firefox 1.5 Beta 1, +wird der Tree heute Nacht um 11:59pm Pacific Daylight Time (UTC -0700) geschlossen. +Nach diesem Zeitpunkt werden keine weiteren Checkins für Firefox 1.5 Beta 1 erlaubt, +da dieser am Donnerstag released werden soll.</div></pre> +<div style="-moz-column-width: 20em;"> + In Vorbereitung zum Release von Mozilla Firefox 1.5 Beta 1, wird der Tree heute Nacht um 11:59pm Pacific Daylight Time (UTC -0700) geschlossen. Nach diesem Zeitpunkt werden keine weiteren Checkins für Firefox 1.5 Beta 1 erlaubt, da dieser am Donnerstag released werden soll.</div> +<p> </p> +<h3 id="Graceful_Degradation_(Abwärtskompatibilität_und_Fehlertoleranz)">Graceful Degradation (Abwärtskompatibilität und Fehlertoleranz)</h3> +<p>Die <a href="/de/CSS/-moz-column" title="de/CSS/-moz-column"><code>-moz-column</code></a> Eigenschaft wird von Browsern, die Spalten nicht unterstützen, einfach ignoriert. Daher ist es relativ einfach ein Layout zu erstellen, dass den Inhalt in diesen Browsern in einer einzigen Spalte anzeigt, während in Firefox 1.5 und später mehrere Spalten angezeigt werden.</p> +<h2 id="Fazit">Fazit</h2> +<p>CSS3 Spalten bieten eine neue Möglichkeit für Webentwickler das Beste aus der Bildfläche herauszuholen. Fantasievolle Entwickler finden vielleicht weitere Verwendungsmöglichkeiten, bei denen die Funktion des automatischen Höhenausgleichs zum Einsatz kommen könnte.</p> +<h2 id="Siehe_auch">Siehe auch</h2> +<ul> + <li><a href="/de/CSS/-moz-column-width" title="de/CSS/-moz-column-width"><code>-moz-column-width</code></a>, <a href="/de/CSS/-moz-column-count" title="de/CSS/-moz-column-count"><code>-moz-column-count</code></a>, <a href="/de/CSS/-moz-column-gap" title="de/CSS/-moz-column-gap"><code>-moz-column-gap</code></a>, <a href="/de/CSS/-moz-column-rule" title="de/CSS/-moz-column-rule"><code>-moz-column-rule</code></a>, <a href="/de/CSS/-moz-column-rule-width" title="de/CSS/-moz-column-rule-width"><code>-moz-column-rule-width</code></a>, <a href="/de/CSS/-moz-column-rule-style" title="de/CSS/-moz-column-rule-style"><code>-moz-column-rule-style</code></a>, <a href="/de/CSS/-moz-column-rule-color" title="de/CSS/-moz-column-rule-color"><code>-moz-column-rule-color</code></a></li> + <li><a href="/de/CSS_Referenz" title="de/CSS_Referenz">CSS Referenz</a>, <a href="/de/CSS_Referenz/Mozilla_CSS_Erweiterungen" title="de/CSS_Referenz/Mozilla_CSS_Erweiterungen">Mozilla CSS Erweiterungen</a></li> +</ul> +<h2 id="Zusätzliche_Referenzen">Zusätzliche Referenzen</h2> +<ul> + <li><a class="external" href="http://weblogs.mozillazine.org/roc/archives/2005/03/gecko_18_for_we.html">Robert O'Callahan: »Gecko 1.8 For Web Developers: Columns«</a></li> +</ul> +<p>{{ HTML5ArticleTOC() }}</p> +<p>{{ languages( { "en": "en/CSS/CSS3_Columns", "es": "es/Columnas_con_CSS-3", "fr": "fr/Colonnes_CSS3", "it": "it/Le_Colonne_nei_CSS3", "ja": "ja/CSS3_Columns", "ko": "ko/CSS3_Columns", "pl": "pl/Kolumny_CSS3" } ) }}</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/basic_concepts_of_flexbox/index.html index 81b1db9c4b..81b1db9c4b 100644 --- a/files/de/web/css/css_flexible_box_layout/grundlegende_konzepte_der_flexbox/index.html +++ b/files/de/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html 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/ordering_flex_items/index.html index 86354499d2..86354499d2 100644 --- a/files/de/web/css/css_flexible_box_layout/flex_elemente_sortieren/index.html +++ b/files/de/web/css/css_flexible_box_layout/ordering_flex_items/index.html 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 deleted file mode 100644 index 38d6da7946..0000000000 --- a/files/de/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html +++ /dev/null @@ -1,398 +0,0 @@ ---- -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 -translation_of_original: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes ---- -<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_images/using_css_gradients/index.html b/files/de/web/css/css_images/using_css_gradients/index.html new file mode 100644 index 0000000000..e5ed267991 --- /dev/null +++ b/files/de/web/css/css_images/using_css_gradients/index.html @@ -0,0 +1,408 @@ +--- +title: Verwendung von CSS Farbverläufen +slug: Farbverläufe_in_CSS +tags: + - Beispiel + - CSS + - CSS Bild + - Guide + - NeedsLiveSample + - NeedsUpdate + - Web + - erweitert +translation_of: Web/CSS/CSS_Images/Using_CSS_gradients +--- +<p><span class="seoSummary"><strong>CSS Farbverläufe</strong> sind neue Typen von {{cssxref("<image>")}}, die durch das <a href="/de/docs/CSS/CSS3" title="CSS3">CSS3</a> Image Module hinzugefügt wurden. Die Verwendung von CSS Farbverläufen erlaubt es, weiche Übergänge zwischen zwei oder mehr angegebenen Farben anzuzeigen.</span> Dies ermöglicht es, Bilder für diese Effekte zu vermeiden, was Downloadzeit und Bandbreitennutzung verringert. Darüber hinaus sehen Objekte besser aus, wenn sie herangezoomt werden, da der Farbverlauf durch den Browser erzeugt wird, sodass das Layout viel flexibler gestaltet werden kann.</p> + +<p><span class="seoSummary">Browser unterstützen zwei Arten von Verläufen: <em>lineare</em>, definiert durch die {{cssxref("linear-gradient")}} Funktion, und <em>radiale</em>, definiert durch {{cssxref("radial-gradient")}}.</span></p> + +<h2 id="Lineare_Farbverläufe">Lineare Farbverläufe</h2> + +<p>Um einen linearen Farbverlauf zu erstellen, wird ein Startpunkt gesetzt und eine Richtung (als Winkel), entlang welcher der Verlaufseffekt angewendet wird. Es werden auch <strong>Farbstopps</strong> definiert. Farbstopps sind die Farben, zwischen denen Gecko weiche Übergänge darstellen soll. Es müssen mindestens zwei angegeben werden, es können jedoch auch mehrere definiert werden, um komplexere Verlaufseffekte zu erzeugen.</p> + +<h3 id="Einfache_lineare_Farbverläufe">Einfache lineare Farbverläufe</h3> + +<p>Hier ist ein linearer Farbverlauf, der in der Mitte (horizontal) oben (vertikal) mit blau beginnt und in weiß übergeht.</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Screenshot</td> + <td class="header">Livedemo</td> + </tr> + <tr> + <td><img alt="" src="/@api/deki/files/3950/=basic_linear_bluetop.png" style="text-align: center;"></td> + <td> + <div style=""> </div> + </td> + </tr> + </tbody> +</table> + +<div> +<pre class="brush: css">/* Die alte Syntax, veraltet und mit Präfix versehen, für alte Browser */ +background: -<em>prefix</em>-linear-gradient(top, blue, white); + +/* Die neue Syntax, die von Browsern benötigt wird, die dem Standard folgen (Opera 12.1, + IE 10, Firefox 16, Chrome 26, Safari 6.1), ohne Präfix */ +background: linear-gradient(to bottom, blue, white); +</pre> +</div> + +<p>(Siehe die <a href="/de/docs/Web/CSS/linear-gradient#Browser_Kompatibilität">Browser Kompatibilitätstabelle</a> für eine Übersicht der Präfixe, die benötigt werden, um verschiedene Browserversionen zu unterstützen).</p> + +<p>Der gleiche Farbverlauf wird geändert, sodass er von links nach rechts verläuft:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Screenshot</td> + <td class="header">Livedemo</td> + </tr> + <tr> + <td><img alt="basic_linear_blueleft.png" class="default internal" src="/@api/deki/files/3951/=basic_linear_blueleft.png"></td> + <td> + <div style=""> </div> + </td> + </tr> + </tbody> +</table> + +<pre class="brush: css">/* Die alte Syntax, veraltet und mit Präfix versehen, für alte Browser */ +background: -<em>prefix</em>-linear-gradient(left, blue, white); + +/* Die neue Syntax, die von Browsern benötigt wird, die dem Standard folgen (Opera 12.1, + IE 10, Firefox 16, Chrome 26, Safari 6.1), ohne Präfix */ +background: linear-gradient(to right, blue, white); </pre> + +<p>(Siehe die <a href="/de/docs/Web/CSS/linear-gradient#Browser_Kompatibilität">Browser Kompatibilitätstabelle</a> für eine Übersicht der Präfixe, die benötigt werden, um verschiedene Browserversionen zu unterstützen).</p> + +<p>Der Verlauf kann diagonal gestaltet werden, indem die horizontale und vertikale Startposition definiert wird. Zum Beispiel:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Screenshot</td> + <td class="header">Livedemo</td> + </tr> + <tr> + <td><img alt="basic_linear_bluetopleft.png" class="default internal" src="/@api/deki/files/3952/=basic_linear_bluetopleft.png"></td> + <td> + <div style=""> </div> + </td> + </tr> + </tbody> +</table> + +<pre class="brush: css">/* Die alte Syntax, veraltet und mit Präfix versehen, für alte Browser */ +background: -<em>prefix</em>-linear-gradient(left top, blue, white); + +/* Die neue Syntax, die von Browsern benötigt wird, die dem Standard folgen (Opera 12.1, + IE 10, Firefox 16, Chrome 26, Safari 6.1), ohne Präfix */ +background: linear-gradient(to bottom right, blue, white); +</pre> + +<h3 id="Verwendung_von_Winkeln">Verwendung von Winkeln</h3> + +<p>Falls kein Winkel angegeben wird, wird er automatisch durch die angegebene Richtung bestimmt. Falls mehr Kontrolle über die Richtung des Verlaufs erwünscht ist, kann der Winkel explizit angegeben werden.</p> + +<p>Als Beispiel sind hier zwei Verläufe, der erste mit einer Richtung nach rechts und der zweite mit einem Winkel von 70 Grad.</p> + +<p><img alt="linear_gradient_angle.png" class="default internal" src="/@api/deki/files/3953/=linear_gradient_angle.png"></p> + +<p>Der rechte verwendet CSS wie folgt:</p> + +<pre class="brush: css">background: linear-gradient(70deg, black, white); +</pre> + +<p>Der Winkel wird angegeben als ein Winkel zwischen horizontaler Linie und der Verlaufslinie gegen den Uhrzeigersinn. Mit anderen Worten, <code>0deg</code> erzeugt einen vertikalen Farbverlauf von unten nach oben, während <code>90deg</code> einen horizontalen Verlauf von links nach rechts erzeugt:</p> + +<p><img alt="linear_redangles.png" class="default internal" src="/files/3811/linear_red_angles.png"></p> + +<pre class="brush: css">background: linear-gradient(<angle>, red, white); +</pre> + +<div class="note style-wrap"> +<p><strong>Hinweis:</strong> Mehrere Browser implementieren (mit Präfix) einen älteren Entwurf der Spezifikation, wo <code>0deg</code> nach rechts anstatt nach oben zeigte. Daher sollte auf den Wert des Winkels geachtet werden, wenn der standardisierte <code>linear-gradient</code> und der mit Präfix versehene gemischt verwendet werden. Eine einfache Formel hierfür ist 90 - x = y, wobei x die Standardverwendung und y die nicht standardisierte, mit Herstellerpräfix versehene Verwendung ist.</p> +</div> + +<h3 id="Farbstopps">Farbstopps</h3> + +<p>Farbstopps sind Punkte entlang der Verlaufslinie, die eine bestimmte Farbe an dieser Position angeben. Die Position kann entweder als ein Prozentwert der Länge der Linie oder als absolute Länge angegeben werden. Es können beliebig viele Farbstopps definiert werden, um den gewünschten Effekt zu erzielen.</p> + +<p>Falls die Position als Prozentwert angegeben wird, repräsentiert <code>0%</code> den Startpunkt und <code>100%</code> den Endpunkt; jedoch können auch Werte außerhalb dieses Bereichs verwendet werden, falls nötig, um den gewünschten Effekt zu erhalten.</p> + +<h4 id="Beispiel_Drei_Farbstopps">Beispiel: Drei Farbstopps</h4> + +<p>Dieses Beispiel definiert drei Farbstopps:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Screenshot</td> + <td class="header">Livedemo</td> + </tr> + <tr> + <td><img alt="linear_colorstops1.png" class="default internal" src="/@api/deki/files/3955/=linear_colorstops1.png"></td> + <td> + <div style=""> </div> + </td> + </tr> + </tbody> +</table> + +<pre class="brush: css">/* Die alte Syntax, veraltet und mit Präfix versehen, für alte Browser */ +background: -<em>prefix</em>-linear-gradient(top, blue, white 80%, orange); + +/* Die neue Syntax, die von Browsern benötigt wird, die dem Standard folgen (Opera 12.1, + IE 10, Firefox 16, Chrome 26, Safari 6.1), ohne Präfix */ +background: linear-gradient(to bottom, blue, white 80%, orange); +</pre> + +<p>Beachte, dass der erste und letzte Farbstopp keine Position definieren; daher werden ihnen automatisch Werte von 0% und 100% zugewiesen. Der mittlere Farbstopp definiert eine Position von 80%, was ihn ziemlich weit nach unten verlagert.</p> + +<h4 id="Beispiel_Gleichmäßig_verteilte_Farbstopps">Beispiel: Gleichmäßig verteilte Farbstopps</h4> + +<p>Hier ist ein Beispiel, das eine Vielzahl an Farben verwendet, die alle gleichmäßig verteilt sind:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Screenshot</td> + <td class="header">Livedemo</td> + </tr> + <tr> + <td><img alt="linear_rainbow.png" class="default internal" src="/@api/deki/files/3956/=linear_rainbow.png"></td> + <td> + <div style=""> </div> + </td> + </tr> + </tbody> +</table> + +<pre class="brush: css">/* Die alte Syntax, veraltet und mit Präfix versehen, für alte Browser */ +background: -<em>prefix</em>-linear-gradient(left, red, orange, yellow, green, blue); + +/* Die neue Syntax, die von Browsern benötigt wird, die dem Standard folgen (Opera 12.1, + IE 10, Firefox 16, Chrome 26, Safari 6.1), ohne Präfix */ +background: linear-gradient(to right, red, orange, yellow, green, blue); +</pre> + +<p>Beachte, dass die Farbstopps automatisch gleichmäßig verteilt werden, wenn keine Positionen angegeben werden.</p> + +<h3 id="Transparenz_und_Farbverläufe">Transparenz und Farbverläufe</h3> + +<p>Farbverläufe unterstützen Transparenz. Diese kann zum Beispiel dazu benutzt werden, mehrere Hintergründe übereinander zu legen, um Fadingeffekte bei Hintergrundbilder zu erzeugen. Um dies zu erreichen, können entweder <code>rgba</code> Farben, <code>hsla</code> Farben oder das Schlüsselwort <code>transparent</code> verwendet werden (siehe <a href="/de/docs/Web/CSS/Farben">Farbwerte</a>). Jedoch sei darauf hingewiesen, dass einige Browser das Schlüsselwort <code>transparent</code> als <code>rgba(0,0,0,0)</code> anstatt <code>rgba(255,255,255,0)</code> rendern, was zu unerwarteten Ergebnissen (und potentiell dunklen Stellen) führen kann wenn die Farbverläufe sich überblenden. Daher ist es sicherer, opake Farbverläufe zu definieren.</p> + +<p>Hier ist ein Beispiel, wie Transparenz in Farbverläufen verwendet wird:</p> + +<p><img alt="Beispiel für Farbverläufe mit Transparenz" class="default internal" src="/files/4275/linear_multibg_transparent2.png" style="height: 119px; width: 643px;"></p> + +<pre class="brush: css">/* Die alte Syntax, veraltet und mit Präfix versehen, für alte Browser */ +background: -<em>prefix</em>-linear-gradient(left, rgba(255,255,255,0), + rgba(255,255,255,1)), url(http://foo.com/image.jpg); + +/* Die neue Syntax, die von Browsern benötigt wird, die dem Standard folgen (Opera 12.1, + IE 10, Firefox 16, Chrome 26, Safari 6.1), ohne Präfix */ +background: linear-gradient(to right, rgba(255,255,255,0), + rgba(255,255,255,1)), url(http://foo.com/image.jpg); +</pre> + +<p>Die Hintergründe sind überlagert, wobei der erste Hintergrund oben liegt und jeder weitere Hintergrund weiter unten. Durch die Überlagerung von Hintergründen auf diese Weise können kreative Effekte erzeugt werden, wie oben zu sehen.</p> + +<h2 id="Radiale_Farbverläufe">Radiale Farbverläufe</h2> + +<p>Radiale Farbverläufe werden durch die {{cssxref("radial-gradient")}} Funktion definiert. Die Syntax ist ähnlich der linearer Farbverläufe, außer, dass die Endform (ob Kreis oder Ellipse) des Verlaufs angegeben werden kann, als auch deren Größe. Standardmäßig ist die Endform eine Ellipse mit den gleichen Proportionen wie die der Containerbox.</p> + +<h3 id="Farbstopps_2">Farbstopps</h3> + +<p>Farbstopps können auf die gleiche Weise wie bei linearen Farbverläufen angegeben werden. Die Verlaufslinie verläuft dabei von der Startposition in alle Richtungen.</p> + +<h4 id="Beispiel_Gleichmäßig_verteilte_Farbstopps_2">Beispiel: Gleichmäßig verteilte Farbstopps</h4> + +<p>Standardmäßig werden Farbstopps wie bei linearen Verläufen gleichmäßig verteilt:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Screenshot</td> + <td class="header">Livedemo</td> + </tr> + <tr> + <td><img alt="radial_gradient_even.png" class="default internal" src="/@api/deki/files/3958/=radial_gradient_even.png"></td> + <td> + <div style=""> </div> + </td> + </tr> + </tbody> +</table> + +<pre class="brush: css">background: radial-gradient(red, yellow, rgb(30, 144, 255)); +</pre> + +<h4 id="Beispiel_Explizit_verteilte_Farbstopps">Beispiel: Explizit verteilte Farbstopps</h4> + +<p>Hier werden bestimmte Positionen für die Farbstopps definiert:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Screenshot</td> + <td class="header">Livedemo</td> + </tr> + <tr> + <td><img alt="radial_gradient_varied.png" class="default internal" src="/@api/deki/files/3959/=radial_gradient_varied.png"></td> + <td> + <div style=""> </div> + </td> + </tr> + </tbody> +</table> + +<pre class="brush: css">background: radial-gradient(red 5%, yellow 25%, #1E90FF 50%); +</pre> + +<h3 id="Größe">Größe</h3> + +<p>Dies ist einer der Bereiche, in denen sich radiale von linearen Farbverläufen unterscheiden. Es kann ein Größenwert angegeben werden, der den Punkt definiert, der die Größe des Kreises oder der Ellipse bestimmt. Siehe die <a href="/de/docs/Web/CSS/radial-gradient#Größenkonstanten">Beschreibung der Größenkonstanten</a> für Details.</p> + +<h4 id="Beispiel_closest-side_für_Ellipsen">Beispiel: <code>closest-side</code> für Ellipsen</h4> + +<p>Diese Ellipse verwendet den Größenwert <code>closest-side</code>, welcher bedeutet, dass die Größe durch die Distanz zwischen dem Startpunkt (der Mitte) und der nähesten Seite der eingeschlossenen Box bestimmt wird.</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Screenshot</td> + <td class="header">Livedemo</td> + </tr> + <tr> + <td><img alt="radial_ellipse_size1.png" class="default internal" src="/@api/deki/files/3960/=radial_ellipse_size1.png"></td> + <td> + <div style=""> </div> + </td> + </tr> + </tbody> +</table> + +<pre class="brush: css">background: radial-gradient(ellipse closest-side, red, yellow 10%, #1E90FF 50%, white); +</pre> + +<h4 id="Beispiel_farthest-corner_für_Ellipsen">Beispiel: <code>farthest-corner</code> für Ellipsen</h4> + +<p>Dieses Beispiel ist ähnlich zum vorherigen mit dem Unterschied, dass die Größe der Ellipse durch <code>farthest-corner</code> bestimmt wird, welches die Größe des Verlaufs durch die Distanz zwischen Startpunkt und der vom Startpunkt am weitesten entfernten Ecke der engeschlossenen Box bestimmt.</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Screenshot</td> + <td class="header">Livedemo</td> + </tr> + <tr> + <td><img alt="radial_ellipse_size2.png" class="default internal" src="/@api/deki/files/3961/=radial_ellipse_size2.png"></td> + <td> + <div style=""> </div> + </td> + </tr> + </tbody> +</table> + +<pre class="brush: css">background: radial-gradient(ellipse farthest-corner, red, yellow 10%, #1E90FF 50%, white); +</pre> + +<h4 id="Beispiel_closest-side_für_Kreise">Beispiel: <code>closest-side</code> für Kreise</h4> + +<p>Dieses Beispiel verwendet <code>closest-side</code>, welches die Größe des Kreises als die Distanz zwischen dem Startpunkt und der nähesten Seite definiert.</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Screenshot</td> + <td class="header">Livedemo</td> + </tr> + <tr> + <td><img alt="radial_circle_size1.png" class="default internal" src="/@api/deki/files/3962/=radial_circle_size1.png"></td> + <td> + <div style=""> </div> + </td> + </tr> + </tbody> +</table> + +<pre class="brush: css">background: radial-gradient(circle closest-side, red, yellow 10%, #1E90FF 50%, white); +</pre> + +<p>Hier entspricht der Radius des Kreises der Hälfte der Höhe der Box, da der obere und untere Rand gleich weit vom Startpunkt entfernt sind und näher als der linke und rechte Rand sind.</p> + +<h2 id="Wiederholung_von_Farbverläufen">Wiederholung von Farbverläufen</h2> + +<p>Die {{cssxref("linear-gradient")}} und {{cssxref("radial-gradient")}} Eigenschaften unterstützen nicht automatisch die Wiederholung von Farbstopps. Jedoch sind die Eigenschaften {{cssxref("repeating-linear-gradient")}} und {{cssxref("repeating-radial-gradient")}} für diese Funktionalität verfügbar.</p> + +<h3 id="Beispiele_Sich_wiederholender_linearer_Farbverlauf">Beispiele: Sich wiederholender linearer Farbverlauf</h3> + +<p>Dieses Beispiel verwendet {{cssxref("repeating-linear-gradient")}}, um einen Farbverlauf zu erzeugen:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Screenshot</td> + <td class="header">Livedemo</td> + </tr> + <tr> + <td><img alt="repeating_linear_gradient.png" class="default internal" src="/@api/deki/files/3964/=repeating_linear_gradient.png"></td> + <td> + <div style=""> </div> + </td> + </tr> + </tbody> +</table> + +<pre class="brush: css">background: repeating-linear-gradient(-45deg, red, red 5px, white 5px, white 10px); +</pre> + +<p>Ein weiteres Beispiel, das die {{cssxref("repeating-linear-gradient")}} Eigenschaft verwendet.</p> + +<p><a href="/@api/deki/files/6192/=repeat_background_gradient_checked.png"><img alt="repeat_background_gradient_checked.png" class="default internal" src="/@api/deki/files/6192/=repeat_background_gradient_checked.png?size=thumb" style="height: 160px; width: 160px;"></a></p> + +<pre class="brush: css">background-color: #000; +background-image: repeating-linear-gradient(90deg, transparent, transparent 50px, + rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px, + rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px, + rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px), +repeating-linear-gradient(0deg, transparent, transparent 50px, rgba(255, 127, 0, 0.25) 50px, + rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px, rgba(255, 127, 0, 0.25) 63px, + rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px, rgba(255, 206, 0, 0.25) 116px, + rgba(255, 206, 0, 0.25) 166px), +repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(143, 77, 63, 0.25) 5px, + rgba(143, 77, 63, 0.25) 10px), +repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(143, 77, 63, 0.25) 5px, + rgba(143, 77, 63, 0.25) 10px); +</pre> + +<h3 id="Beispiel_Sich_wiederholender_radialer_Farbverlauf">Beispiel: Sich wiederholender radialer Farbverlauf</h3> + +<p>Dieses Beispiel verwendet {{cssxref("repeating-radial-gradient")}}, um einen Farbverlauf zu erzeugen:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Screenshot</td> + <td class="header">Livedemo</td> + </tr> + <tr> + <td><img alt="repeating_radial_gradient.png" class="default internal" src="/@api/deki/files/3965/=repeating_radial_gradient.png"></td> + <td> + <div style=""> </div> + </td> + </tr> + </tbody> +</table> + +<pre class="brush: css">background: repeating-radial-gradient(black, black 5px, white 5px, white 10px); +</pre> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Farbverlauf-bezogene Artikel: {{cssxref("<image>")}}, {{cssxref("<gradient>")}}, {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}}.</li> +</ul> 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/consistent_list_indentation/index.html index b2309f5e82..b2309f5e82 100644 --- a/files/de/web/css/css_lists_and_counters/konsistente_listeneinrückung/index.html +++ b/files/de/web/css/css_lists_and_counters/consistent_list_indentation/index.html 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/using_css_counters/index.html index 252f90b530..252f90b530 100644 --- a/files/de/web/css/css_lists_and_counters/css_zähler_verwenden/index.html +++ b/files/de/web/css/css_lists_and_counters/using_css_counters/index.html diff --git a/files/de/web/css/css_masken/index.html b/files/de/web/css/css_masking/index.html index 74001bd680..74001bd680 100644 --- a/files/de/web/css/css_masken/index.html +++ b/files/de/web/css/css_masking/index.html diff --git a/files/de/web/css/motion_path/index.html b/files/de/web/css/css_motion_path/index.html index 5c09de0a90..5c09de0a90 100644 --- a/files/de/web/css/motion_path/index.html +++ b/files/de/web/css/css_motion_path/index.html diff --git a/files/de/web/css/css_namensräume/index.html b/files/de/web/css/css_namespaces/index.html index e9d0879cb2..e9d0879cb2 100644 --- a/files/de/web/css/css_namensräume/index.html +++ b/files/de/web/css/css_namespaces/index.html diff --git a/files/de/web/css/css_textdekoration/index.html b/files/de/web/css/css_text_decoration/index.html index 389d7f6a5e..389d7f6a5e 100644 --- a/files/de/web/css/css_textdekoration/index.html +++ b/files/de/web/css/css_text_decoration/index.html diff --git a/files/de/web/css/css_transforms/css_transformationen_verwenden/index.html b/files/de/web/css/css_transforms/using_css_transforms/index.html index 0d761f544f..0d761f544f 100644 --- a/files/de/web/css/css_transforms/css_transformationen_verwenden/index.html +++ b/files/de/web/css/css_transforms/using_css_transforms/index.html diff --git a/files/de/web/css/css_typen/index.html b/files/de/web/css/css_types/index.html index bb08a42cd4..bb08a42cd4 100644 --- a/files/de/web/css/css_typen/index.html +++ b/files/de/web/css/css_types/index.html diff --git a/files/de/web/css/css_user_interface/index.html b/files/de/web/css/css_user_interface/index.html deleted file mode 100644 index 7ee80c0eef..0000000000 --- a/files/de/web/css/css_user_interface/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -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 -translation_of_original: Web/CSS/CSS_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/grid-gap/index.html b/files/de/web/css/gap/index.html index b6953c3258..b6953c3258 100644 --- a/files/de/web/css/grid-gap/index.html +++ b/files/de/web/css/gap/index.html diff --git a/files/de/web/css/id-selektoren/index.html b/files/de/web/css/id_selectors/index.html index 921e391d80..921e391d80 100644 --- a/files/de/web/css/id-selektoren/index.html +++ b/files/de/web/css/id_selectors/index.html diff --git a/files/de/web/css/index/index.html b/files/de/web/css/index/index.html deleted file mode 100644 index 2c59185221..0000000000 --- a/files/de/web/css/index/index.html +++ /dev/null @@ -1,8 +0,0 @@ ---- -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/vererbung/index.html b/files/de/web/css/inheritance/index.html index f5d4a097b2..f5d4a097b2 100644 --- a/files/de/web/css/vererbung/index.html +++ b/files/de/web/css/inheritance/index.html diff --git a/files/de/web/css/initialwert/index.html b/files/de/web/css/initial_value/index.html index 7d5e7e18dd..7d5e7e18dd 100644 --- a/files/de/web/css/initialwert/index.html +++ b/files/de/web/css/initial_value/index.html diff --git a/files/de/web/css/-webkit-mask-origin/index.html b/files/de/web/css/mask-origin/index.html index 7cba7cd7fc..7cba7cd7fc 100644 --- a/files/de/web/css/-webkit-mask-origin/index.html +++ b/files/de/web/css/mask-origin/index.html diff --git a/files/de/web/css/-webkit-mask-repeat/index.html b/files/de/web/css/mask-repeat/index.html index 3ba0646adb..3ba0646adb 100644 --- a/files/de/web/css/-webkit-mask-repeat/index.html +++ b/files/de/web/css/mask-repeat/index.html diff --git a/files/de/web/css/none/index.html b/files/de/web/css/none/index.html deleted file mode 100644 index 8c17b309fa..0000000000 --- a/files/de/web/css/none/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: none -slug: Web/CSS/none -translation_of: Web/CSS/float -translation_of_original: Web/CSS/none ---- -<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 deleted file mode 100644 index 1bf3818e01..0000000000 --- a/files/de/web/css/normal/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: normal -slug: Web/CSS/normal -translation_of: Web/CSS/font-variant -translation_of_original: Web/CSS/normal ---- -<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/word-wrap/index.html b/files/de/web/css/overflow-wrap/index.html index fd803452d4..fd803452d4 100644 --- a/files/de/web/css/word-wrap/index.html +++ b/files/de/web/css/overflow-wrap/index.html diff --git a/files/de/web/css/property_template/index.html b/files/de/web/css/property_template/index.html deleted file mode 100644 index 57b2483609..0000000000 --- a/files/de/web/css/property_template/index.html +++ /dev/null @@ -1,165 +0,0 @@ ---- -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/css_referenz/index.html b/files/de/web/css/reference/index.html index 89a0c83e25..89a0c83e25 100644 --- a/files/de/web/css/css_referenz/index.html +++ b/files/de/web/css/reference/index.html diff --git a/files/de/web/css/ersetztes_element/index.html b/files/de/web/css/replaced_element/index.html index c75a4aec95..c75a4aec95 100644 --- a/files/de/web/css/ersetztes_element/index.html +++ b/files/de/web/css/replaced_element/index.html diff --git a/files/de/web/css/kurzformat_eigenschaft/index.html b/files/de/web/css/shorthand_properties/index.html index 1923d5efd5..1923d5efd5 100644 --- a/files/de/web/css/kurzformat_eigenschaft/index.html +++ b/files/de/web/css/shorthand_properties/index.html diff --git a/files/de/web/css/spezifität/index.html b/files/de/web/css/specificity/index.html index e8a0e22302..e8a0e22302 100644 --- a/files/de/web/css/spezifität/index.html +++ b/files/de/web/css/specificity/index.html diff --git a/files/de/web/css/url/index.html b/files/de/web/css/url()/index.html index dd120e3800..dd120e3800 100644 --- a/files/de/web/css/url/index.html +++ b/files/de/web/css/url()/index.html diff --git a/files/de/web/css/-moz-user-modify/index.html b/files/de/web/css/user-modify/index.html index d1ec135fa0..d1ec135fa0 100644 --- a/files/de/web/css/-moz-user-modify/index.html +++ b/files/de/web/css/user-modify/index.html diff --git a/files/de/web/css/-moz-user-select/index.html b/files/de/web/css/user-select/index.html index aefa619439..aefa619439 100644 --- a/files/de/web/css/-moz-user-select/index.html +++ b/files/de/web/css/user-select/index.html diff --git a/files/de/web/css/wertdefinitionssyntax/index.html b/files/de/web/css/value_definition_syntax/index.html index da49131901..da49131901 100644 --- a/files/de/web/css/wertdefinitionssyntax/index.html +++ b/files/de/web/css/value_definition_syntax/index.html |