Önde gelen tüm motorlar artık yeni CSS renk alanlarını ve işlevlerini desteklemektedir. Tasarımlarınıza nasıl canlılık katabileceğini öğrenin.
CSS artık sRGB gamının dışındaki renklere erişmemizi sağlayan renk alanlarını destekliyor. Yani HD gamlarındaki renkleri kullanarak HD (yüksek tanımlı) ekranları destekleyebilirsiniz. Bu destekle birlikte, web'de renklerin daha iyi kullanılmasını sağlayan yeni işlevler yer almaktadır.
CSS'den renk alanlarına erişme
sRGB gamındaki renklere erişmemizi sağlayan rgb(), hsl() ve hwb() gibi birçok işlevimiz zaten var. Tarayıcılarda artık color() işlevi desteklenmektedir. Bu işlev, herhangi bir RGB renk alanındaki renklere erişmenin normalleştirilmiş bir yoludur. sRGB, Display P3 ve Rec2020 buna dahildir. Aşağıdaki CSS'de bazı örnekler görebilirsiniz:
.valid-css-color-function-colors {
--srgb: color(srgb 1 1 1);
--srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
--display-p3: color(display-p3 1 1 1);
--rec2020: color(rec2020 0 0 0);
--a98-rgb: color(a98-rgb 1 1 1 / 25%);
--prophoto: color(prophoto-rgb 0% 0% 0%);
--xyz: color(xyz 1 1 1);
}
lch(), lab(), oklch() ve oklab() kullanılarak sRGB dışındaki renk alanlarına erişim sağlayan çeşitli işlevler de desteklenir.
Yüksek tanımlı CSS renk kılavuzundan bu farklı renk alanlarının tümü hakkında bilgi edinebilirsiniz.
color-mix() işlevi
Bu yeni renk alanlarının yanı sıra artık tüm motorlar color-mix() işlevini desteklemektedir. Bu işlev, herhangi bir renk alanında bir rengin bir başka renkle karıştırılmasına olanak tanır. Aşağıdaki CSS'de srgb renk alanında mavinin% 25'i beyazla karıştırılmıştır.
.example {
background-color: color-mix(in srgb, blue 25%, white);
}
color-mix() hakkında daha fazla bilgi
Bu yeni işlevler ve renk alanları, web'e canlı HD renk sunmayı vaat ediyor. İlham almak için gradient.style adresindeki HD gradyan oluşturucuyu kullanarak göz alıcı gradyanlar oluşturarak işe başlayabilirsiniz.
Yeni birlikte çalışabilirlik serisinin kapsamında