টিএল; ডিআর
নতুন CSS কন্টেনমেন্ট প্রপার্টি ডেভেলপারদের ব্রাউজারের শৈলী, লেআউট এবং পেইন্ট কাজের সুযোগ সীমিত করতে দেয়।
এটির কয়েকটি মান রয়েছে, এটির সিনট্যাক্স তৈরি করে:
contain: none | strict | content | [ size || layout || style || paint ]
এটি Chrome 52+ এবং Opera 40+ এ রয়েছে (এবং এটি ফায়ারফক্স থেকে সর্বজনীন সমর্থন রয়েছে), তাই এটিকে ঘুরিয়ে দিন এবং আপনি কীভাবে যাচ্ছেন তা আমাদের জানান!
ধারণ সম্পত্তি
একটি ওয়েব অ্যাপ বা এমনকি একটি জটিল সাইট তৈরি করার সময়, একটি মূল কর্মক্ষমতা চ্যালেঞ্জ হল শৈলী, লেআউট এবং পেইন্টের প্রভাবগুলিকে সীমিত করা৷ প্রায়শই DOM-এর সম্পূর্ণতাকে গণনার কাজের জন্য "ক্ষেত্রে" হিসাবে বিবেচনা করা হয়, যার অর্থ হতে পারে যে একটি ওয়েব অ্যাপে একটি স্বয়ংসম্পূর্ণ "ভিউ" করার চেষ্টা করা কঠিন প্রমাণিত হতে পারে: DOM-এর একটি অংশে পরিবর্তন অন্যান্য অংশকে প্রভাবিত করতে পারে, এবং সেখানে ব্রাউজারকে বলার কোন উপায় নেই কী সুযোগের মধ্যে বা বাইরে থাকা উচিত।
উদাহরণ স্বরূপ, ধরা যাক আপনার DOM এর কিছু অংশ এইরকম দেখাচ্ছে:
<section class="view">
Home
</section>
<section class="view">
About
</section>
<section class="view">
Contact
</section>
এবং আপনি একটি ভিউতে একটি নতুন উপাদান যুক্ত করবেন, যা শৈলী, বিন্যাস এবং পেইন্টকে ট্রিগার করবে:
<section class="view">
Home
</section>
<section class="view">
About
<div class="newly-added-element">Check me out!</div>
</section>
<section class="view">
Contact
</section>
এই ক্ষেত্রে, যাইহোক, পুরো DOM কার্যকরভাবে সুযোগের মধ্যে রয়েছে, যার অর্থ হল যে শৈলী, বিন্যাস এবং পেইন্ট গণনাগুলি পরিবর্তন করা হয়েছে কিনা তা নির্বিশেষে সমস্ত উপাদান বিবেচনা করতে হবে। DOM যত বড় হবে, তত বেশি গণনার কাজ জড়িত, যার অর্থ হল আপনি আপনার অ্যাপটিকে ব্যবহারকারীর ইনপুটের প্রতি প্রতিক্রিয়াহীন করে তুলতে পারেন।
ভাল খবর হল যে আধুনিক ব্রাউজারগুলি স্বয়ংক্রিয়ভাবে শৈলী, বিন্যাস এবং পেইন্টের কাজের সুযোগ সীমিত করার বিষয়ে সত্যিই স্মার্ট হয়ে উঠছে, যার অর্থ আপনাকে কিছু না করেই জিনিসগুলি দ্রুততর হচ্ছে।
তবে আরও ভাল খবর হল একটি নতুন CSS প্রপার্টি রয়েছে যা বিকাশকারীদের হাতে স্কোপ নিয়ন্ত্রণ করে: Containment ।
CSS Containment হল একটি নতুন প্রপার্টি, যার মধ্যে রয়েছে কীওয়ার্ড, যা চারটি মান সমর্থন করে:
-
layout -
paint -
size -
style
এই মানগুলির প্রতিটি আপনাকে ব্রাউজারকে কতটা রেন্ডারিং কাজ করতে হবে তা সীমিত করতে দেয়। আসুন একটু বিস্তারিতভাবে প্রতিটি কটাক্ষপাত করা যাক.
লেআউট (ধারণ করে: লেআউট)
বিন্যাস কন্টেনমেন্ট সম্ভবত কন্টেন এর সাথে সবচেয়ে বড় সুবিধা হল contain: paint ।
লেআউট সাধারণত ডকুমেন্ট-স্কোপড হয়, এটিকে আপনার DOM-এর আকারের সমানুপাতিকভাবে স্কেল করে, তাই আপনি যদি একটি উপাদানের left সম্পত্তি পরিবর্তন করেন, DOM-এর প্রতিটি একক উপাদান চেক করা প্রয়োজন হতে পারে।
এখানে কন্টেনমেন্ট সক্ষম করা হলে পুরো নথির পরিবর্তে উপাদানের সংখ্যা কমিয়ে আনতে পারে, ব্রাউজারটিকে এক টন অপ্রয়োজনীয় কাজ বাঁচাতে এবং উল্লেখযোগ্যভাবে কর্মক্ষমতা উন্নত করতে পারে।
পেইন্ট (ধারণ করে: পেইন্ট)
স্কোপিং পেইন্ট হল নিয়ন্ত্রণের আরেকটি অবিশ্বাস্যভাবে দরকারী সুবিধা। পেইন্ট কন্টেনমেন্ট মূলত প্রশ্নে থাকা উপাদানটিকে ক্লিপ করে, তবে এর আরও কয়েকটি পার্শ্ব প্রতিক্রিয়া রয়েছে:
- এটি একেবারে অবস্থান এবং স্থির অবস্থান উপাদানগুলির জন্য একটি ধারণকারী ব্লক হিসাবে কাজ করে। এর মানে হল যে কোনও শিশুকে উপাদানের উপর ভিত্তি করে অবস্থান করা হয়েছে যার
contain: paintনা। - এটি একটি স্ট্যাকিং প্রসঙ্গ হয়ে ওঠে। এর মানে হল যে
z-indexএর মতো জিনিসগুলি উপাদানের উপর প্রভাব ফেলবে এবং নতুন প্রসঙ্গ অনুযায়ী বাচ্চাদের স্ট্যাক করা হবে। - এটি একটি নতুন বিন্যাস প্রসঙ্গে পরিণত হয়। এর মানে হল যে আপনার যদি, উদাহরণস্বরূপ, পেইন্ট কন্টেনমেন্ট সহ একটি ব্লক স্তরের উপাদান থাকে তবে এটি একটি নতুন, স্বাধীন লেআউট পরিবেশ হিসাবে বিবেচিত হবে। এর মানে হল যে উপাদানের বাইরের লেআউট সাধারণত উপাদানটির শিশুদেরকে প্রভাবিত করবে না।
আকার (ধারণ করে: আকার)
কি contain: size মানে হল যে উপাদানের বাচ্চারা পিতামাতার আকারকে প্রভাবিত করে না এবং এটির অনুমানকৃত বা ঘোষিত মাত্রাগুলিই ব্যবহৃত হবে৷ ফলস্বরূপ আপনি যদি সেট করতে চান contain: size কিন্তু উপাদানের জন্য মাত্রা নির্দিষ্ট করেনি (হয় সরাসরি বা ফ্লেক্স বৈশিষ্ট্যের মাধ্যমে), এটি 0px দ্বারা 0px এ রেন্ডার করা হবে!
সাইজ কন্টেনমেন্ট সত্যিই একটি বেল্ট-এবং-বন্ধনীর পরিমাপ যাতে আপনি সাইজ করার জন্য চাইল্ড এলিমেন্টের উপর নির্ভর না করেন, কিন্তু নিজে থেকে এটি খুব বেশি পারফরম্যান্স সুবিধা দেয় না।
শৈলী (ধারণ করে: শৈলী)
একটি উপাদানের শৈলী পরিবর্তনের DOM গাছের উপর কী প্রভাব ফেলবে তা ভবিষ্যদ্বাণী করা কঠিন হতে পারে। এর একটি উদাহরণ হল CSS কাউন্টারগুলির মতো, যেখানে একটি শিশুর মধ্যে একটি কাউন্টার পরিবর্তন করা নথিতে অন্য কোথাও ব্যবহৃত একই নামের কাউন্টার মানকে প্রভাবিত করতে পারে। contain: style সেটের সাথে, শৈলী পরিবর্তনগুলি ধারণকারী উপাদানের আগে ব্যাক আপ প্রচারিত হবে না।
খুব পরিষ্কার হওয়ার জন্য, কি contain: style প্রদান করে না স্কোপড স্টাইলিং যেমন আপনি Shadow DOM থেকে পাবেন ; এখানে কন্টেনমেন্ট সম্পূর্ণরূপে গাছের অংশগুলিকে সীমিত করার বিষয়ে যা বিবেচনাধীন থাকে যখন শৈলীগুলি পরিবর্তন করা হয়, যখন সেগুলি ঘোষণা করা হয় না ।
কঠোর এবং বিষয়বস্তু নিয়ন্ত্রণ
এছাড়াও আপনি কীওয়ার্ডগুলিকে একত্রিত করতে পারেন, যেমন contain: layout paint , যা একটি উপাদানে শুধুমাত্র সেই আচরণগুলি প্রয়োগ করবে৷ কিন্তু অন্তর্ভুক্ত দুটি অতিরিক্ত মান সমর্থন করে:
-
contain: strictমানেcontain: size layout paint -
contain: contentঅর্থ হল একইcontain: layout paint
কন্টেন্ট কন্টেনমেন্ট ব্যবহার করা খুব ভালো যখন আপনি উপাদানটির আকার আগে থেকেই জানেন (বা এর মাত্রা সংরক্ষণ করতে চান), তবে মনে রাখবেন যে আপনি যদি মাত্রা ছাড়াই কঠোর নিয়ন্ত্রণ ঘোষণা করেন, কারণ উহ্য আকারের কন্টেনমেন্টের কারণে, উপাদানটি রেন্ডার করা হতে পারে 0px বাই 0px বক্স হিসাবে।
অন্যদিকে, বিষয়বস্তু নিয়ন্ত্রণ উল্লেখযোগ্য সুযোগ উন্নতির প্রস্তাব দেয়, কিন্তু আপনাকে সময়ের আগে উপাদানটির মাত্রা জানা বা নির্দিষ্ট করার প্রয়োজন হয় না।
দুটির মধ্যে contain: content হল এমন একটি যা আপনাকে ডিফল্টরূপে ব্যবহার করতে দেখা উচিত। contain: content আপনার প্রয়োজনের জন্য যথেষ্ট শক্তিশালী নয়।
আমাদের আপনি পেতে কিভাবে জানি
কন্টেনমেন্ট হল ব্রাউজারকে নির্দেশ করা শুরু করার একটি দুর্দান্ত উপায় যা আপনি আপনার পৃষ্ঠার মধ্যে আলাদা রাখতে চান৷ Chrome 52+ এ একবার চেষ্টা করে দেখুন এবং আপনি কীভাবে এগিয়ে যাচ্ছেন তা আমাদের জানান!