CSS sözde öğelerinde (::before veya ::after gibi) çözünürlüğü optimize edilmiş resimler kullanmak, HTML'nizi ekstra DOM düğümleriyle doldurmadan dekoratif simgeler veya yapısal grafikler eklemenize olanak tanır. Sözde öğeleri image-set() CSS işleviyle birleştirerek tarayıcıya birden fazla biçim (ör. AVIF veya WebP) ve çözünürlük (ör. 1x ve 2x) sağlayabilirsiniz. Tarayıcı, kullanıcının cihaz özelliklerine en uygun resmi otomatik olarak seçer.
Uygulama
image-set() işlevini doğrudan bir sözde öğenin content özelliğinde veya background-image özelliğinde (content: "" ayarlanırken) kullanabilirsiniz. type() aracılığıyla hem resim biçimini hem de çözünürlüğü (1x veya 2x gibi) sağlamak en iyi sonuçları verse de bu bağımsız değişkenlerin her ikisi de isteğe bağlıdır.
.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;
}
Yedek stratejiler
image-set() işlevini desteklemeyen eski tarayıcılar için image-set() kuralından önce standart bir resim bildirimi sağlamanız GEREKİR. Bu progresif geliştirme stratejisi, CSS'nin basamaklı yapısını temel alır: Desteklenmeyen kurallar yok sayılır.
.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
);
}