Итак, вы хотите отказаться от пре- и постпроцессоров CSS

#почитать

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

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

Селектор :root и CSS переменные

#почитать

Используйте возможности CSS3 с селектором :root, упрощающим глобальную стилизацию, повышающим удобство сопровождения и открывающим динамичный, отзывчивый дизайн.

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

Верстка для ленивых: как перестать бояться CSS и начать верстать как супергерой

#почитать

Развалившийся макет, сломанные кнопки и тестировщик, отправляющий бесконечные баг-репорты... Знакомая боль? Верстка может быть не кошмаром, а крепостью, если подойти к ней с умом. Собрали проверенные принципы, которые помогут вам делать гибкую и устойчивую верстку, способную пережить любые изменения контента и дизайна.

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

Настройка распределения контента по столбцам с помощью column-fill

#почитать

Свойство column-fill управляет тем, как контент распределяется по колонкам при использовании многостолбцового макета. Обычно оно используется, чтобы задать, заполняется ли каждая колонка полностью или контент равномерно распределяется между ними.
Можно установить column-fill в auto — тогда колонкам присваивается равное количество контента по мере его загрузки, или в balance — чтобы все колонки заполнялись равномерно. Для многостолбцовых контейнеров это особенно полезно при создании аккуратных газета-подобных блоков.

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

Адаптивная вёрстка с учётом размера шрифта пользователя и брейкпоинты

#почитать

Как говорят приверженцы ТРИЗ, лучшая машина — та, которой нет (но её функции исполняются).
CSS даёт нам множество инструментов для адаптивной вёрстки. Брейкпоинты — не единственный, и далеко не самый лучший из них. Если ваша вёрстка слишком сильно зависит от них — возможно, что вы что-то делаете неправильно. Разберём эту мысль подробнее.
Иногда мы начинаем верстать сложный интерфейс, а чтобы при этом не изобретать велосипед — берём за основу какой-то фреймворк (с брейкпоинтами). Затем нам хочется добавить немного адаптивности в какой-то конкретный блок.

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

Уменьшение сложности CSS с псевдоклассом :is()

#почитать

Недавно появился повод воспользоваться новым псевдоклассом CSS :is(), и он превосходен! Хочу рассказать, как с его помощью можно значительно уменьшить сложность селекторов.

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

Создаем полноэкранный слайдер с помощью Swiper.js

#почитать

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

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

Orbital Mechanics (or How I Optimized a CSS Keyframes Animation)

#почитать

Мне понравился вид серии планет, которую я создал для другого личного проекта, и я решил использовать их на своем новом сайте. Частью этого было также повторное использование анимации, которую я создал примерно в 2019 году, где луна вращалась вокруг планеты.
Изначально я просто вставил анимацию на новый сайт, изменив только единицы измерения (emединицы измерения на единицы измерения в области просмотра с помощью сложной математики, которой я очень, очень гордился), чтобы они правильно масштабировались, потому что я... эффективен со своим временем. Однако на мобильных устройствах планета перемещалась на несколько пикселей вверх и на несколько пикселей вниз, когда луны вращались вокруг нее. Я заподозрил, что виной этому была вставная анимация (это не так, но, по крайней мере, я получил оптимизированную анимацию и статью).

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

Проверка поддержки форматов в ClipboardItem.supports()

#почитать

Метод ClipboardItem.supports() — это современный способ проверить, поддерживает ли браузер запись данных определённого типа в буфер обмена.
Он появился совсем недавно: доступен в Baseline в статусе «Newly Available» с 31 марта 2025 года. Это значит, что пока его можно использовать только в современных браузерах, и нужно внимательно проверять совместимость.

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

7 хаков HTML: нестандартные решения в истории гипертекстовой разметки

#почитать

Сегодня мы решили вспомнить, как раньше веб-мастера обходили ограничения разметки. История веб-разработки полна креативных находок — технологии не всегда успевали за фантазией пользователей. На заре девяностых, чтобы выделиться на фоне конкурентов, веб-разработчики искали творческие решения. Собрали подборку из 7 популярных приемов и подходов, которые использовали веб-мастера, чтобы выйти за пределы ограничений HTML.
Раньше возможности для создания первых сайтов были предельно ограничены: стандартные шрифты, минимум графики и полотна текста. Недостаток инструментов компенсировали изобретательностью. Она позволяла решать, казалось бы, невозможные задачи. Вспоминаем самые популярные из них.

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

Использование currentColor

#почитать

Нужен ли currentColor? Не совсем, лучше использовать CSS переменные. Однако он всё равно имеет свою ценность, и об этом стоит поговорить.

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

Библиотеки JavaScript для работы с таблицами: обзор лучших решений

#почитать

Таблицы в веб-разработке — вещь незаменимая. Они помогают удобно структурировать данные, будь то финансовые отчёты, списки товаров или статистика пользователей. Но просто сверстать таблицу — половина дела, ведь часто нужно добавить сортировку, фильтрацию, редактирование и другие функции. Именно для этого существуют специализированные JavaScript-библиотеки.

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

Спокойное подчёркивание текста

#почитать

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

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

Автоматический подбор браузером контрастного цвета в CSS

#почитать

Вам когда-нибудь хотелось, чтобы можно было написать простой CSS для объявления цвета, после чего браузер сам бы определял, чёрный или белый должен сочетаться с этим цветом? Теперь это возможно благодаря contrast-color(). В статье мы объясним, как это работает.
Представьте, что вы разрабатываете веб-сайт или веб-приложение, и в дизайне требуется куча кнопок с разными цветами фона. Для обработки цвета фона можно создать переменную --button-color, а затем присваивать ей разные значения.
Иногда фон кнопки будет тёмным цветом, а текст кнопки должен быть белым для создания контрастности. В других случаях фон светлее, поэтому текст должен быть чёрным.

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

🪐 Новые вакансии фронтендеров


🚀 Frontend-разработчик в ДТ-Софт, 230 000 - 310 000 ₽
Подробнее ➡️
https://jobrocket.ru/job/frontend-razrabotchik-dt-soft-f382489d

🚀 Frontend-разработчик в Алабуга.Политех, oт 150 000 ₽
Подробнее ➡️
https://jobrocket.ru/job/frontend-razrabotchik-alabugapoliteh-6b3633d0

🚀 Frontend-разработчик в OQTACORE, oт 80 000 ₽
Подробнее ➡️
https://jobrocket.ru/job/frontend-razrabotchik-oqtacore-e80afb43

🚀 Frontend Developer в Vital Partners, 600 000 - 800 000 ₽
Подробнее ➡️
https://jobrocket.ru/job/frontend-developer-vital-partners-a2f24c92

🚀 Frontend-разработчик в Placebo/25, 110 000 - 150 000 ₽
Подробнее ➡️
https://jobrocket.ru/job/frontend-razrabotchik-placebo25-2e5b0ca6

🚀 Junior frontend-разработчик (Vue.js), 60 000 - 155 000 ₽
Подробнее ➡️
https://jobrocket.ru/job/junior-frontend-razrabotchik-vuejs-nda-9c5ebd30

🚀 Фронтенд-разработчик в Гуддело, oт 35 000 ₽
Подробнее ➡️
https://jobrocket.ru/job/frontend-razrabotchik-guddelo-cd81dfd9

🚀 Фронтенд-разработчик в Data World, до 200 000 ₽
Подробнее ➡️
https://jobrocket.ru/job/frontend-razrabotchik-data-world-ad1d66b9

🚀 Фронтенд-разработчик в Продуктовая лаборатория Mish, 160 000 - 250 000 ₽
Подробнее ➡️
https://jobrocket.ru/job/frontend-razrabotchik-produktovaya-laboratoriya-mish-e457265f

🚀 Fullstack Developer (React/Java) в Транслогика, 200 000 - 230 000 ₽
Подробнее ➡️
https://jobrocket.ru/job/fullstack-developer-reactjava-translogika-0cf0dc4f


Больше вакансий здесь ⤵️
https://jobrocket.ru/?categories=frontend

Красим посещённые ссылки: псевдоклассы :link, :visited и :any-link

#почитать

Когда вы создаёте веб-страницу, ссылки — один из ключевых элементов интерфейса. Они помогают пользователям перемещаться по сайту или переходить на внешние ресурсы. Но как сделать так, чтобы пользователь сразу понял, какие ссылки он уже посещал, а какие — нет? На помощь приходят псевдоклассы CSS :link, :visited и :any-link. Эти инструменты позволяют стилизовать ссылки в зависимости от их состояния, улучшая навигацию и пользовательский опыт. В этой статье мы разберём, как они работают, их историю, особенности и как безопасно использовать их в 2025 году.

Псевдоклассы :link и :visited существуют с самого зарождения CSS, появившись в спецификации CSS1 в 1996 году. Тогда веб был преимущественно текстовым, и ссылки играли центральную роль в навигации. Разработчики хотели, чтобы пользователи могли визуально отличать непосещённые ссылки от тех, на которые они уже кликали. :link отвечал за стилизацию непосещённых ссылок, а :visited — посещённых, основываясь на истории браузера.

Псевдокласс :any-link появился значительно позже, в спецификации CSS Selectors Level 4, чтобы упростить стилизацию ссылок независимо от их состояния (посещённые или нет). Он стал частью стандарта в 2022 году и быстро получил поддержку в браузерах. Эти псевдоклассы остаются важной частью веб-разработки, помогая создавать интуитивно понятные интерфейсы.

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

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

#почитать

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

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

События keydown и keyup в JavaScript: управление клавиатурой

#почитать

Когда вы создаёте интерактивные веб-приложения, взаимодействие с клавиатурой пользователя становится важной частью. Хотите, чтобы ваш сайт реагировал на нажатие клавиши Enter для отправки формы? Или, может, мечтаете сделать простую браузерную игру, где персонаж движется при нажатии стрелок? Для этого в JavaScript есть события keydown и keyup. Они позволяют отслеживать, когда пользователь нажимает или отпускает клавишу. В этой статье мы разберём, как работают эти события, их историю, особенности и как безопасно использовать их в 2025 году.

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

Как красиво признаться в любви не покупая цветы и конфетки с плюшевым мишкой на память, используя чистый HTML и CSS с JS

#почитать

Хочу поделиться идеей, как сделать признание в любви особенным, запоминающимся и искренним, не прибегая к классическим цветам или банальным текстам в телеграме/вацапе на миллиард строк. Я расскажу про интерактивный веб-сайтик, который можно создать своими руками, чтобы передать свои чувства. Это не просто слова, а целая история, которая разворачивается на экране, погружая человека в атмосферу тепла и эмоций. Код, который я приложил, пример такого проекта, и сейчас я объясню, как он работает и почему это может стать идеальным способом признаться в любви.

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