Задать вопрос
@ymfront
css

Как задать стили в зависимости от языка страницы?

Есть страница, на которой нужно менять стили в зависимости от языка страницы, заданного в теге HTML:

<html lang="ru">
<html lang="en">


Нашел решение, что язык можно указать в медиазапросе, но у меня почему-то не работает.

@media (lang: en) {
    body {
        background-color: lightblue;
    }
}


Какие есть варианты решения данной задачи?
  • Вопрос задан
  • 94 просмотра
1 комментарий
Подписаться 1 Простой 1 комментарий
Решения вопроса 3
@ImMrDimm
Что если попробовать что-то такое

Объявляем переменные, которые принимают значения в зависимости от языка на уровне root
:root {
    --main-color: blue;
}


На уровне html переопределяем их как нам нравится в связке с языком

html[lang="en"]
{
    --main-color: red;
}
html[lang="ru"]
{
    --main-color: green;
}


А затем в нужных местах используем эту переменную

h1 {
color:  var(--main-color);
}


Проверил, без всяких scss/less работает
Ответ написан
Комментировать
Комментировать
alsolovyev
@alsolovyev
¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
https://developer.mozilla.org/en-US/docs/Web/CSS/:lang
https://developer.mozilla.org/en-US/docs/Web/HTML/...
*:lang(en-US) {
  outline: 2px solid deeppink;
}
*:lang(ru) {
  color: red;
}
Ответ написан
2 комментария
2 комментария
Rsa97
@Rsa97
Для правильного вопроса надо знать половину ответа 
html:lang(en) body {
  background-color: lightblue;
}
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
Верстальщик HTML
MST
от 450 $
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Сделать запись в файл на ubuntu
27 дек. 2024, в 03:33
1500 руб./за проект
Сделать анимацию и отрисовать иллюстрации
27 дек. 2024, в 02:41
50000 руб./за проект
Нарисовать арты
26 дек. 2024, в 23:03
500 руб./в час
Ещё заказы