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

Bu Sevgililer Günü'nde, tüm kararlı tarayıcılarda kullanıma sunulacak boyut container sorgularını ve kapsayıcı sorgu birimlerini kutluyoruz.

Una Kravets

Kutlama: Bu web özelliği artık üç büyük tarayıcı motorunun hepsinde de kullanılabilir!

Konteyner sorgusu aşkı havada kaldı. Sevgililer Günü'nde, boyut kapsayıcı sorguları ve kapsayıcı sorgu birimleri tüm modern tarayıcılarda değişmez.

Tarayıcı Desteği

• . 105
• . 105
• . 110
• . 16

Kaynak

Kapsayıcı sorgularıyla bir üst öğenin (ör. inline-size) stil bilgilerini sorgulayabilirsiniz. Medya sorgularıyla 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 açısından çok kullanışlıdır. Örneğin, bir kenar çubuğuna ve ürün ızgarası içinde farklı bir yapılandırmaya yerleştirildiğinde belirli bir şekilde düzenlenebilen bir kart bileşeni etkinleştirilebilir.

Kapsayıcı sorgularını kullanma

Kapsayıcı sorgularını kullanmak için önce kapsayıcıyı bir üst öğede ayarlayı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ısayolunu kullanın:

.card-container {
  container: card / inline-size;
}

container-type değerinin inline-size olarak ayarlanması, üst öğenin satır içi boyutunu sorgular. İngilizce gibi Latin dillerinde metin, soldan sağa doğru satır içinde aktığından bu, kartın genişliğidir.

Artık bu kapsayıcıyı, @container kullanarak alt öğelerden herhangi birine stil uygulamak için kullanabilirsiniz:

.card-child {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@container (max-width: 400px) {
 .card-child {
  grid-template-columns: 1fr;
 }
}

Buna ek olarak, görüntü alanı tabanlı birim değerlerini kullandığınız gibi kapsayıcı sorgu uzunluğu birim değerlerini de kullanabilirsiniz. Aradaki 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ı tipografi gösterilmektedir:

.card-child h2 {
  font-size: clamp(2rem, 15cqi, 4rem);
}

Yukarıdaki 15cqi, kapsayıcının satır içi boyutunun% 15'ini belirtir. clamp() işlevi, buna minimum 2rem ve maksimum 4rem değerini verir. Bu süre zarfında 15cqi değeri bu değerler arasındaysa metin uygun şekilde küçülür ve büyür.

Kapsayıcı sorgusu Sevgililer

Bu yeni yıl, kapsayıcı sorgusuna karşılık vermek için bir Sevgililer Günü hazırladık. Bu etkinliği hangi (en son sürüm) kararlı tarayıcıda görüntülediğinizden bağımsız olarak, herkesin keyifle izlemesi için bir Sevgililer Günü hazırladık.