Как фронтендеру сделать интерфейс дружелюбнее к пользователю. Коллекция HTML/CSS лайфхаков

[andreymal]

Если шрифт Roboto не загрузится, то браузеры применят шрифт Arial.

Браузеры применят тот шрифт, который выбран в их настройках

@media (prefers-color-scheme: dark)

Такая реализация не позволяет включить или выключить тёмную тему для отдельного сайта, поэтому так никто не делает

[melnik909]

Браузеры применят тот шрифт, который выбран в их настройках

Спасибо за замечание.

[albertoweb]

Темная тема не получится что-ли, не рабочий код?

[melnik909]

Получится

[Anatoliy_rnd]

Наверное имелось ввиду, что не получиться сделать например , переключатель темы на сайте.

[nihil-pro]

Такая реализация не позволяет включить или выключить тёмную тему для отдельного сайта, поэтому так никто не делает

Позволяет.

Добавляем checkbox

<input id="theme" type="checkbox" />

И еще немного CSS

:root:has(#theme:checked) {
  color-scheme: dark;
  /*    */
}

:root:has(#theme:not(:checked)) {
  color-scheme: light;
  /*    */
}

Нужно также иметь ввиду, что любое переключение темы через CSS/JS всегда будет конкурировать с настройкой ОС, что не всегда хорошо.

[andreymal]

А поддержка color-scheme браузерами уже заметно хуже чем prefers-color-scheme

[nihil-pro]

заметно хуже

Не так уж и заметно:

prefer-color-scheme с 30 июля 2019 г.

color-scheme  c 7 апреля 2020 г.

[andreymal]

По вашим же ссылкам у Firefox стоит 2022 год, а у «Respects color-scheme inherited from parent» вообще сентябрь 2024 и до сих пор не поддерживается в Safari

В любом случае, у меня до сих пор есть живые пользователи Firefox 56, так что для меня даже сам prefers-color-scheme в пролёте 🙃

[supercat1337]

Вообще, :root {color-scheme: light dark;} - эта история не про выбор цветовой схемы по умолчанию, а декларация того, что документ вообще поддерживает цветовые схемы на уровне системы.

Я к тому, что считаю верным отделять понятия цветовой схемы от цветовой палитры/темы.

[nihil-pro]

:root { color-scheme: light dark; }

Такая инструкция говорит браузеру выбрать оформление в соответствии с оформлением на уровне ОС. Если на уровне ОС установлена темная тема, будет выбрано оформление dark, и наоборот.

С одним аргументом она ограничивает использование цветовой схемы. Если указать так:

:root {
  color-scheme: light;
}

То при изменении темы на уровне ОС, ui никак реагировать не будет, а оформление всегда будет light. Пример тут https://codepen.io/s5604/pen/vEErMvL

Код из моего примера этим манипулирует:

:root:has(#theme:checked) {
  color-scheme: dark;
}

:root:has(#theme:not(:checked)) {
  color-scheme: light;
}

В этом случае оформление будет зависеть от состояния чекбокса, а при изменении темы на уровне ОС, ui реагировать не будет. Пример тут https://codepen.io/s5604/pen/jEEKoLQ

[RostislavDugin]

Буквально несколько дней назад зашёл на сайт одного стартапа по парсингу Telegram каналов

Админка зацепила взгляд аккуратным оформлением и очень приятным шрифтом (нейтральный, легкочитаемый, привычный)

Через F12 полез смотреть... оказался system-ui :)

[functyon]

в плане темы и ее цветов есть css-функция light-dark - это еще проще

[nihil-pro]

Поддержка ключевого слова system-ui очень хорошая

Нужно еще учитывать особенность Safari, он не применит этот шрифт к некоторым элементам внутри веб-компонентов (если они используются), я обхожу это так:

* {
  font-family: "Roboto", system-ui;
}

[vistar]

    <input type="password" id="pw" enterkeyhint="send">	
    <button>Отправить</button>

Почему enterkeyhint у input, а не button?

[melnik909]

Хороший вопрос. Спасибо. У меня нет ответа. Мне кажется, что в моем примере атрибут надо указывать у последнего поля ввода. Я как-то не думал, что его можно к button добавить. Надо попробовать

[andreishe]

Потому что экранная клавиатура появляется когда фокус на инпуте.