Полистав различные ресурсы в Интернете и просмотрев множество видео по данной теме, я решил составить наиболее полную картину по данному, не побоюсь этого слова, революционному API, чтобы вы уже сегодня могли начать использовать его в своём проекте!
Хабр, я снова пришёл к вам с практическими советами про доступность вместе с Ильёй. Мы показываем, как HTML и CSS могут улучшить или ухудшить её. Напоминаю, что Илья мой незрячий знакомый, который помогает мне найти наши косяки в вёрстке.
Сегодня мы рассмотрим следующие аспекты:
• где полезно использовать элемент search;
• существующие проблемы при использовании единиц измерения от размеров вьюпорта для установки размера текста;
• как элемент hr влияет на опыт пользователей скринридера;
• нужны ли заголовки модальным окнам.
Давайте начнём!
Для каждого экрана, устройства и программы нужен свой размер фавикон изображения. Из статьи вы узнаете различные трюки, используемые для генерации фавикон, и об удобных инструментах для автоматической генерации.
Перевод первой части статьи A pragmatic guide to modern CSS colours - part one».
Автор: Kevin Powell, 07 октября 2025
Для большинства разработчиков работа с цветами в CSS часто сводится к тому, чтобы просто скопировать значение из файла дизайна и вставить его в редактор. Мы ведь разработчики, а не дизайнеры. Тем не менее, за последние годы в CSS произошло множество изменений, касающихся работы с цветами — от новой синтаксической формы до совсем новых возможностей, которыми могут пользоваться даже те, кто редко занимается дизайном.
Если вы разрабатываете собственные цветовые схемы или хотите глубже понять, как применять теорию цвета прямо в CSS, во второй части статьи я расскажу об этом подробнее. А в этой части я сосредоточусь на том, как новые функции работы с цветом могут помочь именно разработчикам, не углубляющимся в дизайн.
Переменные Bootstrap — мощный инструмент для управления стилями, но без правильной структуры их тяжело использовать.
В этой статье я расскажу, как организовать SCSS-файлы, подключать глобальные переменные и сделать их доступными во всех компонентах Angular. Такой подход не только экономит время, но и делает проект более понятным для команды. А для больших проектов на NX вы узнаете, как делиться стилями между разными приложениями и библиотеками.
Всем привет, с вами Артем Леванов, Front Lead в WebRise. Когда тебе, как члену жюри, приходится выбирать лучшую работу среди сильных участников, на первый план выходят не только pixel-perfect, но и детали, которые создают ощущение качественного продукта. В чем была наша задача на чемпионате по верстке от HTML Academy, с какими работами мы столкнулись и какие решения заслуживают отдельного внимания — разбираю на реальных примерах финалистов.
Привет, Хабр!
Давно я ничего не писал для джунов. А ведь HTML и CSS не стали проще для них. Всё так же есть сложности, и мне надо как-то помочь людям.
Я выделил несколько привычек, от которых лучше избавиться в самом начале карьеры фронтендера — главное, просто сделать это. Надеюсь, вам будет полезно.
Давайте посмотрим, что я вам подготовил.
В первой части я рассказывал об основах CSS-препроцессора LESS: переменных, миксинах, и некоторых полезных приёмах. Во второй — про автоматическую проверку файлов с картинками и генерацию CSS из них же прямо в процессе компиляции, про то, как сделать изображения адаптивными, про миксины в роли функций и про основы написания LESS-плагинов на Javascript'е (они сильно расширяют базовые возможности LESS).
Cегодня же мы погрузимся в тему плагинов достаточно глубоко и добавим в CSS… ни много ни мало — статическую типизацию с валидацией! Которая, как и полагается системе статических типов, позволит отлавливать семантические ошибки ещё на уровне компиляции, а значит — писать более безопасный CSS-код с меньшим количеством сюрпризов. Кроме того, мы попробуем сделать систему разрешения потенциальных конфликтов, связанных с глобальностью таких элементов CSS, как анимации. Полный код плагина ищите в конце статьи.
В процессе же поговорим о разных тонкостях написания миксинов, которые могут быть полезны.
Добро пожаловать под кат!
Что мы проверили:
Залипающий hover на мобильных устройствах – частый баг. Раньше мы решали это просто плагином PostCSS Hover Media Feature, он оборачивает все псевдоклассы :hover в медиазапрос @media (hover: hover) {}. Так мы проверяли поддержку hover и отключали его на мобилках.
Но во время тестирования одного проекта оказалось, что на некоторых устройствах hover продолжает залипать.
CSS давно подвергается критике за отсутствие условной логики. Хотя мы разработали хитроумные обходные пути с использованием медиазапросов, переключаемых настраиваемых свойств и контейнерных запросов, эти решения часто кажутся слишком громоздкими и непрямыми. Рабочая группа CSS одобрила эту функцию для разработки, которая обещает внедрить настоящую условную стилизацию непосредственно в наши таблицы стилей.if()
Хабр, привет!
Ко мне обращаются проверить знание CSS у разработчиков. Это может быть при найме или для составления плана обучения сотрудника.
В этом году я обновил свой список вопросов. Интересно, сможете ли вы на них ответить. Сразу предупреждаю, что многие вопросы каверзные. В них есть подвох. К тому же они о последних нововведениях в CSS.
Так, вы готовы? Давайте посмотрим, что я вам подготовил.
При интеграции CSS-фреймворков или UI-библиотек часто подключают готовые сборки, но такой подход ограничивает возможности кастомизации и увеличивает размер проекта.
В этой статье я покажу, как использовать исходный код Bootstrap (SCSS), настроить модульную структуру и подключить только те компоненты, которые действительно нужны. Результат — чистая архитектура стилей, меньший размер сборки и удобный фундамент для будущей дизайн-системы.
Команда JavaScript for Devs подготовила перевод статьи о новом CSS-правиле @starting-style — инструменте, который обещает упростить анимацию появления элементов. Но всё ли так гладко? Автор показывает, что за красивым синтаксисом скрываются подводные камни специфичности и неожиданные баги, из-за которых старые добрые keyframes по-прежнему оказываются надёжнее.
Все вокруг стараются сделать мир лучше, пишут редакторы, используют нейросети. Скука! Я решил пойти другим путём и создал "Лабораторию Абсурда" — которая намеренно и с особым цинизмом превращает любой осмысленный текст в лингвистический бред.
Не спорю, существуют и другие генераторы бреда, но я дарю вам 50 (или что-то около того) разных способов издевательства над текстом и здравым смыслом! Никаких рекламных баннеров, только ванильный JS и словари на тысячи слов, только хардкор!
Хабр, привет!
Я много лет рассказываю о CSS. Показываю, как применять его, чтобы не было больно. Рассказываю про лучшие практики. Забочусь о вас, чтобы вы не стреляли себе в ноги.
Только и у меня бывают непонятки с CSS. Сижу и задаю себе вопрос «А зачем это свойство нужно?». У меня даже подгорает на авторов спецификаций. Конечно, так не всегда, но всё же бывает.
Поэтому за время работы у меня появился список свойств, которые я не понимаю, чем они полезны. Не поймите меня неправильно. Я понимаю, что они делают. Не понимаю, где найти ситуации, в которых они помогут.
В общем, я хочу рассказать о них вам. Зачем? Для обмена опытом. Может, у вас получится открыть мне глаза и показать всю пользу этих свойств. Это вы можете сделать в комментариях. Помогите мне, пожалуйста.
В общем, начинаю свой «критический обзор» CSS. Давайте посмотрим, что я подготовил.
Привет, Хабр!
А вы интересуетесь современными возможностями CSS и HTML? Может, некоторые из вас думают, что нового там ничего не появится или что свежие фишки не поддерживаются браузерами? Это мнение давно устарело. Современные HTML и CSS позволяют реализовывать интерактивные элементы, которые раньше были доступны только с помощью JavaScript. Можно сказать, что границы между разметкой, стилями и программированием постепенно стираются.
На написание этой статьи меня подтолкнуло большое количество новых возможностей в современных HTML и CSS, да и не только современных: некоторые приёмы, о которых знают немногие, поддерживались ещё со времён IE. Многие по привычке используют готовые UI-библиотеки или CSS-фреймворки, опасаясь изучать что-то новое.
Я собрал компиляцию полезных практик и оформил их в сокращённом текстовом виде.
Мы публиковали статью «Что нужно знать о современном CSS» в прошлом году (2024), и какое-то время я сомневался, хватит ли материала, чтобы сделать новую версию. Но время идет — и CSS развивается вместе с ним. И знаете что? В этом году новинок даже больше, чем в прошлом. Этот (пусть и немного субъективный) список можно рассматривать как подборку «возможностей, которые, по мнению Криса, стоит знать — будь то совсем новые или те, что недавно получили хорошую поддержку в браузерах».
Опыт использования shadcn-vue в продакшн проекте: что работает хорошо, а с чем придется помучиться. Честный обзор популярной UI библиотеки от практикующего разработчика.
Стек: Vue/Nuxt 3, Tailwindcss 3, Typescript, Telegram WebApp.
Иконочные шрифты — лучшие!
Их очень легко сгенерировать, использовать и кастомизировать. Они имеют широкую поддержку в браузерах, а код выглядит максимально чистым. Но, к сожалению, есть и большой минус: иконочные шрифты не поддерживают более одного цвета. Узнайте о недостатках иконочных шрифтов и почему SVG-спрайты — лучшая из возможных альтернатив.
Команда JavaScript for Devs подготовила перевод статьи о том, почему тригонометрические функции стали «most hated» возможностью CSS и как их можно использовать с пользой. Мы разберёмся, что делают sin() и cos(), и посмотрим на практические примеры: от круговых раскладок до затухающих анимаций.
