#статья дня

В недавней заметке про кнопки и role="button" я упомянул, что переключатели и чекбоксы — вещи разные. Вот, прикладываю обещанное объяснение: https://uxplanet.org/checkbox-vs-toggle-switch-7fc6e83f10b8

Используйте переключатель:

1. Для вызова мгновенной реакции системы на включение опции.
2. Для выделения несвязанных элементов в группе.

Используйте чекбоксы:

1. Когда форму после пометок требуется отправить отдельным действием.
2. Если требуется множественный выбор.
3. Для выделения связанных элементов в группе.

#css #checkbox #switch #ux

#статья и #codepen дня

Мне кажется, мы стали забывать, на что способны списки и чекбоксы в CSS.

И нет, я не про стилизацию сейчас. Например, охота вам сделать… калькулятор. Можно ли?

Можно: https://codepen.io/serg-by/pen/KKZBxpR?editors=0100

Так что counter-increment + :checked — лютая мощная дичь. Не то чтоб я рекомендовал сходу переписывать ваши калькуляторы пластиковых окон и автомоек на это, но иметь в виду очень даже стоит.

Найду примеры с пользовательскими свойствами — тоже скину.

А пока, собственно, вот: https://codersblock.com/blog/checkbox-trickery-with-css/

#css #checkbox #counter

#codepen дня

Кажется, мне пришла пора признать, что чекбоксы и радиокнопки официально стали полностью веб-элементами.

Что я имею в виду: поля ввода, чекбоксы, радиокнопки, кнопки вообще, филдсеты, селекты — они были (и частично до сих пор являются) замещаемыми элементами. Вы указываете браузеру "хочу тут видеть такой-то инпут", а рисуется инпут уже операционной системой, её виджетами.

Сейчас эта грань максимально размывается: поля ввода уже рисуются через Shadow DOM, кнопки каждый оформляет как хочет, fieldset недавно наконец-то избавился от родовых болезней.

И только select до сих пор рисуется совершенно отдельно. Кстати, это одна из причин, почему селекты не видно в трансляции экрана на митингах :)

Возвращаясь к чекбоксам и радио: до недавнего времени по вышеозначенным причинам к ним нельзя было применять, например, псевдоэлементы. Что весьма ограничивало возможности по стилизации.

Теперь же это не так. Google Chrome уже давно не стесняясь разрешает псевдоэлементы на ваших чекбоксах, Safari и Firefox тоже недавно подтянулись.

В итоге, в сочетании с appearance: none можно творить что-то такое: https://codepen.io/alvaromontoro/pen/OJqKGBz

Я, кстати, уже говорил ведь, что в стандарт пытаются пропихнуть атрибут switch, чтобы окончательно распрощаться с чекбоксами?

Вот такое (работает только в Safari TP): https://nt1m.github.io/html-switch-demos/

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

#css #switch #checkbox