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

Sofya Emelianova

GitHub

Jecelyn Yeen

Twitter GitHub Ana sayfa

Bu kılavuzda, CSS kapsayıcı sorgularını nasıl inceleyeceğiniz ve Chrome Geliştirici Araçları'ndaki Öğeler panelinde nasıl hata ayıklayacağınız gösterilmektedir.

CSS kapsayıcı sorguları, öğenin stillerini üst kapsayıcı özelliklerine göre değiştirmenize olanak tanır. Bu özellik, duyarlı web tasarımı kavramını sayfa tabanlı olmaktan çıkarıp 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ı çizgilerle görünmesini sağlar.

Yer paylaşımını açıp 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 kapsayıcının genişliğine göre stillerini değiştirebilir.

Kapsayıcı sorgularını inceleyin

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

Bu demo sayfasındaki @container bildirimlerini ne zaman inceleyebileceğinizi anlamak 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şıyorsa ilgili stiller uygulanır:

• En az 400px: Paragraf (p) öğesi sayfada blok olarak görünür. Yeni bir satırda başlar ve tüm genişliği kaplar.
• 600px değerinden fazla: alt öğeler, başlık (h1) üstte ve resim (img) üstte 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 üzerinde bir değere ayarlayın ve ardından etkilenen öğelerden birini seçin. Yatay düzen uygulayan @container bildirimlerine dikkat edin.

   

Kapsayıcı öğelerini bulma

Sorgunun geçerli olmasını sağlayan bir kapsayıcı öğeyi bulmak ve seçmek için fareyle @container bildiriminin üzerindeki öğe adının üzerine gelip tıklayın.

Fareyle üzerine geldiğinizde, ad Öğeler panelindeki öğeye dönüşür ve Stiller bölmesinde sorgulanan özellik ve geçerli değeri görüntülenir.

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

Bir sorguda hata ayıklamak için sorguyu CSS'yi görüntüleme ve değiştirme bölümünde açıklandığı gibi Stiller bölmesinde başka bir CSS bildirimiyle değiştirebilirsiniz.

Bu örnekte, kapsayıcının genişliği 500px şeklindedir. Paragraf (p) öğesi sayfada 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. Paragraf (p) öğesi, sorgu ölçütlerini karşılamaması nedeniyle sayfadan kayboluyor.