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


Вступление

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

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

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

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

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

Доска позора

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

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


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



Похожие публикации

Brackets для сомневающихся и новичков

СД: НЧ Без плагинов Brackets не лучше других редакторов, но с ними его стоит хотя бы попробовать. Введение Не так давно на Хабре было опубликовано множество статей, касающихся тем или иным образом... читать далее

Каскадные Таблицы Стилей / Заметка про верхний/нижний регистр текста

Прочитав много статей про Android 2.2 «Froyo», решил посмотреть, на официальном сайте производителя моего смартфона, нет ли каких-либо заметок про обновление прошивки. Зайдя в Google и набрав текст... читать далее

Каскадные Таблицы Стилей / [Ссылка] Frame: Фреймворк нового поколения

После заевшегося 960.gs и Blueprint, захотелось чего то нового. Долго и упорно насиловал гугл, наткнулся на помесь того, что мне и было нужно. Смесь довольно интересная, реализует концепты... читать далее

Путь верстальщика: с нуля до сеньора

Здравствуйте, меня зовут Александр Зеленин, и я веб-разработчик. Многократно я слышал мнение, что верстка — удел начинающих frontend’еров. Хотя фактически это важнейшая часть любого (почти)... читать далее

CSS Grid Layout. Быстрый старт

Вступление Всем привет. Февраль-Март 2017 года запомнились для многих, кто работает с HTML и CSS тем, что большинство браузеров выпустили обновления, среди которых были и обновления для CSS. Теперь... читать далее

Несколько слов о градиентах

Всем привет! Сегодня хочу поговорить немного о градиентах, популярных сайтах, предоставляющих пользователям возможность выбирать и/или генерировать их, а так же, о нескольких градиентах, которые я... читать далее

Прокомментировать


@

  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent

Архив сайта

Реклама на сайте Веб студия в Киеве hover