Kapsayıcı sorguları kararlı tarayıcılarda açılıyor

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.

Una Kravets

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.

Yeni birlikte çalışabilirlik serisinin kapsamında