Geliştirici Araçları İpuçları: CSS kapsayıcı sorgularını denetleme
Koleksiyonlar ile düzeninizi koruyun
İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.
CSS kapsayıcı sorguları, web geliştiricilerin heyecan duyduğu yeni CSS özelliğidir. Sayfa tabanlı duyarlı tasarımdan kapsayıcı tabanlı duyarlı tasarıma geçişle web tasarımında bir devrim başlatabilir.
Chrome Geliştirme Araçları, yeni düzen tasarım kalıplarını benimsemenize ve en son trendleri takip etmenize yardımcı olur. Bu CSS özelliğinin desteğiyle artık kapsayıcı sorgularınızı DevTools'da inceleyebilir ve hata ayıklayabilirsiniz.
Yukarıdaki videoda kapsayıcı sorgularına, söz dizimi ve DevTools'ta nasıl inceleneceklerine dair genel bir bakış sunulmaktadır.
Artık noktalı çizgi yer paylaşımını açan ilgili rozeti kullanarak kapsayıcı öğeleri ve bunların alt öğelerini keşfedebilirsiniz.
Kapsayıcılar sorgu koşullarını karşıladığında alt öğelere uygulanan @container kurallarını inceleyin.
DevTools'ta kapsayıcı sorgularının desteklenmesi hakkında daha fazla bilgi edinmek için CSS kapsayıcı sorgularını inceleme ve hata ayıklama başlıklı makaleyi inceleyin.
Aksi belirtilmediği sürece bu sayfanın içeriği Creative Commons Atıf 4.0 Lisansı altında ve kod örnekleri Apache 2.0 Lisansı altında lisanslanmıştır. Ayrıntılı bilgi için Google Developers Site Politikaları'na göz atın. Java, Oracle ve/veya satış ortaklarının tescilli ticari markasıdır.
Son güncelleme tarihi: 2022-06-30 UTC.
[[["Anlaması kolay","easyToUnderstand","thumb-up"],["Sorunumu çözdü","solvedMyProblem","thumb-up"],["Diğer","otherUp","thumb-up"]],[["İhtiyacım olan bilgiler yok","missingTheInformationINeed","thumb-down"],["Çok karmaşık / çok fazla adım var","tooComplicatedTooManySteps","thumb-down"],["Güncel değil","outOfDate","thumb-down"],["Çeviri sorunu","translationIssue","thumb-down"],["Örnek veya kod sorunu","samplesCodeIssue","thumb-down"],["Diğer","otherDown","thumb-down"]],["Son güncelleme tarihi: 2022-06-30 UTC."],[],[]]
