CSS kartalar: tuzilish, bosiladigan karta va media object

Qisqacha: Karta — rasm, sarlavha, matn va harakatlardan iborat mustaqil blok. Butun kartani bosiladigan qilish uchun uni <a> ga o'ramaymiz: havola faqat sarlavhada qoladi, uning ::after i esa position: absolute; inset: 0 bilan kartaning butun maydonini yopadi (stretched link). Karta ichidagi boshqa tugmalar position: relative; z-index: 1 bilan bu "parda" ustiga chiqariladi. Qatordagi kartalar subgrid bilan tekislanadi, uzun matn -webkit-line-clamp bilan qisqartiriladi, karta holati :has() bilan, gorizontal variant esa container query bilan beriladi.

Bu darsda

• Karta anatomiyasini va uning HTML tuzilishini to'g'ri tanlaysiz.
• Butun kartani bitta havola bilan bosiladigan qilasiz va ichki tugmani ishlaydigan holda saqlaysiz.
• Hover va fokusni :has() bilan butun kartaga ko'rsatasiz.
• Qatordagi kartalarni teng va ichki qismlari bir chiziqda turadigan qilasiz, uzun matnni qisqartirasiz.
• Kartaning gorizontal (media object) variantini container query bilan yozasiz.

Oldin bilishingiz kerak: Tugmalar tizimi, subgrid, Container queries, Pseudo-elementlar.

1. Nega bu kerak?

O'tgan darsda tugmalar tizimini qurdik. Endi ular birinchi "uy"ga kiradi — kartaga.

Karta — internetdagi eng ko'p uchraydigan komponent. Onlayn do'kondagi mahsulot, yangiliklar saytidagi maqola, Telegram'dagi havola oldindan ko'rinishi, «Bahor» menyusidagi taom — hammasi karta. Mehmon telefonda menyuni ko'radi va barmog'i bilan taom rasmiga bosadi. Rasmga, narxga, bo'sh joyga — qayerga bosmasin, taom sahifasi ochilishini kutadi.

«Bahor» menyusida esa hozir faqat taom nomi bosiladi. Rasmga bosgan mehmon hech narsa bo'lmaganini ko'radi va "sayt ishlamayapti" deb o'ylaydi.

Uchta oldingi darsda shu mavzuda va'da bergan edik:

1. Tugma yoki havola darsida: kartani havolaga o'rab bo'lmaydi, "butun kartochka bosiladigan bo'lishi kerak bo'lsa — buni CSS yordamida qilish mumkin".
2. Pseudo-elementlar darsida: havolaning ::after qismini kartaning butun maydoniga yoyish.
3. Container queries darsida: kartaning gorizontal va vertikal variantlari.

Bugun uchalasini bajaramiz.

2. Karta anatomiyasi

2.1 Qismlar

Deyarli har karta besh qismdan yig'iladi. Hammasi har doim bo'lmaydi, lekin tartibi odatda shunday:

Karta — mustaqil kontent bo'lagi, shuning uchun uning tegi odatda article (Semantik teglar). Ro'yxatdagi kartalar ul ichidagi li bo'lishi ham mumkin — ekran o'quvchi "8 ta elementli ro'yxat" deb aytadi va Malika nechta taom borligini darhol biladi.

2.2 Birinchi karta

<style>
  :root {
    --rang-fon: #fffaf0;
    --rang-matn: #1f2a24;
    --rang-asosiy: #2f6b3a;
    --rang-urgu: #b4461a;
    --rang-ikkinchi: #5b6660;
  }
  body {
    font-family: system-ui, sans-serif;
    background: var(--rang-fon);
    color: var(--rang-matn);
  }
  .taom-karta {
    display: grid;
    gap: 0.5rem;
    max-inline-size: 18rem;
    padding: 0.5rem 0.5rem 1rem;
    border-radius: 1rem;
    background: white;
    box-shadow: 0 1px 2px #0000001f, 0 4px 12px #0000001f;
  }
  .taom-karta > :not(svg) {
    margin: 0;
    margin-inline: 0.5rem;
  }
  .taom-karta svg {
    display: block;
    inline-size: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 0.5rem;
  }
  .taom-karta h3 a {
    color: var(--rang-asosiy);
    text-decoration: none;
  }
  .taom-karta p { color: var(--rang-ikkinchi); }
  .taom-karta .narx {
    color: var(--rang-urgu);
    font-weight: bold;
  }
</style>
<article class="taom-karta">
  <svg viewBox="0 0 160 100" preserveAspectRatio="xMidYMid slice"
    aria-hidden="true">
    <rect width="160" height="100" fill="#e9dcc3" />
    <ellipse cx="80" cy="56" rx="62" ry="30" fill="#fffaf0" />
    <ellipse cx="80" cy="52" rx="44" ry="20" fill="#f2c46d" />
    <ellipse cx="80" cy="46" rx="14" ry="6" fill="#b4461a" />
  </svg>
  <h3><a href="#osh">Osh</a></h3>
  <p>Guruch, sabzi va qo'y go'shti. Qozonda, o'tin olovida
    damlanadi.</p>
  <p class="narx">35 000 so'm</p>
</article>

Nimaga qarang: oq karta, yumshoq soya bilan qaymoq fondan ko'tarilib turibdi. Tepada osh rasmi (natijada rasm o'rniga oddiy SVG chizma), ostida yashil sarlavha, kulrang tavsif va g'isht rangli narx. Rasm kartaning chetiga yopishmagan — atrofida 8 piksellik hoshiya bor.

Uchta professional detal:

• Ichki burchak = tashqi burchak − hoshiya. Karta burchagi 16 piksel, hoshiya 8 piksel, shuning uchun rasm burchagi 8 piksel. Ikkalasi bir xil (16) bo'lsa, rasm burchaklari karta burchagidan "semiz" ko'rinadi — ko'z buni sezadi, sababini bilmasa ham.
• Rasm nisbati — aspect-ratio. Haqiqiy loyihada img ga aspect-ratio: 16 / 10 va object-fit: cover yoziladi (Rasm va media, Rasmlar CSS tomoni). Rasm fayli qanday o'lchamda kelmasin, karta joyi o'zgarmaydi va sahifa sakramaydi. Natijadagi SVG'da object-fit o'rnini preserveAspectRatio="xMidYMid slice" bosadi — ma'nosi bir xil.
• Rasm — bezak. Taom nomi sarlavhada bor, shuning uchun rasm uchun alt="" (bu yerda aria-hidden="true"). Aks holda Malika har kartada "Osh rasmi. Osh" ni eshitadi (Yaxshi alt matn).

Tekshirib ko'ring: Karta burchagi 20 piksel, hoshiya 12 piksel. Rasm burchagi necha piksel bo'lsin? piksel.

3. Butun karta bosiladigan

3.1 Noto'g'ri yo'l: kartani havolaga o'rash

Eng oddiy fikr — butun article ni <a> ga o'rash. HTML buni ruxsat beradi, lekin ikki muammo bor:

• Ekran o'quvchi hammasini o'qiydi. Havola nomi — uning ichidagi butun matn: "Osh Guruch, sabzi va qo'y go'shti. Qozonda, o'tin olovida damlanadi. 35 000 so'm". Malika havolalar ro'yxatini ochsa, har karta bitta uzun jumla bo'lib eshitiladi.
• Ichida tugma bo'lolmaydi. Tugma yoki havola darsida ko'rgan edik: a ichida button — validator xatosi. "Allergenlar" tugmasini kartaga qo'ya olmaymiz.

3.2 Stretched link

To'g'ri yo'l: havola faqat sarlavhada qoladi — Malika faqat "Osh, havola" ni eshitadi. Ko'rinmas "parda" esa havolaning ::after psevdo-elementi bo'ladi va butun kartani yopadi. Psevdo-element havolaning bir qismi, shuning uchun unga bosish — havolaga bosish.

Bu usul stretched link ("cho'zilgan havola") deb ataladi. Uch qator yetadi:

.taom-karta {
  position: relative;
}

.taom-karta h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

• content: "" — psevdo-element paydo bo'lishi uchun shart (Pseudo-elementlar).
• position: absolute; inset: 0 — to'rt tomonga 0: eng yaqin joylashgan otaning butun maydoni (position).
• .taom-karta { position: relative; } — o'sha "eng yaqin joylashgan ota" aynan karta bo'lsin.

Oxirgi qator eng ko'p unutiladi. Uni o'chirib ko'ramiz:

<style>
  body { font-family: system-ui, sans-serif; }
  .taom-karta {
    max-inline-size: 16rem;
    padding: 1rem;
    border: 2px solid #2f6b3a;
    border-radius: 1rem;
  }
  .taom-karta h3 { margin-block-start: 0; }
  .taom-karta h3 a::after {
    content: "";
    position: absolute;
    inset: 0;
    outline: 3px dashed #b4461a;
    outline-offset: -3px;
  }
</style>
<article class="taom-karta">
  <h3><a href="#osh">Osh</a></h3>
  <p>35 000 so'm</p>
</article>
<p>❌ Bu paragraf kartadan tashqarida.</p>

Nimaga qarang: qizg'ish punktir — havolaning "pardasi". U karta atrofida emas, butun natija oynasi atrofida chizilgan. Kartada position yo'q, undan tepada ham yo'q — parda sahifaning o'ziga (boshlang'ich containing block) cho'zildi. Chrome'da tekshirdik: kartadan tashqaridagi paragraf ustiga bosish ham "Osh" havolasini ochadi. Foydalanuvchi sahifaning qayeriga bosmasin — osh sahifasiga ketadi.

Tekshirib ko'ring: Karta ichida transform: translateY(-4px) bor (hover effekti), lekin position: relative yo'q. Parda kartaga sig'adimi?

3.3 Ichki tugma: parda ustiga chiqarish

Endi kartada ikkinchi interaktiv element bor: "Allergenlar" tugmasi Top layer darsidagi popover'ni ochadi. Muammo: havola pardasi butun kartani yopgan — tugma ham parda ostida. Bosish pardaga tushadi va osh sahifasi ochiladi.

Yechim: tugmani pardadan yuqoriga chiqaramiz. position: relative + z-index: 1 (z-index):

<style>
  :root {
    --rang-fon: #fffaf0;
    --rang-matn: #1f2a24;
    --rang-asosiy: #2f6b3a;
    --rang-asosiy-toq: #1a5d1a;
    --rang-urgu: #b4461a;
    --rang-ikkinchi: #5b6660;
  }
  body {
    font-family: system-ui, sans-serif;
    background: var(--rang-fon);
    color: var(--rang-matn);
  }
  .taom-karta {
    position: relative;
    isolation: isolate;
    display: grid;
    gap: 0.5rem;
    max-inline-size: 18rem;
    padding: 0.5rem 0.5rem 1rem;
    border-radius: 1rem;
    background: white;
    box-shadow: 0 1px 2px #0000001f;
  }
  .taom-karta > :not(svg) { margin: 0 0.5rem; }
  .taom-karta svg {
    inline-size: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 0.5rem;
  }
  .taom-karta h3 a {
    color: var(--rang-asosiy);
    text-decoration: none;
  }
  .taom-karta h3 a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
  }
  .taom-karta p { color: var(--rang-ikkinchi); }
  .taom-karta .narx {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--rang-urgu);
    font-weight: bold;
  }
  .taom-karta button {
    position: relative;
    z-index: 1;
    min-block-size: 2rem;
    border: 2px solid var(--rang-asosiy);
    border-radius: 0.5rem;
    background: transparent;
    color: var(--rang-asosiy);
    font: inherit;
    font-size: 0.875rem;
    cursor: pointer;
  }
  /* Soya — alohida qatlamda, faqat shaffofligi o'zgaradi */
  .taom-karta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    box-shadow: 0 8px 24px #1f2a2440;
    opacity: 0;
  }
  .taom-karta:has(h3 a:hover)::before { opacity: 1; }
  .taom-karta:has(h3 a:focus-visible),
  .taom-karta button:focus-visible {
    outline: 3px solid var(--rang-asosiy-toq);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--rang-fon);
  }
  .taom-karta h3 a:focus-visible { outline: none; }
  @media (prefers-reduced-motion: no-preference) {
    .taom-karta { transition: translate 0.2s ease-out; }
    .taom-karta::before { transition: opacity 0.2s ease-out; }
    .taom-karta:has(h3 a:hover) { translate: 0 -4px; }
  }
  [popover] {
    padding: 0.75rem 1rem;
    border: 2px solid var(--rang-asosiy);
    border-radius: 0.75rem;
    background: var(--rang-fon);
  }
</style>
<article class="taom-karta">
  <svg viewBox="0 0 160 100" preserveAspectRatio="xMidYMid slice"
    aria-hidden="true">
    <rect width="160" height="100" fill="#e9dcc3" />
    <ellipse cx="80" cy="56" rx="62" ry="30" fill="#fffaf0" />
    <ellipse cx="80" cy="52" rx="44" ry="20" fill="#f2c46d" />
    <ellipse cx="80" cy="46" rx="14" ry="6" fill="#b4461a" />
  </svg>
  <h3><a href="#osh">Osh</a></h3>
  <p>Guruch, sabzi va qo'y go'shti. Qozonda, o'tin olovida
    damlanadi.</p>
  <p class="narx">35 000 so'm
    <button type="button" popovertarget="osh-allergen">
      Allergenlar
    </button>
  </p>
  <div id="osh-allergen" popover>Allergen yo'q.</div>
</article>

Nimaga qarang: sichqonchani kartaning istalgan joyiga — rasmga, tavsifga, bo'sh joyga — olib boring. Karta 4 piksel ko'tariladi, ostida soya quyuqlashadi, kursor "qo'l"ga aylanadi. Bosing — osh havolasi ochiladi (manzil oxirida #osh). "Allergenlar" tugmasini bosing — havola emas, popover ochiladi.

Chrome'da nuqtama-nuqta tekshirdik (document.elementFromPoint — sahifaning shu nuqtasida qaysi element turganini aytadigan JavaScript buyrug'i; sahifa bilan ishlashni 09-qismda o'rganasiz): rasm, tavsif va kartaning pastki chap burchagi ustida — a (havola), tugma ustida — button. Accessibility daraxtida karta ichida faqat ikki interaktiv element bor: "Osh, havola" va "Allergenlar, tugma".

Kodni o'qiymiz:

• :has(h3 a:hover) — "havolasi hover'dagi karta" (Mantiqiy pseudo-klasslar). Parda havolaning bir qismi, shuning uchun sichqoncha kartaning qayerida bo'lmasin, havola :hover holatida. Tugma ustida esa havola hover'da emas — karta ko'tarilmaydi. Bu to'g'ri: tugma boshqa ish qiladi.
• Soya ::before da, ::after da emas — kartaning ::after i bo'sh, lekin havolaning ::after i band. Soyani kartaning o'z psevdo-elementiga qo'ydik va faqat opacity sini o'zgartirdik — Rendering pipeline darsidagi arzon usul. isolation: isolate + z-index: -1 — soya kartaning oq fonidan pastda, lekin sahifa fonidan yuqorida (z-index).
• Fokus halqasi kartada. Tab bosib ko'ring: halqa sarlavha atrofida emas, butun karta atrofida. Havolaning o'z halqasi o'chirilgan — ikkita halqa chalkashtiradi. :has() — keng tarqalgan Baseline: 2023-yil dekabridan hamma asosiy brauzerda, Baseline ma'lumotiga ko'ra 2026-yil iyunidan "keng tarqalgan".

Diqqat: outline: none ni havoladan olib tashlashdan oldin o'ylang: :has() ni tushunmaydigan juda eski brauzerda karta halqasi ham chiqmaydi va fokus butunlay ko'rinmay qoladi. Ehtiyotkor yo'l — o'chirishni @supports selector(:has(a)) ichiga olish: :has() bor joyda halqa kartada, yo'q joyda — havolada. Portfolio qadamida shunday qilamiz.

3.4 Stretched link'ning narxi

Usul mukammal emas. Ikki cheklovni bilib qo'ying:

• Matnni belgilab bo'lmaydi. Tavsifdan nusxa olmoqchi bo'lgan mehmon sichqonchani tortadi — lekin parda ostidagi matn belgilanmaydi, havola sudraladi. Kartada nusxa olinadigan narsa (telefon raqami, manzil) bo'lsa, o'sha elementni ham position: relative; z-index: 1 bilan pardadan chiqaring. Lekin endi u joyga bosish havolani ochmaydi — bu ongli tanlov.
• Faqat bitta asosiy havola. Kartada ikkita "butun karta" bo'lolmaydi. Qolgan havola va tugmalar — kichik, pardadan yuqorida.

Tekshirib ko'ring: Kartada ikkinchi havola bor: "Retseptni ko'rish". Unga z-index: 1 yozildi, lekin baribir osh sahifasi ochilyapti. Nima yetishmaydi?

4. Qatordagi kartalar

4.1 Muammo: "zinapoya"

Menyu sahifasida kartalar uch ustunda turadi. Taom nomlari har xil uzunlikda: "Osh", "Qo'lda cho'zilgan lag'mon", "Tandir somsa". Uzun nom ikki qatorga o'tadi, shuning uchun uning ostidagi tavsif va narx pastroq tushadi. Qo'shni kartalarda narxlar zinapoyaga o'xshab turli balandlikda.

subgrid darsida portfolio kartalarini aynan shunday tekislagan edik. Endi «Bahor» menyusiga qo'llaymiz va unga yana bitta vosita qo'shamiz — uzun tavsifni qisqartirish.

4.2 Subgrid va line-clamp

<style>
  :root {
    --rang-fon: #fffaf0;
    --rang-matn: #1f2a24;
    --rang-asosiy: #2f6b3a;
    --rang-urgu: #b4461a;
    --rang-ikkinchi: #5b6660;
  }
  body {
    font-family: system-ui, sans-serif;
    background: var(--rang-fon);
    color: var(--rang-matn);
  }
  .royxat {
    display: grid;
    grid-template-columns:
      repeat(auto-fill, minmax(min(13rem, 100%), 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .taom-karta {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: 0.5rem;
    padding: 0.5rem 0.5rem 1rem;
    border-radius: 1rem;
    background: white;
    box-shadow: 0 1px 2px #0000001f, 0 4px 12px #0000001f;
  }
  .taom-karta > :not(svg) { margin: 0 0.5rem; }
  .taom-karta svg {
    inline-size: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 0.5rem;
  }
  .taom-karta h3 { color: var(--rang-asosiy); }
  .taom-karta p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: var(--rang-ikkinchi);
  }
  .taom-karta .narx {
    display: block;
    color: var(--rang-urgu);
    font-weight: bold;
  }
</style>
<ul class="royxat" role="list">
  <li class="taom-karta">
    <svg viewBox="0 0 160 100" aria-hidden="true">
      <rect width="160" height="100" fill="#e9dcc3" />
      <ellipse cx="80" cy="52" rx="44" ry="20" fill="#f2c46d" />
    </svg>
    <h3>Osh</h3>
    <p>Guruch, sabzi va qo'y go'shti.</p>
    <p class="narx">35 000 so'm</p>
  </li>
  <li class="taom-karta">
    <svg viewBox="0 0 160 100" aria-hidden="true">
      <rect width="160" height="100" fill="#dfe8d9" />
      <ellipse cx="80" cy="52" rx="44" ry="20" fill="#e0a458" />
    </svg>
    <h3>Qo'lda cho'zilgan lag'mon</h3>
    <p>Rustam aka xamirni har kuni ertalab qo'lda cho'zadi.
      Ustiga go'sht va sabzavotli qayla quyiladi, yonida
      achchiq sous beriladi.</p>
    <p class="narx">28 000 so'm</p>
  </li>
  <li class="taom-karta">
    <svg viewBox="0 0 160 100" aria-hidden="true">
      <rect width="160" height="100" fill="#efe1d1" />
      <ellipse cx="80" cy="52" rx="44" ry="20" fill="#f5e6c8" />
    </svg>
    <h3>Manti</h3>
    <p>Bug'da pishirilgan, piyozli go'sht.</p>
    <p class="narx">30 000 so'm</p>
  </li>
</ul>

Nimaga qarang (kompyuter enida): uchta karta bir qatorda va bir xil balandlikda. "Qo'lda cho'zilgan lag'mon" nomi ikki qatorga o'tgan — lekin qo'shni kartalardagi tavsiflar ham xuddi shu chiziqdan boshlanadi, narxlar esa bitta gorizontal chiziqda. Lag'mon tavsifi uzun — u ikki qatordan keyin "…" bilan kesilgan. Telefonda (360) kartalar ustma-ust, har biri butun enda.

Chrome'da 1280 enida o'lchadik: uchala narxning yuqori cheti bir xil nuqtada (sahifa tepasidan bir xil piksel). Subgrid'siz variantda Osh narxi lag'mon narxidan 11 piksel yuqorida edi — ko'z buni sezadi.

• grid-row: span 4 + grid-template-rows: subgrid — har karta ota to'rning to'rtta qatorini egallaydi va ichki qismlari (rasm, nom, tavsif, narx) o'sha qatorlarga joylashadi. Qator balandligi — shu qatordagi eng baland katak. subgrid darsidagi g'oyaning o'zi.
• li + role="list" — kartalar ro'yxat; list-style: none Safari'da ro'yxat semantikasini yo'qotadi, role="list" uni qaytaradi (Ro'yxatlar stili).

4.3 -webkit-line-clamp: N qatordan keyin "…"

Uzun tavsif kartani cho'zib yuboradi. text-overflow: ellipsis (Overflow) faqat bitta qator uchun ishlaydi. Bir necha qator uchun — -webkit-line-clamp:

.taom-karta p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* necha qator ko'rinsin */
  overflow: hidden;
}

To'rtta qator doim birga yoziladi. G'alati ko'rinadi: -webkit-box — 2009-yildagi eski flexbox'ning qoldig'i. Brauzerlar uni faqat shu hiyla uchun saqlab qolgan. MDN jadvaliga ko'ra prefiksli yozuv hamma asosiy brauzerda ishlaydi. Prefikssiz line-clamp xususiyati esa hali hech qayerda to'liq yo'q: Baseline ma'lumotiga ko'ra u Baseline emas, Chrome 154 da ham CSS.supports("line-clamp: 2") — false. Shuning uchun hozircha prefiksli variant yoziladi.

Ikki ogohlantirish:

• Kesilgan matn yo'qolmaydi. Ekran o'quvchi uni to'liq o'qiydi, qidiruv tizimi ham ko'radi. Faqat ko'zga ko'rinmaydi. Shuning uchun muhim ma'lumotni (narx, allergen) hech qachon kesiladigan joyga qo'ymang.
• Kesilgan matnning davomi bo'lsin. Karta havolasi to'liq tavsifli sahifaga olib borsin — aks holda mehmon qolgan qismini hech qayerda o'qiy olmaydi.

Tekshirib ko'ring: Stajyor -webkit-line-clamp: 2 yozdi, lekin tavsif to'liq ko'rinyapti, "…" yo'q. Qaysi qator yetishmaydi?

5. Gorizontal variant: media object

5.1 Naqsh

Media object — chapda rasm (yoki ikonka, avatar), o'ngda matn. Bu CSS tarixidagi eng mashhur naqshlardan biri. 2010-yilda OOCSS muallifi Nicole Sullivan uni "yuzlab qator kodni tejaydigan" komponent sifatida tanishtirgan (CSS metodologiyalari). Izohlar, xabarlar ro'yxati, bildirishnomalar, qidiruv natijalari — hammasi media object.

Taom kartasi ham keng joyda media object'ga aylanadi: rasm chapda, matn o'ngda. Container queries darsida bu qoidani ko'rgan edik: kartaning shakli ekranga emas, o'zi turgan ustunga bog'liq. Endi uni stretched link'li to'liq karta bilan birlashtiramiz.

5.2 Bitta karta, ikki joy

<style>
  :root {
    --rang-fon: #fffaf0;
    --rang-matn: #1f2a24;
    --rang-asosiy: #2f6b3a;
    --rang-urgu: #b4461a;
    --rang-ikkinchi: #5b6660;
  }
  body {
    font-family: system-ui, sans-serif;
    background: var(--rang-fon);
    color: var(--rang-matn);
  }
  .sahifa {
    display: grid;
    gap: 1rem;
  }
  @media (width >= 40rem) {
    .sahifa { grid-template-columns: 3fr 1fr; }
  }
  main, aside { container: kartalar / inline-size; }
  .taom-karta {
    position: relative;
    display: grid;
    gap: 0.5rem 1rem;
    padding: 0.5rem 0.5rem 1rem;
    border-radius: 1rem;
    background: white;
    box-shadow: 0 1px 2px #0000001f, 0 4px 12px #0000001f;
  }
  .taom-karta > * { margin: 0; }
  .taom-karta svg {
    inline-size: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 0.5rem;
  }
  .taom-karta h3 a {
    color: var(--rang-asosiy);
    text-decoration: none;
  }
  .taom-karta h3 a::after {
    content: "";
    position: absolute;
    inset: 0;
  }
  .taom-karta p { color: var(--rang-ikkinchi); }
  .taom-karta .narx { color: var(--rang-urgu); font-weight: bold; }
  @container kartalar (width >= 28rem) {
    .taom-karta {
      grid-template-columns: minmax(8rem, 1fr) 2fr;
      grid-template-rows: auto auto 1fr;
      padding: 0.5rem;
    }
    .taom-karta svg { grid-row: span 3; }
  }
</style>
<div class="sahifa">
  <main>
    <article class="taom-karta">
      <svg viewBox="0 0 160 100" aria-hidden="true">
        <rect width="160" height="100" fill="#e9dcc3" />
        <ellipse cx="80" cy="52" rx="44" ry="20" fill="#f2c46d" />
      </svg>
      <h3><a href="#osh">Kun taomi: osh</a></h3>
      <p>Payshanba kungi to'y oshi, yonida salat va non.</p>
      <p class="narx">35 000 so'm</p>
    </article>
  </main>
  <aside>
    <article class="taom-karta">
      <svg viewBox="0 0 160 100" aria-hidden="true">
        <rect width="160" height="100" fill="#dfe8d9" />
        <ellipse cx="80" cy="52" rx="44" ry="20" fill="#9fbf8a" />
      </svg>
      <h3><a href="#choy">Ko'k choy</a></h3>
      <p>Choynakda, limon bilan.</p>
      <p class="narx">5 000 so'm</p>
    </article>
  </aside>
</div>

Nimaga qarang: kompyuterda (1280) "Kun taomi" kartasi keng main da yotiq — rasm chapda, matn o'ngda. Tor aside dagi "Ko'k choy" esa tik — rasm tepada. HTML ham, class ham bir xil — farqni konteyner eni hal qildi. Telefonda (360) ikkala karta tik: main ham tor. Istalgan kartaning istalgan joyiga bosing — o'z havolasi ochiladi.

• minmax(8rem, 1fr) 2fr — rasm ustuni kamida 8rem, keng joyda matn ustunining yarmicha.
• grid-template-rows: auto auto 1fr — nom va tavsif tepada zich turadi, rasmdan qolgan balandlikni oxirgi qator (narx) oladi. Busiz uch qator rasm balandligini teng bo'lib olardi va matnlar orasida katta bo'shliqlar paydo bo'lardi. Bu — media object'ning zamonaviy grid yozuvi. Flex bilan ham yoziladi (rasmga flex: none, matnga flex: 1), lekin grid ikki o'lchamda nazorat beradi.
• grid-row: span 3 — rasm uch qatorga (nom, tavsif, narx) cho'ziladi, matn qatorlari esa o'ng ustunda ketma-ket.
• container: kartalar / inline-size — Container queries darsidagi kanonik nom. Shart rem da.
• Stretched link ikkala variantda ham ishlaydi: position: relative kartaning o'zida, grid unga xalaqit bermaydi.

Tekshirib ko'ring: Kompyuterda "Kun taomi" kartasini main dan tor aside ga ko'chirdik. U qanday ko'rinadi — yotiqmi, tikmi? Nega ekran eni o'zgarmasa ham shakl o'zgaradi?

6. :has() bilan karta holatlari

Karta ichidagi narsaga qarab kartaning o'zini o'zgartirish — :has() ning eng foydali joyi. «Bahor» menyusidan uch misol:

/* Rasmsiz karta (masalan, ichimliklar) — tepasida rangli chiziq */
.taom-karta:not(:has(img, svg)) {
  border-block-start: 4px solid var(--rang-asosiy);
}

/* Narxida eski (chizilgan) narx bor — aksiya kartasi */
.taom-karta:has(.narx del) {
  outline: 2px solid var(--rang-urgu);
}

/* Ichidagi checkbox belgilangan karta — tanlangan */
.taom-karta:has(input:checked) {
  outline: 3px solid var(--rang-asosiy);
}

Oldin bunday holat uchun HTML'ga modifikator class qo'shilardi: taom-karta rasmsiz. Bu ish JavaScript yoki server zimmasida edi. :has() bilan CSS kartaning ichiga qaraydi va o'zi hal qiladi — HTML toza qoladi.

Ikkinchi misolda narx <p class="narx"><del>35 000</del> 30 000 so'm</p> ko'rinishida: del — o'chirilgan (eski) matn (Tahrir izlari). Oxirgi misol — to'y uchun taom tanlash: har kartada checkbox, belgilangan kartalar yashil ramkada. Uni 2-mashqda to'liq quramiz.

Maslahat: Qachon class, qachon :has()? Holat kartaning o'ziga tegishli bo'lsa (taom tugadi — class="taom-karta tugadi"), modifikator class'i qoladi: u HTML'da aniq ko'rinadi. Holat karta ichidagi narsadan kelib chiqsa (rasm bor-yo'qligi, eski narx, belgilangan checkbox) — :has(). Aks holda bitta faktni ikki joyda yozasiz va ular bir kun albatta mos kelmay qoladi.

Tekshirib ko'ring: Aksiya kartasining selektorini to'ldiring: .taom-karta:has(.narx ). Nega bu yerga taom-karta aksiya class'i yozilmaydi?

7. «Bahor»ning komponentlar.css iga

/* === Taom kartasi (Kartalar darsi) === */
.taom-karta {
  position: relative; /* stretched link uchun */
  isolation: isolate; /* soya qatlami karta ichida */
  display: grid;
  gap: var(--masofa-xs);
  padding: var(--masofa-xs) var(--masofa-xs) var(--masofa-m);
  border-radius: var(--burchak-m);
  background: var(--rang-yuza);
  box-shadow: var(--soya-1);
}

.taom-karta > :not(img) {
  margin: 0;
  margin-inline: var(--masofa-xs);
}

.taom-karta img {
  inline-size: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--burchak-s);
}

/* Butun karta bosiladi — sarlavhadagi havola orqali */
.taom-karta h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* Karta ichidagi boshqa harakatlar — pardadan yuqorida */
.taom-karta :is(button, a:not(h3 a)) {
  position: relative;
  z-index: 1;
}

/* Hover soyasi: faqat shaffoflik o'zgaradi */
.taom-karta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  box-shadow: var(--soya-3);
  opacity: 0;
}

@media (hover: hover) {
  .taom-karta:has(h3 a:hover)::before {
    opacity: 1;
  }
}

/* Fokus — butun karta atrofida */
.taom-karta:has(h3 a:focus-visible) {
  outline: 3px solid var(--rang-asosiy-toq);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--rang-fon), var(--soya-1);
}

@supports selector(:has(a)) {
  .taom-karta h3 a:focus-visible {
    outline: none;
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .taom-karta {
    transition: translate 0.2s ease-out;
  }

  .taom-karta::before {
    transition: opacity 0.2s ease-out;
  }

  @media (hover: hover) {
    .taom-karta:has(h3 a:hover) {
      translate: 0 -4px;
    }
  }
}

/* Keng konteynerda — media object */
@container kartalar (width >= 28rem) {
  .taom-karta {
    grid-template-columns: minmax(8rem, 1fr) 2fr;
    grid-template-rows: auto auto 1fr;
    padding: var(--masofa-xs);
  }

  .taom-karta img {
    grid-row: span 3;
  }
}

• Menyu to'ri va subgrid — layout.css da: .taom-karta ning grid-row va grid-template-rows qoidasi faqat ro'yxat ichida kerak (ul > .taom-karta). Yakka "Kun taomi" kartasi o'z to'rida yashaydi.
• --rang-yuza — Qorong'i rejim darsidagi karta foni: qorong'ida u fondan biroz yorqinroq, --soya-* esa o'chadi. Karta ikkala rejimda ham o'zi moslashadi.
• Fokus — CSS'da accessibility darsidagi ikki rangli halqa, faqat havolada emas, kartada. asos.css dagi umumiy :focus-visible havolaga ham halqa va qaymoq soya beradi — ikkalasi @supports ichida o'chiriladi. Kartaning o'z soyasi (--soya-1) halqa soyasi bilan birga yoziladi, aks holda fokusda yo'qolib qolardi.
• a:not(h3 a) — sarlavhadan boshqa hamma havola. :not() ichida murakkab selektor — Mantiqiy pseudo-klasslar.
• Micro-interaktsiyalar darsidagi kartalar stagger'i (navbatma-navbat paydo bo'lish) shu qoidalarga tegmaydi — u animation bilan ishlaydi.

8. Ko'p uchraydigan xatolar

8.1 Butun kartani <a> ga o'rash

Ekran o'quvchi havola nomi sifatida butun kartani o'qiydi, ichiga tugma qo'yib bo'lmaydi. Tuzatish: havola sarlavhada, parda ::after da.

8.2 position: relative unutilgan

Parda butun sahifaga yoyiladi — sahifaning istalgan joyiga bosish karta havolasini ochadi. Tuzatish: kartaga position: relative.

8.3 Ichki tugma bosilmaydi

Tugma parda ostida qolgan. Tuzatish: position: relative; z-index: 1. Tekshirish: DevTools → Elements'da tugmani tanlang va sahifada uning ustiga sichqoncha olib boring — ustida havola pardasi (a::after) turgan bo'lsa, Elements panelida havola belgilanadi.

8.4 Qisqartirilgan matnda muhim ma'lumot

Uchinchi qatordagi "Tarkibida yong'oq bor" -webkit-line-clamp: 2 bilan ko'rinmay qoldi. Tuzatish: muhim ma'lumot kesilmaydigan joyda — alohida qatorda yoki belgi sifatida.

8.5 Hamma kartaga bir xil balandlik (height)

height: 380px — uzun nomli kartada matn karta chetidan toshib chiqadi, qisqasida bo'sh joy qoladi. Tuzatish: balandlikni to'r hal qilsin: grid qatori (stretch) va subgrid.

9. Mashqlar

Mashqlarni kurs/mashqlar/06/ papkasida bajaring.

1-mashq (oson): tadbir kartasi

«Bahor» bosh sahifasidagi "Osh bayrami" tadbiri kartasi: sarlavha (h3 ichida tadbirlar/osh-bayrami.html ga havola), sana (time), bir gaplik tavsif. Butun karta bosilsin. Rasm yo'q.

Ishora: uch qatorli stretched link — «Stretched link» bo'limi. position: relative ni unutmang.

<style>
  body { font-family: system-ui, sans-serif; background: #fffaf0; }
  .tadbir {
    position: relative;
    max-inline-size: 20rem;
    padding: 1rem;
    border-radius: 1rem;
    border-block-start: 4px solid #2f6b3a;
    background: white;
    box-shadow: 0 1px 2px #0000001f, 0 4px 12px #0000001f;
  }
  .tadbir > * { margin: 0 0 0.5rem; }
  .tadbir h3 a { color: #2f6b3a; text-decoration: none; }
  .tadbir h3 a::after {
    content: "";
    position: absolute;
    inset: 0;
  }
  .tadbir:has(a:focus-visible) {
    outline: 3px solid #1a5d1a;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #fffaf0;
  }
</style>
<article class="tadbir">
  <h3><a href="#osh-bayrami">Osh bayrami</a></h3>
  <p><time datetime="2026-10-18">18-oktabr, shanba</time></p>
  <p>Rustam aka katta qozonda 200 kishilik osh damlaydi.</p>
</article>

2-mashq (o'rta): to'y uchun taom tanlash

To'y menyusini tuzish sahifasi: har taom kartasida "Tanlash" checkbox'i bor (input type="checkbox" + label). Talablar:

1. Belgilangan kartaning ramkasi yashil va qalin bo'lsin.
2. Checkbox'ning yorlig'iga bosish kartani belgilasin — butun karta havola emas (bu sahifada kartalar hech qayerga olib bormaydi).
3. Fokus checkbox'da bo'lganda butun karta atrofida halqa chiqsin.

Ishora: :has(input:checked) va :has(:focus-visible). Butun kartani bosiladigan qilish shart bo'lsa — bu yerda havola yo'q, lekin label ning ::after iga ham parda qo'yish mumkin: label ga bosish — checkbox'ga bosish (label).

<style>
  body { font-family: system-ui, sans-serif; background: #fffaf0; }
  .royxat {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .taom-karta {
    position: relative;
    inline-size: 12rem;
    padding: 1rem;
    border: 2px solid #c9d6cf;
    border-radius: 1rem;
    background: white;
    accent-color: #2f6b3a;
  }
  .taom-karta h3 { margin: 0 0 0.5rem; color: #2f6b3a; }
  .taom-karta label::after {
    content: "";
    position: absolute;
    inset: 0;
    cursor: pointer;
  }
  .taom-karta:has(input:checked) {
    border-color: #2f6b3a;
    box-shadow: inset 0 0 0 2px #2f6b3a;
  }
  .taom-karta:has(input:focus-visible) {
    outline: 3px solid #1a5d1a;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #fffaf0;
  }
</style>
<ul class="royxat" role="list">
  <li class="taom-karta">
    <h3>Osh</h3>
    <input id="t-osh" type="checkbox" name="taom" value="osh">
    <label for="t-osh">Tanlash</label>
  </li>
  <li class="taom-karta">
    <h3>Manti</h3>
    <input id="t-manti" type="checkbox" name="taom" value="manti"
      checked>
    <label for="t-manti">Tanlash</label>
  </li>
</ul>

3-mashq (qiyin): izohlar — media object

Bosh sahifadagi "Mijozlar sharhlari" bo'limi: har sharhda chapda 48 piksellik dumaloq avatar (ismning bosh harfi bilan), o'ngda ism (h3), sana va matn. Talablar:

1. Avatar hech qachon siqilmasin; matn qolgan joyni olsin.
2. Uzun sharh 3 qatordan keyin kesilsin, lekin "To'liq o'qish" havolasi (sharh sahifasiga) har doim ko'rinsin.
3. Telefonda ham avatar chapda qolsin — bu karta emas, media object.

Ishora: grid auto 1fr yoki flex + flex: none. Avatar — aspect-ratio: 1 va border-radius: 50% (Chegara va burchaklar). Kesish — -webkit-line-clamp: 3.

<style>
  body { font-family: system-ui, sans-serif; background: #fffaf0; }
  .sharh {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.75rem;
    max-inline-size: 36rem;
    margin-block-end: 1rem;
  }
  .sharh > :not(.avatar) { margin: 0; }
  .avatar {
    grid-row: span 4;
    display: grid;
    place-items: center;
    inline-size: 3rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #2f6b3a;
    color: #fffaf0;
    font-weight: bold;
  }
  .sharh h3 { font-size: 1rem; }
  .sharh time { font-size: 0.875rem; color: #5b6660; }
  .sharh blockquote {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }
  .sharh a { color: #2f6b3a; }
</style>
<article class="sharh">
  <span class="avatar" aria-hidden="true">M</span>
  <h3>Malika</h3>
  <time datetime="2026-09-14">14-sentabr</time>
  <blockquote>Choyxonaga har hafta oilamiz bilan kelamiz. Osh doim
    issiq, choy yangi damlangan. Ofitsiant Otabek menyuni
    ekran o'quvchim uchun qulay qilib o'qib berdi, saytdagi
    menyu esa telefonda ham bemalol o'qiladi. Rahmat!</blockquote>
  <p><a href="#sharh-1">To'liq o'qish</a></p>
</article>

4-mashq: Portfolio qadami — loyiha kartasi butunlay bosiladi

Portfolio'dagi loyiha kartalarida (Yakuniy loyiha) hozir faqat pastdagi havolalar bosiladi. Kartaga bosgan ish beruvchi hech narsa bo'lmaganini ko'radi.

1. Har kartaning birinchi havolasi ("Loyiha haqida batafsil" yoki "Saytni ochish") butun kartani yopsin.
2. Qolgan havolalar (masalan, ikkinchi "Saytni ochish") o'z joyida bosilishi kerak.
3. Fokus halqasi butun karta atrofida — faqat :has() bor brauzerlarda; qolganlarida havolaning o'z halqasi qolsin.
4. Kartaning Rendering pipeline darsidagi hover soyasi sichqoncha kartaning istalgan joyida chiqsin.

Ishora: kartada position: relative Rendering pipeline darsidan beri bor. Soya kartaning ::after ida — pardani havolaning ::after iga qo'yasiz, ular to'qnashmaydi. Birinchi havola — li:first-child > a. Kartalar subgrid da: absolute parda grid kataklarini egallamaydi.

/* Butun karta bosiladi — birinchi havola orqali (Kartalar darsi) */
.loyihalar > article li:first-child > a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* Boshqa havolalar pardadan yuqorida */
.loyihalar > article li + li > a {
  position: relative;
  z-index: 1;
}

/* Fokus butun kartada */
.loyihalar > article:has(li:first-child > a:focus-visible) {
  outline: 2px solid var(--rang-asosiy);
  outline-offset: 2px;
}

@supports selector(:has(a)) {
  .loyihalar > article li:first-child > a:focus-visible {
    outline: none;
  }
}

10. Real ishda

• Onlayn do'konlar (Uzum Market, Amazon) — mahsulot kartasida aynan shu uch qatlam: butun karta mahsulot sahifasiga olib boradi, "Savatga" va "Sevimlilar" tugmalari esa pardadan yuqorida. Bootstrap'da bu usul tayyor class sifatida bor: .stretched-link (CSS freymvorklar).
• Dizayn tizimlarida karta ko'pincha "yuza" (surface) deb ataladi va uning balandlik darajasi (--soya-1…--soya-3) tokenlar bilan beriladi (Dizayn tokenlari).
• Kod ko'rigida tez-tez uchraydigan izoh: "Butun karta <a> ichida — ichidagi tugma validatsiyadan o'tmaydi" va "position: relative yo'q, parda sahifaga chiqib ketgan".
• Intervyuda so'raladi: "Butun kartani bosiladigan qilishning accessible usuli?", "Kartalar balandligini qanday tenglashtirasiz?", "Media object nima?", ":has() qayerda foydali?".

Xulosa

• Karta — media, sarlavha, meta, matn va harakatlar; tegi odatda article yoki ro'yxatda li.
• Butun karta bosilishi uchun kartani <a> ga o'ramaymiz: sarlavhadagi havolaning ::after i position: absolute; inset: 0 bilan pardaga aylanadi, kartada — position: relative.
• Karta ichidagi boshqa tugma va havolalar position: relative; z-index: 1 bilan pardadan yuqoriga chiqariladi.
• Hover va fokus butun kartaga :has() bilan beriladi; havola halqasini faqat @supports selector(:has(a)) ichida o'chiring.
• Qatordagi kartalar subgrid bilan tekislanadi, uzun matn -webkit-line-clamp bilan kesiladi (muhim ma'lumot kesilmasin).
• Keng konteynerda karta media object'ga aylanadi — @container bilan.

Keyingi dars: Navbar va mobil menyu — saytning eng tepasidagi komponent: kompyuterda qator, telefonda "Menyu" tugmasi ortida — va hammasi JavaScript'siz.

Manbalar

• MDN: "::after", "position", "inset", ":has()", "-webkit-line-clamp", "aspect-ratio", "object-fit", "Container queries" — developer.mozilla.org
• Inclusive Components (Heydon Pickering): "Cards" — inclusive-components.design
• web-features (Baseline ma'lumotlari): "has", "subgrid", "container-queries", "line-clamp", "aspect-ratio" — github.com/web-platform-dx/web-features