ক্রোম ১৫৪-এ রেসপন্সিভ আইফ্রেম

সেবাস্টিয়ান বেঞ্জ
ব্রামাস

প্রকাশিত: ১৬ সেপ্টেম্বর, ২০২৬

ক্রোম ১৫৪-এ রেসপন্সিভলি-সাইজড আইফ্রেমের জন্য সমর্থন যোগ করা হয়েছে, যা একটি <iframe> কে তার এমবেড করা ডকুমেন্টের অন্তর্নিহিত আকারের উপর ভিত্তি করে নিজের আকার নির্ধারণ করতে দেয়। এটি থার্ড-পার্টি কমেন্ট উইজেট, বিভিন্ন উচ্চতার সোশ্যাল মিডিয়া এমবেড, বা <iframe> ব্যবহার করে এমন অন্য যেকোনো ধরনের এমবেড নির্বিঘ্নে যুক্ত করার জন্য আদর্শ।

Browser Support

  • ক্রোম: একটি পতাকার আড়ালে।
  • প্রান্ত: একটি পতাকার পিছনে।
  • ফায়ারফক্স সমর্থিত নয়।
  • সাফারি সমর্থিত নয়।

Source

রেসপন্সিভলি-সাইজড আইফ্রেম একটি প্রচলিত পদ্ধতিকে প্রতিস্থাপন করেছে, যেখানে ডেভেলপাররা ম্যানুয়ালি আইফ্রেমের কন্টেন্ট পরিমাপ করতেন, postMessage() এর মাধ্যমে মাত্রা পাঠাতেন এবং এমবেডিং পেজে ম্যানুয়ালি আইফ্রেমের আকার আপডেট করতেন।

এই রেকর্ডিংটিতে একটি মন্তব্য ফর্ম দেখানো হয়েছে, যা একটি আইফ্রেম ব্যবহার করে একটি পৃষ্ঠায় এমবেড করা আছে। যখন ব্যবহারকারী তার মন্তব্য যোগ করেন, তখন এমবেডিং পৃষ্ঠার ভেতরের আইফ্রেমটির উচ্চতা গতিশীলভাবে আপডেট হয়, যা কোনো স্ক্রলবার ছাড়াই একটি নির্বিঘ্ন ভিজ্যুয়াল অভিজ্ঞতা তৈরি করে।

একটি আইফ্রেমের আকার তার বিষয়বস্তু অনুযায়ী নির্ধারণ করুন।

ডিফল্টরূপে, একটি আইফ্রেমের নিজস্ব ভিউপোর্ট থাকে। যদি এমবেড করা ডকুমেন্টটি সেই ভিউপোর্টের চেয়ে লম্বা হয়, তাহলে ব্যবহারকারীরা একটি অতিরিক্ত স্ক্রলবার দেখতে পারেন। রেসপন্সিভ আইফ্রেম সাইজিংয়ের মাধ্যমে, এমবেডিং পেজটি এর পরিবর্তে কন্টেন্ট-ভিত্তিক সাইজিং ব্যবহার করতে পারে:

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

সংযুক্ত নথিটিতে অবশ্যই সম্মতি জানাতে হবে:

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

এখানে একটি সম্পূর্ণ উদাহরণ দেওয়া হলো:

<style>
  .embed {
    width: 100%;
    frame-sizing: content-height;
  }
</style>
<iframe class="embed" src="/comments.html" title="Comments">
</iframe>

এবং /comments.html এ:

<!doctype html>
<html>
  <head>
    <meta name="responsive-embedded-sizing" content="allow-origins=*">
  </head>
  <body>
    ...
  </body>
</html>

আইফ্রেমটি এখন একটি নির্দিষ্ট-উচ্চতার ভিউপোর্টের মতো আচরণ করার পরিবর্তে এমবেড করা ডকুমেন্টের কন্টেন্টের উচ্চতা ব্যবহার করতে পারে।

frame-sizing ব্যবহার করুন

নতুন frame-sizing প্রপার্টিটি নিয়ন্ত্রণ করে যে আইফ্রেমের কন্টেন্ট থেকে কোন ডাইমেনশনটি নেওয়া হবে।

সমর্থিত মানগুলির মধ্যে রয়েছে:

frame-sizing: auto;
frame-sizing: content-width;
frame-sizing: content-height;
frame-sizing: content-inline-size;
frame-sizing: content-block-size;

auto আইফ্রেমের আকার নির্ধারণের বিদ্যমান আচরণ বজায় রাখে।

বেশিরভাগ হরাইজন্টাল রাইটিং মোডের ক্ষেত্রে, ভার্টিক্যালি এক্সপ্যান্ডিং এমবেডের জন্য content-height এবং content-block-size হলো সবচেয়ে কার্যকরী ভ্যালু।

আপনি frame-sizing অন্যান্য CSS সীমাবদ্ধতার সাথেও একত্রিত করতে পারেন:

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

ডাইনামিক কন্টেন্ট পরিবর্তনের পরে আকার পরিবর্তন

ব্রাউজার এমবেড করা ডকুমেন্টের ভেতরের প্রতিটি লেআউট পরিবর্তন ক্রমাগত পর্যবেক্ষণ করে না।

প্রাথমিক লেআউটের পরে যদি আইফ্রেমের বিষয়বস্তু পরিবর্তিত হয়, উদাহরণস্বরূপ আরও মন্তব্য লোড করার পরে বা একটি প্যানেল প্রসারিত করার পরে, এমবেডেড ডকুমেন্টটি window.requestResize() ব্যবহার করে একটি নতুন আকার গণনার জন্য অনুরোধ করতে পারে।

async function loadMore() {
  const items = await fetchMoreItems();
  renderItems(items);
  window.requestResize();
}

লেআউটের আগে, ডকুমেন্টের সমস্ত পরিবর্তন সম্পন্ন হওয়ার পর window.requestResize() কল করাই শ্রেয়। এই সুস্পষ্ট আপডেট মডেলটি রিসাইজ লুপ এড়াতে সাহায্য করে, যেখানে আইফ্রেমের আকার পরিবর্তন করলে তার ভিউপোর্ট পরিবর্তিত হয়, যা তার বিষয়বস্তু পরিবর্তন করে এবং ফলস্বরূপ তার আকার আবার পরিবর্তিত হয়।

ক্রস-অরিজিন এমবেড

ক্রস-অরিজিন আইফ্রেমের সাথেও রেসপন্সিভ সাইজিং ব্যবহার করা যেতে পারে। এমবেড করা ডকুমেন্টটি কোন কোন অরিজিন অনুমোদিত হবে তা সীমাবদ্ধ করতে পারে:

<meta
  name="responsive-embedded-sizing"
  content="allow-origins=https://publisher.example">

এটি রেসপন্সিভ সাইজিংকে শুধুমাত্র https://publisher.example এর মধ্যে সীমাবদ্ধ রাখবে। একাধিক অরিজিন স্পেস দিয়ে আলাদা করা হয়: content="allow-origins=https://publisher1.example https://publisher2.example" ।

তৃতীয়-পক্ষের উইজেটগুলির জন্য, শুধুমাত্র সেই অরিজিনগুলিতে অ্যাক্সেস সীমাবদ্ধ করুন যাদের এটি প্রয়োজন। এই পদ্ধতিটি বিদ্যমান আইফ্রেম নিরাপত্তা নিয়ন্ত্রণগুলির পরিপূরক, যেমন কন্টেন্ট সিকিউরিটি পলিসির ' frame-ancestors নির্দেশিকা, যা নিয়ন্ত্রণ করে কোন সাইটগুলি একটি পৃষ্ঠা এম্বেড করতে পারবে।

প্রগতিশীল উন্নয়ন

যেসব ব্রাউজার frame-sizing সমর্থন করে না, তাদের জন্য একটি বিদ্যমান ফলব্যাক চালু রাখতে আপনি ফিচার কোয়েরি ব্যবহার করতে পারেন।

.widget {
  width: 100%;
  height: 500px;
}

@supports (frame-sizing: content-height) {
  .widget {
    height: auto;
    frame-sizing: content-height;
  }
}

যদি এমবেড করা ডকুমেন্টটি ডায়নামিকভাবে আপডেট হয়, তাহলে আপনি requestResize() ফিচারটিও ডিটেক্ট করতে পারেন: 

if ("requestResize" in window) {
  window.requestResize();
}

সুতরাং, সমর্থন প্রসারিত না হওয়া পর্যন্ত বিদ্যমান আইফ্রেম সাইজিং কোড একটি ফলব্যাক হিসেবে থাকতে পারে।

চেষ্টা করে দেখুন

নিম্নলিখিত ডেমোতে রেসপন্সিভ আইফ্রেম-সাইজিং পরীক্ষা করে দেখুন: