skip to main content

quotes

css

Кратко 🔗

CSS-свойство, позволяющее задать вид кавычек на сайте или в отдельном блоке. В каждом языке принято использовать определённый вид кавычек. Например, в русском используются кавычки-ёлочки «», а в английском кавычки-лапки “”.

Указанный в значении вид кавычек будет автоматически выставляться вокруг текста, обёрнутого в тег <q> («q»), или при указании у свойства content псевдоэлементов :before и :after значений open-quote / close-quote.

Пример 🔗

Этому свойству можно указать сразу несколько значений: 1 открывающая кавычка, 2 закрывающая кавычка, 3 открывающая кавычка вложенной цитаты, 4 закрывающая кавычка вложенной цитаты:

body {
quotes: "«" "»" "„" "“";
}

span:before {
content: open-quote;
}

span:after {
content: close-quote;
}
<p>
<q>Скажи <span>церемония</span> по слогам</q>, — попросила она.
</p>

В итоге текст будет выглядеть так:

Как пишется 🔗

/* Ключевые слова */
quotes: none;
quotes: auto;

/* Кавычки */
quotes: "«" "»"; /* Открывающая и закрывающая кавычки */
quotes: "«" "»" "‹" "›"; /* Два уровня кавычек */

none — ключевое слово, сбрасывает любые настройки, кавычки не будут отображаться.

auto — кавычки будут соответствовать языку документа.

Подсказки 🔗

💡 Попробуйте скопировать текст из интерактивного примера выше и вставить куда-нибудь, например, в блокнот. Во вставленном тексте не будет кавычек. Всё потому что их не существует физически в тексте, они расставлены при помощи стилей. Об этой особенности стоит помнить.

В работе 🔗

🛠 Это свойство может быть очень полезно когда вы разрабатывает большой сайт, который будут наполнять контентом другие люди. Чтобы созданный дизайн соблюдался во всех мелочах вы можете принудительно прописать тот вид кавычек, который будет расставляться в текстах. Но при других обстоятельствах это свойство редко пригождается 🤷‍♀️

Автор: Алёна,