Кратко

  • W3C выпустил первый публичный рабочий проект Resize Observer 11 февраля 2020 года. API наблюдает за изменением размера элемента и передаёт измерения функции обратного вызова.
  • Редакторский проект CSSWG различает область содержимого, область с рамкой и область содержимого в пикселях устройства. Он описывает доставку уведомлений во время построения кадра и обработку изменений, которые в этом цикле доставить не удалось.

Представим график внутри карточки. Внешняя сетка страницы выделяет карточке место, автор графика определяет число меток на осях. Раскрывается боковая панель — и карточка сужается, хотя окно браузера осталось таким же. Сетка не знает, какие подписи сократить. График не управляет шириной сетки. Им нужна короткая записка с точным размером, который получился после перерасчёта.

Первый публичный рабочий проект W3C от 11 февраля 2020 года описал ResizeObserver для отслеживания размеров элементов. Через observe() регистрируют цель; при изменении наблюдаемой области запись о размере поступает в обратный вызов. unobserve() снимает одну цель, disconnect() завершает наблюдения. Официальная история публикаций W3C подтверждает дату первого публичного проекта. Измерять стали именно ту деталь, которой предстоит подстраиваться.

Получив новую ширину, график может сократить подписи, переставить легенду или перерисоваться. Браузер сообщает результат размещения элементов. Автор графика решает, как применить цифру. Страница сохраняет право передвинуть панель, не разбираться при этом в каждой оси и каждой линии.

У размера есть несколько значений. Редакторский проект CSSWG Resize Observer Module Level 1 описывает content-box, border-box и device-pixel-content-box. Первая область относится к содержимому. Вторая охватывает рамку. Третья выражает размер содержимого в пикселях устройства до CSS-преобразований. Тексту важна ширина строки, карточке с рамкой — внешние габариты, рисунку на canvas — число доступных пикселей. Рулетку выбирают под задачу.

Выбор области в observe() определяет, какое изменение вызовет уведомление. Доставленная запись содержит данные о размерах. Условие вызова и сведения внутри записи стоит проверять по отдельности, особенно если компонент повторяет дорогую работу после каждого сигнала. При удалении карточки наблюдение можно закончить: пустой комнате ежедневные обмеры ни к чему.

Обратный вызов способен запустить собственную карусель. Увидел узкую карточку — расширил её. Получил новый размер — сузил. Получил следующий — опять расширил. В редакторском проекте CSSWG обработка встроена в цикл отрисовки, а глубина элементов ограничивает повторную доставку в одном проходе. Недоставленные изменения могут вызвать сообщение об ошибке цикла и дойти в следующем кадре. Автору нужно добиться устойчивой реакции: подгонять рисунок под отведённое место, а не раскачивать само место.

Документ CSSWG датирован 22 ноября 2022 года и имеет статус редакторского проекта; история W3C закрепляет публичный проект 2020 года. В этих первоисточниках хорошо видна сила небольшого общего инструмента. Браузер измеряет конкретный элемент. Компонент решает, что уместится в полученной коробке.