M

MLOG

বাংলা

CSS @when নিয়মটি সম্পর্কে জানুন, এটি একটি শক্তিশালী ফিচার যা ব্রাউজার সাপোর্ট, ভিউপোর্ট সাইজ এবং আরও অনেক কিছুর উপর ভিত্তি করে শর্তসাপেক্ষ স্টাইল প্রয়োগ করতে সক্ষম করে। ব্যবহারিক উদাহরণ সহ শিখুন।

CSS @when নিয়ম: শর্তসাপেক্ষ স্টাইল প্রয়োগে দক্ষতা অর্জন

CSS-এর জগৎ ক্রমাগত বিকশিত হচ্ছে, ডেভেলপারদের ওয়েব পেজ স্টাইল করার জন্য আরও শক্তিশালী এবং নমনীয় উপায় প্রদান করছে। এরকম একটি ফিচার যা জনপ্রিয়তা পাচ্ছে তা হল @when নিয়ম, যা CSS Conditional Rules Module Level 1 নামেও পরিচিত। এই নিয়মটি আপনাকে নির্দিষ্ট শর্ত পূরণ হওয়ার উপর ভিত্তি করে শর্তসাপেক্ষভাবে CSS স্টাইল প্রয়োগ করার সুযোগ দেয়। এটি রেসপন্সিভ ডিজাইন, ফিচার সনাক্তকরণ এবং আরও শক্তিশালী ও অভিযোজনযোগ্য স্টাইলশীট তৈরির জন্য একটি শক্তিশালী টুল।

CSS @when নিয়মটি কী?

@when নিয়মটি CSS-এর একটি শর্তসাপেক্ষ অ্যাট-রুল (at-rule) যা আপনাকে এমন স্টাইল নির্ধারণ করতে দেয় যা শুধুমাত্র নির্দিষ্ট কিছু শর্ত সত্য হলেই প্রয়োগ করা হবে। এটিকে আপনার CSS-এর জন্য একটি if স্টেটমেন্ট হিসেবে ভাবতে পারেন। মিডিয়া কোয়েরি, যা মূলত ভিউপোর্টের বৈশিষ্ট্যের (স্ক্রিন সাইজ, ওরিয়েন্টেশন ইত্যাদি) উপর ফোকাস করে, তার বিপরীতে @when শর্তসাপেক্ষ স্টাইলিং পরিচালনা করার জন্য আরও সাধারণ এবং প্রসারণযোগ্য উপায় সরবরাহ করে। এটি @supports এবং @media-এর মতো বিদ্যমান শর্তসাপেক্ষ অ্যাট-রুলগুলোকে আরও প্রসারিত করে।

@when ব্যবহারের মূল সুবিধা

@when নিয়মের সিনট্যাক্স

The basic syntax of the @when rule is as follows: 
@when <condition> {
  /* CSS rules to apply when the condition is true */
}

<condition> যেকোনো বৈধ বুলিয়ান এক্সপ্রেশন হতে পারে যা সত্য বা মিথ্যা হিসেবে গণ্য হয়। এই এক্সপ্রেশনে প্রায়শই অন্তর্ভুক্ত থাকে:

@when-এর বাস্তব উদাহরণ

Let's explore some practical examples to illustrate the power and versatility of the @when rule.

১. @when এবং মিডিয়া কোয়েরি দিয়ে রেসপন্সিভ ডিজাইন

@when-এর সবচেয়ে সাধারণ ব্যবহার হল রেসপন্সিভ ডিজাইনে, যেখানে আপনি স্ক্রিনের আকারের উপর ভিত্তি করে স্টাইল পরিবর্তন করেন। যদিও মিডিয়া কোয়েরি একাই এটি করতে পারে, @when একটি আরও কাঠামোগত এবং পাঠযোগ্য পদ্ধতি প্রদান করে, বিশেষ করে যখন জটিল শর্তাবলী নিয়ে কাজ করা হয়।

@when (min-width: 768px) and (max-width: 1023px) {
  body {
    font-size: 18px;
    line-height: 1.6;
  }
  .container {
    width: 720px;
    margin: 0 auto;
  }
}

এই উদাহরণে, @when ব্লকের ভেতরের স্টাইলগুলো তখনই প্রয়োগ করা হবে যখন স্ক্রিনের প্রস্থ 768px এবং 1023px-এর মধ্যে থাকবে (সাধারণত ট্যাবলেটের আকার)। এটি নির্দিষ্ট ভিউপোর্ট পরিসরের জন্য স্টাইল নির্ধারণ করার একটি স্পষ্ট এবং সংক্ষিপ্ত উপায় প্রদান করে।

আন্তর্জাতিকীকরণ নোট: বিশ্বব্যাপী দর্শকদের জন্য রেসপন্সিভ ডিজাইন অত্যন্ত গুরুত্বপূর্ণ। বিভিন্ন অঞ্চলের বিভিন্ন স্ক্রিন সাইজের কথা বিবেচনা করুন। উদাহরণস্বরূপ, কিছু দেশে মোবাইলের ব্যবহার বেশি, যা মোবাইল-ফার্স্ট ডিজাইনকে আরও বেশি জরুরি করে তোলে।

২. @when এবং @supports দিয়ে ফিচার সনাক্তকরণ

@when-কে @supports-এর সাথে একত্রিত করে এমন স্টাইল প্রয়োগ করা যায় যা শুধুমাত্র ব্রাউজার দ্বারা একটি নির্দিষ্ট CSS ফিচার সমর্থিত হলেই কাজ করবে। এটি আপনাকে আপনার ওয়েবসাইটকে প্রগতিশীলভাবে উন্নত করতে সাহায্য করে, আধুনিক ব্রাউজার ব্যবহারকারীদের জন্য একটি উন্নত অভিজ্ঞতা প্রদান করার পাশাপাশি পুরানো ব্রাউজারগুলোর সাথে সামঞ্জস্যতা বজায় রাখে।

@when supports(display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 20px;
  }
}

@when not supports(display: grid) {
  .container {
    /* Fallback styles for browsers that don't support grid */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .item {
    width: calc(50% - 10px); /* Adjust width for older browsers */
  }
}

এখানে, আমরা ব্রাউজার CSS Grid Layout সমর্থন করে কিনা তা পরীক্ষা করতে @supports ব্যবহার করি। যদি করে, আমরা .container-এ গ্রিড-ভিত্তিক স্টাইল প্রয়োগ করি। যদি না করে, আমরা পুরোনো ব্রাউজারগুলিতে একটি অনুরূপ লেআউট অর্জন নিশ্চিত করতে ফ্লেক্সবক্স ব্যবহার করে ফলব্যাক স্টাইল সরবরাহ করি।

গ্লোবাল অ্যাক্সেসিবিলিটি নোট: অ্যাক্সেসিবিলিটির জন্য ফিচার সনাক্তকরণ গুরুত্বপূর্ণ। পুরানো ব্রাউজারগুলিতে নতুন ARIA অ্যাট্রিবিউট বা সিমেন্টিক HTML5 এলিমেন্টের জন্য সাপোর্টের অভাব থাকতে পারে। বিষয়বস্তু যাতে অ্যাক্সেসযোগ্য থাকে তা নিশ্চিত করতে উপযুক্ত ফলব্যাক প্রদান করুন।

৩. মিডিয়া কোয়েরি এবং ফিচার কোয়েরি একত্রিত করা

@when-এর আসল শক্তিটি মিডিয়া কোয়েরি এবং ফিচার কোয়েরি একত্রিত করে আরও জটিল এবং সূক্ষ্ম শর্তসাপেক্ষ স্টাইলিং নিয়ম তৈরি করার ক্ষমতার মধ্যে নিহিত।

@when (min-width: 768px) and supports(backdrop-filter: blur(10px)) {
  .modal {
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
  }
}

এই উদাহরণে, .modal এলিমেন্টের একটি ঝাপসা ব্যাকড্রপ কেবল তখনই থাকবে যখন স্ক্রিনের প্রস্থ কমপক্ষে 768px হবে এবং ব্রাউজার backdrop-filter প্রপার্টি সমর্থন করবে। এটি আপনাকে আধুনিক ব্রাউজারগুলিতে দৃশ্যত আকর্ষণীয় প্রভাব তৈরি করার সুযোগ দেয় এবং পুরানো ব্রাউজারগুলিতে সম্ভাব্য পারফরম্যান্স সমস্যা বা রেন্ডারিং ত্রুটি এড়াতে সাহায্য করে।

৪. কাস্টম প্রপার্টি (CSS ভ্যারিয়েবল) ভিত্তিক স্টাইলিং

@when কাস্টম প্রপার্টি (CSS ভ্যারিয়েবল নামেও পরিচিত) এর সাথে একত্রে ব্যবহার করে ডাইনামিক এবং স্টেট-ভিত্তিক স্টাইলিং তৈরি করা যায়। আপনি জাভাস্ক্রিপ্ট ব্যবহার করে একটি কাস্টম প্রপার্টির মান আপডেট করতে পারেন এবং তারপর সেই মানের উপর ভিত্তি করে বিভিন্ন স্টাইল প্রয়োগ করতে @when ব্যবহার করতে পারেন।

প্রথমে, একটি কাস্টম প্রপার্টি নির্ধারণ করুন:

:root {
  --theme-color: #007bff; /* Default theme color */
  --is-dark-mode: false;
}

তারপর, কাস্টম প্রপার্টির মানের উপর ভিত্তি করে স্টাইল প্রয়োগ করতে @when ব্যবহার করুন:

@when var(--is-dark-mode) = true {
  body {
    background-color: #333;
    color: #fff;
  }
  a {
    color: #ccc;
  }
}

অবশেষে, --is-dark-mode কাস্টম প্রপার্টির মান টগল করতে জাভাস্ক্রিপ্ট ব্যবহার করুন:

document.getElementById('darkModeToggle').addEventListener('click', function() {
  document.documentElement.style.setProperty('--is-dark-mode', this.checked);
});

এটি ব্যবহারকারীদের লাইট এবং ডার্ক থিমের মধ্যে পরিবর্তন করার সুযোগ দেয়, এবং কাস্টম প্রপার্টির মানের উপর ভিত্তি করে CSS ডাইনামিকভাবে আপডেট হয়। মনে রাখবেন যে `@when`-এর মধ্যে CSS ভ্যারিয়েবলের সরাসরি তুলনা সব ব্রাউজারে সার্বজনীনভাবে সমর্থিত নাও হতে পারে। এর পরিবর্তে, আপনাকে একটি নন-জিরো মান পরীক্ষা করার জন্য মিডিয়া কোয়েরি ব্যবহার করে একটি সমাধান প্রয়োগ করতে হতে পারে: 

@when ( --is-dark-mode > 0 ) { ... }

তবে, এটি সঠিকভাবে কাজ করার জন্য কাস্টম প্রপার্টির একটি সংখ্যাসূচক মান আছে কিনা তা নিশ্চিত করুন।

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

৫. ডেটা অ্যাট্রিবিউট ভিত্তিক স্টাইলিং

আপনি ডেটা অ্যাট্রিবিউটের সাথে @when ব্যবহার করে এলিমেন্টগুলোকে তাদের ডেটা মানের উপর ভিত্তি করে স্টাইল করতে পারেন। এটি ডাইনামিক ইন্টারফেস তৈরির জন্য উপযোগী হতে পারে যেখানে ব্যবহারকারীর ইন্টারঅ্যাকশন বা ডেটা আপডেটের উপর ভিত্তি করে এলিমেন্টের চেহারা পরিবর্তিত হয়।

উদাহরণস্বরূপ, ধরা যাক আপনার কাছে কাজের একটি তালিকা আছে, এবং প্রতিটি কাজের একটি data-status অ্যাট্রিবিউট রয়েছে যা তার অবস্থা নির্দেশ করে (যেমন, "todo", "in-progress", "completed")। আপনি প্রতিটি কাজকে তার স্ট্যাটাসের উপর ভিত্তি করে ভিন্নভাবে স্টাইল করতে @when ব্যবহার করতে পারেন।

[data-status="todo"] {
  /* Default styles for todo tasks */
  color: #333;
}

@when attribute(data-status string equals "in-progress") {
  [data-status="in-progress"] {
    color: orange;
    font-style: italic;
  }
}

@when attribute(data-status string equals "completed") {
  [data-status="completed"] {
    color: green;
    text-decoration: line-through;
  }
}

দ্রষ্টব্য: attribute() টেস্ট কন্ডিশনের জন্য সমর্থন বর্তমানে সব ব্রাউজারে সীমিত বা সম্পূর্ণরূপে বাস্তবায়িত নাও হতে পারে। সর্বদা পুঙ্খানুপুঙ্খভাবে পরীক্ষা করুন।

ব্রাউজার সামঞ্জস্যতা এবং পলফিল (Polyfills)

২০২৪ সালের শেষের দিকে, @when নিয়মের জন্য ব্রাউজার সমর্থন এখনও বিকশিত হচ্ছে। যদিও অনেক আধুনিক ব্রাউজার মূল কার্যকারিতা সমর্থন করে, কিছু পুরানো ব্রাউজার তা নাও করতে পারে। অতএব, সামঞ্জস্যতার টেবিল পরীক্ষা করা এবং প্রয়োজনে উপযুক্ত ফলব্যাক বা পলফিল ব্যবহার করা অত্যন্ত গুরুত্বপূর্ণ।

@when এবং সম্পর্কিত ফিচারগুলোর বর্তমান ব্রাউজার সাপোর্টের অবস্থা পরীক্ষা করতে Can I use...-এর মতো রিসোর্সগুলো সর্বদা দেখুন।

@when ব্যবহারের সেরা অনুশীলন

উপসংহার

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

ওয়েব যেমন বিকশিত হতে থাকবে, বিশ্বজুড়ে ব্যবহারকারীদের জন্য আকর্ষণীয়, অ্যাক্সেসযোগ্য এবং পারফরম্যান্ট অভিজ্ঞতা তৈরি করার জন্য @when-এর মতো ফিচারগুলোতে দক্ষতা অর্জন করা অপরিহার্য হবে। শর্তসাপেক্ষ স্টাইলিংয়ের শক্তিকে আলিঙ্গন করুন এবং আপনার CSS ডেভেলপমেন্টে নতুন সম্ভাবনা উন্মোচন করুন।

CSS @when নিয়ম: শর্তসাপেক্ষ স্টাইল প্রয়োগে দক্ষতা অর্জন | MLOG