content

Der Wert kann sein:

• Eines von zwei Schlüsselwörtern — none oder normal.
• <content-replacement>, wenn ein DOM-Knoten ersetzt wird. <content-replacement> ist immer ein <image>.
• Eine <content-list>, wenn Pseudo-Elemente und Randboxen ersetzt werden. Eine <content-list> ist eine Liste von einem oder mehreren anonymen Inline-Boxen, die in der angegebenen Reihenfolge erscheinen. Jedes <content-list>-Element ist vom Typ <string>, <image>, <counter>, <quote>, <target> oder <leader()>.
• Ein optionaler alternativer Textwert einer <string> oder eines <counter>, dem ein Schrägstrich (/) vorangeht.

Die oben genannten Schlüsselwörter und Datentypen werden im Folgenden ausführlicher beschrieben:

none

Wird ein Pseudo-Element angewendet, wird das Pseudo-Element nicht generiert. Wird ein Element angewendet, hat der Wert keine Auswirkung.

normal

Der Standardwert. Wird zu none für die ::before und ::after Pseudo-Elemente berechnet. Für andere Pseudo-Elemente wird der Inhalt der initiale (oder normale) Inhalt sein, der für diesen ::marker, ::placeholder oder ::file-selector-button erwartet wird. Für reguläre Elemente oder Seitenrandboxen wird dies in die Nachkommen des Elements berechnet.

<string>

Eine Zeichenfolge, die in passenden einfachen oder doppelten Anführungszeichen eingeschlossen ist. Mehrere Zeichenfolgenwerte werden verkettet (es gibt keinen Verkettungsoperator in CSS).

<image>

Ein <image>, das ein darzustellendes Bild darstellt. Dies kann einem <url>, image-set(), oder <gradient> Datentyp, oder einem Teil der Webseite selbst entsprechen, definiert durch die element() Funktion.

<counter>

Der <counter>-Wert ist ein CSS-Zähler, in der Regel eine Zahl, die durch Berechnungen definiert wird, die durch die <counter-reset> und <counter-increment> Eigenschaften definiert sind. Sie kann entweder mit der counter() oder counters() Funktion angezeigt werden.

counter()

Die counter() Funktion hat zwei Formen: 'counter(name)' oder 'counter(name, style)'. Der generierte Text ist der Wert des innersten Zählers des angegebenen Namens im Bereich des angegebenen Pseudo-Elements. Er ist im angegebenen <list-style-type> formatiert (decimal standardmäßig).

counters()

Die counters() Funktion hat ebenfalls zwei Formen: 'counters(name, string)' oder 'counters(name, string, style)'. Der generierte Text ist der Wert aller Zähler mit dem angegebenen Namen im Bereich des angegebenen Pseudo-Elements, von außen nach innen, getrennt durch die angegebene Zeichenfolge. Die Zähler werden im angegebenen <list-style-type> dargestellt (decimal standardmäßig).

<quote>

Der <quote> Datentyp beinhaltet sprach- und positionsabhängige Schlüsselwörter:

open-quote und close-quote

Diese Werte werden durch die entsprechende Zeichenfolge aus der quotes Eigenschaft ersetzt.

no-open-quote und no-close-quote

Führt keinen Inhalt ein, sondern erhöht (verringert) die Verschachtelungsebene für Anführungszeichen.

<target>

Der <target> Datentyp umfasst drei Ziel Funktionen, <target-counter()>, <target-counters()> und <target-text()>, die Querverweise erstellen, die vom Zielende eines Links erhalten werden. Siehe Formale Syntax.

<leader()>

Der <leader()> Datentyp enthält eine Führungsfunktion: leader( <leader-type> ). Diese Funktion akzeptiert die Schlüsselwortwerte dotted, solid, oder space (gleichbedeutend mit leader("."), leader("_"), und leader(" "), bzw.) oder eine <string> als Parameter. Wenn sie unterstützt wird und als Wert für content verwendet wird, wird der bereitgestellte Führungstyp als sich wiederholendes Muster eingefügt, das visuell über eine horizontale Linie verbindet.

attr(x)

Die attr(x) CSS-Funktion ruft den Wert eines Attributs des ausgewählten Elements oder des Ursprungs-Elements des Pseudo-Elements ab. Der Wert des Attributs x des Elements ist eine ungeparste Zeichenfolge, die den Attributnamen darstellt. Wenn kein Attribut x vorhanden ist, wird eine leere Zeichenfolge zurückgegeben. Die Groß-/Kleinschreibungsunempfindlichkeit des Attributnamens-Parameters hängt von der Dokumentsprache ab.

Alternativtext: / <string> | <counter>

Alternativtext kann für ein Bild oder beliebige <content-list>-Elemente angegeben werden, indem ein Schrägstrich und dann eine Zeichenfolge oder ein Zähler hinzugefügt werden. Der Alternativtext ist für die Sprachausgabe durch Screenreader gedacht, kann aber auch in einigen Browsern angezeigt werden. Beachten Sie, dass, wenn der Browser Alternativtext nicht unterstützt, die content-Deklaration als ungültig angesehen und ignoriert wird. Die / <string> oder / <counter> Datentypen spezifizieren den "alt text" für das Element.

content = 
  normal                                              |
  none                                                |
  [ <content-replacement> | <content-list> ] [ / [ <string> | <counter> | <attr()> ]+ ]?  |
  <element()>                                         

<content-replacement> = 
  <image>  

<content-list> = 
  [ <string> | <counter()> | <counters()> | <content()> | <attr()> ]+  

<counter> = 
  <counter()>   |
  <counters()>  

<attr()> = 
  attr( <attr-name> <attr-type>? , <declaration-value>? )  

<element()> = 
  element( <id-selector> )  

<image> = 
  <url>       |
  <gradient>  

<counter()> = 
  counter( <counter-name> , <counter-style>? )  

<counters()> = 
  counters( <counter-name> , <string> , <counter-style>? )  

<content()> = 
  content( [ text | before | after | first-letter | marker ]? )  

<attr-name> = 
  [ <ident-token>? '|' ]? <ident-token>  

<attr-type> = 
  type( <syntax> )  |
  string            |
  <attr-unit>       

<id-selector> = 
  <hash-token>  

<url> = 
  <url()>  |
  <src()>  

<counter-style> = 
  <counter-style-name>  |
  <symbols()>           

<syntax> = 
  '*'                                                 |
  <syntax-component> [ <syntax-combinator> <syntax-component> ]*  |
  <syntax-string>                                     

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )  

<symbols()> = 
  symbols( <symbols-type>? [ <string> | <image> ]+ )  

<syntax-component> = 
  <syntax-single-component> <syntax-multiplier>?  |
  '<' transform-list '>'                          

<syntax-combinator> = 
  '|'  

<syntax-string> = 
  <string>  

<symbols-type> = 
  cyclic      |
  numeric     |
  alphabetic  |
  symbolic    |
  fixed       

<syntax-single-component> = 
  '<' <syntax-type-name> '>'  |
  <ident>                     

<syntax-multiplier> = 
  '#'  |
  '+'  

<syntax-type-name> = 
  angle               |
  color               |
  custom-ident        |
  image               |
  integer             |
  length              |
  length-percentage   |
  number              |
  percentage          |
  resolution          |
  string              |
  time                |
  url                 |
  transform-function  

CSS-generierter Inhalt ist nicht im DOM enthalten. Daher wird er nicht im Barrierefreiheitsbaum dargestellt und bestimmte Kombinationen von Hilfstechnologie/Browser werden ihn nicht ansagen. Wenn der Inhalt Informationen vermittelt, die entscheidend für das Verständnis der Seite sind, ist es besser, ihn im Haupttext des Dokuments einzuschließen.

Wenn eingefügter Inhalt nicht dekorativ ist, stellen Sie sicher, dass die Informationen den Hilfstechnologien zur Verfügung stehen und auch verfügbar sind, wenn CSS deaktiviert ist.

• Unterstützung für barrierefreien CSS-Generierten Inhalt – Tink (2015)
• WCAG, Richtlinie 1.3: Erstellen Sie Inhalte, die in verschiedenen Weisen präsentiert werden können
• Erfolgsrichtlinie 1.3.1 verstehen | W3C Understanding WCAG 2.0
• Fehlschlag der Erfolgsrichtlinie 1.3.1: Einfügen von nicht-dekorativem generiertem Inhalt Techniken für WCAG 2.0

Die ersten fünf Beispiele erzeugen generierte Inhalte auf Pseudo-Elementen. Die letzten drei sind Beispiele für Elementersetzung.

Dieses Beispiel fügt generierten Text nach dem Text von Elementen ein, die einen bestimmten Klassennamen haben. Der Text ist rot gefärbt.

HTML

<h2>Paperback Best Sellers</h2>
<ol>
  <li>Political Thriller</li>
  <li class="new-entry">Halloween Stories</li>
  <li>My Biography</li>
  <li class="new-entry">Vampire Romance</li>
</ol>

CSS

.new-entry::after {
  content: " New!"; /* The leading space creates separation
                       between the DOM node's content and the generated content
                       being added. */
  color: red;
}

Ergebnis

Dieses Beispiel fügt unterschiedlich gefärbte Anführungszeichen um Zitate ein.

HTML

<p>
  According to Sir Tim Berners-Lee,
  <q cite="http://www.w3.org/People/Berners-Lee/FAQ.html#Internet">
    I was lucky enough to invent the Web at the time when the Internet already
    existed - and had for a decade and a half.
  </q>
  We must understand that there is nothing fundamentally wrong with building on
  the contributions of others.
</p>
<p lang="fr-fr">
  Mais c'est Magritte qui a dit,
  <q lang="fr-fr"> Ceci n'est pas une pipe. </q>.
</p>

CSS

q {
  color: #00f;
}

q::before,
q::after {
  font-size: larger;
  color: #f00;
  background: #ccc;
}

q::before {
  content: open-quote;
}

q::after {
  content: close-quote;
}

Ergebnis

Beachten Sie, dass der Typ der generierten Anführungszeichen auf der Sprache basiert. Browser fügen standardmäßig öffnende und schließende Anführungszeichen vor und nach <q>-Elementen hinzu, daher würden die Anführungszeichen in diesem Beispiel erscheinen, ohne dass sie ausdrücklich gesetzt werden. Sie hätten durch das Setzen der entsprechenden content-Eigenschaftswerte auf no-open-quote und no-close-quote oder durch das Setzen beider auf none abgeschaltet werden können. Sie können auch abgeschaltet werden, indem die quotes-Eigenschaft auf none gesetzt wird.

Dieses Beispiel kombiniert einen Zähler, der zwischen zwei <string>-Elementen eingebettet ist, die allen Listenelementen vorangestellt werden. Dadurch wird ein detaillierterer Marker für Listenelemente (<li>) innerhalb ungeordneter Listen (<ol>) erstellt.

HTML

<ol>
  <li>Dogs</li>
  <li>Cats</li>
  <li>
    Birds
    <ol>
      <li>Owls</li>
      <li>Ducks</li>
      <li>Flightless</li>
    </ol>
  <li>Marsupials</li>
  </li>
</ol>

CSS

ol {
  counter-reset: items;
  margin-left: 2em;
}
li {
  counter-increment: items;
}
li::marker {
  content: "item " counters(items, ".", numeric) ": ";
}

Ergebnis

Der generierte Inhalt auf jedem Marker des Listenelements fügt den Text "item " als Präfix hinzu, einschließlich einem Leerzeichen, um das Präfix vom Zähler zu trennen, der von ": ", einem Doppelpunkt und einem zusätzlichen Leerzeichen gefolgt wird. Die counters()-Funktion definiert einen numerischen items-Zähler, bei dem die Zahlen verschachtelter geordneter Listen in den meisten Browsern durch einen Punkt (.) getrennt sind.

Dieses Beispiel ist nützlich für Druck-Stylesheets. Es verwendet einen Attribut-Selektor, um jeden vollständig qualifizierten sicheren Link auszuwählen und den href-Attributwert nach dem Linktext als Inhalt des ::after Pseudo-Elements hinzuzufügen.

HTML

<ul>
  <li><a href="https://mozilla.com">Mozilla</a></li>
  <li><a href="/">MDN</a></li>
  <li><a href="https://openwebdocs.org">OpenWebDocs</a></li>
</ul>

CSS

a[href^="https://"]::after
{
  content: " (URL: " attr(href) ")";
  color: darkgreen;
}

Ergebnis

Der generierte Inhalt ist der Wert des href-Attributs, dem "URL: " mit einem Leerzeichen voransteht, alles in Klammern.

Dieses Beispiel fügt ein Bild vor allen Links ein. Es werden zwei content-Werte bereitgestellt. Der spätere content-Wert enthält ein Bild mit Alternativtext, das von einem Screenreader als Sprache wiedergegeben werden kann. Unterstützt ein Browser den Alternativtext nicht, wird diese Deklaration als ungültig betrachtet und der vorherige content-Wert angezeigt. Diese Fallback-Inhaltsliste enthält ein Bild und die Nachricht " - alt text is not supported - ".

HTML

<a href="https://www.mozilla.org/en-US/">Mozilla Home Page</a>

CSS

Der CSS zeigt das Bild und setzt den Alternativtext, so wie es unten gezeigt wird. Dies setzt auch die Schriftart und Farbe für den Inhalt. Dies wird in Browsern verwendet, die den Alternativtext anzeigen und in Browsern, die den Alternativtext nicht unterstützen und den Fallback-content-Wert anzeigen.

a::before {
  /* fallback content */
  content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico")
    " - alt text is not supported - ";
  /* content with alternative text */
  content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico") /
    " MOZILLA: ";
  font:
    x-small Arial,
    sans-serif;
  color: gray;
}

Ergebnis

Wenn ein Screenreader verwendet wird, sollte er das Wort "MOZILLA" aussprechen, wenn er das Bild erreicht. Sollte dies unterstützt werden (wenn der Hinweis "alt text is not supported" nicht angezeigt wird), können Sie das ::before Pseudo-Element mit Ihrem Entwicklertools-Auswahlwerkzeug auswählen und den zugänglichen Namen im Barrierefreiheits-Panel ansehen.

In Browsern, die die Alternativtext-Syntax nicht unterstützen, ist die komplette Deklaration mit dem Alternativtext ungültig. In diesem Fall wird der vorherige content-Wert verwendet, das Bild und den Text "alt text is not supported" anzeigend.

Dieses Beispiel ersetzt ein reguläres Element! Der Inhalt des Elements wird mit einem SVG mithilfe des <url> Typen ersetzt.

Pseudo-Elemente werden auf ersetzten Elementen nicht gerendert. Da dieses Element ersetzt wird, werden passende ::after oder ::before nicht generiert oder angewendet. Um dies zu demonstrieren, inkludieren wir einen ::after Deklarationsblock, der versucht, die id als generierten Inhalt hinzuzufügen. Dieses Pseudo-Element wird nicht generiert, da das Element ersetzt wird.

HTML

<div id="replaced">This content is replaced!</div>

CSS

#replaced {
  content: url("mdn.svg");
}

/* will not show if element replacement is supported */
div::after {
  content: " (" attr(id) ")";
}

Ergebnis

Beim Generieren von Inhalten auf regulären Elementen (anstatt nur auf Pseudo-Elementen) wird das gesamte Element ersetzt. Dies bedeutet, dass ::before und ::after Pseudo-Elemente nicht generiert werden.

Dieses Beispiel demonstriert, wie die Inhalte eines Elements durch einen beliebigen <image>-Typ ersetzt werden können, in diesem Fall ein CSS-Verlauf. Der Inhalt des Elements wird durch einen linear-gradient() ersetzt. Mit @supports bieten wir Unterstützung für Alternativtext und einen repeating-linear-gradient() für Browser, die Alternativtext bei der Ersetzung von Elementinhalten unterstützen.

HTML

<div id="replaced">I disappear</div>

CSS

div {
  border: 1px solid;
  background-color: #ccc;
  min-height: 100px;
  min-width: 100px;
}

#replaced {
  content: linear-gradient(#639f, #c96a);
}

@supports (content: linear-gradient(#000, #fff) / "alt text") {
  #replaced {
    content: repeating-linear-gradient(blue 0, orange 10%) /
      "Gradients and alt text are supported";
  }
}

Ergebnis

Überprüfen Sie die Browser-Kompatibilitäts-Tabelle. Alle Browser unterstützen Verläufe und alle Browser unterstützen das Ersetzen von Elementen mit Bildern, aber nicht alle Browser unterstützen Verläufe als content-Wert und nicht alle Browser unterstützen Alternativtext bei Ersetzungen. Wenn der Browser eine Box ohne Verlauf anzeigt, werden Ersetzungen unterstützt, aber Verläufe nicht als Inhaltsersatzwert unterstützt. Wenn das Element durch einen gestreiften Verlauf ersetzt wird, unterstützt der Browser beides.

Dieses Beispiel ersetzt den Inhalt eines Elements mit einem image-set(). Wenn das Display des Nutzers eine normale Auflösung hat, wird das 1x.png Bild angezeigt, Screens mit einer höheren Auflösung zeigen das 2x.png Bild.

HTML

<div id="replaced">Mozilla</div>

CSS

div {
  width: 100px;
  border: 1px solid lightgrey;
}

#replaced {
  content: image-set(
    "1x.png" 1x,
    "2x.png" 2x
  );
}

Ergebnis

• ::after
• ::before
• ::marker
• contain
• quotes
• <gradient>
• image-set()
• <url>

• Ersetzte Elemente

• CSS-generierter Inhalt Modul

• CSS Listen und Zähler Modul

• Barrierefreiheits-Panels von Browsern: Firefox Accessibility inspector, Chrome Accessibility pane, und Safari Accessibility tree