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 diebackground-color-Eigenschaft den Titel background-color.- slug
Der
slug-Wert ist das Ende des URL-Pfads hinterhttps://developer.mozilla.org/de/docs/. Dies wird alsWeb/CSS/Reference/Properties/name-der-eigenschaftformatiert. Zum Beispiel ist der Slug für diebackground-color-EigenschaftWeb/CSS/Reference/Properties/background-color. Für ein mehrteiliges Element wieGetting_startedin 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 istcss-property. Für eine Kurzform-CSS-Eigenschaft ist der Wertcss-shorthand-property. Zum Beispiel ist derpage-type-Wert für die animation-Eigenschaftcss-shorthand-property, weil sie eine Kurzform-Eigenschaft ist, während derpage-type-Wert für die animation-delay-Eigenschaftcss-propertyist.- 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.NameOfThePropertydurch 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
cssreffü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 immdn/dataRepository 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.
/* 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:
## 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:
## 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)