quotes

quotes: none;

quotes: initial;

quotes: "'" "'";

quotes: "„" "“" "‚" "‘";

quotes: "«" "»" "‹" "›";

<section id="default-example">
  <q id="example-element"
    >Show us the wonder-working <q>Brothers,</q> let them come out publicly—and
    we will believe in them!</q
  >
</section>

q {
  font-size: 1.2rem;
}

Browser fügen Anführungszeichen am Anfang und Ende von <q>-Elementen ein und für die Werte open-quote und close-quote der content-Eigenschaft. Jedes Öffnungs- oder Schließungszeichen wird durch einen der Strings aus dem Wert von quotes ersetzt, basierend auf der Tiefe der Verschachtelung, oder, wenn quotes explizit auf oder anderweitig auf auto gesetzt ist, sind die verwendeten Anführungszeichen sprachabhängig.

none

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

auto

Anführungszeichen, die typografisch passend für die geerbte Sprache sind (d.h. über das lang-Attribut, das auf dem übergeordneten oder einem anderen Vorfahren-Element gesetzt ist).

<string>

Definiert ein oder mehrere Paare von Anführungszeichenwerten für Öffnungs- und Schließungszeichen. In jedem Paar wird das erste Anführungszeichenpaar als Werte für das open-quote verwendet und das zweite als close-quote.

Das erste Paar repräsentiert die äußere Ebene des Zitats. Das zweite Paar, falls vorhanden, repräsentiert die erste verschachtelte Ebene. Das nächste Paar wird für doppelt verschachtelte Ebenen verwendet, und so weiter. Wenn die Verschachtelungstiefe 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 Anführungszeichen ab: die Anzahl der Vorkommen von <q>-Anführungszeichen oder open-quote (oder no-open-quote) in allen generierten Texten vor dem aktuellen Vorkommen, abzüglich der Anzahl der Vorkommen von Schließungszeichen, 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 von dem semantischen HTML-<q>-Element bereitgestellten Standardanführungszeichen mit denen, die wir unter Verwendung der CSS-quotes-Eigenschaft definieren.

Der Standardwert von quotes ist auto. In diesem Beispiel hat der erste Listeneintrag quotes: auto gesetzt, sodass die Standardanführungszeichen für die angegebene Sprache verwendet werden; das gleiche, als ob keine quotes-Eigenschaft gesetzt wäre. Der zweite Listeneintrag definiert, welche Anführungszeichen für Zitate und verschachtelte Zitate verwendet werden sollen; diese Anführungszeichen werden für Nachkommen eines Elements mit der specialQuotes-Klasse 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 bieten Browser sprachspezifische Anführungszeichen, wenn das <q>-Element verwendet wird. Wenn die quotes-Eigenschaft definiert ist, überschreiben die bereitgestellten Werte die Standardeinstellungen des Browsers. Beachten Sie, dass die quotes-Eigenschaft vererbt wird. Die quotes-Eigenschaft ist auf dem <li> mit der specialQuotes-Klasse gesetzt, aber die Anführungszeichen werden auf die <q>-Elemente angewendet.

Beachten Sie, dass jedes open-quote und close-quote durch einen der Strings aus dem Wert von quotes ersetzt wird, basierend auf der Tiefe der Verschachtelung.

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 ist, ist es üblich, den Text mit den Anführungszeichen der Sprache des umgebenden Textes zu umschließen, nicht der Sprache des Zitats selbst.

In diesem Beispiel verwenden wir anstelle des <q>-Elements die ::before- und ::after-Pseudo-Elemente, um Anführungszeichen vor und nach dem Inhalt jedes Elements mit einem bestimmten Klassennamen hinzuzufügen.

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 demonstriert die Verwendung von etwas anderem als Anführungszeichen als <string>-Werte. Der open-quote zeigt den Sprecher an und, da es kein öffnendes Anführungszeichen gibt, ist der close-quote leer. (Das Mischen eines <string> mit einem aufgezählten Schlüsselwort zur Erstellung eines Paares wird nicht unterstützt). Wir setzen auto für die verschachtelten Anführungszeichen. Diese verschachtelten Anführungszeichen werden durch das Buch beendet, was die Sprache als normal für verschachtelte Zitate vorgibt.

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