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 beim Öffnen und Schließen von <q>-Elementen und für die open-quote und close-quote-Werte der content-Eigenschaft ein. Jedes Anfangs- oder Schlusszeichen wird durch einen der Strings aus dem Wert von quotes ersetzt, basierend auf der Verschachtelungstiefe, oder, wenn quotes explizit auf auto gesetzt wird oder sich darauf auflöst, sind die Anführungszeichen sprachabhängig.

none

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

auto

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

<string>

Definiert ein oder mehrere Paare von Anführungszeichenwerten für Anfangs- und Schlusszeichen. In jedem Paar wird das erste der Werte für open-quote und das zweite für close-quote verwendet.

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 der Zitate 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 bzw. der Verschachtelungsebene der Zitate ab: der Anzahl der Vorkommen von <q>-Anführungszeichen oder open-quote (oder no-open-quote) in allen generierten Texten vor dem aktuellen Vorkommen, minus der Anzahl der Vorkommen von Schlusszeichen, entweder als </q>, close-quote oder no-close-quote. Wenn die Tiefe 0 ist, wird das erste Paar verwendet, bei einer Tiefe von 1 das zweite Paar usw.

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

Dieses Beispiel vergleicht die standardmäßigen Anführungszeichen, die vom semantischen HTML-<q>-Element bereitgestellt werden, mit denen, die wir mithilfe der CSS-quotes-Eigenschaft definieren.

Der Standardwert von quotes ist auto. In diesem Beispiel hat der erste Listeneintrag quotes: auto gesetzt und erhält daher die standardmäßigen Anführungszeichen für die angegebene Sprache; genauso, als wäre keine quotes-Eigenschaft gesetzt. 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 Klasse specialQuotes unabhängig von der Sprache verwendet (wie jedes lang-Attribut, das gesetzt ist).

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 stellen Browser sprachspezifische Anführungszeichen bereit, 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 Klasse specialQuotes 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 quotes-Wert ersetzt wird, basierend auf der Verschachtelungstiefe.

Der Standardwert von quotes ist auto. Dieses Beispiel funktioniert, ohne dass er explizit gesetzt werden muss.

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 einem Vorfahren des <q> platziert wurde, nicht auf dem <q> selbst. Wenn ein Zitat in einer anderen Sprache als der umgebenden Sprache ist, ist es üblich, den Text mit den Anführungszeichen der Sprache des umgebenden Textes zu zitieren, nicht mit der Sprache des Zitats selbst.

In diesem Beispiel verwenden wir nicht das <q>-Element, sondern fügen Anführungszeichen zu den ::before und ::after Pseudo-Elementen 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 demonstriert die Verwendung von etwas anderem als Anführungszeichen als <string>-Werte. Das open-quote gibt den Sprecher an und, da es kein Anfangszeichen gibt, ist das 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, was die Sprache als normal für verschachtelte Anführungszeichen diktiert, eingerahmt.

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