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

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

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

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


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

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


Какие есть варианты решения данной задачи?
  • Вопрос задан
  • 112 просмотров
1 комментарий
Подписаться 1 Простой 1 комментарий
Помогут разобраться в теме Все курсы
  • Яндекс Практикум
    Профессиональная вёрстка на HTML и CSS
    3 месяца
    Далее
  • Stepik
    Основы HTML и CSS
    2 недели
    Далее
  • OTUS
    HTML/CSS
    3 месяца
    Далее
Решения вопроса 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;
}
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
React разработчик
ITK academy • Нижний Новгород
от 80 000 до 120 000 ₽
Специалист технической поддержки (чат)
WebSoft
от 50 000 до 70 000 ₽
Web-разработчик
ЭНДИ Консалтинг
от 40 000 до 40 000 ₽
Ещё вакансии