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

Sofia Emelianova

Oluşturma sekmesi seçeneklerine ilişkin bu referansı kullanarak 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. Kırmızıyla vurgulanan reklam çerçevesine dikkat edin.

Odaklanılmış sayfa emülasyonu

Odağı, sayfadan Geliştirici Araçları'na değiştirirseniz bazı yer paylaşımı öğeleri odak tarafından tetiklendiğinde otomatik olarak gizlenir. Örneğin açılır listeler, menüler veya tarih seçiciler. check_box Odaklanmış sayfa emülasyonu seçeneği, böyle bir öğede odaktaymış gibi hata ayıklamanızı sağlar.

Dikkat: Bu seçenek etkinken document.visibilityState, visible olarak ayarlanır ve visibilitychange etkinliği tetiklenmez. Daha fazla bilgi için Page Görünürlük API'si sayfasına göz atın.

Odaklanılmış bir sayfa emülasyonu için:

1. Hata ayıklama yapılacak öğeyi içeren bir sayfayı (ör. arama çubuğu olan YouTube web sitesi) açın.

2. Sayfada Oluşturma sekmesini açın, ardından Odaklanmış sayfa emülasyonu seçeneğini işaretleyip temizleyin.

   

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

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ırlar:

• 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 kolaylaştırır:

• Web yazı tiplerinin yükleme performansında ve optimizasyonunda hata ayıklayıp bunları ölçün
• CSS @font-face kurallarınızın doğruluğunu onaylayın
• Web yazı tipleri ve yerel sürümleri arasındaki farkları öğrenin

Chrome, cihazınızda bu yazı tipini bulursa bu cümleyi Courier New'da oluşturur.

@font-face kurallarında eksik local() kaynakları emülasyonu:

1. Yukarıdaki cümleyi inceleyin, Öğeler > Hesaplanan'ı açın, ekranı aşağı kaydırın ve Oluşturulan Yazı Tipleri bölümünde Chrome'un yerel dosyalarda Courier New'u bulduğunu keşfedin.

   

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

3. Web'de bulunan Roboto'daki cümleye dikkat edin.

   

Otomatik koyu modu etkinleştir

Sitenizi uygulamamış olsanız bile koyu modda nasıl görünebileceğine bakın.

Chrome 96, Android'de Otomatik Koyu Tema için Kaynak Denemesini kullanıma sundu. Bu özellik sayesinde, kullanıcı işletim sisteminde koyu temaları etkinleştirdiyse tarayıcı, açık temalı sitelere otomatik olarak oluşturulan 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 izleyin.

Temel nokta: Otomatik Koyu Tema etkinleştirildiğinde CSS medya özelliği prefers-color-scheme açılır listesi otomatik olarak devre dışı bırakılır ve prefers-color-scheme: dark otomatik olarak ayarlanır.

Görme bozuklukları emülasyonu

Herkes web'e erişebilmeli ve web'in keyfini çıkarabilmelidir. Google, bunu gerçeğe dönüştürmeyi ilke edinmiştir.

Chrome Geliştirici Araçları ile görme bozukluğu olan kullanıcıların sitenizi nasıl gördüğünü öğrenerek sitenizi onlar için daha iyi hale getirebilirsiniz. Daha fazla bilgi için Renk görme bozukluklarını simüle etme konusuna bakın.

Görme bozuklukları emülasyonu 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üğü. Düşük kırmızı algısı; yeşil, kırmızı ve sarı tonlarının karışımıdır.
   • Yeşil körlüğü. Düşük yeşil algısı; yeşil, kırmızı ve sarı tonlarının karışımıdır.
   • Tritanopia (mavi yok). Mavi algısının düşük olması; yeşil ve mavinin karıştırılmasıdır.
   • Akromatopsi (renksiz). Kısmi veya tamamen renk görme kaybıdır.

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

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ılarda bir resmi AVIF ve WebP biçimlerinde, eski tarayıcılarda ise yedek bir PNG resmi sunmak için 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 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. Sayfayı yeniden yükleyin ve fareyle img src simgesinin üzerine gelin. Geçerli resim src (currentSrc) artık yedek WebP resmidir.

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

Önemli nokta: Bu seçenekler, resimlerin önbelleğe alınmasını otomatik olarak devre dışı bırakır.