Алло, мы с нижнего этажа, у вас стили протекают

#посмотреть

С тех пор как одному DOM-элементу стало возможно добавить несколько CSS-классов, веб-разработчики ищут способы изолировать стили, избавиться от наследования, закрыть CSS-свойства в закрытую коробочку. БЭМ, Atomic CSS, OOCSS, Shadow DOM, CSS-in-JS, Styled Components — скорее всего, на вашем сайте есть что-то из этого списка.

⏱Смотреть на YouTube ⏱️45 минут

Расширенное использование attr() в CSS

#почитать

Теперь можно брать значения из атрибутов HTML, имеющих типы, так что если в элемент поместить атрибут data-font-size="2.2rem", то его значение можно присвоить.

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

Золотое сечение в дизайне 2025: Современные подходы к применению в веб и мобильном дизайне

#почитать

Сегодня я хочу поделиться глубоким исследованием того, как применять золотое сечение в современном дизайне 2025 года. Эта статья основана не только на теории, но и на реальном опыте работы с крупными проектами, A/B тестах и исследованиях пользователей.

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

CSS if(): новая функция условной логики

#почитать

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

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

От CSS до Canvas и звука: анимируем что угодно с GSAP

#почитать

GSAP – одна из самых популярных JavaScript-библиотек для создания анимаций. Её используют как новички, так и опытные front-end-разработчики. В этой статье я хочу рассмотреть несколько примеров ее применения – от самых простых до менее очевидных.

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

Делаем фронтенд-сборку для верстки HTML-писем на MJML

#почитать

В одном из проектов мы столкнулись с необходимостью упростить процесс верстки и тестирования HTML-писем. В итоге решили вынести шаблоны в отдельный репозиторий и собирать их с помощью MJML.

В статье разберём два ключевых этапа: сначала создадим репозиторий для верстки писем, а затем настроим локальную тестовую отправку через SMTP.

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

Три подхода к селектору & (амперсанд) в CSS

#почитать

& — мощное дополнение к CSS, позволяющее создавать селекторы без повторений и способствующее улучшению организованности и понимания кода.

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

Слайдер с бесконечной плавной прокруткой на JavaScript

#почитать

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

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

Разноцветное выделение в CSS

#почитать

::selection — это круто, но использование селекторов типа :nth-child(5n+2) — это гораздо интереснее.

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

Три гуру веб-дизайна 90-х

#почитать

С ростом популярности в 1997 году технологий Flash и CSS возникло три философии веб-дизайна. Дэвид Сигел продвигал «хаки», Джейкоб Нильсен стремился к простоте, а Джеффри Зельдман комбинировал элегантность с удобством пользования.

Как и многие из первой волны веб-дизайнеров, Джеффри Зельдман, которому в начале 1997 года исполнилось 42 года, начинал свою карьеру в совершенно другой профессии. Изначально он был автором художественных книг, недолго поработал журналистом, пробовал себя в качестве разъездного музыканта, а потом десять лет посвятил рекламному бизнесу. «Сочинение текстов билбордов с цепляющей графикой — хорошая практика для веба, потому что в нём нужно доносить информацию мгновенно», — рассказывал он позже в интервью.

Творческих людей наподобие Зельдмана привлекло в веб развитие мультимедиа; сам он создал свой первый веб-сайт в 1995 году. «Благодаря гипертексту появился веб, благодаря графике он стал игровой площадкой для потребителей», — писал он на своём личном веб-сайте в конце 1996 года.

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

Расследуем самое длинное issue в Jest

#почитать

Однажды мы попытались обновить версию Node.js и нашли баг, который затянулся на два года и вовлёк в себя команды Jest, Node.js и V8.

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

Отказаться от пре- и постпроцессоров CSS

#почитать

Разбираем, можно ли в 2025 году отказаться от Sass и PostCSS в пользу нативного CSS, Lightning CSS и Tailwind. Плюсы и минусы современных инструментов.

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

«Великолепный» CSS. Коллекция странностей CSS, на которые я потратил кучу времени

#почитать

CSS часто преподносит сюрпризы, способные запутать даже опытных разработчиков. Я понимаю их раздражение. Тут всё закономерно.

Однако, несмотря на потраченные нервы, мне нравится CSS. Именно поэтому мне хочется, чтобы разработчики тратили меньше времени на борьбу с ним. С этой целью я собрал ряд не самых очевидных моментов, которые в своё время ставили в тупик меня и моих коллег.

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

CSS-градиенты в oklch

#почитать

Градиент — это плавный переход между двумя или более цветами, создаваемый с помощью функций linear-gradient() или radial-gradient(). Его используют в вебе для фонов, кнопок, рамок, декоративных элементов и даже в интерактивных эффектах при наведении.

Классические градиенты в CSS описываются в sRGB — привычном цветовом пространстве браузеров. Но у sRGB есть ограничения: некоторые переходы выглядят тусклыми или неравномерными, особенно если использовать яркие и сложные оттенки.

Чтобы добиться более естественного восприятия цвета, в CSS можно использовать современные цветовые модели, например oklch. Эта модель разработана с учётом особенностей человеческого зрения: яркость, насыщенность и оттенок регулируются отдельно, а сами переходы кажутся глазу равномерными.

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

Обходим CSP nonce через дисковый кеш браузера

#почитать

Эта статья описывает изощренную технику обхода Content Security Policy (CSP) на основе nonce-значений через эксплуатацию механизмов кеширования браузера. Автор демонстрирует, как комбинация CSS-инъекций, CSRF-атак и особенностей работы bfcache и дискового кеша может привести к выполнению произвольного JavaScript-кода даже при наличии строгой CSP.

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

Введение в WebRTC

#почитать

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

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

document.open(), write(), writeln(), close() в браузере: когда можно и когда нельзя

#почитать

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

Функция находится в статусе ограниченной доступности в Baseline.

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

CSS-медиазапросы без min- и max-. Как работает новый синтаксис и стоит ли переходить

#почитать

Разбираем новые возможности CSS Media Queries Level 4 — логические операторы сравнения, которые делают код более читаемым и интуитивным.

От (min-width: 768px) and (max-width: 1024px) к простому (768px <= width <= 1024px). Зачем это нужно и как с этим работать?

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

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

#почитать

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

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