কাস্টম বৈশিষ্ট্য

বলুন আপনি আপনার সাইটের জন্য কিছু প্রাথমিক শৈলী তৈরি করছেন এবং আপনি আপনার CSS-এ কিছু মান পুনরাবৃত্তি করতে দেখেছেন। আপনি আপনার প্রাথমিক রঙ হিসাবে dodgerblue ব্যবহার করছেন, এবং আপনি সেটিকে বোতামের বর্ডার, লিঙ্ক টেক্সট, হেডার ব্যাকগ্রাউন্ডে যোগ করছেন এবং সাইটের অন্যান্য অংশের জন্য সেই নীল রঙের কিছু রূপ বাছাই করার জন্য একটি ডিজাইন টুল ব্যবহার করছেন। তারপরে, আপনি একটি স্টাইল গাইড পাবেন এবং প্রাথমিক রঙটি এখন oklch(70% 0.15 270) ।

কাস্টম বৈশিষ্ট্য, বা CSS ভেরিয়েবল, আপনাকে আপনার CSS-এ মানগুলি সংগঠিত এবং পুনরায় ব্যবহার করার অনুমতি দেয়, যাতে আপনার শৈলীগুলি আরও নমনীয় এবং বোঝা সহজ হয়।

বৈশিষ্ট্য তৈরি করা

একটি সম্পত্তি তৈরি করার সবচেয়ে সহজ উপায় হল আপনার সংজ্ঞায়িত একটি নাম সহ একটি নতুন সম্পত্তিতে একটি মান সেট করা।

.card {
  --base-size: 1em;
}

সমস্ত সম্পত্তির নাম দুটি ড্যাশ দিয়ে শুরু করতে হবে। এটি আপনাকে একটি কাস্টম মানের জন্য একটি বিদ্যমান CSS সম্পত্তির নাম ব্যবহার করার চেষ্টা করা থেকে বাধা দেয়। CSS স্পেসিফিকেশন কখনই এমন একটি প্রপার্টি যোগ করবে না যা দুটি ড্যাশ দিয়ে শুরু হয়।

এই বৈশিষ্ট্যটি তারপর var() ফাংশন দিয়ে অ্যাক্সেস করা যেতে পারে। এই উদাহরণটি --base-size মান দ্বিগুণ করতে .card-title মধ্যে ফন্টের আকার সেট করে।

.card .card-title {
  font-size: calc(2 * var(--base-size));
}

একটি কাস্টম সম্পত্তি ব্যবহার করে

আপনি যেমন দেখেছেন, আপনি var() ফাংশনের সাথে একটি কাস্টম সম্পত্তির মান ব্যবহার করতে পারেন। আপনি var() ফাংশনটি মানগুলিতে ব্যবহার করতে পারেন, তবে মিডিয়া কোয়েরিতে নয়। এগুলি অন্যান্য CSS ফাংশনের আর্গুমেন্ট হিসাবে বিশেষভাবে কার্যকর।

ফলব্যাকস

যদি আপনি এমন একটি কাস্টম সম্পত্তি ব্যবহার করার চেষ্টা করেন যার একটি মান সেট নেই? var() ফাংশনটি একটি দ্বিতীয় মান নেয় যা একটি ফলব্যাক মান হিসাবে ব্যবহার করা হবে। ফলব্যাক মান এমনকি একটি নেস্টেড var() সহ অন্য কাস্টম সম্পত্তি হতে পারে।

#my-element {
  background: var(
    --alert-variant-background,
    var(--alert-primary-background)
  );
}

অবৈধ মান

যদি একটি কাস্টম প্রপার্টি একটি অবৈধ মানের সমাধান করে, উদাহরণস্বরূপ, background-color প্রপার্টির জন্য 1em এর একটি মান, সেই সম্পত্তির জন্য সেই উপাদানের অন্যান্য বৈধ ঘোষণা ব্যবহার করা হবে না। এর কারণ হল একটি মান গণনা করার সময় অন্যান্য ঘোষণা বাতিল না করা পর্যন্ত একটি মান অবৈধ কিনা ব্রাউজার জানতে পারে না। পরিবর্তে, ব্যবহৃত মান একটি উত্তরাধিকারসূত্রে প্রাপ্ত বা প্রাথমিক মান হবে।

.content {
  background-color: blue;
}

.content.invalid {
  --length: 2rem;
  background-color: var(--length);
}

পূর্ববর্তী উদাহরণে, .invalid উপাদানটির একটি নীল পটভূমি থাকবে না। পরিবর্তে, কারণ background-color উত্তরাধিকারসূত্রে পাওয়া যায় না, মানটি transparent হবে, যা এর প্রাথমিক মান।

ওভাররাইডিং এবং উত্তরাধিকার

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

কাস্টম বৈশিষ্ট্যগুলি ক্যাসকেড দ্বারা নির্ধারিত হয়, তাই এটি আরও নির্দিষ্ট নির্বাচক দ্বারা ওভাররাইড করা যেতে পারে।

@property এর সাথে আরও নিয়ন্ত্রণ

একটি মান সেট করে তৈরি করা একটি কাস্টম সম্পত্তি যে কোনো ধরনের হতে পারে, এবং উত্তরাধিকারসূত্রে পাওয়া যায়। একটি কাস্টম সম্পত্তির উপর আরো নিয়ন্ত্রণের জন্য, আপনি @property নিয়ম ব্যবহার করতে পারেন।

পূর্বে তৈরি করা আমাদের --base-size সম্পত্তি এই @property ঘোষণার সমতুল্য হবে।

@property --base-size {
  syntax: "*";
  inherits: true;
  initial-value: 18px;
}

syntax মান সিএসএস মানগুলির ধরন সেট করে যা সম্পত্তির জন্য বৈধ। আপনি যদি সেই সম্পত্তিতে একটি ভিন্ন প্রকার সেট করেন তবে এটি অবৈধ হবে এবং প্রাথমিক মান বা উত্তরাধিকার সূত্রে প্রাপ্ত মান ক্যাসকেডে উচ্চতর সেট করা হবে।

আপনি যখন @property ব্যবহার করে একটি কাস্টম সম্পত্তি তৈরি করেন, আপনি inherit: false দিয়ে উত্তরাধিকার নিষ্ক্রিয় করতে পারেন। উত্তরাধিকার অক্ষম সহ একটি কাস্টম সম্পত্তির মান ওভাররাইড করা নির্বাচিত উপাদানের জন্য এটিকে পরিবর্তন করে, কিন্তু এর শিশুদের জন্য নয়। এটি প্রায়ই উপযোগী হয় যখন একাধিক নির্বাচক একই উপাদানকে লক্ষ্য করে।

initial-value সম্পত্তির মান সেট করে, যদি না এটি পরে পরিবর্তন করা হয়। যতক্ষণ না সিনট্যাক্স * না হয়, যার অর্থ যেকোনো CSS প্রকার, @property অবশ্যই একটি initial-value সেট করতে হবে। এটি নিশ্চিত করে যে সম্পত্তিতে সর্বদা নির্দিষ্ট সিনট্যাক্সের একটি মান থাকবে এবং কখনই অনির্ধারিত হবে না।

জাভাস্ক্রিপ্ট দিয়ে কাস্টম বৈশিষ্ট্য আপডেট করা হচ্ছে

একটি উপাদানে একটি কাস্টম সম্পত্তির মান জাভাস্ক্রিপ্ট ব্যবহার করে আপডেট করা যেতে পারে, যা আপনি আপনার সাইটের শৈলীগুলি গতিশীলভাবে আপডেট করতে ব্যবহার করতে পারেন৷

const element = document.getElementById("my-button");
getComputedStyle(element).setPropertyValue("--color", orange);

এই উদাহরণটি #my-button উপাদানে স্টাইল ট্যাগ আপডেট করে এবং DevTools-এ এটি পরিদর্শন করা আপনাকে দেখায়:

<button id="my-button" style="--color: orange">Click me</button>

পূর্ববর্তী উদাহরণে, আপনি দেখতে পারেন কিভাবে আপনি কাস্টম HTML গুণাবলীতে সংরক্ষিত ডেটা অ্যাক্সেস করে কাস্টম বৈশিষ্ট্য সেট করতে পারেন। প্রতিটি বোতামে একটি নির্দিষ্ট রঙের মান সহ একটি data-color বৈশিষ্ট্য রয়েছে। --background কাস্টম প্রপার্টি বডি এলিমেন্টে সেট করা data-color মান রিসেট করা হয় যে কোনো বোতামে ক্লিক করা হয়।

আপনি একটি নির্দিষ্ট উপাদানে একটি সম্পত্তির মান পেতে getComputedStyle(element).getPropertyValue("--variable") ব্যবহার করতে পারেন। আপনার যুক্তি একটি ক্যাসকেড মান সাড়া প্রয়োজন হলে এটি দরকারী হতে পারে.