CSS ::ব্যাকড্রপ উত্তরাধিকারে পরিবর্তন

Bramus

::backdrop ইতিহাস

ফুলস্ক্রিন এপিআই নতুন ধারণা চালু করেছে যেমন শীর্ষ স্তর এবং ::backdrop উপাদান।

• উপরের স্তরটি একটি নতুন স্ট্যাকিং স্তর যা একটি ভিউপোর্টের মধ্যে ব্যবহারকারীর নিকটতম রেন্ডার করা হয়। এটির ভিউপোর্টের আকার রয়েছে এবং অন্যান্য সমস্ত স্তরের উপরে প্রদর্শিত হয়।
• ::backdrop সিএসএস সিউডো-এলিমেন্ট হল ভিউপোর্টের আকারের একটি বাক্স, উপরের স্তরে উপস্থাপিত যেকোন উপাদানের নীচে অবিলম্বে রেন্ডার করা হয়।

::backdrop মূল স্পেসিফিকেশনের একটি বৈশিষ্ট্য ছিল নিম্নরূপ:

এটি কোন উপাদান থেকে উত্তরাধিকারসূত্রে প্রাপ্ত হয় না এবং উত্তরাধিকারসূত্রে প্রাপ্ত হয় না।

যদিও এটি ::backdrop এর স্টাইলিংকে আলাদা করার জন্য উপযোগী ছিল, তবে এর মানে হল যে ::backdrop :root এ ঘোষিত কোনো কাস্টম বৈশিষ্ট্যের অ্যাক্সেস নেই। এটি ওয়েব ডেভেলপারদের মধ্যে কিছু বিভ্রান্তির সৃষ্টি করেছে।

একটি সমাধান হিসাবে আপনাকে আপনার কাস্টম বৈশিষ্ট্যগুলিকে ::backdrop পাশাপাশি :root এ তাদের উপলব্ধ করতে স্পষ্টভাবে ঘোষণা করতে হয়েছিল:

/* Pre-Chrome 122 */
:root, ::backdrop {
  --back-color: #333;
}

::backdrop {
  background-color: var(--back-color);
}

::backdrop একটি আপডেট৷

::backdrop এর সাথে সমস্যাগুলি সমাধান করতে, CSS ওয়ার্কিং গ্রুপ এই ধারণাগুলি গ্রহণ করেছে এবং এখন সেগুলিকে CSS পজিশনড লেআউট স্পেসিফিকেশনে উল্লেখ করেছে।

সংজ্ঞাটিকে একটি নতুন স্পেসিফিকেশনে নিয়ে যাওয়ার পাশাপাশি, সংজ্ঞাগুলিকে পরিমার্জিত করা হয়েছে।

একটি পরিমার্জন যা ওয়েব ডেভেলপারদের উপর সরাসরি প্রভাব ফেলে তা হল ::backdrop এলিমেন্টটি এখন একটি ট্রি অ্যাবাইডিং এলিমেন্ট, যার অর্থ এটি তার উৎপত্তি উপাদান থেকে উত্তরাধিকারসূত্রে প্রাপ্ত যেকোন বৈশিষ্ট্যের উত্তরাধিকারী হয়।

এই পরিবর্তনের জন্য ধন্যবাদ নির্দিষ্ট উপাদানগুলিতে কাস্টম সম্পত্তি মান ওভাররাইড করা সম্ভব এবং ::backdrop সেগুলিতে অ্যাক্সেস পাবে। উদাহরণস্বরূপ, একটি খোলা <dialog> উপাদানের সাথে যুক্ত ::backdrop এখন সেই <dialog> এ উপলব্ধ কাস্টম বৈশিষ্ট্যগুলি অ্যাক্সেস করতে পারে।

/* Chrome 122 and up */
:root {
  --backdrop-color: #333; /* Any ::backdrop can access this custom property */
}

dialog {
  --backdrop-color: #6300ff33; /* The ::backdrop for dialog can access this custom property */
}

::backdrop {
  background-color: var(--backdrop-color);
}