Использование `currentColor` в 2025 году

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

🖥 Читать статью

📱 @dev_notes_ru

#Frontend #CSS #currentColor

Резервные значения CSS переменных

Браузер не знает, является ли значение CSS переменной валидным, пока переменная не будет разрешена, а к тому времени её обработает каскад и отбросит возможные резервные значения.

🖥 Читать статью

📱 @dev_notes_ru

#Frontend #CSS

Модернизация с Web-платформой: Уменьшение движения

Демонстрация, как современная веб-платформа может упростить уменьшение движения на старой кодовой базе.

🖥 Читать статью

📱 @dev_notes_ru

#Frontend #CSS #JavaScript #A11y

`:only-child`

Иногда возникает необходимость изменить стиль элемента, если у него нет соседних элементов, и это очень просто сделать с помощью псевдокласса :only-child.

Это может быть удобно при работе с динамическим контентом, когда необходимо изменить внешний вид, если есть только один дочерний элемент, или если есть что-то вроде <figure>, где необходимо придать элементу разный стиль в зависимости от того, есть или нет <figcaption>.

figure {
  border-radius: 16px;
  padding: 4px;
  border: 1px solid black;
}

figure > img {
  border-radius: 12px 12px 0 0;
}

figure > figcaption {
  padding: 6px;
  border-radius: 0 0 12px 12px;
}

figure > img:only-child {
  border-radius: 12px;
}

Также можно сделать обратное, с помощью :not(:only-child).

Недавно я обнаружил, что сочетание с :has() может быть очень удобным, когда необходимо проверить, есть ли у элемента только один дочерний элемент:

/* Карточки с одним элементом получают больший padding */
.card:has(> :only-child) {
  padding: 2rem;
}

/* Карты с несколькими дочерними элементами сохраняют стандартный padding */
.card {
  padding: 1rem;
}

📱 @dev_notes_ru

#Frontend #CSS

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

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


🖥 Читать статью

📱 @dev_notes_ru

#Frontend #CSS

Использование `attr()` в CSS для столбцов, цвета и размера шрифта

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


🖥 Читать статью

📱 @dev_notes_ru

#Frontend #CSS #attr

Стоит ли отказываться от CSS препроцессоров в 2025 году

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

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

Способы упрощения написания CSS можно разделить на две группы:

✅ Препроцессоры
✅ Постпроцессоры

К препроцессорам относятся такие инструменты, как Sass, Less и Stylus. Как следует из названия категории, эти инструменты позволяют писать CSS в их синтаксисе, прежде чем компилировать код в валидный CSS.

Постпроцессоры работают в обратном направлении — вы записываете в CSS-файл невалидный синтаксис CSS, а постпроцессоры изменяют эти значения в валидный CSS.

Сегодня существует два основных постпроцессора:

✅ PostCSS
✅ LightningCSS

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

🖥 Читать статью

📱 @dev_notes_ru

#Frontend #CSS

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

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

В CSS появилась новая функция if(), пока доступная только в Chrome 137 и выше. Это первый шаг к условной логике прямо в стилях.

🖥 Читать статью

📱 @dev_notes_ru

#Frontend #CSS

Зачем нужны логические свойства CSS

Сегодня я хотел бы поговорить о логических свойствах CSS — новом (и, возможно, более эффективном) способе определения свойств, которые по своей природе являются направленными.

🖥 Читать статью

📱 @dev_notes_ru

#Frontend #CSS

👩‍💻 Вышел Firefox 147: Полный разбор релиза для разработчиков

Новый выпуск Firefox — это не просто набор обновлений, а настоящий прорыв в инструментах для веб-разработки. Основные нововведения: CSS Anchor Positioning по умолчанию, мощный Navigation API и расширенные возможности View Transitions. Давайте разберем все детали.

🚀 Главные новинки: CSS Anchor Positioning

CSS Anchor Positioning (якорное позиционирование) — это настоящая революция в CSS. Теперь можно «привязывать» один элемент (например, тултип или выпадающее меню) к другому (якорю) прямо в CSS, без JavaScript, создавая отзывчивые интерфейсы.

Что теперь можно в Firefox 147:

Включено по умолчанию! Больше никаких флагов.

✅ Значение anchor-center: Новое, удобное значение для свойств align-self, justify-self и других, чтобы центрировать элемент относительно его якоря.
✅ position-anchor: none: Новое значение для отвязки элемента от якоря.
✅ Интеграция с Инструментами разработчика: Элементы с anchor-name получают значок «якоря» в DOM-обозревателе, а @position-try правила отображаются в панели CSS.

Практический пример создания тултипа:

/* 1. Объявляем якорь (кнопка) */
.button {
  anchor-name: --tooltip-anchor;
}

/* 2. Создаем и привязываем тултип */
.tooltip {
  position: absolute;
  position-anchor: --tooltip-anchor; /* Связываем с кнопкой */
  bottom: anchor(top); /* Размещаем тултип над кнопкой */
  left: anchor(center); /* Центрируем по горизонтали */
  translate: -50% 0; /* Точная центровка */
}

Преимущество: такой тултип автоматически адаптируется к прокрутке и границам экрана.

🛠 Улучшения для SPA: Navigation API и View Transitions

Firefox 147 делает разработку одностраничных приложений (SPA) значительно удобнее.

⚡️ Navigation API — новый стандарт для управления навигацией.
Позволяет перехватывать навигационные действия, управлять историей браузера и получать информацию о записях в истории. Он призван заменить History API и window.location, устраняя их недостатки. Подробнее об API можно узнать в полной спецификации на MDN.

🎭 View Transitions (Типы переходов)

API для плавных анимаций между состояниями страницы теперь поддерживает типы переходов (types). Это позволяет задавать разные анимации для разных обновлений контента (например, «переход вперед» и «переход назад»). Доступно свойство Document.activeViewTransition для получения активного перехода. Узнать больше можно в полном руководстве по View Transition API.

Инструменты разработчика также получили улучшения для View Transitions: псевдоэлементы ::view-transition теперь видны в DOM, а анимации — в панели анимаций.

💎 Другие важные улучшения

✅ JavaScript: Iterator.concat() для объединения итераторов.
✅ CSS: Поддержка -webkit-perspective для совместимости, новые единицы измерения (rcap, rch, rex, ric) на основе шрифта корневого элемента, свойства counter-* и quotes для ::marker.
✅ API: WebGPU теперь для всех macOS на Apple Silicon, Brotli-сжатие в CompressionStream, CSS-модули (импорт стилей как CSSStyleSheet), Service Workers как ES-модули.
✅ SVG: Поддержка медиа-фрагментов в URL для контроля анимации SMIL и отображения части изображения.
✅ Для разработчиков расширений: Временно загруженные расширения MV3 могут загружать скрипты с localhost.
✅ Для пользователей: Улучшение производительности видео для AMD GPU, поддержка XDG Base Directory в Linux, безопасность.

📈 Зачем все это нужно?

Firefox 147 — это не просто обновление, а серьезный шаг к более выразительной, производительной и простой в разработке веб-платформе. CSS Anchor Positioning обещает сократить объем пользовательского JavaScript для раскладки. Navigation API и View Transitions делают навигацию в SPA предсказуемой и кинематографичной. А WebGPU и другие API открывают двери для новых классов веб-приложений.

📱 @dev_notes_ru

#Firefox #WebDev #CSS #JavaScript #AnchorPositioning #ViewTransitions #NavigationAPI #Frontend

🚀 Быстрая загрузка CSS с помощью словарей сжатия

Устали выбирать между быстрой первой загрузкой и моментальными переходами по сайту? Словари сжатия в HTTP/3 решают эту проблему, сокращая объём передаваемых CSS до минимума.

В статье разбираем:
🔹 Как технология устраняет дублирование кода
🔹 Пошаговая настройка
🔹 Стратегия внедрения с fallback для всех браузеров

Это не теория — метод уже работает в Chromium и готов к использованию в production.

🖥 Читать статью

📱 @dev_notes_ru

#DevOps #CSS

👩‍💻 Совет по JavaScript: matchMedia()

Знаешь, как в JavaScript проверить, соответствует ли текущий viewport мобильному виду?

Не нужно городить window.innerWidth и слушать resize вручную.

Используй matchMedia — тот же самый медиа-запрос, что и в CSS:

const mq = matchMedia('(max-width: 550px)');

// Текущее состояние
console.log(mq.matches); // true / false

// Реагируем на изменения
mq.addEventListener('change', e => {
  console.log('Мобильный?', e.matches);
});

✅ Работает синхронно
✅ Использует те же условия, что и в стилях
✅ Не нужно самому отслеживать ресайз

📱 @dev_notes_ru

#JavaScript #CSS #Frontend

CSS может убивать.

📱 @dev_notes_ru

#CSS #Joke

CSS @scope: Как изолировать стили без BEM и Tailwind

Надоело ломать голову над классами вроде .user-panel__subscription-status--is-pending? Устали от простынь из утилитарных классов в HTML? 😫

С декабря 2025 года у нас есть официальное решение: @scope получил статус Baseline и работает во всех современных браузерах. Это не препроцессор, а нативный CSS, который останавливает «войны специфичности».

В новом материале разобрали, как технология меняет повседневную работу:

✅ Упрощаем BEM: класс только на родителе, внутри — простые теги.
✅ Дружим с Tailwind: оставляем утилиты для сетки, а уникальный дизайн выносим в @scope.
✅ Убираем !important: правило близости (proximity) решает конфликты без костылей.

Спойлер: внедрять можно точечно, не переписывая весь проект.

🖥 Читать статью

📱 @dev_notes_ru

#CSS #Frontend #BEM #Tailwind

Интеграция каскадных слоёв в существующий проект

В теории каскадные слои (@layer) выглядят как серебряная пуля для управления специфичностью. Но что делать, если у вас не стартап с нуля, а проект, который рос и развивался годами?

Мы провели рефакторинг реального сайта с 450+ строками «органически выросшего» CSS. Результат — пошаговая стратегия внедрения Cascade Layers без остановки разработки.

В статье:
✅ Подготовка: анализ, удаление мёртвого кода и зачистка !important (это критически важно).
✅ Архитектура: почему выбрали именно 5 слоёв (reset, base, layout, components, animations) и отказались от под-слоёв.
✅ Болевые точки: куда размещать медиазапросы, как импортировать шрифты и подключать библиотеки.

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

🖥 Читать статью

📱 @dev_notes_ru

#CSS #Frontend

Модальное окно или диалог: как выбрать и не сломать доступность

Проектируете модальные окна? А знаете, чем они принципиально отличаются от не-модальных диалогов? 🤔

Это не просто вопрос терминологии. Неверный выбор типа компонента ломает сценарии для клавиатурных пользователей и людей со скринридерами. А неправильная реализация даже правильного выбора делает интерфейс недоступным.

В новом материале разобрали тему от и до:

✅ Алгоритм выбора: три вопроса, которые переводят проектное решение из разряда «по ощущениям» в разряд обоснованных критериев.
✅ Техническая реализация: что нативный <dialog> делает за вас, а за что всё ещё отвечаете вы (спойлер: возврат фокуса — за вами).
✅ Стилизация и анимация: важное ограничение transition и как его обойти.
✅ Чек-лист доступности: 20+ пунктов для проверки перед релизом.

Бонус: Разбор вложенных модалок, работы с кастомными контролами и обработки длинного контента.

🖥 Читать статью

📱 @dev_notes_ru

#a11y #Frontend #CSS #HTML #JavaScript

Как писать CSS с @scope: Полный разбор синтаксиса, изоляция стилей и donut scoping

Помните головную боль с переопределением стилей во вложенных компонентах? Когда в навигации нужно стилизовать ссылки, но не трогать те, что внутри выпадающих меню? Раньше — сбросы и !important. Теперь — нативный @scope.

🔥 Событие, которого мы ждали годы: последний из мейнстрим-браузеров (да, Firefox) включил поддержку @scope. Это значит, что технология получила статус Baseline и готова к продакшену.

В новом материале — только практика, без воды:
🔹 Как работает donut scoping (скоуп в виде бублика)
🔹 Где писать @scope: во внешних CSS или прямо в HTML-компонентах
🔹 Чем :scope в CSS отличается от :scope в JavaScript

Код можно копировать и вставлять в проект уже сегодня.

🖥 Читать статью

📱 @dev_notes_ru

#CSS #Frontend #JavaScript #scope

Fluid-типографика: полное руководство по созданию адаптивных и доступных текстов

Вы когда-нибудь увеличивали масштаб страницы (Ctrl/Cmd +), чтобы прочитать текст, но ничего не происходило? 🧐 Это не баг, а особенность «адаптивной» верстки, в которой размер привязан только к ширине экрана.

Хорошая новость: современный CSS позволяет сделать так, чтобы текст одновременно:

✅ Плавно подстраивался под экран
✅ Уважал личные настройки шрифта
✅ Проходил WCAG 1.4.4 (доступность)

В новой статье разобрали подход от простых медиазапросов к сложной, но элегантной системе на clamp() и pow(). В конце — готовый чек-лист и формула, которую можно скопировать в проект.

🖥 Читать статью

📱 @dev_notes_ru

#CSS #Frontend #A11y

Понижаем приоритет группы CSS-правил с помощью @layer

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

Альтернативный подход — использование каскадных слоёв (@layer). Помещение "базовых" стилей (например, reset.css) в отдельный слой гарантирует, что они будут уступать основным правилам проекта, написанным вне слоя.

В статье рассматриваются:

✅ Три типовых сценария для применения этой техники.
✅ Особенности интеграции слоёв в существующую архитектуру.
✅ Специфика работы !important внутри каскадного слоя.

Будет полезно всем, кто стремится выстроить чистую и предсказуемую CSS-архитектуру.

🖥 Читать статью

📱 @dev_notes_ru

#CSS #Frontend