Bu Sevgililer Günü'nde, boyut kapsayıcı sorguları ve kapsayıcı sorgu birimlerinin kararlı tüm tarayıcılarda kullanıma sunulmasını kutluyoruz.
Arama sorgusunda aşıklar yükseliyor! Bu Sevgililer Günü'nde, boyut kapsayıcı sorguları ve kapsayıcı sorgu birimleri tüm modern tarayıcılarda sabittir.
Kapsayıcı sorgularıyla, bir üst öğenin inline-size
gibi stil bilgilerini sorgulayabilirsiniz. Medya sorgularında görüntü alanının boyutunu sorgulayabilirsiniz. Kapsayıcı sorguları, kullanıcı arayüzündeki konumuna göre değişebilen bileşenleri etkinleştirir.
Kapsayıcı sorguları özellikle duyarlı tasarım ve yeniden kullanılabilir bileşenler için kullanışlıdır. Örneğin, bir kenar çubuğuna yerleştirildiğinde belirli bir şekilde ve ürün ızgarası içinde farklı bir yapılandırmada yerleştirilebilen bir kart bileşenini etkinleştirme.
Kapsayıcı sorgularını kullanma
Kapsayıcı sorgularını kullanmak için önce bir üst öğede kapsama alma ayarını yapın. Bunu üst kapsayıcıda bir container-type
ayarlayarak yapın veya aynı anda hem tür hem de ad vermek için container
kısaltmasını kullanın:
.card-container {
container: card / inline-size;
}
container-type
öğesinin inline-size
olarak ayarlanması, üst öğenin satır içi yön boyutunu sorgular. İngilizce gibi Latin dillerinde, metin soldan sağa doğru satır içinde aktığı için bu değer kartın genişliğidir.
Artık bu kapsayıcıyı, @container
kullanarak alt öğelerine stil uygulamak için kullanabilirsiniz:
.card-child {
display: grid;
grid-template-columns: 1fr 1fr;
}
@container (max-width: 400px) {
.card-child {
grid-template-columns: 1fr;
}
}
Ayrıca, kapsayıcı sorgusu uzunluk birimi değerlerini, görüntü alanı tabanlı birim değerleriyle aynı şekilde kullanabilirsiniz. Aralarındaki fark, kapsayıcı birimlerinin görüntü alanı yerine kapsayıcıya karşılık gelmesidir. Aşağıdaki örnekte minimum ve maksimum boyut değeri vermek için kapsayıcı sorgu birimlerini ve clamp()
işlevini kullanan duyarlı yazı biçimi gösterilmektedir:
.card-child h2 {
font-size: clamp(2rem, 15cqi, 4rem);
}
Yukarıdaki 15cqi
değeri, kapsayıcının satır içi boyutunun% 15'ini belirtir. clamp()
işlevi, bu değere minimum 2 rem, maksimum 4 rem değerini verir. Bu süre zarfında, 15cqi
bu değerlerin arasındaysa metin de buna göre küçülür ve büyür.
Sevgililer Günü kapsayıcı sorgusu
Bu tatilde kapsayıcı sorgu sevgisini kutlamak için, hangi (en son sürüm) kararlı tarayıcıyı kullanıyor olursanız olun, hepinizin hoşuna gidecek bir Sevgililer Günü hazırladık.