quotes CSS property

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 öffnende oder schließende Anführungszeichen wird durch einen der Strings aus dem Wert von quotes ersetzt, basierend auf der Verschachtelungstiefe. Wenn quotes explizit auf oder sonst auf auto gesetzt ist, hängen die verwendeten Anführungszeichen von der Sprache ab.

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 Werte open-quote und close-quote der content-Eigenschaft erzeugen keine Anführungszeichen, als ob no-open-quote und no-close-quote gesetzt wären.

auto

Anführungszeichen, die typografisch passend zur vererbten Sprache sind (d.h. über das lang-Attribut, das am übergeordneten oder an einem anderen Vorfahren gesetzt ist).

<string>

Definiert ein oder mehrere Paare von Anführungszeichenwerten für öffnende und schließende Anführungszeichen. Im ersten Paar wird der erste der beiden Anführungszeichen für open-quote und der 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 zweifach verschachtelte Ebenen verwendet und so weiter. Wenn die Verschachtelungstiefe der Anführungszeichen 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 der Verschachtelungsebene der Anführungszeichen 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 die Anzahl der Vorkommen von schließenden Anführungszeichen, entweder als </q>, close-quote oder no-close-quote. Wenn die Tiefe 0 ist, wird das erste Paar verwendet, wenn die Tiefe 1 ist, das zweite Paar, usw.

Formale Definition

Formale Syntax

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

Beispiele

Standardanführungszeichen und Überschreibungen

Dieses Beispiel vergleicht die von dem semantischen HTML-<q>-Element bereitgestellten Standardanführungszeichen 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, sodass es die Standardanführungszeichen für die angegebene Sprache erhält; das Gleiche, als ob 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 Nachfahren eines Elements mit der specialQuotes-Klasse ungeachtet der Sprache verwendet (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>

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 standardmäßigen Browsereinstellungen. Beachten Sie, dass die quotes-Eigenschaft vererbt wird. Die quotes-Eigenschaft ist auf das <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 Verschachtelungstiefe.

Automatische Anführungszeichen

Der Standardwert von quotes ist auto. Dieses Beispiel funktioniert, ohne dass dies 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 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 umgebenden Sprache zu zitieren, nicht mit der Sprache des Zitats selbst.

Mit generiertem Inhalt

In diesem Beispiel verwenden wir nicht das <q>-Element, sondern fügen Anführungszeichen 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

Text als Anführungszeichen und leere Anführungszeichen

Dieses Beispiel demonstriert die Verwendung von etwas anderem als Anführungszeichen als <string>-Werte. Der open-quote gibt den Sprecher an, und da es kein öffnendes Anführungszeichen gibt, ist das close-quote leer. (Es wird nicht unterstützt, ein <string> mit einem enumerierten Schlüsselwort zu mischen, um ein Paar zu erstellen). Wir setzen auto für die verschachtelten Anführungszeichen. Diese verschachtelten Anführungszeichen werden durch das eingerahmt, was die Sprache als normal für verschachtelte Anführungszeichen 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

Spezifikationen

Browser-Kompatibilität

Siehe auch

• CSS generierter Inhalt Modul
• contain
• content