বহু বছর ধরে আমরা ধরে নিয়েছিলাম যে CSS "চিন্তা" করতে পারে না। তা সত্ত্বেও, আমাদের কিছু বিকল্প উপায় ছিল: @media, @supports, @container, এবং fallback ভেরিয়েবলগুলো আমাদেরকে প্রেক্ষাপট অনুযায়ী স্টাইল পরিবর্তন করার সুযোগ দিত। এখন এমন একটি নতুন ফিচার এসেছে যা মানকে আরও উন্নত করে এবং ডিজাইনের ক্ষেত্রে আমাদের যুক্তিবোধের সাথে আরও ভালোভাবে খাপ খায়: সরাসরি প্রপার্টি ভ্যালুর উপর if() কন্ডিশনাল ফাংশন ব্যবহার করার সুবিধা।
এটা শুধু কথার কথা নয়: ক্রোম ১৩৭ থেকে, আপনি স্টাইল, মিডিয়া এবং সাপোর্ট কোয়েরির উপর ভিত্তি করে শর্তসাপেক্ষ লজিকসহ ইনলাইন স্টাইল তৈরি করতে `if()` ব্যবহার করে দেখতে পারেন। তবে, ক্রোমিয়ামের বাইরে এর সাপোর্ট এখনও সীমিত, তাই এটি বিচক্ষণতার সাথে ব্যবহার করা উচিত এবং যেসব ব্রাউজার এটি বোঝে না, তাদের জন্য ফলব্যাকের সাথে মিলিয়ে ব্যবহার করা প্রয়োজন ।
আগে যা ছিল: "শর্তাবলী" যা আমরা ইতিমধ্যেই CSS-এ ব্যবহার করেছি
`if()`-এর আগেও CSS-এ শর্তসাপেক্ষ ব্যবস্থা ছিল, যার প্রত্যেকটির নিজস্ব পরিধি ছিল। এগুলো প্রকৃত `if` স্টেটমেন্ট নয়, কিন্তু নিজ নিজ ক্ষেত্রে কাজ করে:
- @media: উইন্ডো বা ডিভাইস যদি কোনও মানদণ্ড (প্রস্থ, ওরিয়েন্টেশন, পয়েন্টার, ইত্যাদি) পূরণ করে তবে নিয়ম প্রয়োগ করে।
- @সমর্থন করে: ব্রাউজার যদি কোনও বৈশিষ্ট্য বা মান বোঝে তবে স্টাইল সক্রিয় করে।
- @কন্টেইনার: একটি পাত্রের আকার বা স্টাইলের উপর প্রতিক্রিয়া দেখায়, যা উপাদান-ভিত্তিক ডিজাইনের জন্য কার্যকর।
- var () ডিফল্ট মান সহ: if নয়, তবে "যদি ভেরিয়েবলটি বিদ্যমান না থাকে, তাহলে এই ফলব্যাকটি ব্যবহার করুন" অনুমতি দেয়।
এই পদ্ধতিগুলো শক্তিশালী, যদিও এগুলো তাদের নির্দিষ্ট উদ্দেশ্যের সাথে আবদ্ধ: যেমন মিডিয়া, সাপোর্ট বা কন্টেইনার । if() ফাংশন এই টুলগুলোকে প্রতিস্থাপন করে না; বরং, এটি সেগুলোকে প্রপার্টি ভ্যালুগুলোর মধ্যে সূক্ষ্ম ও আন্তঃসংযুক্ত উপায়ে সমন্বিত করে।
CSS-এ if() কী এবং কেন এটি গুরুত্বপূর্ণ
`if()` ফাংশনটি আপনাকে কোনো প্রপার্টির ভ্যালুর মধ্যে শর্ত-ভ্যালু জোড়ের একটি তালিকা নির্ধারণ করার সুযোগ দেয়, যা ক্রমানুসারে মূল্যায়ন করা হয়। যখন প্রথম শর্তটি সত্য হয়, তখন এর সাথে যুক্ত ভ্যালুটিই "জয়ী" হয়। এটি জাভাস্ক্রিপ্টের `if...else` স্টেটমেন্টের মতোই একটি কার্যপ্রবাহ , কিন্তু এটি CSS-এর মধ্যে অন্তর্ভুক্ত।
এর বর্তমান সংস্করণে, `if()` তার শর্তের মধ্যে তিন ধরনের কোয়েরি বোঝে: `style()` (এলিমেন্টটির নিজস্ব স্টাইল সম্পর্কিত কোয়েরি), `media()` (মিডিয়া সম্পর্কিত কোয়েরি), এবং `supports() ` (ফিচার সাপোর্ট সম্পর্কিত কোয়েরি)। এছাড়াও, এমন ক্ষেত্রগুলোর জন্য আপনি একটি `else`: ভ্যালু যোগ করতে পারেন যেখানে অন্য কোনো বিকল্প উপযুক্ত নয়।
বিস্তারিত বাক্য গঠন এবং মূল্যায়ন
এর সাধারণ কাঠামোটি হলো সেমিকোলন দ্বারা পৃথক করা <if-condition>: <value> ধরনের শাখাগুলির একটি তালিকা । প্রতিটি শর্ত হয় একটি <if-test> (style(), media() বা supports()) অথবা else কীওয়ার্ড , যা সর্বদা true হিসেবে গণ্য হয়।
/* 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
);
ইঞ্জিনটি ক্রমানুসারে শাখাগুলো মূল্যায়ন করে। যেটি প্রথমে সত্য হয়, সেটির মান ফেরত দেয় । যদি কোনো শর্ত সত্য না হয় এবং কোনো else স্টেটমেন্ট না থাকে, তাহলে ফাংশনের ফলাফলটি নিশ্চিতভাবে-অবৈধ (guaranteed-invalid) হয়, যা একটি অবৈধ মানের মতো আচরণ করে এবং বাহ্যিক ফলব্যাকগুলোকে (যেমন, একটি কাস্টম প্রপার্টির ডিফল্ট মান বা পূর্ববর্তী কোনো ক্যাসকেডিং মান) কার্যকর হতে দেয় ।
একটি গুরুত্বপূর্ণ বিষয় হলো: তালিকার মধ্যে কোনো শর্ত বা নির্দিষ্ট মান অবৈধ হলে, তা পুরো ফাংশনটিকে অবৈধ করে না ; পার্সার পরবর্তী জোড়া নিয়ে কাজ চালিয়ে যায়। এর ফলে `if()` ফাংশনটি ব্রাঞ্চের মধ্যে পয়েন্ট ফেইলারের ক্ষেত্রেও সহনশীল থাকে ।
পরীক্ষার ধরণ: স্টাইল(), মিডিয়া(), এবং সাপোর্ট()
স্টাইল(): স্টাইল কোয়েরি
`style()` ব্যবহার করে স্টাইল কোয়েরি করার মাধ্যমে আপনি যাচাই করতে পারেন যে, টার্গেট এলিমেন্টের কোনো প্রপার্টির একটি নির্দিষ্ট ভ্যালু আছে কি না (বিশেষ করে কাস্টম প্রপার্টির ক্ষেত্রে এটি খুবই উপযোগী )। `@container` ব্যবহার করে করা স্টাইল কোয়েরির থেকে ভিন্ন, `if( )`-এর ভেতরের `style( )` কোনো প্যারেন্টের উপর নির্ভর না করেই সরাসরি এলিমেন্টটির উপরেই এবং তাৎক্ষণিকভাবে ইভ্যালুয়েট হয়।
/* 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
);
}
` style()`- এর মধ্যে আপনি `and` , `or`, এবং `not`- এর মতো লজিক্যাল অপারেটর , সেইসাথে গ্রুপিংয়ের জন্য বন্ধনী ব্যবহার করতে পারেন, যা বিভিন্ন অবস্থার জটিল সংমিশ্রণকে সহজ করে তোলে। মনে রাখবেন যে `@container` স্টাইল কোয়েরি বর্তমানে "সাধারণ" প্রোপার্টি সমর্থন করে না (শুধুমাত্র কাস্টম প্রোপার্টি সমর্থন করে), অন্যদিকে `if()`-এর মধ্যে থাকা `style()` এলিমেন্টটির নিজস্ব একটিমাত্র প্রোপার্টির মান নির্ধারণ করতে ব্যবহৃত হয়।
মিডিয়া(): ইন্টারলিভড মিডিয়া কোয়েরি
`media()` ব্যবহার করে , স্টাইলটিকে আরেকটি `@media` ব্লকে আলাদা না করেই, একটি নির্দিষ্ট মিডিয়া কোয়েরির মাধ্যমে কোনো প্রপার্টির মান নিয়ন্ত্রণ করা যায়। যখন আপনি শুধুমাত্র পরিবেশের উপর নির্ভর করে কোনো প্রপার্টির পরিবর্তন করতে চান , তখন এটি একটি আদর্শ উপায়।
/* Ejemplo para puntero fino vs grueso */
button {
aspect-ratio: 1;
width: if(
media(any-pointer: fine): 30px;
else: 44px
);
}
এই ব্লকটি একটি বেস রুল এবং প্রপার্টিটিকে রিডিফাইন করে এমন একটি @media লেখার সমতুল্য , কিন্তু এটি লজিককে এক জায়গায় কেন্দ্রীভূত করে। এছাড়াও আপনি AND/OR/NOT লজিকের সাথে মিডিয়া টাইপ (যেমন, প্রিন্ট) বা মিডিয়া ফিচার ব্যবহার করতে পারেন ।
/* 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() ` ব্যবহার করে আপনি যাচাই করতে পারেন যে ব্রাউজারটি কোনো নির্দিষ্ট বৈশিষ্ট্য (প্রপার্টি, ভ্যালু, সিলেক্টর, ইত্যাদি) বুঝতে পারে কি না এবং সেই অনুযায়ী ভ্যালুটি বেছে নিতে পারেন। `@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() `-এর ভিতরে `supports() ` সহ একটি ব্রাঞ্চ কাজ করার জন্য, ব্রাউজারটিকেও `if()` সমর্থন করতে হবে। এই কারণেই ফাংশনের বাইরে শক্তিশালী ফলব্যাক সংজ্ঞায়িত করার গুরুত্ব রয়েছে ।
অন্যটির ফ্রিকোয়েন্সি এবং অবস্থান
আপনি ফাংশনের ভিতরে এক বা একাধিক `else` স্টেটমেন্ট ব্যবহার করতে পারেন এবং সেগুলোকে আপনার পছন্দমতো যেকোনো জায়গায় রাখতে পারেন। তবে, ডিফল্ট হিসেবে শেষে একটি ` else` রাখাই সবচেয়ে প্রচলিত। আপনি যদি শুরুতে `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)
);
}
তাছাড়া, শুধুমাত্র else: value , বা এমনকি একটি খালি value দিয়ে গঠিত একটি if() ফাংশন বাক্যগঠনগতভাবে বৈধ হলেও খুব একটা কার্যকরী নয়। যদি কোনো লজিক জড়িত না থাকে, তবে সরাসরি value নির্ধারণ করে দেওয়াই শ্রেয় ।
পূর্ণ, আংশিক মান এবং নেস্টিং
ফাংশনটি কোনো প্রপার্টির সম্পূর্ণ মান অথবা একটি শর্টহ্যান্ডের মধ্যে এর কেবল একটি অংশ দখল করতে পারে । এর ফলে একই ডিক্লারেশন থেকে বের না হয়েই অত্যন্ত অভিব্যক্তিপূর্ণ কম্পোজিশন তৈরি করা যায় এবং কোডের পুনরাবৃত্তিও কমে।
/* 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)
);
}
`if()` ফাংশনগুলোকে অন্য `if()` ফাংশনের ভেতরে, এমনকি `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() ব্যবহার করে কোনো শর্টহ্যান্ডের মধ্যে margin-top-এর মতো প্রপার্টির স্বতন্ত্র অংশ বা কোনো নির্দিষ্ট ব্যাকগ্রাউন্ড কম্পোনেন্টের বিষয়ও নির্ধারণ করতে পারি ।
ব্যবহারিক উদাহরণগুলি একত্রিত করা হয়েছে
১) পয়েন্টারের ধরণ অনুসারে বোতামটি অ্যাক্সেসযোগ্য
ডিভাইসটিতে যদি ফাইন পয়েন্টার থাকে (যেমন, মাউস), তাহলে বাটনটি ছোট হবে; টাচস্ক্রিনের ক্ষেত্রে, অ্যাক্সেসিবিলিটি সংক্রান্ত সুপারিশগুলো মেনে চলার জন্য আমরা এর আকার বাড়িয়ে ৪৪ পিক্সেল করে দিই। একটি ডিক্লারেশন, দুটি আচরণ ।
button {
aspect-ratio: 1;
width: if(
media(any-pointer: fine): 30px;
else: 44px
);
}
উপরেরটি একটি বেস ও একটি @media ব্লকের সমতুল্য, কিন্তু এই পদ্ধতিতে লজিক একাধিক সাইটে ছড়ানো হয় না এবং ভুলের সম্ভাবনাও কমে যায়।
২) ফলব্যাক সহ বিস্তৃত রঙ
যদি ব্রাউজার OKLCH বোঝে , আমরা সেই রঙটি ব্যবহার করি এবং সেই সাথে ::after- এ একটি তথ্যমূলক বার্তা প্রদর্শন করি । অন্যথায়, আমরা একটি নিরাপদ হেক্স প্রয়োগ করি। ঝামেলাহীন সামঞ্জস্যতা ।
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 স্ট্যাটাস অনুসারে পরিবর্তিত কার্ড
`data-status`- এ স্টেট সংরক্ষণ করুন , `attr()` ব্যবহার করে তা একটি কাস্টম প্রপার্টিতে পড়ুন এবং `style()` দিয়ে সিদ্ধান্ত নিন। স্বয়ংসম্পূর্ণ কম্পোনেন্ট তৈরি করার এটি একটি মার্জিত উপায় ।
<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
);
}
এই প্যাটার্নের সাহায্যে, অতিরিক্ত CSS বা ক্লাস-টগলিং JS পরিবর্তন না করেই HTML-এর data-attribute পরিবর্তন করলে একাধিক প্রপার্টি পরিবর্তিত হয়।
অন্যথা এবং মূল্যায়নের ক্রম: কিভাবে if() চিন্তা করে
শর্তগুলো যে ক্রমে আসে, সেই ক্রমেই মূল্যায়ন করা হয় । প্রথম শর্তটি সত্য হলে মানটি ফেরত দেওয়া হয় এবং মূল্যায়ন থেমে যায়। যদি কোনোটিই উত্তীর্ণ না হয়, তাহলে ফলাফলটি নিশ্চিতভাবে অবৈধ হবে , যা বাহ্যিক ফলব্যাকের (যেমন, ক্রমান্বয়ে আসা পূর্ববর্তী কোনো মান বা ব্রাউজারের ডিফল্ট মান) সুযোগ দেয়।
ডিবাগিংয়ের জন্য আপনি মাঝখানে else- ও রাখতে পারেন : যদি আপনি জানতে চান যে প্রথম শর্তটি কাজ করছে না, তাহলে এমন একটি else রাখুন যা, উদাহরণস্বরূপ, একটি "ডিবাগ" ইমেজ রিটার্ন করে এবং এর ফলে আপনি সমস্যাটি স্পষ্টভাবে দেখতে পারবেন।
if() ছাড়া ব্রাউজারগুলির জন্য ফলব্যাক
`if()` স্বয়ংক্রিয়ভাবে ভার্সন ডাউনগ্রেড করে না; আপনার একটি ফলব্যাক প্রয়োজন । প্রথমে, একটি ব্রাউজার-সেফ ডিক্লারেশন লিখুন, এবং তারপর সমর্থিত ভার্সনটিকে ওভাররাইড করতে `if()` ব্যবহার করুন। এটিই প্রস্তাবিত পদ্ধতি ।
.box {
padding: 16px; /* Fallback para navegadores sin if() */
padding: if(
style(--size: "2xl"): 24px;
else: 16px
);
}
সুতরাং, যেসব ব্রাউজারে if() নেই, সেগুলো প্রথম লাইনটি ব্যবহার করবে; আর যেসব ব্রাউজারে এটি সমর্থিত, সেগুলো দ্বিতীয় লাইনটি মূল্যায়ন করে প্রতিস্থাপন করবে ।
সামঞ্জস্যতা এবং বর্তমান অবস্থা
সর্বশেষ তথ্য অনুসারে, Chrome 137-এ ইতিমধ্যেই if() ফাংশন পরীক্ষা করার সুযোগ রয়েছে এবং Edge-এর সমতুল্য সংস্করণেও এই সমর্থনটি অন্তর্ভুক্ত হয়েছে। অন্যান্য সূত্র থেকে জানা যায় যে, Chromium-এর বাইরে এই বাস্তবায়নটি এখনও ব্যাপকভাবে প্রচলিত নয় এবং W3C-তে এই প্রস্তাবটি আরও পরিপক্ক হতে থাকবে, তাই প্রত্যাশা বাস্তবসম্মত রাখাই শ্রেয় ।
কিছু হিসাব অনুযায়ী, এটি প্রথম প্রকাশের সময় প্রায় ৪৭% ক্ষেত্রে ব্যবহৃত হয়েছিল । আমার পরামর্শ হলো, প্রোডাকশনে এটি কেবল তখনই ব্যবহার করুন যখন আপনি পরিবেশটি নিয়ন্ত্রণ করতে পারেন অথবা আপনার ফলব্যাক কৌশলটি শক্তিশালী হয়; অন্যথায়, এটি প্রগ্রেসিভ লেয়ারে বা নিয়ন্ত্রিত পরিবেশে প্রয়োগ করুন।
@মিডিয়া, @supports এবং @container এর সাথে সম্পর্ক
`if()` এবং `at` নিয়মগুলো একে অপরের পরিপূরক, পরস্পরবিরোধী নয়। একাধিক প্রপার্টি/সিলেক্টরের উপর নিয়মের সম্পূর্ণ সেট প্রয়োগ করতে চাইলে `@media` বা `@supports` ব্যবহার করা এখনও শ্রেয়। যখন একটিমাত্র মানের উপর এককালীন সিদ্ধান্তের প্রয়োজন হয়, তখন `if()` সবচেয়ে কার্যকর। এটি লজিককে প্রপার্টির সাথে আবদ্ধ রাখে, যা রক্ষণাবেক্ষণকে সহজ করে তোলে।
কম্পোনেন্ট-ভিত্তিক ডিজাইনে, @container (কন্টেইনার লেআউটের সাথে সাড়া দেওয়ার জন্য) এবং if() ও style() (কম্পোনেন্টটির নিজস্ব নির্দিষ্ট প্রোপার্টি পরিবর্তন করার জন্য) -এর যুগলবন্দী অত্যন্ত শক্তিশালী এবং সংক্ষিপ্ত ফ্লো তৈরি করে ।
@when এবং @else প্রস্তাব
if() ছাড়াও @when / @else-এর মতো প্রস্তাবনা রয়েছে , যা রুল লেভেলে কন্ডিশনাল যুক্ত করে। এর সিনট্যাক্সটি এমনভাবে ডিজাইন করা হয়েছে যাতে জটিল শর্তগুলো আরও ভালোভাবে পড়া যায়, যা চেইনড @media এবং @supports-এর কারণে রক্ষণাবেক্ষণ করা কঠিন হয়ে পড়ে।
@when media(width <= 600px) {
.container { display: flex; flex-direction: column; }
}
@else {
.container { display: flex; flex-direction: row; }
}
আপনি AND, OR, এবং NOT একত্রিত করতে পারেন এবং গ্রুপ করার জন্য বন্ধনী ব্যবহার করতে পারেন। সাধারণ ক্ষেত্রে, @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 ছাড়াই মান নির্ধারণ করতে।
- খুব লম্বা শৃঙ্খলিত শর্তাবলীর অপব্যবহার এড়িয়ে চলুন; যদি আপনি পড়া হারিয়ে ফেলেন, তাহলে এখনই সময় যুক্তিবিদ্যার নির্যাস অন্য জায়গায়।
"সাধারণ" এর সাথে দ্রুত তুলনা
আগে: রিরাইট সহ base + @media/@supports ব্যবহার করা হতো; এখন: লজিক না ভাগ করে if() ফাংশন ব্যবহার করা হয় । এতে CSS কোড কম ছড়ানো থাকে, ডিক্লারেশনের মধ্যেই স্থানীয় সংহতি বাড়ে। ফলে রক্ষণাবেক্ষণযোগ্যতা বৃদ্ধি পায় ।
পূর্বে: ক্লাস বা স্টেট টগল করতে জাভাস্ক্রিপ্ট ব্যবহার করা হতো; এখন: কাস্টম প্রোপার্টি এবং স্টাইল() ব্যবহার করে প্রোপার্টি নির্ধারণ করা যায়। if() ব্যবহারের মাধ্যমে, সাধারণ ভিজ্যুয়াল পরিবর্তনের জন্য ইম্পারেটিভ কোডের উপর নির্ভরতা কমানো যায় ।
বাস্তবায়ন নোট এবং ভবিষ্যতের সমন্বয়
`if()`-এর আগমন ভাষার বিবর্তনের অন্যান্য ধারার সাথে একই সময়ে ঘটেছে: অন-ডিমান্ড স্টাইল কোয়েরি , ভবিষ্যতে সমন্বিত হওয়ার সম্ভাব্য রেঞ্জ কোয়েরি , এবং কাস্টম ফাংশনের জন্য প্রস্তাবিত `@function` । এই উপাদানগুলো একত্রে আরও বেশি ডিক্লারেটিভ এবং কম্পোজেবল CSS- এর একটি চিত্র তুলে ধরে ।
আপাতত, উপলব্ধ তিনটি টেস্টের ( style() , media() , supports() ) উপর মনোযোগ দিন এবং আপনার ফলব্যাক কৌশলকে সুসংহত করুন। ক্রোম ১৩৭ দিয়ে, আপনি প্রোটোটাইপিং শুরু করতে এবং আপনার কোডবেসের উপর এর প্রকৃত প্রভাব পরিমাপ করতে পারবেন।
CSS-এ কন্ডিশনাল ব্যবহারের ধারণাটি একটি ইচ্ছা থেকে একটি বাস্তব টুলে পরিণত হয়েছে, যা কিছু সূক্ষ্ম পরিবর্তনের সাথে ইতিমধ্যেই সামঞ্জস্যপূর্ণ পরিবেশে ব্যবহার করা যায়। `if()`-এর মাধ্যমে স্টাইলগুলো মধ্যবর্তী লজিক, কম পুনরাবৃত্তি এবং উন্নত এনক্যাপসুলেশন লাভ করে এবং এটি কাস্টম ভেরিয়েবল, ডেটা অ্যাট্রিবিউট এবং মিডিয়া কোয়েরির সাথে পুরোপুরি খাপ খায়। যদিও এর সমর্থন এখনও সর্বজনীন নয়, প্রগতিশীল প্যাটার্ন গ্রহণ করা এবং ফলব্যাক প্রস্তুত রাখা আপনাকে আজ থেকেই CSS নিয়ে এমন একটি চিন্তাভাবনার সুবিধা পেতে সাহায্য করবে যা আমাদের ইন্টারফেস ডিজাইনের পদ্ধতির কাছাকাছি: যেখানে প্রয়োজন ঠিক সেখানেই সিদ্ধান্ত নেওয়া ।