CSS @property রুল

CSS @property রুল

@property এই নিয়মটি কাস্টম CSS অ্যাট্রিবিউট সরাসরি স্টাইল সংযোজনে ব্যবহার করে, কোনও জাভাস্ক্রিপ্ট চালাতে হয় না。

@property এই নিয়মটি ডাটা টাইপ চেক এবং সীমাবদ্ধতা, ডিফল্ট মান সংজ্ঞায়ন এবং অ্যাট্রিবিউটটি কিভাবে মান ধরতে পারে না তা নির্দিষ্ট করে

কাস্টম অ্যাট্রিবিউটের ইনস্ট্যান্স নির্দিষ্ট করুন:

@property --myColor {
  syntax: "<color>";
  inherits: true;
  initial-value: lightgray;
}

উপরের নির্দিষ্টকরণ এটি মানে --myColor এটি একটি রঙ অ্যাট্রিবিউট, যা অভিভাবক ইলেক্ট্রনের মান ধরতে পারে, এর ডিফল্ট মান lightgray হয়。

কাস্টম অ্যাট্রিবিউট ব্যবহার করতে CSS-এ, আমরা ব্যবহার করি var() ফাংশন:

body {
  background-color: var(--myColor);
}

ব্যবহার @property ফায়দা:

• টাইপ চেকডিফল্ট মান সংজ্ঞায়িত করা: কাস্টম অ্যাট্রিবিউটের ডাটা টাইপ সংজ্ঞায়িত করা উচিত, যেমন <number>、<color>、<length>। ত্রুটি এড়ানো এবং কাস্টম অ্যাট্রিবিউট সঠিকভাবে ব্যবহার করার নিশ্চয়তা দেয়
• ডিফল্ট মান সংজ্ঞায়িত করাডিফল্ট মান সংজ্ঞায়িত করা: কাস্টম অ্যাট্রিবিউটের জন্য ডিফল্ট মান সংজ্ঞায়িত করা হয়, এটি নিশ্চিত করে যে পরবর্তীতে অবৈধ মান সংজ্ঞায়িত হলে, ব্রাউজার সংজ্ঞায়িত প্রতিকারণ মান ব্যবহার করবে
• উত্তরাধিকার হস্তক্ষেপ সংজ্ঞায়িত করাকাস্টম অ্যাট্রিবিউট তার পিতৃ ইলেকট্রনের মান উত্তরাধিকার করতে পারে কি না নির্দিষ্ট করা উচিত

ব্রাউজার সমর্থন

টেবিলের সংখ্যা এই রুলটির পূর্ণ সমর্থনকারী প্রথম ব্রাউজার সংস্করণকে ইঙ্গিত করে

সহজ @property ইনস্ট্যান্স

এই উদাহরণে, আমরা দুটি কাস্টম অ্যাট্রিবিউট সংজ্ঞায়িত করি:--my-bg-color এবং --my-txt-color। তারপর, div background-color এবং color এখানে কাস্টম অ্যাট্রিবিউট ব্যবহার করা হয়:

ইনস্ট্যান্স

@property --my-bg-color {
  syntax: "<color>";
  inherits: true;
  initial-value: lightgray;
}
@property --my-txt-color {
  syntax: "<color>";
  inherits: true;
  initial-value: darkblue;
}
div {
  width: 300px;
  height: 150px;
  padding: 15px;
  background-color: var(--my-bg-color);
  color: var(--my-txt-color);
}

স্বয়ং প্রয়াস করুন

আরেকটি @property ইনস্ট্যান্স

এই উদাহরণে, আমরা <div> ইলেকট্রনের পরিমাণ কাস্টম অ্যাট্রিবিউট ব্যবহার করি। তারপর, আমরা .fresh এবং .nature শ্রেণীতে কাস্টম অ্যাট্রিবিউট সংজ্ঞায়িত হয় (অন্য রঙ সেট করা হয়), ফলাফল খুবই ভালো:

ইনস্ট্যান্স

@property --my-bg-color {
  syntax: "<color>";
  inherits: true;
  initial-value: lightgray;
}
div {
  width: 300px;
  height: 150px;
  padding: 15px;
  background-color: var(--my-bg-color);
}
.fresh {
  --my-bg-color: #ff6347;
}
.nature {
  --my-bg-color: rgb(120, 180, 30);
}

স্বয়ং প্রয়াস করুন

ধরনের পরীক্ষা এবং প্রতিকারণ মান দ্বারা ত্রুটি এড়ানো হয়

এই উদাহরণে, আমরা .nature শ্রেণীতে কাস্টম অ্যাট্রিবিউট সংখ্যার মান হিসাবে সংজ্ঞায়িত হয়। এটি অবৈধ, ব্রাউজার শ্রেণীতে initial-value অ্যাট্রিবিউটের মধ্যে সংজ্ঞায়িত প্রতিকারণ রঙ (lightgray):

ইনস্ট্যান্স

@property --my-bg-color {
  syntax: "<color>";
  inherits: true;
  initial-value: lightgray;
}
div {
  width: 300px;
  height: 150px;
  padding: 15px;
  background-color: var(--my-bg-color);
}
.fresh {
  --my-bg-color: #ff6347;
}
.nature {
  --my-bg-color: 2;
}

স্বয়ং প্রয়াস করুন

inherits মান ব্যবহার করব

এই উদাহরণে, আমরা inherits মান সংজ্ঞায়িত হয় falseএটি মানে কাস্টম অ্যাট্রিবিউট তার পিতৃ ইলেকট্রনের মান উত্তরাধিকার করবে না। ফলাফল দেখুন：

ইনস্ট্যান্স

@property --my-bg-color {
  syntax: "<color>";
  inherits: false;
  initial-value: lightgray;
}

স্বয়ং প্রয়াস করুন

আগামী উদাহরণটি হবে inherits মান সংজ্ঞায়িত হয় trueএটি মানে কাস্টম অ্যাট্রিবিউট তার পিতৃ ইলেকট্রনের মান উত্তরাধিকার করবে। ফলাফল দেখুন：

ইনস্ট্যান্স

@property --my-bg-color {
  syntax: "<color>";
  inherits: true;
  initial-value: lightgray;
}

স্বয়ং প্রয়াস করুন

@property দ্বারা সমস্ত এনিমেশনকে সমস্ত গতিশীল করুন

ব্যবহার @property এই নিয়মটি আগে এনিমেশনযোগ্য না থাকা কনটেন্টকে এনিমেশন করা সম্ভব করে দেয়: গ্রেডেশন। নিচের ইনস্ট্যান্স দেখুন:

ইনস্ট্যান্স

গ্রেডেশনের জন্য দুটি স্বনির্দিষ্ট প্রতিভা নির্দিষ্ট করুন:

@property --startColor {
  syntax: "<color>";
  initial-value: #EADEDB;
  inherits: false;
}
@property --endColor {
  syntax: "<color>";
  initial-value: #BC70A4;
  inherits: false;
}

স্বয়ং প্রয়াস করুন

CSS @property রুল