تطبيق CSS بشكل مشروط استنادًا إلى دعم At-Rule

استخدِم @supports at-rule(@<at-rule name>) {…} لتطبيق قواعد أو تعريفات CSS معيّنة بشكل مشروط فقط إذا كان المتصفّح يتيح استخدام قاعدة معيّنة تبدأ بالرمز @. ويمكن أن تحتوي على قواعد كاملة، أو يمكن استخدامها مع تداخل CSS لتطبيق بيانات معيّنة بشكل مشروط.

.foo {
  background: var(--accent-color);

  @supports at-rule(@property) {
    background-image: var(--rainbow-gradient);
    animation: sliding-rainbow 1s linear infinite;
  }
}

يجب عدم استخدام @supports at-rule() لتطبيق القاعدة الشرطية التي يتم رصدها فقط.

/* BAD: CSS already ignores rules the browser doesn't understand, so this is unnecessary */
@supports at-rule(@starting-style) {
  @starting-style {
    /* ... */
  }
}

رصد مدى توافق المتصفّح مع قواعد CSS التي تبدأ بالرمز @ عندما لا يكون استخدام @supports at-rule() مناسبًا

عندما لا يكون استخدام at-rule() خيارًا متاحًا، إما بسبب عدم توافق المتصفّح أو بسبب الحاجة إلى رصد أعمق، يمكنك استخدام الإرشادات أدناه.

جرِّب الخصائص أو القيم أو أدوات الاختيار أولاً

يمكن لـ @supports رصد السمات والقيم والمحدّدات (من خلال @supports selector(...)). في كثير من الحالات، يمكنك استخدامها لرصد مدى توافق ميزة معيّنة بدون الحاجة إلى التحقّق من قاعدة at-rule نفسها.

على سبيل المثال، بدلاً من @supports at-rule(@function) لرصد إتاحة الدوال المخصّصة، يمكنك استخدام @supports (color: --foo()).

في حالات أخرى، قد تكون هناك فئات زائفة أو عناصر زائفة لا تتوفّر إلا عند توفّر قاعدة @ معيّنة، ويمكن استخدامها لرصد التوافق.

رصد أنواع طلبات البحث عن الحاويات

يسمح at-rule() فقط برصد القواعد التي تبدأ بالرمز @ حسب الاسم. ولا يسمح برصد أي بنية أو واصفات أخرى. على سبيل المثال، لن ينجح ما يلي:

@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 كما هو موضّح أدناه.
• يعتمد الحلّ العام على عدم التوريث، لذا لن يعمل مع البيانات في العنصر الجذر.

استخدام JavaScript كحلّ أخير

بالنسبة إلى قواعد at-rules الكاملة، تحقَّق من توفّر واجهات معيّنة في JavaScript. على سبيل المثال، إذا تم تحديد globalThis.CSSFunctionRule، يعني ذلك أنّ @function متاح.

إذا أردت إجراء اختبار أكثر دقة (على سبيل المثال، لبعض المقدّمات والقواعد المتداخلة والواصفات)، يمكنك إعداد اختبار والتحقّق من كيفية تحليله:

const sheet = new CSSStyleSheet();
sheet.replaceSync(`
  @page {
    @top-left {
      content: "test";
    }
  }
`);
const SUPPORTS_PAGE_MARGINS = Boolean(sheet.cssRules[0]?.cssRules?.[0]);

مهم:

• عند استخدام JS لرصد توافق ميزات CSS، لا تطبِّق الأنماط من JS مباشرةً. بدلاً من ذلك، يمكنك تطبيق فئة على عنصر الجذر والتفرّع منه في CSS.
• يُرجى العِلم أنّه يتم تحليل طلبات البحث عن الحاوية حتى إذا لم يتم التعرّف على المقدمة، ولا توجد طريقة لرصد توافق أنواع معيّنة من طلبات البحث عن الحاوية من بنية CSSOM.
• لا تستخدِم CSS.registerProperty لرصد مدى توافق @property لأنّ مدى توافقه أوسع قليلاً.

استراتيجيات احتياطية

ما لم يكن ذلك ضمن هدف الدعم، استخدِم @supports (at-rule()) فقط لرصد القواعد التي تبدأ بـ @ والتي يكون الدعم لها أضيق من ميزة @supports (at-rule()) نفسها.

لتطبيق CSS بشكل مشروط استنادًا إلى إتاحة القواعد التي تبدأ بـ @ والتي تم طرحها قبل هذه الميزة، يمكنك استخدام الإرشادات الواردة في القسم أعلاه.

لاكتشاف مدى توافق المتصفّح مع ميزة @supports at-rule() نفسها، يمكنك استخدام قاعدة تبدأ بالرمز @ ويُضمن توفّرها في جميع المتصفّحات المتوافقة مع @supports at-rule()، مثل @supports at-rule(@media) { ... }.