Maqola Sarlavhasi
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
CSS Kontayner So'rovlarini o'rganing, bu moslashuvchan dizayndagi keyingi evolyutsiyadir. Faqat ko'rish maydoniga emas, balki kontayner o'lchamiga asoslangan moslashuvchan komponentlarni qanday yaratishni o'rganing.
Moslashuvchan dizayn o'n yildan ortiq vaqtdan beri veb-ishlab chiqishning asosiy tamoyili bo'lib kelmoqda. An'anaga ko'ra, biz tartibimizni ko'rish maydonining o'lchamiga qarab moslashtirish uchun media so'rovlariga tayanganmiz. Biroq, bu yondashuv ba'zan cheklangan bo'lib tuyulishi mumkin, ayniqsa murakkab, komponentlarga asoslangan dizaynlar bilan ishlaganda. CSS Kontayner So'rovlari - bu komponentlarga faqat ko'rish maydoniga emas, balki ularni o'z ichiga olgan elementning o'lchamiga qarab moslashish imkonini beruvchi kuchli yangi funksiyadir.
Kontayner so'rovlari o'yinni o'zgartiruvchi hisoblanadi, chunki ular elementlar asosidagi moslashuvchan dizaynni yoqadi. "Ekran o'lchami qanday?" deb so'rash o'rniga, siz "Ushbu komponentda qancha bo'sh joy mavjud?" deb so'rashingiz mumkin. Bu haqiqatan ham qayta ishlatiladigan va moslashuvchan komponentlarni yaratish uchun imkoniyatlar dunyosini ochadi.
Turli xil kontekstlarda paydo bo'lishi mumkin bo'lgan karta komponentini o'ylab ko'ring: tor sidebar, keng qahramon qismi yoki ko'p ustunli grid. Media so'rovlari bilan siz ko'rish maydonining kengligiga asoslangan holda ushbu senariylarning har biri uchun maxsus qoidalar yozishingiz kerak bo'ladi. Kontayner so'rovlari bilan karta umumiy ekran o'lchamidan qat'i nazar, ota-ona konteynerining o'lchamlariga qarab o'z tartibi va uslubini aqlli ravishda sozlashi mumkin.
Kontayner so'rovlari an'anaviy media so'rovlariga nisbatan bir nechta asosiy afzalliklarni taklif etadi:
Kontayner so'rovlaridan foydalanishning amaliy jihatlariga sho'ng'iymiz. Birinchi qadam - konteynerni e'lon qilish. Buni ota-ona elementidagi container-type xususiyatidan foydalanib qilishingiz mumkin:
container-type xususiyati bir nechta qiymatlarni qabul qiladi:
size: Kontayner so'rovlari konteynerning inline va block o'lchamlariga javob beradi.inline-size: Kontayner so'rovlari faqat konteynerning inline (gorizontal yozuv rejimlarida kenglik) o'lchamiga javob beradi. Bu eng keng tarqalgan va ko'pincha eng foydali variant.block-size: Kontayner so'rovlari faqat konteynerning block (gorizontal yozuv rejimlarida balandlik) o'lchamiga javob beradi.normal: Element so'rov konteyneri emas. Bu standart qiymat.style: Kontayner so'rovlari uslub so'rovlariga va konteyner nomi so'rovlariga (keyinroq ko'rib chiqiladi) javob beradi, bu sizga konteynerda o'rnatilgan maxsus xususiyatlarni so'rash imkonini beradi.Inline o'lchamiga javob beradigan konteynerni aniqlash misoli:
.card-container {
container-type: inline-size;
}
Shuningdek, container qisqartirilgan xususiyatidan foydalanib, container-type va container-name (keyinroq muhokama qilamiz) ni bitta deklaratsiyada belgilashingiz mumkin:
.card-container {
container: card / inline-size;
}
Bu holda, 'card' - konteyner nomi.
Konteynerni aniqlaganingizdan so'ng, so'rovlaringizni yozish uchun @container qoidasidan foydalanishingiz mumkin. Sintaksis media so'rovlariga o'xshaydi, lekin ko'rish maydonining o'lchamlarini nishonga olish o'rniga, siz konteynerning o'lchamlarini nishonga olasiz:
@container card (min-width: 400px) {
.card {
flex-direction: row;
}
.card__image {
width: 50%;
}
.card__content {
width: 50%;
}
}
Ushbu misolda biz "card" konteynerini nishonga olamiz va konteynerning kengligi kamida 400px bo'lganda .card, .card__image va .card__content elementlariga uslublarni qo'llaymiz. (min-width: 400px) dan oldin `card` ga e'tibor bering. Agar siz konteyneringizni `container-name` yoki qisqartirilgan `container` xususiyati yordamida nomlagan bo'lsangiz, bu juda muhim.
Agar siz konteyneringizni nomlamagan bo'lsangiz, konteyner nomini olib tashlashingiz mumkin:
@container (min-width: 400px) {
.card {
flex-direction: row;
}
.card__image {
width: 50%;
}
.card__content {
width: 50%;
}
}
Siz media so'rovlarida mavjud bo'lgan media funksiyalarining xuddi shu diapazonidan foydalanishingiz mumkin, masalan, min-width, max-width, min-height, max-height va orientation.
Konteynerlaringizni nomlash, ayniqsa, ichki konteynerlar yoki murakkab tartiblar bilan ishlaganda foydali bo'lishi mumkin. container-name xususiyatidan foydalanib konteynerga nom berishingiz mumkin:
.card-container {
container-name: card;
container-type: inline-size;
}
Keyin, konteyner so'rovlaringizda konteynerni nomi bilan nishonga olishingiz mumkin:
@container card (min-width: 400px) {
/* 'card' konteyneri uchun uslublar */
}
Konteyner Uslub So'rovlari konteynerning o'lchamiga emas, balki uslubiga javob berishga imkon beradi. Bu, ayniqsa, maxsus xususiyatlar bilan birlashtirilganda kuchliroqdir. Birinchidan, konteyneringizni container-type: style bilan aniqlashingiz kerak:
.component-container {
container-type: style;
}
Keyin siz --theme maxsus xususiyatining qiymatini so'rash uchun @container style(--theme: dark) dan foydalanishingiz mumkin:
.component-container {
--theme: light;
}
@container style(--theme: dark) {
.component {
background-color: black;
color: white;
}
}
Bu sizning komponentlaringizga ko'rish maydonining o'lchamidan ko'ra CSS orqali o'rnatilgan konfiguratsiyaga asoslangan holda moslashish imkonini beradi. Bu mavzulashtirish va dinamik uslublar uchun ajoyib imkoniyatlarni ochadi.
Keling, kontayner so'rovlari haqiqiy dunyo senariylarida qanday ishlatilishi mumkinligiga oid ba'zi aniq misollarni ko'rib chiqaylik:
Mahsulot haqida ma'lumotni aks ettiruvchi karta komponentini tasavvur qiling. Tor konteynerda biz rasm va tarkibni vertikal ravishda joylashtirishni xohlashimiz mumkin. Kengroq konteynerda ularni yonma-yon ko'rsatishimiz mumkin.
HTML:
CSS:
.card-container {
container-type: inline-size;
}
.card {
display: flex;
flex-direction: column;
border: 1px solid #ccc;
padding: 16px;
}
.card__image {
width: 100%;
margin-bottom: 16px;
}
.card__content {
width: 100%;
}
@container (min-width: 400px) {
.card {
flex-direction: row;
}
.card__image {
width: 50%;
margin-bottom: 0;
}
.card__content {
width: 50%;
}
}
Ushbu misolda, karta dastlab rasm va tarkibni vertikal ravishda joylashtirilgan holda ko'rsatadi. Konteynerning kengligi 400px ga yetganda, karta gorizontal tartibga o'tadi.
HTML:
CSS:
.nav-container {
container-type: inline-size;
}
.nav {
list-style: none;
padding: 0;
margin: 0;
}
.nav__item {
margin-bottom: 8px;
}
.nav__item a {
display: block;
padding: 8px 16px;
text-decoration: none;
color: #333;
}
@container (min-width: 600px) {
.nav {
display: flex;
}
.nav__item {
margin-right: 16px;
margin-bottom: 0;
}
.nav__item a {
display: inline-block;
}
}
Ushbu misolda navigatsiya menyusi dastlab elementlarni vertikal ro'yxatda ko'rsatadi. Konteynerning kengligi 600px ga yetganda, menyu gorizontal tartibga o'tadi.
Joylashgan joyiga qarab moslashishi kerak bo'lgan maqola tartibini tasavvur qiling. Agar kichik oldindan ko'rish qismida bo'lsa, rasm matnning yuqorisida bo'lishi kerak. Agar bu asosiy maqola bo'lsa, rasm yon tomonda bo'lishi mumkin.
HTML
Maqola Sarlavhasi
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
CSS
.article-container {
container-type: inline-size;
}
.article {
display: flex;
flex-direction: column;
}
.article-image {
width: 100%;
margin-bottom: 10px;
}
.article-content {
width: 100%;
}
@container (min-width: 768px) {
.article {
flex-direction: row;
}
.article-image {
width: 40%;
margin-right: 20px;
margin-bottom: 0;
}
.article-content {
width: 60%;
}
}
Kontayner so'rovlari uchun brauzer qo'llab-quvvatlashi hozirda Chrome, Firefox, Safari va Edge kabi zamonaviy brauzerlarda ajoyibdir. So'nggi brauzer qo'llab-quvvatlash ma'lumotlari uchun Can I Use ni tekshirish muhim, chunki funksiyalar va amalga oshirish tafsilotlari o'zgarishi mumkin.
Kontayner so'rovlari media so'rovlariga kuchli alternativa taklif qilsa-da, har bir yondashuv qachon eng mos ekanligini tushunish muhimdir.
Ko'pgina hollarda siz, ehtimol, media so'rovlari va konteyner so'rovlarining kombinatsiyasidan foydalanasiz. Ilovangizning umumiy tartibini o'rnatish uchun media so'rovlaridan foydalaning va keyin ushbu tartibdagi individual komponentlarning ko'rinishi va xatti-harakatini nozik sozlash uchun konteyner so'rovlaridan foydalaning.
CSS Kontayner So'rovlari moslashuvchan dizayn evolyutsiyasida muhim qadamni ifodalaydi. Elementlar asosidagi moslashuvchanlikni yoqish orqali ular dasturchilarga yanada moslashuvchan, qayta ishlatiladigan va saqlanadigan komponentlarni yaratish imkonini beradi. Brauzer qo'llab-quvvatlashi yaxshilanishda davom etar ekan, kontayner so'rovlari har bir veb-dasturchi arsenalida muhim vositaga aylanishga tayyor.
Global auditoriya uchun konteyner so'rovlarini amalga oshirayotganda, quyidagilarni ko'rib chiqing:
left va right kabi fizik xususiyatlar o'rniga inline-start va inline-end kabi mantiqiy xususiyatlardan foydalaning.em, rem) foydalaning.CSS Kontayner So'rovlari - bu haqiqatan ham moslashuvchan va moslashuvchan veb-ilovalarini yaratish uchun kuchli vositadir. Elementlar asosidagi moslashuvchan dizaynni qabul qilib, siz turli xil kontekstlarga osongina moslasha oladigan komponentlarni yaratishingiz, kodingizni soddalashtirishingiz va umumiy foydalanuvchi tajribasini yaxshilashingiz mumkin. Brauzer qo'llab-quvvatlashi o'sishda davom etar ekan, konteyner so'rovlari zamonaviy veb-ishlab chiqishning asosiy qismiga aylanishga tayyor. Ushbu texnologiyani qabul qiling, uning imkoniyatlari bilan tajriba o'tkazing va moslashuvchan dizaynlaringizda yangi moslashuvchanlik darajasini oching. Ushbu yondashuv komponentning qayta ishlatilishini, texnik xizmat ko'rsatishni va yanada intuitiv dizayn jarayonini yaxshilaydi, bu uni butun dunyo bo'ylab front-end dasturchilar uchun bebaho boylikka aylantiradi. Kontayner so'rovlariga o'tish dizaynga yanada komponentga yo'naltirilgan yondashuvni rag'batlantiradi, natijada butun dunyo bo'ylab foydalanuvchilar uchun yanada mustahkam va moslashuvchan veb-tajribalar paydo bo'ladi.