সিএসএসে হালকাভাবে ঝাঁকুনি দিচ্ছে যদি ক্রোম 137 এ () ফাংশন

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

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

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

হ্যাঁ, এটি ইতিমধ্যে এখানে!

শর্তসাপেক্ষ বিবৃতি সিএসএসে সর্বত্র বিদ্যমান। এট-রুলস থেকে শুরু করে ডিওএম-তে প্রতিটি বিবৃতি পার্সিং এবং ম্যাচিং পর্যন্ত, সিএসএসের সর্বদা শর্তসাপেক্ষ ছিল। এবং, এবং লিয়া যেমন ভেরো এটি রেখেছিলপ্রতিটি নির্বাচক মূলত শর্তসাপেক্ষ! তবে আমাদের যা ছিল না তা হ’ল এক লাইনে একাধিক শর্তের বিরুদ্ধে একটি উপাদান স্টাইল করার একটি উপায় এবং তারপরে এটি ফলাফল ফিরিয়ে দেয় শর্তাধীন।

দ্য if() ফাংশন হ’ল শর্তাবলীর আরও উন্নত স্তর, যেখানে আপনি কোনও একক সম্পত্তিতে নির্ধারিত সমস্ত শর্তাধীন বিবৃতি পরিচালনা করতে পারেন এবং রাখতে পারেন।

.element 
  color: if(style(--theme: dark): oklch(52% 0.18 140); else: oklch(65% 0.05 220));

কিভাবে if() কাজ?

ঠিক আছে ক্রোম বৈশিষ্ট্যটি বাস্তবায়নের আগে, 2021 সালে এটি প্রথম প্রস্তাবিত হওয়ার পরে, প্রাথমিক সিনট্যাক্সটি এরকম ছিল:

<if()> = if( <container-query>, (<declaration-value>)1, 2 )

এখন আমরা পরিবর্তে এটি খুঁজছি:

<if()> = if(
  (<if-statement>: <result>)*;
  <if-statement>: <result> ;?
)

কোথায়…

• প্রথম <if-statement> উভয় মধ্যে শর্ত প্রতিনিধিত্ব করে style(), media()বা supports() মোড়ক ফাংশন। এটি আমাদের একাধিক লিখতে দেয় যদি বিবৃতি, যতগুলি আমরা ইচ্ছা করতে পারি। হ্যাঁ, আপনি ঠিক পড়েছেন। আমরা যতটা চাই!
• ফাইনাল <if-statement> শর্ত (else) বিবৃতি ব্যর্থ হলে অন্যান্য সমস্ত যখন ডিফল্ট মান।

সিনট্যাক্সটি পড়ার এটিই “সহজ” উপায়। এই কি স্পেসে::

<if()> = if( ( <if-branch> ; )* <if-branch> ;? )
<if-branch> = <if-condition> : <declaration-value>?
<if-condition> = <boolean-expr( <if-test> )> | else
<if-test> =
  supports( ( <ident> : <declaration-value> ) | <supports-condition> )
  media( <media-feature> | <media-condition> ) |
  style( <style-query> )

একটু কথা, তাই না? সুতরাং, আসুন আমরা এর চারপাশে আমাদের মাথাগুলি গুটিয়ে রাখতে একটি উদাহরণ দেখুন। বলুন আমরা প্রদত্ত সক্রিয় রঙ স্কিমের উপর নির্ভর করে কোনও উপাদানগুলির প্যাডিং পরিবর্তন করতে চাই। আমরা একটি সেট করা হবে if() ক style() ভিতরে ফাংশন, এবং এটি একটি প্রদত্ত মানকে ফলাফলকে আউটপুট করতে কাস্টম ভেরিয়েবলের মতো কোনও কিছুর সাথে তুলনা করবে। এই সমস্ত আলাপটি এত জটিল শোনাচ্ছে, তাই আসুন কোডে ঝাঁপিয়ে পড়ি:

.element 
  padding: if(style(--theme: dark): 2rem; else: 3rem);

উপরের উদাহরণটি প্যাডিং সেট করে 2rem… যদি দ্য --theme পরিবর্তনশীল সেট করা হয় dark। যদি না, এটি ডিফল্ট 3rem। আমি জানি, আপনি যে ধরণের জিনিসটির জন্য আসলে ফাংশনটি ব্যবহার করতে পারেন ঠিক তা নয়, তবে এটি কেবল প্রাথমিক ধারণাটি চিত্রিত করার জন্য।

সিনট্যাক্স পরিষ্কার করুন!

একটি জিনিস আমি লক্ষ্য করেছি, যদিও এটি হ’ল জিনিসগুলি খুব সংশ্লেষিত হতে পারে খুব দ্রুত। ভাবুন আপনার তিনটি আছে if() এই মত বিবৃতি:

:root 
  --height: 12.5rem;
  --width: 4rem;
  --weight: 2rem;


.element 
  height: if(
    style(--height: 3rem): 14.5rem; style(--width: 7rem): 10rem; style(--weight: 100rem): 2rem; else: var(--height)
  );

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

উদাহরণস্বরূপ, যদি আমি আরও বেশি পঠনযোগ্য হতে জিনিসগুলি ভেঙে ফেলতে পারি তবে আমি সম্ভবত এরকম কিছু করব:

:root 
  --height: 12.5rem;
  --width: 4rem;
  --weight: 2rem;


/* This is much cleaner, don't you think? */
.element 
  height: if(
    style(--height: 3rem): 14.5rem; 
    style(--width: 7rem): 10rem; 
    style(--weight: 100rem): 2rem; 
    else: var(--height)
  );

অনেক ভাল, তাই না? এখন, আপনি অবশ্যই এক নজরে কী চলছে তা বুঝতে পারবেন। যদিও এটি কেবল আমি। হতে পারে আপনার বিভিন্ন ধারণা আছে … এবং যদি আপনি করেন, আমি তাদের মন্তব্যগুলিতে দেখতে চাই।

এই অ্যানিমেটেড বলটি কাজ করার জন্য সিএসএসে একাধিক কন্ডিশনাল দেখানো একটি দ্রুত ডেমো এখানে। কিছু কাস্টম ভেরিয়েবল মান সেট উপর ভিত্তি করে বলের প্রস্থ পরিবর্তন হয়। মৃদু অনুস্মারক যে আমি এটি লেখার সময় এটি কেবল ক্রোম 137+ এ সমর্থিত:

দ্য supports() এবং media() বিবৃতি

ভাবুন supports() আপনি একইভাবে ব্যবহার করবেন @supports এট-বিধি আসলে, তারা কমপক্ষে ধারণাগতভাবে একই কাজ করে:

/* formal syntax for @supports */
@supports <supports-condition> 
  <rule-list>


/* formal syntax for supports() */
supports( ( <ident> : <declaration-value> ) | <supports-condition> )

এখানে কেবল পার্থক্য হ’ল supports() কোডের একটি ব্লকের সাথে মিলে যাওয়ার পরিবর্তে একটি মান প্রদান করে। তবে, এটি কীভাবে কাজ করে রিয়েল কোড?

দ্য <ident>: <declaration-value> আপনি এখানে দেখুন, এই ক্ষেত্রে, সম্পত্তির নাম: সম্পত্তির মান উদাহরণস্বরূপ display: flex।

ধরা যাক আপনি এর জন্য সমর্থন চেক করতে চান backdrop-filter সম্পত্তি, বিশেষত blur() ফাংশন। সাধারণত, আপনি এটি দিয়ে এটি করতে পারেন @supports::

/* Fallback in case the browser doesn't support backdrop-filter */
.card 
  backdrop-filter: unset;
  background-color: oklch(20% 50% 40% / 0.8);


@supports (backdrop-filter: blur(10px)) 
  .card 
    backdrop-filter: blur(10px);
    background-color: oklch(20% 50% 40% / 0.8);
  

তবে, সিএসএস সহ if()আমরা এটিও করতে পারি:

.card 
  backdrop-filter: if(
    supports(backdrop-filter: blur(10px)): blur(10px);
    else: unset
  );

দ্রষ্টব্য: ভাবুন unset এখানে করুণ অবক্ষয়ের সম্ভাব্য ফলব্যাক হিসাবে।

এটা দুর্দান্ত লাগছে, তাই না? একাধিক শর্ত পাশাপাশি পরীক্ষা করা যেতে পারে supports() এবং সমর্থিত কোনও ফাংশন। উদাহরণস্বরূপ:

.card 
  backdrop-filter: if(
    supports(backdrop-filter: blur(10px)): blur(10px);
    supports(backdrop-filter: invert(50%)): invert(50%);
    supports(backdrop-filter: hue-rotate(230deg)): hue-rotate(230deg);;
    else: unset
  );

এখন, একবার দেখুন @media এট-বিধি আপনি তুলনা করতে এবং একগুচ্ছ স্টাফের জন্য চেক করতে পারেনতবে আমি এটিকে সহজ রাখতে চাই এবং স্ক্রিনের আকার একটি নির্দিষ্ট প্রস্থ কিনা তা পরীক্ষা করে দেখতে চাই এবং এর ভিত্তিতে শৈলী প্রয়োগ করতে পারি:

h1 
  font-size: 2rem;


@media (min-width: 768px) 
  h1 
    font-size: 2.5rem;
  


@media (min-width: 1200px) 
  h1 
    font-size: 3rem;
  

দ্য media() র‌্যাপার তার-বিধি-সমকক্ষের মতো প্রায় একইভাবে কাজ করে। অনুমান থেকে এর সিনট্যাক্সটি নোট করুন:

/* formal syntax for @media */
@media <media-query-list> 
  <rule-list>


/* formal syntax for media() */
media( <media-feature> | <media-condition> )

কীভাবে লক্ষ্য করুন দিনের শেষআনুষ্ঠানিক বাক্য গঠন (<media-query>) এর জন্য সিনট্যাক্স হিসাবে একই media() ফাংশন। এবং পরিবর্তে কোডের একটি ব্লক ফিরে আসার পরিবর্তে @mediaআপনার সিএসএস ইনলাইনে এরকম কিছু থাকতে হবে if()::

h1 
  font-size: if(
    media(width >= 1200px): 3rem;
    media(width >= 768px): 2.5rem;
    else: 2rem
  );

আবার, এগুলি প্রথম দিন

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

প্রাথমিক বৈশিষ্ট্যগুলির সাথে পরীক্ষা করা হ’ল আমরা কীভাবে সিএসএসকে বিকশিত করতে সহায়তা করি। যদি আপনি জিনিসগুলি চেষ্টা করে দেখেন তবে আপনার প্রতিক্রিয়াটি যুক্ত করার বিষয়টি বিবেচনা করুন সিএসএসডব্লিউজি এবং ক্রোমিয়াম। যত বেশি ব্যবহারের ক্ষেত্রে, তত ভাল এবং এটি ভবিষ্যতের বাস্তবায়নগুলি আরও উন্নত করতে সহায়তা করবে।

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