Делаем адаптивные фреймы на CSS

На днях на CSS-Tricks попалось интересное решение, как сделать адаптивным фрейм на CSS. Решение действительно очень простое и оригинальное, сохраняем.

Под фреймом подразумевается стандартный фрейм HTML5 — IFRAME. Не смотря на то, что ему давно пророчат смерть, он живее всех живых и очень даже активно используется.

Суть проблемы заключается в том, что встраиваемые в IFRAME страницы не подстраиваются под изменение размеров экрана, т.е содержимое фрейма не адаптивное. Иногда это создает большие сложности, приходится изобретать разные костыли на JS или как-то обходить проблему.

Задача решается с помощью директивы @supports, которая позволяет определять понимает ли браузер то или иное свойство CSS.

See the Pen Untitled by Ivan (@DanilinBiz) on CodePen.

Задача решена! ✌?

17.03.2022, опубликовано 7 лет назад