সিএসএস @property নিয়ম: কাস্টম প্রপার্টির টাইপ সংজ্ঞায়নের শক্তি উন্মোচন

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

সিএসএস কাস্টম প্রপার্টি (ভেরিয়েবল) কী?

@property নিয়মটি সম্পর্কে জানার আগে, সিএসএস কাস্টম প্রপার্টি, যা সিএসএস ভেরিয়েবল নামেও পরিচিত, তা বোঝা অপরিহার্য। কাস্টম প্রপার্টি আপনাকে আপনার সিএসএস-এর মধ্যে পুনরায় ব্যবহারযোগ্য মান (value) সংজ্ঞায়িত করতে দেয়, যা আপনার স্টাইলশিটকে আরও রক্ষণাবেক্ষণযোগ্য এবং আপডেট করা সহজ করে তোলে। এগুলো --variable-name সিনট্যাক্স ব্যবহার করে ঘোষণা করা হয় এবং var() ফাংশন ব্যবহার করে অ্যাক্সেস করা হয়।

উদাহরণ:

:root {
  --primary-color: #007bff; /* একটি বিশ্বব্যাপী সংজ্ঞায়িত প্রাইমারি রঙ */
  --secondary-color: #6c757d;
}

a {
  color: var(--primary-color);
  text-decoration: none;
}

button {
  background-color: var(--primary-color);
  color: white;
  border: none;
  padding: 10px 20px;
}

এই উদাহরণে, --primary-color এবং --secondary-color হলো কাস্টম প্রপার্টি। যদি আপনার পুরো ওয়েবসাইট জুড়ে প্রাইমারি রঙ পরিবর্তন করার প্রয়োজন হয়, তবে আপনাকে কেবল এক জায়গায় এটি আপডেট করতে হবে – :root সিলেক্টরে।

সাধারণ কাস্টম প্রপার্টির সীমাবদ্ধতা

যদিও কাস্টম প্রপার্টিগুলো অত্যন্ত দরকারী, তাদের একটি উল্লেখযোগ্য সীমাবদ্ধতা রয়েছে: এগুলো মূলত স্ট্রিং হিসাবে বিবেচিত হয়। এর মানে হলো, সিএসএস সহজাতভাবে জানে না যে একটি কাস্টম প্রপার্টি কোন ধরনের মান ধারণ করে (যেমন, সংখ্যা, রঙ, দৈর্ঘ্য)। যদিও ব্রাউজার টাইপ অনুমান করার চেষ্টা করে, এটি অপ্রত্যাশিত আচরণের কারণ হতে পারে, বিশেষ করে যখন অ্যানিমেশন এবং ট্রানজিশনের ক্ষেত্রে আসে। উদাহরণস্বরূপ, রঙ ধারণকারী একটি কাস্টম প্রপার্টি অ্যানিমেট করার চেষ্টা করলে তা প্রত্যাশা অনুযায়ী কাজ নাও করতে পারে, বা বিভিন্ন ব্রাউজারে ধারাবাহিকভাবে কাজ নাও করতে পারে।

@property নিয়মের পরিচিতি

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

@property নিয়মের সিনট্যাক্স

@property নিয়মের বেসিক সিনট্যাক্সটি নিম্নরূপ:

@property --property-name {
  syntax: ;
  inherits: ;
  initial-value: ;
}

আসুন নিয়মটির প্রতিটি অংশ ভেঙে দেখি:

• --property-name: এটি আপনার সংজ্ঞায়িত কাস্টম প্রপার্টির নাম। এটি অবশ্যই দুটি হাইফেন (--) দিয়ে শুরু হতে হবে।
• syntax: এটি কাস্টম প্রপার্টির মানের প্রত্যাশিত টাইপ নির্ধারণ করে। এটি একটি স্ট্রিং যা কাস্টম প্রপার্টির জন্য বৈধ মান(গুলো) বর্ণনা করে। সাধারণ সিনট্যাক্স মানগুলোর মধ্যে রয়েছে:
• *: যেকোনো মানের সাথে মেলে। যদি কোনো সিনট্যাক্স নির্দিষ্ট করা না থাকে তবে এটিই ডিফল্ট। এটি সাবধানে ব্যবহার করুন কারণ এটি টাইপ চেকিং এড়িয়ে যায়।
• <color>: যেকোনো বৈধ সিএসএস রঙের মানের সাথে মেলে (যেমন, #ff0000, rgb(255, 0, 0), red)।
• <length>: যেকোনো বৈধ সিএসএস দৈর্ঘ্য মানের সাথে মেলে (যেমন, 10px, 2em, 50%)।
• <number>: যেকোনো সংখ্যা মানের সাথে মেলে (যেমন, 1, 3.14, -2.5)।
• <integer>: যেকোনো পূর্ণসংখ্যা মানের সাথে মেলে (যেমন, 1, -5, 0)।
• <angle>: যেকোনো কোণ মানের সাথে মেলে (যেমন, 45deg, 0.5rad, 100grad)।
• <time>: যেকোনো সময় মানের সাথে মেলে (যেমন, 1s, 500ms)।
• <percentage>: যেকোনো শতাংশ মানের সাথে মেলে (যেমন, 50%, 100%)।
• <image>: যেকোনো ছবি মানের সাথে মেলে (যেমন, url(image.jpg), linear-gradient(...))।
• <string>: যেকোনো স্ট্রিং মানের সাথে মেলে (ডবল বা সিঙ্গেল কোটেশনে আবদ্ধ)।
• আপনি একাধিক টাইপ অনুমোদনের জন্য | ব্যবহার করে সিনট্যাক্স বর্ণনাকারীকে একত্রিত করতে পারেন (যেমন, <length> | <percentage>)।
• আপনি আরও জটিল সিনট্যাক্স সংজ্ঞায়িত করতে রেগুলার এক্সপ্রেশন ব্যবহার করতে পারেন। এটি CSS-ব্যাপী কীওয়ার্ড inherit, initial, unset, এবং revert কে বৈধ মান হিসাবে ব্যবহার করে যদি সিনট্যাক্স তাদের নির্দিষ্ট করে, এমনকি যদি সাধারণত সিনট্যাক্স টাইপের জন্য অনুমোদিত না হয়। উদাহরণ: '\d+px' '10px', '200px' এর মতো মান অনুমোদন করে, কিন্তু '10em' নয়। ডবল এস্কেপ করা ব্যাকস্ল্যাশটি নোট করুন।
• inherits: এটি একটি বুলিয়ান মান (true বা false) যা নির্দেশ করে কাস্টম প্রপার্টিটি তার প্যারেন্ট এলিমেন্ট থেকে তার মান ইনহেরিট করবে কিনা। ডিফল্ট মান হলো false।
• initial-value: এটি কাস্টম প্রপার্টির প্রাথমিক মান নির্ধারণ করে। এটি সেই মান যা প্রপার্টিটি পাবে যদি এটি কোনো এলিমেন্টে স্পষ্টভাবে সেট করা না থাকে। সংজ্ঞায়িত syntax এর সাথে মিলে এমন একটি বৈধ প্রাথমিক মান প্রদান করা গুরুত্বপূর্ণ। যদি কোনো প্রাথমিক মান প্রদান করা না হয়, এবং প্রপার্টিটি ইনহেরিট না করা হয়, তবে এর প্রাথমিক মান হবে অবৈধ প্রপার্টির মান।

@property নিয়মের ব্যবহারিক উদাহরণ

আসুন কিছু বাস্তব উদাহরণ দেখি যা দেখাবে কীভাবে @property নিয়মটি বাস্তব পরিস্থিতিতে ব্যবহার করা যেতে পারে।

উদাহরণ ১: একটি কাস্টম রঙ অ্যানিমেট করা

স্ট্যান্ডার্ড সিএসএস ট্রানজিশন ব্যবহার করে রঙ অ্যানিমেট করা কখনও কখনও কঠিন হতে পারে। @property নিয়ম এটি অনেক সহজ করে তোলে।

@property --brand-color {
  syntax: <color>;
  inherits: false;
  initial-value: #007bff;
}

:root {
  --brand-color: #007bff;
}

.element {
  background-color: var(--brand-color);
  transition: --brand-color 0.5s ease-in-out;
}

.element:hover {
  --brand-color: #28a745; /* হোভারে একটি সবুজ রঙে পরিবর্তন করুন */
}

এই উদাহরণে, আমরা --brand-color নামে একটি কাস্টম প্রপার্টি সংজ্ঞায়িত করি এবং নির্দিষ্ট করি যে এর সিনট্যাক্স হলো <color>। আমরা একটি প্রাথমিক মান #007bff (নীলের একটি শেড) সেট করি। এখন, যখন .element হোভার করা হয়, তখন পটভূমির রঙটি নীল থেকে সবুজে মসৃণভাবে পরিবর্তিত হয়।

উদাহরণ ২: একটি কাস্টম দৈর্ঘ্য অ্যানিমেট করা

দৈর্ঘ্য (যেমন, width, height) অ্যানিমেট করা @property নিয়মের আরেকটি সাধারণ ব্যবহারের ক্ষেত্র।

@property --element-width {
  syntax: <length>;
  inherits: false;
  initial-value: 100px;
}

.element {
  width: var(--element-width);
  transition: --element-width 0.3s ease-out;
}

.element:hover {
  --element-width: 200px;
}

এখানে, আমরা --element-width নামে একটি কাস্টম প্রপার্টি সংজ্ঞায়িত করি এবং নির্দিষ্ট করি যে এর সিনট্যাক্স হলো <length>। প্রাথমিক মান 100px সেট করা হয়েছে। যখন .element হোভার করা হয়, তখন এর প্রস্থ মসৃণভাবে 100px থেকে 200px এ পরিবর্তিত হয়।

উদাহরণ ৩: একটি কাস্টম প্রোগ্রেস বার তৈরি করা

@property নিয়মটি অ্যানিমেশনের উপর আরও বেশি নিয়ন্ত্রণসহ কাস্টম প্রোগ্রেস বার তৈরি করতে ব্যবহার করা যেতে পারে।

@property --progress {
  syntax: <number>;
  inherits: false;
  initial-value: 0;
}

.progress-bar {
  width: 200px;
  height: 10px;
  background-color: #eee;
}

.progress-bar::before {
  content: '';
  display: block;
  width: calc(var(--progress) * 1%);
  height: 100%;
  background-color: #007bff;
  transition: --progress 0.3s ease-in-out;
}

.progress-bar[data-progress="50"]::before {
  --progress: 50;
}

.progress-bar[data-progress="100"]::before {
  --progress: 100;
}

এই উদাহরণে, আমরা --progress নামে একটি কাস্টম প্রপার্টি সংজ্ঞায়িত করি, যা অগ্রগতির শতাংশ নির্দেশ করে। এরপর আমরা calc() ফাংশন ব্যবহার করে --progress-এর মানের উপর ভিত্তি করে প্রোগ্রেস বারের প্রস্থ গণনা করি। .progress-bar এলিমেন্টে data-progress অ্যাট্রিবিউট সেট করে, আমরা অগ্রগতির স্তর নিয়ন্ত্রণ করতে পারি।

উদাহরণ ৪: কাস্টম প্রপার্টি দিয়ে থিমিং

@property নিয়মটি বিভিন্ন থিমের মধ্যে ট্রানজিশনের সময় আরও নির্ভরযোগ্য এবং অনুমানযোগ্য আচরণ প্রদান করে থিমিংকে উন্নত করে। একটি সাধারণ ডার্ক/লাইট থিম সুইচের জন্য নিম্নলিখিত উদাহরণটি বিবেচনা করুন:

@property --bg-color {
    syntax: <color>;
    inherits: false;
    initial-value: #ffffff; /* লাইট থিমের ডিফল্ট */
}

@property --text-color {
    syntax: <color>;
    inherits: false;
    initial-value: #000000; /* লাইট থিমের ডিফল্ট */
}

:root {
    --bg-color: #ffffff;
    --text-color: #000000;
    transition: --bg-color 0.3s, --text-color 0.3s;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
}

.dark-theme {
    --bg-color: #333333; /* ডার্ক থিম */
    --text-color: #ffffff;
}

@property নিয়ম দ্বারা --bg-color এবং --text-color সংজ্ঞায়িত করার মাধ্যমে, থিমগুলোর মধ্যে ট্রানজিশন সংজ্ঞায়িত টাইপ ছাড়া সাধারণ কাস্টম প্রপার্টি ব্যবহার করার তুলনায় মসৃণ এবং আরও নির্ভরযোগ্য হবে।

ব্রাউজার সামঞ্জস্যতা

২০২৩ সালের শেষের দিকে, আধুনিক ব্রাউজার যেমন ক্রোম, ফায়ারফক্স, সাফারি এবং এজ-এ @property নিয়মের জন্য ব্রাউজার সমর্থন সাধারণত ভালো। তবে, আপনার টার্গেট দর্শকদের এই ফিচারের জন্য পর্যাপ্ত সমর্থন আছে কিনা তা নিশ্চিত করতে Can I Use (caniuse.com) এর মতো ওয়েবসাইটগুলোতে সর্বশেষ ব্রাউজার সামঞ্জস্যতার তথ্য পরীক্ষা করা সর্বদা একটি ভালো অভ্যাস।

যদি আপনার পুরানো ব্রাউজার সমর্থন করার প্রয়োজন হয় যা @property নিয়ম সমর্থন করে না, তবে আপনি জাভাস্ক্রিপ্ট দিয়ে ফিচার সনাক্তকরণ ব্যবহার করতে পারেন এবং ফলব্যাক সমাধান প্রদান করতে পারেন। উদাহরণস্বরূপ, আপনি জাভাস্ক্রিপ্ট ব্যবহার করে ব্রাউজারটি CSS.registerProperty (@property এর সাথে সম্পর্কিত জাভাস্ক্রিপ্ট API) সমর্থন করে কিনা তা সনাক্ত করতে পারেন এবং যদি এটি সমর্থিত না হয় তবে বিকল্প স্টাইল প্রয়োগ করতে পারেন।

@property নিয়ম ব্যবহারের সেরা অনুশীলন

এখানে @property নিয়ম ব্যবহার করার সময় মনে রাখার জন্য কিছু সেরা অনুশীলন রয়েছে:

• সিনট্যাক্স সাবধানে সংজ্ঞায়িত করুন: আপনার কাস্টম প্রপার্টির জন্য সবচেয়ে উপযুক্ত সিনট্যাক্স মানটি বেছে নিন। এটি ত্রুটি প্রতিরোধ করতে এবং আপনার সিএসএস প্রত্যাশা অনুযায়ী আচরণ করে তা নিশ্চিত করতে সাহায্য করবে।
• প্রাথমিক মান প্রদান করুন: আপনার কাস্টম প্রপার্টির জন্য সর্বদা একটি initial-value প্রদান করুন। এটি নিশ্চিত করে যে প্রপার্টিটির একটি বৈধ মান আছে এমনকি যদি এটি কোনো এলিমেন্টে স্পষ্টভাবে সেট করা না থাকে।
• ইনহেরিটেন্স বিবেচনা করুন: আপনার কাস্টম প্রপার্টিটি তার প্যারেন্ট এলিমেন্ট থেকে তার মান ইনহেরিট করবে কিনা তা সাবধানে চিন্তা করুন। বেশিরভাগ ক্ষেত্রে, inherits কে false সেট করা ভালো, যদি না আপনার ইনহেরিটেন্স সক্ষম করার কোনো নির্দিষ্ট কারণ থাকে।
• বর্ণনামূলক প্রপার্টির নাম ব্যবহার করুন: আপনার কাস্টম প্রপার্টির জন্য বর্ণনামূলক নাম বেছে নিন যা তাদের উদ্দেশ্য পরিষ্কারভাবে নির্দেশ করে। এটি আপনার সিএসএসকে আরও পঠনযোগ্য এবং রক্ষণাবেক্ষণযোগ্য করে তুলবে। উদাহরণস্বরূপ, --color এর পরিবর্তে, --primary-button-color ব্যবহার করুন।
• সম্পূর্ণভাবে পরীক্ষা করুন: আপনার সিএসএস বিভিন্ন ব্রাউজার এবং ডিভাইসে পরীক্ষা করুন যাতে এটি প্রত্যাশা অনুযায়ী কাজ করে। অ্যানিমেশন এবং ট্রানজিশনের প্রতি বিশেষ মনোযোগ দিন, কারণ এই ক্ষেত্রগুলোতেই @property নিয়মের সবচেয়ে বেশি প্রভাব পড়তে পারে।
• আপনার কোড ডকুমেন্ট করুন: আপনার কাস্টম প্রপার্টির উদ্দেশ্য এবং কীভাবে সেগুলো ব্যবহার করা হয় তা ব্যাখ্যা করতে আপনার সিএসএস-এ মন্তব্য যোগ করুন। এটি অন্যান্য ডেভেলপারদের (এবং আপনার ভবিষ্যতের নিজেকে) আপনার কোড বুঝতে সহজ করে তুলবে।

অ্যাক্সেসিবিলিটি বিবেচনা

@property নিয়ম ব্যবহার করার সময়, অ্যাক্সেসিবিলিটি বিবেচনা করা গুরুত্বপূর্ণ। নিশ্চিত করুন যে আপনার অ্যানিমেশন এবং ট্রানজিশনগুলো জ্ঞানীয় প্রতিবন্ধী ব্যবহারকারীদের জন্য খুব বেশি বিভ্রান্তিকর বা দিকভ্রষ্টকারী নয়। ফ্ল্যাশ বা স্ট্রোব করে এমন অ্যানিমেশন ব্যবহার করা থেকে বিরত থাকুন, কারণ এগুলো কিছু ব্যক্তির মধ্যে খিঁচুনি ঘটাতে পারে।

এছাড়াও, নিশ্চিত করুন যে আপনার রঙের পছন্দগুলো দৃষ্টি প্রতিবন্ধী ব্যবহারকারীদের জন্য পর্যাপ্ত কনট্রাস্ট প্রদান করে। আপনার রঙের সংমিশ্রণগুলো অ্যাক্সেসিবিলিটি নির্দেশিকা পূরণ করে কিনা তা যাচাই করতে আপনি WebAIM Contrast Checker এর মতো টুল ব্যবহার করতে পারেন।

বিশ্বব্যাপী বিবেচনা

বিশ্বব্যাপী দর্শকদের জন্য ওয়েবসাইট এবং অ্যাপ্লিকেশন তৈরি করার সময়, সাংস্কৃতিক পার্থক্য এবং স্থানীয়করণ বিবেচনা করা গুরুত্বপূর্ণ। একটি বিশ্বব্যাপী প্রেক্ষাপটে @property নিয়ম ব্যবহার করার সময় এখানে কিছু বিষয় মনে রাখতে হবে:

• পাঠ্যের দিক: লেআউট বা অবস্থান নিয়ন্ত্রণ করতে কাস্টম প্রপার্টি ব্যবহার করার সময় পাঠ্যের দিক (বাম-থেকে-ডান বনাম ডান-থেকে-বাম) সম্পর্কে সচেতন থাকুন। আপনার লেআউট বিভিন্ন পাঠ্যের দিকের সাথে সঠিকভাবে খাপ খায় তা নিশ্চিত করতে লজিক্যাল প্রপার্টি (যেমন, margin-left এর পরিবর্তে margin-inline-start) ব্যবহার করুন।
• সংখ্যা এবং তারিখের ফর্ম্যাট: বিভিন্ন দেশে ব্যবহৃত বিভিন্ন সংখ্যা এবং তারিখের ফর্ম্যাট সম্পর্কে সচেতন থাকুন। আপনার সিএসএস-এ নির্দিষ্ট ফর্ম্যাট হার্ডকোড করা থেকে বিরত থাকুন এবং পরিবর্তে ব্রাউজারের ডিফল্ট ফর্ম্যাটিংয়ের উপর নির্ভর করুন বা ব্যবহারকারীর লোকেল অনুযায়ী সংখ্যা এবং তারিখ ফর্ম্যাট করতে জাভাস্ক্রিপ্ট ব্যবহার করুন।
• রঙের প্রতীকতা: সচেতন থাকুন যে বিভিন্ন সংস্কৃতিতে রঙের বিভিন্ন অর্থ থাকতে পারে। এমন রঙ ব্যবহার করা থেকে বিরত থাকুন যা নির্দিষ্ট সংস্কৃতিতে আপত্তিকর বা অনুপযুক্ত বলে বিবেচিত হতে পারে।
• ভাষা সমর্থন: নিশ্চিত করুন যে আপনার কাস্টম প্রপার্টিগুলো বিভিন্ন ভাষার সাথে সঠিকভাবে কাজ করে। যেকোনো সম্ভাব্য সমস্যা চিহ্নিত করতে আপনার ওয়েবসাইটটি বিভিন্ন ভাষায় পরীক্ষা করুন।

সিএসএস কাস্টম প্রপার্টি এবং @property নিয়মের ভবিষ্যৎ

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

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

উপসংহার

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

আরও পড়ুন

• MDN Web Docs: @property
• CSS Custom Properties for Cascading Variables Module Level 1