CSS @property নিয়ম

  • পূর্ববর্তী পৃষ্ঠা position
  • পরবর্তী পৃষ্ঠা quotes

নির্দিষ্টকরণ ও ব্যবহার

CSS @property বৈধতা পরীক্ষা ও বৃত্তান্ত প্রক্রিয়াসমূহ সহ, ডিফল্ট মান নির্ধারণ করা যেতে পারে এবং অ্যাট্রিবিউটকে প্রত্যার্পণ করা যাক না তা নির্ধারণ করা যেতে পারে。

@property বৈধতা পরীক্ষা ও বৃত্তান্ত প্রক্রিয়াসমূহ সহ, ডিফল্ট মান নির্ধারণ করা যেতে পারে এবং অ্যাট্রিবিউটকে প্রত্যার্পণ করা যাক না তা নির্ধারণ করা যেতে পারে。

ব্যবহার করুন @property বৈদ্যুতিক সুবিধা:

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

উদাহরণ: কাস্টম অ্যাট্রিবিউট নির্দিষ্টকরণ

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

উপরোক্ত নির্দিষ্টকরণ মানে --my-color একটি রঙ অ্যাট্রিবিউট, যা মাত্রাকে প্রত্যার্পণ করতে পারে এবং তার ডিফল্ট মান lightgray।

CSS-তে কাস্টম অ্যাট্রিবিউট ব্যবহার করুন:

body {}}
  backgound-color: var(--my-color);
}

instance

example 1

গ্রেডেন্ট প্রদর্শনের জন্য দুটি কার্যকরী এটির নাম নির্ধারণ করুন - এবং তাদের গ্রেডেন্ট অ্যানিমেশন করুন:

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

try it yourself

example 2

দুটি কার্যকরী এটির নাম নির্ধারণ করুন: একটি প্রকল্প মাপ এবং আরেকটি প্রকল্প রঙ:

@property --item-size {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}
@property --item-color {
  syntax: "<color>";
  inherits: false;
  initial-value: lightgray;
}

try it yourself

CSS syntax

@property --propertyname {
  syntax: "<color>";
  initial-value: red;
  inherits: false;
}

attribute value

value description
--propertyname অপরিহার্য।কার্যকরী এটির নাম。
syntax

এটি <length>、<number>、<percentage>、<length-percentage>、<color>、<image>、<url>、<integer>、<angle>、<time>、<resolution>、<transform-function> বা <custom-ident> হতে পারে, বা তার মানের তালিকা এবং কীভাবে ব্যবহার করা যাবে নির্ধারণ করা যায়。

+(স্পেস দিয়ে বিভক্ত) এবং #(কমা দিয়ে বিভক্ত) গুণক একটি মান তালিকা প্রত্যাশা করে, যেমন <color># এটি কমা দিয়ে বিভক্ত <color> মান তালিকা প্রত্যাশা করে。

সরোগা (|) প্রত্যাশিত স্বচ্ছতা প্রদর্শনের জন্য 'বা' শর্ত তৈরি করতে পারে, যেমন <length> | auto এটি <length> বা auto গ্রহণ করে, এবং <color># | <integer># এটি কমা দিয়ে বিভক্ত <color> মান তালিকা বা কমা দিয়ে বিভক্ত <integer> মান তালিকা প্রত্যাশা করে。
initial-value এটির প্রথম মান সংজ্ঞায়িত করে。
inherits true বা false।এটি @property দ্বারা নির্দিষ্ট কার্যকরী এটির প্রকৃত সমর্থন প্রক্রিয়াটি ডিফল্ট উত্তরণ করে না কি না করে নির্ধারণ করে。

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

তালিকায় সংখ্যা প্রথম কম্প্লেট সমর্থন করা @ নিয়মের ব্রাউজার সংস্করণকে দেখায়。

Chrome Edge Firefox Safari Opera
85 85 128 16.4 71

সংশ্লিষ্ট পৃষ্ঠা

শিক্ষা:CSS @property নিয়ম

  • পূর্ববর্তী পৃষ্ঠা position
  • পরবর্তী পৃষ্ঠা quotes