Diğer efektleri uygulama: Otomatik koyu temayı etkinleştirme, odak emülasyonu ve daha fazlası

Sofia Emelianova

Oluşturma sekmesi seçeneklerine dair bu referansla sayfanıza uygulayabileceğiniz yararlı efektleri keşfedin.

Reklam çerçevelerini vurgula

Çerçevelerin reklam olarak etiketlenip etiketlenmediğini kontrol etmek için:

1. Bu demoda Oluşturma sekmesini açın ve Reklam çerçevelerini vurgula'yı işaretleyin.
2. Reklam çerçevesinin kırmızıyla vurgulandığını gözlemleyin.

Odaklanılmış sayfa emülasyonu

Odağı sayfadan Geliştirici Araçları'na geçirirseniz bazı yer paylaşımı öğeleri, odak tarafından tetiklenirse otomatik olarak gizlenir. Örneğin, açılır listeler, menüler veya tarih seçiciler. check_box Odaklanmış sayfa emülasyonu seçeneği, bu tür bir öğede odaklanmış gibi hata ayıklamanıza olanak tanır.

Odaklanılmış bir sayfayı emüle etmek için:

1. Hata ayıklama yapılacak öğenin bulunduğu bir sayfa açın (ör. arama çubuğuyla YouTube web sitesi).

2. Sayfada Oluşturma sekmesini açın, ardından Odaklanmış bir sayfayı taklit et seçeneğini işaretleyip temizleyin.

   

Aynı seçeneği Öğeler > altındaki işlem çubuğundaki :hov düğmesinin altında da bulabilirsiniz Stiller.

Yerel yazı tiplerini devre dışı bırak

@font-face kurallarında local() kaynaklarını devre dışı bırakarak yerel yazı tipi alternatiflerinin beklendiği gibi çalışıp çalışmadığını kontrol edin.

Geliştiriciler ve tasarımcılar genellikle geliştirme sırasında aynı yazı tipinin iki farklı kopyasını kullanır:

• Tasarım araçlarınız için yerel bir yazı tipi ve
• Kodunuz için bir web yazı tipi

Yerel yazı tiplerini devre dışı bırakmak aşağıdakileri yapmanızı kolaylaştırır:

• Web yazı tipleri yükleme performansı ve optimizasyonuyla ilgili hataları ayıklayın ve ölçün
• CSS @font-face kurallarınızın doğruluğunu doğrulama
• Web yazı tipleri ve yerel sürümleri arasındaki farkları öğrenin

@font-face kurallarında eksik local() kaynaklarını taklit edin:

1. Yukarıdaki cümleyi inceleyin, Öğeler > Hesaplanmış'ı açın, en alta gidip Oluşturulan Yazı Tipleri bölümünde Chrome'un yerel dosyalarda Courier New'i bulduğunu görebilirsiniz.

   

2. Oluşturma sekmesini açın, Yerel yazı tiplerini devre dışı bırak'ı işaretleyin ve refresh sayfayı yeniden yükleyin.

3. Web'de bulunan Roboto'daki cümleyi inceleyin.

   

Otomatik koyu modu etkinleştirme

Sitenizi siz uygulamasanız bile koyu modda sitenizin nasıl görünebileceğine bakın.

Chrome 96 sürümünde, Android'de Otomatik Koyu Tema için bir kaynak denemesi kullanıma sunuldu. Bu özellik ile tarayıcı, kullanıcı işletim sisteminde koyu temaları etkinleştirmişse, açık temalı sitelere otomatik olarak oluşturulmuş koyu temayı uygular.

Otomatik koyu modu etkinleştirmek için:

1. Bu sayfada, Oluşturma sekmesini açın ve Otomatik koyu modu etkinleştir'i işaretleyin.
2. Bu sayfayı koyu modda gözlemleyin.

Görme bozuklukları emülasyonu

Herkes web'e erişebilmeli ve web'in keyfini çıkarabilmelidir. Google bunu gerçeğe dönüştürmeye büyük önem vermektedir.

Chrome Geliştirici Araçları ile, görme bozukluğu olan kişilerin sitenizi nasıl gördüğünü görebilir ve sitenizi onlar için daha iyi hale getirebilirsiniz. Daha fazla bilgi için Renk görme eksikliklerini simüle etme başlıklı makaleyi inceleyin.

Görme bozukluklarını taklit etmek için:

1. Oluşturma sekmesini açın.

2. Görme bozukluklarını emüle et bölümünde, açılır listeden aşağıdakilerden birini seçin:

   • Emülasyon yok.
   • Bulanık görüş.
   • Azaltılmış kontrast.
   • Protanopi (kırmızı yok). Kırmızı algılaması düşüktür; yeşil, kırmızı ve sarı renkleri birbirine karıştırır.
   • Yeşil körlüğü. Yeşil algısının düşük olması sarılar ve yeşiller karışıklığına neden oluyor.
   • Tritanopia (mavi yok). Mavi algısının düşük olması; yeşiller ve maviler karışıklığı.
   • Renk körlüğü. Renk görmenin kısmen veya tamamen olmaması.

AVIF ve WebP resim biçimlerini devre dışı bırakın

Bu emülasyonlar, geliştiricilerin tarayıcı değiştirmek zorunda kalmadan farklı resim yükleme senaryolarını test etmesini kolaylaştırır.

Yeni tarayıcılarda AVIF ve WebP biçimlerinde bir resim, eski tarayıcılar için ise yedek PNG resmi yayınlamak üzere aşağıdaki HTML koduna sahip olduğunuzu varsayalım.

<picture>
  <source srcset="test.avif" type="image/avif">
  <source srcset="test.webp" type="image/webp">
  <img src="test.png" alt="A test image">
</picture>

Bir sayfadaki tüm AVIF görsellerini (veya benzer şekilde WebP görsellerini) devre dışı bırakmak için:

1. Oluşturma sekmesini açın, AVIF resim biçimini devre dışı bırak'ı işaretleyin.
2. refresh Sayfayı yeniden yükleyin ve fareyle img src. Geçerli resim src (currentSrc) artık yedek WebP resmidir.

Benzer şekilde, WebP resimlerini de devre dışı bırakabilirsiniz.