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 bir ızgara) göre uyarlayabilir.

Aşağıdaki resimde gösterildiği gibi güçlü bir duyarlı tasarım sistemi oluşturmak için makro düzenler için medya sorgularını, mikro düzenler için kapsayıcı sorgularını ve kullanıcı tercihine dayalı medya sorgularını birleştirebilirsiniz. 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 dizinin parçasıdır. Bu kez, bazı şirketlerin container sorgularını nasıl kullandığını ve bu sorgulardan 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 pikselse .bpdpCardContainer ve .subTxt, .bpdpAddress tarafından seçilen bileşenler için font-size ve line-height 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ünmüş ve bazen sol taraftaki ürün adı, küçük ekran boyutlarında kesilmiş şekilde gösteriliyordu (aşağıdaki "Önce" videosuna bakın).

Bu sayfa düzeni sorununu çözmek için kapsayıcı sorgularını kolayca ve hızlıca benimsediler. Bu uygulamanın ardından, ürün adının her zaman tamamen görünür olduğu esnek bir düzene sahip olabileceklerdi (aşağıdaki "Sonra" videosunu izleyin).

Ö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 pikselse alt bileşenlerin width, margin, ve padding ayarları 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ı 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 durum 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.

E-ticaret şirketlerinin kaydırma tabanlı animasyonlar, popover, kapsayıcı sorguları ve has() seçici gibi yeni CSS ve kullanıcı arayüzü özelliklerinden nasıl yararlandığını anlatan bu serideki diğer makaleleri 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ı