Многим из вас понравилась моя предыдущая статья « Как создать тумблер в CSS3» . Тем не менее, несколько вопросов были подняты в комментариях и в Twitter …
- Как вы применяете переключатели к переключателям?
- Можно ли улучшить доступность?
- Почему он не работает в старых мобильных браузерах Webkit?
Я сделал некоторые улучшения, поэтому, пожалуйста, просмотрите демонстрационную страницу и код HTML / CSS …
Поддержка радио кнопок
Легко начать с. Переключатели работают почти одинаково с флажками, поэтому мы можем просто применить класс «switch» к каждому входу, чтобы он работал, например
<div>
<input type="radio" id="radio1" name="radio" class="switch" />
<label for="radio1">first radio button</label>
</div>
<div>
<input type="radio" id="radio2" name="radio" class="switch" checked="checked" />
<label for="radio2">second radio button</label>
</div>
<div>
<input type="radio" id="radio3" name="radio" class="switch" />
<label for="radio3">third radio button</label>
</div>
Очень приятно видеть, что два переключателя меняют положение одновременно!
Измененная Доступность
Ричард из Accessible Web Design поднял пару вопросов. Сначала переключатели переключаются между красным и зеленым; если вы дальтоник, было бы нелегко определить, был ли переключатель включен или выключен. Чтобы исправить проблему, я добавил проверочный и перекрестный символ в фон:
Никаких дополнительных элементов не требовалось — я просто использовал крестик вместо пробела и расположил его справа от фона с помощью text-indent
input.switch:empty ~ label:before
{
content: '2718';
text-indent: 2.4em;
color: #900;
}
Когда флажок / радио установлен, он меняется на символ проверки и перемещается слева от фона:
input.switch:checked ~ label:before
{
content: '2714';
text-indent: 0.5em;
color: #6f6;
}
Кросс-браузерная анимация CSS3
Первоначально я поместил символ проверки / пересечения на сам белый переключатель. Это сложно для браузера, так как он должен создавать переход между двумя разными персонажами. Firefox работал, но Chrome и IE10 пошли по более простому пути: они полностью отказались от анимации! Похоже, что Webkit и Trident не разрешат анимацию для псевдоэлемента, если его содержимое меняется — даже если вы явно заявите, что должны быть анимированы только поля или цвет.
Чтобы решить эту проблему, я применил проверку / крестик к фону: before и переключил его эффект перехода (цвет не будет плавно меняться, но он едва заметен). Только белый: после переключателя положение анимируется сейчас.
Следующая проблема доступности: клавиатурный фокус. Предыдущие переключатели было трудно использовать только с клавиатурой, поэтому я применил другой цвет ярлыка и тень к переключателю, когда он имеет фокус:
input.switch:focus ~ label
{
color: #000;
}
input.switch:focus ~ label:before
{
box-shadow: 0 0 0 3px #999;
}
Результат, возможно, немного слишком тонкий, но легко добавить свои собственные эффекты:
Эффект фокуса работает в Firefox, IE и Opera — но не работает в Chrome 26? Похоже на ошибку браузера, если кто не знает иначе?
Больше горе Webkit
Последняя проблема: переключатели не работают в мобильных браузерах, использующих более старые версии Webkit, такие как Safari на iPad 1.0 и браузер Android. Движок поддерживает метки, доволен: селекторы флажков и отображает начальное состояние, но не хочет изменять псевдоэлементы после начальной загрузки страницы. Я даже нарушил свои собственные требования и добавил немного JavaScript, но браузер смеялся над моими слабыми попытками и не сдвинулся с места.
Анимация псевдоэлемента была недавно добавлена в Webkit. Это разочаровывает, и, в отличие от старых IE6 / 7 дней, трудно найти обходные пути, которые не оказывают негативного влияния на другие браузеры.
В любом случае, предполагая, что устаревшие пользователи Webkit не являются частью вашей демографической группы, используйте HTML / CSS-код так, как вам нравится. Кроме того, вам нужно добавить дополнительные (реальные) элементы или JavaScript, чтобы он работал.