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ı olmaktan kapsayıcı tabanlı hale getirir.

Bu kılavuzda yer alan 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ı çizgi 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ı öğesini 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.

Container sorgularını inceleme

Öğeler paneli, bir alt öğeye uygulandıklarında, yani kapsayıcı sorgunun koşulunu yerine getirdiğinde @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'ten fazla: Paragraf (p) öğesi sayfada bir blok olarak görünür. Yeni bir satırda başlar ve tüm genişliği kaplar.
• 600px'ten fazla: Alt öğeler, üstte başlık (h1) ve solda resim (img) bulunan yatay bir ızgara düzeni kullanır.

İlk @container bildirimini 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, @container beyanını ve üst kapsayıcı article.card bağlantısını görebilirsiniz.

   

3. Genişliği 600px'ten fazla olacak şekilde ayarlayın, ardından etkilenen öğelerden herhangi birini seçin. Yatay düzen uygulayan @container beyanlarını gözlemleyin.

   

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

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. Sorgu ölçütlerini karşılamadığı için paragraf (p) öğesi sayfadan kaybolur.