উত্তরাধিকার

সিএসএস পডকাস্ট - 005: উত্তরাধিকার

বলুন আপনি উপাদানগুলিকে একটি বোতামের মতো দেখতে কিছু সিএসএস লিখেছেন।

<a href="http://example.com" class="my-button">I am a button link</a> 
.my-button {   display: inline-block;   padding: 1rem 2rem;   text-decoration: none;   background: pink;   font: inherit;   text-align: center; }

তারপর আপনি বিষয়বস্তুর একটি নিবন্ধে একটি লিঙ্ক উপাদান যোগ করুন, যার একটি class মান .my-button । তবে একটি সমস্যা আছে, টেক্সটটি সেই রঙের নয় যা আপনি আশা করেছিলেন। এটা কিভাবে ঘটল?

কিছু CSS বৈশিষ্ট্য উত্তরাধিকারসূত্রে পাওয়া যায় যদি আপনি তাদের জন্য একটি মান নির্দিষ্ট না করেন। এই বোতামের ক্ষেত্রে, এটি এই CSS থেকে color উত্তরাধিকার সূত্রে পেয়েছে :

article a {   color: maroon; }

এই পাঠে আপনি শিখবেন কেন এটি ঘটে এবং কীভাবে উত্তরাধিকার একটি শক্তিশালী বৈশিষ্ট্য যা আপনাকে কম CSS লিখতে সহায়তা করে।

উত্তরাধিকার প্রবাহ

HTML এর এই স্নিপেটটি ব্যবহার করে কীভাবে উত্তরাধিকার কাজ করে তা দেখুন:

<html>   <body>     <article>       <p>Lorem ipsum dolor sit amet.</p>     </article>   </body> </html>

মূল উপাদান ( <html> ) কোন কিছুর উত্তরাধিকারী হবে না কারণ এটি নথির প্রথম উপাদান। এইচটিএমএল এলিমেন্টে কিছু CSS যোগ করুন এবং এটি ডকুমেন্টকে ক্যাসকেড করতে শুরু করে।

html {   color: lightslategray; }

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

body {   font-size: 1.2em; } 
p {   font-style: italic; }

শুধুমাত্র <p> এ ইটালিক টেক্সট থাকবে কারণ এটি গভীরতম নেস্টেড উপাদান। উত্তরাধিকার শুধুমাত্র নীচের দিকে প্রবাহিত হয়, মূল উপাদানগুলিতে ব্যাক আপ নয়।

কোন বৈশিষ্ট্য ডিফল্টভাবে উত্তরাধিকারসূত্রে প্রাপ্ত হয়?

সমস্ত সিএসএস বৈশিষ্ট্য ডিফল্টরূপে উত্তরাধিকারসূত্রে পাওয়া যায় না, তবে অনেকগুলি রয়েছে। রেফারেন্সের জন্য, এখানে সমস্ত সিএসএস বৈশিষ্ট্যের W3 রেফারেন্স থেকে নেওয়া ডিফল্টরূপে উত্তরাধিকারসূত্রে প্রাপ্ত বৈশিষ্ট্যগুলির সম্পূর্ণ তালিকা রয়েছে:

উত্তরাধিকার কিভাবে কাজ করে

প্রতিটি এইচটিএমএল উপাদানের প্রতিটি সিএসএস প্রপার্টি একটি প্রাথমিক মান সহ ডিফল্টরূপে সংজ্ঞায়িত থাকে। একটি প্রাথমিক মান হল একটি সম্পত্তি যা উত্তরাধিকারসূত্রে পাওয়া যায় না এবং ক্যাসকেড সেই উপাদানটির জন্য একটি মান গণনা করতে ব্যর্থ হলে ডিফল্ট হিসাবে দেখায়৷

যে বৈশিষ্ট্যগুলি উত্তরাধিকারসূত্রে নীচের দিকে ক্যাসকেড হতে পারে এবং শিশু উপাদানগুলি একটি গণনা করা মান পাবে যা তার পিতামাতার মানকে উপস্থাপন করে৷ এর মানে হল যে যদি একজন অভিভাবকের font-weight bold জন্য সেট করা থাকে তবে সমস্ত চাইল্ড এলিমেন্ট বোল্ড হবে, যদি না তাদের font-weight একটি ভিন্ন মান সেট করা হয়, অথবা ব্যবহারকারী এজেন্ট স্টাইলশীটে সেই উপাদানের জন্য font-weight একটি মান থাকে।

কিভাবে সুস্পষ্টভাবে উত্তরাধিকারী এবং উত্তরাধিকার নিয়ন্ত্রণ করতে হয়

উত্তরাধিকার উপাদানগুলিকে অপ্রত্যাশিত উপায়ে প্রভাবিত করতে পারে তাই CSS-এর কাছে এটির সাথে সাহায্য করার জন্য সরঞ্জাম রয়েছে।

inherit কীওয়ার্ড

আপনি inherit কীওয়ার্ড দিয়ে যে কোনো সম্পত্তিকে তার পিতামাতার গণনাকৃত মান উত্তরাধিকারী করতে পারেন। এই কীওয়ার্ড ব্যবহার করার একটি দরকারী উপায় হল ব্যতিক্রম তৈরি করা।

strong {   font-weight: 900; }

এই CSS স্নিপেটটি ডিফল্ট bold মানের পরিবর্তে 900 এর font-weight সমস্ত <strong> উপাদান সেট করে, যা font-weight: 700 এর সমতুল্য হবে।

.my-component {   font-weight: 500; }

.my-component ক্লাস এর পরিবর্তে font-weight 500 সেট করে। .my-component ভিতরে <strong> উপাদানগুলি তৈরি করতে font-weight: 500 যোগ করুন: 

.my-component strong {   font-weight: inherit; }

এখন, .my-component ভিতরের <strong> উপাদানগুলির font-weight 500 হবে।

আপনি স্পষ্টভাবে এই মানটি সেট করতে পারেন, কিন্তু আপনি যদি ভবিষ্যতে .my-component পরিবর্তনের inherit এবং CSS ব্যবহার করেন, আপনি গ্যারান্টি দিতে পারেন যে আপনার <strong> স্বয়ংক্রিয়ভাবে এটির সাথে আপ টু ডেট থাকবে।

initial কীওয়ার্ড

উত্তরাধিকার আপনার উপাদানগুলির সাথে সমস্যা সৃষ্টি করতে পারে এবং initial আপনাকে একটি শক্তিশালী রিসেট বিকল্প প্রদান করে।

আপনি আগে শিখেছেন যে প্রতিটি সম্পত্তি CSS-এ একটি ডিফল্ট মান আছে। initial কীওয়ার্ডটি সেই প্রারম্ভিক, ডিফল্ট মানটিতে একটি সম্পত্তি সেট করে। 

aside strong {   font-weight: initial; }

এই স্নিপেটটি একটি <aside> উপাদানের ভিতরে সমস্ত <strong> উপাদান থেকে বোল্ড ওজন সরিয়ে দেবে এবং পরিবর্তে, তাদের স্বাভাবিক ওজন তৈরি করবে, যা প্রাথমিক মান।

unset কীওয়ার্ড

কোনো সম্পত্তি ডিফল্টভাবে উত্তরাধিকার সূত্রে প্রাপ্ত হলে বা না থাকলে unset প্রপার্টি ভিন্নভাবে আচরণ করে। যদি একটি সম্পত্তি ডিফল্টভাবে উত্তরাধিকারসূত্রে পাওয়া যায়, তাহলে unset কীওয়ার্ডটি inherit এর মতোই হবে। যদি সম্পত্তিটি ডিফল্টরূপে উত্তরাধিকারসূত্রে পাওয়া না হয়, তাহলে unset কীওয়ার্ডটি initial সমান।

ডিফল্টভাবে কোন সিএসএস বৈশিষ্ট্য উত্তরাধিকারসূত্রে পাওয়া যায় তা মনে রাখা কঠিন হতে পারে, unset সেই প্রসঙ্গে সহায়ক হতে পারে। উদাহরণস্বরূপ, color ডিফল্টরূপে উত্তরাধিকারসূত্রে পাওয়া যায়, কিন্তু margin নয়, তাই আপনি এটি লিখতে পারেন: 

/* Global color styles for paragraph in authored CSS */ p {   margin-top: 2em;   color: goldenrod; }  /* The p needs to be reset in asides, so you can use unset */ aside p {   margin: unset;   color: unset; }

এখন, margin সরানো হয়েছে এবং color উত্তরাধিকার সূত্রে প্রাপ্ত গণনাকৃত মান হিসাবে ফিরে আসে।

আপনি all সম্পত্তির সাথেও unset মান ব্যবহার করতে পারেন। পূর্ববর্তী উদাহরণে ফিরে যাওয়া, গ্লোবাল p শৈলীগুলি অতিরিক্ত কয়েকটি বৈশিষ্ট্য পেলে কী হবে? শুধুমাত্র margin এবং color জন্য যে নিয়ম সেট করা হয়েছিল তা প্রযোজ্য হবে। 

/* Global color styles for paragraph in authored CSS */ p {     margin-top: 2em;     color: goldenrod;     padding: 2em;     border: 1px solid; }  /* Not all properties are accounted for anymore */ aside p {     margin: unset;     color: unset; }

আপনি যদি aside p নিয়মটি all: unset , ভবিষ্যতে p এ কোন গ্লোবাল স্টাইল প্রয়োগ করা হয় তাতে কিছু যায় আসে না, সেগুলি সর্বদা আনসেট থাকবে। 

aside p {     margin: unset;     color: unset;     all: unset; }

revert কীওয়ার্ড

আপনি ক্যাসকেডের পাঠে যেমন শিখেছেন, শৈলীগুলি বিভিন্ন উত্স থেকে আসে—ব্যবহারকারী এজেন্ট বেস শৈলী, ব্যবহারকারীর পছন্দ শৈলী এবং আপনার রচিত শৈলী। revert কীওয়ার্ডটি সেই শৈলীগুলিকে পূর্বাবস্থায় ফিরিয়ে আনে যা একই মূলে সেট করা হয় যেটি revert কীওয়ার্ড ব্যবহার করা হয়।

আপনি যখন একটি স্টাইল সেট করেন তখন এটি কার্যকর, কিন্তু কিছু ক্ষেত্রে এটি প্রয়োগ করতে চান না। inherit , initial , এবং unset একটি শৈলীর মান কীভাবে গণনা করা যায় তা উল্লেখ করার সময়, revert শুধুমাত্র নির্দিষ্ট করে যে আপনার লেখা অন্যান্য শৈলী প্রযোজ্য নয়। 

p {   padding: 2em; }  aside p {   padding: revert; }

এই স্নিপেটটি <p> উপাদানগুলিকে একটি প্যাডিং দেয়, কিন্তু যখন <p> উপাদানটি একটি <aside> এর ভিতরে থাকে, এটি মোটেও একটি padding নির্দিষ্ট করে না। পরিবর্তে, এটি একটি ব্যবহারকারীর পছন্দ শৈলী (যদি একটি সেট করা থাকে) বা ব্যবহারকারী এজেন্ট বেস শৈলীতে ফিরে আসে।

revert-layer কীওয়ার্ড

ক্যাসকেড স্তরগুলি আপনার শৈলীগুলিকে সংগঠিত করার জন্য একটি দরকারী উপায় প্রদান করে এবং ক্যাসকেডের লেখক উত্সের মধ্যে আপনার শৈলীকে অগ্রাধিকার দেয়৷ revert-layer কীওয়ার্ডটি revert অনুরূপ, কিন্তু নির্দিষ্ট করার পরিবর্তে যে আপনার লেখক শৈলীগুলির কোনোটি একটি সম্পত্তির জন্য প্রয়োগ করা উচিত নয়, এটি শুধুমাত্র বর্তমান স্তরের শৈলীগুলিকে পূর্বাবস্থায় ফিরিয়ে আনে৷

আপনি যদি একটি তৃতীয় পক্ষের UI লাইব্রেরি ব্যবহার করেন, একটি দরকারী প্যাটার্ন হল এটি একটি স্তরে আমদানি করা, এবং একটি উচ্চ অগ্রাধিকার স্তরে কোনো ওভাররাইড যুক্ত করা৷ তারপর, আপনি revert-layer ব্যবহার করে একটি ওভাররাইড সরাতে পারেন এবং এটি পরিবর্তে UI লাইব্রেরির ডিফল্ট ব্যবহার করবে।

যদি অন্য কোন স্তর সম্পত্তির জন্য একটি মান নির্দিষ্ট করে না, তাহলে এটি revert মত আচরণ করবে এবং পূর্বের উৎস থেকে একটি মান ব্যবহার করবে।

আপনার উপলব্ধি পরীক্ষা করুন

উত্তরাধিকার সম্পর্কে আপনার জ্ঞান পরীক্ষা করুন

নিচের কোন বৈশিষ্ট্যগুলি ডিফল্টভাবে উত্তরাধিকার সূত্রে প্রাপ্ত হয়?

animation
অ্যানিমেশন বাচ্চাদের কাছে যায় না।
font-size
🎉
color
🎉
text-align
🎉
line-height
🎉

কোন মান inherit হিসাবে আচরণ করে যদি না উত্তরাধিকারী হওয়ার মতো কিছু না থাকে এবং তারপর initial মতো আচরণ করে?

reset
একটি বৈধ মান নয়, আবার চেষ্টা করুন!
unset
🎉
superset
একটি বৈধ মান নয়, আবার চেষ্টা করুন!

সম্পদ