CSS :: Свойство quotes

css-свойство quotes (от англ. quotes – кавычки) позволяет установить однообразное употребление кавычек в тексте при их автоматическом добавлении (например, в случае использования тега <q>).

Характеристики

Значение по умолчанию: Зависит от браузера и операционной системы.
Применяется: ко всем элементам.
Наследуется: да.
Анимируется: нет.
JavaScript: object.style.quotes="value".

Синтаксис

quotes: [<строка> <строка>]+ | none

Значения

В качестве значений свойство принимает символ открывающей кавычки и символ закрывающей кавычки. При этом сами символы также должны быть взяты в кавычки.

Ссылки

Официальный сайт W3C: https://drafts.csswg.org/css2/generate.html#propdef-quotes

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/quotes

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

  <style>
  
	p{
	width: 400px;
	quotes: "\0022" "\0022";
	}
		
	div{
	width: 400px;
	quotes: "'" "'";
	}
	
  </style>
  
</head>
<body>

	<p>
		Теперь в элементах «p» при автоматическом добавлении
		кавычек браузером будут использоваться вот такие 
		<q style="color: orange;">кавычки</q>.
	</p>
	
	<div>
		Теперь в элементах «div» при автоматическом добавлении
		кавычек браузером будут использоваться вот такие 
		<q style="color: violet;">кавычки</q>.
	</div>
	
</body>
</html>

Пример №1