CSS property page template

Note: Entfernen Sie diesen Hinweisblock, bevor Sie ihn veröffentlichen.

Seiten-Metadaten:

Die Metadaten am Anfang der Seite definieren die sogenannten "Seitendaten". Die Werte sollten entsprechend der spezifischen Eigenschaft aktualisiert werden.

md
---
title: NameOfTheProperty
slug: Web/CSS/NameOfTheProperty
page-type: css-property OR css-shorthand-property
status:
  - experimental
  - deprecated
  - non-standard
browser-compat: css.properties.NameOfTheProperty
---
title

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

slug

Der slug-Wert ist das Ende des URL-Pfads nach https://developer.mozilla.org/de/docs/. Dieses wird formatiert als Web/CSS/NameOfTheProperty. Zum Beispiel ist der Slug für die background-color-Eigenschaft Web/CSS/background-color. Bei einem mehrteiligen Komponenten-Namen wie Getting_started in einem Slug sollte der Slug einen Unterstrich verwenden, wie in /de/docs/Learn/HTML/Getting_started.

page-type

Der page-type-Wert für CSS-Eigenschaften ist css-property. Für eine verkürzte CSS-Eigenschaft ist der Wert css-shorthand-property. Zum Beispiel ist der page-type-Wert für die animation-Eigenschaft css-shorthand-property, da es sich um eine Abkürzungseigenschaft handelt, während der page-type-Wert für die animation-delay-Eigenschaft css-property ist.

status

Flags, die den Status dieses Features beschreiben. Ein Array, das einen oder mehrere der folgenden Begriffe enthalten kann: experimental, deprecated, non-standard. Dieser Schlüssel sollte nicht manuell festgelegt werden, sondern wird automatisch basierend auf den Werten in den Browser-Kompatibilitätsdaten für das Feature gesetzt. Siehe "Anleitung zur Hinzufügung oder Aktualisierung von Feature-Status".

browser-compat

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

Makros oben auf der Seite

Eine Reihe von Makroaufrufen erscheint am Anfang des Inhaltsbereichs (unmittelbar unter den Seiten-Metadaten). Diese Makros werden automatisch durch die Toolchain hinzugefügt (es ist nicht nötig, sie hinzuzufügen/zu entfernen):

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

Sie sollten die folgenden Makros gemäß den untenstehenden Ratschlägen aktualisieren oder löschen:

  • {{CSSRef}}: Dieses Makro muss auf jeder CSS-Eigenschaftsseite vorhanden sein. Es erzeugt eine passende CSS-Seitenleiste, abhängig von den Tags, die auf der Seite enthalten sind. Denken Sie daran, das {{MDNSidebar}}-Makro zu entfernen, wenn Sie diese Vorlage verwenden.

Status-Header-Makros nicht manuell bereitstellen. Verweisen Sie auf den Abschnitt "Anleitung zur Hinzufügung oder Aktualisierung von Feature-Status", um diese Status zur Seite hinzuzufügen.

Beispiele für die Experimentell-, Veraltet- und Nicht-standard-Banner werden direkt nach diesem Hinweisblock angezeigt.

Andere Makros auf der Seite

  • Formeller Syntaxabschnitt: Der Inhalt für den Abschnitt Formelle Syntax wird mit dem Makro {{CSSSyntax}} generiert. Dieses Makro holt Daten aus den Spezifikationen unter Verwendung des @webref/css npm-Pakets.

  • Formeller Definitionsabschnitt: Der Inhalt für den Abschnitt Formelle Definition wird mit dem Makro {{CSSInfo}} generiert. Damit dieser Abschnitt Daten enthält, müssen Sie sicherstellen, dass ein entsprechender Eintrag für die betreffende Eigenschaft in der Daten-Datei properties.json im mdn/data Repository ausgefüllt wurde. Siehe die Seite Eigenschaften für mehr Informationen.

  • Spezifikationen und Browser-Kompatibilitätsabschnitte: Das Build-Tool verwendet automatisch das Schlüssel-Wert-Paar browser-compat aus den Seitenmetadaten, um Daten in die Abschnitte Spezifikationen und Browser-Kompatibilität 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 compat data repo erstellen/aktualisieren müssen. Siehe unseren Leitfaden für Kompatibilitätstabellen für Informationen zum Hinzufügen oder Bearbeiten von Einträgen.

Erinnern Sie sich, diesen Hinweisblock zu entfernen, bevor Sie veröffentlichen.

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig, bevor Sie diese produktiv verwenden.

Veraltet: Diese Funktion wird nicht mehr empfohlen. Obwohl einige Browser sie möglicherweise noch unterstützen, kann sie bereits aus den relevanten Webstandards entfernt worden sein, befindet sich im Prozess der Entfernung oder wird nur aus Kompatibilitätsgründen beibehalten. Vermeiden Sie die Verwendung und aktualisieren Sie gegebenenfalls bestehenden Code; siehe die Kompatibilitätstabelle am Ende dieser Seite, um Ihre Entscheidung zu treffen. Beachten Sie, dass diese Funktion jederzeit nicht mehr funktionieren kann.

Kein Standard: Diese Funktion ist nicht standardisiert und befindet sich nicht im Standardisierungsprozess. Verwenden Sie sie nicht auf Produktionsseiten, die auf das Web ausgerichtet sind: Sie wird nicht für alle Benutzer funktionieren. Außerdem kann es große Inkompatibilitäten zwischen Implementierungen geben und das Verhalten kann sich in Zukunft ändern.

Beginnen Sie den Inhalt auf der Seite mit einem einführenden Absatz, der die Eigenschaft benennt und erklärt, was sie tut. Dieser sollte idealerweise aus einem oder zwei kurzen Sätzen bestehen.

Probieren Sie es aus

Dieser Titel wird automatisch durch das Makro {{EmbedInteractiveExample}} generiert.

Dieser Abschnitt ist für interaktive Beispiele vorgesehen, die mit dem Makro {{EmbedInteractiveExample}} hinzugefügt wurden. Sie erstellen diese Beispiele im mdn/interactive-examples Repository. Weitere Informationen finden Sie im Abschnitt Interaktive Beispiele in unseren Schreibleitlinien.

Bestandteile des Kurzbefehls

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

Syntax

Fügen Sie die gebräuchlichen Anwendungsfälle als Codeblock hinzu 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 was er darstellt, hinzu.

subvalue2

Fügen Sie eine Beschreibung des Subwerts, seines Datentyps und was er darstellt, hinzu.

Beschreibung

Dies ist ein optionaler Abschnitt, um eine Beschreibung der Eigenschaft und eine Erklärung ihrer Funktionsweise zu enthalten. Verwenden Sie diesen Abschnitt, um verwandte Begriffe zu erklären und Anwendungsfälle für die Eigenschaft hinzuzufügen.

Formelle Definition

{{CSSInfo}}

Um dieses Makro zu verwenden, entfernen Sie die Backticks und den Rückschrägstrich in der Markdown-Datei.

Formelle Syntax

{{CSSSyntax}}

Um dieses Makro zu verwenden, entfernen Sie die Backticks und den Rückschrägstrich in der Markdown-Datei.

Barrierefreiheit

Dies ist ein optionaler Abschnitt. Nehmen Sie Barrierefreiheitshinweise, bewährte Praktiken und potenzielle Bedenken auf, die Entwickler bei der Verwendung dieser Eigenschaft beachten sollten. Sie können auch Umgehungslösungen oder Lösungen, wo anwendbar, aufnehmen.

Beispiele

Beachtesn, dass wir den 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 beschreiben, was das Beispiel tut. 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, wie man Code-Beispiele hinzufügt für weitere Informationen.

Hinweis: Manchmal möchten Sie auf Beispiele verweisen, die auf einer anderen Seite angegeben sind.

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

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

md
## Beispiele

### Verwenden der fetch API

Beispiel für 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 einfach die Links direkt unter der H2-Überschrift "Beispiele" hinzu. Zum Beispiel:

md
## Beispiele

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

Spezifikationen

{{Specifications}}

Um dieses Makro zu verwenden, entfernen Sie die Backticks und den Rückschrägstrich in der Markdown-Datei.

Browser-Kompatibilität

{{Compat}}

Um dieses Makro zu verwenden, entfernen Sie die Backticks und den Rückschrägstrich in der Markdown-Datei.

Siehe auch

Fügen Sie Links zu Referenzseiten und Leitfäden hinzu, die mit der aktuellen Eigenschaft in Verbindung stehen. Weitere Richtlinien finden Sie im Abschnitt Siehe auch im Schreibstil-Leitfaden.

  • link1
  • link2
  • external_link (Jahr)