Css bgcolor: background-color — CSS: Cascading Style Sheets

Цветовые поля списка · GitHub

	темно-красный: sp-css-backgroundColor-BgDarkRed sp-css-borderColor-WhiteFont sp-css-color-WhiteFont
	Красный: sp-css-backgroundColor-BgRed sp-css-borderColor-WhiteFont sp-css-color-WhiteFont
	Оранжевый: sp-css-backgroundColor-BgOrange sp-css-borderColor-WhiteFont sp-css-color-WhiteFont
	Коричневый: sp-css-backgroundColor-BgBrown sp-css-borderColor-WhiteFont sp-field-fontSizeSmall sp-css-color-WhiteFont
	Зеленый: sp-css-backgroundColor-BgGreen sp-css-borderColor-WhiteFont sp-field-fontSizeSmall sp-css-color-WhiteFont
	Teal: sp-css-backgroundColor-BgTeal sp-css-borderColor-WhiteFont sp-field-fontSizeSmall sp-css-color-WhiteFont
	темно-зеленый: sp-css-backgroundColor-BgDarkGreen sp-css-borderColor-WhiteFont sp-field-fontSizeSmall sp-css-color-WhiteFont
	Синий: sp-css-backgroundColor-BgBlue sp-css-borderColor-WhiteFont sp-field-fontSizeSmall sp-css-color-WhiteFont
	Лаванда: sp-css-backgroundColor-BgLavender sp-css-borderColor-WhiteFont sp-field-fontSizeSmall sp-css-color-WhiteFont
	темно-синий: sp-css-backgroundColor-BgDarkBlue sp-css-borderColor-WhiteFont sp-field-fontSizeSmall sp-css-color-WhiteFont
	темно-фиолетовый: sp-css-backgroundColor-BgDarkPurple sp-css-borderColor-WhiteFont sp-field-fontSizeSmall sp-css-color-WhiteFont
	Purple: sp-css-backgroundColor-BgPurple sp-css-borderColor-WhiteFont sp-field-fontSizeSmall sp-css-color-WhiteFont
	темно-розовый: sp-css-backgroundColor-BgDarkPink sp-css-borderColor-WhiteFont sp-field-fontSizeSmall sp-css-color-WhiteFont
	Серый: sp-css-backgroundColor-BgGray sp-css-borderColor-WhiteFont sp-field-fontSizeSmall sp-css-color-WhiteFont
	Coral: sp-css-backgroundColor-BgCoral sp-css-borderColor-CoralFont sp-field-fontSizeSmall sp-css-color-CoralFont
	Dust Rose: sp-css-backgroundColor-BgDustRose sp-css-borderColor-DustRoseFont sp-field-fontSizeSmall sp-css-color-DustRoseFont
	Персик: sp-css-backgroundColor-BgPeach sp-css-borderColor-PeachFont sp-field-fontSizeSmall sp-css-color-PeachFont
	Gold: sp-css-backgroundColor-BgGold sp-css-borderColor-GoldFont sp-field-fontSizeSmall sp-css-color-GoldFont
	Мятно-зеленый: sp-css-backgroundColor-BgMintGreen sp-css-borderColor-MintGreenFont sp-field-fontSizeSmall sp-css-color-MintGreenFont
	Cyan: sp-css-backgroundColor-BgCyan sp-css-borderColor-CyanFont sp-field-fontSizeSmall sp-css-color-CyanFont
	Sage: sp-css-backgroundColor-BgSage sp-css-borderColor-SageFont sp-field-fontSizeSmall sp-css-color-SageFont
	Васильковый: sp-css-backgroundColor-BgCornflowerBlue sp-css-borderColor-CornflowerBlueFont sp-field-fontSizeSmall sp-css-color-CornflowerBlueFont
	светло-фиолетовый: sp-css-backgroundColor-BgLightPurple sp-css-borderColor-LightPurpleFont sp-field-fontSizeSmall sp-css-color-LightPurpleFont
	Светло-синий: sp-css-backgroundColor-BgLightBlue sp-css-borderColor-LightBlueFont sp-field-fontSizeSmall sp-css-color-LightBlueFont
	Фиолетовый: sp-css-backgroundColor-BgViolet sp-css-borderColor-VioletFont sp-field-fontSizeSmall sp-css-color-VioletFont
	Сиреневый: sp-css-backgroundColor-BgMauve sp-css-borderColor-MauveFont sp-field-fontSizeSmall sp-css-color-MauveFont
	Сиреневый: sp-css-backgroundColor-BgLilac sp-css-borderColor-LilacFont sp-field-fontSizeSmall sp-css-color-LilacFont
	LightGray: sp-css-backgroundColor-BgLightGray sp-css-borderColor-LightGrayFont sp-field-fontSizeSmall sp-css-color-LightGrayFont

Почему вы всегда должны устанавливать цвет фона

Raphael Schweikert прокомментировал первый пост этой серии и сделал несколько поясняющих замечаний:

Я помню 90-е, когда цвет фона большинства браузеров был серым. IE был единственным, у которого по умолчанию был белый фон браузера. Другие последовали их примеру.

Даже если вы, как и я, не жили в те времена, вы наверняка сталкивались с этими серыми скриншотами из прошлого.

Итак, Internet Explorer принял решение, которое определило форму сети, какой мы ее знаем сейчас: белый цвет.

Фанатская теория: на самом деле Гэндальф — это Internet Explorer. Заманчивое, но опасное кольцо — это JavaScript. Иди пересмотри их сейчас.

Рафаэль также объяснил, что вы все еще можете это изменить. В Firefox это просто:

• Перейдите на about:config
• Поиск параметра browser.display.background_color
• Значение по умолчанию: #ffffff . Измени это!

Это не секрет разработчика: все параметры, упомянутые в этом посте, могут быть настроены любым пользователем с помощью более удобного интерфейса.

Панель конфигурации цвета в Firefox

Не каждый браузер обрабатывает это одинаково: Chrome, например, поощряет использование расширений и тем. Но вот в чем дело: у пользователя не обязательно будет белый фон браузера. Как всегда, предположения — наши враги. Мы ничего не знаем.

Допустим, я поклонник темного режима и установил цвет фона браузера на #000000 .

Первый эффект заключается в том, что когда ничего не отображается, потому что я загружаю другой веб-сайт, мой экран будет черным.

Успокаивающий черный цвет заполняет экран, пока загружается новый веб-сайт

. Пользователь Reddit объяснил это в сообщении под названием «Как не ослепнуть белым светом при открытии нового сайта». Это действительно немедленное улучшение, но это еще не все.

Еще один пост, название которого мне очень нравится, дополняет картину: я изменил цвет фона на черный. Теперь я ничего не вижу.

К сожалению, установив черный фон, этот пользователь сделал сеть… невидимой.

Помните, что объясняет w3c:

Если фон холста не непрозрачен, то, что просвечивает, зависит от UA.

Это означает, что если вы не установите цвет фона для своей страницы (который заполнит холст), фон браузера будет просвечиваться.

Вы можете видеть фон браузера, если холст прозрачен, потому что цвет фона не установлен.

Хотя многие веб-сайты явно устанавливают белый фон, это не всегда так, и именно поэтому сеть может стать невидимой.

Вот как выглядит TechCrunch с черным фоном моего браузера:

Трудно читать? Вот что будет делать черный текст на черном фоне браузера. Действительно, CSS TechCrunch не устанавливает цвет фона.

Исправить очень просто:

 body {
  цвет фона: белый;
}
 

Войти в полноэкранный режимВыйти из полноэкранного режима

Мы не меняли фон браузера: он по-прежнему черный. Но холст, который был прозрачным, теперь белый.

Итак, вот совет от Рафаэля:

Я установил [цвет фона браузера] на серый, чтобы проверить, не забыл ли я случайно добавить background:white на страницу, которая должна иметь белый фон.

Похоже, это отличный совет, который побудил меня написать этот новый пост. Недостатком является то, что вы увидите серый фон на TechCrunch и других «прозрачных веб-сайтах» (если, конечно, вы не используете отдельные среды для разработки и случайного просмотра).

Хотя это не является репрезентативным для «Интернета», я протестировал 100 самых посещаемых веб-сайтов, и 14% из них имели прозрачное полотно , пропускающее желтый цвет фона, который я использовал в своем расследовании.

Не очень здоровый цвет фона

Среди них: The Wall Street Journal, Paypal, Vimeo, AOL, BBC…

Я использовал этот ужасный желтый цвет в качестве фона в течение нескольких дней, и я считаю, что соотношение 14% в соответствии с повседневной навигацией. Я могу сказать вам, что чтение вещей на таком фоне очень сильно мотивирует меня закончить это письмо.

Вы можете подумать:

Если пользователь решит использовать черный цвет в качестве фона, может быть, у него есть причина, и мы не должны вмешиваться?

Это сложно. Кто меняет «универсальный» белый фон?

Это может быть пользователь. Это может быть сам пользовательский агент (это может быть компьютер, телефон, а также множество различных устройств).

Статистику об этом получить невозможно, но мы можем быть уверены в том, что неопределенная часть наших пользователей не будет иметь белый фон. А так прозрачный сайт сломается.

За исключением случаев, когда пользователь/браузер также меняет цвет текста по умолчанию. В Firefox это легко. Обновите параметр

browser.display.foreground_color .

Это значение будет использоваться для любого текста, цвет которого не задан в CSS. Вернемся к TechChrunch.

Это не здорово. Да, часть текста теперь белая. Но это только текст, цвет которого не задан в CSS. Поскольку цвет текста обычно немного отличается от черного, большая часть контента по-прежнему не может быть прочитана.

Чтобы это работало, вам понадобится веб-сайт без явного цвета фона и без явного цвета текста .

На веб-сайте motherfuckingwebsite.com нет CSS, поэтому он работает хорошо.

Обратите внимание, что вы также можете установить цвет ссылок, выделенного текста и т. д., но это то же правило: это будет работать, только если не применяется CSS, что маловероятно для большинства веб-сайтов. Цветовое столкновение обязательно произойдет.

Итак, я думаю, что есть два решения:

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

Вот почему вы можете добавить в шаблон следующие строки:

 body {
  цвет фона: белый;
  черный цвет;
}
 

Войти в полноэкранный режимВыйти из полноэкранного режима

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

Я большой сторонник уважения выбора пользователя (или его браузера). CSS, который мы пишем, должен быть не императивным приказом для создания идеальной по пикселям страницы, а набором указаний, которые браузер может использовать, среди прочего, чтобы знать, как должен выглядеть результат.

С другой стороны, я думаю, мы установили, что безопаснее «форсировать» фон и цвет текста веб-сайта, иначе он может быстро стать нечитаемым.

К счастью, оба подхода можно согласовать, потому что наши браузеры умны. И это последняя настройка, о которой я хочу поговорить: browser.display.document_color_use .

Когда для этого параметра установлено значение 2 , Firefox заменит все цвета CSS на те, которые определены пользователем или самим Firefox. Другими словами:

Меня не волнует ваш CSS, просто используйте эти цвета!

Давайте еще раз попробуем темный режим, установив цвет фона Firefox на черный, а цвет переднего плана на белый. Только на этот раз CSS не сможет переопределить наш выбор, благодаря document_color_use настройка.

Теперь работает. Я даже изменил цвет ссылок на что-то более подходящее. CSS не изменился, но Firefox переопределяет его.

Теперь, когда браузер может использовать только определенную нами цветовую схему, более вероятно, что веб-сайты будут отображать приемлемое изображение.

Я протестировал 14 прозрачных веб-сайтов из топ-100, и каждый из них работал хорошо. По моим оценкам, примерно 95% контента было отлично читабельно с моей настроенной цветовой схемой. Но, конечно, это не идеально.

Домашняя страница Vimeo вполне разборчива… за исключением логотипа и ссылок в правом верхнем углу.

Обратите внимание, что при использовании параметра document_color_use затрагиваются все веб-сайты, а не только прозрачные.

У dev.to есть фоновый цвет, который переопределяется моими настройками Firefox

. Он не может заменить созданный вручную темный режим (а у dev. to он есть), но в большинстве случаев вы получаете хороший результат.

Более важный, чем темный режим, это отличный вариант для доступности. Вот TechCrunch с Параметр document_color_use включен и цветовая схема Firefox по умолчанию:

Вау, сколько ссылок. Почти все здесь внутри тегов, отсюда и синий цвет. Давайте немного прокрутим и сравним оригинальный дизайн с тем, что у нас есть сейчас:

Вверху: поведение по умолчанию. Внизу: цветовая схема Firefox.

При принудительной цветовой схеме Firefox вы можете видеть чистый черный цвет для текста (вместо средне-серого в исходном дизайне) и синий для ссылок. Это немного жестоко, но отлично подходит для визуальной доступности.

Собственно, это то, что автоматически произойдет в Windows, если вы включите «режим высокой контрастности» ОС. Никаких манипуляций с браузером не требуется.

При этом это не может заменить хороший дизайн доступности .