CSS: توفير بديل لمرشح الخلفية غير المتاح

تظل ميزة مرشح الخلفية في CSS غير قابلة للوصول في معظم المتصفحات المعاصرة. وبينما نتوقع دعمها المستقبلي، يصبح اكتشاف الحلول البديلة أمرًا ضروريًا.

إحدى الطرق لتحقيق تأثير مماثل هي استخدام خلفية ذات شفافية دقيقة. يوضح كود CSS أدناه هذا الأسلوب:

/* Slightly transparent fallback */
.backdrop-blur {
  background-color: rgba(255, 255, 255, .9);
}

/* Blurred effect with backdrop support */
@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
  .backdrop-blur {
    background-color: rgba(255, 255, 255, .5);
    -webkit-backdrop-filter: blur(2em);
    backdrop-filter: blur(2em);
  }
}

عندما لا يكون مرشح الخلفية مدعومًا، ستكون الخلفية الشفافة قليلاً بمثابة خلفية احتياطية. المتصفحات التي تدعم مرشح الخلفية ستعرض تأثيرًا غير واضح.

تتوفر أدناه نماذج توضح التأثيرات بدون دعم مرشح الخلفية ومعه:

[صورة احتياطية شفافة]
[ صورة غير واضحة

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