عناصر زائفة محسَّنة الدقة

ميزات الويب: image-set()‎

يتيح لك استخدام الصور المحسّنة من حيث الدقة في عناصر CSS الزائفة (مثل ::before أو ::after) إضافة رموز زخرفية أو رسومات هيكلية بدون زيادة حجم ملف HTML بعُقد DOM إضافية. من خلال الجمع بين العناصر الزائفة ودالة CSS‏ image-set()، يمكنك تزويد المتصفّح بتنسيقات متعددة (مثل AVIF أو WebP) ودقة متعددة (مثل 1x و2x). سيختار المتصفّح تلقائيًا الصورة الأنسب لإمكانات جهاز المستخدم.

التنفيذ

يمكنك استخدام الدالة image-set() مباشرةً ضمن السمة content لعنصر زائف، أو ضمن السمة background-image (أثناء ضبط content: ""). يُرجى العِلم أنّه على الرغم من أنّ تقديم تنسيق الصورة من خلال type() والدقة (مثل 1x أو 2x) يحقّق أفضل النتائج، فإنّ هاتين الوسيطتين اختياريتان.

.icon-button::before {
  /* Using image-set directly in the content property */
  /* MANDATORY: Always order your formats from most optimized (AVIF) to least optimized (JPEG/PNG). 
     The browser will stop at the first supported format. */
  content: image-set(
    url("icon.avif") type("image/avif") 1x,
    url("icon-2x.avif") type("image/avif") 2x,
    url("icon.webp") type("image/webp") 1x,
    url("icon-2x.webp") type("image/webp") 2x,
    url("icon.png") type("image/png") 1x,
    url("icon-2x.png") type("image/png") 2x
  );
  
  display: inline-block;
  margin-right: 8px;
  vertical-align: middle;
}

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

بالنسبة إلى المتصفّحات القديمة التي لا تتوافق مع الدالة image-set()، يجب تقديم بيان صورة عادي قبل القاعدة image-set(). تعتمد استراتيجية التحسين التدريجي هذه على طبيعة CSS المتتالية: يتم تجاهل القواعد غير المتوافقة.

.icon-button::before {
  /* MANDATORY: Fallback for browsers that do not support image-set() */
  content: url("icon.png");
  
  /* Modern browsers will apply this and override the fallback */
  content: image-set(
    url("icon.avif") type("image/avif") 1x,
    url("icon-2x.avif") type("image/avif") 2x,
    url("icon.png") type("image/png") 1x,
    url("icon-2x.png") type("image/png") 2x
  );
}