CSS Container Queries (@container) generatoru
Klassik @media sorğuları komponentin yerləşdiyi yeri deyil, yalnız bütün brauzer ekranını görür. Komponent dar yan paneldə (sidebar) olanda da böyük ekran rejimində açılır və xaos yaranır. container-type: inline-size və @container ilə komponent harada yerləşməsindən asılı olmayaraq özünə ayrılan sahəyə mükəmməl uyğunlaşır.
/* 1. Valideyn konteyneri elan edirik */
.card-wrapper {
container-type: inline-size;
container-name: card;
}
/* 2. Kart öz konteynerinin eninə uyğunlaşır */
.card {
display: flex;
flex-direction: column;
}
@container card (min-width: 400px) {
.card {
flex-direction: row;
align-items: center;
}
}Necə istifadə etmək olar
- Konteynerin sağ kənarındakı tutacağı sürüşdürün (və ya en sürüşdürücüsünü dəyişin) və kartın necə avtomatik formalaşdığını izləyin.
- Hazır ssenariləri seçin: «Dar yan panel» (260px), «Orta lent» (420px), yaxud «Geniş bölmə» (580px).
- Konteynerin ölçüsü 400px və 520px hədlərini keçdikdə
@containerqaydalarının necə aktivləşdiyini müşahidə edin. - Hazır təmiz və müasir
@containerCSS kodunu kopyalayın.
Bu necə işləyir
Container Queries niyə inqilabdır?
Onilliklər ərzində veb-tərtibatçılar @media (min-width: 768px) yazırdılar. Lakin müasir veb-saytlar təkrar istifadə olunan komponentlərdən (kartlar, vidjetlər) ibarətdir. Eyni kart həm 1920px ekranda dar sol paneldə (300px), həm də ana lentdə ola bilər. @container komponenti bütün ekrandan asılılıqdan azad edir.
container-type: inline-size nə deməkdir?
container-type: inline-size brauzerə bildirir ki, bu elementin daxilindəki uşaqlar onun üfüqi enini (inline oxu) sorğulaya bilərlər. Bu zaman daxildəki elementlər @container (min-width: 400px) qaydasını tətbiq edir.
.widget-wrap {
container-type: inline-size;
container-name: widget;
}
@container widget (min-width: 400px) {
.widget-content { display: grid; grid-template-columns: 120px 1fr; }
}cqi, cqw, cqmin vahidləri
Container Queries həmçinin xüsusi ölçü vahidləri təqdim edir: 1cqw = konteyner eninin 1%-i, 1cqi = konteynerin daxili ox ölçüsünün 1%-i. Bu vahidlərlə şriftləri və boşluqları birbaşa blokun eninə mütənasib şəkildə böyüdüb-kiçiltmək mümkündür.
Tez-tez verilən suallar
Bütün müasir brauzerlər Container Queries dəstəkləyirmi?
Bəli, Container Queries 2023-cü ilin əvvəlindən (Chrome 105+, Safari 16+, Firefox 110+, Edge 105+) bütün brauzerlərdə tam dəstəklənir (92%+ qlobal dəstək).
container-type olmadan @container işləyərmi?
Xeyr, mütləq valideyn elementə container-type: inline-size (və ya size) verilməlidir. Əks halda brauzer hansı konteynerin enini ölçəcəyini bilməyəcək.
Niyə container-type: size yerinə adətən inline-size istifadə olunur?
size həm eni, həm hündürlüyü tələb edir və çox vaxt sonsuz dövrə (layout loop) səbəb olur. inline-size yalnız eni ölçür və təhlükəsiz şəkildə şaquli məzmunun sərbəst böyüməsinə imkan verir.
