CSS kapsayıcı sorgularını inceleme ve hata ayıklama

Sofia Emelianova

Jecelyn Yeen

Bu kılavuzda, Chrome Geliştirici Araçları'ndaki Elements panelinde CSS kapsayıcı sorgularının nasıl inceleneceği ve hata ayıklanacağı gösterilmektedir.

CSS kapsayıcı sorguları, öğenin stillerini üst kapsayıcı özelliklerine göre değiştirmenizi sağlar. Bu özellik, duyarlı web tasarımı kavramını sayfa tabanlı yerine kapsayıcı tabanlı hale getirir.

Bu kılavuzdaki ekran görüntüleri bu demo sayfasından alınmıştır.

Container'ları ve alt öğelerini keşfedin

Elements panelinde, sorgu kapsayıcısı olarak tanımlanan her öğenin yanında bir container rozeti bulunur. Rozet, kapsayıcının ve alt öğelerinin noktalı çizgiyle yer paylaşımını açar/kapatır.

Yer paylaşımını açmak/kapatmak için:

1. Geliştirici Araçları'nı açın.
2. Elements panelinde, kapsayıcı olarak tanımlanan öğenin yanındaki container rozetini tıklayın.

Bu örnekte, container-type: inline-size özelliği kapsayıcı öğeyi tanımlar. Alt öğeler, satır içi boyutunu (yatay eksen) sorgulayabilir ve stillerini kapsayıcının genişliğine göre değiştirebilir.

Kapsayıcı sorgularını inceleme

Elements paneli, bir alt öğeye uygulandıklarında, yani kapsayıcı sorgunun koşulunu karşıladığında @container sorgu bildirimlerini gösterir.

@container beyanlarını ne zaman inceleyebileceğinizi bu demo sayfasında öğrenmek için aşağıdaki kod örneğini inceleyin:

@container (inline-size > 400px) {
  .coffee p {
    display: block;
  }
}

@container (inline-size > 600px) {
  .coffee {
    display: grid;
    grid-template-columns: 280px auto;
  }

  .coffee h1 {
    grid-column: 1/3;
  }

  .coffee img {
    grid-row: 2/4;
  }

Bu örnekte, kapsayıcının genişliği aşağıdaki piksel sayısını aşarsa ilgili stiller uygulanır:

• 400px değerinden büyük: Paragraf (p) öğesi, sayfada bir blok olarak görünür. Yeni bir satırdan başlar ve tüm genişliği kaplar.
• En az 600px: Alt öğeler, başlık (h1) üstte ve resim (img) solda olacak şekilde yatay bir ızgara düzeni kullanır.

İlk @container beyanını incelemek için:

1. Elements panelinde kapsayıcının genişliğini 500px olarak ayarlayın. p öğesi görünür.

2. p öğesini seçin. Stiller bölmesinde, article.card üst kapsayıcısının bağlantısıyla birlikte @container bildirimini görebilirsiniz.

   

3. Genişliği 600px değerinden yüksek bir değere ayarlayın, ardından etkilenen öğelerden birini seçin. Yatay düzen uygulayan @container bildirimlerini inceleyin.

   

Kapsayıcı öğelerini bulma

Sorgunun etkili olmasına neden olan bir kapsayıcı öğeyi bulup seçmek için fareyle @container bildiriminin üzerindeki öğe adının üzerine gelip tıklayın.

Fareyle üzerine gelindiğinde ad, Elements panelinde öğenin bir bağlantısına dönüşür ve Elements bölmesinde sorgulanan özellik ve geçerli değeri görüntülenir.

Kapsayıcı sorgularını değiştirme

Hata ayıklamak için CSS'yi görüntüleme ve değiştirme bölümünde açıklandığı gibi, bu sorguyu Stiller bölmesindeki diğer herhangi bir CSS bildirimi gibi değiştirebilirsiniz.

Bu örnekte, kapsayıcının genişliği 500px şeklindedir. Sayfada paragraf (p) öğesi görünür.

1. p öğesini seçin. Stiller bölmesinde. @container (inline-size > 400px) beyanını görebilirsiniz.
2. 400px olan inline-size değerini 520px olarak değiştirin.
3. Paragraf (p) öğesi, sorgu ölçütlerini karşılamaması nedeniyle sayfadan kayboldu.