В хроме добавили обработчик действий skipad (skip - пропустить, ad - реклама), который можно использовать для отображения кнопки «Пропустить рекламу» в окне "картинка-в-картинке", а разработчик в этот момент может отследить нажатие на эту кнопку.

Пример: https://googlechrome.github.io/samples/picture-in-picture/skip-ad.html
Хром: https://chromestatus.com/feature/4749278882824192
Обсуждение: https://github.com/WICG/mediasession/pull/203

Центрируй по вертикали без гридового или флексового контекста

Мало ли вы пропустили: align-content: center теперь работает без флексов и гридов

<div style="align-content: center; height: 100px;">
  <code>align-content</code> просто работает!
</div>

Плюсы:
- работает без дополнительных обёрток(html-тегов)
- не нужно указывать флексы или гриды, если вам просто нужно центрировать элемент по вертикали.

Статья: https://build-your-own.org/blog/20240813_css_vertical_center/

PS: не забывайте проверять браузерную совместимость перед использованием

PowerToys 0.84.0

Обновился мой любимый PowerToys. В нём появилась новая утилита "Workspaces"(рабочее место), которая позволяет одним щелчком мыши запускать набор приложений, например:
- можно запустить программы для работы: редактор кода, графический редактор, браузер
- набор для отладки: открыть firefox, chrome
- можно запустить терминал, а в нём уже запустить vs code с путём к проекту и с заданными параметрами, например чистый vs code, или нужный профиль

Программы можно запускать с параметрами, например с отключенными сертификатами или вообще какими угодно флагами. Программы можно запустить с нужными размерами, а также в нужном месте, например слева или сверху

Самое удобное это то, что для каждого набора программ можно создать ярлык на рабочем столе.

ECMAScript stage 2.7

На мой взгляд, в ECMAScript самый эффективный и наглядный процесс стандартизации среди всех браузерных технологий, особенно по сравнению с HTML и CSS.

Каждое новое предложение проходит этапы от 0 до 4:

Stage 0 (Strawman) — Идея находится на обсуждении, без чётких деталей.
Stage 1 (Proposal) — Формальное предложение с общей концепцией.
Stage 2 (Draft) — Конкретная спецификация и черновая реализация.
Stage 3 (Candidate) — Почти готово, тестируется для включения в стандарт.
Stage 4 (Finished) — Окончательное принятие, включено в стандарт.
При продвижении на новый этап крупные предложения часто сталкиваются с понижением с третьего на второй. Третий этап требует написания огромного количества тестов, и пока они не будут созданы, нет уверенности в работоспособности функции. Разработчики браузеров даже не начинают имплементацию функций без тестов.

TC39 решила, что этот этап слишком объёмный, и ввела стадию stage 2.7. Эта стадия указывает на то, что предложение практически завершено и проходит валидацию. Все ключевые элементы (синтаксис, API, семантика) описаны, и больше не вносятся изменения без обратной связи от тестирования или практического использования. На этом этапе разрабатываются тесты для проверки совместимости и корректности.

Число 2.7 выбрано специально для обозначения того, что функции не хватает тестов, но она почти готова к третьему этапу.

Статья: https://thenewstack.io/inside-ecmascript-javascript-standard-gets-an-extra-stage/

PS: stage 2.7 был добавлен в феврале 2023 года, а я только узнал =)

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

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

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/

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