Как сверстать

Запрограммировать модальное окно — одна из самых частых задач во фронтенде. Раньше для этого брали готовую библиотеку, писали десятки строк JavaScript, вручную блокировали прокрутку страницы, управляли фокусом и добавляли затемнение через отдельный div. Всё это работало, но требовало много кода и было легко сломать.

В HTML уже давно есть специальный элемент для этого — тег <dialog>. Долго его поддержка была неполной, но с 2022 года он работает во всех современных браузерах, и теперь им можно пользоваться без оговорок.

Февраль принёс несколько полезных обновлений: атрибут для передачи направления текста в формах получил поддержку во всех браузерах, появились удобные методы для работы с Map, а CSS обзавёлся новой функцией для сложных фигур. Разбираем, что уже можно использовать и что стоит взять на заметку.

Правильно говорят, что лучший способ чему-то научиться — подсмотреть у тех, кто умеет. Поэтому принесли вам подборку с CodePen, в которой хорошие разработчики делают интересные штуки и делятся ими со всеми. В этом выпуске — интерфейсы на CSS и React.

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

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

Ресурсные подсказки (Resource Hints) — это механизмы, позволяющие браузеру заранее загружать ресурсы или устанавливать соединения для ускорения навигации и загрузки страниц. Одним из таких механизмов является атрибут rel="prefetch", который указывает браузеру загружать ресурсы с низким приоритетом для возможного использования в будущем. Это сокращает время загрузки страниц и улучшает пользовательский опыт, особенно на сайтах с частыми переходами.

Элемент <input> — один из самых старых и фундаментальных в HTML. Ещё в HTML 2.0 (1995 год) существовали только базовые типы вроде text, password и checkbox. Но по мере развития веба стало очевидно, что пользователям нужно вводить не только текст, а самые разные данные: email, телефоны, даты, цвета, числа. Так, начиная с HTML5 (2014 год), появились новые семантические типы <input>, которые помогают браузеру лучше понимать контекст и давать пользователю удобные инструменты для ввода.

С января 2018 года все эти новые типы ввода находятся в статусе Widely Available в Baseline. Это значит, что их можно использовать без оглядки на совместимость: современные браузеры корректно поддерживают большинство сценариев.

Чтобы разметить текст, нужно понимать, какие использовать теги. Для создания новой строки в тексте есть несколько способов. В статье мы расскажем, как ими пользоваться.

Атрибуты data-* и свойство dataset — один из самых удобных способов сохранять данные в HTML и использовать их в JavaScript. Они позволяют безопасно и структурированно добавлять пользовательские данные прямо в разметку, не нарушая спецификации HTML.

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

Раньше простые на первый взгляд задачи требовали довольно много возни. Центрировать блок? Нужно позиционирование и расчёты. Сделать сетку? Пропорции вручную и осторожное управление отступами. Обновить страницу автоматически? Либо писать скрипт, либо настраивать сервер. Работало, но всегда казалось, что можно проще.

И проще стало. Современные HTML и CSS позволяют решать привычные задачи буквально парой строк. Никаких лишних обёрток, сложных костылей и вечных проверок на совместимость. Всё честно, прозрачно и работает сразу — берёшь и используешь.