নতুন CSS ফাংশনাল সিউডো-ক্লাস নির্বাচক :is() এবং :where()

CSS সিলেক্টর সিনট্যাক্সে এই আপাতদৃষ্টিতে ছোট সংযোজনগুলি একটি বড় প্রভাব ফেলতে চলেছে।

Adam Argyle

CSS লেখার সময়, আপনি কখনও কখনও একই শৈলী নিয়ম সহ একাধিক উপাদানকে লক্ষ্য করার জন্য দীর্ঘ নির্বাচক তালিকার সাথে শেষ করতে পারেন। উদাহরণস্বরূপ, যদি আপনি একটি শিরোনাম উপাদানের ভিতরে পাওয়া যে কোনো <b> ট্যাগ রঙ সামঞ্জস্য করতে চান, আপনি লিখতে পারেন:

h1 > b, h2 > b, h3 > b, h4 > b, h5 > b, h6 > b {
  color: hotpink;
}

পরিবর্তে, আপনি :is() ব্যবহার করতে পারেন এবং দীর্ঘ নির্বাচক এড়িয়ে সুস্পষ্টতা উন্নত করতে পারেন:

:is(h1,h2,h3,h4,h5,h6) > b {
  color: hotpink;
}

সুস্পষ্টতা এবং সংক্ষিপ্ত নির্বাচক সুবিধাগুলি হল শুধুমাত্র একটি মানের অংশ যা :is() এবং :where() CSS এ নিয়ে আসে। এই পোস্টে, আপনি এই দুটি কার্যকরী ছদ্ম নির্বাচকদের সিনট্যাক্স এবং মান আবিষ্কার করবেন।

ব্রাউজার সামঞ্জস্য

:is()

:where()

দেখা করুন :is() এবং :where()

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

নির্বাচক গ্রুপিং

গ্রুপিং সম্পর্কে :is() যা করতে পারে, তাই করতে পারে :where() । এর মধ্যে রয়েছে নির্বাচকের যেকোনো জায়গায় ব্যবহার করা, নেস্ট করা এবং সেগুলিকে স্ট্যাক করা। সম্পূর্ণ CSS নমনীয়তা আপনি জানেন এবং ভালবাসেন। এখানে কয়েকটি উদাহরণ দেওয়া হল:

/* at the beginning */
:where(h1,h2,h3,h4,h5,h6) > b {
  color: hotpink;
}

/* in the middle */
article :is(header,footer) > p {
  color: gray;
}

/* at the end */
.dark-theme :where(button,a) {
  color: rebeccapurple;
}

/* multiple */
:is(.dark-theme, .dim-theme) :where(button,a) {
  color: rebeccapurple;
}

/* stacked */
:is(h1,h2):where(.hero,.subtitle) {
  text-transform: uppercase;
}

/* nested */
.hero:is(h1,h2,:is(.header,.boldest)) {
  font-weight: 900;
}

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

সহজ এবং জটিল নির্বাচক ব্যবহার করে :is()

নির্বাচকদের উপর ব্রাশ আপের জন্য, Learn CSS-এ নির্বাচক মডিউলটি দেখুন। দক্ষতার চিত্র তুলে ধরার জন্য এখানে সহজ এবং জটিল নির্বাচকদের কয়েকটি উদাহরণ দেওয়া হল:

article > :is(p,blockquote) {
  color: black;
}

:is(.dark-theme.hero > h1) {
  font-weight: bold;
}

article:is(.dark-theme:not(main .hero)) {
  font-size: 2rem;
}

এখন পর্যন্ত, :is() এবং :where() সিনট্যাক্টিকভাবে বিনিময়যোগ্য। তারা কীভাবে আলাদা তা দেখার সময় এসেছে।

:is() এবং :where() মধ্যে পার্থক্য

যখন এটি নির্দিষ্টতার ক্ষেত্রে আসে, :is() এবং :where() দৃঢ়ভাবে বিচ্ছিন্ন হয়। নির্দিষ্টতার উপর ব্রাশ আপের জন্য, শিখুন CSS-এর নির্দিষ্টতা মডিউলটি দেখুন।

সংক্ষেপে

• :where() কোন নির্দিষ্টতা নেই।
  :where() কার্যকরী পরামিতি হিসাবে পাস করা নির্বাচক তালিকার সমস্ত নির্দিষ্টতা স্কোয়াশ করে। এটি প্রথম ধরণের নির্বাচক বৈশিষ্ট্য।
• :is() এর সবচেয়ে নির্দিষ্ট নির্বাচকের নির্দিষ্টতা নেয়।
  :is(a,div,#id) একটি আইডির একটি নির্দিষ্ট স্কোর আছে, 100 পয়েন্ট।

তালিকা থেকে সর্বোচ্চ নির্দিষ্টতার নির্বাচককে গ্রহণ করা আমার জন্য তখনই একটি গোছা হয়ে গেছে যখন আমি গ্রুপিং নিয়ে খুব উত্তেজিত ছিলাম। আমি সর্বদা উচ্চ নির্দিষ্টতা নির্বাচককে এটির নিজস্ব নির্বাচকে স্থানান্তর করার মাধ্যমে স্পষ্টতা উন্নত করতে সক্ষম হয়েছি যেখানে এটি এতটা প্রভাব ফেলবে না। এখানে আমি কি বলতে চাই তার একটি উদাহরণ:

article > :is(header, #nav) {
  background: white;
}

/* better as */
article > header,
article > #nav {
  background: white;
}

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

আনস্প্ল্যাশে মার্কাস উইঙ্কলারের ছবি