Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

CSS-Eigenschafts-Template

Hinweis: Entfernen Sie diesen Hinweisblock vor der Veröffentlichung.

Seiten-Metadaten:

Die Metadaten am Anfang der Seite werden zur Definition der "Seiten-Metadaten" verwendet. Die Werte sollten entsprechend für die jeweilige Eigenschaft aktualisiert werden.

md
---
title: name-der-eigenschaft
slug: Web/CSS/Reference/Properties/name-der-eigenschaft
page-type: css-property OR css-shorthand-property
status:
  - deprecated
  - experimental
  - non-standard
browser-compat: css.properties.name-der-eigenschaft
sidebar: cssref
---
title

Der title-Wert wird oben auf der Seite angezeigt. Das Titel-Format ist name-der-eigenschaft. Zum Beispiel hat die background-color-Eigenschaft den Titel background-color.

slug

Der slug-Wert ist das Ende des URL-Pfads hinter https://developer.mozilla.org/de/docs/. Dies wird als Web/CSS/Reference/Properties/name-der-eigenschaft formatiert. Zum Beispiel ist der Slug für die background-color-Eigenschaft Web/CSS/Reference/Properties/background-color. Für ein mehrteiliges Element wie Getting_started in einem Slug sollte der Slug ein Unterstrich verwenden, wie in /de/docs/Learn_web_development/Core/Structuring_content.

page-type

Der page-type-Wert für CSS-Eigenschaften ist css-property. Für eine Kurzform-CSS-Eigenschaft ist der Wert css-shorthand-property. Zum Beispiel ist der page-type-Wert für die animation-Eigenschaft css-shorthand-property, weil sie eine Kurzform-Eigenschaft ist, während der page-type-Wert für die animation-delay-Eigenschaft css-property ist.

status

Flags, die den Status dieser Funktion beschreiben. Ein Array, das einen oder mehrere der folgenden Werte enthalten kann: experimental, deprecated, non-standard. Dieser Schlüssel sollte nicht manuell gesetzt werden: Er wird automatisch basierend auf Werten in den Daten zur Browser-Kompatibilität für die Funktion gesetzt. Siehe "Wie Feature-Statusse hinzugefügt oder aktualisiert werden".

browser-compat

Ersetzen Sie den Platzhalterwert css.properties.NameOfTheProperty durch den Abfragestring für die Eigenschaft im Browser compatibility data repo. Überprüfen Sie den Abschnitt Andere Makros in der Seite dieses Hinweisblocks, um zu sehen, wie dieses Schlüssel-Wert-Paar verwendet wird, um Inhalte für die Abschnitte Spezifikationen und Browser-Kompatibilität zu generieren.

Dies ist cssref für alle CSS-Leitfaden- und Referenzseiten. Siehe Seitenstrukturen: Sidebars für Details.

Makros am Seitenanfang

Eine Reihe von Makroaufrufen erscheinen am Anfang des Inhaltsbereichs (unmittelbar unter den Seiten-Metadaten). Diese Makros werden automatisch durch die Toolchain hinzugefügt (es ist nicht erforderlich, diese hinzuzufügen oder zu entfernen):

  • {{SeeCompatTable}}: Dieses Makro generiert ein Experimentell-Banner, das darauf hinweist, dass die Technologie experimentell ist. Wenn die Technologie experimentell ist und hinter einer Präferenz in Firefox verborgen ist, sollten Sie auch einen Eintrag dafür auf der Seite Experimentelle Funktionen in Firefox ausfüllen.
  • {{Deprecated_Header}}: Dieses Makro generiert ein Veraltet-Banner, das darauf hinweist, dass die Nutzung der Technologie nicht empfohlen wird.
  • {{Non-standard_Header}} — Dieses generiert ein Nicht-Standard-Banner, das darauf hinweist, dass die Funktion nicht Teil einer Spezifikation ist.

Sie sollten die folgenden Makros entsprechend den unten gegebenen Ratschlägen aktualisieren oder löschen:

Fügen Sie keine Status-Header-Makros manuell hinzu. Beziehen Sie sich auf den Abschnitt "Wie Feature-Statusse hinzugefügt oder aktualisiert werden", um diese Statusse zur Seite hinzuzufügen.

Beispiele der Experimentell, Veraltet und Nicht-Standard-Banner werden direkt nach diesem Hinweisblock angezeigt.

Andere Makros auf der Seite

  • Abschnitte zum formalen Syntax: Der Inhalt für den Abschnitt Formaler Syntax wird mit dem {{CSSSyntax}}-Makro generiert. Dieses Makro ruft Daten aus den Spezifikationen mittels des @webref/css npm package ab.
  • Abschnitte zur formalen Definition: Der Inhalt für den Abschnitt Formale Definition wird mit dem {{CSSInfo}}-Makro generiert. Damit dieser Abschnitt Daten hat, müssen Sie sicherstellen, dass ein entsprechender Eintrag für die jeweilige Eigenschaft in der properties.json Datendatei im mdn/data Repository ausgefüllt wurde. Siehe die Properties Seite für mehr Informationen.
  • Spezifikations- und Browser-Kompatibilitätsabschnitte: Das Build-Tool verwendet das browser-compat-Schlüssel-Wert-Paar aus den Seiten-Metadaten, um Daten in die Spezifikationen und Browser-Kompatibilität Abschnitte einzufügen (ersetzt die {{Specifications}} und {{Compat}}-Makros in diesen Abschnitten).

Beachten Sie, dass Sie möglicherweise zuerst einen Eintrag für die Eigenschaft und ihre Spezifikation in unserem Browser-Kompatibilitätsdaten-Repo erstellen/aktualisieren müssen. Siehe unsere Leitfaden für Kompatibilitätstabellen für Informationen zum Hinzufügen oder Bearbeiten von Einträgen.

Denken Sie daran, diesen Hinweisblock vor der Veröffentlichung zu entfernen.

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Veraltet: Diese Funktion wird nicht mehr empfohlen. Obwohl einige Browser sie möglicherweise noch unterstützen, könnte sie bereits aus den relevanten Webstandards entfernt worden sein, in Kürze entfernt werden oder nur noch aus Kompatibilitätsgründen bestehen. Vermeiden Sie die Verwendung und aktualisieren Sie vorhandenen Code, falls möglich; siehe die Kompatibilitätstabelle am Ende dieser Seite, um Ihre Entscheidung zu unterstützen. Beachten Sie, dass diese Funktion jederzeit aufhören könnte zu funktionieren.

Nicht standardisiert: Diese Funktion ist nicht standardisiert. Wir raten davon ab, nicht-standardisierte Funktionen auf produktiven Webseiten zu verwenden, da sie nur von bestimmten Browsern unterstützt werden und sich in Zukunft ändern oder entfernt werden können. Unter Umständen kann sie jedoch eine geeignete Option sein, wenn es keine standardisierte Alternative gibt.

Beginnen Sie den Seiteninhalt mit einem einleitenden Absatz, der die Eigenschaft benennt und erklärt, was sie tut. Dies sollte idealerweise ein oder zwei kurze Sätze sein.

Probieren Sie es aus

Dieser Abschnitt wird durch das InteractiveExample-Makro generiert. Dies beinhaltet den Abschnittstitel "Probieren Sie es aus" und den Code-Editor. Siehe den Abschnitt Interaktive Beispiele in unseren Schreibrichtlinien für mehr Informationen.

Komponenten-Eigenschaften

Fügen Sie diesen Abschnitt nur für Kurzform-Eigenschaften hinzu, wie animation, um alle zugehörigen Langform-Eigenschaften aufzulisten.

Syntax

Fügen Sie die allgemeinen Anwendungsfälle als Codeblock ein und beschreiben Sie die Komponenten-Subwerte, die einen vollständigen Wert bilden.

css
/* Insert code block showing common use cases */
/* or categories of values */

Werte

Fügen Sie einen Begriff und eine Definition für jeden Subwert hinzu.

subvalue1

Fügen Sie eine Beschreibung des Subwerts, seines Datentyps, und wofür er steht, hinzu.

subvalue2

Fügen Sie eine Beschreibung des Subwerts, seines Datentyps, und wofür er steht, hinzu.

Warnung: Fügen Sie keine Inline-Status-Makros auf CSS-Seiten hinzu.

Beschreibung

Dies ist ein optionaler Abschnitt, um eine Beschreibung der Eigenschaft hinzuzufügen und zu erklären, wie sie funktioniert. Nutzen Sie diesen Abschnitt, um verwandte Begriffe zu erklären und Anwendungsfälle für die Eigenschaft hinzuzufügen.

Formale Definition

{{CSSInfo}}

Um dieses Makro zu verwenden, entfernen Sie die Backticks und den Backslash in der Markdown-Datei.

Formale Syntax

{{CSSSyntax}}

Um dieses Makro zu verwenden, entfernen Sie die Backticks und den Backslash in der Markdown-Datei.

Barrierefreiheit

Dies ist ein optionaler Abschnitt. Fügen Sie Barrierefreiheitshinweise, Best Practices und potenzielle Bedenken hinzu, die Entwickler beachten sollten, während sie diese Eigenschaft verwenden. Sie können auch Workarounds oder Lösungen einfügen, wo zutreffend.

Beispiele

Beachten Sie, dass wir das Plural „Beispiele“ verwenden, auch wenn die Seite nur ein Beispiel enthält.

Fügen Sie eine beschreibende Überschrift hinzu

Jedes Beispiel muss eine H3-Überschrift (###) haben, die das Beispiel benennt. Die Überschrift sollte beschreibend dafür sein, was das Beispiel macht. Zum Beispiel sagt „Ein einfaches Beispiel“ nichts über das Beispiel aus und ist daher keine gute Überschrift. Die Überschrift sollte prägnant sein. Für eine längere Beschreibung verwenden Sie den Absatz nach der Überschrift.

Siehe unseren Leitfaden zum Hinzufügen von Code-Beispielen für mehr Informationen.

Hinweis: Manchmal möchten Sie auf Beispiele auf einer anderen Seite verlinken.

Szenario 1: Wenn Sie einige Beispiele auf dieser Seite und einige weitere Beispiele auf einer anderen Seite haben:

Fügen Sie eine H3-Überschrift (###) für jedes Beispiel auf dieser Seite hinzu und dann eine abschließende H3-Überschrift (###) mit dem Text "Weitere Beispiele", unter dem Sie auf die Beispiele auf anderen Seiten verlinken können. Zum Beispiel:

md
## Beispiele

### Verwenden der fetch API

Beispiel von Fetch

### Weitere Beispiele

Links zu weiteren Beispielen auf anderen Seiten

Szenario 2: Wenn Sie nur Beispiele auf einer anderen Seite haben und keine auf dieser Seite:

Fügen Sie keine H3-Überschriften hinzu; fügen Sie die Links direkt unter der H2-Überschrift "Beispiele" hinzu. Zum Beispiel:

md
## Beispiele

Für Beispiele dieser API, siehe [die Seite über fetch()](https://example.org/).

Spezifikationen

{{Specifications}}

Um dieses Makro zu verwenden, entfernen Sie die Backticks und den Backslash in der Markdown-Datei.

Browser-Kompatibilität

{{Compat}}

Um dieses Makro zu verwenden, entfernen Sie die Backticks und den Backslash in der Markdown-Datei.

Siehe auch

Fügen Sie Links zu Referenzseiten und Leitfäden ein, die mit der aktuellen Eigenschaft in Zusammenhang stehen. Für weitere Richtlinien, siehe den Siehe auch Abschnitt im Schreibstil-Leitfaden.

  • link1
  • link2
  • external_link (Jahr)