Häufig verwendete Makros

Diese Seite listet viele der universell einsetzbaren Makros auf, die für die Nutzung auf MDN erstellt wurden. Für zusätzliche Anleitungen zur Verwendung dieser Makros siehe Verwendung von Makros.

Informationen zu Makros, die selten verwendet, nur in speziellen Kontexten genutzt oder veraltet sind, finden Sie unter Andere Makros.

Verlinkung

MDN bietet eine Reihe von Link-Makros, um das Erstellen von Links zu Referenzseiten, Glossareinträgen und anderen Themen zu erleichtern.

Link-Makros werden gegenüber normalen Markdown-Links empfohlen, da sie prägnant und übersetzungsfreundlich sind. Zum Beispiel muss ein mit einem Makro erstellter Glossar- oder Referenzlink nicht übersetzt werden: In anderen Lokalisierungen wird er automatisch auf die korrekte Dateiversion verlinken.

Das Glossary Makro erstellt einen Link zu einem spezifizierten Eintrag im MDN-Glossar. Dieses Makro akzeptiert einen erforderlichen und einen optionalen Parameter:

  1. Der Name des Begriffs (wie "HTML"): {{Glossary("HTML")}} ergibt HTML
  2. Optional: Der Text, der im Artikel anstelle des Begriffsnamens angezeigt werden soll: {{Glossary("CSS", "Cascading Style Sheets")}} ergibt Cascading Style Sheets

Verlinkung zu Seiten in Referenzen

Es gibt Makros für die lokalisierungsunabhängige Verlinkung zu Seiten in bestimmten Referenzbereichen von MDN: JavaScript, CSS, HTML-Elemente, SVG usw.

Die Makros sind einfach zu verwenden. Im Minimalfall müssen Sie nur den Namen des Objekts, zu dem verlinkt werden soll, als erstes Argument angeben. Die meisten Makros nehmen auch ein zweites Argument an, mit dem Sie den angezeigten Text ändern können (Dokumentation finden Sie in den Links in der ganz linken Spalte unten).

Makro Verlinkt zur Seite unter Beispiel
CSSxRef CSS-Referenz (/Web/CSS/Reference) {{CSSxRef("cursor")}} ergibt cursor.
DOMxRef DOM-Referenz (/Web/API) {{DOMxRef("Document")}} oder {{DOMxRef("document")}} ergibt [`Document`](/de/docs/Web/API/Document),
{{DOMxRef("document.getElementsByName()")}} ergibt [`document.getElementsByName()`](/de/docs/Web/API/Document/getElementsByName)
{{DOMxRef("Node")}} ergibt [`Node`](/de/docs/Web/API/Node).
Sie können den angezeigten Text mit einem zweiten Parameter ändern: {{DOMxRef("document.getElementsByName()","getElementsByName()")}} ergibt [`getElementsByName()`](/de/docs/Web/API/Document/getElementsByName).
HTMLElement HTML-Elemente Referenz (/Web/HTML/Element) {{HTMLElement("select")}} ergibt <select>
JSxRef JavaScript-Referenz (/Web/JavaScript/Reference). {{JSxRef("Promise")}} ergibt Promise
SVGAttr SVG-Attributreferenz (/Web/SVG/Attribute). {{SVGAttr("d")}} ergibt d
SVGElement SVG-Element referenz (/Web/SVG/Element). {{SVGElement("view")}} ergibt <view>
HTTPHeader HTTP-Header (/Web/HTTP/Headers). {{HTTPHeader("ACCEPT")}} ergibt ACCEPT
HTTPMethod HTTP-Anfragemethoden (/Web/HTTP/Methods). {{HTTPMethod("HEAD")}} ergibt HEAD
HTTPStatus HTTP-Antwortstatuscodes (/Web/HTTP/Status) {{HTTPStatus("404")}} ergibt 404

Previous, Next und PreviousNext bieten Navigationskontrollen für Artikel, die Teil einer Sequenz sind. Für die Einweg-Vorlagen ist nur der Wiki-Standort des vorherigen oder nächsten Artikels in der Sequenz erforderlich. Für PreviousNext sind die beiden erforderlichen Parameter die Wiki-Standorte der entsprechenden Artikel. Der erste Parameter ist für den vorherigen Artikel und der zweite für den nächsten Artikel.

Code-Beispiele

Live-Beispiele

Seitengenerierung

Es gibt Vorlagen für fast jede große Sammlung von Seiten. Sie verlinken typischerweise zurück zur Hauptseite der Referenz/Leitfaden/Anleitung (dies ist oft notwendig, weil unsere Brotkrumen dies manchmal nicht können) und ordnen den Artikel in die entsprechende Kategorie ein.

  • CSSRef generiert die Seitenleiste für CSS-Referenzseiten.
  • HTMLSidebar generiert die Seitenleiste für HTML-Referenzseiten.
  • APIRef generiert die Seitenleiste für Web-API-Referenzseiten.

Allgemeine Formatierung

Inline-Indikatoren für API-Dokumentationen

Optional_Inline und ReadOnlyInline werden in API-Dokumentationen verwendet, üblicherweise wenn die Liste der Eigenschaften eines Objekts oder Parameter einer Funktion beschrieben werden.

Verwendung: {{Optional_Inline}} oder {{ReadOnlyInline}}. Beispiel:

isCustomObject Nur lesbar

Zeigt an, ob true, dass das Objekt ein benutzerdefiniertes ist.

parameterX Optional

Blah blah blah…

Status- und Kompatibilitätsindikatoren

Inline-Indikatoren ohne zusätzliche Parameter

Nicht-standardisiert

Non-standard_Inline fügt eine Inline-Markierung ein, die angibt, dass die API nicht standardisiert und nicht in einer Standardspur ist.

Syntax

{{Non-standard_Inline}}

Beispiele
  • Icon:

Experimentell

Experimental_Inline fügt eine Inline-Markierung ein, die angibt, dass die API nicht weit verbreitet implementiert ist und sich in Zukunft ändern könnte. Für weitere Informationen zur Definition experimentell siehe die Experimentell, veraltet und obsolete Dokumentation.

Syntax

{{Experimental_Inline}}

Beispiele
  • Icon:

Inline-Indikatoren mit Unterstützung für die Angabe der Technologie

Veraltet

Deprecated_Inline fügt eine Inline-Markierung ( ) ein, um von der Nutzung einer offiziell veralteten (oder entfernten) API abzuraten. Für weitere Informationen zur Definition veraltet, siehe die Experimentell, veraltet und obsolete Dokumentation.

Syntax

{{Deprecated_Inline}}

Beispiele
  • Icon:

Header-Indikatoren für Seiten oder Abschnitte

Diese Vorlagen haben dieselbe Semantik wie ihre Inline-Pendants, die oben beschrieben sind. Die Vorlagen sollten direkt unter dem Hauptseitentitel (oder der Brotkrumnavigation, falls verfügbar) in der Referenzseite platziert werden. Sie können auch verwendet werden, um einen Abschnitt auf einer Seite zu kennzeichnen.

  • Non-standard_Header: {{Non-standard_Header}}

    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.

  • SeeCompatTable wird auf Seiten verwendet, die experimentelle Features dokumentieren. Beispiel: {{SeeCompatTable}}

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

  • Deprecated_Header: {{Deprecated_Header}}

    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.

  • SecureContext_Header. Sollte auf Hauptseiten wie Schnittstellenseiten, API-Übersichtsseiten und API-Einstiegspunkten (z.B. navigator.xyz) aber normalerweise nicht auf Unterseiten wie Methoden und Eigenschaftsseiten verwendet werden. Beispiel: {{SecureContext_Header}}

    Sicherer Kontext: Diese Funktion ist nur in sicheren Kontexten (HTTPS) in einigen oder allen unterstützenden Browsern verfügbar.

Kennzeichnung, dass ein Feature in Web-Workern verfügbar ist

Das AvailableInWorkers Makro fügt eine lokalisierte Notiz ein, die anzeigt, dass ein Feature in einem worker context verfügbar ist. Sie können auch einige Argumente übergeben, um anzugeben, dass ein Feature in einem bestimmten Worker-Kontext funktioniert.

Syntax
{{AvailableInWorkers}}
{{AvailableInWorkers("window_and_worker_except_service")}}
Beispiele

Hinweis: Dieses Feature ist verfügbar in Web Workers.

Hinweis: Dieses Feature ist verfügbar in Web Workers, außer in Service Workers.

Makros für Browser-Kompatibilität und Spezifikation

Die folgenden Makros sind auf allen Referenzseiten enthalten, werden jedoch auch von allen Seitentypen unterstützt:

{{Compat}} / {{Compat(<feature>)}} / {{Compat(<feature>, <depth>)}}

Generiert eine Kompatibilitätstabelle für das angegebene Feature im Parameter. Wenn kein Parameter enthalten ist, wird standardmäßig auf die in browser-compat im Frontmatter definierten Features gesetzt. Ein optionaler Tiefenparameter legt fest, wie tief Unterspezifikationen zur Tabelle hinzugefügt werden sollen. Die Tiefe, wenn weggelassen, beträgt 1, was bedeutet, dass nur die erste Ebene der Unterspezifikationsdaten aus BCD in die Tabelle aufgenommen wird.

{{Specifications}} / {{Specifications(<feature>)}}

Enthält die Spezifikation für das angegebene Feature im Parameter. Wenn kein Parameter übergeben wird, wird die aufgelistete Spezifikation durch den Wert für spec_urls im Frontmatter definiert, falls vorhanden, oder aus der in den Browser-Kompatibilitätsdaten unter browser-compat im Frontmatter definierten Spezifikation. Die Spezifikation wird als externer Link gerendert.

Siehe auch