✨ Любой кусок страницы в окне поверх всех окон

Обычный Picture-in-Picture выносит в плавающее окошко только видео. Оно остаётся на экране, даже если переключиться на другую вкладку или программу.

Document Picture-in-Picture API делает то же самое с любым HTML: тикер акций, чат, список дел. По сути, получается веб-виджет.

Окно создаёт requestWindow(), и внутри у него свой пустой document. В статье туда клонируют тикер:

/* Select the component */
const stock = document.querySelector("#stock");

/* Clone the component and append it to the DPIP <body> */
DPIP.document.body.append(stock.cloneNode(true));

Стили сами не переедут, их копируют в head окна отдельно. А поправить вид только внутри окна поможет @media (display-mode: picture-in-picture).

Учтите, что API работает только на десктопе, а Safari на момент статьи его не поддерживал.

В статье есть полный код кнопки и разбор опций окна.

👍 - если было полезно

👉 @frontendInterview

🎯 Тултип, который сам перепрыгивает вниз, без JavaScript

Подсказка над кнопкой проста, пока кнопка не окажется у верхнего края экрана: подсказку обрезает. Обычно это чинили на JavaScript, и код выходил запутанным.

В CSS для этого есть Anchor Positioning API. Кнопке даём имя через anchor-name: --example-anchor, а подсказка привязывается к ней:

.target {
  position: fixed;
  position-anchor: --example-anchor;
  position-area: top;
  position-try-fallbacks: flip-block;
}

position-area: top ставит подсказку над кнопкой. Если там не хватает места, flip-block переворачивает её на другую сторону, вниз.

Подвох: с position: absolute переворот не сработает. Браузер ловит выход за содержащий блок, а у absolute он обычно прокручивается вместе с элементом. У fixed этот блок равен окну, поэтому край замечается.

Дальше в статье: как развернуть стрелочку тултипа и чем подстраховать старые браузеры.

👍 - если было полезно

👉 @frontendInterview

🌗 Переключателю тёмной темы хватит двух положений

Обычно на сайтах три варианта: «Системная», «Светлая», «Тёмная». Но системная тема в итоге всё равно светлая или тёмная. Поэтому один из трёх вариантов ничего видимого не делает: страница остаётся прежней.

Лиа Веру предложила оставить два состояния: «как в системе» и «наоборот». Второе сохраняется на устройстве, а возврат к первому стирает сохранённый выбор. Так каждый клик заметно меняет страницу.

Зак Лезерман поставил такой тумблер в подвал своего сайта. Режим, совпадающий с системным, подписан (auto):
Dark (auto) [Toggle] Light

Есть оговорка. Bramus в критике подхода указал на особый случай: пользователей, у которых системная тема переключается сама. Зак и сам из них, но считает простоту важнее. Это его личная оценка.

А ещё Зак уже выложил тумблер отдельным веб-компонентом Solar Eclipse Toggle.

👍 - если было полезно

👉 @frontendInterview

🎨 Перекрасить SVG-иконку внутри <img> прямо из CSS

SVG-иконку в <img> браузер кеширует, у неё есть alt и loading="lazy". Но поменять fill отдельной фигуры внутри неё из CSS нельзя. Поэтому иконки чаще вставляют инлайном и раздувают DOM.

Экспериментальная возможность CSS под названием Linked Parameters предлагает другой путь. В SVG-файле цвет берётся из переменной: fill="env(--color, #c1f07c)". А страница передаёт значение снаружи:

img {
  link-parameters: param(--color, #ff8052);
}

Браузер без поддержки просто возьмёт запасной #c1f07c, и иконка не сломается.

Оговорка: пока это работает только за флагами в Firefox Nightly и Safari Technology Preview. Когда появится во всех браузерах, неизвестно.

Если дойдёт, иконки можно будет держать отдельными кешируемыми файлами и красить их из CSS одной строкой.

👍 - если было полезно

👉 @frontendInterview

✨ Минус 50 строк JS, а через неделю карточки исчезли

Container queries позволяют стилям реагировать на ширину самого компонента, а не окна. Ими удобно заменить ResizeObserver, который вешал класс на карточку.

Но строка container-type: inline-size делает больше, чем просят. Элемент перестаёт брать ширину из своего содержимого. Карточки-теги в flex-ряду после этого сжимаются до 0px. Обычный блок цел: его ширину задаёт родитель.

Габриэль Шойомбо (Smashing Magazine) описывает это так: код в файле стал проще, а система вокруг сложнее.

Возвращаться к JS он не предлагает. Исправление простое: повесить container-type на обёртку, которая уже получает ширину от раскладки.

В статье ещё три сценария. Например, два безобидных на вид правила с :has(), которые в замере автора в Chrome вместе пересчитывают стили у 5001 элемента вместо одного.

👍 - если было полезно

👉 @frontendInterview

📱 Как не дать экранной клавиатуре закрыть нижнюю панель

Когда на телефоне выезжает клавиатура, Chrome на Android и Safari уменьшают только видимую область. Раскладка страницы не меняется, и блок с position: fixed внизу экрана может уйти под клавиатуру.

Это настраивается директивой interactive-widget в meta-теге viewport:

<meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content">

С resizes-content уменьшается и сама раскладка, так что фиксированная панель встаёт над клавиатурой. resizes-visual оставляет поведение по умолчанию, а overlays-content ничего не уменьшает: клавиатура ложится поверх.

Chrome и Firefox на Android директиву уже понимают. В WebKit её реализовали, но в Safari на сентябрь 2026 года её ещё не было.

Bramus, участвовавший в её создании, сам собрал WebKit и показывает все три режима в симуляторе iPhone.

👍 - если было полезно

👉 @frontendInterview

🔍 Как спросить у CSS не «знаешь это свойство?», а «оно работает вот так?»

@supports проверяет только одно: может ли браузер разобрать объявление. Поэтому, когда gap заработал во флексбоксе, это было не поймать. @supports (gap: 1em) отвечал «да», ведь в Grid gap работал давно.

Для таких случаев придумали функцию named-feature(). Она принимает ключевое слово из короткого списка в спецификации, и каждое слово означает конкретное поведение.

Например, CSS Anchor Positioning (привязка элемента к другому, якорному) сначала игнорировал transform у якоря. Теперь учитывает, и это можно проверить:

@supports named-feature(anchor-position-follows-transforms) {
  /* ✅ The browser supports transform-aware anchor positioning! */
}

Подвох: в Chrome 144–150 и Safari 27 само поведение уже есть, а проверка дала бы ложное «нет».

В статье второе ключевое слово и объяснение, почему для flex gap своего так и не завели.

👍 - если было полезно

👉 @frontendInterview

Кто в IT платит выше рынка? И какой оффер считается хорошим?

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

Кто, на ваш взгляд, платит выше рынка?
У кого привлекательнее премии?
Насколько важны ДМС, спорт, питание и другие бонусы при выборе работы?

👉 Поделиться мнением: https://clck.ru/3WNjo9

🧹 Часть библиотек в package.json браузер уже умеет сам

Зависимость ставят один раз и забывают, а браузеры тем временем учатся делать то же сами. По оценке Smashing Magazine, в типичном среднем приложении так копится от 60 до 90 КБ (gzip) лишнего кода.

Возьмём timeago.js, который превращает дату в «3 часа назад». Встроенный Intl.RelativeTimeFormat умеет то же:

const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });

rtf.format(-1, "day"); // "yesterday"
rtf.format(3, "hour"); // "in 3 hours"
rtf.format(-2, "week"); // "2 weeks ago"

Что можно убрать, подскажет Baseline, статус фичи в основных браузерах. Widely available значит, что фича есть везде уже 30 месяцев: берите. Newly available значит, что она появилась недавно: сначала проверьте аудиторию или добавьте проверку с фолбэком.

В статье ещё <dialog> вместо модальных библиотек, fetch вместо axios и случай, когда библиотеку пока лучше оставить.

👍 - если было полезно

👉 @frontendInterview

🌍 Почему «!» убегает не на ту сторону

Персидский и арабский пишутся справа налево. Вставьте персидскую фразу в английское предложение, допишите в её конце «!», и браузер нарисует знак не с той стороны фразы.

Текст раскладывает Unicode Bidirectional Algorithm. У букв направление задано жёстко. А пробелы и большинство знаков препинания нейтральны: они берут направление от соседей. Если соседи смотрят в разные стороны, решает базовое направление, а оно по умолчанию слева направо.

Браузеру надо подсказать: обернуть фразу в <span dir="rtl"> или <bdi>. Второй сам определяет направление по первой букве с жёстким направлением.

В этом и ловушка: персидское название книги, начатое словом CSS, он примет за текст слева направо. Тут без скрипта, который оценит всю строку, не обойтись.

Ещё в статье: почему у ChatGPT разъезжаются стрелки и числа и почему виновата отрисовка, а не модель.

👍 - если было полезно

👉 @frontendInterview