HD CSS rengine taşı

Bu doküman, yüksek tanımlı CSS renk kılavuzunun bir parçasıdır.

Adam Argyle

Web projenizin rengini desteklemek amacıyla güncellemek için iki ana strateji geniş gamlı ekranlar:

1. 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.

2. 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:

Tarayıcı Desteği

• . 98
• . 98
• . 100'ler
• . 13.1

Kaynak

@media (dynamic-range: high) {
  /* safe to use HD colors */
}

Yaklaşık veya daha fazla destek için color-gamut ortam sorgusu:

Tarayıcı Desteği

• . 58
• . 79
• . 110
• . 10

Kaynak

@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:

1. @media (color)
2. @media (color-index)

JavaScript'ten kontrol et

JavaScript için window.matchMedia() işlevi çağrılabilir ve değerlendirme için bir medya sorgusu iletilebilir.

Tarayıcı Desteği

• . 9
• . 12)
• . 6
• . 5.1

Kaynak

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:

Tarayıcı Desteği

• . 28
• . 12)
• . 22
• . 9

Kaynak

@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.

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.