استفاده از تصاویر بهینه‌شده ازنظر وضوح در شبه‌عناصر 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
);
}