Операторы &&= и ||= — короткая запись для проверки и присваивания в JavaScript. Они помогают убирать лишние if и делают код компактнее — уже поддерживаются во всех современных браузерах.

В статье на простых примерах разбираем, как &&= присваивает новое значение только когда выражение слева истинно, а ||= — когда слева ложное. Это удобно для деактивации флагов и установки значений по умолчанию без дублирования кода. Например, вместо if (a) a = b; — a &&= b;, а для «дефолта» — username ||= 'Гость'. #js #baseline

🌸 Читать статью

К ноябрю 2025 года в CSS стали по-настоящему рабочими ещё два способа задавать цвет: lab() и lch(). Эти функции уже поддерживаются во всех основных браузерах — больше не нужны флаги и экспериментальные настройки.

С привычными rgb() и hex цвета часто ведут себя неожиданно, когда нужно просто сделать оттенок светлее или темнее. В lab() и особенно в lch() шаги по яркости, насыщенности и оттенку становятся намного предсказуемее: проще собирать аккуратные, гармоничные палитры для интерфейсов. #css #baseline

🌀 Читать статью

Grid Layout — одна из самых зрелых технологий в CSS. Но долгое время у него была одна неочевидная граница: анимация размеров сетки.

CSS Grid теперь можно анимировать напрямую — без JavaScript и обходных приёмов. В статье объясняем, что свойства grid-template-columns и grid-template-rows стали анимируемыми во всех современных браузерах, поэтому изменения сетки можно плавно задавать через transition.

Разбираем, где это особенно полезно: для раскрывающихся сайдбаров, акцентирования карточек и интерфейсов, где сетка должна мягко перестраиваться. #css #baseline

🟢 Читать статью

В CSS-функции calc() теперь можно использовать число π — и это не шутка. Константы e, pi, infinity и даже NaN стали частью стандарта и работают во всех браузерах.

В статье разбираем, что ещё появилось в декабре: от @scope для изоляции стилей без Shadow DOM до события scrollend, которое точно скажет, когда прокрутка завершилась. А ещё — как теперь измерять метрики LCP и INP встроенными средствами браузера. #css #baseline

🎁 Читать статью

Одно свойство, два цвета, ноль медиавыражений — light-dark() решает переключение темы в одну строку.

Раньше для поддержки светлой и тёмной темы приходилось дублировать стили через @media (prefers-color-scheme) и заводить отдельную переменную под каждый цвет. Функция light-dark() принимает два значения: первое для светлой темы, второе для тёмной. Браузер подставляет нужное сам.

В статье разбираем, как подключить функцию (без color-scheme: light dark она не заработает), где применять и какие браузеры пока остаются за бортом. #css #baseline

🎁 Читать статью

Параллакс, прогресс-бар чтения, появление элементов при прокрутке — раньше для всего этого нужен был JavaScript и обработка события scroll. Код получался хрупким, а анимации дёргались на каждом рендере.

CSS Scroll-Driven Animations меняют подход: одно свойство animation-timeline: scroll() привязывает обычные @keyframes к позиции скролла. Без JS, без библиотек, с рендерингом вне основного потока. В статье разбираем два типа таймлайнов — scroll() и view() — и показываем, как привязать анимацию к странице, контейнеру или видимости элемента. #css #baseline

🚀 Читать статью

У Map до сих пор не было способа сделать «верни значение, а если ключа нет — вставь дефолт» одним вызовом. Приходилось писать if (!map.has(key)) каждый раз. В феврале во всех браузерах появились getOrInsert() и getOrInsertComputed().

Кроме этого: CSS-функция shape() для сложных фигур с кривыми Безье прямо в clip-path — без SVG. Trusted Types для защиты от XSS на уровне DOM API. И Zstandard — алгоритм сжатия, который нередко обходит Brotli по скорости. Разбираем каждое с примерами. #webdev #baseline

🎁 Читать статью

Резервный канал в MAX

CSS-свойство backdrop-filter применяет фильтры к фону за элементом — размытие, контраст, яркость. С сентября 2024 в Baseline WidelyNewly Available. Работает везде.

Одно условие: у элемента должен быть полупрозрачный фон. Без rgba или hsla эффект применится, но визуально вы ничего не увидите.

Где это применять? Модальные окна, карточки с эффектом матового стекла, сайдбары с глубиной. В статье разбираем, как собрать эффект и какие фильтры комбинировать. #css #baseline

⚡ Читать статью

Правила в CSS можно вкладывать друг в друга — как в Sass, только без компиляции и зависимостей. Псевдоклассы, дочерние селекторы и медиазапросы лежат рядом с базовыми стилями компонента, а не разбросаны по файлу. Нативно — с 2023 года: Chrome 112+, Firefox 117+, Safari 16.5+.

Ключевой символ — &, ссылка на родительский селектор. &:hover превращается в .btn:hover, &.is-active — в .btn.is-active, а .dark & ставит .btn внутрь .dark. Без & вложенный селектор читается как потомок через пробел.

Ещё тонкость для отладки: вложенные селекторы по специфичности считаются как внутри :is() — вес берётся от самого тяжёлого аргумента родителя. На простых стилях незаметно, на запутанных стоит помнить.

Зато @media, @layer и @container работают прямо внутри правила: брейкпоинты живут рядом с компонентом, а не в хвосте файла. В статье можно покрутить живой пример. #css #baseline

👾 Читать статью

Сделать цвет светлее на 10% или подобрать гармоничный акцент — с HEX, да и с HSL, это всё ещё угадайка. Скажем, в HSL lightness: 50% у жёлтого и синего даёт разную видимую яркость: жёлтый светлее.

oklch() берёт три параметра: L (яркость от 0 до 1), C (насыщенность от 0 примерно до 0.4) и H (оттенок в градусах от 0 до 360). Ключевое — перцептивная равномерность: при равном L цвета воспринимаются почти одинаково яркими, куда ровнее, чем в HSL.

Для дизайн-систем это упрощает многое. Палитру собираете, меняя только H. Тёмную тему переключаете через L в CSS-переменных. Чтобы перекрасить весь бренд, хватает одной переменной --brand-h. И ещё oklch достаёт цвета, которых нет в sRGB, — оттенки P3 и Rec2020.

Поддержка: Chrome 111+, Firefox 113+, Safari 15.4+, для старых браузеров — фолбэк на HEX. В статье — слайдеры L, C, H, на которых видно, как меняется цвет. #css #baseline

🔵 Читать статью

ChatGPT и Claude печатают ответ у вас на глазах — слово за словом. Это стриминг: сервер отдаёт данные по мере генерации, ещё до того как соберёт ответ целиком. И тот же приём доступен в браузере — через Streams API и обычный fetch.

Кроме ИИ-интерфейсов, так грузят большие файлы с прогрессом и разбирают CSV на лету, нативно и без библиотек. В статье показываем, как читать ответ по кускам через response.body, и даём интерактивный пример прямо на странице. #js #baseline

👀 Читать статью

Тёмная тема обычно удваивает CSS: пишете цвета для светлой, потом те же — для тёмной в @media. Функция light-dark() схлопывает это в одну строку: оба значения в одном объявлении, а браузер выбирает нужное по системной теме.

Уже работает во всех актуальных браузерах, а для старых достаточно обычного запасного цвета. В статье — как подключить (есть обязательный color-scheme, иначе не сработает) и чем функция выручает дизайн-системы. #css #baseline

💡 Читать статью

Карусели, ленты сторис, постраничные слайдеры раньше означали JavaScript: обработчики касаний, подсчёт смещений, ручная докрутка. CSS Scroll Snap делает «прилипание» к слайдам силами самого браузера — двумя свойствами и без единой строки скрипта.

Работает во всех современных браузерах, а в старых лента листается как обычно. В статье — что это за свойства, пара приёмов для тонкой настройки и живая лента, которую можно поскроллить прямо на странице. #css #baseline

🎲 Читать статью