quotes

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 — кавычки будут соответствовать языку документа.

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

На практике

Скопировать ссылку "На практике" Скопировано

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

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

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