লেখক-সংজ্ঞায়িত CSS নাম এবং ছায়া DOM: স্পেসিফিকেশন এবং অনুশীলনে

Noam Rosenthal

লেখক-সংজ্ঞায়িত CSS নাম এবং ছায়া DOM একসাথে কাজ করার কথা। যাইহোক, ব্রাউজারগুলি স্পেসিফিকেশনের সাথে অসঙ্গতিপূর্ণ, কখনও কখনও একে অপরের সাথে, এবং প্রতিটি CSS নাম কিছুটা ভিন্ন উপায়ে বেমানান।

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

লেখক-সংজ্ঞায়িত CSS নাম কি?

লেখক-সংজ্ঞায়িত CSS নামগুলি হল একটি অপেক্ষাকৃত পুরানো CSS সিনট্যাক্স প্রক্রিয়া, মূলত @keyframes নিয়মের জন্য প্রবর্তন করা হয়েছে, যা একটি <keyframe-name> একটি কাস্টম-আইডেন্ট বা একটি স্ট্রিং হিসাবে সংজ্ঞায়িত করে। এই ধারণার উদ্দেশ্য হল একটি স্টাইলশীটের একটি অংশে কিছু ঘোষণা করা এবং অন্য অংশে এটি উল্লেখ করা।

/* "fade-in" is a CSS name, representing a set of keyframes */
@keyframes fade-in {
  from { opacity: 0 };
  to { opacity: 1 }
}

.card {
  /* "fade-in" is a reference to the above keyframes */
  animation-name: fade-in;
}

অন্যান্য CSS বৈশিষ্ট্যগুলি যেগুলি CSS নামগুলি ব্যবহার করে তা হল ফন্ট, সম্পত্তি ঘোষণা, কন্টেইনার কোয়েরি, এবং আরও সাম্প্রতিক ভিউ ট্রানজিশন, অ্যাঙ্কর পজিশনিং এবং স্ক্রোল-চালিত অ্যানিমেশন। নিম্নলিখিত অ-বিস্তৃত সারণীতে এমন নাম অন্তর্ভুক্ত রয়েছে যেগুলির অবস্থা Chrome চেক করে৷

বৈশিষ্ট্য	নাম ঘোষণা	নামের রেফারেন্স
কীফ্রেম	@keyframes	animation-name
হরফ	@font-face { } @font-palette-values	font-family font-palette
সম্পত্তি ঘোষণা	@property কোনো অনিবন্ধিত কাস্টম সম্পত্তি ঘোষণা	var()
রূপান্তর দেখুন	view-transition-name view-transition-class	::view-transition-* সিউডো উপাদান
অ্যাঙ্কর পজিশনিং	anchor-name	position-anchor
স্ক্রোল-চালিত অ্যানিমেশন	view-timeline-name scroll-timeline-name	animation-timeline
শৈলী তালিকা	@counter-style	list-style
কাউন্টার	counter-reset counter-set counter-increment
ধারক প্রশ্ন	container-name	@container
পাতা	page	@page

আপনি টেবিলে দেখতে পাচ্ছেন, একটি CSS নামের সাধারণত একটি সংশ্লিষ্ট CSS রেফারেন্স থাকে। উদাহরণস্বরূপ, animation-name হল @keyframes নামের একটি রেফারেন্স। CSS নামগুলি DOM-এ সংজ্ঞায়িত নামের থেকে আলাদা, যেমন অ্যাট্রিবিউট এবং ট্যাগ নাম, কারণ সেগুলি ঘোষণা করা হয় তারপর স্টাইলশীটের প্রসঙ্গে উল্লেখ করা হয়।

নামগুলি ছায়া DOM এর সাথে কীভাবে সম্পর্কিত

যদিও CSS নামগুলি একটি নথি বা স্টাইলশীটের বিভিন্ন অংশের মধ্যে সম্পর্ক তৈরি করার জন্য তৈরি করা হয়, তবে Shadow DOM এর বিপরীত কাজ করার জন্য তৈরি করা হয়। এটি সম্পর্ককে এনক্যাপসুলেট করে যাতে তারা ওয়েব কম্পোনেন্ট জুড়ে ফাঁস না করে যেগুলির নিজস্ব নামস্থান থাকার কথা।

CSS নাম এবং ছায়া DOM একসাথে আনার মাধ্যমে, ওয়েব উপাদানগুলি রচনা করার অভিজ্ঞতাটি নমনীয় হওয়ার জন্য যথেষ্ট অভিব্যক্তিপূর্ণ মনে হওয়া উচিত কিন্তু স্থিতিশীল হওয়ার জন্য যথেষ্ট সীমাবদ্ধ।

এই তত্ত্ব ভাল. অনুশীলনে, ব্রাউজারগুলি একই ব্রাউজারে, ব্রাউজার জুড়ে এবং বৈশিষ্ট্য এবং স্পেসিফিকেশনের মধ্যে উভয় বৈশিষ্ট্যের মধ্যে, ছায়া DOM-এর সাথে যেভাবে CSS নামগুলি ইন্টারঅপারেটিং করে তাতে অসামঞ্জস্যপূর্ণ।

কিভাবে নাম এবং ছায়া DOM একসাথে কাজ করা উচিত

সমস্যাটি বোঝার জন্য, সিএসএস-এর এই অংশগুলিকে তত্ত্বগতভাবে কীভাবে একসাথে কাজ করা উচিত তা বোঝার মতো।

সাধারণ নিয়ম

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

নিয়মের ব্যতিক্রম: @property

অন্যান্য CSS নামের বিপরীতে, CSS বৈশিষ্ট্য ছায়া DOM দ্বারা এনক্যাপসুলেট করা হয় না । বরং, তারা বিভিন্ন ছায়া গাছ জুড়ে পরামিতি পাস করার সাধারণ উপায়। এটি @property বর্ণনাকারীকে বিশেষ করে তোলে: এটি একটি নথি-বিশ্বব্যাপী ঘোষণার মতো আচরণ করা উচিত যা একটি নির্দিষ্ট নামযুক্ত সম্পত্তি কীভাবে কাজ করে তা সংজ্ঞায়িত করে। কারণ প্রপার্টিগুলিকে ছায়া গাছ জুড়ে মেলাতে হবে, সম্পত্তির ঘোষণার অমিল অপ্রত্যাশিত ফলাফল তৈরি করবে, তাই @property ঘোষণাগুলিকে নথির ক্রম অনুসারে সমতল এবং সমাধান করার জন্য নির্দিষ্ট করা হয়েছে।

নিয়মের সাথে কিভাবে কাজ করা উচিত ::part

ছায়ার অংশগুলি ছায়া গাছের ভিতরের একটি উপাদানকে তার মূল গাছের সাথে প্রকাশ করে। এটি করার মাধ্যমে, প্যারেন্ট ট্রি সেই উপাদানটি অ্যাক্সেস করতে পারে এবং ::part উপাদান ব্যবহার করে স্টাইল করতে পারে।

যেহেতু ::part দুটি ট্রি স্কোপকে একই উপাদান স্টাইল করার অনুমতি দেয়, তাই নিম্নোক্ত ক্যাসকেড অর্ডারটি নির্দিষ্ট করা হয়েছে:

1. প্রথমে, ছায়া প্রসঙ্গের ভিতরে শৈলী পরীক্ষা করুন। এটি অংশটির "ডিফল্ট" শৈলী।
2. তারপর, বাহ্যিক শৈলী প্রয়োগ করুন যেমন ::part সংজ্ঞায়িত করা হয়েছে। এটি অংশটির "কাস্টমাইজড" শৈলী।
3. তারপর, !important এর সাথে সংজ্ঞায়িত যেকোনো অভ্যন্তরীণ শৈলী প্রয়োগ করুন। এটি একটি কাস্টম উপাদানকে ঘোষণা করতে দেয় যে একটি নির্দিষ্ট অংশের একটি নির্দিষ্ট সম্পত্তি ::part দ্বারা কাস্টমাইজযোগ্য নয়।

এর মানে হল যে ছায়া DOM-এর মধ্যে থেকে নামগুলি একটি ::part থেকে উল্লেখ করা যাবে না, কারণ ::part একটি ছায়া-স্কোপযুক্ত শৈলীর পরিবর্তে একটি হোস্ট-স্কোপড শৈলী। যেমন:

// inside the shadow DOM:
@keyframes fade-in {
  from { opacity: 0}
}

// This shouldn't work!
// The host style shouldn't know the name "fade-in"
::part(slider) {
  animation-name: fade-in;  
}

নিয়ম কিভাবে ইনলাইন শৈলী সঙ্গে কাজ করা উচিত

অসদৃশ ::part , style অ্যাট্রিবিউট সহ ইনলাইন শৈলী, অথবা যেগুলি স্ক্রিপ্ট ব্যবহার করে প্রোগ্রাম্যাটিকভাবে স্টাইল সেট করে, সেই উপাদানটি যেখানে স্কোপ করা হয় সেখানে স্কোপ করা হয়। কারণ একটি এলিমেন্টে স্টাইল প্রয়োগ করার জন্য আপনাকে এলিমেন্ট হ্যান্ডেলে এবং এইভাবে শ্যাডো রুটে অ্যাক্সেস করতে হবে।

কিভাবে CSS নাম এবং ছায়া DOM বাস্তবে একসাথে কাজ করে

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

এই বৈশিষ্ট্যগুলি অনুশীলনে কীভাবে কাজ করে তা পরীক্ষা করতে এবং প্রদর্শন করতে, আমরা নিম্নলিখিত পৃষ্ঠাটি তৈরি করেছি: https://css-names-in-the-shadow.glitch.me/ । এই পৃষ্ঠাটিতে বেশ কয়েকটি আইফ্রেম রয়েছে, প্রতিটি বৈশিষ্ট্যের একটিতে ফোকাস করে এবং ছয়টি পরিস্থিতি পরীক্ষা করে:

• একটি বাইরের নামের বাইরের রেফারেন্স : কোন ছায়া DOM জড়িত নয়, এটি কাজ করা উচিত।
• একটি অভ্যন্তরীণ নামের বাইরের রেফারেন্স : এটি কাজ করা উচিত নয়, কারণ এর অর্থ হল ছায়া প্রসঙ্গে সংজ্ঞায়িত নামটি ফাঁস হয়েছে৷
• বাইরের নামের অভ্যন্তরীণ রেফারেন্স : এটি কাজ করা উচিত, কারণ গাছের স্কোপযুক্ত নামগুলি ছায়া শিকড় দ্বারা উত্তরাধিকারসূত্রে পাওয়া যায়।
• অভ্যন্তরীণ নামের অভ্যন্তরীণ রেফারেন্স : এটি কাজ করা উচিত, কারণ রেফারেন্সের নাম উভয়ই একই সুযোগে রয়েছে।
• ::part বাইরের নামের উল্লেখ : এটি কাজ করা উচিত, কারণ ::part এবং নাম উভয়ই একই সুযোগে ঘোষণা করা হয়েছে।
• ::part উল্লেখ : এটি কাজ করা উচিত নয়, কারণ বাইরের সুযোগটি ছায়া DOM-এর ভিতরে ঘোষিত নাম সম্পর্কে জ্ঞান অর্জন করা উচিত নয়।

@keyframes

স্পেসিফিকেশনে সংজ্ঞায়িত হিসাবে, আপনি একটি ছায়া রুটের মধ্যে থেকে কীফ্রেমের নাম উল্লেখ করতে সক্ষম হবেন, যতক্ষণ না @keyframes at-rule পূর্বপুরুষের সুযোগে থাকে। অনুশীলনে, কোন ব্রাউজার এই আচরণটি প্রয়োগ করে না, এবং কীফ্রেম সংজ্ঞাগুলি শুধুমাত্র সেই সুযোগে উল্লেখ করা যেতে পারে যেখানে তারা সংজ্ঞায়িত করা হয়েছে। সংখ্যা 10540 দেখুন।

@property

স্পেসিফিকেশনে সংজ্ঞায়িত করা হয়েছে, @property যেকোনো ঘোষণা নথির সুযোগে সমতল করা হবে। আজ যাইহোক, সমস্ত ব্রাউজারে আপনি ডকুমেন্টের সুযোগে শুধুমাত্র @property ঘোষণা করতে পারেন এবং ছায়া গোড়ার মধ্যে @property ঘোষণা উপেক্ষা করা হয়।
সংখ্যা 10541 দেখুন।

ব্রাউজার নির্দিষ্ট বাগ

অন্যান্য বৈশিষ্ট্যগুলি ব্রাউজার জুড়ে সামঞ্জস্যপূর্ণ আচরণ দেখায় না:

• @font-face সাফারিতে রুট স্কোপে সমতল করা হয়েছে।
• Chromium একটি শ্যাডো রুটে anchor-name নিয়মগুলিকে উত্তরাধিকারসূত্রে নেওয়ার অনুমতি দেয় না৷
• scroll-timeline-name এবং view-timeline-name ::part (এছাড়াও Chromium-এ) সঠিকভাবে স্কোপ করা হয়নি।
• কোনো ব্রাউজার ছায়া শিকড়ে @font-palette-values ঘোষণা করার অনুমতি দেয় না।
• view-transition-class একটি ছায়া মূলের ভিতরে সংজ্ঞায়িত করা যেতে পারে (পরিবর্তন নিজেই ছায়া-মূলের বাইরে)।
• ফায়ারফক্স ::part অভ্যন্তরীণ ছায়ার নাম (ধারক প্রশ্ন, কীফ্রেম) অ্যাক্সেস করতে দেয়।
• ফায়ারফক্স এবং সাফারি ছায়ার মূলে @counter-style সম্মান করে না।

মনে রাখবেন counter-reset , counter-set , counter-increment সামান্য ভিন্ন নিয়ম রয়েছে কারণ সেগুলি অন্তর্নিহিত নাম, এবং CSS বৈশিষ্ট্য ঘোষণা করার নিয়মগুলির একটি প্রতিষ্ঠিত এবং ভালভাবে পরীক্ষিত সেট রয়েছে।

উপসংহার

খারাপ খবর হল যে CSS নাম এবং ছায়া DOM সংক্রান্ত বর্তমান ইন্টারপ স্টেটের স্ন্যাপশট পরীক্ষা করার সময়, অভিজ্ঞতাটি অসঙ্গতিপূর্ণ এবং বগি। আমরা এখানে যে বৈশিষ্ট্যগুলি পরীক্ষা করেছি তার কোনোটিই ব্রাউজার জুড়ে এবং স্পেস অনুযায়ী ধারাবাহিকভাবে আচরণ করে না। ভাল খবর হল অভিজ্ঞতা সামঞ্জস্যপূর্ণ করতে ডেল্টা হল বাগ এবং বিশেষ সমস্যাগুলির একটি সীমিত তালিকা৷ এর এটা ঠিক করা যাক! ইতিমধ্যে, এই ওভারভিউ আশা করি সাহায্য করতে পারে যদি আপনি এই নিবন্ধে বর্ণিত অসঙ্গতির সাথে লড়াই করছেন।