Selector & @-rule Combinations

সমস্যা

আমাদের প্রায়ই বিভিন্ন ধরনের ফিল্টারিং মাপকাঠি একত্রিত করতে হয়, যেমন সিলেক্টর + মিডিয়া কোয়েরি, মিডিয়া কোয়েরি + কন্টেনার কোয়েরি ইত্যাদি।

যেমন, (prefers-color-scheme: dark)-এর সাথে এমন একটি সিলেক্টর যোগ করা যা রঙের স্কিম ওভাররাইড (যেমন, :root:has(> head > meta[name="color-scheme"][content="dark"]) বা :root.dark) টার্গেট করে, যাতে রঙের স্কিম যেভাবে সেট করা হয়েছে তা নির্বিশেষে লাইট/ডার্ক মোডে নির্দিষ্ট স্টাইল প্রয়োগ করা যায়।

সহজ পদ্ধতি ডুপ্লিকেট কোডের দিকে নিয়ে যায়:

/* Light mode styles */
.card.featured {
  font-weight: 400;
}

#logo-dark {
  display: none;
}

@media (prefers-color-scheme: dark) {
  /* Dark mode styles */
  :root:not(.light) {
    .card.featured {
      font-weight: 300;
    }

    #logo-dark {
      display: inline;
    }

    #logo {
      display: none;
    }
  }
}

/* Dark mode styles, again */
:root.dark {
  .card.featured {
    font-weight: 300;
  }

  #logo-dark {
    display: inline;
  }

  #logo {
    display: none;
  }
}

পরিবর্তে কী করতে হবে

কাস্টম প্রপার্টিতে কম্বাইন করা ফিল্টারের ফলাফল স্টোর করুন, তারপর সেই প্রপার্টির উপর ভিত্তি করে নিয়ম সেট করতে কন্টেনার স্টাইল কোয়েরি ব্যবহার করুন।

গুরুত্বপূর্ণ: কন্টেনার কোয়েরি যেভাবে কাজ করে, তার কারণে এই টেকনিক তখনই কাজ করে যখন আমরা এমন কোনও নিয়মের পূর্বপুরুষের উপর কাস্টম প্রপার্টি সেট করতে পারি যা অবশ্যই ম্যাচ করতে হবে।

১. প্রয়োগ করা নিয়ম থেকে বেছে নেওয়ার লজিক ডিকাপল করুন

:root {
  --color-scheme: light;

  @media (prefers-color-scheme: dark) {
    --color-scheme: dark;
  }

  &:has(> head > meta[name="color-scheme"][content="dark"]) {
    --color-scheme: dark;
  }

  &:has(> head > meta[name="color-scheme"][content="light"]) {
    --color-scheme: light;
  }
}

২. প্রয়োগ করা নিয়মের জন্য কাস্টম প্রপার্টির কী

@container not style(--color-scheme: dark) {
  .card.featured {
    font-weight: 400;
  }

  #logo-dark {
    display: none;
  }
}

@container style(--color-scheme: dark) {
  .card.featured {
    font-weight: 300;
  }

  #logo {
    display: none;
  }
}

৩. ঐচ্ছিক: দৃশ্যমানতা টগল করার জন্য ইউটিলিটি ক্লাস

খুব সাধারণ একটি ঘটনা হল, মাপকাঠি ম্যাচ করছে কিনা তার উপর ভিত্তি করে দৃশ্যমানতা টগল করা। ইউটিলিটি ক্লাসকে অবশ্যই ইচ্ছামতো কম্পোনেন্ট স্টাইলের (তাই !important) থেকে বেশি প্রাধান্য পেতে হবে এবং তাদের দেখানো display অজানা, তাই তারা ওভাররাইড ব্যবহার করতে পারবে না — not style(...) দিয়ে তাদের গেট করুন:

@container not style(--color-scheme: dark) {
  .if-dark {
    display: none !important;
  }
}

@container not style(--color-scheme: light) {
  .if-light {
    display: none !important;
  }
}

ফলব্যাক

ব্রাঞ্চিং কতটা গুরুত্বপূর্ণ এবং গ্রহণযোগ্য ফলব্যাক কী কী তার উপর নির্ভর করে দুই ধরনের ফলব্যাক আছে।

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

#logo-dark {
  display: none;
}

@container style(--color-scheme: dark) {
  #logo-dark {
    display: inline; /* override */
  }

  #logo {
    display: none;
  }
}