quotes

Probieren Sie es aus

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 und für die Werte open-quote und close-quote der content-Eigenschaft ein. Jedes eröffnende oder schließende Zitat wird durch eine der Zeichenfolgen aus dem Wert von quotes ersetzt, basierend auf der Verschachtelungstiefe oder, wenn quotes explizit auf oder anderweitig auf auto gesetzt ist, sind die verwendeten Anführungszeichen sprachabhängig.

Syntax

/* Keyword value */
quotes: none;
quotes: auto;

/* <string> values */
quotes: "«" "»"; /* Set open-quote and close-quote to use French quotation marks */
quotes: "«" "»" "‹" "›"; /* Set two levels of quotation marks */

/* Global values */
quotes: inherit;
quotes: initial;
quotes: revert;
quotes: revert-layer;
quotes: unset;

Werte

none

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

auto

Anführungszeichen, die für die geerbte Sprache typografisch angemessen sind (d.h. über das lang-Attribut, das am übergeordneten oder anderen Vorfahren gesetzt ist).

<string>

Definiert ein oder mehrere Paare von Anführungszeichenwerten für eröffnende und schließende Zitate. In jedem Paar werden die ersten Anführungszeichen als Werte für open-quote verwendet und die zweiten jedes Paares sind das 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 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 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, minus der Anzahl der Vorkommen von abschließenden Anführungszeichen, 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.

Formale Definition

Formale Syntax

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

Beispiele

Standardanführungszeichen und Überschreibungen

Dieses Beispiel vergleicht die Standardanführungszeichen, die durch das semantische 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 das erste Listenelement quotes: auto gesetzt, erhält daher die Standardanführungszeichen für die angegebene Sprache, als ob keine quotes-Eigenschaft gesetzt wäre. Das zweite Listenelement definiert, welche Anführungszeichen für Zitate und verschachtelte Zitate verwendet werden soll; diese Anführungszeichen werden für Nachkommen eines Elements mit der Klasse specialQuotes verwendet, unabhängig von der Sprache (wie alle gesetzten lang-Attributwerte).

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>

CSS

li {
  quotes: auto;
}

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

Ergebnis

Standardmäßig liefern 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 wird am <li> mit der Klasse specialQuotes gesetzt, jedoch auf die <q>-Elemente angewendet.

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

Automatische Anführungszeichen

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 an einem Vorfahren des <q>, nicht am <q> selbst platziert wurde. 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 zitieren, nicht der Sprache des Zitats selbst.

Mit generiertem Inhalt

In diesem Beispiel verwenden wir anstelle des <q>-Elements Anführungszeichen, die den ::before- und ::after-Pseudoelementen vor und nach dem Inhalt jedes Elements mit einem bestimmten Klassennamen hinzugefügt werden.

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

Text als Anführungszeichen und leere Anführungszeichen

Dieses Beispiel zeigt die Verwendung von etwas anderem als Anführungszeichen als <string>-Werten. Das open-quote kennzeichnet den Sprecher und, da es kein öffnendes Anführungszeichen 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 Zitate. Diese verschachtelten Zitate werden von den Anführungszeichen umschlossen, die 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

Spezifikationen

Browser-Kompatibilität

Siehe auch

• CSS generierter Inhalt Modul
• contain
• content