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.
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.
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
Sonra
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:
- Kapsayıcı sorguları kararlı tarayıcılara yönlendiriliyor
- Kapsayıcı sorguları - Tarayıcıda Tasarım
- Kapsayıcı sorgusu demoları
- Demo: Kapsayıcı sorgu kartları
- Video: Web Kullanıcı Arayüzü'ndeki Yenilikler - I/O 2023
- Hata bildirmek mi yoksa yeni bir özellik talep etmek mi istiyorsunuz? Görüşlerinizi almak istiyoruz.
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.