সিএসএসে পোকার করা যদি () আরও কিছুটা কাজ করে: শর্তসাপেক্ষ রঙ থিমিং

Chrome 137 পাঠানো if() সিএসএস ফাংশনসুতরাং এটি সম্পূর্ণরূপে সম্ভব যে আমরা অন্যান্য ব্রাউজারগুলি এটি বাস্তবায়ন করতে দেখব, যদিও কখন তা জানা শক্ত। যাই হোক না কেন, if() শর্তসাপেক্ষে মানগুলি ব্যবহার করতে আমাদের সক্ষম করে, যা আমরা ইতিমধ্যে প্রশ্ন এবং অন্যান্য ফাংশনগুলির সাথে করতে পারি (যেমন, মিডিয়া ক্যোয়ারী এবং দ্য light-dark() ফাংশন), সুতরাং আমি নিশ্চিত আপনি ভাবছেন: ঠিক কী করে if() কি?

সুনকানমি গতকাল আমাদের ফাংশনটির একটি দুর্দান্ত ওভারভিউ দিয়েছেনএকটি উচ্চ স্তরে সিনট্যাক্সে ঝাঁকুনি দেওয়া। আমি এই নিবন্ধে এটি আরও শক্ত করে তুলতে চাই, কিছু সম্ভাব্য বাস্তব-বিশ্বের ব্যবহারে প্রবেশ করতে চাই।

পুনরুদ্ধার করতে, if() শর্তসাপেক্ষে একটি সিএসএস ভেরিয়েবলের মানের ভিত্তিতে কোনও সম্পত্তিতে একটি মান নির্ধারণ করে। উদাহরণস্বরূপ, আমরা বিভিন্ন মান নির্ধারণ করতে পারে color এবং background মান ভিত্তিক বৈশিষ্ট্য --theme::

• --theme:: "Shamrock"
  • color:: ‌hsl(146 50% 3%)
  • background:: hsl(146 50% 40%)
• --theme: অন্য কিছু
  • color:: hsl(43 74% 3%)
  • background:: hsl(43 74% 64%)

:root 
  /* Change to fall back to the ‘else’ values */
  --theme: "Shamrock";

  body 
    color: if(style(--theme: "Shamrock"): hsl(146 50% 3%); else: hsl(43 74% 3%));
    background: if(style(--theme: "Shamrock"): hsl(146 50% 40%); else: hsl(43 74% 64%));
  

আমি সিনট্যাক্সটি পছন্দ করি না (অনেকগুলি কলোন, বন্ধনী এবং আরও অনেক কিছু) তবে আমরা এটি এটির মতো ফর্ম্যাট করতে পারি (যা আমি মনে করি কিছুটা পরিষ্কার):

color: if(
  style(--theme: "Shamrock"): hsl(146 50% 3%);
  else: hsl(43 74% 3%)
);

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

আমরা কী করতে পারি তা অন্বেষণ if()

প্রথম উদাহরণ থেকে বিচার করে, এটি স্পষ্ট যে আমরা ব্যবহার করতে পারি if() তাদের জন্য (এবং সামগ্রিকভাবে ডিজাইন সিস্টেম)। যখন আমরা ব্যবহার করতে পারে light-dark() এর জন্য ফাংশন, থিমগুলি যদি কঠোরভাবে হালকা এবং অন্ধকার না হয় বা আমরা যদি প্রতিটি থিমের জন্য দুটি বেশি থিম বা হালকা এবং গা dark ় মোড রাখতে চাই তবে কী হবে? ঠিক আছে, এটাই if() জন্য ব্যবহার করা যেতে পারে।

প্রথমে আসুন আরও থিম/আরও শর্ত তৈরি করা যাক:

:root  Saffron 

সত্যিই খুব সহজ, তবে কয়েকটি সহজে মিস করা জিনিস রয়েছে। প্রথমত, এবার কোনও “অন্য শর্ত” নেই, যার অর্থ থিমটি না থাকলে Shamrock, Saffronবা Amethystডিফল্ট ব্রাউজার শৈলী ব্যবহৃত হয়। অন্যথায়, if() ফাংশন প্রথম সত্য বিবৃতিটির মান সমাধান করেযা Saffron এই ক্ষেত্রে থিম। দ্বিতীয়ত, ট্রানজিশনগুলি বাক্সের ঠিক বাইরে কাজ করে; নীচের ডেমোতে, আমি টগলিংয়ের জন্য একটি ব্যবহারকারী ইন্টারফেস যুক্ত করেছি --themeএবং রূপান্তর জন্য, আক্ষরিক ঠিক transition: 300ms পাশাপাশি if() ফাংশন:

দ্রষ্টব্য: যদি থিম-স্যুইচিং ব্যবহারকারী-নিয়ন্ত্রিত হয়, যেমন কোনও বিকল্প নির্বাচন করা হয় তবে আপনার আসলে প্রয়োজন হয় না if() আদৌ। আপনি কেবল ডেমোর শুরুতে যে যুক্তি ব্যবহার করেছি তা আপনি ব্যবহার করতে পারেন (:root:has(#shamrock:checked) /* Styles */ )। অমিত শীন একটি আছে স্ম্যাশিং ম্যাগাজিনে দুর্দান্ত বিক্ষোভ।

কোডটি আরও রক্ষণাবেক্ষণযোগ্য করার জন্য, আমরা রঙগুলি সিএসএস ভেরিয়েবলগুলিতেও স্লাইড করতে পারি, তারপরে সেগুলি ব্যবহার করুন if() ফাংশন, তারপর স্লাইড if() সিএসএস ভেরিয়েবলগুলিতে নিজেকে কাজ করে:

/* Setup */
:root 
  /* Shamrock 

পাশাপাশি এর মধ্যে সিএসএস ভেরিয়েবলগুলি ব্যবহার করে if() ফাংশন, আমরা অন্যান্য ফাংশনগুলিও বাসা বাঁধতে পারি। নীচের উদাহরণে, আমি ফেলে দিয়েছি light-dark() সেখানে, যা মূলত গা dark ় মোডের জন্য রঙগুলি উল্টে দেয়:

--background: if(
  style(--theme: "Shamrock"): light-dark(var(--shamrock), var(--shamrock-complementary));
  style(--theme: "Saffron"): light-dark(var(--saffron), var(--saffron-complementary));
  style(--theme: "Amethyst"): light-dark(var(--amethyst), var(--amethyst-complementary))
);

if() বনাম কনটেইনার স্টাইলের প্রশ্নগুলি

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

:root  Saffron 

আপনি দেখতে পারেন, কোথায় if() শর্তসাপেক্ষ মানগুলি সহজতর করে, ধারক শৈলীর প্রশ্নগুলি শর্তসাপেক্ষ বৈশিষ্ট্যগুলি সহজতর করে এবং মান। তা ছাড়া, এটি সত্যই কেবল একটি আলাদা সিনট্যাক্স।

অতিরিক্ত জিনিস আপনি করতে পারেন if() (তবে বুঝতে পারে না)

কোনও সিএসএস ভেরিয়েবল বিদ্যমান কিনা তা পরীক্ষা করুন:

/* Hide icons if variable isn’t set */
.icon 
  display: if(
    style(--icon-family): inline-block;
    else: none
  );

আরও জটিল শর্তসাপেক্ষ বিবৃতি তৈরি করুন:

h1 
  font-size: if(
    style(--largerHeadings: true): xxx-large;
    style(--theme: "themeWithLargerHeadings"): xxx-large
  );

দুটি সিএসএস ভেরিয়েবল মেলে কিনা তা পরীক্ষা করুন:

/* If #s2 has the same background as #s1, add a border */
#s2 
  border-top: if(
    style(--s2-background: var(--s1-background)): thin solid red
  );

if() এবং calc(): যখন গণিত গণিত হয় না

এটি কাজ করবে না (সম্ভবত কেউ আমাকে কেন চিহ্নিত করতে সহায়তা করতে পারে):

div 
  /* 3/3 = 1 */
  --calc: calc(3/3);
  /* Blue, because if() won’t calculate --calc */
  background: if(style(--calc: 1): red; else: blue);

করতে if() গণনা --calcআমাদের ব্যবহার করে সিএসএস ভেরিয়েবলটি নিবন্ধন করতে হবে @property প্রথমত, এই মত:

@property --calc 
  syntax: "<number>";
  initial-value: 0;
  inherits: false;

বন্ধ চিন্তা

যদিও আমি সিনট্যাক্সে আগ্রহী নই এবং এটি কখনও কখনও অপঠনযোগ্য দেখতে পারে (বিশেষত যদি এটি একটি লাইনে ফর্ম্যাট করা হয়) তবে আমি কীভাবে দেখতে পেরে মেগা উত্তেজিত if() বিবর্তিত আমি এটি সাধারণ বৈশিষ্ট্যগুলির সাথে ব্যবহার করতে সক্ষম হতে চাই (যেমন, color: if(style(background: white): black; style(background: black): white);) যেখানে সম্ভব সেখানে সিএসএস ভেরিয়েবলগুলি সেট করা এড়াতে।

এটিও দুর্দান্ত হতে চাই calc() ভেরিয়েবলটি নিবন্ধন না করে ফ্লাইতে গণনা গণনা করা যেতে পারে।

বলা হচ্ছে, আমি এখনও কী নিয়ে অত্যন্ত খুশি if() বর্তমানে করে, এবং আরও সহজ ডিজাইন সিস্টেমগুলি তৈরি করতে অপেক্ষা করতে পারে না।