Kapsayıcı sorguları, duyarlı tasarım için son derece dinamik ve esnek bir yaklaşım sunar. Kapsayıcı sorguları @container kuralını kullanır. Bu, @media içeren bir medya sorgusuna benzer şekilde çalışır ancak @container, görüntü alanı ve kullanıcı aracısı yerine stil bilgileri için bir üst kapsayıcıyı sorgular.
Kapsayıcı sorguları Yeni Kullanılabilir Referans Değer'in bir parçasıdır.
Kapsayıcı sorguları, kapsayıcı boyutuna yanıt vererek bileşenlerin bir arayüzde konumlarına uyum sağlamasına imkan 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 gibi) göre uyarlayabilir.
Aşağıdaki çizimde 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. Container 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 kez, bazı şirketlerin container sorgularından nasıl yararlandığını ve bunlardan nasıl yararlandığını ele alacağız.
redBus
redBus, mobil ve masaüstü sürümleri için farklı kodlar kullanır ve sunar. Yapılacaklar ve kargo sayfalarına container sorguları uyguladıktan sonra bu kodu bu siteler için tek bir kod tabanında birleştirmeyi başardılar. Bu da, duyarlı olmalarını sağladı ve geliştirme süresinden tasarruf etmelerini sağladı. Aşağıdaki örnekte bu, kargo sayfası kullanılarak gösterilmiştir:
Kod
Aşağıdaki örnekte .bpdpCardWrapper, bpdpSection adlı ü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şenlere ait 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 çok kod tabanı) | Sonra (tek kod tabanı) | |
|---|---|---|
| Altyapı | Ayrı altyapı (yüksek maliyet). | Aynı altyapı (düşük maliyet). |
| Tasarım | Kullanıcı arayüzü ayrı olsa da tutarlılık düşük. | Çözülmesi zor ama mümkün. |
| Performans | Ayrı bir sistem olduğu için performansı artırmak kolaydır. Ancak bu sistem performansı artırmak için çaba gerektirir. | 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ısı Sayfaları (PDP), mağaza ve ürün bilgileri için birden fazla sekme içerir. Önceden, bu sayfanın düzeni üç sütuna bölünüyordu ve bazen soldaki ürün adı daha küçük ekran boyutları için kesiliyordu (aşağıdaki "Önce" videosuna bakın).
Bu düzen sorununu çözmek için kapsayıcı sorgularını kolay ve hızlı bir şekilde benimsediler. Bu uygulamanın ardından, ürün adının her zaman tam olarak görülebildiği esnek bir düzene sahiplerdi (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 için width, margin, ve padding ayarlanır.
container-type öğesinin inline-size olarak ayarlanması, üst öğenin satır içi yönünü sorgular. İngilizce gibi Latin dillerinde metin, satır içinde soldan sağa doğru aktığı için bu değer, üst kapsayıcının genişliğidir.
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 gerekenler
Tokopedia, kullanım alanında üç nokta olup olmadığına baktı. Bu durum, container'ların çok küçük olabileceğini ve içeriğin kullanıcı için kesilmesine neden olabileceğini gösteriyordu.
E-ticaret sitelerine yönelik kapsayıcı sorguları için bir başka iyi kullanım alanı da yeniden kullanılan bileşenlerin aranmasıdır. Örneğin, Sepete ekle düğmesi üst kapsayıcıya göre farklı şekilde gösterilebilir (ör. yalnızca ürün kartında bulunan simge ve sayfadaki birincil CTA ise metin içeren simge). Düğme, container 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 container sorgularını burada uygulayabilirsiniz. Sonra kademeli olarak daha fazla destek kaydı bulun ve CSS'yi iyileştirin.
Kaynaklar:
- Kapsayıcı sorguları kararlı tarayıcılara yönlendiriliyor
- Kapsayıcı sorguları - Tarayıcıda Tasarlama
- Kapsayıcı sorgu demoları
- Demo: container sorgu kartları
- Video: Web Kullanıcı Arayüzü'ndeki yenilikler - I/O 2023
- Hata bildirmek mi yoksa yeni bir özellik isteğinde bulunmak mı istiyorsunuz? Görüşlerinizi almak istiyoruz.
E-ticaret şirketlerinin kaydırma destekli animasyonlar, pop-up, 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.