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:
- Geliştirici Araçları'nı açın.
- Öğ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:
- Öğeler panelinde kapsayıcının genişliğini
500px
olarak ayarlayın.p
öğesi görünür. p
öğesini seçin. Stiller bölmesinde,article.card
üst kapsayıcısının bağlantısıyla birlikte@container
bildirimini görebilirsiniz.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.
p
öğesini seçin. Stiller bölmesinde.@container (inline-size > 400px)
beyanını görebilirsiniz.400px
olaninline-size
değerini520px
olarak değiştirin.- Paragraf (
p
) öğesi, sorgu ölçütlerini karşılamaması nedeniyle sayfadan kayboluyor.