Skip to content

Commit

Permalink
Редачит текст
Browse files Browse the repository at this point in the history
  • Loading branch information
@skorobaeus
skorobaeus committed Jul 9, 2024
1 parent 4c00213 commit 79daef0
Show file tree
Hide file tree
Showing 2 changed files with 46 additions and 50 deletions.
5 changes: 0 additions & 5 deletions recipes/checkbox-radio-style/demos/checkbox-radio-3/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,11 +114,6 @@
background: #C56FFF;
}

.checkbox-input:checked + .checkbox-new,
.radion-input:checked + .radio-new {
color: #ffffff;
}

.checkbox-input:checked + .checkbox-new,
.radio-input:checked + .radio-new {
color: #000000;
Expand Down
91 changes: 46 additions & 45 deletions recipes/checkbox-radio-style/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,20 +26,21 @@ tags:
## Задача

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

- Соответствовать дизайну сайта или приложения;
- Выглядеть одинаково во всех браузерах и операционных системах;
- Обеспечивать хорошую доступность для пользователей с ограниченными возможностями;
- Поддерживать все стандартные функции интерактивного элемента формы (отмечен/не отмечен, фокус, взаимодействие с клавиатуры).
Задача состоит в том, чтобы создать кастомные элементы форм, которые будут:

- соответствовать дизайну сайта или приложения;
- выглядеть одинаково во всех браузерах и операционных системах;
- обеспечивать хорошую доступность для пользователей с ограниченными возможностями;
- поддерживать все стандартные функции интерактивного элемента формы (отмечен/не отмечен, фокус, взаимодействие с клавиатуры).

Рассмотрим три способа стилизации чекбокса и радиокнопки, каждый из которых имеет свои преимущества и недостатки.

## Решение

### `accent-color`

Самый простой способ изменить внешний вид интерактивных элементов управления в веб-формах - использовать CSS-свойство [`accent-color`](/css/accent-color/). Это свойство позволяет изменить акцентный цвет выделения элемента.
Самый простой способ изменить внешний вид интерактивных элементов управления в веб-формах — использовать CSS-свойство [`accent-color`](/css/accent-color/). Это свойство позволяет изменить акцентный цвет выделения элемента.

<iframe title="accent-color" src="demos/checkbox-radio-1/" height="300"></iframe>

Expand All @@ -55,30 +56,30 @@ tags:
```css
input[type="checkbox"],
input[type="radio"] {
accent-color: #f498ad;
accent-color: #C56FFF;
width: 20px;
height: 20px;
}
```

Преимущества:

- Простота реализации;
- Сохранение стандартного поведения элемента;
- Хорошая поддержка браузерами ([Can I use](https://caniuse.com/mdn-css_properties_accent-color)).
- простота реализации;
- сохранение стандартного поведения элемента;
- хорошая поддержка браузерами ([Can I use](https://caniuse.com/mdn-css_properties_accent-color)).

Недостатки:

- Ограниченные возможности кастомизации (только цвет);
- Невозможность изменить форму элемента.
- ограниченные возможности кастомизации (только цвет);
- невозможность изменить форму элемента.

### Псевдоэлементы

Этот метод использует псевдоэлементы [`::before`](/css/before/) и [`::after`](/css/after/) для создания кастомного внешнего вида чекбокса или радиокнопки, переписывая стандартные стили.

<iframe title="Псевдоэлементы" src="demos/checkbox-radio-2/" height="400"></iframe>

Создаем html-скелет.
Создаем HTML-скелет.

```html
<form>
Expand Down Expand Up @@ -138,9 +139,9 @@ input[type="radio"] {

Теперь нам нужно добавить галочку нашим чекбоксам и радиокнопкам через псевдоэлемент `::after`. Есть три способа сделать это:

1. символ в значении свойства [`content`](/css/content/);
1. ссылка на [SVG-файл](/html/svg/) с иконкой;
1. инлайн SVG-иконка.
1. Символ в значении свойства [`content`](/css/content/).
1. Ссылка на [SVG-файл](/html/svg/) с иконкой.
1. Инлайн SVG-иконка.

Галочка символом. Символ можно вставить с помощью CSS-кода.

Expand Down Expand Up @@ -180,7 +181,7 @@ input[type="radio"] {
}
```

Галочка инлайн SVG. Для конвертации SVG можно воспользоваться онлайн сервисом в интернете по запросу "SVG конвертация инлайн css".
Галочка инлайн SVG. Для конвертации SVG можно воспользоваться онлайн сервисом в интернете по запросу «SVG конвертация инлайн css».

```css
.checkbox-input::after,
Expand All @@ -189,13 +190,13 @@ input[type="radio"] {
position: absolute;
width: 0px;
height: 0px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='30px' viewBox='0 -960 960 960' width='30px' stroke='%232E9AFF' stroke-width='30' fill='%232E9AFF'%3E%3Cpath d='M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z'/%3E%3C/svg%3E");
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='30' viewBox='0 -960 960 960' width='30' stroke='%23FFFFFF' stroke-width='30' fill='%23FFFFFF'%3E%3Cpath d='M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
transition: 500ms;
}

.radio-input::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='29px' viewBox='0 -960 960 960' width='29px' fill='%232E9AFF'%3E%3Cpath d='M480-28 346-160H160v-186L28-480l132-134v-186h186l134-132 134 132h186v186l132 134-132 134v186H614L480-28Zm0-252q83 0 141.5-58.5T680-480q0-83-58.5-141.5T480-680q-83 0-141.5 58.5T280-480q0 83 58.5 141.5T480-280Zm0-200Zm0 340 100-100h140v-140l100-100-100-100v-140H580L480-820 380-720H240v140L140-480l100 100v140h140l100 100Zm0-340Z'/%3E%3C/svg%3E");
background-image: url("data:image/svg+xml,%3csvg width='28' height='28' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.88 23C12.6 23 14.2 21.32 15.52 19.52C16.84 21.32 18.44 23 21.16 23C22.16 23 23.04 22.72 23.04 21.8C23.04 21.24 22.6 20.72 21.96 20.72C21.72 20.72 21.28 20.8 21 20.8C19.72 20.8 18.2 19.12 17.36 17.92C19.08 16.08 20.96 13.72 20.96 11.12C20.96 8.12 18.68 6 15.52 6C12.36 6 10.08 8.12 10.08 11.12C10.08 13.72 11.96 16.08 13.68 17.92C12.84 19.12 11.32 20.8 10.04 20.8C9.76 20.8 9.32 20.72 9.08 20.72C8.44 20.72 8 21.24 8 21.8C8 22.72 8.88 23 9.88 23Z' fill='white'/%3e%3c/svg%3e ");
}
```

Expand Down Expand Up @@ -227,22 +228,21 @@ input[type="radio"] {

Преимущества:

- Высокая степень кастомизации;
- Использование векторных иконок или символов Unicode;
- Сохранение стандартного поведения элемента (присутствует доступность с клавиатуры).
- высокая степень кастомизации;
- использование векторных иконок или символов Unicode;
- сохранение стандартного поведения элемента (присутствует доступность с клавиатуры).

Недостатки:

- Мало возможностей для анимации
- мало возможностей для анимации.

### Псевдоэлемнеты и дополнительный контейнер
### Псевдоэлементы и дополнительный контейнер

Этот метод похож на предыдущий, но использует дополнительный `<div>`, который перекрывает `<input>` для создания более сложных эффектов или анимаций.

<iframe title="Псевдоэлемнеты и дополнительный контейнер" src="demos/checkbox-radio-3/" height="370"></iframe>

Создаем html-скелет для кастомных чекбокса и радиокнопки. В нашем случае это мордочка Доки с открытыми и закрытыми глазками. =)
И не забываем указать атрибут `aria-hidden: true`, чтобы пользователям скринридеров не нужно было каждый раз слушать названия символов, которые используются в символьной иконке U•ᴥ•U.
Создаем HTML-скелет для кастомных чекбокса и радиокнопки. В нашем случае это мордочка Доки с открытыми и закрытыми глазками =) И не забываем указать атрибут `aria-hidden: true`, чтобы пользователям скринридеров не нужно было каждый раз слушать названия символов, которые используются в символьной иконке U•ᴥ•U.

```html
<form>
Expand Down Expand Up @@ -326,7 +326,7 @@ input[type="radio"] {
}
```

Позиционируем новые чекбокс и радиокнопку на место дефолтных. Добаляем нужные стили.
Позиционируем новые чекбокс и радиокнопку на место дефолтных. Добавляем нужные стили.

```css
.checkbox-new,
Expand Down Expand Up @@ -358,7 +358,7 @@ input[type="radio"] {

.checkbox-input:checked,
.radio-input:checked {
background: #f498ad;
background: #C56FFF;
}

.checkbox-input:checked + .checkbox-new,
Expand All @@ -367,7 +367,7 @@ input[type="radio"] {
}
```

Пишем стили для состояние невыбранного элемента.
Пишем стили для невыбранного состояния элемента.

```css
.checkbox-input:checked + .checkbox-new > .checkbox-new_checked,
Expand Down Expand Up @@ -399,36 +399,36 @@ input[type="radio"] {

Преимущества:

- Возможность создания сложных эффектов и анимаций;
- Высокая степень кастомизации.
- возможность создания сложных эффектов и анимаций;
- высокая степень кастомизации.

Недостатки:

- Более сложная реализация;
- Может понадобиться дополнительная работа для обеспечения доступности.
- более сложная реализация;
- может понадобиться дополнительная работа для обеспечения доступности.

## Доступность

Доступность каждого варианта чекбокса и радиокнопки.

Вариант с `accent-color`:

- Полностью доступен, так как использует стандартный элемент формы;
- Поддерживает навигацию с клавиатуры и работу со скринридерами без дополнительных усилий.
- полностью доступен, так как использует стандартный элемент формы;
- поддерживает навигацию с клавиатуры и работу со скринридерами без дополнительных усилий.

Варианты с псевдоэлементами и дополнительным контейнером:

- Сохраняют базовую доступность, так как использует скрытый стандартный элемент;
- Может потребовать дополнительной работы для обеспечения видимого фокуса (псевдокласс`:focus-visible` и атрибут `tabindex="0"`) при навигации с клавиатуры.
- сохраняют базовую доступность, так как использует скрытый стандартный элемент;
- может потребовать дополнительной работы для обеспечения видимого фокуса (псевдокласс`:focus-visible` и атрибут `tabindex="0"`) при навигации с клавиатуры.

Для улучшения доступности во всех способах рекомендуется:

- Использовать достаточный контраст цветов;
- Обеспечить видимый фокус при навигации с клавиатуры;
- Сделать область клика достаточно большой (минимум 24x24 пикселя, а в идеале 48х48 по рекомендациям WCAG);
- Связывать элемент с текстом метки с помощью `for` атрибута или оборачивать чекбокс и радиокнопку в `<label>`.
- Если используется группа чекбоксов или радиокнопок, которые связаны по смыслу или с одной настройкой, то им нужен родительский тэг [`<fieldset>`](html/fieldset/) и название в [`<legend>`](html/legend/), для объединения их в одну группу.
- Если чекбокс или радиокнопка находяться в неактивном состоянии `disabled` и одновременно являеются выбранными `:checked`, то нужно использовать атрибут [`aria-disabled: true`](a11y/aria-disabled/), чтобы скринридеры зачитывали этот выбранный чекбокс, а не пропускали его. И пользователи знали, на что они соглашаются по умолчанию или какую настройку нельзя выключить.
- использовать достаточный контраст цветов;
- обеспечить видимый фокус при навигации с клавиатуры;
- сделать область клика достаточно большой (минимум 24x24 пикселя, а в идеале 48х48 по рекомендациям WCAG);
- связывать элемент с текстом метки с помощью атрибута `for` или оборачивать чекбокс и радиокнопку в `<label>`;
- если используется группа чекбоксов или радиокнопок, которые связаны по смыслу или с одной настройкой, то им нужен родительский тег [`<fieldset>`](html/fieldset/) и название в [`<legend>`](html/legend/), для объединения их в одну группу;
- если чекбокс или радиокнопка находятся в неактивном состоянии `disabled` и одновременно являются выбранными `:checked`, то нужно использовать атрибут [`aria-disabled: true`](a11y/aria-disabled/), чтобы скринридеры зачитывали этот выбранный чекбокс, а не пропускали его, и пользователи знали, на что они соглашаются по умолчанию или какую настройку нельзя выключить.

## Кроссбраузерная поддержка

Expand All @@ -438,7 +438,8 @@ Cвойства [`appearance`](/css/appearance/) и [`accent-color`](/css/accent

Каждый из рассмотренных способов стилизации имеет свои преимущества и недостатки. Можно придумать ещё несколько вариантов реализации, но все они будут иметь те или иные особенности, рассмотренные в этих трёх способах. Выбор конкретного метода зависит от требований проекта, целевой аудитории и степени кастомизации.

- Вариант с `accent-color` идеально подходит для простых проектов, где требуется минимальная кастомизация и важна максимальная доступность и скорость реализации;
- Варианты с псевдоэлементами и дополнительным контейнером предоставляют хороший баланс между кастомизацией и сохранением базовой функциональности, но требуют больше усилий.
Вариант с `accent-color` идеально подходит для простых проектов, где требуется минимальная кастомизация и важна максимальная доступность и скорость реализации.

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

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

0 comments on commit 79daef0

Please sign in to comment.