👩‍💻+👩‍💻 Реалистичные зернистые тени без дублирования изображения

👩‍💻 Realistic grainy shadows with no image duplication

Навеяно https://codepen.io/gayane-gasparyan/pen/LYGGmmr, только здесь не нужно устанавливать каждое изображение в качестве фона div, а затем дублировать его в pseudo.

Вместо этого используется один элемент img с alt. Более поддерживаемый, доступный + меню img по правому клику.

Ana Tudor

📱 @dev_notes_ru

#html #css #tips

👩‍💻👩‍💻👩‍💻 Переходите на сторону light-dark()

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

Вас можно простить, если думаете, что кодировать одновременно тёмный и светлый режимы — это очень сложно. Нужно помнить о @media запросах на основе prefers-color-scheme, а также о дополнительных сложностях, возникающих, когда посетители могут выбирать светлый или тёмный режим отдельно от настроек ОС. И давайте не будем забывать о самой цветовой палитре! Переход от светлого режима к тёмному может потребовать новых вариаций, чтобы добиться нужного уровня контрастности для обеспечения доступности.

Это действительно большая работа. Но я хочу сказать, что с современным CSS это стало намного проще!

🖥 Читать статью

📱 @dev_notes_ru

#Frontend #CSS #HTML #JS #ColorScheme #DarkMode #LightMode

👩‍💻 Предзагрузка отзывчивых изображений

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

🖥 Читать статью

📱 @dev_notes_ru

#Frontend #HTML #Responsive #Image #Preloading

👩‍💻 Лучший подход к SVG иконкам

SVG — лучший подход к реализации системы иконок в вебе. Существует множество способов использования SVG, каждый из которых имеет свои плюсы и минусы, и все их мы рассмотрим.

🖥 Читать статью

📱 @dev_notes_ru

#Frontend #SVG #Icons #HTML #CSS

👩‍💻 link rel='modulepreload': Оптимизация загрузки модулей JavaScript

rel='modulepreload' указывает, что скрипт модуля должен быть получен, проанализирован и откомпилирован заранее, и сохранён для последующего выполнения.


🖥 Читать статью

📱 @dev_notes_ru

#Frontend #HTML #JavaScript #Preload #Module

👩‍💻👩‍💻 Кнопки с несколькими состояниями

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

🖥 Читать статью

📱 @dev_notes_ru

#Frontend #HTML #CSS #Button #MultiState

👩‍💻 HTML элемент search

24 марта 2023 года в спецификации HTML появился элемент search — специализированный контейнер для интерфейсов поиска.

Элемент <search> служит семантической обёрткой для форм поиска и фильтрующих компонентов UI. Он обеспечивает лучшую доступность, чем общие элементы <div>, и разъясняет назначение связанного с поиском контента как браузерам, так и вспомогательным технологиям.

До его появления разработчики полагались на типовые элементы div с ролями ARIA для обозначения областей поиска — решение приемлемое, но не идеально. Элемент search меняет ситуацию, предоставляя собственное семантическое значение для интерфейсов поиска и фильтрации.

🖥 Читать статью

📱 @dev_notes_ru

#html #search

👩‍💻 HTML элемент <details>: Встроенный аккордеон, который вы не используете

Узнайте, как HTML элемент <details> может заменить JavaScript аккордеоны и почему он может быть лучше, чем ваше текущее решение.

HTML элемент <details>, возможно, один из самых недооцененных встроенных элементов. Меня постоянно удивляет, как много разработчиков прибегают к использованию JavaScript, когда им нужно показать/скрыть содержимое, совершенно не обращая внимания на эту встроенную возможность.

🖥 Читать статью

📱 @dev_notes_ru

#HTML #details

👩‍💻👩‍💻 Модернизация с Web-платформой: Производительность изображений

Демонстрация того, как современная Web-платформа может радикально упростить и обогатить старую кодовую базу.

Это первая часть серии статей о силе современной Web-платформы. Я написал каждую статью, основываясь на результатах проекта, созданного в 2018 году, а затем обновлённого в 2024 году.

🖥 Читать статью

📱 @dev_notes_ru

#Frontend #HTML #JavaScript #WebPlatform

👩‍💻👩‍💻 Тёмная и светлая темы для SVG

Использование CSS функции `light-dark()` для реализации светлого и тёмного режима для SVG иконок,включая SVG, используемые с HTML элементом `img` или в качестве CSS свойства `background-image`.

🖥 Читать статью

📱 @dev_notes_ru

#Frontend #HTML #CSS

Модальное окно или диалог: как выбрать и не сломать доступность

Проектируете модальные окна? А знаете, чем они принципиально отличаются от не-модальных диалогов? 🤔

Это не просто вопрос терминологии. Неверный выбор типа компонента ломает сценарии для клавиатурных пользователей и людей со скринридерами. А неправильная реализация даже правильного выбора делает интерфейс недоступным.

В новом материале разобрали тему от и до:

✅ Алгоритм выбора: три вопроса, которые переводят проектное решение из разряда «по ощущениям» в разряд обоснованных критериев.
✅ Техническая реализация: что нативный <dialog> делает за вас, а за что всё ещё отвечаете вы (спойлер: возврат фокуса — за вами).
✅ Стилизация и анимация: важное ограничение transition и как его обойти.
✅ Чек-лист доступности: 20+ пунктов для проверки перед релизом.

Бонус: Разбор вложенных модалок, работы с кастомными контролами и обработки длинного контента.

🖥 Читать статью

📱 @dev_notes_ru

#a11y #Frontend #CSS #HTML #JavaScript

Атрибуты и свойства HTML: в чём разница

Распространённая ситуация: разработчик пытается прочитать значение поля ввода через getAttribute('value'), но получает не актуальные данные, введённые пользователем, а первоначальное значение из HTML-разметки.

Это не ошибка JavaScript, а следствие фундаментального различия между атрибутами и свойствами DOM. Атрибуты — это исходные параметры, заданные в HTML (чертёж элемента). Свойства — это текущее состояние DOM-объекта в памяти браузера (реальность). И они могут расходиться.

В новой статье детально разбирается:

✅ Почему input.value и getAttribute('value') ведут себя по-разному.
✅ Как работает defaultValue и для чего он нужен.
✅ Особенности логических атрибутов (checked, disabled).
✅ Что важно знать о свойствах и атрибутах разработчикам на React.

Материал будет полезен как начинающим, так и опытным разработчикам, желающим систематизировать знания о DOM.

🖥 Читать статью

📱 @dev_notes_ru

#HTML #JavaScript #DOM #Frontend

Зачем нужен figcaption, если есть alt

При верстке изображений у разработчиков часто возникает вопрос: чем отличается атрибут alt от элемента <figcaption> и можно ли их использовать взаимозаменяемо? На первый взгляд оба элемента отвечают за описание, но их функции принципиально различаются.

О чем статья:

✅ alt — это замена изображения для тех, кто не может его увидеть (пользователи скринридеров, отключенные изображения).
✅ <figcaption> — это видимая подпись, поясняющая роль изображения в тексте для всех читателей.
✅ Простой тест, который поможет определить, нужна ли изображению подпись или достаточно грамотно заполненного alt.

Материал будет полезен всем, кто работает с контентом и стремится сделать верстку семантически правильной и доступной.

🖥 Читать статью

📱 @dev_notes_ru

#A11y #HTML #Frontend

Практическое руководство по элементу <img>: от основ до LCP

Смещение контента при загрузке страницы, избыточный трафик на мобильных устройствах, потерянные баллы Core Web Vitals — всё это часто следствие недооценки возможностей элемента <img>.

В новом руководстве рассматриваются ключевые аспекты работы с изображениями в HTML:

✅ указание width и height для предотвращения смещения макета (CLS);
✅ адаптивность через srcset и sizes — как браузер выбирает нужный размер;
✅ поддержка современных форматов (AVIF, WebP) с помощью <picture>;
✅ управление приоритетами загрузки: loading, decoding, fetchpriority;
✅ стратегия для LCP с предварительной загрузкой адаптивных изображений.

В финале — сравнение ручного подхода и использования Image CDN с акцентом на практическую целесообразность.


🖥 Читать статью

📱 @dev_notes_ru

#HTML #LCP #CoreWebVitals