CSS'ning qanday zamonaviy imkoniyatlarini bilish kerak?

Savol

So'nggi yillarda CSS'ning qanday zamonaviy imkoniyatlari paydo bo'ldi va ular avval preprotsessor yoki JS talab qilingan vazifalarni hal qiladi?

Qisqa javob

Asosiy zamonaviy imkoniyatlarga CSS custom properties (o'zgaruvchilar), container queries (viewport'ga emas, ota o'lchamiga moslashish), :has() psevdoklassi (ota/shartli selektor) va media so'rovlarsiz moslashuvchan hisoblashlar uchun clamp()/min()/max() funksiyalari kiradi.

Batafsil javob

CSS custom properties (--var) — preprotsessor (Sass) o'zgaruvchilaridan farqli o'laroq, bular runtime'dagi haqiqiy qiymatlar: ularni JS orqali (element.style.setProperty) o'zgartirish mumkin, ular DOM daraxti bo'ylab oddiy CSS-xususiyatlar kabi meros bo'ladi va kaskadning istalgan darajasida, jumladan media so'rovlarda va :root bilan lokal skoup orasida qayta belgilanishi mumkin. var(--name, fallback) orqali o'qiladi.

Container queries (@container) — @media qiladigan butun viewport'ga emas, balki ota konteynerning o'lchamiga qarab stillarni qo'llash imkonini beradi. Bu haqiqatan qayta ishlatiladigan komponentlar uchun juda muhim: bir xil kartochka ekran kengligidan qat'i nazar tor sidebar'da va keng asosiy ustunda turlicha ko'rinishi kerak. Otada container-type: inline-size (yoki size) e'lon qilishni talab qiladi.

:has() — elementni uning avlodlari yoki qo'shnilari asosida tanlash imkonini beruvchi psevdoklass, ya'ni aslida CSS'ga o'nlab yillar davomida yetishmayotgan ota-selektor. Misol: noto'g'ri to'ldirilgan maydonga ega formni ajratib ko'rsatish yoki rasmga ega .cardni rasmisizidan boshqacha stillashtirish.

clamp()/min()/max() — media so'rovlarsiz moslashuvchan qiymatlar uchun matematik funksiyalar:

• clamp(min, preferred, max) — qiymat yuqori va pastdan chegaralangan, chegaralar orasida esa preferred bo'yicha (ko'pincha vw bilan) silliq masshtablanadi.
• min() — qiymatlar orasidan eng kichigini tanlaydi, "X'dan kengroq emas, lekin 100%dan katta emas" uchun qulay.
• max() — eng kattasini tanlaydi, pastki chegara uchun qulay.

Misol

:root {
  --gap: 16px;
  --accent: #3b82f6;
}

.card {
  padding: var(--gap);
  border: 1px solid var(--accent);
}

/* container query: kartochka ekranga emas, ota kengligiga moslashadi */
.card-container {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 120px 1fr;
  }
}

/* :has() — noto'g'ri to'ldirilgan maydonga ega forma qizil chegara oladi */
form:has(input:invalid) {
  border-color: crimson;
}

/* rasmi bo'lmagan kartochka boshqa padding oladi */
.card:not(:has(img)) {
  padding: 24px;
}

/* media so'rovlarsiz moslashuvchan tipografika */
.title {
  font-size: clamp(1.25rem, 2vw + 1rem, 3rem);
  width: min(90%, 640px);
}

Qo'shimcha savollar

• Container queries komponentlarning qayta ishlatilishi nuqtai nazaridan media so'rovlardan tubdan nimasi bilan farq qiladi?
• CSS custom properties meros va kaskad bilan Sass-o'zgaruvchilariga solishtirganda qanday o'zaro ta'sirlashadi?
• Chuqur ichma-ich selektorlarda :has()ning qanday unumdorlik cheklovlari bor?