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

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

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

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

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

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

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

            @when <condition> {
  /* CSS rules to apply when the condition is true */
}
            

              
                Copy
              
            
          

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

• মিডিয়া কোয়েরি (Media Queries): ভিউপোর্টের বৈশিষ্ট্যের (যেমন, স্ক্রিনের প্রস্থ, ডিভাইসের ওরিয়েন্টেশন) উপর ভিত্তি করে শর্ত।
• ফিচার কোয়েরি (@supports): নির্দিষ্ট CSS ফিচারের জন্য ব্রাউজার সাপোর্টের উপর ভিত্তি করে শর্ত।
• বুলিয়ান অ্যালজেবরা (Boolean Algebra): লজিক্যাল অপারেটর (and, or, not) ব্যবহার করে একাধিক শর্ত একত্রিত করা।

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

১. @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;
  }
}
            

              
                Copy
              
            
          

এই উদাহরণে, @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 */
  }
}
            

              
                Copy
              
            
          

এখানে, আমরা ব্রাউজার 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);
  }
}
            

              
                Copy
              
            
          

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

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

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

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

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

            

              
                Copy
              
            
          

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

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

            

              
                Copy
              
            
          

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

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

              
                Copy
              
            
          

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

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

              
                Copy
              
            
          

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

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

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

আপনি ডেটা অ্যাট্রিবিউটের সাথে @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;
  }
}
            

              
                Copy
              
            
          

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

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

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

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

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

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

উপসংহার

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

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