Изменение стиля по умолчанию вложенного заголовка h1

#почитать

Браузеры начинают внедрять изменения в стили UA по умолчанию для вложенных заголовков разделов. Разработчикам следует убедиться, что их сайты не используют стили UA в определённых случаях, во избежание непредвиденных результатов и ошибок в проверках Lighthouse. Рассмотрим, что представляют собой эти изменения, как определить, есть ли проблема на ваших страницах, и дадим несколько советов по обеспечению соответствия и улучшению структуры сайтов.

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

CSS :has() — проверка наличия потомков или соседних элементов

#почитать

Представьте селектор, который выбирает элемент не по его собственным классам, а по тому, что происходит внутри него или рядом с ним. Так работает псевдокласс :has(): он позволяет применить стили к родителю (или соседу), если в нужном контексте нашёлся подходящий элемент. В результате — меньше вспомогательных классов, меньше JavaScript для «протаскивания» состояний наверх, и чище разметка.

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

Ваша история в IT начинается в Авито 🚀

Хотите расти в разработке — приходите на оплачиваемую стажировку в Авито. Мы ищем будущих специалистов в направлениях Frontend, Backend, QA и Android. Вы будете работать над продуктами, которыми ежедневно пользуются миллионы людей, и прокачивать навыки с помощью:

➡️ наставника — подскажет, как мыслить в процессе решения задач;
➡️ комьюнити стажёров — всегда рядом, чтобы обсудить задачи и поддержать;
➡️ корпоративных курсов, библиотек и баз знаний — всё, чтобы развиваться быстрее.

Выберите два направления — основное и запасное. Если не получится попасть в первое, сможете пройти отбор на второе при наличии мест.

Условия:
➡️ зарплата и корпоративный ноутбук,
➡️ формат — офис, удалёнка или гибрид,
➡️ от 25 часов в неделю,
➡️ продолжительность — 9 месяцев,
➡️ компенсация питания, консультации с психологами и юристами,
➡️ после стажировки — возможность остаться в команде, если покажите крутой результат.

📌 Регистрация открыта до 12 ноября. Подать заявку можно по ссылке.

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

#посмотреть

С тех пор как одному 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. Эта модель разработана с учётом особенностей человеческого зрения: яркость, насыщенность и оттенок регулируются отдельно, а сами переходы кажутся глазу равномерными.

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