quotes

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

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

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

Пример

Секция статьи "Пример"

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

        
          
          body {  quotes: "«" "»" "„" "“";}span::before {  content: open-quote;}span::after {  content: close-quote;}
          body {
  quotes: "«" "»" "„" "“";
}

span::before {
  content: open-quote;
}

span::after {
  content: close-quote;
}

        
        
          
        
      
        
          
          <p>  <q>Скажи <span>церемония</span> по слогам</q>, — попросила она.</p>
          <p>
  <q>Скажи <span>церемония</span> по слогам</q>, — попросила она.
</p>

        
        
          
        
      

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

Открыть демо в новой вкладке

Как пишется

Секция статьи "Как пишется"

Ключевые слова:

        
          
          div {  quotes: none;  quotes: auto;}
          div {
  quotes: none;
  quotes: auto;
}

        
        
          
        
      

Кавычки:

        
          
          div {  quotes: "«" "»";  quotes: "«" "»" "‹" "›";}
          div {
  quotes: "«" "»";
  quotes: "«" "»" "‹" "›";
}

        
        
          
        
      

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

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

Подсказки

Секция статьи "Подсказки"

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

На практике

Секция статьи "На практике"

Алёна Батицкая советует

Секция статьи "Алёна Батицкая советует"

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