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

Sofia Emelianova

Oluşturma sekmesi seçeneklerini referans göstererek sayfanıza uygulayabileceğiniz faydalı efektleri keşfedin.

Reklam çerçevelerini vurgula

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

1. Bu demo'da 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 Odaklanılan sayfayı simüle et seçeneği, böyle bir öğedeymiş gibi hata ayıklamanızı sağlar.

Odaklanılmış bir sayfa emülasyonu yapmak 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 > Stiller bölümündeki işlem çubuğunda :hov düğmesinin altında da bulabilirsiniz.

Bir öğeyi dondurmanın diğer yollarını keşfetmek için Ekranı dondur ve kaybolan öğeleri inceleme bölümünü inceleyin.

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

@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ı tiplerinin yükleme performansını ve optimizasyonunu hata ayıklama ve ölçme
• CSS @font-face kurallarınızın doğruluğunu doğrulayın
• Web yazı tipleri ile yerel sürümleri arasındaki farkları keşfetme

@font-face kurallarında eksik local() kaynakları emülasyonunu kullanın:

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ştir

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ı emüle 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.
   • Kırmızı körlüğü (kırmızı yok). Kırmızıyı algılamada düşüklük; yeşil, kırmızı ve sarı renkleri birbirine karıştırma.
   • Döteranopi (yeşil değil). Yeşil algılaması düşüktür; yeşil, kırmızı ve sarı renkleri birbirine karıştırır.
   • Mavi körlüğü. Mavi algılaması düşüktür; yeşil ve mavi renkleri birbirine karıştırır.
   • Akromatopsi (renk yok). Renk görmenin kısmen veya tamamen olmaması.

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

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

Yeni tarayıcılar için AVIF ve WebP biçimlerinde, eski tarayıcılar için yedek PNG görseli içeren bir resim yayınlamak üzere aşağıdaki HTML kodunuz olduğunu 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 resimlerini (veya benzer şekilde WebP resimlerini) 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.