ব্রাউজার কোনও নির্দিষ্ট at-রুল সাপোর্ট করলে, তবেই শর্তসাপেক্ষে নির্দিষ্ট CSS রুল বা ডিক্লারেশন প্রয়োগ করতে @supports at-rule(@<at-rule name>) {…} ব্যবহার করুন।
এতে সম্পূর্ণ নিয়ম থাকতে পারে অথবা শর্তসাপেক্ষে নির্দিষ্ট ঘোষণা প্রয়োগ করার জন্য CSS নেস্টিংয়ের সাথে ব্যবহার করা হতে পারে।
.foo {
background: var(--accent-color);
@supports at-rule(@property) {
background-image: var(--rainbow-gradient);
animation: sliding-rainbow 1s linear infinite;
}
}
শনাক্ত করা at-রুল শর্তসাপেক্ষে প্রয়োগ করার জন্য @supports at-rule() ব্যবহার করবেন না এবং অন্য কিছু করবেন না।
/* BAD: CSS already ignores rules the browser doesn't understand, so this is unnecessary */
@supports at-rule(@starting-style) {
@starting-style {
/* ... */
}
}
@supports at-rule() উপযুক্ত না হলে at-রুলের জন্য সহায়তা শনাক্ত করা হচ্ছে
ব্রাউজার সাপোর্ট না করার কারণে অথবা আরও গভীরভাবে শনাক্ত করার প্রয়োজন হলে, at-rule() বিকল্প হিসেবে উপলভ্য না থাকলে, আপনি নিচে দেওয়া নির্দেশিকা ব্যবহার করতে পারেন।
প্রথমে প্রপার্টি, ভ্যালু বা সিলেক্টর ব্যবহার করে দেখুন
@supports ইতিমধ্যেই প্রপার্টি, ভ্যালু ও সিলেক্টর শনাক্ত করতে পারে (@supports selector(...)-এর মাধ্যমে)।
অনেক ক্ষেত্রে, আপনি কোনও ফিচারের জন্য সাপোর্ট শনাক্ত করতে এগুলি ব্যবহার করতে পারেন, এর জন্য at-রুল চেক করার প্রয়োজন হয় না।
যেমন, কাস্টম ফাংশনের জন্য সাপোর্ট শনাক্ত করতে @supports at-rule(@function)-এর পরিবর্তে আপনি @supports (color: --foo()) ব্যবহার করতে পারেন।
অন্যান্য ক্ষেত্রে, সিউডো-ক্লাস বা সিউডো-এলিমেন্ট থাকতে পারে যা শুধুমাত্র নির্দিষ্ট at-রুল কাজ করলে তবেই উপলভ্য হয়, যা কাজ করছে কিনা তা শনাক্ত করতে ব্যবহার করা যেতে পারে।
কন্টেনার কোয়েরির ধরন শনাক্ত করা হচ্ছে
at-rule() শুধুমাত্র নাম দ্বারা at-রুল শনাক্ত করার অনুমতি দেয়।
এটি অন্য সিনট্যাক্স বা ডেসক্রিপ্টর শনাক্ত করার অনুমতি দেয় না।
যেমন, এটি কাজ করবে না:
@supports at-rule(@container style(--a: 1)) {
/* ... */
}
অনেক ধরনের কন্টেনার কোয়েরির জন্য, আপনি উপযুক্ত ভ্যালু সহ container-type ব্যবহার করতে পারেন।
যেমন, স্ক্রল-স্টেট কোয়েরির জন্য @supports (container-type: scroll-state) অথবা @supports (container-type: size)container-type: anchoredforanchored()` কোয়েরি।
তবে, স্টাইল কোয়েরির জন্য কোনও container-type নেই।
গুরুত্বপূর্ণ: স্টাইল কোয়েরির জন্য সাপোর্ট শনাক্ত করতে @supports (container-type: style) ব্যবহার করবেন না, কারণ এটি কাজ করবে না।
পরিবর্তে, আপনি এমন একটি স্টাইল কোয়েরি ব্যবহার করে দেখতে পারেন যা সবসময় সঠিক:
@container style(--a: 1) or (not (style(--a: 1))) {
/* Rules here will only be applied if style queries are supported */
}
স্টাইল কোয়েরি সাপোর্ট করে এমন যেকোনও ব্রাউজারে এটি ম্যাচ করবে, আপনি যে প্রপার্টির নাম বা ভ্যালু ব্যবহার করুন না কেন, তবে শর্ত হল দুটি ক্ষেত্রেই সেগুলি একই হতে হবে।
রেজিস্টার করা কাস্টম প্রপার্টি (@property)
কিছু ক্ষেত্রে, যদি প্রয়োগ করার জন্য শর্তসাপেক্ষ CSS একটি প্রপার্টিতে কমিয়ে আনা যায়, তাহলে আপনি এই উদ্দেশ্যে রেজিস্টার করা একটি ডেডিকেটেড কাস্টম প্রপার্টি ব্যবহার করতে পারেন:
/* Use a custom property to conditionally include the dash animation */
@property --progress-dash-animation {
syntax: "*";
inherits: false;
initial-value: , progress-dash 3s ease-in-out infinite;
}
.spinner {
/* The dash animation is only included if @property is supported */
animation:
progress-spin var(--_used-spinner-duration) linear infinite
var(--progress-dash-animation, );
}
আরও সাধারণ-উদ্দেশ্য সমাধানের জন্য, আপনি একটি নন-ইনহেরিটিং প্রপার্টি রেজিস্টার করতে পারেন এবং এটিকে রুট এলিমেন্টে (একটি স্পেস) হিসেবে সেট করতে পারেন:
{# Testcase: https://codepen.io/leaverou/pen/KwWzpVr #}
@property --supports-atproperty {
syntax: "*";
inherits: false;
}
:root {
--supports-atproperty: ;
}
body {
/* The background is only applied if @property is supported */
background: var(--supports-atproperty, green);
}
মনে রাখবেন:
- হোয়াইটস্পেস গ্রহণযোগ্য বিকল্প হলে তবেই এই দুটি কাজ করে। অন্যান্য ক্ষেত্রে, আপনাকে নিচে বর্ণনা করা পদ্ধতি অনুযায়ী JS ব্যবহার করতে হবে।
- সাধারণ-উদ্দেশ্য সমাধান নন-ইনহেরিটেন্সের উপর নির্ভর করে, তাই এটি রুট এলিমেন্টে ডিক্লারেশনের জন্য কাজ করবে না।
শেষ উপায় হিসেবে জাভাস্ক্রিপ্ট ব্যবহার করা
সম্পূর্ণ at-রুলের জন্য, জাভাস্ক্রিপ্টে নির্দিষ্ট ইন্টারফেস আছে কিনা তা চেক করুন।
যেমন, globalThis.CSSFunctionRule নির্দিষ্ট করা থাকলে, @function কাজ করবে।
আপনাকে যদি আরও গভীরভাবে পরীক্ষা করতে হয় (যেমন, নির্দিষ্ট কিছু ভূমিকা, নেস্টেড নিয়ম, বর্ণনাকারীর জন্য), তাহলে আপনি একটি পরীক্ষা সেট-আপ করতে এবং এটি কীভাবে পার্স করা হয়েছে তা চেক করতে পারবেন:
const sheet = new CSSStyleSheet();
sheet.replaceSync(`
@page {
@top-left {
content: "test";
}
}
`);
const SUPPORTS_PAGE_MARGINS = Boolean(sheet.cssRules[0]?.cssRules?.[0]);
গুরুত্বপূর্ণ:
- CSS ফিচারের জন্য সহায়তা শনাক্ত করতে JS ব্যবহার করার সময়, JS থেকে সরাসরি স্টাইল প্রয়োগ করবেন না। পরিবর্তে, রুট এলিমেন্টে একটি ক্লাস প্রয়োগ করুন এবং CSS-এ সেটির শাখা তৈরি করুন।
- মনে রাখবেন যে, কন্টেনার কোয়েরি পার্স করা হয়, এমনকি প্রিলিউড শনাক্ত করা না গেলেও এবং CSSOM স্ট্রাকচার থেকে নির্দিষ্ট ধরনের কন্টেনার কোয়েরির জন্য সাপোর্ট শনাক্ত করার কোনও উপায় নেই।
@property-এর জন্য সহায়তা শনাক্ত করতেCSS.registerPropertyব্যবহার করবেন না কারণ এর সহায়তা একটু বেশি বিস্তৃত।
ফলব্যাক স্ট্র্যাটেজি
এটি আপনার সাপোর্ট টার্গেটের মধ্যে না থাকলে, -এর জন্য at-রুল শনাক্ত করতে শুধুমাত্র @supports (at-rule()) ব্যবহার করুন, যার সাপোর্ট @supports (at-rule()) ফিচারের চেয়ে কম।
এই ফিচারের আগে শিপ করা at-রুলসের জন্য সাপোর্টের উপর ভিত্তি করে শর্তসাপেক্ষে CSS প্রয়োগ করতে, উপরের বিভাগে দেওয়া নির্দেশিকা ব্যবহার করুন।
@supports at-rule() ফিচারের নিজস্ব সাপোর্ট শনাক্ত করতে, আপনি একটি at-রুল ব্যবহার করতে পারেন যা @supports at-rule() সাপোর্ট করে এমন সব ব্রাউজারে কাজ করার গ্যারেন্টি দেয়, যেমন @supports at-rule(@media) { ... }।