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

Sofia Emelianova

Jecelyn Yeen

Bu kılavuzda, Chrome Geliştirici Araçları'ndaki Öğeler 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

Öğeler 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. Öğeler 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

Öğeler 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. Öğeler 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, Öğeler panelinde öğenin bir bağlantısına dönüşür ve Stiller 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.