Как работает единица измерения em в CSS

#почитать

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

⏱Читать статью

Веб-разработка на ванильном HTML, CSS и JavaScript: стилизация и сайты

#почитать

Современные веб-приложения построены на основе богатого инструментария работы с CSS, связанного со множеством пакетов NPM и этапов сборки. Ванильное же веб-приложение может выбрать более легковесный путь, отказавшись от современных методик с предварительно обработанным CSS и выбрав нативные для браузеров стратегии.

⏱Читать статью

Округление в CSS с функцией round()

#почитать

Функция round() появилась в CSS как часть стандарта Values and Units Level 4. Она предназначена для округления числовых значений до нужной кратности. Это полезный инструмент, который позволяет контролировать размеры и позиции без лишних ухищрений с calc() или JavaScript.

⏱Читать статью

Псевдоклассы валидации форм: делаем интерфейсы понятнее

#почитать

Когда вы создаёте веб-форму, важно, чтобы пользователь сразу понимал, правильно ли он заполнил поля. Здесь на помощь приходят псевдоклассы :valid и :invalid. Эти инструменты, доступные в браузерах с 2018 года (согласно Baseline, статус «Widely Available»), позволяют стилизовать элементы формы в зависимости от того, проходят ли они валидацию. Представьте: пользователь вводит email, а поле подсвечивается зелёным, если всё верно, или красным, если что-то пошло не так. Это не только удобно, но и делает интерфейс интуитивно понятным даже для новичков.

Кроме того, существуют псевдоклассы :required и :optional. Они помогают визуально выделить обязательные и необязательные поля. Например, можно добавить звёздочку или изменить цвет границы для обязательных полей, чтобы пользователь сразу знал, что их нужно заполнить.

⏱Читать статью

focus-visible

#почитать

Когда мы создаём сайты, мы хотим, чтобы ими было удобно пользоваться всем людям — и тем, кто управляет страницей с помощью мыши, и тем, кто использует клавиатуру. Например, человек с ограниченными возможностями зрения может перемещаться по элементам с помощью клавиши Tab.
Браузеры по умолчанию показывают рамку (outline) вокруг элемента, когда он получает фокус — например, при клике мышкой или при перемещении с помощью клавиатуры. Эта рамка помогает понять, какой элемент активный.
Но бывает так, что рамка появляется даже тогда, когда она не нужна. Например, Вы кликнули мышкой по кнопке, и вокруг неё появилась рамка — выглядит не очень красиво, а пользы от неё нет, потому что курсор мыши уже показывает, куда мы кликнули.
Тут и помогает :focus-visible. Этот псевдокласс позволяет показывать рамку только в тех случаях, когда это действительно полезно — обычно при навигации с клавиатуры.

⏱Читать статью

Как использовать cause для более понятной обработки ошибок в JavaScript

#почитать

Новое свойство cause в объекте error позволяет узнать исходную причину сбоя и облегчить отладку, особенно при повторении ошибок. Оно помогает выстроить цепочку событий и лучше понимать, где возникла проблема.

⏱Читать статью

Vue.js на практике: классический Todolist с сохранением состояния

#почитать

Todolist — это не просто «список задач», а идеальный проект для освоения основ любого фронтенд-фреймворка. Сегодня мы сделаем именно такой проект на Vue 3, используя Vite, Pinia для управления состоянием и SCSS для стилей. И всё это с сохранением задач в localStorage. Это будет полноценное одностраничное приложение, которое не стыдно положить в портфолио.

⏱Читать статью

Переключение на элемент iframe на примере видеоплеера

#почитать

Итак, в прошлый раз мы рассмотрели, как можно без особых проблем выкатить рабочую страницу на GitHub Pages и попробовать встроить в эту страницу, например, плеер и убедиться, что он работает.
Логично предположить, что следующими этапами будут взаимодействие со встроенными элементами iframe и автоматизация проверок с такими элементами на созданной нами странице.
Для начала давайте немного пройдемся по базе.

⏱Читать статью

Как работает navigator.credentials: API для входа без пароля

#почитать

navigator.credentials — это интерфейс Web Authentication API, который позволяет браузеру управлять учётными данными пользователя. С его помощью можно безопасно получать, сохранять и автоматически подставлять данные для входа: пароли, токены или ключи. Это делает процесс аутентификации проще и безопаснее — особенно на сайтах, где важен пользовательский опыт и скорость входа.

⏱Читать статью

Подборка библиотек для создания слайдеров на JavaScript в 2025 году

#почитать

Слайдеры – это один из самых популярных UI-элементов, который часто используется в веб-разработке. Будь то карусель изображений, отзывы пользователей или список товаров, хороший слайдер делает сайт динамичным и удобным.
В 2025 году JavaScript библиотеки продолжают развиваться, и выбор инструментов для создания слайдеров стал еще шире. Давайте разберем самые интересные библиотеки, которые помогут вам легко и быстро добавить слайдер на ваш сайт.

⏱Читать статью

Справочник по новым математическим функциям CSS

#почитать

За последние годы в CSS добавилось много математических функций, для которых не нужен JavaScript. Их можно использовать в анимациях, в графиках для визуализации данных или просто для создания красивых пользовательских интерфейсов.

⏱Читать статью

CSS трансформации и матрица

#почитать

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

⏱Читать статью

Гидратация в React 19: новые подходы и секреты оптимизации

#почитать

До выхода React 19 процесс гидратации был далеко не идеален: проблемы с производительностью, избыточное выполнение JavaScript и задержки в интерактивности мешали разработчикам создавать быстрые и отзывчивые приложения. В React 19 были введены важные улучшения, которые значительно повышают эффективность гидратации и снижают время загрузки страниц. Разбираем новые подходы на практических примерах.

⏱Читать статью

Всё самое важное о псевдоклассе :default

#почитать

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

⏱Читать статью

Как сделать первую букву абзаца большой — буквица через ::first-letter

#почитать

Если сегодня мы воспринимаем веб как что-то само собой разумеющееся, то в начале 90-х годов страницы выглядели очень аскетично: просто текст, иногда ссылки, никаких визуальных изысков. Когда появился CSS, разработчики впервые получили возможность влиять на то, как отображается текст. Одной из первых «красивых» фич стал псевдоэлемент ::first-letter, появившийся ещё в спецификации CSS1 в 1996 году.

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

⏱Читать статью

CSS if(): новая функция условной логики доступна в Chrome 137+

#почитать

CSS с каждым днём превращается в настоящий «язык программирования». С появлением новых возможностей, таких как CSS переменные, функция calc(), псевдоклассы :has() и :is(), а также универсальные @media запросы, CSS упрощает создание сложных стилей и макетов.

⏱Читать статью

Как размыть фон под элементом с помощью backrop-filter

#почитать

В сентябре 2024 в Baseline в статусе Widely-available вошло CSS-свойство backdrop-filter. Оно делает красивое: позволяет применить фильтры (размытие, контраст, яркость, и прочее) к фону за элементом. Не к самому элементу, а именно к тому, что за ним — это важно.
То есть если у вас есть модальное с полупрозрачным фоном, вы можете сделать так, чтобы то, что под ней, красиво размывалось, как в macOS или на айфоне. Это и есть главное применение backdrop-filter.

⏱Читать статью

Scroll-Driven Animations Inside a CSS Carousel

#почитать

Недавно я размышлял над тем, что узнал о CSS-каруселях. Они многое могут делать прямо из коробки (и кое-что не могут), как только вы определите контейнер прокрутки и скроете переполнение.
Нет ли еще одной довольно новой функции CSS, которая работает с областями прокрутки? Ах да, это анимация, управляемая прокруткой. Разве это не означает, что мы можем запускать анимацию при прокрутке элементов в CSS-карусели?

⏱Читать статью

Функция image() в CSS: цветовые плашки, вырезки из спрайтов и bidi-изображения

#почитать

Функция image() из модуля CSS Images Level 4 — это «умная» альтернатива url(), которая умеет больше: задавать направленность изображения (для языков слева-направо и справа-налево), вырезать фрагмент по медиасегменту #xywh и даже рисовать однотонную плашку как самостоятельный слой изображения. Звучит как швейцарский нож для бэкграундов — и так и есть. Но есть важная оговорка: на сегодня поддержка в браузерах минимальна, поэтому ниже мы покажем, как писать код «по-новому» и какие фолбэки использовать уже сейчас.

⏱Читать статью

What We Know (So Far) About CSS Reading Order

#почитать

Предлагаемые CSS-свойства reading-flow и reading-order предназначены для указания исходного порядка элементов HTML в дереве DOM, или, проще говоря, как инструменты доступности определяют порядок элементов. Вы будете использовать их для того, чтобы порядок фокусировки фокусируемых элементов соответствовал визуальному порядку, как указано в Руководстве по доступности веб-контента (WCAG 2.2).

⏱Читать статью