CSS/@supports

القاعدة ‎@supports في CSS تسمح لنا بتعريف قواعد بناءً على دعم المتصفح لميزات مُعيّنة في CSS.

@supports (display: flex) {
  div {
    display: flex;
  }
}

@supports not (display: flex) {
  div {
    float: right;
  }
}

أمثلة

تجربة دعم خاصية معيّنة، مع إمكانية تشعّب قواعد At-rules الأخرى:

@supports (animation-name: test) {
  … 
  @keyframes {
    …
  }
}

تجربة دعم خاصية معيّنة سواءً مع سابقة (prefix) أو دون سابقة:

@supports ((perspective: 10px) or (-moz-perspective: 10px) or (-webkit-perspective: 10px) or
         (-ms-perspective: 10px) or (-o-perspective: 10px)) {
  …
}

تجربة دعم الخاصيات المخصصة:

@supports (--foo: green) {
  body {
    color: var(--varName);
  }
}

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	28.0	22.0	غير مدعومة	12.1	9.0

على الرغم من أنَّ متصفح IE لا يدعم هذه الخاصية، لكن متصفح Edge يدعمها بدءًا من الإصدار 20.

البنية العامة

القاعدة ‎@supports تُعرِّف كتلةً من التعليمات تُنفَّذ عندما ينطبق شرطٌ مُحدَّد، ويمكن استخدام المعامل and و or و not، وأولوية تلك المعاملات تُعرَّف عبر استخدام الأقواس ().

بنية الشرط الأساسية

أبسط شرط يمكن استخدامه مع هذه القاعدة هو اسم الخاصية يتبعه قيمتها ويُفصَل بينهما بنقطتين رأسيتين، ويجب إحاطة الشرط بقوسين.

المثال الآتي سيُعيد true إذا كانت الخاصية transform-origin في المتصفح تَعدُّ القيمة ‎5% 5%‎ على أنها قيمة صالحة:

@supports (transform-origin: 5% 5%)

المعامل not

يمكن أن يسبق المعامل not أي تعبير لإنشاء تعبير جديد يعاكس قيمة التعبير الأصلي، فمثال الآتي سيُعيد true إذا كانت الخاصية transform-origin لا تَعدُّ القيمة 10em 10em 10em على أنَّها قيمةٌ صالحة:

@supports not (transform-origin: 10em 10em 10em)

وكما مع أيّ معامل، يمكن تطبيق المعامل not على أيّ تعبير مهما كان معقدًا، فالمثالان الآتيان صحيحان:

@supports not (not (transform-origin: 2px))
@supports (display: flexbox) and (not (display: inline-grid))

ملاحظة: لا حاجة لوضع المعامل not بين قوسين في أعلى مستوى من التعابير، لكن إذا أردنا دمجه مع معاملات أخرى، مثل and و or، فيجب حينئذٍ استخدام الأقواس.

المعامل and

المُعامِل and يُنشِئ تعبيرًا جديدًا يدمج تعبيريَن قصيرين، وسيُعيد true إذا كانت نتيجة التعبيرين القصيرين true؛ فالمثال الآتي يُعيد true إذا كان المتصفح يدعم كلا القيمتين للخاصية display:

@supports (display: table-cell) and (display: list-item)

يمكن دمج أكثر من تعبير معًا دون الحاجة إلى أقواس، فكلٌّ شكلٍ من الشكلين الآتيين صحيح:

@supports (display: table-cell) and (display: list-item) and (display:run-in)
@supports (display: table-cell) and ((display: list-item) and (display:run-in))

المعامل or

المُعامِل or يُنشِئ تعبيرًا جديدًا من نتيجة تعبيرين قصيرين، وسيعيد true إذا كانت نتيجة أحد التعبيرين أو كلاهما true، لاحظ أنَّ المثال الآتي سيُعيد true إذا دعم المتصفح إحدى الخاصيتين أو كلاهما:

@supports (transform-style: preserve) or (-moz-transform-style: preserve)

يمكن دمج أكثر من تعبير معًا دون الحاجة إلى أقواس، فكلٌّ شكلٍ من الشكلين الآتيين صحيح:

@supports (transform-style: preserve) or (-moz-transform-style: preserve) or 
          (-o-transform-style: preserve) or (-webkit-transform-style: preserve)

@supports (transform-style: preserve-3d) or ((-moz-transform-style: preserve-3d) or
          ((-o-transform-style: preserve-3d) or (-webkit-transform-style: preserve-3d)))

ملاحظة: إذا استخدمنا المعاملين and و or معًا، فيجب استخدام أقواس لتعريف ما هو ترتيب تطبيق هذين المعاملين، وإلا فسيكون الشرط غير صالح وسيتم تجاهل القاعدة كلها.

البنية الرسمية

@supports <supports-condition> {
  <group-rule-body>
}

مصادر ومواصفات

• مواصفة CSS Conditional Rules Module Level 3.