Мы наконец научились центрировать div, а потом браузеры добавили боковые панели

Центрирование div когда-то требовало небольшого ритуала:

.thing {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Сегодня это почти неприлично просто:

body {
  display: grid;
  min-height: 100dvh;
  place-items: center;
}

Этот же приём использован для div .site, в котором находится содержимое страницы. Всё выглядело центрированным — пока страница не открылась в браузере с видимой боковой панелью.

Сайт по-прежнему использует обычное центрирование внутри webview. Описанное ниже поведение с центрированием окна на нём не активно.

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

extension off

Div .site оставался идеально центрированным — просто не в том прямоугольнике. Решение казалось очевидным: JavaScript знает ширину и webview, и всего окна браузера.

window.innerWidth // the webview
window.outerWidth // the whole browser window
const browserChrome = window.outerWidth - window.innerWidth;

Если боковая панель находится слева, .site можно сдвинуть обратно на половину этой разницы:

const shift = -browserChrome / 2;

.site {
  translate: var(--window-center-shift, 0px);
}

Боковая панель по-прежнему сужает webview, и страница по-прежнему нормально реагирует на изменение размеров. Коррекция лишь переставляет уже центрированный контейнер. Если свободного видимого пространства для сдвига недостаточно, коррекция должна прекращаться, а не скрывать содержимое.

Решение работало — ровно до открытия DevTools.

DevTools ломает простое решение

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

Недостающую координату удалось получить из события указателя. Доверенное (trusted) событие pointer знает своё положение и на экране, и внутри webview — этого достаточно, чтобы определить положение webview внутри окна:

const viewportLeft = event.screenX - event.clientX * scale;
const viewportRight = viewportLeft + innerWidth * scale;

const left = viewportLeft - window.screenX;
const right = window.screenX + outerWidth - viewportRight;
const shift = (right - left) / (2 * scale);

Firefox напрямую предоставляет позицию viewport. Chromium — нет, поэтому коррекция стартует с выбранного положения боковой панели и становится точной, как только указатель попадает на страницу.

center, actually

Эксперимент вырос в расширение для браузера center, actually. Оно пытается самостоятельно найти центрируемый элемент; если угадывает неверно — элемент можно выбрать вручную. Именно здесь такая настройка уместна: как опция по выбору пользователя, а не решение, навязанное сайтом всем подряд. Проще всего увидеть разницу на демо-странице.

extension-on