Genel Bakış
Boyuta duyarlı stil, bileşenlerin düzenlerini veya görünümlerini tüm ekranın boyutuna göre değil, kendilerine ayrılan alana göre değiştirmesine olanak tanır. Bu, bir düzenin farklı bölümlerine (ör. dar bir kenar çubuğu veya geniş bir ana alan) yerleştirilebilecek kartlar ya da gezinme çubukları gibi bileşenler için kullanışlıdır.
Kapsayıcı sorgularını kullanmak, bileşenleri gerçekten modüler hale getirdiği için önerilir. Bileşenin nerede bulunacağını bilmeniz veya olası her düzeni işlemek için karmaşık medya sorguları yazmanız gerekmez.
Uygulama
1. Kapsayıcıyı tanımlama
ZORUNLU: Öncelikle tarayıcıya hangi öğenin ölçülecek kapsayıcı olduğunu belirtmeniz gerekir.
.card-container {
/* Define the container type. Use 'inline-size' for width-based queries. */
/* You can also use 'size' for both width and height, but it requires explicit sizing. */
container-type: inline-size;
}
2. Stilleri kapsayıcı boyutuna göre uygulama
Kapsayıcı belirli bir boyuta ulaştığında stilleri uygulamak için @container kuralını kullanın.
/* Default styles for small containers (stacked layout) */
.card {
display: flex;
flex-direction: column;
gap: 1rem;
}
/* Styles for larger containers (side-by-side layout) */
/* This triggers when the container is wider than 400px */
@container (min-width: 400px) {
.card {
flex-direction: row;
align-items: center;
}
.card-image {
width: 150px;
height: 150px;
}
}
3. İçeriği koşullu olarak gösterme
Daha fazla alan olduğunda ek ayrıntıları gizlemek veya göstermek için kapsayıcı sorgularını da kullanabilirsiniz.
.card-details {
/* Hide extra details by default in small spaces */
display: none;
}
@container (min-width: 600px) {
.card-details {
/* Show details when there is plenty of room */
display: block;
}
}
Yedek stratejiler
Kapsayıcı sorgularını desteklemeyen tarayıcılar için en iyi yaklaşım, güvenli bir varsayılan düzen (ör. yığınlanmış dikey düzen) kullanmak ve genel ekran boyutu izin veriyorsa medya sorgularını kullanarak bu düzeni kademeli olarak progresif geliştirmektir.
/* Default safe stacked layout */
.card {
display: flex;
flex-direction: column;
}
/* Fallback using media queries for older browsers */
@media (min-width: 600px) {
.card {
flex-direction: row;
}
}
/* Overwrite with container queries where supported */
@supports (container-type: inline-size) {
@media (min-width: 600px) {
.card {
/* Reset media query fallback if needed, or let container query handle it */
flex-direction: column;
}
}
@container (min-width: 400px) {
.card {
flex-direction: row;
}
}
}
Bu sayede, eski tarayıcıları kullanan kullanıcılar, her bir kapsayıcı genişliğine mükemmel şekilde uyum sağlamasa bile kullanılabilir bir düzene sahip olur.