CSS if(): আরও স্মার্ট স্টাইলিংয়ের জন্য ইনলাইন কন্ডিশনাল

বছরের পর বছর ধরে, আমরা ধরে নিয়েছিলাম যে CSS "চিন্তা করতে পারে না"। তবুও, আমাদের সমাধান ছিল: @media, @supports, @container এবং ফলব্যাক ভেরিয়েবল তারা আগে আমাদের প্রসঙ্গের উপর ভিত্তি করে স্টাইল পরিবর্তন করার অনুমতি দিত। এখন একটি নতুন বৈশিষ্ট্য এসেছে যা মানকে আরও বাড়িয়ে তোলে এবং ডিজাইন করার সময় আমরা যেভাবে যুক্তি করি তার সাথে আরও ভালভাবে খাপ খায়: if() শর্তসাপেক্ষ ফাংশন সরাসরি সম্পত্তির মানগুলিতে।

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

আগে যা ছিল: "শর্তাবলী" যা আমরা ইতিমধ্যেই CSS-এ ব্যবহার করেছি

if() এর আগে, CSS ইতিমধ্যেই শর্তসাপেক্ষ প্রক্রিয়া প্রদান করেছিল, প্রতিটির নিজস্ব সুযোগ ছিল। এগুলো সত্য যদি না হয়, কিন্তু এগুলো পূরণ করে তাদের জমিতে:

• @media: উইন্ডো বা ডিভাইস যদি কোনও মানদণ্ড (প্রস্থ, ওরিয়েন্টেশন, পয়েন্টার, ইত্যাদি) পূরণ করে তবে নিয়ম প্রয়োগ করে।
• @সমর্থন করে: ব্রাউজার যদি কোনও বৈশিষ্ট্য বা মান বোঝে তবে স্টাইল সক্রিয় করে।
• @কন্টেইনার: একটি পাত্রের আকার বা স্টাইলের উপর প্রতিক্রিয়া দেখায়, যা উপাদান-ভিত্তিক ডিজাইনের জন্য কার্যকর।
• var () ডিফল্ট মান সহ: if নয়, তবে "যদি ভেরিয়েবলটি বিদ্যমান না থাকে, তাহলে এই ফলব্যাকটি ব্যবহার করুন" অনুমতি দেয়।

এই পদ্ধতিগুলি শক্তিশালী, যদিও এগুলি তাদের উদ্দেশ্যের সাথে "আঠালো": মিডিয়া, সাপোর্ট বা কন্টেইনারif() ফাংশন এই টুলগুলিকে প্রতিস্থাপন করে না; বরং, এটি এগুলিকে নির্বিঘ্নে সংহত করে। আন্তঃক্যালেটেড এবং দানাদার সম্পত্তির মানগুলিতে।

CSS-এ if() কী এবং কেন এটি গুরুত্বপূর্ণ

ফাংশন যদি() আপনাকে একটি সম্পত্তি মানের মধ্যে, শর্ত:মান জোড়ার একটি তালিকা সংজ্ঞায়িত করতে দেয়, যা ক্রমানুসারে মূল্যায়ন করা হয়। যখন প্রথম শর্তটি সত্য হয়, তখন এর সাথে সম্পর্কিত মানটি হবে যা "জয়ী"। এটি if…else এর অনুরূপ একটি প্রবাহ। JS এর, কিন্তু CSS-এ এমবেড করা।

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

বিস্তারিত বাক্য গঠন এবং মূল্যায়ন

সাধারণ কাঠামো হল একটি সেমিকোলন-বিচ্ছিন্ন শাখার তালিকা যা ধরণের :। প্রতিটি শর্ত হয় একটি (স্টাইল(), মিডিয়া(), অথবা সাপোর্ট()) অথবা কীওয়ার্ড আর, যা সর্বদা সত্য হিসাবে মূল্যায়ন করে।

/* Estructura básica */
propiedad: if(
  style(--estado: activo): valor-1;
  media(width < 700px): valor-2;
  supports(color: lch(60% 50 40)): valor-3;
  else: valor-por-defecto
);

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

একটি গুরুত্বপূর্ণ বিশদ: যদি তালিকার মধ্যে একটি শর্ত বা একটি নির্দিষ্ট মান অবৈধ হয়, সম্পূর্ণ ফাংশনটি বাতিল করে না; পার্সার পরবর্তী জোড়ার সাথে চলতে থাকে। এর ফলে if() তৈরি হয়। একক-বিন্দু ব্যর্থতার প্রতিরোধী শাখাগুলির মধ্যে।

পরীক্ষার ধরণ: স্টাইল(), মিডিয়া(), এবং সাপোর্ট()

স্টাইল(): স্টাইল কোয়েরি

স্টাইল কোয়েরি সহ স্টাইল() আপনাকে জিজ্ঞাসা করার অনুমতি দেয় যে লক্ষ্য উপাদানটির একটি সম্পত্তির জন্য একটি নির্দিষ্ট মান আছে কিনা (বিশেষ করে এর সাথে কার্যকর)। কাস্টম বৈশিষ্ট্য)। @container স্টাইল কোয়েরির বিপরীতে, স্টাইল() if() তে এটি উপাদানের উপর নির্ভর করে এবং তাৎক্ষণিকভাবে মূল্যায়ন করা হয়, কোনও অভিভাবকের উপর নির্ভর করার প্রয়োজন ছাড়াই।

/* Estado embebido en una custom property */
.card {
  --status: attr(data-status type(<custom-ident>));
  border-color: if(
    style(--status: pending): royalblue;
    style(--status: complete): seagreen;
    else: gray
  );
  background-color: if(
    style(--status: pending): #eff7fa;
    style(--status: complete): #f6fff6;
    else: #f7f7f7
  );
}

মধ্যে স্টাইল() আপনি লজিক্যাল অপারেটর ব্যবহার করতে পারেন এবং, or y না, এবং গ্রুপিংয়ের জন্য বন্ধনী, যা এটিকে সহজ করে তোলে জটিল সমন্বয় রাজ্যের ধরণ সম্পর্কে প্রশ্ন মনে রাখবেন যে @কন্টেইনার আজ তারা "স্বাভাবিক" বৈশিষ্ট্যগুলি সমর্থন করে না (শুধুমাত্র কাস্টম বৈশিষ্ট্যগুলি), যখন style() ভিতরে if() এটি উপাদানের উপর একটি একক বৈশিষ্ট্যের মান নির্ধারণ করতে ব্যবহৃত হয়।

মিডিয়া(): ইন্টারলিভড মিডিয়া কোয়েরি

বিরূদ্ধে গড় () স্টাইলটিকে অন্য একটি @media ব্লকে আলাদা না করেই, আপনি একটি নির্দিষ্ট মিডিয়া কোয়েরি দিয়ে একটি প্রোপার্টির মান কন্ডিশন করতে পারেন। এটি আদর্শ যখন তুমি শুধু একটি সম্পত্তি পরিবর্তন করতে চাও। পরিবেশের উপর নির্ভর করে।

/* Ejemplo para puntero fino vs grueso */
button {
  aspect-ratio: 1;
  width: if(
    media(any-pointer: fine): 30px;
    else: 44px
  );
}

এই ব্লকটি একটি বেস রুল এবং একটি লেখার সমতুল্য @media যা মালিকানাকে পুনরায় সংজ্ঞায়িত করে, কিন্তু যুক্তিকে কেন্দ্রীভূত করে এক জায়গায়। তুমিও ব্যবহার করতে পারো মিডিয়া প্রকার (উদাহরণস্বরূপ, মুদ্রণ) অথবা মিডিয়া বৈশিষ্ট্য যুক্তি দিয়ে এবং/বা/না.

/* Media type */
.elemento {
  background: if(
    media(print): white;
    else: #eee
  );
}

/* Media feature con rango */
.caja {
  margin: if(
    media(width < 700px): 0 auto;
    else: 20px auto
  );
}

আপনি যদি প্রয়োজন অনেক নির্বাচক বা একাধিক বৈশিষ্ট্য পরিবর্তন করুন একই সময়ে, একটি ঐতিহ্যবাহী @media ব্লক আরও ভালো। একটি একক বিবৃতির নির্দিষ্ট পরিবর্তনের জন্য, if() আরও অভিব্যক্তিপূর্ণ.

সমর্থন(): সমর্থন প্রশ্ন

বিরূদ্ধে সমর্থন করে() আপনি জিজ্ঞাসা করেন যে ব্রাউজারটি কোন নির্দিষ্ট বৈশিষ্ট্য (বৈশিষ্ট্য, মান, নির্বাচক, ইত্যাদি) বোঝে কিনা এবং সেই অনুযায়ী মানটি নির্বাচন করে। প্রগতিশীল বর্ধনের জন্য উপযুক্ত @supports ব্লকের নকল না করেই।

/* Color de amplia gama si está soportado */
body {
  background-color: if(
    supports(color: oklch(0.7 0.185 232)): oklch(0.7 0.185 232);
    else: #00adf3
  );
}

/* Consulta de soporte de selector */
video {
  outline-width: if(
    supports(selector(:buffering)): 1em;
    else: initial
  );
}

মনে রাখবেন যে একটি শাখার জন্য সমর্থন করে() if() ফাংশনের ভিতরে, ব্রাউজার নিজেই অবশ্যই সমর্থন যদি()অতএব সংজ্ঞায়নের গুরুত্ব দৃঢ় ফলব্যাক ফাংশনের বাইরে।

অন্যটির ফ্রিকোয়েন্সি এবং অবস্থান

আপনি ব্যবহার করতে পারেন এক বা একাধিক ফাংশনের মধ্যে এবং যেখানে খুশি সেখানে রাখুন। তবে, সবচেয়ে সাধারণ উপায় হল একটি একক স্থাপন করা আর শেষে ডিফল্ট মান হিসেবে। যদি তুমি শুরুতে else বলো, সর্বদা জিতবে এবং পরবর্তী শর্তাবলী মূল্যায়ন করা হবে না.

/* Útil para depurar: colocamos un else intermedio */
.elemento {
  background-image: if(
    style(--flag: on): url("ok.png");
    else: url("debug.png"); /* si la primera no encaja, mostramos pista */
    supports(background: paint(foo)): paint(foo)
  );
}

উপরন্তু, একটি ফাংশন যদি() শুধুমাত্র গঠিত অন্যথায়: মান, অথবা এমনকি খালি, বাক্য গঠনগতভাবে বৈধ, যদিও খুব একটা কার্যকর নয়। সরাসরি মান নির্ধারণ করা ভালো যদি কোন যুক্তি না থাকে।

পূর্ণ, আংশিক মান এবং নেস্টিং

ফাংশনটি একটি সম্পত্তির সম্পূর্ণ মূল্য অথবা এর কিছু অংশ একটির মধ্যে নিতে পারে সংক্ষেপে। এটি একই বিবৃতি থেকে বিচ্যুত না হয়ে খুব অভিব্যক্তিপূর্ণ রচনাগুলিকে সক্ষম করে, কম পুনরাবৃত্তি সহ কোডের।

/* Decidimos solo el color dentro de un shorthand */
.box {
  border: 2px solid if(
    supports(color: lch(60% 50 40)): lch(60% 50 40 / 0.7);
    else: rgb(100 120 200 / 0.7)
  );
}

ক্রিয়াকলাপ যদি() অন্যদের মধ্যে বাসা বাঁধতে পারে যদি(), এবং এর মতো ভূমিকায়ও calc()এটি নির্বাচকদের নকল না করে বা নতুন ব্লক না খুলেই সূক্ষ্ম সিদ্ধান্ত মডেলিংয়ের অনুমতি দেয়।

/* Anidación doble: esquema y preferencia de color */
.elemento {
  color: if(
    style(--scheme: ice): if(
      media(prefers-color-scheme: dark): oklch(85% 0.04 220);
      else: oklch(35% 0.04 220)
    );
    style(--scheme: fire): if(
      media(prefers-color-scheme: dark): oklch(90% 0.1 30);
      else: oklch(40% 0.1 30)
    );
    else: black
  );
}

/* calc() con porcentaje condicionado */
.panel {
  width: calc(
    if(style(--scheme: wide): 70%; else: 50%) - 50px
  );
}

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

ব্যবহারিক উদাহরণগুলি একত্রিত করা হয়েছে

১) পয়েন্টারের ধরণ অনুসারে বোতামটি অ্যাক্সেসযোগ্য

যদি ডিভাইসটিতে একটি থাকে সূক্ষ্ম পয়েন্টার (যেমন, মাউস), বোতামটি ছোট হবে; টাচস্ক্রিনে, অ্যাক্সেসিবিলিটি সুপারিশ পূরণ করার জন্য আমরা এটি 44px এ বাড়িয়েছি। একটি বক্তব্য, দুটি আচরণ.

button {
  aspect-ratio: 1;
  width: if(
    media(any-pointer: fine): 30px;
    else: 44px
  );
}

উপরেরটি একটি বেস + একটি @media ব্লকের সমতুল্য, কিন্তু এভাবে তুমি একাধিক সাইটে যুক্তি ছড়িয়ে দিও না। এবং ত্রুটির সম্ভাবনা কমিয়ে আনে।

২) ফলব্যাক সহ বিস্তৃত রঙ

যদি ব্রাউজার বুঝতে পারে ওকেএলসিএইচ, আমরা সেই রঙটি ব্যবহার করি এবং যখন আমরা এটিতে থাকি, তখন আমরা একটি তথ্যপূর্ণ বার্তা প্রদর্শন করি ::পরেঅন্যথায়, আমরা একটি নিরাপদ হেক্স প্রয়োগ করি। নাটক ছাড়া সামঞ্জস্য.

body {
  background-color: if(
    supports(color: oklch(0.7 0.185 232)): oklch(0.7 0.185 232);
    else: #00adf3
  );
}

body::after {
  content: if(
    supports(color: oklch(0.7 0.185 232)): "Tu navegador admite OKLCH";
    else: "Tu navegador no admite OKLCH"
  );
}

আপনি যদি RGB এবং আধুনিক স্থানগুলির মধ্যে দৃশ্যমান পার্থক্য অন্বেষণ করতে চান, তাহলে একবার দেখে নিন oklch.com এর মতো রিসোর্সযখন সমর্থন থাকে তখন কেন এই স্থানগুলি গ্রহণ করা মূল্যবান তা আপনি বুঝতে পারবেন।

৩) UI স্ট্যাটাস অনুসারে পরিবর্তিত কার্ড

রাজ্যটি এখানে সংরক্ষণ করে তথ্য-স্থিতি, এটি দিয়ে পড়ুন attr() একটি কাস্টম সম্পত্তির দিকে এবং সিদ্ধান্ত নিন স্টাইল()। একটি মার্জিত উপায় স্বয়ংসম্পূর্ণ উপাদান.

<div class="card" data-status="complete">...</div>

.card {
  --status: attr(data-status type(<custom-ident>));
  border-color: if(
    style(--status: pending): royalblue;
    style(--status: complete): seagreen;
    else: gray
  );
  background-color: if(
    style(--status: pending): #eff7fa;
    style(--status: complete): #f6fff6;
    else: #f7f7f7
  );
}

এই প্যাটার্নের সাহায্যে, ডেটা অ্যাট্রিবিউট পরিবর্তন করুন HTML-এ অতিরিক্ত CSS স্পর্শ না করে বা ক্লাস-টগলিং JS ছাড়াই একাধিক বৈশিষ্ট্য পরিবর্তন করে।

অন্যথা এবং মূল্যায়নের ক্রম: কিভাবে if() চিন্তা করে

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

আপনিও রাখতে পারেন অন্যথায় মাঝখানে ডিবাগ করার জন্য: যদি আপনি জানতে চান যে প্রথম শর্তটি কাজ করছে না, তাহলে একটি else লিখুন যা ফেরত দেয়, উদাহরণস্বরূপ, একটি "ডিবাগ" চিত্র ইত্যাদি। তুমি সমস্যাটি কল্পনা করো স্পষ্টতই।

if() ছাড়া ব্রাউজারগুলির জন্য ফলব্যাক

if() জাদুকরীভাবে স্বয়ংক্রিয় অবক্ষয় ঘটায় না: তোমার একটি রিজার্ভেশন মূল্য প্রয়োজন।। প্রথমে একটি ক্রস-ব্রাউজার-নিরাপদ বিবৃতি দিন, তারপর if() সংস্করণটি যা সমর্থিত হলে এটিকে ওভাররাইড করে। এটি প্রস্তাবিত প্যাটার্ন.

.box {
  padding: 16px; /* Fallback para navegadores sin if() */
  padding: if(
    style(--size: "2xl"): 24px;
    else: 16px
  );
}

সুতরাং, if() ছাড়া ব্রাউজারগুলি প্রথম লাইনটি ব্যবহার করবে; যারা এটি সমর্থন করে তারা দ্বিতীয়টি মূল্যায়ন করবে এবং এটি প্রতিস্থাপন করবে.

সামঞ্জস্যতা এবং বর্তমান অবস্থা

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

কিছু অনুমান প্রায় ~৪৭% কভারেজ আপাতত (প্রাথমিক প্রকাশের সময়)। আমার সুপারিশ হল, পরিবেশ নিয়ন্ত্রণ করলেই কেবল উৎপাদনে এটি ব্যবহার করা উচিত অথবা যদি তোমার ফলব্যাক কৌশল শক্ত; অন্যথায়, এটি প্রগতিশীল স্তরে বা নিয়ন্ত্রিত পরিবেশে প্রয়োগ করুন।

@মিডিয়া, @supports এবং @container এর সাথে সম্পর্ক

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

কম্পোনেন্ট-ভিত্তিক নকশায়, এই যুগল @কন্টেইনার (কন্টেইনার লেআউটের প্রতিক্রিয়া জানাতে) এবং if() স্টাইল() সহ (উপাদানের নির্দিষ্ট বৈশিষ্ট্যের পরিবর্তনের জন্য) খুব শক্তিশালী প্রবাহ খুলে দেয় এবং কম শব্দসমষ্টি.

@when এবং @else প্রস্তাব

if() ছাড়াও, এর মতো প্রস্তাবও রয়েছে @কখন / @অন্যথায় যা নিয়ম স্তরে শর্তসাপেক্ষ তৈরি করে, একটি বাক্য গঠনের জন্য ডিজাইন করা হয়েছে জটিল অবস্থাগুলো ভালোভাবে পড়ুন যা @media এবং @supports একসাথে শৃঙ্খলিত থাকায়, বজায় রাখা কঠিন হয়ে পড়ে।

@when media(width <= 600px) {
  .container { display: flex; flex-direction: column; }
}
@else {
  .container { display: flex; flex-direction: row; }
}

আপনি একত্রিত করতে পারেন এবং, অথবা, না এবং গ্রুপিংয়ের জন্য বন্ধনী ব্যবহার করুন। তুচ্ছ ক্ষেত্রে, একটি @media যথেষ্ট, তবে আরও সমৃদ্ধ সংমিশ্রণে @when/@else পঠনযোগ্যতা অর্জন করে.

@when media(width <= 600px) and supports(display: grid) {
  /* ... */
}
@else media(width >= 600px) and supports(display: flex) {
  /* ... */
}
@else {
  /* Fallback final */
}

এই নিয়মগুলি এখনও বিকশিত হচ্ছে এবং তাদের প্রকৃত বাস্তবায়নে সময় লাগতে পারে, তবে তাদের লক্ষ্য হল বর্ধিত শর্তাবলী সরলীকৃত করুন স্টাইল শিট স্তরে।

প্যাটার্ন, সীমা এবং টিপস

• শাখা-প্রশাখা পরিষ্কার রাখুন সম্ভাব্যতা এবং স্পষ্টতার জন্য। প্রথমটি সত্যই জিতবে, তাই কর্মক্ষমতা এবং পাঠযোগ্যতা মাথায় রেখে সাজান।
• আমেরিকা অন্যথায় চূড়ান্ত ডিফল্ট মান হিসেবে; যদি আপনি এটিকে অগ্রসর করেন, তুমি মূল্যায়ন ছোট করো বাকি শর্তগুলির।
• মনে রাখবেন যে if() সিদ্ধান্ত নেয় একের পর এক সম্পত্তিযদি আপনার একসাথে অনেক কিছু পরিবর্তন করার প্রয়োজন হয়, তাহলে @media/@supports ব্যবহার করার কথা বিবেচনা করুন অথবা সেগুলোকে একাধিক বিবৃতিতে ভাগ করুন।
• পাড়া ডিবাগ, একটি উজ্জ্বল রঙ বা একটি সতর্কীকরণ চিত্র সহ মাঝখানে একটি else বিবৃতি যোগ করুন। আপনি দ্রুত দেখতে পাবেন কোন শাখাটি ব্যর্থ হচ্ছে।
• সঙ্গে মেশা কাস্টম বৈশিষ্ট্য HTML (ডেটা-অ্যাট্রিবিউট) অথবা অন্যান্য নির্বাচক থেকে স্টেট রপ্তানি করতে এবং JS ছাড়াই মান নির্ধারণ করতে।
• খুব লম্বা শৃঙ্খলিত শর্তাবলীর অপব্যবহার এড়িয়ে চলুন; যদি আপনি পড়া হারিয়ে ফেলেন, তাহলে এখনই সময় যুক্তিবিদ্যার নির্যাস অন্য জায়গায়।

"সাধারণ" এর সাথে দ্রুত তুলনা

আগে: বেস + @media/@ পুনর্লিখন সহ সমর্থন; এখন: যদি() ইন্টারলিভড যুক্তি বিভক্ত না করে। কম CSS, ঘোষণায় আরও স্থানীয় সংহতি। রক্ষণাবেক্ষণ জয় করুন.

আগে: ক্লাস বা স্টেট টগল করার জন্য JS; এখন: কাস্টম প্রোপার্টি + স্টাইল() বৈশিষ্ট্য নির্ধারণ করতে। if() দিয়ে আপনি নির্ভরতা কমাবেন অনুজ্ঞাসূচক কোড সহজ দৃশ্যমান পরিবর্তনের জন্য।

বাস্তবায়ন নোট এবং ভবিষ্যতের সমন্বয়

if() এর আগমন ভাষা বিবর্তনের অন্যান্য ধারার সাথে মিলে যায়: স্টাইল কোয়েরি আ লা কার্টে, সম্ভব রেঞ্জ কোয়েরি ভবিষ্যতের সাথে একীভূত এবং প্রস্তাবনা @ফাংশন কাস্টম ফাংশনের জন্য। একসাথে, এই টুকরোগুলি আরও বেশি কিছু আঁকে ঘোষণামূলক এবং সংযোজনযোগ্য.

আপাতত, তিনটি উপলব্ধ পরীক্ষার উপর মনোযোগ দিন (স্টাইল(), গড় (), সমর্থন করে()) এবং আপনার ফলব্যাক কৌশলকে দৃঢ় করুন। Chrome 137 এর মাধ্যমে, আপনি এখন শুরু করতে পারেন প্রোটোটাইপ এবং পরিমাপ আপনার কোডবেসের উপর প্রকৃত প্রভাব।

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