quotes

Browser fügen Anführungszeichen am Anfang und Ende von <q>-Elementen sowie für die Werte open-quote und close-quote der content-Eigenschaft ein. Jedes öffnende oder schließende Anführungszeichen wird durch eine der Zeichenfolgen aus dem Wert von quotes ersetzt, basierend auf der Verschachtelungstiefe, oder, wenn quotes ausdrücklich auf auto gesetzt oder anderweitig auf auto aufgelöst wird, sind die Anführungszeichen sprachabhängig.

none

Die open-quote und close-quote Werte der content-Eigenschaft erzeugen keine Anführungszeichen, als ob no-open-quote und no-close-quote gesetzt wären.

auto

Anführungszeichen, die typografisch für die geerbte Sprache geeignet sind (d.h. über das lang-Attribut, das am Eltern- oder anderem Vorfahren-Element gesetzt ist).

[<string> <string>]+

Definiert ein oder mehrere Paare von Anführungszeichenwerten für öffnende und schließende Zitate. Im ersten Paar jedes Zitatpaares werden die Werte für das open-quote und im zweiten des Paares für das close-quote verwendet.

Das erste Paar repräsentiert das äußere Zitatniveau. Das zweite Paar, falls vorhanden, repräsentiert das erste verschachtelte Niveau. Das nächste Paar wird für doppelt verschachtelte Ebenen verwendet und so weiter. Wenn die Tiefe der Zitatverschachtelung größer ist als die Anzahl der Paare, wird das letzte Paar im quotes-Wert wiederholt.

Welches Paar von Anführungszeichen verwendet wird, hängt von der Tiefe oder Verschachtelungsebene der Zitate ab: die Anzahl der Vorkommen von <q>-Zitaten oder open-quote (oder no-open-quote) in allen generierten Texten vor dem aktuellen Vorkommen, minus der Anzahl der Vorkommen von schließenden Zitaten, entweder als </q>, close-quote oder no-close-quote. Wenn die Tiefe 0 ist, wird das erste Paar verwendet, wenn die Tiefe 1 ist, wird das zweite Paar verwendet usw.

quotes = 
  auto                    |
  none                    |
  match-parent            |
  [ <string> <string> ]+  

Dieses Beispiel vergleicht die Standardzitate, die durch das semantische HTML-Element <q> bereitgestellt werden, mit denen, die wir mit der CSS-Eigenschaft quotes definieren.

Der Standardwert von quotes ist auto. In diesem Beispiel hat das erste Listenelement quotes: auto gesetzt, sodass die Standardzitate für die angegebene Sprache erhalten werden; genauso, wie wenn keine quotes-Eigenschaft gesetzt wäre. Das zweite Listenelement definiert, welche Anführungszeichen für Zitate und verschachtelte Zitate verwendet werden sollen; diese Anführungszeichen werden für Nachkommen eines Elements mit der Klasse specialQuotes verwendet, unabhängig von der Sprache (wie alle lang-Attributwerte, die gesetzt sind).

HTML

<ul>
  <li>
    Default quotes:
    <p lang="ru">
      <q
        >Митч Макконнелл - это человек, который знает о России и ее влиянии
        меньше, чем даже Дональд Трамп, и <q>я ничего не знаю</q>, сказал
        Трамп</q
      >, - писал Раджу.
    </p>
  </li>
  <li class="specialQuotes">
    Defined by <code>quotes</code> property :
    <p lang="ru">
      <q
        >Митч Макконнелл - это человек, который знает о России и ее влиянии
        меньше, чем даже Дональд Трамп, и <q>я ничего не знаю</q>, сказал
        Трамп</q
      >, - писал Раджу.
    </p>
  </li>
  <ul></ul>
</ul>

CSS

li {
  quotes: auto;
}

.specialQuotes {
  quotes: "“" "”" "‘" "’";
}

Ergebnis

Standardmäßig stellt der Browser sprachspezifische Anführungszeichen bereit, wenn das <q>-Element verwendet wird. Wenn die quotes-Eigenschaft definiert ist, überschreiben die angegebenen Werte die Browserstandards. Beachten Sie, dass die Eigenschaft quotes vererbt wird. Die Eigenschaft quotes wird auf das <li> mit der Klasse specialQuotes gesetzt, aber die Anführungszeichen werden auf die <q>-Elemente angewendet.

Beachten Sie, dass jedes open-quote und close-quote durch eine der Zeichenfolgen aus dem Wert von quotes ersetzt wird, basierend auf der Verschachtelungstiefe.

Der Standardwert von quotes ist auto. Dieses Beispiel funktioniert, ohne dass es explizit gesetzt wird.

HTML

<ul>
  <li lang="fr">
    <q>Ceci est une citation française.</q>
  </li>
  <li lang="ru">
    <q>Это русская цитата</q>
  </li>
  <li lang="de">
    <q>Dies ist ein deutsches Zitat</q>
  </li>
  <li lang="en">
    <q>This is an English quote.</q>
  </li>
</ul>

CSS

q {
  quotes: auto;
}
li:not(:last-of-type) {
  border-bottom: 1px solid;
}

li {
  padding: 0.5em 0;
}

Ergebnis

Beachten Sie, dass das lang-Attribut auf einen Vorfahren des <q> gesetzt wurde, nicht auf das <q> selbst. Wenn ein Zitat in einer anderen Sprache als dem umgebenden Text steht, ist es üblich, den Text mit den Anführungszeichen der Sprache des umgebenden Textes zu umgeben, nicht der Sprache des Zitats selbst.

In diesem Beispiel fügen wir statt des <q>-Elements Anführungszeichen zu den ::before- und ::after-Pseudoelementen vor und nach dem Inhalt jedes Elements mit einem bestimmten Klassennamen hinzu.

HTML

<p>
  <span class="quote">I should be using quotes</span>, I thought,
  <span class="quote"
    >But why use semantic HTML elements when I can add classes to
    <span class="quote">ALL THE THINGS!</span>?
  </span>
</p>

CSS

.quote {
  quotes: '"' '"' "'" "'";
}
.quote::before {
  content: open-quote;
}
.quote::after {
  content: close-quote;
}

Ergebnis

Dieses Beispiel zeigt die Verwendung von etwas anderem als Anführungszeichen als <string>-Werte. Das open-quote zeigt den Sprecher an und, da kein öffnendes Anführungszeichen vorhanden ist, ist das close-quote leer. (Das Mischen einer <string> mit einem aufgezählten Schlüsselwort zur Erstellung eines Paares wird nicht unterstützt). Wir setzen auto für die verschachtelten Zitate. Diese verschachtelten Zitate werden von dem umgeben, was die Sprache als normal für verschachtelte Zitate vorschreibt.

HTML

<ul>
  <li><q data-speaker="karen">Hello</q></li>
  <li><q data-speaker="chad">Hi</q></li>
  <li><q data-speaker="karen">this conversation is not interesting</q></li>
  <li>
    <q data-speaker="pat"
      >OMG! <q>Hi</q>? Seriously? at least <q>hello</q> is five letters long.</q
    >
  </li>
</ul>

CSS

[data-speaker="karen" i] {
  quotes: "She said: " "";
}
[data-speaker="chad" i] {
  quotes: "He said: " "";
}
[data-speaker="pat" i] {
  quotes: "They said: " "";
}
[data-speaker] q {
  quotes: auto;
}

li {
  padding: 0.5em 0;
}

Ergebnis

• CSS generierter Inhalt Modul
• contain
• content