Дисклеймер: это обзор раннего предложения новых функций. Синтаксис может измениться в будущем или от функций могут отказаться.
Джен Симмонс поделилась в соцсетях, что её команда работает над давней проблемой веб-разработки — стилизацией системных элементов форм.
Проблема постепенно решается. За последние годы появились точечные свойств, такие как
accent-color, field-sizing и appearance, которые где-то упрощают стилизацию. В Safari реализовали переключатель <input type="checkbox" switch>, а в Chrome вот-вот добьют главного босса — <select>. Стоит отдать должное инициативе OpenUI.Команда Джен работает над спецификацией CSS Form Control Styling. Идея в том, чтобы значительно расширить возможности стилизации элементов форм и предоставить доступ к их внутренним частям.
Предлагается новое значение свойства
appearance: base. Оно отключает отрисовку элементов форм, специфичных для браузера и операционной системы. Вместо этого будут рисоваться элементы с простыми базовыми стилями, одинаковыми для всех браузеров. Эти стили можно переопределить и дополнить.В режиме базовой отрисовки появится доступ к внутренним частям элементов. Сейчас к некоторым из них можно обратиться через специальные псевдо-элементы с префиксами —
::-webkit-slider-thumb или ::-moz-range-thumb. Но они не стандартизированы, работают только в конкретных браузерах и отличаются набором поддерживаемых свойств.Спецификация стандартизирует псевдо-элементы для доступа ко внутренним частям элементов форм. На данный момент их 15:
-
::picker() — выпадающий пикер у <select> и других элементов-
::picker-icon — индикатор пикера-
::file-selector-button — кнопка выбора файла у <input type="file">-
::checkmark — индикатор выбранного состояния у <input type="checkbox">, <input type="radio"> и <option>-
::thumb — ползунок у <input type="range">-
::track — направляющая у <input type="range">, <input type="checkbox" switch>, <meter> и <progress>-
::fill — заполненная часть у <input type="range">, <input type="checkbox" switch>, <meter> и <progress>-
::field-text — редактируемая часть полей ввода-
::clear-icon — кнопка очистки у <input type="search">-
::step-control — блок с кнопками у <input type="number">-
::step-up — кнопка увеличения значения у <input type="number">-
::step-down — кнопка уменьшения значения у <input type="number">-
::field-component — блок с компонентом даты/времени у соответствующих полей-
::field-separator — разделитель компонентов даты/времени у соответствующих полей-
::color-swatch — блок с выбранным цветом у <input type="color">В спецификации есть несколько псевдо-классов для стилизации состояний элемента
<meter>.-
:low-value — значение ниже оптимального-
:high-value — значение выше оптимального-
:optimal-value — значение в оптимально диапазонеЕсть в предложении интересная функция —
control-value(). Она позволяет получать текущее значение элемента формы и выводить его в свойство content псевдо-элементов ::before/::after и других. Можно вывести значение и привязать его к ползунку <input type="range">. Черновик стандарта находится в стадии разработки и многое ещё не продумано. Есть много issue, которые затрагивают важные вопросы. Выглядит амбициозно и на самом деле давно пора уже это сделать. Теперь нужно дождаться, когда это примут в CSSWG и начнутся первые эксперименты в браузерах.
#css