CSS властивості
ГлавнаяВластивості CSSАтрибут quotes в CSS

Атрибут quotes в CSS

349

Встановлює тип лапок, який застосовується в тексті документа. У кожній мові існують свої традиції для позначення лапок, властивість quotes дозволяє задати вид їх відображення по всьому тексту та встановити таким чином його одноманітне оформлення. Додавання лапок відбувається автоматично для вмісту контейнера <q>, а також для тексту, до якого застосовується стильова властивість content зі значенням open-quote (відкриваюча лапка) або close-quote (закриваюча лапка).

Коротка інформація

Значення за замовчуванням Залежить від браузера, його налаштувань та операційної системи. Найчастіше використовується лапки виду "/"
Спадковується Так
Застосовується До всіх елементів
Анімується Ні

Синтаксис

<code>quotes: [<Рядок> <Рядок>]+ | none

Позначення

Опис Приклад
<тип> Вказує тип значення. <розмір>
A && B Значення повинні виводитися в зазначеному порядку. <розмір> && <колір>
A | B Вказує, що потрібно вибрати лише одне значення із запропонованих (A або B). normal | small-caps
A || B Кожне значення може використовуватися самостійно або спільно з іншими у довільному порядку. width || count
[ ] Групує значення. [ crop || cross ]
* Повторювати нуль або більше разів. [,<час>]*
+ Повторювати один або більше разів. <число>+
? Вказаний тип, слово або група не є обов'язковим. inset?
{A, B} Повторювати не менше A, але не більше B разів. <радіус>{1,4}
# Повторювати один або більше разів через кому. <час>#

Значення

В якості значення використовується символ тексту (наприклад, quotes: "« ;""»") або символ юнікоду. Деякі з них перераховані в табл. 1.

Табл. 1. Види лапок
Вигляд Спецкод HTML Юнікод Опис
" &#34; \0022 Подвійна лапка, застосовується зазвичай у моноширинних шрифтах, для позначення символу дюйма, а також кутових секунд.
' &#39; \0027 Апостроф. Символ кутових хвилин, в латиниці застосовується для позначення м'якого знака (popalas' lisa). &#171; або &laquo; \00ab Двійна кутова лапка, що відкриває.
» &#187; або &raquo; \00bb Двійна кутова лапка, що закриває.
&#8216; \2018 Відкриваюча одинарна лапка.
&#8217; \2019 Закриваюча одинарна лапка.
&#8220 ; \201c Подвійна лапка, що відкриває в англомовних текстах або закриває для російської мови.
&#8221; \201d Закриваюча подвійна лапка в англомовних текстах.
&#8222; \ 201e Двійна лапка, що відкриває. Застосовується в російській мові. div>

Пісочниця

6-desktop playground-values">
div::before { content: open-quote; } 
div::after { content: close-quote; } 
div { quotes: <span class="playground-active">{{ playgroundValue }}</span>; }

Приклад

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>quotes</title> <style> q { font-family: Times, serif; /* Шрифт із засічками */
font-style: italic; /* Курсивне зображення тексту */
color: navy; /* Синій колір тексту */
quotes: "0ab" "0bb"; /* Лапки у вигляді подвійних кутових дужок */
}
</style>
</head>
<body> <p>Станіслав Лец стверджував: <q>Найчастіше вихід там, де був вхід</q>.</p>
</body>
</html>

Результат цього прикладу показаний на рис. 1.

Застосування якості quotes Рис. 1. Застосування якості quotes

Об'єктна модель

Об'єкт.style.quotes

Специфікація

Специфікація Статус
CSS Level 2 Revision 1 (CSS 2.1) Рекомендація

Специфікація

Кожна специфікація проходить кілька ст. адій схвалення.

  • Recommendation (Рекомендація) — специфікація схвалена W3C і рекомендована як стандарт.
  • Candidate Recommendation ( Можлива рекомендація) — група, яка відповідає за стандарт, задоволена, як він відповідає своїм цілям, але потрібна допомога спільноти розробників з реалізації стандарту.) — на цьому етапі документ представлений на розгляд Консультативної ради W3C для остаточного затвердження. та внесення поправок для розгляду спільнотою.
  • Editor's draft (Редакторська чернетка) — чорнова версія стандарту після внесення змін до редакторів проекту.
  • Draft (Чернетка специфікації) — перша чорнова версія стандарту.

Браузери

8 12 11 4 5.1 1.5
2.1 2 6 5.1

Браузери

У таблиці браузерів застосовуються такі позначення.

  •  — властивість повністю підтримується браузером з усіма допустимими значеннями;
  •  — властивість браузером не сприймається та ігнорується;
  •  — при роботі можлива поява різних помилок, або властивість підтримується лише частково, наприклад, не всі допустимі значки дії діють або властивість застосовується не до всіх елементів, які вказані в специфікації.

Кількість вказує версію браузера, починаючи з якої властивість підтримується.