Свободно стилизируемы outline DOM элементов

Скрипты и советы | 13 января 2021 845

Уроки CSS на Хабрахабре, habrahabr.ru, Веб-дизайн, CSS, JavaScript, HTML, Usability, javascript, ui, ux/ui, ux, accessibility, html, css,

В последнее время всё чаще и чаще возникает вопрос о доступности, если раньше скрытие outline для элементов страницы было общим правилом, то теперь хороший сайт должен иметь outline у элементов, как минимум :focus-visible.
Основная проблема outline - это их стилизирование.

Я пришел к своему решению, которое изложено в этой статье.

Читать далее
[Перевод] [ В закладки ] CSS: использование внутренних и внешних отступов

Если несколько элементов веб-страницы расположены близко друг к другу, то у пользователей возникает такое ощущение, что...

Подробнее
[Перевод] Оформляйте стили наведения, фокуса и активного состояния по-разному

В течение многих лет я оформлял состояния элементов :hover, :focus и :active одинаково. Не помню точно, когда именно...

Подробнее
как создавать очень красивые и удобные текстовые кнопки

Эта инструкция научит Вас, как создавать очень красивые и удобные текстовые кнопки (с эффектом нажатия), используя CSS....

Подробнее
Общение с заказчиком сайта

или Что говорят заказчики сайтов и как это следует понимать. "На сайте должен быть форум" - На сайте планируется...

Подробнее
[Из песочницы] Responsive design: сохранение формы элементов разметки

Одним из приемов адаптивного веб-дизайна является установка размеров элементов разметки в процентах относительно...

Подробнее
[Перевод] Всё о ключевом слове auto в CSS

В CSS есть ключевое слово auto, которое можно использовать при работе с различными свойствами элементов. Это —...

Подробнее

💬 Комментарии

В связи с новыми требованиями законодательства РФ (ФЗ-152, ФЗ «О рекламе») и ужесточением контроля со стороны РКН, мы отключили систему комментариев на сайте.

🔒 Важно Теперь мы не собираем и не храним ваши персональные данные — даже если очень захотим.

💡 Хотите обсудить материал?

Присоединяйтесь к нашему Telegram-каналу:

https://t.me/tcsecms/

Нажмите кнопку ниже — и вы сразу попадёте в чат с комментариями