Браузерные новости

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

Safari 18.0
- Контроль отвлечения внимания. Теперь, с помощью браузера, можно выбрать любой элемент, например модальное окно или всплывающее окно про куки, и скрыть его. Есть функциональная возможность убрать скрытые элемент нажав "Показать скрытые элементы".
- Если на странице есть "заметный", видимо занимающий большую площадь, видеоэлемент, то его можно увеличить заполнив всё окно. Если переключить вкладку или видео другим окном, то видео перейдёт в режиме "картинка в картинке". Это всё работает в нативном теге <video>. Apple поощряет использование семантических тегов.
- Появилась возможность отлаживать сайты в веб-инспекторе вашего айфона. Условно вы подключаете телефон к ноутбуку. Отладка происходит на ноутбуке с инспектором, но отлаживаете вы сайта на телефоне. Всё это происходит через Safari.
- Добавили ещё больше возможностей веб-приложениям в macOS Sequoia:
- открытие ссылок непосредственно в веб-приложениях, без открытия в дефолтном Сафари;
- веб-расширения теперь будут работать в веб-приложениях. Всё что установлено в Safari, будет работать в веб-приложениях, например adblock
- Добавили API View Transitions
- Добавили выражения контейнера от стилей @container style(--background: black);
- currentcolor заработал в относительных цветах section { background: oklch(from currentcolor calc(L * 4) C H); }
- Акцентный цвета теперь могут быть прозрачными .form-control { accent-color: rgba(0,0,0,0.6); }
- Анимация отображения: @starting-style вместе с transition-behavior и display: none
- content-visibility для ускорения отрисовки страницы. Если элемент скрыт, то он не будет отрисован, пока не станет видимым.

Часть фишек пока что заработает только в Apple-устройствах, например предложение по написанию текста: <textarea writingsuggestions="true"> или свитчер <input type=checkbox switch>

Остальное можно почитать и посмотреть в статье: https://webkit.org/blog/15865/webkit-features-in-safari-18-0/


Chrome 129
- добавили CSS interpolate-size и функция calc-size(). Свойство CSS interpolate-size позволяет странице использовать анимацию и переходы между ключевыми словами CSS для определения размера, такими как auto, min-content и fit-content, в тех случаях, когда эти ключевые слова могут быть анимированы.
- Переименовали inset-area в positioned-area.
- Обновили работу backdrop-filter. Демо
- Теперь WebGPU поддерживает HDR

И многое другое https://developer.chrome.com/release-notes/129

Firefox 130
- Атрибут name элемента <details> теперь позволяет группировать элементы <details>, причем одновременно может быть открыт только один элемент внутри группы.
- В dir и lang глобальных атрибутах теперь улучшено наследование
- Свойство CSS hyphens теперь правильно поддерживается для чешского и словацкого языков.

И много другое https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/130

Мы становимся свидетелями странного и прекрасного момента в истории CSS.

Уже точно решено, что будут ломать линии в гридах, чтобы иметь возможность построить masonry-раскладку, но пока не решили как именно это делать. Есть несколько вариантов:
- Грид-интегрированный вариант, который предполагает добавление новых значений для свойств grid-template-columns и grid-template-rows:

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

- Грид-независимый вариант, который предполагает добавление нового display и свойств masonry-tracks и masonry-direction, которые практически повторяют
grid-template-*:

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

- есть другие варианты, но пока всем кажется, что пора остановиться на первых двух

Всё это долго и упорно обсуждается в ишью на гитхабе, а буквально вчера выпустили CSS Grid Layout Level 3 в статусе First Public Working Draft, в котором как раз рассматриваются эти два варианта использования.

В этом году новых версий основных браузеров уже не ждём, поэтому я подвёл небольшие итоги по 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/