Ersetzte Elemente

In CSS ist ein ersetztes Element ein Element, dessen Darstellung außerhalb des Anwendungsbereichs von CSS liegt; es sind externe Objekte, deren Darstellung unabhängig vom CSS-Formatierungsmodell ist.

Einfacher ausgedrückt sind es Elemente, deren Inhalte nicht von den Stilen des aktuellen Dokuments beeinflusst werden. Die Position des ersetzten Elements kann zwar mit CSS beeinflusst werden, jedoch nicht der Inhalt des ersetzten Elements selbst. Einige ersetzte Elemente, wie <iframe>-Elemente, können eigene Stylesheets haben, aber sie erben nicht die Stile des übergeordneten Dokuments.

Der einzige weitere Einfluss, den CSS auf ein ersetztes Element haben kann, ist, dass es Eigenschaften gibt, die die Positionierung des Inhalts des Elements innerhalb seines Rahmens steuern. Siehe Positionierung von Objekten innerhalb des Inhaltsrahmens steuern für weitere Informationen.

Ersetzte Elemente

Typische ersetzte Elemente sind:

Einige Elemente werden nur in bestimmten Fällen als ersetzte Elemente behandelt:

Die HTML-Spezifikation besagt auch, dass ein <input>-Element ersetzt werden kann, weil <input>-Elemente vom Typ "image" ersetzte Elemente ähnlich wie <img> sind. Andere Formularelemente, einschließlich anderer Typen von <input>-Elementen, werden jedoch ausdrücklich als nicht ersetzte Elemente aufgeführt (die Spezifikation beschreibt deren standardmäßige plattformabhängige Darstellung mit dem Begriff "Widgets").

Objekte, die mit der CSS-Eigenschaft content eingefügt werden, sind anonyme ersetzte Elemente. Sie sind "anonym", weil sie im HTML-Markup nicht existieren.

Verwendung von CSS mit ersetzten Elementen

CSS behandelt ersetzte Elemente in bestimmten Fällen speziell, wie zum Beispiel bei der Berechnung von Rändern und einigen auto-Werten.

Beachten Sie, dass einige, aber nicht alle ersetzten Elemente intrinsische Abmessungen oder eine definierte Baseline haben, die von einigen CSS-Eigenschaften verwendet wird, wie z. B. vertical-align. Nur ersetzte Elemente können jemals intrinsische Abmessungen haben.

Positionierung von Objekten innerhalb des Inhaltsrahmens steuern

Bestimmte CSS-Eigenschaften können verwendet werden, um festzulegen, wie das Objekt, das sich innerhalb des ersetzten Elements befindet, innerhalb des Rahmens des Elements positioniert werden soll. Diese werden durch die CSS Images Spezifikation definiert:

object-fit

Gibt an, wie das Inhaltselement des ersetzten Elements in den Rahmen des enthaltenen Elements eingepasst werden soll. Die object-fit-Eigenschaft hat keine Auswirkungen auf <iframe>, <embed> und <fencedframe>-Elemente.

object-position

Gibt die Ausrichtung des Inhaltsobjekts des ersetzten Elements innerhalb des Elementrahmens an.

Siehe auch