30.06.2026 14:48
Как использовать зависящие от языка кавычки в CSS HTML имеет встроенную поддержку автоматических кавычек, которые завис
Как использовать зависящие от языка кавычки в CSS
HTML имеет встроенную поддержку автоматических кавычек, которые зависят от языка.
Вот пример:
<q lang="en">Hello</q>
<q lang="de">Hallo</q>
<q lang="fr">Bonjour</q>
Визуально результат будет таким:
"Hello"
„Hallo“
«Bonjour»
И это работает и в CSS!
Если вы используете селектор ::before и хотите добавить кавычки вручную, вы можете использовать значение open-quote для свойства content.
q::before {
content: open-quote;
}
q::after {
content: close-quote;
}
Совместно с HTML-атрибутом lang, браузер сам позаботится о корректных кавычках. Это особенно полезно для многоязычных сайтов и повышает доступность.
https://www.stefanjudis.com/today-i-learned/how-to-use-language-dependent-quotes-in-css/
👉 @frontend_1
HTML имеет встроенную поддержку автоматических кавычек, которые зависят от языка.
Вот пример:
<q lang="en">Hello</q>
<q lang="de">Hallo</q>
<q lang="fr">Bonjour</q>
Визуально результат будет таким:
"Hello"
„Hallo“
«Bonjour»
И это работает и в CSS!
Если вы используете селектор ::before и хотите добавить кавычки вручную, вы можете использовать значение open-quote для свойства content.
q::before {
content: open-quote;
}
q::after {
content: close-quote;
}
Совместно с HTML-атрибутом lang, браузер сам позаботится о корректных кавычках. Это особенно полезно для многоязычных сайтов и повышает доступность.
https://www.stefanjudis.com/today-i-learned/how-to-use-language-dependent-quotes-in-css/
👉 @frontend_1