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 eine der Zeichenketten aus dem Wert von quotes ersetzt, basierend auf der Verschachtelungstiefe. Wenn quotes explizit auf auto gesetzt ist oder sich darauf auflöst, 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 open-quote- und close-quote-Werte der content-Eigenschaft erzeugen keine Anführungszeichen, so 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 auf das übergeordnete oder ein anderes Vorfahrelement gesetzt ist).

<string>

Definiert ein oder mehrere Paare von Anführungszeichen für öffnende und schließende Anführungen. In jedem Paar wird das erste als Wert für open-quote und das zweite als close-quote verwendet.

Das erste Paar repräsentiert die äußere Ebene der Anführung. Das zweite Paar, sofern vorhanden, repräsentiert die erste verschachtelte Ebene. Das nächste Paar wird für doppele Verschachtelungen verwendet und so weiter. Wenn die Verschachtelungstiefe der Anführungen größer ist als die Anzahl der Paare, wird das letzte Paar im quotes-Wert wiederholt.

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

Formale Definition

Formale Syntax

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

Beispiele

Standard-Anführungen und Überschreibungen

Dieses Beispiel vergleicht die Standard-Anführungen des semantischen HTML-<q>-Elements mit denjenigen, die wir mit der CSS-quotes-Eigenschaft definieren.

Der Standardwert von quotes ist auto. In diesem Beispiel hat das erste Listenelement quotes: auto gesetzt, sodass es die Standard-Anführungen für die angegebene Sprache erhält, als ob keine quotes-Eigenschaft gesetzt wäre. Das zweite Listenelement definiert, welche Anführungszeichen für Anführungen und verschachtelte Anführungen verwendet werden sollen; Diese Anführungszeichen werden für Nachkommen eines Elements mit der Klasse specialQuotes verwendet, unabhängig von der Sprache (ähnlich wie bei allen lang-Attributwerten, 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 bieten Browser sprachspezifische Anführungszeichen, wenn das <q>-Element verwendet wird. Wenn die quotes-Eigenschaft definiert ist, überschreiben die bereitgestellten Werte die Standardwerte 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ührungen werden auf die <q>-Elemente angewendet.

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

Automatische Anführungen

Der Standardwert von quotes ist auto. Dieses Beispiel funktioniert, ohne dass er 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 Vorfahre des <q> platziert wurde, nicht auf dem <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 umrahmen, nicht mit der Sprache des Zitats selbst.

Mit generiertem Inhalt

In diesem Beispiel fügen wir anstelle des <q>-Elements 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

Text als Anführungen und leere Anführungen

Dieses Beispiel zeigt die Verwendung von etwas anderem als Anführungszeichen als <string>-Werte. Das open-quote gibt den Sprecher an und, da kein öffnendes Anführungszeichen vorhanden ist, 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ührungen. Diese verschachtelten Anführungen werden von dem umrahmt, was die Sprache als normal für verschachtelte Anführungen 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