Container sorguları örnek olayları

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

Kapsayıcı sorguları hızlı yanıt vermek için son derece dinamik ve esnek bir yaklaşım tasarım. Kapsayıcı sorguları @container at kuralını kullanır. Bu işlev, yöntemi ile medya sorgusuna @media gönderebilir, ancak bunun yerine @container görünüm ve kullanıcı aracısı yerine stil bilgileri için bir kapsayıcı görevi görür.

Kapsayıcı sorguları, Yeni Kullanıma Sunulan Temel Değer'in bir parçasıdır.

Tarayıcı Desteği

  • Chrome: 105..
  • Kenar: 105..
  • Firefox: 110..
  • Safari: 16..

Kaynak

Kapsayıcı sorguları, kapsayıcı boyutuna yanıt vererek bileşenlerin uyum sağlamasına olanak tanır bir bağlantıyla ekleyebilirsiniz. Örneğin, bir kart bileşeni, yerleştirildiği kapsayıcıya göre farklı bir boyut ve stil sağlar. Örneğin, bölümü veya sayfanın ana gövdesindeki bir ızgarada

Aşağıdaki resimde gösterildiği gibi, tek bir anahtar kelimeden oluşan bir makro için medya sorgularını düzenler, mikro düzenler için container sorguları, kullanıcı tercihine dayalı medyalar kullanarak güçlü bir duyarlı tasarım sistemi oluşturabilirsiniz. Okunanlar kapsayıcı sorguları hakkında daha fazla bilgi ve yeni duyarlı tasarım.

Farklı stil türlerinin birlikte nasıl çalıştığını gösteren resim.
web.dev - Yeni Duyarlı.

Bu makale, e-ticaret şirketlerinin nasıl performans gösterdiğini açıklayan bir dizinin parçasıdır web sitelerini yeni CSS ve kullanıcı arayüzü özellikleri kullanarak geliştirdi. Bu kez nasıl yararlandığı ve bu sorgulardan nasıl yararlandığı ile ilgili daha kapsamlı bilgiler edineceksiniz.

redBus

redBus, mobil ve masaüstü sürümleri için farklı kodlar sunar ve sunar. Yapılacaklar ve kargo sayfaları için bu kodu birleştirmeyi tek bir kod tabanına dönüştürmenize yardımcı olur. Bu da onların duyarlı olmasını sağladı ve süreyi ifade eder. Aşağıdaki örnekte kargo sayfası kullanılarak bu gösterilmektedir:

Kod

Aşağıdaki örnekte .bpdpCardWrapper üst kapsayıcıdır, bpdpSection olarak adlandırıldı.

bpdpSection kapsayıcısının minimum 744 piksel genişliği varsa font-size ve .bpdpCardContainer tarafından seçilen bileşenler için line-height .subTxt, .bpdpAddress güncellendi.

//Code for Container Queries
.bpdpCardWrapper {
   container-type: inline-size;
   container-name: bpdpSection;
}
@container bpdpSection (min-width: 744px){
   .bpdpCardContainer{
      font-size: 1rem;
      line-height: 1.5rem;
   }

   .subTxt, .bpdpAddress{
       font-size: 0.875rem;
       line-height: 1.25rem;
   }
}

Etki

Önce (birden fazla kod tabanı) Sonra (tek kod tabanı)
Altyapı Ayrı altyapı (yüksek maliyet). Aynı altyapı (düşük maliyet).
Tasarım Kullanıcı arayüzü ayrı ancak tutarlılık kötü. Çözmesi zor ama mümkün.
Performans Sistem ayrı olduğundan ancak performansı artırma çabasını çoğalttığından kullanımı kolaydır. Bu, sayfaya ve özelliğe özgü olsa da redBus PageSpeedInsights puanı 80'in üzerinde.
Geliştirme Ayrı geliştirici ekipleri. Zamanda %30-%40 kısalma.

Tokopedia

Tokopedia'nın Product Detail Pages (PDP) adlı çalışmasında mağaza ve ürün bilgileri. Daha önce, bu sayfanın düzeni üç bölüme ayrılıyordu sütuna yerleştiriliyor ve bazen daha küçük resimler için soldaki ürün adı (aşağıdaki "Önce" videosuna bakın).

Bu düzen sorununu çözmek için kapsayıcı sorgularını kolay ve hızlı bir şekilde kullanmaya başladılar. Bu uygulamadan sonra, iş ortaklarının esnek bir şekilde Ürün adı her zaman tamamen görünürdü (aşağıdaki "Sonra" videosuna bakın).

Önce

Kapsayıcı sorguları uygulamadan önce, "ISKU 10 in 1 Obeng" satu.." daha küçük ekran boyutlarında kesilmiş şekli.

Sonra

Kapsayıcı sorgularının uygulanması, düzenin metni görüntü alanında tutacak şekilde ayarlanmasını sağlar.

Kod

Aşağıdaki kod, infowrapper adlı üst kapsayıcının boyutunu sorgular. infowrapper öğesinin maksimum genişliği 360 pikselse alt bileşenlerin width, margin, ve padding ayarlandı.

container-type değerinin inline-size olarak ayarlanması, satır içi yön boyutunu sorgular anne veya baba olur. İngilizce gibi Latin dillerinde ise bu, metin, satır içinde soldan sağa doğru aktığı için üst kapsayıcıya yerleştirilmelidir.

export const styCredibilityContainer = css`
  container-name: infowrapper;
  container-type: inline-size;
`;

export const styBtnShopFollow = css`
  margin-left: auto;
  width: 98px;
  @container infowrapper (max-width: 360px) {
    width: 100%;
    margin-top: 2px;
    margin-bottom: 8px;
    padding-left: 60px;
  }
`;

export const styBottomRow = css`
  margin-top: 4px;
  padding-left: 60px;
  display: flex;
  align-items: center;

  @container infowrapper (max-width: 360px) {
    padding-left: 0px;
  }

  > div {
    text-align: left;
    margin-top: 0 !important;
  }
`;

Kapsayıcı sorguları kullanırken dikkat edilmesi gereken noktalar

Tokopedia, kullanım alanını kendi sitesindeki metin üç nokta konumuna bakarak buldu. Bu durum, çok küçük olabilecek ve içeriğin kesilmesine neden olabilecek kapsayıcıları belirtiyordu. kullanıcı için kapalıdır.

E-ticaret sitelerinde kapsayıcı sorguları için başka bir iyi kullanım örneği de kullanıma sunuyoruz. Örneğin, Sepete ekle düğmesi gösterilebilir. ana kapsayıcıya göre farklı şekilde (örneğin, sayfadaki birincil CTA ise metin içeren ürün kartı ve simge). İlgili içeriği oluşturmak için kullanılan düğmesi, kapsayıcı sorguları için iyi bir aday olabilir.

Sitenizde kademeli iyileştirmeler yapmayı seçebilirsiniz. Örneğin, Tokopedia'nın elips örneği gibi daha küçük kullanım alanlarıyla başlayabilir kapsayıcı sorgularını buradan uygulayabilirsiniz. Sonra gittikçe daha fazla vaka bulun ve yardımcı olmaktır.

Kaynaklar:

Bu seride, e-ticaretin nasıl gerçekleştiğinden bahseden diğer makaleleri inceleyin. kaydırma odaklı gibi yeni CSS ve kullanıcı arayüzü özelliklerinden faydalanan şirketlere animasyonlar, pop-up, kapsayıcı sorguları ve has() seçicisi.