Zamonaviy CSS imkoniyatlari - HTML va CSS

CSS so'nggi yillarda juda tez rivojlandi. Ilgari JavaScript yoki Sass talab qilgan ko'p narsalar endi sof CSS bilan hal qilinadi.

Matematik funksiyalar #

CSS

/* min() - eng kichigini tanlaydi */
.orash { width: min(1200px, 100% - 2rem); }

/* max() - eng kattasini */
.blok { font-size: max(1rem, 2vw); }

/* clamp(min, moslashuvchan, max) */
.sarlavha { font-size: clamp(1.75rem, 5vw, 3.5rem); }

/* calc() - hisoblash */
.mazmun { height: calc(100vh - 64px); }
.ustun  { width: calc(50% - 1rem); }

/* Aralashtirish mumkin */
.karta { padding: clamp(1rem, calc(0.5rem + 2vw), 3rem); }

width: min(1200px, 100% - 2rem) - eng foydali qator

Bu bitta qator ikkita ishni bajaradi:

Katta ekranda kenglik 1200px dan oshmaydi
Kichik ekranda chetlarda 1rem dan bo'shliq qoladi

Ilgari buning uchun max-width + padding + box-sizing kerak edi.

`aspect-ratio` #

CSS

/* Video nisbati */
.video-orash {
    aspect-ratio: 16 / 9;
    width: 100%;
}

/* Kvadrat avatar */
.avatar {
    aspect-ratio: 1;
    width: 64px;
    border-radius: 50%;
    object-fit: cover;
}

/* Kartochka rasmi */
.karta__rasm {
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

Bu qanchalik katta yengillik

Ilgari nisbatni saqlash uchun "padding hiylasi" ishlatilardi:

CSS

/* Eski usul - hech kim tushunmasdi */
.orash {
    position: relative;
    padding-bottom: 56.25%;    /* 9 / 16 = 0.5625 */
    height: 0;
}
.orash iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

Endi bitta qator: aspect-ratio: 16 / 9.

`:has()` - ota selektor #

CSS tarixidagi eng ko'p kutilgan imkoniyat:

CSS

/* Ichida rasm bo'lgan kartochka */
.karta:has(img) {
    padding: 0;
}

/* Belgilangan checkbox ning yorlig'i */
label:has(input:checked) {
    background: #dbeafe;
    border-color: #2563eb;
}

/* Noto'g'ri to'ldirilgan maydonli forma */
form:has(:invalid) .yuborish {
    opacity: 0.5;
    pointer-events: none;
}

/* Keyingi elementga qarab uslub berish */
h2:has(+ p) {
    margin-bottom: 0.4rem;
}

/* Rasmsiz kartochka boshqacha ko'rinadi */
.karta:not(:has(img)) {
    padding-top: 1.5rem;
}

:has() bilan nima qilish mumkin?

Ilgari bu holatlarda JavaScript yozish yoki HTML ga qo'shimcha klass qo'shish kerak edi. Endi CSS ning o'zi mazmuni asosida qaror qabul qila oladi.

:has() 2023-yildan barcha zamonaviy brauzerlarda ishlaydi.

Ichma-ich CSS (Nesting) #

Sass ning eng mashhur imkoniyati endi CSS da:

CSS

.karta {
    background: #fff;
    border-radius: 12px;
    padding: 1.5rem;

    & .karta__sarlavha {
        font-size: 1.2rem;
        margin: 0 0 0.5rem;
    }

    & .karta__matn {
        color: #64748b;
    }

    &:hover {
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    }

    @media (min-width: 768px) {
        padding: 2rem;
    }
}

Chuqur ichma-ichlikdan qoching

CSS

/* Yomon - o'qish qiyin, ustunlik juda yuqori */
.sahifa {
    & .mazmun {
        & .karta {
            & .sarlavha {
                & a { color: blue; }
            }
        }
    }
}

Ikki-uch darajadan chuqurga tushmang. Aks holda selektorlar juda kuchli bo'lib, keyinchalik ularni bekor qilish qiyinlashadi.

Konteyner so'rovlari #

Media so'rovlar ekran o'lchamiga qaraydi. Konteyner so'rovlari esa ota elementga:

CSS

.karta-orash {
    container-type: inline-size;
    container-name: karta;
}

/* Konteyner 400px dan keng bo'lsa */
@container karta (min-width: 400px) {
    .karta {
        display: grid;
        grid-template-columns: 140px 1fr;
        gap: 1.25rem;
    }
}

Konteyner so'rovlari komponentni haqiqiy qayta ishlatiladigan qiladi

Nima uchun bu muhim?

Bitta kartochka komponentini turli joylarda ishlatasiz: keng asosiy maydonda, tor yon panelda, dashboard widgetida. Media so'rovlar bilan bu imkonsiz - ular faqat ekran kengligini biladi, kartochka qayerda turganini emas.

Konteyner so'rovlari bilan komponent o'zi joylashgan joyga moslashadi. Bu komponentga asoslangan dizaynning yetishmayotgan bo'lagi edi.

Mantiqiy xossalar #

CSS

/* Eski - jismoniy yo'nalish */
.blok {
    margin-left: 1rem;
    margin-right: 1rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/* Yangi - mantiqiy yo'nalish */
.blok {
    margin-inline: 1rem;      /* chap + o'ng */
    padding-block: 2rem;      /* yuqori + past */
}

/* Markazlashtirish */
.orash { margin-inline: auto; }

Jismoniy	Mantiqiy
`margin-left`, `margin-right`	`margin-inline`
`margin-top`, `margin-bottom`	`margin-block`
`padding-left`	`padding-inline-start`
`width`	`inline-size`
`height`	`block-size`
`top/right/bottom/left: 0`	`inset: 0`

Nima uchun "mantiqiy"?

Arab va ibroniy tillarida matn o'ngdan chapga yoziladi. margin-left u yerda noto'g'ri tomonda bo'ladi, margin-inline-start esa avtomatik to'g'ri tomonga o'tadi.

O'zbek tili uchun farq yo'q, lekin bu zamonaviy amaliyot va kodni universalroq qiladi.

Foydali kichik imkoniyatlar #

CSS

/* Silliq aylantirish */
html { scroll-behavior: smooth; }

/* Yopishqoq sarlavha ostida to'xtash */
:target { scroll-margin-top: 80px; }

/* Aylantirish nuqtalari (karusel) */
.karusel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 1rem;
}
.karusel > * {
    scroll-snap-align: start;
    flex: none;
    width: 280px;
}

/* Tanlangan matn rangi */
::selection { background: #dbeafe; color: #1e40af; }

/* Aylantirgich ko'rinishi */
* {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

/* Fon xiralashtirish */
.panel {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
}

/* Rasm filtrlari */
.rasm--kulrang { filter: grayscale(1); }
.rasm--yorug   { filter: brightness(1.15) contrast(1.05); }
.rasm--xira    { filter: blur(4px); }

/* Aralashtirish rejimi */
.qoplama { mix-blend-mode: multiply; }

/* Matn ustun bo'ylab */
.maqola { columns: 2; column-gap: 2.5rem; }

/* Uzun so'zlarni bo'lish */
.matn { overflow-wrap: break-word; hyphens: auto; }

`:focus-visible` #

CSS

/* Yomon: sichqoncha bilan bosganda ham ramka chiqadi */
button:focus { outline: 2px solid #2563eb; }

/* Yaxshi: faqat klaviatura bilan */
button:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }

outline: none yozmang

CSS

/* Hech qachon shunday qilmang */
*:focus { outline: none; }

Klaviatura bilan ishlaydigan foydalanuvchi qayerda ekanini butunlay yo'qotadi. Agar standart ramka yoqmasa, uni almashtiring, o'chirmang:

CSS

button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.4);
}

Brauzer qo'llab-quvvatlashini tekshirish #

CSS

@supports (container-type: inline-size) {
    .karta-orash { container-type: inline-size; }
}

@supports not (aspect-ratio: 1) {
    .video-orash { padding-bottom: 56.25%; }
}

caniuse.com

Har qanday CSS xossasini ishlatishdan oldin caniuse.com da qo'llab-quvvatlashini tekshiring. Sayt qaysi brauzerlarda ishlashini va foydalanuvchilarning necha foizi uni qo'llab-quvvatlashini ko'rsatadi.

Amaliy misol: zamonaviy komponent #

CSS

.mahsulot-orash {
    container-type: inline-size;
}

.mahsulot {
    display: grid;
    gap: 1rem;
    padding: clamp(1rem, 4cqi, 1.75rem);
    background: var(--fon, #fff);
    border: 1px solid var(--chegara, #e2e8f0);
    border-radius: 14px;
}

.mahsulot__rasm {
    aspect-ratio: 4 / 3;
    width: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.mahsulot__sarlavha {
    font-size: clamp(1rem, 3cqi, 1.3rem);
    margin: 0;
}

.mahsulot__narx {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--asosiy, #2563eb);
}

/* Konteyner keng bo'lsa - gorizontal joylashuv */
@container (min-width: 420px) {
    .mahsulot {
        grid-template-columns: 160px 1fr;
        align-items: start;
    }

    .mahsulot__rasm {
        aspect-ratio: 1;
    }
}

/* Chegirmali mahsulot boshqacha ko'rinadi */
.mahsulot:has(.mahsulot__chegirma) {
    border-color: #dc2626;
}

.mahsulot:has(.mahsulot__chegirma) .mahsulot__narx {
    color: #dc2626;
}

cqi birligi

cqi - konteyner kengligining 1% i (vw ga o'xshash, lekin ekran emas, konteyner uchun). clamp(1rem, 4cqi, 1.75rem) shrift o'lchamini komponent kengligiga moslashtiradi.

Amaliy topshiriq

width: min(1200px, 100% - 2rem) bilan sahifa o'rovchisini yozing.
Barcha sarlavhalarga clamp() qo'llang.
aspect-ratio bilan video va avatar yarating.
:has() bilan: ichida rasm bo'lgan kartochkani boshqacha bezang.
:has() bilan: belgilangan checkbox ning yorlig'i fonini o'zgartiring.
Konteyner so'rovi bilan kartochka komponentini yarating - uni keng va tor joylarda sinab ko'ring.
scroll-snap bilan gorizontal karusel qiling.
Barcha :focus larni :focus-visible ga o'zgartiring.
Ishlatgan har bir yangi xossani caniuse.com da tekshiring.

Xulosa #

clamp(), min(), max() media so'rovlarsiz moslashish beradi.
aspect-ratio eski "padding hiylasi"ni butunlay almashtiradi.
:has() - CSS da ota elementni tanlash imkoniyati; JavaScript ehtiyojini kamaytiradi.
Ichma-ich CSS endi Sass siz ishlaydi, lekin 2-3 darajadan chuqur ketmang.
Konteyner so'rovlari komponentni ekranga emas, o'z konteyneriga moslashtiradi.
Mantiqiy xossalar (margin-inline, inset) zamonaviy amaliyot.
:focus-visible faqat klaviatura foydalanuvchilariga ramka ko'rsatadi.
Yangi xossani ishlatishdan oldin caniuse.com da tekshiring.

Keyingi bo'limda barcha bilimlarni birlashtirib, qayta ishlatiladigan komponentlar yaratamiz.