CSS свойство quotes
Определение и применение
CSS свойство quotes определяет тип кавычек для встраиваемых цитат.
Первые два значения определяют первый уровень встраивания цитаты, следующие два значения указывают на следующий уровень вложенности и так далее:
quotes: "«" "»" "„" "“";Первая пара — открывающая « и закрывающая » кавычки внешней цитаты.
Вторая пара — „ и “ для вложенной цитаты. Если уровней вложенности больше, используется последняя пара.
Используя псевдокласс :lang(код языка), вы можете указать определённый тип кавычек для определенного языка.
Попробуйте значения quotes
Первая пара кавычек применяется к внешней цитате, вторая — к вложенной. Псевдоэлементы используют open-quote и close-quote.
quotes: "«" "»" "‹" "›"
HTML и CSS примера
<div class="stage">
<q class="demo-target">Внешняя цитата <q>внутренняя</q></q>
</div>
.stage {
width: 100%;
max-width: 300px;
color: #172c3d;
background: #edf2f5;
font: 18px/1.5 system-ui;
padding: 12px;
border: 2px dashed #607589;
}
.demo-target {
padding: 12px;
color: #b53625;
background: #ffe4bd;
border: 3px solid #245a85;
quotes: "«" "»" "‹" "›";
}
q::before {
content: open-quote;
}
q::after {
content: close-quote;
}
q q {
quotes: inherit;
}
.stage {
width: 100%;
max-width: 300px;
color: #172c3d;
background: #edf2f5;
font: 18px/1.5 system-ui;
padding: 12px;
border: 2px dashed #607589;
}
.demo-target {
padding: 12px;
color: #b53625;
background: #ffe4bd;
border: 3px solid #245a85;
quotes: "“" "”" "‘" "’";
}
q::before {
content: open-quote;
}
q::after {
content: close-quote;
}
q q {
quotes: inherit;
}
.stage {
width: 100%;
max-width: 300px;
color: #172c3d;
background: #edf2f5;
font: 18px/1.5 system-ui;
padding: 12px;
border: 2px dashed #607589;
}
.demo-target {
padding: 12px;
color: #b53625;
background: #ffe4bd;
border: 3px solid #245a85;
quotes: none;
}
q::before {
content: open-quote;
}
q::after {
content: close-quote;
}
q q {
quotes: inherit;
}
Поддержка браузерами
Спецификация: CSS content
Поддерживается во всех основных браузерах с 2015 года.
| Возможность | Компьютеры | Мобильные | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
 Chrome |  Edge |  Firefox |  Opera |  Safari | Chrome Android | Firefox for Android | Opera Android |  Safari on iOS |  Samsung Browser |  WebView Android | WebView on iOS | |
quotes | 11 | 12 | 1.5 | 4 | 9 | 18 | 4 | 14 | 9 | 1.0 | 4.4 | 9 |
auto | 87 | 87 | 70 | 73 | 14.1 | 87 | 79 | 62 | 14.5 | 14.0 | 87 | 14.5 |
none | 11 | 12 | 1.5 | 15 | 9 | 18 | 4 | 14 | 9 | 1.0 | 4.4 | 9 |
поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31
CSS синтаксис:
quotes: auto | none | [ <string> <string> ]+;
/* Глобальные значения */
quotes: initial | inherit | unset | revert | revert-layer;
| — выбор варианта; [ ] — группа, а внутри типа — допустимый диапазон; + — одно
или несколько повторений.
JavaScript синтаксис:
element.style.quotes = '"«" "»"';Начальное значение свойства
auto.
Значения свойства
| Значение | Описание |
|---|---|
none |
Указывает, что значения "open-quote" (открывающаяся кавычка) и
"close-quote"(закрывающаяся кавычка) свойства
content
не будет создавать никаких кавычек
|
string string + |
Указывает, какие кавычки использовать (допускается использование
кавычек, как символов Юникод(hex), например: "\00AB"). Первые два значения определяют первый уровень
встраивания цитаты, следующие два значения указывают на следующий уровень вложенности и т. д. Добавление типа
кавычек происходит автоматически для тега
<q>
и для текста, к которому применяются значения "open-quote" (открывающаяся кавычка) и
"close-quote"(закрывающаяся кавычка) свойства
content.
|
initial
|
Устанавливает начальное значение свойства. |
inherit
|
Наследует вычисленное значение свойства у родительского элемента. |
unset |
Для наследуемого свойства quotes наследует вычисленное значение у родительского элемента. |
revert |
Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS. |
revert-layer |
Сбрасывает значение свойства для текущего слоя каскада @layer. Применяется значение из другого слоя
по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.
|
auto |
Браузер подбирает пары кавычек по языку текста, заданному, например, атрибутом lang. Начальное значение. |
Спецификация
CSS Generated Content — спецификация quotes.
Наследуется
Да.
Анимируемое
Тип анимации — дискретный: значение переключается без плавных промежуточных положений.
Примеры, попробуйте сами
Внешние и вложенные кавычки
Измените пары кавычек в quotes. Первая пара применяется снаружи, вторая — внутри вложенной цитаты.
base.css
* {
box-sizing: border-box;
}
body {
margin: 16px;
font:
16px/1.5 system-ui,
sans-serif;
color: #172c3d;
}
section {
margin-bottom: 24px;
min-width: 0;
}
h3 {
margin: 0 0 12px;
font-size: 16px;
}
.item {
padding: 8px;
min-width: 0;
background: #c5dbea;
border: 1px solid #35658a;
overflow-wrap: anywhere;
}
index.html
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Внешние и вложенные кавычки</title>
</head>
<body>
<p class="sample">
<q>Цитата с <q>вложенной цитатой</q> внутри</q>
</p>
</body>
</html>
style.css
.sample {
quotes: '«' '»' '‹' '›';
}
q::before {
content: open-quote;
}
q::after {
content: close-quote;
}
Тони готовит пример…