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

Sofia Emelianova
Sofia Emelianova
GitHub

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

Reklam kırmızıyla vurgulanmıştır

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çicileri. 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.

    Odaklanılmış sayfa emülasyonu

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

Bir öğeyi dondurmayla ilgili daha fazla bilgi için Ekranı dondurma ve kaybolan öğeleri inceleme başlıklı makaleyi 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, geliştirme sırasında genellikle 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ğrulama
  • Web yazı tipleri ile yerel sürümleri arasındaki farkları keşfetme
Chrome, cihazınızda Courier New yazı tipini bulursa bu cümleyi Courier New yazı tipinde gösterir.

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

    Oluşturulan yazı tipleri: yerel

  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 yazı tipindeki cümleyi inceleyin.

    Oluşturulan yazı tipleri: ağ kaynağı

Otomatik koyu modu etkinleştirme

Koyu modu uygulamamış olsanız bile sitenizin koyu modda nasıl görünebileceğini öğrenin.

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

Otomatik koyu mod etkinleştirildi

Görme bozukluğu emülasyonu

Herkes web'e erişip web'den keyif alabilmeli. Google, bu hedefi gerçekleştirmeye kararlıdır.

Chrome Geliştirici Araçları'nı kullanarak görme engelli kullanıcıların sitenizi nasıl gördüğünü anlayabilir 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 kusurlarını taklit etme 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ı 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ı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.
    • Renk körlüğü. Renk görmenin kısmen veya tamamen olmaması.

Mavi körlüğü (mavi yok) seçildi.

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 etmesini kolaylaştırır.

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

Resim türlerini taklit etme

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