Bu doküman, yüksek tanımlı CSS renk kılavuzunun bir parçasıdır.
Web projenizin rengini geniş aralıklı görüntüleri destekleyecek şekilde güncellemek için iki temel strateji vardır:
Zararlı renk düşüşü: Yeni renk alanlarını kullanın ve tarayıcı ile işletim sisteminin görüntüleme özelliklerine göre hangi rengin gösterileceğini belirlemesine izin verin.
Progresif geliştirme: Kullanıcının tarayıcısının özelliklerini değerlendirmek için
@supportsve@mediakullanın ve koşullar karşılanırsa geniş renk gamı sağlayın.
Tarayıcı display-p3 rengini anlamazsa:
color: red;
color: color(display-p3 1 0 0);
Tarayıcı display-p3 rengini anlarsa:
color: red;
color: color(display-p3 1 0 0);
Her birinin avantajları ve dezavantajları vardır. Artılarının ve eksilerinin kısa bir listesini burada bulabilirsiniz:
Kontrollü azalma
- Artıları
- En basit rota.
- Tarayıcı gamı, geniş gamlı bir ekran değilse sRGB'ye eşlenir veya sRGB'ye sabitlenir. Dolayısıyla sorumluluk tarayıcıdadır.
- Eksileri
- Tarayıcı, sevmediğiniz bir renge kayabilir veya harita gamı genişleyebilir.
- Tarayıcı, renk isteğini anlamayabilir ve tamamen başarısız olabilir. Bununla birlikte, rengin iki kez belirtilmesi ve şelalenin anladığı önceki renge dönmesine izin vererek bu durumu hafifletebilirsiniz.
Progresif geliştirme
- Artıları
- Yönetilen renk doğruluğu ile daha fazla kontrol.
- Mevcut renkleri etkilemeyen bir ekleme stratejisi.
- Eksileri
- İki ayrı renk söz dizimini yönetmeniz gerekir.
- İki ayrı renk gamını yönetmeniz gerekir.
Renk gamı ve renk alanı desteğini kontrol etme
Tarayıcı, CSS ile JavaScript'ten gelen geniş yelpaze özellikleri ve renk söz dizimi desteğinin kontrol edilmesine olanak tanır. Kullanıcının verdiği renk gamı tam olarak sunulmuyor, genel bir cevap sağlanıyor ve kullanıcı gizliliğinin korunuyor. Yine de, kullanıcının donanımının (ör. gam) özelliklerine özel olmadığından tam renk alanı desteği de sunulmaktadır.
Renk gamı destek sorguları
Aşağıdaki kod örneklerinde, ziyaret eden kullanıcının ekranlarındaki renk aralığı kontrol edilir.
CSS'den kontrol et
En az spesifik destek sorgusu, dynamic-range medya sorgusudur:
@media (dynamic-range: high) {
/* safe to use HD colors */
}
color-gamut medya sorgusundan yaklaşık olarak veya daha fazla destek için sorgu alınabilir:
@media (color-gamut: srgb) {
/* safe to use srgb colors */
}
@media (color-gamut: p3) {
/* safe to use p3 colors */
}
@media (color-gamut: rec2020) {
/* safe to use rec2020 colors */
}
Desteğin kontrol edilmesi için ek iki medya sorgusu daha bulunuyor:
JavaScript'ten kontrol et
JavaScript'te window.matchMedia() işlevi çağrılabilir ve değerlendirme için bir medya sorgusu iletilebilir.
const hasHighDynamicRange = window
.matchMedia('(dynamic-range: high)')
.matches;
console.log(hasHighDynamicRange); // true || false
const hasP3Color = window
.matchMedia('(color-gamut: p3)')
.matches;
console.log(hasP3Color); // true || false
Yukarıdaki kalıp, medya sorgularının geri kalanı için kopyalanabilir.
Renk alanı desteği sorguları
Aşağıdaki kod örneklerinde, ziyaret eden kullanıcının tarayıcısı ve çalışmak için kullanılacak renk alanı seçimi incelenmiştir.
CSS'den kontrol et
Bireysel renk alanı desteği, @supports sorgusu üzerinden sorgulanabilir:
@supports (background: rgb(0 0 0)) {
/* rgb color space supported */
}
@supports (background: color(display-p3 0 0 0)) {
/* display-p3 color space supported */
}
@supports (background: oklch(0 0 0)) {
/* oklch color space supported */
}
JavaScript'ten kontrol et
JavaScript'te CSS.supports() işlevi çağrılabilir ve tarayıcının bunu anlayıp anlamadığını görmek için bir özellik ve değer çifti iletilebilir.
CSS.supports('background: rgb(0 0 0)')
CSS.supports('background: color(display-p3 0 0 0)')
CSS.supports('background: oklch(0 0 0)')
Donanımı yerleştirme ve ayrıştırma kontrolleri bir araya getirilir
Her tarayıcının bu yeni renk özelliklerini uygulamasını beklerken, hem donanım hem de renk ayrıştırma özelliğini kontrol etmek iyi bir fikirdir. Renkleri kademeli olarak yüksek tanımlı hale getirirken genellikle bunu kullanıyorum:
:root {
--neon-red: rgb(100% 0 0);
--neon-blue: rgb(0 0 100%);
}
/* is the display HD? */
@media (dynamic-range: high) {
/* does this browser understand display-p3? */
@supports (color: color(display-p3 0 0 0)) {
/* safe to use display-p3 colors */
--neon-red: color(display-p3 1 0 0);
--neon-blue: color(display-p3 0 0 1);
}
}
Chrome Geliştirici Araçları ile renklerde hata ayıklama
Güncellenen Chrome Geliştirici Araçları, geliştiricilerin HD rengi oluşturmasına, dönüştürmesine ve hatalarını ayıklamasına yardımcı olacak yeni araçlarla donatılmıştır.
Renk seçici güncellendi
Renk seçici artık tüm yeni renk alanlarını destekliyor. Yazarların, kanal değerleriyle tıpkı kendileri gibi etkileşim kurmasına olanak tanır.
Gamut sınırları
Srgb ve display-p3 gamutları arasına bir çizgi çizen gamı sınır çizgisi de eklendi. Seçilen rengin hangi gamda olduğunun net olarak anlaşılmasını sağlar.
Bu, yazarların HD renkleri ile HD olmayan renkleri görsel olarak ayırt etmesine yardımcı olur.
Bu özellik, hem HD olmayan hem de HD renkler üretebildiğinden color() işlevi ve yeni renk alanlarıyla çalışırken özellikle faydalıdır. Renginizin hangi renk gamında olduğunu kontrol etmek istiyorsanız renk seçiciyi açın ve bakın.
Renkleri dönüştür
Geliştirici Araçları, yıllardır hsl, hwb, rgb ve hex gibi desteklenen biçimler arasında renkleri dönüştürebiliyor. shift + click bu dönüşümü gerçekleştirmek için Stiller bölmesinde
kare renk kartelasını üzerine yazın. Yeni renk araçları yalnızca dönüşümler arasında geçiş yapmakla kalmaz, aynı zamanda yazarların istedikleri dönüşümü görüp seçebilecekleri bir iletişim kutusu da oluşturur.
Dönüştürme işlemi sırasında, dönüşümün alana sığacak şekilde kırpılıp kırpılmadığını bilmek önemlidir. Geliştirici Araçları'nda artık, dönüştürülen renk için sizi bu kırpma işlemiyle ilgili uyaran bir uyarı simgesi bulunur.
Geliştirici Araçları'ndaki CSS hata ayıklama özelliklerini keşfedin.
Sonraki adımlar
Daha fazla titreşim, tutarlı manipülasyonlar ve interpolasyonlar genel olarak kullanıcılarınıza daha renkli bir deneyim sunar.
Rehberden daha fazla renk kaynağı okuyun.