Bu doküman, yüksek tanımlı CSS renk kılavuzunun bir parçasıdır.
Web projenizin rengini desteklemek amacıyla güncellemek için iki ana strateji geniş gamlı ekranlar:
Sorunsuz azalma: Yeni renk alanlarını kullanın ve tarayıcının ve işletim sisteminin ekran özelliklerine göre hangi rengin gösterileceğini belirler.
Progresif geliştirme:
@supports
ve@media
özelliklerini kullanarak tarayıcı özelliklerini kullanır ve koşullar karşılanırsa geniş bir tarayıcı renk gamı da oluşturabilirsiniz.
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. İşte size artıları ve eksileri dezavantajları:
Değerli azalma
- Artıları
- En basit rota.
- Geniş bir ekran gamı yoksa tarayıcı gamı sRGB ile eşlenir veya buna sabitlenir. Bu yüzden, sorumluluk tarayıcıda.
- Eksileri
- Tarayıcı, hoşunuza gitmeyen bir renk gamı veya gamı eşleştirmesi yapabilir.
- Tarayıcı, renk isteğini anlamayabilir ve tamamen başarısız olabilir. Ancak rengi iki kez belirterek bu işlemin etkisini anladığı bir önceki renge geri döner.
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ı, geniş yelpazede özellikler ve renk desteğinin kontrol edilmesine olanak tanıyor söz dizimi desteğini kullanabilirsiniz. Kullanıcının tam renk gamı değil, genel bir yanıt sunuluyor ve böylece kullanıcı gizliliğinin elde edilir. Renk alanı desteği tam olarak kullanıcıya ait donanımın özelliklerine özgü özellikler (ör. gam)
Renk gamı destek sorguları
Aşağıdaki kod örnekleri, kullanıcının görüntüleyin.
CSS'den kontrol et
En az spesifik olan destek sorgusu
dynamic-range
ortam sorgusu:
@media (dynamic-range: high) {
/* safe to use HD colors */
}
Yaklaşık veya daha fazla destek için
color-gamut
ortam sorgusu:
@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 denetlenmesi için iki medya sorgusu daha vardır:
JavaScript'ten kontrol et
JavaScript için
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ı destek sorguları
Aşağıdaki kod örnekleri, ziyaret eden kullanıcının tarayıcısını ve seçimini kontrol eder renk alanlarından oluşuyor.
CSS'den kontrol et
Farklı renk alanı desteği,
@supports
sorgusu:
@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 için
CSS.supports()
işlevi,
anlar.
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 ve ayrıştırma kontrollerini bir araya getirme
Her tarayıcının bu yeni renk özelliklerini uygulamasını beklerken hem donanım yeteneğini hem de renk ayrıştırma yeteneğini kontrol etmek iyi bir fikirdir. Renkleri kademeli olarak yüksek tanımlı olacak şekilde geliştirirken 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 renk hata ayıklama
Chrome Geliştirici Araçları güncellendi ve geliştiricilere yardımcı olacak yeni araçlarla donatıldı oluşturmak, dönüştürmek ve hata ayıklamak için kullanabilirsiniz.
Renk seçici güncellendi
Renk seçici artık tüm yeni renk alanlarını destekliyor. Yazarların şunları yapmasına izin veriliyor: olduğu gibi kanal değerleriyle etkileşime geçmelerine yardımcı olur.
Gamut sınırları
sren simgesi ile güzergâh arasında bir çizgi çizen bir gam sınır çizgisi de eklendi display-p3 gamları. Seçilen rengin hangi gamda olduğunu açıkça göstermek.
Yazarlar bu sayede HD renkler ile HD olmayan renkleri görsel olarak birbirinden ayırt edebilir.
Bu, özellikle color()
işlevi ve yeni
hem HD olmayan hem de HD olmayan renkler üretebildiğinden Eğer
renginizin hangi renk gamında olduğunu kontrol etmek istiyorsanız, renk seçiciyi açıp bakın!
Renkleri dönüştür
Geliştirici Araçları, desteklenen biçimler arasında (hsl,
hwb, rgb ve onaltılıktır. Kare renk paleti üzerinde shift + click
Stiller bölmesini açın. Yeni renk araçları yalnızca döngüyü değil,
kullanarak, yazarların söz konusu metni görüp seçebilecekleri bir iletişim kutusu
dönüşüm elde etmesini sağlar.
Dönüşüm sırasında, dönüşümün boşluk oluşturur. Geliştirici Araçları'nda artık dönüştürülmüş renkle ilgili bir uyarı simgesi bulunuyor. Bu simge ekliyorum.
![Rengin yanında bir uyarı simgesi bulunan Geliştirici Araçları gamı kırpmanın ekran görüntüsü.](https://developer.chrome.google.cn/static/docs/css-ui/migrate-hd-color/image/devtools-informing.png?authuser=2&hl=tr)
Geliştirici Araçları'ndaki CSS hata ayıklama özelliklerini inceleyin.
Sonraki adımlar
Daha fazla canlılık, tutarlı manipülasyonlar ve interpolasyonlar sayesinde genel olarak renkli bir deneyim sunabilir.
Diğer renk kaynaklarını okuyun bazı bilgiler vereceğim.