CSS-Eigenschaft marker-offset

Erlaubte Werte

Auszug aus der Spezifikation (die verwendete Syntax wird im Artikel CSS-Wertesyntax genauer erläutert):

'marker-offset'
<length> | auto | inherit

<length>

Eine absolute oder relative Längenangabe, die auch negativ sein kann.

Mehr Informationen über Längenwerte in CSS finden Sie im Grundlagenartikel Längenwerte.

auto (Ausgangswert)

Der Abstand wird automatisch durch den Anwenderprogramm festgelegt.

inherit

Bestimmt explizit, dass diese Eigenschaft denselben berechneten Wert wie im Elternelement annimmt.

Code-Beispiel

LI.example: before {
   display: marker;
   content: url("/graphics/smiley.gif");
   marker-offset: 20px;
   line-height: 32px;
   padding: 5px;
   border: 1px dotted #cc0000;
   }

Wechselwirkungen

:before, :after,
display

Der Anzeigetyp, zu dem die Eigenschaft gehört

Die Eigenschaft lässt sich nur zusammen mit einem Anzeigetyp verstehen, den CSS 2 vorsah und CSS 2.1 nicht übernommen hat. Ein über :before oder :after erzeugter Inhalt konnte mit display: marker zu einer Marke erklärt werden: einer Box, die außerhalb des Elements steht, zu dem sie gehört, wie das Aufzählungszeichen einer Liste.

Die Marke war damit etwas Eigenes, weder Teil des Textflusses noch ein positioniertes Element. Sie stand neben dem Element, wurde an dessen erster Zeile ausgerichtet, und ihr Abstand zum Element wurde mit dieser Eigenschaft festgelegt. Negative Werte rückten sie näher heran oder darüber hinweg.

Damit war eine allgemeine Form des Listenzeichens gemeint. Was die Listeneigenschaften nur für Listen können, sollte für jedes Element möglich sein: eine Nummer vor einer Überschrift, ein Zeichen vor einem Absatz, ein Datum neben einem Eintrag, jeweils außerhalb des Satzspiegels.

Warum daraus nichts wurde

Die Marke brauchte ein eigenes Stück Layoutmodell. Sie steht außerhalb ihres Elements, beansprucht dort aber Platz, muss an der ersten Zeile ausgerichtet werden und darf den Text nicht verschieben. Das sind Fragen, die das Boxmodell für keine andere Box beantwortet.

Entsprechend uneinheitlich fiel die Umsetzung aus. Die Seite nennt eine Darstellungsmaschine, die die Eigenschaft umsetzte, und eine zweite, die es fehlerhaft tat. Für einen Standard, der in dieser Fassung nur beschreiben wollte, was tatsächlich funktioniert, war das zu wenig, und so fiel das Marken-Modell mit dieser Eigenschaft aus CSS 2.1 heraus.

Die Aufgabe blieb bestehen. Sie wurde in der Folge nicht über einen eigenen Anzeigetyp gelöst, sondern über ein Pseudoelement, das die Marke einer Liste unmittelbar ansprechbar macht. Damit ist die Marke kein Sonderfall des Layouts mehr, sondern ein Teil des Listenelements, den sich das Stylesheet gestalten kann.

Wie man es heute löst

Für Listen genügt in vielen Fällen die Einrückung: list-style-position entscheidet, ob die Marke im Textblock steht oder daneben, und der Innenabstand des Listenelements bestimmt den Abstand zwischen beiden. Das ist nicht dasselbe wie ein frei wählbarer Abstand zur Marke, reicht aber für die üblichen Fälle.

Wo mehr nötig ist, wird die Marke abgeschaltet und durch erzeugten Inhalt ersetzt, der als absolut positioniertes Element vor dem Text steht. Der Abstand ist dann eine gewöhnliche Längenangabe, und die volle Gestaltung steht offen. Dieser Umweg ist seit langem die verbreitete Antwort auf das, was diese Eigenschaft direkt hätte leisten sollen.

Besonderheiten im Medientyp handheld

Diese Eigenschaft ist nicht Teil des Standards CSS Mobile Profile 1.0. Mobilgeräte, deren Browser diese Eigenschaft umsetzen, sind bisher nicht bekannt.

Weitere Charakteristika

Die Stylesheet-Schnellreferenz mit einer Zusammenfassung aller visuellen Eigenschaften kann auch als PDF-Datei herunter geladen werden.

Ausgangswert

auto

Berechneter Wert

Nicht definiert

Vererbung

Nein

Anwendbarkeit

Auf Elemente mit display:marker

%-Bezugswert

Nicht zutreffend

Mediengruppe(n)

Visual