Каскадные Таблицы Стилей / Про цвета и input'ы

Вступление

Привет, Хабр! Это мой первый хабратопик. Надеюсь, его прочитает хотя бы полтора верстальщика. Если после этого хотя бы один сайт станет лучше, я буду очень рад.

Ничто не предвещало беды

Как и любой слегка красноглазый линуксойд, я люблю экспериментировать. До сборки релиз-кандидатов ядра и ковыряния в экзотических оконных менеджерах дело не дошло, но в поисках приключений я все же пересел на тестовую ветку моего дистрибутива, что привело к переезду на четвертую версию КДЕ. Несколько месяцев до переезда я присматривался к новым кедам в виртуальной машине, игрался с плазмой и новым оформлением. В один прекрасный день решил я попробовать темную цветовую схему «Wonton Soup», да так на ней и остался, хотя всю жизнь использовал светлые схемы.

Суровая реальность

Все было замечательно, плавные градиенты радовали глаз, мелкие шероховатости были уничтожены опытными руками и напильником. Но осталась одна глобальная проблема, с которой сталкиваются все пользователи темных цветовых схем: дизайнеры и верстальщики абсолютно не задумываются над тем, что кто-то может использовать нестандартные темы. Оформленные в светлых тонах страницы сами по себе не страшны, если постоянно не переключаться с темных страниц на светлые. Неприятности появляются при сочетании двух факторов:

1. браузер использует системные стили и цвета для input'ов на страницах. Абсолютное большинство современных браузеров именно так и поступает для лучшей интеграции в окружение
2. верстальщик прописывает в CSS свой цвет текста для полей ввода, кнопок или списков, но оставляет дефолтный фон. Либо наоборот, меняет только цвет фона

В абсолютном большинстве OS и DE по умолчанию элементы интерфейса имеют светлый фон, текст же рисуется черным цветом. В этом случае ничего страшного не происходит, мы просто увидим, к примеру, input'ы с темно-серым текстом на светлом фоне, как и задумывалось в дизайне страницы. Но в темных схемах может случится конфуз, и мы увидим темно-серый текст на темном же фоне. Т.е, ничего не увидим.

Доска позора

Приведу скриншоты с некоторых популярных сайтов, посещение которых вызывает у меня желание послать луч ненависти верстальщикам.

Источник: Уроки CSS на Хабрахабре