CSS (Cascading Style Sheets) veb-sahifalarning ko‘rinishini belgilaydigan asosiy texnologiyalardan biridir. Dastlabki yillarda CSS faqat matnni ranglash yoki rasm atrofini hoshiyalash kabi oddiy vazifalarni bajargan bo‘lsa, bugungi kunda u haqiqiy kuchga aylangan. Keling, zamonaviy CSS’ning eng muhim imkoniyatlarini ko‘rib chiqamiz.

1. CSS Grid va Flexbox

Veb-sahifada elementlarni joylashtirish (layout) uzoq vaqt davomida eng katta muammolardan biri bo‘lgan (float va clear larni eslang!). Bugungi kunda bu muammo to‘liq hal qilingan:

• Flexbox (Flexible Box Layout): Bir o‘lchovli (faqat qator yoki faqat ustun) tartibga solish uchun ideal. Elementlarni markazga keltirish, bo‘shliqlarni taqsimlash hozir juda oson.
• CSS Grid: Ikki o‘lchovli (ham qator, ham ustun) layout’lar yaratish uchun mo‘ljallangan. U yordamida eng murakkab veb-sayt tuzilmalarini ham qisqa kod bilan yozish mumkin.

2. CSS Variables (Custom Properties)

Ilgari o‘zgaruvchilarni ishlatish uchun SASS yoki LESS kabi preprocessor’lar kerak bo‘lardi. Endi esa CSS’ning o‘zida o‘zgaruvchilar mavjud.

:root {
  --primary-color: #3498db;
  --spacing-unit: 16px;
}

.button {
  background-color: var(--primary-color);
  padding: var(--spacing-unit);
}

Ushbu imkoniyat saytning mavzusini (masalan, Dark Mode) dinamik ravishda o‘zgartirishni juda osonlashtiradi.

3. :has() Pseudo-class (Ota elementni tanlash)

Yillar davomida CSS dasturchilari o‘zlaridan so‘rab kelgan eng katta funksiya: “Qanday qilib ichidagi elementga qarab ota elementga stil berish mumkin?” Ushbu savolga javob :has() pseudo-classidir.

/* Ichida <img> tagi bo‘lgan har qanday <figure> elementiga stil berish */
figure:has(img) {
  background-color: white;
  border-radius: 8px;
}

Bu kaskad (cascading) tushunchasini butunlay o‘zgartirib yubordi va JavaScript orqali yoziladigan ko‘plab mantiqlarni CSS’ning o‘ziga ko‘chirdi.

4. Container Queries

Responsive (moslashuvchan) dizayn uchun uzoq vaqt faqat Media Queries (@media) ishlatilgan. Lekin Media Queries butun ekranning o‘lchamiga qarab ishlaydi. Container Queries (@container) esa komponentning o‘zi turgan idishning (konteynerning) o‘lchamiga qarab o‘zgarishiga imkon beradi.

Bu mikro-komponentlar arxitekturasi uchun juda muhim qadam bo‘ldi. Endi komponentni saytning istalgan joyiga qo‘ysangiz ham, u o‘zining atrofidagi joyga qarab o‘zgaradi.

5. CSS Nesting (Ichma-ich yozish)

SASS’ning yana bir ajoyib xususiyati endi toza CSS’ga kirib keldi. Elementlarni ichma-ich yozish kodni o‘qishni va yozishni ancha qulaylashtiradi.

.card {
  padding: 20px;
  
  & .title {
    font-size: 1.5rem;
  }
  
  &:hover {
    background: #f0f0f0;
  }
}

Xulosa

Zamonaviy CSS har qachongidan ham kuchli. Eski “hack”lar va sun’iy kutubxonalarga qaramlik kamayib bormoqda. Agar siz CSS’ni so‘nggi marta bir necha yil oldin o‘rgangan bo‘lsangiz, uni qayta kashf qilishning ayni vaqti!