@প্রপার্টি: নেক্সট-জেন সিএসএস ভেরিয়েবল এখন সর্বজনীন ব্রাউজার সমর্থন সহ

উনা ক্রেভেটস

প্রকাশিত: জুলাই 12, 2024

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

@property সুবিধা

  • শব্দার্থিক অর্থ: আপনার কাস্টম বৈশিষ্ট্যগুলির জন্য একটি প্রকার (সিনট্যাক্স) সংজ্ঞায়িত করতে @property ব্যবহার করুন। এটি ব্রাউজারকে বলে যে আপনার কাস্টম সম্পত্তিতে কী ধরনের ডেটা রয়েছে (উদাহরণস্বরূপ, রঙ, দৈর্ঘ্য, বা সংখ্যা), অপ্রত্যাশিত ফলাফল প্রতিরোধ করে এবং গ্রেডিয়েন্ট অ্যানিমেটিং করার মতো নতুন সম্ভাবনাগুলিকে সমর্থন করে৷
  • ফলব্যাক মান: আর অদৃশ্য শৈলী নেই! একটি কাস্টম সম্পত্তির জন্য একটি প্রাথমিক মান সেট করতে @property ব্যবহার করুন। যদি একটি অবৈধ মান পরে বরাদ্দ করা হয়, ব্রাউজারটি সুন্দরভাবে আপনার সংজ্ঞায়িত ফলব্যাক ব্যবহার করে।
  • উন্নত ত্রুটি পরিচালনা: উন্নত ধরনের নিরাপত্তা এবং ফলব্যাক সেট করার ক্ষমতা সরাসরি আপনার CSS-এর মধ্যে পরীক্ষা এবং বৈধতার জন্য নতুন সুযোগ উন্মুক্ত করে।

উন্নত কাস্টম বৈশিষ্ট্য তৈরি করুন

একটি "স্ট্যান্ডার্ড" কাস্টম প্রপার্টি তৈরি করতে, একটি -- দ্বারা পূর্বে লেখা একটি প্রপার্টির নাম সেট করুন এবং এই প্রপার্টিটিকে একটি মান দিন। এই কাস্টম বৈশিষ্ট্যগুলির মান ব্রাউজার দ্বারা একটি স্ট্রিং হিসাবে পার্স করা হয়।

নিম্নলিখিত উদাহরণ দেখায় কিভাবে একটি ডিফল্ট (স্ট্রিং-ভিত্তিক) কাস্টম বৈশিষ্ট্য শুরু করা হয়।

:root {
 --myColor: hotpink;
}

এই "উন্নত কাস্টম বৈশিষ্ট্যগুলির" সুবিধা পেতে, একটি স্ট্রিং এর বাইরে শব্দার্থবিদ্যা সহ, @property এর সাথে আপনার CSS কাস্টম সম্পত্তি নিবন্ধন করুন।

এই উদাহরণে একই কাস্টম সম্পত্তি @property দিয়ে আরম্ভ করা হয়েছে।

@property --myColor {
    syntax: '<color>';
    inherits: false;
    initial-value: hotpink;
  }

@property দিয়ে আরম্ভ করা কাস্টম প্রপার্টি শুধুমাত্র একটি নাম এবং মানের চেয়ে অনেক বেশি বিশদ প্রদান করে। এটি সিনট্যাক্স প্রকার অন্তর্ভুক্ত করে এবং উত্তরাধিকারকে সত্য বা মিথ্যাতে সেট করে।

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

ডেমো: টুইঙ্কলিং গ্রেডিয়েন্ট ব্যাকগ্রাউন্ড

@property এর একটি ঝরঝরে অ্যাপ্লিকেশন হল বৈশিষ্ট্যগুলির মসৃণ অ্যানিমেশন যা আগে স্থানান্তর করা অসম্ভব ছিল, গ্রেডিয়েন্টের মতো, যা ব্রাউজার দ্বারা চিত্র হিসাবে অনুভূত হয়। যাইহোক, আপনি যদি @property এর মাধ্যমে ভেরিয়েবলের সিনট্যাকটিক অর্থ দেন, তাহলে এগুলি গ্রেডিয়েন্ট স্টেটমেন্টে ব্যবহার করা যেতে পারে। এখন আপনি গ্রেডিয়েন্টের মধ্যে দুটি ঘোষিত মানের মধ্যে একটি অ্যানিমেশন বর্ণনা করছেন, অ্যানিমেশন সক্ষম করে। নিম্নলিখিত উদাহরণ নিন: একটি সূক্ষ্ম ব্যাকগ্রাউন্ড অ্যানিমেশন সহ একটি কার্ড যাতে দুটি রেডিয়াল গ্রেডিয়েন্ট থাকে যা বিভিন্ন সময়রেখায় রঙ পরিবর্তন করে:

একটি ব্যাকগ্রাউন্ড গ্রেডিয়েন্টে রঙ অ্যানিমেট করার জন্য @property ব্যবহার করে।

রঙ হিসাবে আপনার কাস্টম সম্পত্তি মান সেট আপ করে এটি অর্জন করা যেতে পারে:

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

@property --shine-1 {
  syntax: "<color>";
  inherits: false;
  initial-value: wheat;
}

@property --shine-2 {
  syntax: "<color>";
  inherits: false;
  initial-value: lightpink;
}

তারপরে, আপনি প্রাথমিক গ্রেডিয়েন্ট ব্যাকগ্রাউন্ড তৈরি করতে তাদের অ্যাক্সেস করবেন:

.card {
background: radial-gradient(
      300px circle at 55% 60% in oklab,
      var(--shine-2), transparent 100% 100%),
      radial-gradient(farthest-side circle at 75% 30% in oklab,
      var(--shine-1) 0%, var(--card-bg) 100%);
}

উপরন্তু, আপনি তারপর কীফ্রেমে মান আপডেট করুন:

@keyframes animate-color-1 {
  to {
    --shine-1: orange;
  }
}

@keyframes animate-color-2 {
  to {
    --shine-2: hotpink;
  }
}

এবং প্রতিটি অ্যানিমেট করুন:

animation: animate-color-1 8s infinite linear alternate, animate-color-2 1s infinite linear alternate;

উপসংহার

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

অতিরিক্ত পড়া