Как создать уникальные флажки

Оцените материал
(0 голосов)

Проблема

Дизайнеры всегда хотят иметь полный контроль над всеми элементами веб-страницы. Когда графического дизайнера, имеющего ограниченный опыт работы с CSS, просят создать макет веб-сайта, он практически всегда создает макет с уникальными стилизованными элементами управления форм, чем вгоняет в тоску разработчика, задача которого — перевести этот рисунок на язык CSS. Когда каскадные таблицы стилей CSS только появились, предлагаемая стилизация форм была очень ограниченной, и по сей день четкого определения этих элементов ни в одной из многочисленных спецификаций CSS не существует. Однако с годами браузеры получили больше свободы в том, какие свойства CSS допускается использовать с элементами управления форм, благодаря чему мы теперь в вопросах стилизации большинства из них можем чувствовать себя довольно вольготно. К сожалению, флажки и переключатели не относятся к вышеупомянутому большинству. По сей день большая часть браузеров допускает лишь минимальную их стилизацию или вообще не поддерживает стили для этих элементов форм. В результате разработчикам приходится либо мириться с их представлением по умолчанию, либо прибегать к ужасным трюкам, затрудняющим доступ к содержимому веб-страниц, таким как воссоздание этих элементов с помощью блоков  div и сценариев JavaScript.
Существует ли способ обойти подобные ограничения и настроить внешний вид флажков, не раздувая код и не жертвуя семантикой и доступностью содержимого?

Решение

До недавнего времени решить эту задачу без помощи сценариев было невозможно. Однако в Selectors Level 3  мы получили новый псевдокласс:  :checked . Этот псевдокласс успешно проходит проверку на соответствие только в том случае, когда флажок отмечен — либо пользователем, либо посредством сценария. Он не слишком полезен в применении непосредственно к флажкам, поскольку, как мы уже упоминали выше, с флажками можно использовать не так много свойств CSS. Однако мы всегда можем прибегнуть к помощи комбинаторов для стилизации других элементов в зависимости от состояния флажка. Возможно, вы спрашиваете себя, стили каких других элементов мы можем захотеть менять в зависимости от того, отмечен флажок или нет. Что ж, существует тип элемента, демонстрирующий особое поведение в привязке к флажкам, и это  <label> . Элемент
<label> , связанный с флажком, также выполняет функцию переключателя для этого флажка. Поскольку метки (label), в отличие от флажков, не являются подменными элементами,  мы можем добавлять к ним генерируемое содержимое и настраивать их стили в зависимости от состояния флажков. Таким образом, можно скрыть настоящие флажки, сделав это так, чтобы не нарушить порядок табуляции, и вместо этого заставить генерируемое содержимое играть роль стилизованных флажков! Давайте посмотрим на это решение в действии. Начнем со следующей простой разметки:
HTML
<input type="checkbox" id="awesome" />
<label for="awesome">Awesome!</label>


Из спецификации CSS 2.1: «[Подменный элемент — это] элемент, содержимое которого выходит за рамки модели форматирования CSS, например изображение, встраиваемый документ или апплет». К подменным элементам невозможно применять генерируемое содержимое, хотя некоторые браузеры и поддерживают такую функциональность.

СОВЕТ
Задаетесь вопросом, в чем отличие псевдокласса :checked от селектора по атрибутам [checked]? Последний не обновляется в результате взаимодействия с пользователем, так как взаимодеqствие с пользователем не способно повлиять на атрибут HTML. Вложив флажок внутрь тега метки, мы бы смогли избавиться от необходимости исgользовать идентификаторы, но в этом случае у нас не было бы возможности обращаться к конкретной метке в зависимости от состояния флажка, так как родительских селекторов у нас пока что нет.
Следующий шаг заключается в генерировании псевдоэлемента, который будет использоваться в качестве нашего стилизованного флажка, и его простейшей стилизации:

input[type="checkbox"] + label::before {
content: '\a0'; /* неразрывный пробел */
display: inline-block;
vertical-align: .2em;
width: .8em;
height: .8em;
margin-right: .2em;
border-radius: .2em;
background: silver;
text-indent: .15em;
line-height: .65;
}


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

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


input[type="checkbox"]:checked + label::before {
content: '\2713';
background: yellowgreen;
}


Как видно на рисунке, это решение уже функционирует как рудиментарный стилизованный флажок. Теперь необходимо спрятать оригинальный флажок, но сделать это таким образом, чтобы не нарушить доступность содержимого веб-страницы. Это означает, что мы не можем использовать  display: none, поскольку в этом случае флажок полностью пропадет из порядка табуляции. Вместо этого применим следующий подход:
input[type="checkbox"] {
position: absolute;
clip: rect(0,0,0,0);
}

Вот и всё! Мы сделали простейший уникальный флажок. Разумеется, мы могли бы продолжить совершенствовать его внешний вид: например, настроив разные стили для состояний, когда он находится в фокусе и когда он недоступен, как показано на рисунке:
input[type="checkbox"]:focus + label::before {
box-shadow: 0 0 .1em .1em #58a;
}
input[type="checkbox"]:disabled + label::before {
background: gray;
box-shadow: none;
color: #555;
}

Эти эффекты можно сделать еще привлекательнее, добавив переходы или анимации. Или же можно вообще пуститься во все тяжкие и создать какие-нибудь скевоморфные переключатели. Возможностям действительно нет предела!
ПОПРОБУЙТЕ САМИ!
http://play.csssecrets.io/checkboxes


Переключаемые кнопки

Вариацию «трюка с флажком» можно использовать для имитации переключаемых кнопок, ведь в чистом HTML способа создавать подобные кнопки не предусмотрено. Переключаемые кнопки — это кнопки, работающие по принципу флажков: они включают или выключают настройку и выглядят нажатыми, когда настройка включена, или «отжатыми», когда настройка отключена.



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

input[type="checkbox"] {
position: absolute;
clip: rect(0,0,0,0);
}
input[type="checkbox"] + label {
display: inline-block;
padding: .3em .5em;
background: #ccc;
background-image: linear-gradient(#ddd,
#bbb);
border: 1px solid rgba(0,0,0,.2);
border-radius: .3em;
box-shadow: 0 1px white inset;
text-align: center;
text-shadow: 0 1px 1px white;
}
input[type="checkbox"]:checked + label,
input[type="checkbox"]:active + label {
box-shadow: .05em .1em .2em rgba(0,0,0,.6) inset;
border-color: rgba(0,0,0,.3);
background: #bbb;
}

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

ПОПРОБУЙТЕ САМИ!
http://play.csssecrets.io/toggle-buttons

Десерт на сегодня - видео о поездке у края пропасти в Гималаях. Аж дух захватывает! Они там в конце под водопадом еще проехали

Прочитано 137 раз Последнее изменение Воскресенье, 07 мая 2017 13:37
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

Оставить комментарий

Убедитесь, что вы вводите (*) необходимую информацию, где нужно
HTML-коды запрещены

Поиск по сайту

Google+