Container sorguları, duyarlı tasarıma son derece dinamik ve esnek bir yaklaşım sunar. Container sorgularında @container @ kuralı kullanılır. Bu, @media ile medya sorgusuna benzer şekilde çalışır ancak @container, stil bilgileri için görünüm alanı ve kullanıcı aracısı yerine üst kapsayıcıyı sorgular.
Kapsayıcı sorguları, kapsayıcı boyutuna yanıt vererek bileşenlerin arayüzdeki konumlarına uyum sağlamasına olanak tanır. Örneğin, bir kart bileşeni, yerleştirildiği kapsayıcıya (kenar çubuğu, ana bölüm veya sayfanın ana gövdesindeki bir ızgara) göre boyutunu ve stillerini ayarlayabilir.
Aşağıdaki resimde gösterildiği gibi, güçlü bir duyarlı tasarım sistemi oluşturmak için makro düzenlere yönelik medya sorgularını, mikro düzenlere yönelik kapsayıcı sorgularını ve kullanıcı tercihlerine dayalı medya sorgularını birleştirebilirsiniz. Kapsayıcı sorguları ve yeni duyarlı tasarım hakkında daha fazla bilgi edinin.
Bu makale, bir serinin parçasıdır ve e-ticaret şirketlerinin yeni CSS ve kullanıcı arayüzü özelliklerini kullanarak web sitelerini nasıl geliştirdiğini ele alır. Bu sefer, bazı şirketlerin kapsayıcı sorgularını nasıl kullandığını ve bu sorgulardan nasıl yararlandığını inceliyoruz.
redBus
redBus, mobil ve masaüstü sürümleri için farklı kodlar tutar ve sunar. Yapılacaklar ve kargo sayfalarında kapsayıcı sorgularını uyguladıktan sonra bu kodu, bu siteler için tek bir kod tabanında birleştirebildiler. Bu sayede, duyarlı bir tasarım elde edildi ve geliştirme süresi kısaldı. Aşağıdaki örnekte, kargo sayfası kullanılarak bu durum gösterilmektedir:
Kod
Aşağıdaki örnekte, .bpdpCardWrapper üst kapsayıcıdır ve bpdpSection olarak adlandırılmıştır.
bpdpSection kapsayıcısının minimum genişliği 744 pikselse .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
| Önce (birden fazla kod tabanı) | Sonra (tek kod tabanı) | |
|---|---|---|
| Altyapı | Ayrı altyapı (yüksek maliyet). | Aynı altyapı (daha düşük maliyet). |
| Tasarım | Ayrı kullanıcı arayüzü ancak tutarlılık zayıf. | Çözülmesi zor ancak mümkün. |
| Performans | Sistem ayrı olduğundan kullanımı kolaydır ancak performansı iyileştirme çabalarını yineler. | Bu, sayfaya ve özelliğe özgüdür ancak redBus PageSpeedInsights puanı 80'in üzerindedir. |
| Geliştirme | Ayrı geliştirici ekipleri. | Sürede %30-40 azalma. |
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üştü ve bazen soldaki ürün adı daha küçük ekran boyutlarında kesiliyordu (aşağıdaki "Önce" videosuna bakın).
Bu düzen sorununu çözmek için kolayca ve hızlı bir şekilde kapsayıcı sorgularını kullanmaya başladılar. Bu uygulama sayesinde, ürün adının her zaman tam olarak göründüğü 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 sorgular.
infowrapper öğesinin maksimum genişliği 360 pikselse alt bileşenler width, margin, ve padding ayarlanır.
container-type değerini inline-size olarak ayarlamak, üst öğenin satır içi yön boyutunu sorgular. İngilizce gibi Latin dillerinde metin soldan sağa doğru satır içi olarak aktığından 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, sitesindeki metinlerde üç nokta işaretini arayarak kullanım alanını belirledi. Bu, çok küçük olabilecek ve içeriğin kullanıcı için kesilmesine neden olabilecek kapsayıcıları 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 tespit 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 bir harekete geçirici mesajsa metinle birlikte simge). Düğme, kapsayıcı sorguları için iyi bir aday olabilir.
Sitenizde kademeli iyileştirmeler yapmayı tercih edebilirsiniz. Örneğin, Tokopedia'daki elips örneği gibi daha küçük kullanım alanlarıyla başlayıp kapsayıcı sorgularını burada uygulayabilirsiniz. Ardından, giderek daha fazla örnek bulup CSS'yi iyileştirin.
Kaynaklar:
- Kapsayıcı sorguları kararlı tarayıcılarda çalışır
- 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 veya yeni özellik isteğinde bulunmak mı istiyorsunuz? Görüşlerinizi bizimle paylaşın.
Bu serideki diğer makaleleri inceleyerek e-ticaret şirketlerinin kaydırmaya dayalı animasyonlar, popover, kapsayıcı sorguları ve has() seçici gibi yeni CSS ve kullanıcı arayüzü özelliklerini kullanarak nasıl fayda sağladığını öğrenin.