кавычки

Браузеры вставляют кавычки в начале и конце элементов <q> и для значений open-quote и close-quote свойства content. Каждая открывающая или закрывающая кавычка заменяется одной из строк из значения quotes, в зависимости от уровня вложенности, или, если quotes явно задано или каким-либо образом разрешается до auto, используемые кавычки зависят от языка.

none

Значения open-quote и close-quote свойства content не производят кавычек, как если бы были заданы no-open-quote и no-close-quote соответственно.

auto

Кавычки, которые типографически соответствуют унаследованному языку (т. е. через атрибут lang, заданный в родительском или другом предке).

[<string> <string>]+

Определяет одну или несколько пар значений кавычек для открывающих и закрывающих кавычек. В каждой паре первая кавычка используется в качестве значения для open-quote, а вторая — в качестве close-quote.

Первая пара представляет внешний уровень кавычек. Вторая пара, если она есть, представляет первый вложенный уровень. Следующая пара используется для двойной вложенности, и так далее. Если глубина вложенности кавычек больше, чем количество пар, последняя пара в значении quotes повторяется.

Какая пара кавычек используется, зависит от глубины или уровня вложенности кавычек: от количества вхождений <q> кавычек или open-quote (или no-open-quote) во всем сгенерированном тексте до текущего вхождения, минус количество вхождений закрывающих кавычек, как </q>, close-quote, или no-close-quote. Если глубина равна 0, используется первая пара, если глубина равна 1, используется вторая пара и так далее.

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

В этом примере сравниваются кавычки по умолчанию, предоставляемые семантическим HTML-элементом <q>, с теми, которые мы определяем с помощью свойства CSS quotes.

Значение quotes по умолчанию auto. В этом примере у первого элемента списка установлено значение quotes: auto, поэтому он получает кавычки по умолчанию для указанного языка; то же самое, как если бы свойство quotes не было задано. Второй элемент списка определяет, какие кавычки использовать для кавычек и вложенных кавычек; эти кавычки будут использоваться для потомков элемента с классом specialQuotes независимо от языка (как любые значения атрибута lang).

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: "“" "”" "‘" "’";
}

Результат

По умолчанию браузеры предоставляют кавычки, специфичные для языка, когда используется элемент <q>. Если свойство quotes определено, предоставленные значения переопределяют значения по умолчанию браузера. Обратите внимание, что свойство quotes унаследуется. Свойство quotes установлено для элемента <li> с классом specialQuotes, но кавычки применяются к элементам <q>.

Обратите внимание, что каждая открывающая и закрывающая кавычка заменяется одной из строк из значения quotes, в зависимости от уровня вложенности.

Значение quotes по умолчанию auto. Этот пример работает без явного задания.

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;
}

Результат

Обратите внимание, что атрибут lang был размещен в предке элемента <q>, а не в самом элементе <q>. Если кавычки относятся к другому языку, чем окружающий текст, принято заключать текст в кавычки языка окружающего текста, а не языка самих кавычек.

В этом примере вместо использования элемента <q>, мы добавляем кавычки к псевдоэлементам ::before и ::after перед и после содержимого каждого элемента с определенным именем класса.

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;
}

Результат

Этот пример демонстрирует использование чего-то другого, кроме кавычек, в качестве значений <string>. Открывающая кавычка указывает говорящего, и, поскольку нет открывающей кавычки, закрывающая кавычка пустая. (Смешивание <string> со словом-ключом, чтобы создать пару, не поддерживается). Мы установили auto для вложенных кавычек. Эти вложенные кавычки будут заключены в те кавычки, которые, как диктует язык, являются обычными для вложенных кавычек.

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;
}

Результат

• Модуль CSS сгенерированного содержимого
• contain
• content