ResizeObserver: এটি উপাদানের জন্য document.onresize এর মত

ResizeObserver আপনাকে জানাতে দেয় যখন একটি উপাদানের আকার পরিবর্তন হয়।

Joe Medley

Surma

Jeremy Wagner

ResizeObserver এর আগে, ভিউপোর্টের মাত্রার কোনো পরিবর্তনের বিষয়ে বিজ্ঞপ্তি পেতে আপনাকে ডকুমেন্টের resize ইভেন্টে একজন শ্রোতাকে সংযুক্ত করতে হয়েছিল। ইভেন্ট হ্যান্ডলারে, তারপরে আপনাকে সেই পরিবর্তনের দ্বারা কোন উপাদানগুলি প্রভাবিত হয়েছে তা খুঁজে বের করতে হবে এবং যথাযথভাবে প্রতিক্রিয়া জানাতে একটি নির্দিষ্ট রুটিন কল করতে হবে। আকার পরিবর্তনের পরে যদি আপনার একটি উপাদানের নতুন মাত্রার প্রয়োজন হয়, তাহলে আপনাকে getBoundingClientRect() বা getComputedStyle() কল করতে হবে, যা লেআউট থ্র্যাশিং হতে পারে যদি আপনি আপনার সমস্ত পঠিত এবং আপনার সমস্ত লেখার ব্যাচিংয়ের যত্ন না নেন।

এটি এমন ক্ষেত্রেও কভার করেনি যেখানে উপাদানগুলি প্রধান উইন্ডোটির আকার পরিবর্তন না করে তাদের আকার পরিবর্তন করে। উদাহরণস্বরূপ, নতুন বাচ্চাদের যুক্ত করা, একটি উপাদানের display শৈলী none সেট না করা বা অনুরূপ ক্রিয়াগুলি একটি উপাদান, তার ভাইবোন বা পূর্বপুরুষদের আকার পরিবর্তন করতে পারে।

এই কারণেই ResizeObserver একটি দরকারী আদিম। এটি পরিবর্তিত উপাদানগুলির আকারের পরিবর্তনে প্রতিক্রিয়া দেখায়, যা পরিবর্তনের কারণ থেকে স্বাধীন। এটি পর্যবেক্ষিত উপাদানগুলির নতুন আকারেও অ্যাক্সেস সরবরাহ করে।

API

আমরা উপরে উল্লিখিত Observer প্রত্যয় সহ সমস্ত API একটি সাধারণ API ডিজাইন ভাগ করে। ResizeObserver ব্যতিক্রম নয়। আপনি একটি ResizeObserver অবজেক্ট তৈরি করুন এবং কনস্ট্রাক্টরের কাছে একটি কলব্যাক পাস করুন। কলব্যাকটি ResizeObserverEntry অবজেক্টের একটি অ্যারে পাস করা হয়-প্রতি পর্যবেক্ষণ করা উপাদানের জন্য একটি এন্ট্রি-যা উপাদানটির জন্য নতুন মাত্রা ধারণ করে।

var ro = new ResizeObserver(entries => {
  for (let entry of entries) {
    const cr = entry.contentRect;

    console.log('Element:', entry.target);
    console.log(`Element size: ${cr.width}px x ${cr.height}px`);
    console.log(`Element padding: ${cr.top}px ; ${cr.left}px`);
  }
});

// Observe one or multiple elements
ro.observe(someElement);

কিছু বিবরণ

কি রিপোর্ট করা হচ্ছে?

সাধারণত, একটি ResizeObserverEntry একটি উপাদানের বিষয়বস্তুর বক্সকে contentRect নামক একটি সম্পত্তির মাধ্যমে রিপোর্ট করে, যা একটি DOMRectReadOnly অবজেক্ট প্রদান করে। কন্টেন্ট বক্স হল সেই বাক্স যাতে কন্টেন্ট রাখা যায়। এটি বর্ডার বক্স বিয়োগ প্যাডিং.

এটা মনে রাখা গুরুত্বপূর্ণ যে ResizeObserver যখন contentRect এবং প্যাডিং উভয়ের মাত্রা রিপোর্ট করে , তখন এটি শুধুমাত্র contentRect দেখে । উপাদানের বাউন্ডিং বক্সের সাথে contentRect বিভ্রান্ত করবেন না । getBoundingClientRect() দ্বারা রিপোর্ট করা বাউন্ডিং বক্স হল সেই বাক্স যাতে পুরো উপাদান এবং এর বংশধর থাকে। SVG হল নিয়মের ব্যতিক্রম, যেখানে ResizeObserver বাউন্ডিং বাক্সের মাত্রা রিপোর্ট করবে।

Chrome 84 অনুযায়ী, ResizeObserverEntry আরও বিস্তারিত তথ্য প্রদানের জন্য তিনটি নতুন বৈশিষ্ট্য রয়েছে। এই বৈশিষ্ট্যগুলির প্রতিটি একটি ResizeObserverSize অবজেক্ট প্রদান করে যাতে একটি blockSize বৈশিষ্ট্য এবং একটি inlineSize বৈশিষ্ট্য রয়েছে। এই তথ্যটি কলব্যাকের আহ্বানের সময় পর্যবেক্ষণ করা উপাদান সম্পর্কে।

• borderBoxSize
• contentBoxSize
• devicePixelContentBoxSize

এই সমস্ত আইটেমগুলি শুধুমাত্র-পঠনযোগ্য অ্যারেগুলি ফেরত দেয় কারণ ভবিষ্যতে এটি আশা করা যায় যে তারা এমন উপাদানগুলিকে সমর্থন করতে পারে যার একাধিক খণ্ড রয়েছে, যা বহু-কলাম পরিস্থিতিতে ঘটে৷ আপাতত, এই অ্যারেগুলিতে শুধুমাত্র একটি উপাদান থাকবে।

এই বৈশিষ্ট্যগুলির জন্য প্ল্যাটফর্ম সমর্থন সীমিত, কিন্তু ফায়ারফক্স ইতিমধ্যে প্রথম দুটি সমর্থন করে ।

এটা কখন রিপোর্ট করা হচ্ছে?

স্পেক নির্দেশ করে যে ResizeObserver পেইন্টের আগে এবং লেআউটের পরে সমস্ত রিসাইজ ইভেন্ট প্রক্রিয়া করবে। এটি আপনার পৃষ্ঠার বিন্যাসে পরিবর্তন করার জন্য একটি ResizeObserver এর কলব্যাককে আদর্শ জায়গা করে তোলে। যেহেতু ResizeObserver প্রসেসিং লেআউট এবং পেইন্টের মধ্যে ঘটে, তাই এটি শুধুমাত্র লেআউটকে বাতিল করবে, পেইন্ট নয়।

গোটচা

আপনি হয়তো নিজেকে জিজ্ঞাসা করছেন: যদি আমি কলব্যাকের ভিতরে একটি পর্যবেক্ষিত উপাদানের আকার পরিবর্তন করে ResizeObserver এ করি তাহলে কী হবে? উত্তর হল: আপনি এখনই কলব্যাকে আরেকটি কল ট্রিগার করবেন। সৌভাগ্যবশত, অসীম কলব্যাক লুপ এবং চক্রাকার নির্ভরতা এড়াতে ResizeObserver একটি ব্যবস্থা রয়েছে। পরিবর্তনগুলি শুধুমাত্র একই ফ্রেমে প্রক্রিয়া করা হবে যদি পূর্ববর্তী কলব্যাকে প্রসেস করা অগভীর উপাদানটির তুলনায় পুনরায় আকারের উপাদানটি DOM ট্রিতে গভীরতর হয়৷ অন্যথায়, তারা পরবর্তী ফ্রেমে বিলম্বিত হবে।

আবেদন

ResizeObserver আপনাকে একটি জিনিস যা করতে দেয় তা হল প্রতি-উপাদান মিডিয়া প্রশ্নগুলি বাস্তবায়ন করা। উপাদানগুলি পর্যবেক্ষণ করে, আপনি অপরিহার্যভাবে আপনার ডিজাইন ব্রেকপয়েন্টগুলি সংজ্ঞায়িত করতে পারেন এবং একটি উপাদানের শৈলী পরিবর্তন করতে পারেন। নিম্নলিখিত উদাহরণে , দ্বিতীয় বাক্সটি তার প্রস্থ অনুযায়ী তার সীমানা ব্যাসার্ধ পরিবর্তন করবে।

const ro = new ResizeObserver(entries => {
  for (let entry of entries) {
    entry.target.style.borderRadius =
        Math.max(0, 250 - entry.contentRect.width) + 'px';
  }
});
// Only observe the second box
ro.observe(document.querySelector('.box:nth-child(2)'));

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

ResizeObserver আপনাকে কোডের একটি অংশ লিখতে দেয় যা উভয় পরিস্থিতির যত্ন নেয়। উইন্ডোর আকার পরিবর্তন করা হল এমন একটি ইভেন্ট যা একটি ResizeObserver সংজ্ঞা অনুসারে ক্যাপচার করতে পারে, কিন্তু appendChild() কল করা সেই উপাদানটির আকার পরিবর্তন করে (যদি না overflow: hidden সেট করা থাকে), কারণ এটি নতুন উপাদানগুলির জন্য স্থান তৈরি করতে হবে। এটি মাথায় রেখে, পছন্দসই প্রভাব অর্জন করতে খুব কম লাইন লাগে:

const ro = new ResizeObserver(entries => {
  document.scrollingElement.scrollTop =
    document.scrollingElement.scrollHeight;
});

// Observe the scrollingElement for when the window gets resized
ro.observe(document.scrollingElement);

// Observe the timeline to process new messages
ro.observe(timeline);

বেশ ঝরঝরে, হাহ?

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

আরেকটি ব্যবহার কেস যে কোনো ধরনের কাস্টম উপাদানের জন্য যা নিজস্ব লেআউট করছে। ResizeObserver পর্যন্ত, এর মাত্রা পরিবর্তন হলে বিজ্ঞপ্তি পাওয়ার কোনো নির্ভরযোগ্য উপায় ছিল না যাতে এর সন্তানদের আবার রাখা যায়।

নেক্সট পেইন্টে ইন্টারঅ্যাকশনের উপর প্রভাব (INP)

ইন্টারঅ্যাকশন টু নেক্সট পেইন্ট (INP) হল একটি মেট্রিক যা ব্যবহারকারীর ইন্টারঅ্যাকশনের জন্য একটি পৃষ্ঠার সামগ্রিক প্রতিক্রিয়া পরিমাপ করে। যদি একটি পৃষ্ঠার INP "ভাল" থ্রেশহোল্ডে থাকে—অর্থাৎ, 200 মিলিসেকেন্ড বা তার কম—এটি বলা যেতে পারে যে একটি পৃষ্ঠা এটির সাথে ব্যবহারকারীর ইন্টারঅ্যাকশনের জন্য নির্ভরযোগ্যভাবে প্রতিক্রিয়াশীল।

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

যেখানে ResizeObserver উদ্বিগ্ন, এটি গুরুত্বপূর্ণ কারণ একটি ResizerObserver ইনস্ট্যান্স যে কলব্যাকটি চালায় তা কাজ রেন্ডার করার ঠিক আগে ঘটে। এটি ডিজাইন দ্বারা, কারণ কলব্যাকে যে কাজটি ঘটে তা বিবেচনায় নিতে হবে, কারণ সেই কাজের ফলাফলের জন্য খুব সম্ভবত ব্যবহারকারীর ইন্টারফেসে পরিবর্তনের প্রয়োজন হবে।

ResizeObserver কলব্যাকে যতটা প্রয়োজন তত কম রেন্ডারিং কাজ করার যত্ন নিন, কারণ অতিরিক্ত রেন্ডারিং কাজ এমন পরিস্থিতি তৈরি করতে পারে যেখানে ব্রাউজার গুরুত্বপূর্ণ কাজ করতে বিলম্বিত হয়। উদাহরণস্বরূপ, যদি কোনও ইন্টারঅ্যাকশনের একটি কলব্যাক থাকে যার ফলে একটি ResizeObserver কলব্যাক চালানো হয়, নিশ্চিত করুন যে আপনি সম্ভাব্য সম্ভাব্য অভিজ্ঞতার সুবিধার্থে নিম্নলিখিতগুলি করছেন:

• অত্যধিক শৈলী পুনর্গণনার কাজ এড়াতে আপনার CSS নির্বাচকরা যতটা সম্ভব সহজ তা নিশ্চিত করুন। শৈলী পুনঃগণনা লেআউটের ঠিক আগে ঘটে এবং জটিল CSS নির্বাচকরা লেআউট ক্রিয়াকলাপকে বিলম্বিত করতে পারে।
• আপনার ResizeObserver কলব্যাকে এমন কোনো কাজ করা এড়িয়ে চলুন যা জোরপূর্বক রিফ্লো ট্রিগার করতে পারে।
• একটি পৃষ্ঠার লেআউট আপডেট করার জন্য প্রয়োজনীয় সময় সাধারণত একটি পৃষ্ঠায় DOM উপাদানের সংখ্যার সাথে বৃদ্ধি পায়। পৃষ্ঠাগুলি ResizeObserver ব্যবহার করুক বা না করুক এটি সত্য হলেও, একটি ResizeObserver কলব্যাকে করা কাজটি একটি পৃষ্ঠার কাঠামোগত জটিলতা বৃদ্ধির সাথে সাথে তাৎপর্যপূর্ণ হয়ে উঠতে পারে৷

উপসংহার

ResizeObserver সমস্ত প্রধান ব্রাউজারে উপলব্ধ এবং একটি উপাদান স্তরে উপাদানের আকার পরিবর্তনের জন্য নিরীক্ষণ করার একটি কার্যকর উপায় প্রদান করে। এই শক্তিশালী API দিয়ে খুব বেশি রেন্ডারিং করতে দেরি না করার জন্য শুধু সতর্ক থাকুন।