Input type color: — HTML: HyperText Markup Language

Leave a Comment / Разное / By /

Содержание

Такой разный color input: межбраузерный кошмар перфекциониста

Frontend стремится к унификации, но браузеры остаются своевольными ребятами. Разбираемся в межбраузерных различиях элемента color input.

[codepen_embed theme_id=»0″ slug_hash=»xvxQjL» default_tab=»html,result» user=»mohnatus-the-lessful»]See the Pen <a href=’https://codepen.io/mohnatus-the-lessful/pen/xvxQjL/’>input type color</a> by FurryCat (<a href=’https://codepen.io/mohnatus-the-lessful’>@mohnatus-the-lessful</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

Что внутри?

Чтобы исследовать инпут, нужно получить доступ к его внутренней структуре (shadow DOM).

В Chrome:

  • Откройте DevTools;
  • В разделе Settings (F1) -> Preferences найдите пункт Elements;
  • Поставьте галочку Show user agent shadow DOM.

Появятся два элемента <div>. Внешний доступен по селектору ::-webkit-color-swatch-wrapper, внутренний – ::-webkit-color-swatch.

В Firefox:

  • Откройте about:config;
  • Поставьте true для флага devtools.inspector.showAllAnonymousContent.
  • Откройте DevTools;
  • В настройках (F1) найдите раздел Инспектор;
  • Включите опцию Отображать стили браузера.

Здесь появился всего один элемент. Он доступен по селектору ::moz-color-swatch, что можно увидеть в панели стилей.

К сожалению в старом Edge нет возможности просмотреть и стилизовать теневой DOM.

  • 14 наиболее полезных особенностей Chrome DevTools

Где смотреть?

Браузеры позволяют просматривать вычисленные стили (computed styles), а в Chrome и Firefox также можно увидеть таблицы стилей самого браузера, влияющие на элемент.

Стили браузера в Chrome (сверху) и Firefox (снизу)

В Firefox также можно посмотреть на полный файл стилей для форм view-source:resource://gre-resources/forms.css.

Мы будем использовать и стили браузера, и вычисленные стили для разных свойств в зависимости от их информативности.

  • Элементы CSS: селекторы и позиционирование c примерами
  • Большая подборка лучших ресурсов для изучения CSS
  • Самые важные концепции CSS

Собственно color input

Перейдем к свойствам самого элемента color input и их дефолтным значениям в разных браузерах.

Box model

box-sizing

В Firefox по умолчанию установлено значение border-box, а Chrome и Edge, похоже, просто не изменяют дефолтное значение content-box.

box-sizing в Chrome, Firefox и Edge (сверху вниз)
margin

Вычисленное значение margin везде равно 0.

margin в Chrome, Firefox и Edge (сверху вниз)
border

А вот рамка (border) везде разная.

В Chrome и Edge ее толщина составляет 1px, в Firefox – 2px. Цвета тоже отличаются:

  • Chrome – rgb(169, 169, 169);
  • Edge – rgb(112, 112, 112);
  • Firefox – ThreeDLightShadow – устаревшее значение CSS2 (rgb(227, 227, 227)).
border в Chrome, Firefox и Edge (сверху вниз)

В Firefox (по крайней мере в Windows) настройки масштабирования ОС (Настройки -> Система -> Дисплей -> Масштаб и разметка) влияют на вычисленное значение свойства border-width и, похоже, это как-то связано со стилем рамки.

Самое странное, что вычисленные значения для различных уровней масштабирования, похоже, выбраны случайно. Если сохранить исходный стиль border-style: outset

, мы получим:

  • 1.6px – 125%;
  • 2px – 150%;
  • 1.7px – 175%;
  • 1. 5px – 200%;
  • 1.8px – 225%;
  • 1.6px – 250%;
  • 1.66667px – 300%.

Но если поменять его на border-style: solid, то на всех масштабах, кратных 50%, вычисленная толщина рамки станет равна 2px. Да, frontend разработка зависит от многих внешних факторов.

padding

В Chrome и Edge паддинги color input имеют значение 1px 2px, а в стилях Firefox – везде 1px.

padding в Chrome, Firefox и Edge (сверху вниз)

Но во вкладке computed в Firefox паддинги равны 0 8px. В чем тут дело?

Дело в том, что браузер использует flow-relative паддинги (логические свойства CSS – вы про них вообще слышали?).

Безусловно, для frontend разработчика было бы лучше, если бы это переопределение было явно обозначено в DevTools (свойство padding должно быть серым и перечеркнутым).

На данный момент логические свойства для color input использует только Firefox, но в будущем все может измениться. Давайте помнить про эту тонкость.

Размеры

Значение width для цветового инпута в Chrome и Edge составляет 44px, а в Firefox – 64px.

Ширина color input в Chrome, Firefox и Edge (сверху вниз)

Свойство height во всех браузерах равно 23px.

Высота color input Chrome, Firefox и Edge (сверху вниз)

В итоге мы наблюдаем такие box model в разных браузерах:

Box Model цветового инпута в Chrome, Firefox и Edge (сверху вниз)
  • content-box: Chrome и Edge – 44 x 23, Firefox – 44 x 19;
  • padding-box: Chrome и Edge – 48 x 25, Firefox – 60 x 19;
  • border-box: Chrome и Edge – 50 x 27, Firefox – 64 x 23.

В Chrome эти размеры установлены явно (в Edge возможно тоже). В Firefox на вкладке computed нельзя увидеть, откуда они взялись. Однако в стилях можно найти flow-relative размеры элемента.

Шрифты

Шрифты используются разные, но нас волнует только размер, который, к счастью, везде один – 13.33(33)px.

Размер шрифта в Chrome, Firefox и Edge (сверху вниз)

Фон

В Edge color input имеет свойство background-image с градиентным значением. В Chrome и Firefox цвет фона равен ButtonFace (еще одно устаревшее значение CSS2). По идее это rgb(240, 240, 240), но Chrome вычисляет его как rgb(221, 221, 221).

background в Chrome, Firefox и Edge (сверху вниз)

Однако визуально у инпута в Chrome градиентный фон. Colorpicker показывает, что градиент идет сверху вниз от #f8f8f8 до #ddd.

В Edge тоже есть странный эффект. Изменение background-color приводит к изменению background-image, background-origin, border-color или border-style.

Edge: побочные эффекты изменения цвета фона color input

Состояния color input

Установить для элемента псевдоклассы в Chrome и Firefox можно, нажав на кнопку :hov на панели стилей. В Edge для тех же целей служит кнопка :a.

Панель состояний в Chrome, Firefox, Edge (сверху вниз)

Внимание! В Firefox к состояниям, установленным таким способом, применяются только пользовательские стили без стилей браузера.

:disabled

Атрибут disabled можно добавить к color input вручную в инспекторе.

В Chrome немного изменился background-color – rgb(235, 235, 228) против стандартного rgb(221, 221, 221).

Но визуально это практически не заметно.

В Firefox меняется только курсор.

Edge справился лучше всех – он изменяет и фон, и рамку.

:focus

В Chrome у псевдокласса :focus появляется заметный синий (rgb(77, 144, 254)) контур.

В Firefox DevTools бесполезен, но сфокусировавшись на инпуте с помощью Tab, мы увидим синюю рамку и пунктирный прямоугольник внутри.

Объяснение этому можно найти в файле forms. css. Пунктирная рамка появляется у псевдоэлемента ::-moz-focus-inner, который почему не отображается в Shadow DOM. При фокусировке добавляется псевдокласс (:moz-focusring) – старая версия нового стандарта :focus-visible, который сейчас поддерживается лишь частично в Chrome.

А синяя рамка, похоже, задается на уровне ОС.

В Edge очень похожее поведение: псевдокласс :focus в DevTools не работает, а при реальной фокусировке появляется пунктирный прямоугольник.

:hover

Chrome не имеет никаких особых стилей для hover-состояния color input.

В Firefox все сложнее. Для псевдокласса :hover появляется новое правило:

При наведении курсора фон color input становится светло-синим, а рамка – синей. Первая мысль: -moz-buttonhoverface – это и есть светло-синий. Однако в вычисленных стилях браузера фон не изменяется относительно нормального состояния. Так что вероятно этот эффект также задается ОС.

В Edge псевдокласс :hover устанавливает для color input светло-синий фон (rgb(166, 244, 255)) и синюю рамку (rgb(38, 160, 218)). Точные значения цветов можно найти во вкладке computed.

:active

Псевдокласс :active в Chrome не имеет каких-то особенных стилей. Но если кликнуть по инпуту, едва заметный градиент фона изменится на противоположный.

В Firefox :active сам по себе тоже не вызывает никаких изменений. Но если добавить к нему :hover, появится новый набор правил, который устанавливает инлайновые паддинги, новый border-style и уже знакомый ButtonFace для background-color.

На практике единственное совпадение – это горизонтальный сдвиг внутреннего контейнера. Цвет фона становится более светлым, чем в состоянии :hover, а граница – синей. Эти изменения, вероятно, происходят на уровне ОС.

В Edge стили для :active те же, что и для :hover. Но если эти псевдоклассы объединить, картина изменится. Становятся темнее фон (rgb(52, 180, 227)) и рамка (rgb(0, 137, 180)).

Swatch wrapper

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

У swatch wrapper нет маргинов и рамок:

Однако присутствуют паддинги (4px 2px), которые нужно будет обнулить:

Оба размера равны 100%, так что с ними можно не возиться:

Свойство box-sizing имеет значение border-box.

Все это означает, что padding-box, border-box и margin-box обертки равны и идентичны размерам content-box самого color input (44 x 23). А content-box имеет размеры (40 x 15).

Фон прозрачный:

Следует обратить внимание на свойство display, равное flex.

  • Что происходит, когда вы создаете flex-контейнер?
  • Еще больше о Flexbox-лейаутах в больших разноцветных гифках
  • 5 техник работы с flexbox, о которых стоит знать веб-разработчику

Swatch

Этот элемент Shadow DOM доступен для стилизации в Chrome и Firefox.

Свойства box-sizing равно content-box в Chrome и border-box в Firefox, так что его придется унифицировать.

swatch box-sizing в Chrome (наверху) и Firefox (внизу)

Размер шрифта наследуется от самого элемента color input.

swatch font-size в Chrome (наверху) и Firefox (внизу)

Маргины обнулены:

swatch margin в Chrome (наверху) и Firefox (внизу)

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

Стиль и толщина границы одинаковы (solid 1px), отличается только цвет:

  • rgb(119, 119, 119) в Chrome;
  • grey (rgb(128, 128, 128)) в Firefox.
swatch border в Chrome (наверху) и Firefox (внизу)

Помните, что вычисленная толщина границы в Firefox (по крайней мере, в Windows) зависит от параметров масштабирования ОС.

Паддинги и там, и там обнулены:

swatch padding в Chrome (наверху) и Firefox (внизу)

Box model выглядит вполне предсказуемо – swatch занимает весь content-box своего родителя (swatch wrapper в Chrome и сам color input в Firefox):

swatch box model в Chrome (наверху) и Firefox (внизу)

В Firefox оба размера равны 100%, именно поэтому значение auto для горизонтальных маргинов превращается в 0.

Размеры swatch в Chrome (наверху) и Firefox (внизу)

А в Chrome размеры элемента определяются flex-моделью.

Проблемы доступности

Современные frontend технологии стремятся к обеспечению доступности веба для людей с ограниченными возможностями.

В Firefox на Windows поле для ввода цвета имеет огромные проблемы с доступностью. Вы можете сфокусироваться на нем (Tab) и даже открыть диалог выбора (Enter), но перемещаться по нему с помощью клавиатуры нельзя. К счастью, привычная комбинация для выхода (Alt + F4) работает.

В тикете этого бага можно найти обходной маневр. Если переключиться на другое окно, а затем обратно на текущее (Alt + Tab) диалоговое окно станет доступно.

В Safari дела обстоят еще хуже. Не работает даже фокусировка, если не включен VoiceOver.

Кошмар перфекциониста

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

Жизнь frontend developer не так трудна и интересна, как лет 10 назад, но и сейчас браузеры продолжают радовать нас несогласованностью.

Увы, даже если вам удастся привести color input к единому виду, проблемы доступности никуда не денутся 🙁 Возможно, пора подтолкнуть разработчиков к их решению.

Была ли статья полезной? Делитесь своими идеями для следующих статей в комментариях 🙂

input(type-color)_element (html) | Поддержка специальных возможностей

Уровень поддержки чтения с экрана: частичный (20/56)

Уровень поддержки голосового управления: частичный (6/24)

На этой странице

Об этой функции

Элемент input представляет собой элемент управления цветовой шкалой, для установка значения элемента в строку, представляющую простой цвет.

Возраст результатов

Результаты всех тестов для этой функции варьируются от года до 3 лет назад. Подробные даты и информацию о версии можно найти в соответствующих тестах.

Предупреждение

Неправильные или частичные результаты могут быть устаревшими. Самый старый результат трехлетней давности. Рассмотрите возможность запуска связанных тестов и внесения результатов.

Ожидания

Что такое ожидания?

Screen Reader support by expectation

Expectation JAWS Narrator NVDA Orca TalkBack VoiceOver (iOS) VoiceOver (macOS)
Chrome Edge Firefox Edge Chrome Edge Firefox Firefox Chrome Safari Safari
ДОЛЖЕН сообщать свое имя нет нет поддерживается поддерживается частично частично поддерживается поддерживается none supported partial
MUST convey its role none none supported supported none none supported supported supported supported partial
ДОЛЖЕН передавать текущее значение нет нет нет поддерживается поддерживается supported none none partial supported partial
MUST convey changes in value none none none partial supported supported none none поддерживается поддерживается нет
СЛЕДУЕТ предоставлять ярлыки для перехода к этой роли нет нет supported supported none none supported supported supported supported supported
MUST support the color picker widget none none partial partial частичное частичное частичное частичное частичное поддерживаемое частичное

Поддержка голосового управления от ожидания

Ожидания Dragon Control Control Voice Access (Android) CONTROL CONTROL (IOS (Android) CONTROLS Распознавание речи Голосовой доступ Windows
Chrome Chrome Safari Safari Edge Chrome Edge Chrome
MUST convey its name none none supported none unknown supported unknown unknown
MUST convey its role none поддерживается неприменимо нет неизвестно поддерживается неизвестно неизвестно
ДОЛЖЕН поддерживать виджет выбора цвета Нет Поддержка Поддерживается Нет Неизвестный Нет Неизвестный Неизвестный

Ожидаемый: antonly

Ожидается: CONVEY

9053

Ожидается: CONVEY

9053

: CONVEY ISTAVE

9053

.

.

Сила этого ожидания для различных типов вспомогательных технологий:
  • Программы чтения с экрана: НЕОБХОДИМО
  • Голосовое управление: НЕОБХОДИМО
Примечания:

Для входных данных формы — команды для чтения построчно (стрелки вниз и вверх в большинстве средств чтения с экрана Windows) не всегда приводят к явной передаче имени, когда виртуальный фокус перемещается на ввод, где метка отображается визуально и программно. связанные с вводом. Это приемлемо, потому что имя подразумевает тот факт, что оно должно естественным образом встречаться в порядке чтения. Некоторые программы чтения с экрана предпочитают не передавать имя в таких случаях, вероятно, в попытке уменьшить многословие.

Примеры:
  • Программа чтения с экрана объявит имя (метку).
  • Программное обеспечение для голосового управления позволяет пользователю сказать что-то вроде «нажмите <имя>«, чтобы активировать управление.

Поддержка считывателя экрана «обязательно передать его название»
Тест JAWS JAWS9 JAWS9. 0038 VoiceOver (macOS)
Chrome Edge Firefox Edge Chrome Edge Firefox Firefox Chrome Safari Safari
Basic html color input test нет нет поддерживается поддерживается частично частично поддерживается поддерживается нет Поддержал Частичный

17. 19100 2
Поддержка голосового управления для ‘обязательно передать его название’
TEST
TEST
TEST
TEST
. (iOS) Голосовое управление (MacOS) Распознавание речи Windows Голосовой доступ Windows
Chrome Chrome Safari Safari Edge Chrome Edge Chrome
Basic html color input test none none supported none unknown supported unknown unknown

Ожидание: передать его роль

Обоснование:

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

Сила этого ожидания для различных типов вспомогательных технологий:
  • Программы чтения с экрана: НЕОБХОДИМО
  • Голосовое управление: НЕОБХОДИМО
Примеры:
  • «ввод текста», «редактирование», «редактирование текста» и т. д.
  • Если реализовано как средство выбора цвета, программе чтения с экрана может быть объявлена ​​роль «кнопки», «выбора цвета», «колодца цвета» и т. д.
  • Программное обеспечение для голосового управления позволяет пользователю произнести что-то вроде «щелкнуть текстовое поле» или «щелкнуть кнопку» или отметить роль цифрой.

Screen Reader support for ‘MUST convey its role’
Test JAWS Narrator NVDA Orca TalkBack VoiceOver (iOS) VoiceOver (macOS)
Chrome Edge Firefox Edge Chrome Edge Firefox Chrome

0038		 Safari Safari
Basic html color input test none none supported supported none none supported supported supported supported partial

Поддержка голосового управления для «ДОЛЖЕН передать свою роль»
Тест Dragon Naturally Speaking Голосовой доступ (Android) Голосовой контроль (IOS) Голосовой контроль (MACOS) ЗАПОНТИРОВАНИЕ WINDOCE VOICE ACCEST
Chrome8
8
. Chr.
хр. 100082 нет неизвестно поддерживается неизвестно неизвестно

Ожидание: передать текущее значение

Обоснование текущего значения считывателя, чтобы узнать, что пользователь вводит экран.

Сила этого ожидания для различных типов вспомогательных технологий:
  • Программы чтения с экрана: ДОЛЖНЫ
  • Голосовое управление: НЕТ0372 Test JAWS Narrator NVDA Orca TalkBack VoiceOver (iOS) VoiceOver (macOS) Chrome Edge Firefox Edge Chrome Edge Firefox Firefox Chrome Safari Safari Базовый ввод цвета 9 html0038 none none none supported supported supported none none partial supported partial

    Expectation: convey changes in value

    Rationale:

    Пользователь должен знать, что значение было успешно изменено.

    Сила этого ожидания для различных типов вспомогательных технологий:
    • Программы чтения с экрана: НЕОБХОДИМО
    • Голосовое управление: нет данных
    Примеры:
    • Когда пользователь вводит текст, программа чтения с экрана сообщит ему об этом.

    Screen Reader support for ‘MUST convey changes in value’
    Test JAWS Narrator NVDA Orca TalkBack VoiceOver (iOS) VoiceOver (macOS)
    Chrome Edge Firefox Edge Chrome Edge Firefox Firefox Chrome Safari Safari
    Basic html color input test none none none частичное поддерживается поддерживается нет нет поддерживается поддерживается нет

    Ожидание: предоставить ярлыки для перехода к этой роли

    Обоснование:

    Пользователи программы чтения с экрана могут захотеть быстро перейти к элементам этого типа.

    Сила этого ожидания для различных типов вспомогательных технологий:
    • Программы чтения с экрана: СЛЕДУЕТ
    • Голосовое управление: НЕТ Test JAWS Narrator NVDA Orca TalkBack VoiceOver (iOS) VoiceOver (macOS) Chrome Edge Firefox Edge Chrome Edge Firefox Firefox Chrome Safari Safari Базовый тест ввода цвета html нет нет Поддержал Поддержка Нет Нет Поддержка Поддержка Поддержка Поддержка Поддержка

      70081. Ожидаемое значение WERSERDALE

      WERSERED

      . чтобы иметь возможность работать с виджетом выбора цвета.

      Сила этого ожидания для различных типов вспомогательных технологий:
      • Программы чтения с экрана: НЕОБХОДИМО
      • Голосовое управление: НЕОБХОДИМО
      Примеры:
      • Если реализовано как текстовое поле, это неприменимо
      • Если реализовано как палитра цветов, средство чтения с экрана должно передавать соответствующую семантику
      • Программное обеспечение голосового управления позволит пользователю активировать соответствующие элементы

      Поддержка средства чтения с экрана для «ДОЛЖЕН поддерживать виджет выбора цвета»
      Тест JAWS Narrator NVDA Orca TalkBack VoiceOver (iOS) VoiceOver (macOS)
      Chrome Edge Firefox Edge Chrome Edge Firefox Firefox Chrome Safari Safari
      Базовый тест ввода цвета html нет нет частичный partial partial partial partial partial partial supported partial

      Voice Control support for ‘MUST support the color picker widget’
      Test Dragon Naturally Speaking Голосовой доступ (Android) Голосовое управление (iOS) Голосовое управление (MacOS) Распознавание речи Windows Windows Voice Access
      Chrome Chrome Safari Safari Edge Chrome Edge Chrome
      Basic html color input test none supported supported нет неизвестно нет неизвестно неизвестно

      CSS Цвет текста поля ввода

      Задавать вопрос

      спросил

      Изменено 3 года, 11 месяцев назад

      Просмотрено 498 тысяч раз

      У меня есть поле ввода, и цвет текста в нем черный. (Я использую jquery.placeholder) Допустим, там есть текст «Электронная почта»

      При нажатии на это поле черный текст-заполнитель исчезает (благодаря jquery.placeholder).

      Любой текст, введенный в это поле, я хочу, чтобы он стал красным, и когда вы отмените выбор этого поля, я хочу, чтобы он оставался красным.

      На данный момент текст с надписью «Электронная почта» черный, а все, что я набираю, — красным, и это здорово, но как только я отменяю выбор, он снова становится черным. Может кто-нибудь помочь мне? Я хочу, чтобы текст оставался красным, даже после того, как он был снят. Вот мой код

       текстовая область: фокус, ввод: фокус {
    цвет: #ff0000;
}
ввод, выбор, текстовая область {
    цвет: #000;
}
      • css
      • input
      • focus
      • textarea

      Измените второй стиль на этот:

       input, select, textarea{
    цвет: #ff0000;
}

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

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

       ввод, выбор, текстовая область {
    цвет: #ff0000;
}
текстовая область: фокус, ввод: фокус {
    цвет: #ff0000;
}

      3

      Если вы хотите, чтобы текст-заполнитель был красного цвета, вам нужно настроить его специально в CSS.

      Запись:

       input::placeholder{
  цвет: #f00;
}

      Я всегда делаю подсказки ввода, например:

      Конечно, если ваш пользователь заполнит поле, изменит фокус и вернется к полю, поле снова будет очищено. Если вы делаете это так, будьте уверены, что это то, что вы хотите. Вы можете сделать это одноразовым, установив семафор, например: