В этом году новых версий основных браузеров уже не ждём, поэтому я подвёл небольшие итоги по CSS-свойствам в браузерах за 2024 год.

https://shabalin.online/blog/css/outcomes-2024/

Делитесь комментариями, что знали, а что вообще впервые увидели?

React 19

Так как по работе приходится иметь дело с React слежу и за такими новостями. 5 декабря вышел 19 версия React. RC(релиз кандидат) вышел в апреле.
Предыдущая, 18 версия, вышла в марте 2022 года. Я на работе пишу на 16 версии, кстати, но это уже совсем другая история.

Добавили новые хуки. Надо конечно же в них разобраться.
Добавили "Actions", функции использующие асинхронные переходы. Вокруг этих экшенов добавили кучу логики, в том числе новых хуков. Надо конечно же в них разобраться.
use API, которое ждёт когда зарезолвится промис. Почитаем и поймём что это.
Новый API для взаимодействия с DOM, очень хорошо работающий на платформе node.js: prerender и prerenderToNodeStream.
React Server Components, который позволяет рендерить компонент заранее.

API из предыдущих версий стало лучше. Например ref, можно использовать как props. <Context> можно использовать в качестве провайдера вместо <Context.Provider>.

И многое-многое другое. Можно почитать в статье https://react.dev/blog/2024/12/05/react-19#whats-new-in-react-19

Если вы используете React 18 и у вас есть возможность перейти на React 19, то используйте руководство по обновлению.

require(esm)

В node.js v22.12.0(LTS) включили по умолчанию require(esm). Функция всё ещё экспериментальная, но больше не скрывается за флагом --experimental-require-module. Функция позволяет загружать ESModules через require.

// до node.js 22
const square = require('./math-utils.cjs'); // commonjs
import square from './math-utils.mjs'; // esm

// после node.js 22.12.0
const square = require('./math-utils.mjs'); //esm in require

Автор функции кратко объяснил зачем это нужно:

Это поможет ускорить внедрением ESM, поскольку авторы поставляющие пакеты с ESM принесут меньше поломок для пользователей использующих CJS.

Гуглеры подвели итоги года:

https://chrome.dev/css-wrapped-2024/

Не добавляйте плагины для прокрутки

Пожалуй соглашусь с автором сайта https://dontfuckwithscroll.com/
Попробуйте поскролить сайт, хоть на мобилке, хоть на компе. Это тихий ужас.

Можно отключить эффект плавной прокрутки с помощью "Disable effect". Вот тогда вы точно ощутите, что эффект не плавный, а глупый и никому не нужный.

Сайт в 10 пунктах объяснять почему не нужно издеваться над прокруткой сайта.

css-properties

Хороший пет-проект — это тот, которым сам автор активно пользуется. Значит, у меня отличный пет-проект (по крайней мере, для меня 😅).

Мне всегда очень лениво возвращаться к моему проекту, который собирает все возможные CSS-штуки и сортирует их по дате внедрения в браузеры. Но иногда находит вдохновение.

Итак, вышла третья версия css-properties Количество CSS-пунктов значительно увеличилось: с 669 до 2231 на текущую дату. Увеличение произошло за счёт добавления значений. Раньше в проекте были только CSS-свойства, типы, at-rule и селекторы.

Идея добавить значения пришла ко мне, когда я пытался найти информацию о том, когда появился oklch, но не смог, так как это значение.

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

css-properties 3.1

Короткой строкой: теперь надписи вида viewport_percentage_units_large имеют нормальные значения dvb, dvh, dvi, dvmax, dvmin, dvw units

С новым годом, друзья 🎉

Желаю всем в новом году найти любимое дело. Проведите каникулы с родственниками и друзьями🎄

Всем спасибо, что провели этот год рядом со мной, хоть и в цифровом мире 😘

Сегодня буду на PiterJS. Если тоже придёте давайте знакомиться :)

✨ PiterJS #74 уже на следующей неделе - традиционно в четверг!

👨‍💻 В январе мы проведем митап в гостях у самого айтишного вуза!
😍 Рассказываем и показываем красивое.

⏰ Когда: 23 января 19:00 (будем ждать вас с 18:30)
📍 Где: Главный корпус ИТМО, м. Горьковская, Кронверкский проспект, 49

📰 Программа:
🗣 19:10 Евгений Дорошкевич с докладом про Gsap
🗣 20:10 Артик Мангасарян расскажет про CSS: Эволюция цвета
🗣 21:10 Александр Мальцев поделится опытом в докладе Эффективный рендеринг SVG-стрелок: оптимизация для графов с сотнями объектов

🎫 Регистрируясь вы получаете индивидуальный пропуск.

🔥Важно: зарегистрироваться можно до 22 января 19.00!

оказывается работать на двух работах это очень сложно, но к новостям

W3C начала работу по стандартизации стилизации контролов элементов форм https://www.w3.org/TR/2025/WD-css-forms-1-20250325/
это не слёзы, это дощь

Появится новое значение у appearance - base, способ явно активировать базовое оформление формы, которое будет одинаковым во всех браузерах и легко переопределяется.

Появится куча псевдоэлементов для управления контролами:
- ::picker-icon – иконка открытия селектора.
- ::file-selector-button – кнопка выбора файла.
- ::checkmark – кастомизация галочек.
- ::thumb, ::track, ::fill – части слайдеров.
- ::clear-icon, ::placeholder – поля ввода.
- ::step-up, ::step-down – инкременты числовых полей.
- ::color-swatch – предпросмотр цвета.

Также появится CSS-функция control-value(), которая позволяет получить текущее значение элемента формы.

Из коробки будет учтён WCAG 2.2 AA

text-wrap

Долго мучила мысль по поводу использования значений balance и pretty.
Гуглеры рекомендуют такой подход: «balance — для заголовков, pretty — для основного текста». Сегодня, прочитав статью от Apple, стало понятно почему: всё из-за производительности. Гуглеры смотрят не на весь текст для балансировки, а только, кажется, на последние четыре строки.

В Safari могут позволить себе анализировать весь текст без ощутимой просадки в скорости. Она становится заметна лишь на сотнях строк в одном параграфе. Речь идёт не обязательно о теге <p>, а о любом текстовом блоке. Если текст получается длинным (например, как в спецификациях), но при этом разбит на параграфы и другие текстовые ноды, то проблем с производительностью не будет.

В связи с этим идея «использовать text-wrap: balance исключительно для заголовков, а text-wrap: pretty — только для основного текста» кажется слишком упрощённой. Дело в том, что balance действительно хорошо работает для коротких текстовых блоков (заголовки, подписи, тизеры), где удобно, чтобы все строки получались примерно одинаковой длины. Однако в некоторых ситуациях pretty может подойти и для заголовков, особенно если важно заполнить всё доступное пространство и избежать короткой последней строки без «сужения» всего блока текста.

С другой стороны, balance (при желании) можно применить и к основному тексту, но результат обычно выглядит странно: абзацы в этом случае не совпадают по ширине с контейнером, а строки могут становиться намного короче, чем доступное пространство. Проще говоря, у каждого инструмента есть свои преимущества, и сводить всё к правилу «balance — только для заголовков, pretty — только для абзацев» значит упускать гибкость, которую даёт CSS.

Источник: https://webkit.org/blog/16547/better-typography-with-text-wrap-pretty/

Давайте вспомним вместе, что такое логические свойства в CSS

https://shabalin.online/blog/css/logical-properties/

Красивая типографика

Решил всё-таки подробнее пройтись по статье "Better typography with text-wrap pretty"

https://shabalin.online/blog/css/text-wrap/

Большие, красивые, мощные состояния фокуса с :focus-visible v2

В одном из предыдущих постов я писал про красивые обводки для интерактивных элементов. Это простой и рабочий способ: добавляем в проект и радуемся.

*:focus-visible {
  outline: 3px solid #000000;
  outline-offset: 0.25rem;
  border-radius: 0.13rem;
}

Но в одном реальном проекте пришлось немного изменить этот подход, а в следующем — снова адаптировать под нужды. В итоге я решил зафиксировать все варианты в одном месте: https://shabalin.online/blog/css/tips/global-focus-visible/

Приходите со своими вариантами в чат

currentcolor в 2025

Мы долго спорили, кто как пишет currentcolor в своих проектах: currentColor, CURRENTCOLOR или даже cUrrENtCoLOr. Люди же уже обсуждают, проиграл ли currentcolor кастомным свойствам?

Написал небольшую заметку (https://shabalin.online/blog/css/currentcolor/), где вспомнил о том, как работает currentcolor, какие у него есть подводные камни и где его можно использовать даже при повсеместном применении кастомных свойств.

Напишите в чатике, где в ваших проектах вы используете currentcolor?

Гриды? Флексы? Item-flow? Что это?

Продолжаем наблюдать за судьбой masonry-раскладки в вебе. Напомню, что на данный момент нет никакой определённости и всё на стадии обсуждения. В прошлый раз было два варианта:
1. Добавить в гриды

display: grid;
grid-template-columns: 1fr 2fr 3fr;
grid-template-rows: masonry;

2. Создать новый display: masonry

display: masonry;
masonry-tracks: 1fr 2fr 3fr;
masonry-direction: column;

Все уже желали остановиться и выбрать одно из двух. Но тут ворвались ребята из W3C TAG и обронили фразу:

В целом, мы считаем, что masonry, гриды и wrapping-флексы(flex-wrap) должны быть объединены в единый набор свойств.

После этой фразы появился третий вариант item-flow для обсуждения.

Item-flow — это новое обобщённое свойство, которое объединяет принципы флексов и гридов, давая возможность задавать направление потока элементов, их обёртывание, тип упаковки и дополнительные настройки (включая masonry). Проще говоря, оно объединяет flex-flow и grid-auto-flow в единую систему, добавляя такие возможности как создание masonry-раскладки и другое.

Постарался коротко закрепить тут https://shabalin.online/blog/css/item-flow/

Вы же читаете? =))

nullish coalescing opertor

На этой неделе на работе получилось применить оператор нулевого слияния (??). Мне прям понравилось.

const value = 0;
const defaultValue = 5;

console.log(value ?? defaultValue); // ??

Написал для вас небольшую заметку https://shabalin.online/blog/javascript/nullish-coalescing/

<h1> скоро поменяет своё дефолтное отображение

Сейчас браузеры, обрабатывая <h1>, вложенные в секции, применяют к ним стили, которые визуально снижают их уровень (например, делая их похожими на <h2> или <h3> в зависимости от глубины вложенности). Речь идёт о стандартных стилях по умолчанию браузера. В скором времени все <h1> будут отображаться одинаково, поэтому для предотвращения проблем проверьте, что для заголовков в ваших проектах заданы явные стили.

<h1>Level 1</h1>
<section>
  <h1>Level 2</h1>  <!-- выглядит как h2 -->
  <section>
    <h1>Level 3</h1> <!-- выглядит как h3 -->
    <section>
      <h1>Level 4</h1> <!-- выглядит как h4 -->
    </section>
  </section>
</section>

Почитать заметку https://shabalin.online/blog/css/default-heading-style/

Калибруем замедление процессора

В Chrome 134 появилась возможность откалибровать замедление процессора. Если раньше мы выбирали x4, x6 или x20, и не понимали, что это значит, то теперь можно запустить процесс калибровки относительно вашего процессора и получить скорость для слабых(«low-tier mobile») и средних мобильных устройств( «mid-tier mobile»).

Калибровку можно сделать один раз и забыть. В большинстве случаев, если вы хотите эмулировать типичный смартфон, достаточно выбрать «mid-tier mobile».

Добавил для вас подробную заметочку, где можно посмотреть, что тыкать в DevTools - https://shabalin.online/blog/devtools/cpu-throttling-calibration/

Более приватные :visited

Закончим эту неделю последней новостью про обновления Хрома. В Chrome 136 изменилась логика работы псевдокласса :visited за счёт «разделения» истории посещённых ссылок. Эта новинка защищает пользователей от утечек приватных данных и решает старую проблему безопасности, существовавшую более 20 лет.

Заметка уже на месте - https://shabalin.online/blog/css/visited-links-private/

Всем лёгкого понедельника 😘