Renk ayarı - CSS Hileleri

Anonim

color-adjustMülkiyet olarak spec tarafından açıklanan “farklı-yetenek cihazlarda koruyarak renkler.” Retina kalitesinde ekranları olmayan telefonlar, tabletler ve diğer cihazların nasıl olduğunu biliyor musunuz? Bu özellik, tarayıcıya, bu kaliteye göre renkleri nasıl işleyeceğine dair kararlar vermesi için bir ipucu sağlar.

"Bekle, kırmızı sadece kırmızı değil mi?" Çizgisinde bir şeyler düşünüyor olabilirsiniz. Ve evet, bu kesinlikle doğru. Nerede görüntülenirse görüntülensin doğru olan bir rengi optimize etmenin veya ayarlamanın ne anlamı var?

Önemli olan nokta, tarayıcıların zaten bu belirlemeleri yapma ve renkleri kendi başlarına ayarlama eğiliminde olmalarıdır; örneğin, kullanıcı aracısı başka bir faktörün ekran kalitesinden dolayı belirli bir onaltılık görüntü oluşturmada yetersizse, biraz farklı bir kırmızı çıktı vermek gibi. Mülk, tarayıcıya etkili bir şekilde şunu söylüyor: "Hey, bu rengi kullanmanızı istiyorum, ancak durum için en iyi alternatifinizi uygulayamıyorsanız ve uygulamak istiyorsanız bu harika." Veya tersine, tarayıcıya her ne pahasına olursa olsun rengi tam olarak eşleştirmesi talimatını verebilir.

Basılı Stiller

Yeterince ilginç bir şekilde, şartname tanımı boyunca web sayfalarını yazdırma örneğini kullanır color-adjust. Ancak, yazdırmak için tasarlandığına dair gerçek bir belge yoktur. Bu, Chrome ve Safari'nin adı verilen ön ekli bir sürümü uygulamasına engel olmadı webkit-print-color-adjust, bu da yazdırma amaçlarına yönelik olduğunun güçlü bir göstergesidir.

Bu neden önemli? Spesifikasyon, basılı bir sayfada stilize edilmiş bir tablonun zebra çizgisini korumanın okunaklılığa yardımcı olabileceği bir kullanım durumunu açıklar:

Örneğin, basılı talimatlar sunan bir harita web sitesi, beyaz ve açık gri arka planlar arasında dönüşümlü olarak yönlerdeki adımları "zebra çizebilir". Bu zebra çizgisini kaybetmek ve saf beyaz bir arka plana sahip olmak, bir arabada dikkatiniz dağıldığında yönlerin hızlı bir bakışla okunmasını zorlaştıracaktır.

Olarak color-adjustayarlandığında bildirilen ve yazdırılan stiller arasındaki fark economy.

Sözdizimi

.my-element ( color-adjust: (economy | exact); )

Değerler

  • economy(başlangıç ​​değeri): Bu değer, tarayıcının bir öğenin renginde ve stilinde, ister okunabilirliği artırmak, ister bir aygıtın görüntüleyemediği bir rengi değiştirmek veya başka bir faktör olsun, ihtiyaç duyduğuna karar verdiği yerlerde ayarlamalar yapmasına olanak tanır. Bunun varsayılan değer olduğunu ve özellik uygulanmasa bile tarayıcıların bu şekilde davranacağını unutmayın.
  • exact: Bu değer, tarayıcıya, beyan edilen stili korumak için her ne pahasına olursa olsun bir rengi eşleştirme talimatı verir. Öğe için "önemli" veya "önemli" olan stilleri belirtmek için kullanılacaktır.

economyÖzelliğin çağrılıp çağrılmadığının varsayılan kullanımının, color-adjusttarayıcılara korunması için yeterince önemli olan stilleri belirten bir sinyal sağlamak üzere tasarlandığını gösterdiğini unutmayın.

Şartname Durumu

color-adjustÖzelliği bu yazının yazıldığı anda ilk kamu çalışma taslak durumunda olan CSS Renk Modülü Seviye 4, tanımlanmıştır. Bu, henüz W3C tarafından onaylanmadığı ve daha sonraki revizyonlarda güncellenebileceği, değiştirilebileceği ve hatta kaldırılabileceği anlamına gelir. Bu nedenle, bu özellik üretime hazır değildir ve deneysel olarak kabul edilir.

Tarayıcı Desteği

Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.

Masaüstü Bilgisayar

Krom Firefox IE Kenar Safari
19 * 48 Hayır 79 * 6 *

Mobil / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81 14.0-14.4

Daha fazla bilgi

  • CSS Renk Modülü Seviye 4 İlk Genel Çalışma Taslağı
  • Microsoft Edge kullanım istatistikleri
  • MDN Belgeleri
  • Renk ayarlama Özelliğinin Olanakları