Container sorguları örnek olayları

Swetha Gopalakrishnan

Saurabh Rajpal

Kapsayıcı sorguları, duyarlı tasarıma son derece dinamik ve esnek bir yaklaşım sunar. Kapsayıcı sorguları @container at-kuralı kullanır. Bu, @media içeren bir medya sorgusuna benzer şekilde çalışır ancak @container, stil bilgileri için görüntü alanı ve kullanıcı aracısı yerine bir üst kapsayıcıyı sorgular.

Kapsayıcı sorguları, Yeni Kullanıma Sunulan Temel kapsamındadır.

Kapsayıcı sorguları, kapsayıcı boyutuna yanıt vererek bileşenlerin bir arayüzdeki konumlarına uyum sağlamasına olanak tanır. Örneğin, bir kart bileşeni boyutunu ve stillerini, yerleştirildiği kapsayıcıya (kenar çubuğu, hero bölümü veya sayfanın ana gövdesindeki ızgara) göre uyarlayabilir.

Aşağıdaki görselde gösterildiği gibi, makro düzenler için medya sorgularını, mikro düzenler için kapsayıcı sorgularını, kullanıcı tercihine dayalı medya sorgularıyla birleştirerek güçlü bir duyarlı tasarım sistemi oluşturabilirsiniz. Kapsayıcı sorguları ve yeni duyarlı tasarım hakkında daha fazla bilgi edinin.

Bu makale, e-ticaret şirketlerinin yeni CSS ve kullanıcı arayüzü özelliklerini kullanarak web sitelerini nasıl geliştirdiğini ele alan bir serinin parçasıdır. Bu sefer, bazı şirketlerin kapsayıcı sorgularını nasıl kullandığını ve bunlardan nasıl yararlandığını inceleyeceğiz.

redBus

redBus, mobil ve masaüstü sürümleri için farklı kodlar kullanır ve sunar. Things-to-do ve cargo sayfalarına kapsayıcı sorguları uyguladıktan sonra bu kodu bu siteler için tek bir kod tabanında birleştirdiler. Bu sayede, kullanıcılara hızlı yanıt verebilir ve geliştirme süresinden tasarruf edebilirsiniz. Aşağıdaki örnekte, kargo sayfası kullanılarak bu durum gösterilmektedir:

Kod

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

bpdpSection kapsayıcısının minimum genişliği 744 piksel ise .bpdpCardContainer ve .subTxt, .bpdpAddress tarafından seçilen bileşenlerin font-size ve line-height değerleri güncellenir.

//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

Tokopedia

Tokopedia'nın ürün ayrıntıları sayfalarında (PDP) mağaza ve ürün bilgileri için birden fazla sekme bulunur. Daha önce bu sayfanın düzeni üç sütuna bölünüyordu ve bazen sol taraftaki ürün adı, küçük ekran boyutlarında kesiliyor (aşağıdaki "Önce" videosuna bakın).

Bu sayfa düzeni sorununu çözmek için kapsayıcı sorgularını kolayca ve hızlıca benimsedi. Bu uygulamadan sonra, ürün adının her zaman tamamen görünür olduğu esnek bir düzene sahip oldular (aşağıdaki "Sonra" videosuna bakın).

Önce

Sonra

Kod

Aşağıdaki kod, infowrapper adlı üst kapsayıcının boyutunu sorgulayan bir koddur. infowrapper öğesinin maksimum genişliği 360 piksel ise alt bileşenlerin width, margin, ve padding değerleri ayarlanır.

container-type değerini inline-size olarak ayarlamak, üst öğenin satır içi yön boyutunu sorgulayarak İngilizce gibi Latin dillerinde metin soldan sağa doğru satır içi olarak aktığı için bu, üst kapsayıcının genişliği olur.

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ını kullanırken dikkat edilmesi gereken noktalar

Tokopedia, sitelerinde metin üç noktalarını inceleyerek kullanım alanını buldu. Bu, çok küçük olabilecek kapsayıcıların kullanıcının içeriği görememesine neden olduğunu gösteriyordu.

E-ticaret siteleri için kapsayıcı sorgularının bir diğer iyi kullanım alanı da yeniden kullanılan bileşenleri kontrol etmektir. Örneğin, Alışveriş sepetine ekle düğmesi üst kapsayıcıya göre farklı şekilde gösterilebilir (ör. ürün kartındaysa yalnızca simge, sayfadaki birincil CTA ise metin içeren simge). Düğme, kapsayıcı sorguları için iyi bir aday olabilir.

Sitenizde kademeli iyileştirmeler yapmayı seçebilirsiniz. Örneğin, Tokopedia'daki elips örneği gibi daha küçük kullanım alanlarıyla başlayabilir ve burada kapsayıcı sorguları uygulayabilirsiniz. Ardından, daha fazla kullanım alanı bulun ve CSS'yi iyileştirin.

Kaynaklar:

• Kapsayıcı sorguları kararlı tarayıcılara eklendi
• Kapsayıcı sorguları: Tarayıcıda tasarım
• Kapsayıcı sorgu demoları
• Demo: kapsayıcı sorgu kartları
• Video: Web kullanıcı arayüzündeki yenilikler - I/O 2023
• Hata bildirmek veya yeni bir özellik isteğinde bulunmak ister misiniz? Düşüncelerinizi öğrenmek isteriz.

Bu serinin, e-ticaret şirketlerinin kaydırmayla çalışan animasyonlar, pop-up, kapsayıcı sorguları ve has() seçici gibi yeni CSS ve kullanıcı arayüzü özelliklerinden nasıl yararlandığından bahseden diğer makalelerini inceleyin.

• Web kullanıcı arayüzü özellikleri e-ticaret siteniz için neden önemlidir?
• Kaydırmayla çalışan animasyonlarla ilgili örnek olaylar
• Geçişler örnek olaylarını görüntüleme
• Pop-up örnek olayları
• :has() seçici örnek olaylarını