‏کروم ۱۵۴: آی‌فریمی که قد محتواش می‌شه

کروم ۱۵۴ از آی‌فریم‌هایی پشتیبانی می‌کنه که اندازه‌شون رو از روی محتوای سند داخلشون می‌گیرن. تو حالت عادی هر ویوپورت خودشو داره، پس اگه سند داخلش بلندتر از اون ویوپورت باشه کاربر یه اسکرول‌بار اضافه می‌بینه. راه‌حل رایج تا امروز این بود که ارتفاع محتوا رو داخل آی‌فریم اندازه بگیری، با postMessage() بفرستی به صفحه‌ی میزبان و اونجا دستی ارتفاع رو ست کنی. این الگو حالا جاشو به چندخط CSS می‌ده.

خاصیت جدید frame-sizing مشخص می‌کنه کدوم بُعد آی‌فریم از روی محتوا حساب بشه. صفحه‌ی میزبان فقط این رو می‌نویسه:

.embed {
  width: 100%;
  frame-sizing: content-height;
}

مقدارهای پشتیبانی‌شده auto، content-width، content-height، content-inline-size و content-block-size هستن. auto همون رفتار قبلی آی‌فریمه و برای زبان‌های افقی معمولاً content-height یا content-block-size اونی هستن که می‌خوای. می‌تونی این خاصیت رو با محدودیت‌های دیگه‌ی CSS هم ترکیب کنی، مثلاً max-height: 80vh بذاری تا امبد بیشتر از اون بلند نشه.

این اتفاق یه‌طرفه نمی‌افته و سند امبدشده باید خودش اجازه بده. این کار با یه تگ meta انجام می‌شه که مشخص می‌کنه کدوم دامنه‌ها حق دارن اندازه‌شو بخونن:

<meta name="responsive-embedded-sizing" content="allow-origins=*">

به جای * می‌تونی یه دامنه‌ی مشخص بنویسی و چندتا دامنه رو هم با فاصله از هم جدا کنی. برای ویجت‌های شخص ثالث توصیه شده فقط همون دامنه‌هایی که لازم دارن مجاز بشن. این مکانیزم کنار کنترل‌های موجود مثل frame-ancestors تو CSP می‌شینه، نه جاش.

مرورگر مدام حواسش به تغییرات لِی‌اوت داخل آی‌فریم نیست. اگه محتوا بعد از رندر اولیه عوض شد، مثلاً کامنت‌های بیشتری لود شد یا یه پنل باز شد، خود سند داخلی باید با window.requestResize() درخواست محاسبه‌ی دوباره بده. بهترین کار اینه که بعد از اعمال همه‌ی تغییرها و قبل از لِی‌اوت صداش کنی. این مدل صریح جلوی حلقه‌ی بی‌پایان resize رو می‌گیره: عوض شدن اندازه‌ی آی‌فریم ویوپورتشو عوض می‌کنه، ویوپورت محتوا رو، و محتوا دوباره اندازه رو.

برای مرورگرهایی که هنوز پشتیبانی نمی‌کنن راه فرار ساده‌ست. با یه فیچر کوئری @supports (frame-sizing: content-height) ارتفاع ثابت قبلی رو به عنوان fallback نگه می‌داری و فقط داخل بلاک @supports می‌ری سراغ height: auto. برای اسکریپت هم می‌تونی وجود requestResize رو روی window چک کنی. یعنی کد قدیمی سایزدهی می‌تونه سر جاش بمونه تا پشتیبانی بازتر بشه.

نکات کلیدی:

• قابلیت از کروم ۱۵۴ در دسترسه و مقاله‌ش ۱۶ سپتامبر ۲۰۲۶ منتشر شده.
• خاصیت frame-sizing پنج مقدار داره: auto، content-width، content-height، content-inline-size و content-block-size.
• سند امبدشده باید با متای responsive-embedded-sizing و کلید allow-origins اجازه بده، وگرنه هیچ اتفاقی نمی‌افته.
• تغییر محتوا بعد از رندر اولیه خودکار دیده نمی‌شه و باید window.requestResize() صدا زده بشه.
• برای مرورگرهای بدون پشتیبانی، @supports (frame-sizing: content-height) راه استاندارد نگه داشتن fallback ـه.