Сегодня посмотрим статью об адаптивных iframe в Chrome 154:
▪Новая возможность: Chrome 154 позволяет iframe самому подстраивать свой размер под контент встроенного документа — заменяет ручное измерение через
postMessage().▪Как работает:
➖Встраивающая страница задаёт
frame-sizing: content-height для iframe.➖Встроенный документ должен явно разрешить это через
<meta name="responsive-embedded-sizing" content="allow-origins=..."> (тег нельзя добавить уже после загрузки).▪Свойство
frame-sizing: управляет, какое измерение берётся из контента (content-width, content-height и др.), сочетается с другими ограничениями CSS (например, max-height).▪Динамическое изменение: браузер не следит за контентом постоянно — при изменениях встроенный документ сам вызывает
window.requestResize() (лучше до перерисовки), что защищает от бесконечных циклов изменения размера.▪Кросс-доменные iframe: можно ограничить список разрешённых origins через
allow-origins, дополняя политику безопасности.▪Нюансы и фолбэк:
➖Может вызывать смещение контента при загрузке, что вредит Core Web Vitals на первом экране.
➖Для старых браузеров используйте
@supports (frame-sizing: content-height) и проверку "requestResize" in window, сохраняя старый код как fallback.Статья - https://developer.chrome.com/blog/responsive-iframes?hl=en
