🎨 HTML va CSS da Siz Bilmasligingiz Mumkin Bo‘lgan 100 ta Ajoyib Triklar

📌 1–10: Asosiy (Lekin Kam Bilinadigan) Triklar#

1. <details> va <summary> — ochiladigan/yopiladigan blok yaratish uchun hech qanday JS kerak emas.
2. contenteditable — istalgan elementni tahrirlash mumkin holatga keltirish.
3. <fieldset disabled> — forma ichidagi barcha inputlarni bir vaqtda o‘chirib qo‘yish.
4. <input type="color"> — rang tanlash oynasini ochish.
5. <input type="range"> — slayder yaratish.
6. <datalist> — inputga avtoto‘ldirish opsiyalari qo‘shish.
7. <output> — hisoblash natijasini ko‘rsatish uchun maxsus element.
8. <base> — sahifadagi barcha nisbiy havolalar uchun asosiy URL belgilash.
9. <link rel="preload"> — muhim resurslarni oldindan yuklash.
10. <meta name="theme-color"> — mobil brauzer rangini o‘zgartirish.

---

🧩 11–20: CSS Selektori va Kombinatsiyalar#

1. :is() — bir nechta selektorlarni birlashtirish (masalan, :is(h1, h2, h3)).
2. :where() — :is() ga o‘xshaydi, lekin spesifikligi 0.
3. :has() — ota elementni bola yoki qardoshiga qarab tanlash (masalan, figure:has(img)).
4. :not() — ma’lum elementlarni istisno qilish.
5. :nth-child(n of .class) — faqat ma’lum klassga ega bo‘lgan bolalarni sanash.
6. ~ (tilda) — keyingi barcha qardosh elementlarni tanlash.
7. + (plyus) — faqat birinchi qardosh elementni tanlash.
8. [attribute="value" i] — katta-kichik harf farqiga e’tibor bermaslik.
9. [attribute^="val"] — atribut qiymati berilgan so‘z bilan boshlansa.
10. [attribute$="val"] — atribut qiymati berilgan so‘z bilan tugasa.

---

🎯 21–30: Flexbox va Grid Sirlari#

1. flex: 1 vs flex: auto — farqlarini bilasizmi?
2. gap — flex va grid uchun oraliq (margin ishlatmaymiz).
3. grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) — to‘liq responsiv tarmoq.
4. align-content: center — butun flex konteynerni vertikal markazlash.
5. place-items: center — align-items va justify-items ni bir vaqtda markazlash.
6. order — element tartibini o‘zgartirish (faqat vizual).
7. flex-wrap: wrap-reverse — elementlarni teskari tartibda qatorga o‘rash.
8. grid-area — nomli tarmoq maydonlari yaratish.
9. subgrid — ota grid o‘lchamlarini bola gridga meros qilib berish.
10. align-self: stretch — alohida elementni butun maydonga cho‘zish.

---

✨ 31–40: Animatsiya va O‘tishlar#

1. @keyframes ichida steps() — kadrli animatsiya (sprite uchun).
2. animation-fill-mode: forwards — animatsiya oxirgi holatda qoladi.
3. transition-delay — o‘tishni kechiktirish.
4. will-change — brauzerga o‘zgarish haqida oldindan xabar berish.
5. transform: translate(-50%, -50%) — elementni mutlaq markazlash.
6. perspective — 3D effektlar uchun chuqurlik berish.
7. backface-visibility: hidden — elementning orqa tomonini yashirish.
8. scroll-behavior: smooth — silliq skroll qilish (JS kerak emas).
9. @property — CSS o‘zgaruvchilarini animatsiya qilish.
10. mix-blend-mode — elementlarni bir-biri bilan aralashtirish (Photoshop uslubi).

---

🎨 41–50: Fon va Chegara (Border) Triklari#

1. background: linear-gradient(to right, red 50%, blue 50%) — ikki rangli fon.
2. background-size: cover vs contain — farqlarini tushunasizmi?
3. border-image — rasm yoki gradient bilan chegara yasash.
4. box-shadow: inset — ichki soya qo‘shish.
5. outline-offset — kontur va element orasidagi masofa.
6. border-radius: 50% — doira yasash.
7. clip-path — elementni turli shakllarda kesish.
8. filter: blur() — elementni loyqalash.
9. backdrop-filter: blur() — orqa fondagi elementlarni loyqalash.
10. object-fit: cover — rasm yoki videoni konteynerga moslab kesish.

---

🔤 51–60: Matn va Shriftlar#

1. text-overflow: ellipsis — uzun matnni “...” bilan kesish.
2. word-break: break-all — so‘zlarni istalgan joyda sindirish.
3. white-space: nowrap — matnni bir qatorda majburlash.
4. writing-mode: vertical-rl — matnni vertikal yozish.
5. text-shadow — matnga soya qo‘shish.
6. font-variant: small-caps — barcha harflarni kichik kapitallarga aylantirish.
7. @font-face — qo‘shimcha shriftlarni yuklash.
8. variable fonts — bir shrift faylida turli vazn va uslublar.
9. line-height: 1.5 — qator oralig‘ini birliksiz belgilash (afzalroq).
10. ::first-letter va ::first-line — birinchi harf yoki qatorni stilizatsiya qilish.

---

📐 61–70: O‘lcham va Pozitsiya#

1. width: calc(100% - 20px) — matematik ifodalar.
2. height: 100vh — ekran balandligining 100%.
3. min-content va max-content — elementni minimal/maksimal tarkibga moslash.
4. fit-content — tarkibga mos, lekin maksimal kenglik bilan cheklash.
5. position: sticky — yopishqoq element (fixed va relative orasi).
6. z-index: auto — stacking kontekstni boshqarish.
7. top: 50%; left: 50%; transform: translate(-50%, -50%) — markazlashning oltin usuli.
8. margin: 0 auto — blok elementni gorizontal markazlash.
9. aspect-ratio: 16/9 — tomonlar nisbatini belgilash.
10. container queries — konteyner o‘lchamiga qarab stilizatsiya (responsive).

---

🧪 71–80: Interaktivlik va Holatlar#

1. :hover va :focus — element ustiga kursorni olib borganda yoki fokuslanganda.
2. :active — element bosilganda (masalan, tugma).
3. :checked — checkbox yoki radio tugma belgilanganda.
4. :disabled — o‘chirilgan inputlarni stilizatsiya qilish.
5. :valid va :invalid — forma validatsiyasi holatiga qarab.
6. :target — URL dagi #id ga mos keladigan element.
7. :empty — ichida hech qanday tarkib bo‘lmagan element.
8. :focus-within — agar bola element fokusda bo‘lsa, ota elementni stilizatsiya qilish.
9. :root — global CSS o‘zgaruvchilarni e’lon qilish.
10. @media (prefers-color-scheme: dark) — qurilmaning tunga rejimiga moslashish.

---

🛠 81–90: Amaliy Qisqa Triklar#

1. accent-color — checkbox, radio va progress rangini o‘zgartirish.
2. scroll-margin-top — skroll paytida yuqoridan chekinish.
3. user-select: none — matnni tanlab olishni bloklash.
4. pointer-events: none — elementni “ko‘rinmas” qilib, uni bosish yoki hover qilishni o‘chirish.
5. caret-color — kursorni matn maydonida rangini o‘zgartirish.
6. resize: none — textarea o‘lchamini o‘zgartirishni bloklash.
7. overflow: hidden — ortib ketgan tarkibni yashirish.
8. visibility: hidden vs display: none — farqlari.
9. opacity: 0 — elementni shaffof qilish (lekin joyi qoladi).
10. box-sizing: border-box — hamma elementga qo‘llang (har doim foydali).

---

🚀 91–100: Ekzotik va Zamonaviy Imkoniyatlar#

1. @container — konteyner so‘rovlari (container queries).
2. @layer — CSS qatlamlarini boshqarish (spesifiklikni nazorat qilish).
3. ::marker — ro‘yxat markerlari stilini o‘zgartirish.
4. ::selection — matn tanlangandagi fon va rang.
5. scroll-snap-type — skrollni “tortib” qo‘yish effekti.
6. color-scheme — brauzerga qaysi rang sxemasini qo‘llab-quvvatlashni aytish.
7. math-style: compact — matematik formulalarni ixcham ko‘rsatish.
8. hanging-punctuation — tinish belgilarini chetga chiqarib qo‘yish.
9. line-clamp — matnni ma’lum qatorlardan keyin kesish.
10. @property bilan registerProperty() — CSS o‘zgaruvchilarni tip bilan ro‘yxatdan o‘tkazish.

---

🎁 Xulosa#

Ushbu 100 ta trik sizning HTML va CSS mahoratingizni ancha oshiradi. Ularni loyihalaringizda sinab ko‘ring va qaysi biri siz uchun eng foydali bo‘lganini izohlarda yozib qoldiring! Agar siz ham o‘zingiz bilgan qiziqarli triklarni bo‘lishsangiz, men juda xursand bo‘laman. 😊

---

📌 Eslatma: Har bir trikni brauzerda sinab ko‘ring, chunki ba’zilari eski brauzerlarda ishlamasligi mumkin. Zamonaviy brauzerlardan foydalanish tavsiya etiladi.

---

🔗 Postni do‘stlaringizga ulashing va ular ham bu foydali triklardan bahramand bo‘lsin!

#HTML #CSS #WebDevelopment #Frontend #Tricks