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

` va `

`** — ochiladigan/yopiladigan blok yaratish uchun hech qanday JS kerak emas. 2. **`contenteditable`** — istalgan elementni tahrirlash mumkin holatga keltirish. 3. **`

`** — forma ichidagi barcha inputlarni bir vaqtda o‘chirib qo‘yish. 4. **``** — rang tanlash oynasini ochish. 5. **``** — slayder yaratish. 6. **``** — inputga avtoto‘ldirish opsiyalari qo‘shish. 7. **``** — hisoblash natijasini ko‘rsatish uchun maxsus element. 8. **``** — sahifadagi barcha nisbiy havolalar uchun asosiy URL belgilash. 9. **``** — muhim resurslarni oldindan yuklash. 10. **``** — mobil brauzer rangini o‘zgartirish. --- ## 🧩 11–20: CSS Selektori va Kombinatsiyalar 11. **`:is()`** — bir nechta selektorlarni birlashtirish (masalan, `:is(h1, h2, h3)`). 12. **`:where()`** — `:is()` ga o‘xshaydi, lekin spesifikligi 0. 13. **`:has()`** — ota elementni bola yoki qardoshiga qarab tanlash (masalan, `figure:has(img)`). 14. **`:not()`** — ma’lum elementlarni istisno qilish. 15. **`:nth-child(n of .class)`** — faqat ma’lum klassga ega bo‘lgan bolalarni sanash. 16. **`~` (tilda)** — keyingi barcha qardosh elementlarni tanlash. 17. **`+` (plyus)** — faqat birinchi qardosh elementni tanlash. 18. **`[attribute="value" i]`** — katta-kichik harf farqiga e’tibor bermaslik. 19. **`[attribute^="val"]`** — atribut qiymati berilgan so‘z bilan boshlansa. 20. **`[attribute$="val"]`** — atribut qiymati berilgan so‘z bilan tugasa. --- ## 🎯 21–30: Flexbox va Grid Sirlari 21. **`flex: 1`** vs **`flex: auto`** — farqlarini bilasizmi? 22. **`gap`** — flex va grid uchun oraliq (margin ishlatmaymiz). 23. **`grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))`** — to‘liq responsiv tarmoq. 24. **`align-content: center`** — butun flex konteynerni vertikal markazlash. 25. **`place-items: center`** — `align-items` va `justify-items` ni bir vaqtda markazlash. 26. **`order`** — element tartibini o‘zgartirish (faqat vizual). 27. **`flex-wrap: wrap-reverse`** — elementlarni teskari tartibda qatorga o‘rash. 28. **`grid-area`** — nomli tarmoq maydonlari yaratish. 29. **`subgrid`** — ota grid o‘lchamlarini bola gridga meros qilib berish. 30. **`align-self: stretch`** — alohida elementni butun maydonga cho‘zish. --- ## ✨ 31–40: Animatsiya va O‘tishlar 31. **`@keyframes`** ichida `steps()` — kadrli animatsiya (sprite uchun). 32. **`animation-fill-mode: forwards`** — animatsiya oxirgi holatda qoladi. 33. **`transition-delay`** — o‘tishni kechiktirish. 34. **`will-change`** — brauzerga o‘zgarish haqida oldindan xabar berish. 35. **`transform: translate(-50%, -50%)`** — elementni mutlaq markazlash. 36. **`perspective`** — 3D effektlar uchun chuqurlik berish. 37. **`backface-visibility: hidden`** — elementning orqa tomonini yashirish. 38. **`scroll-behavior: smooth`** — silliq skroll qilish (JS kerak emas). 39. **`@property`** — CSS o‘zgaruvchilarini animatsiya qilish. 40. **`mix-blend-mode`** — elementlarni bir-biri bilan aralashtirish (Photoshop uslubi). --- ## 🎨 41–50: Fon va Chegara (Border) Triklari 41. **`background: linear-gradient(to right, red 50%, blue 50%)`** — ikki rangli fon. 42. **`background-size: cover`** vs **`contain`** — farqlarini tushunasizmi? 43. **`border-image`** — rasm yoki gradient bilan chegara yasash. 44. **`box-shadow: inset`** — ichki soya qo‘shish. 45. **`outline-offset`** — kontur va element orasidagi masofa. 46. **`border-radius: 50%`** — doira yasash. 47. **`clip-path`** — elementni turli shakllarda kesish. 48. **`filter: blur()`** — elementni loyqalash. 49. **`backdrop-filter: blur()`** — orqa fondagi elementlarni loyqalash. 50. **`object-fit: cover`** — rasm yoki videoni konteynerga moslab kesish. --- ## 🔤 51–60: Matn va Shriftlar 51. **`text-overflow: ellipsis`** — uzun matnni “...” bilan kesish. 52. **`word-break: break-all`** — so‘zlarni istalgan joyda sindirish. 53. **`white-space: nowrap`** — matnni bir qatorda majburlash. 54. **`writing-mode: vertical-rl`** — matnni vertikal yozish. 55. **`text-shadow`** — matnga soya qo‘shish. 56. **`font-variant: small-caps`** — barcha harflarni kichik kapitallarga aylantirish. 57. **`@font-face`** — qo‘shimcha shriftlarni yuklash. 58. **`variable fonts`** — bir shrift faylida turli vazn va uslublar. 59. **`line-height: 1.5`** — qator oralig‘ini birliksiz belgilash (afzalroq). 60. **`::first-letter`** va **`::first-line`** — birinchi harf yoki qatorni stilizatsiya qilish. --- ## 📐 61–70: O‘lcham va Pozitsiya 61. **`width: calc(100% - 20px)`** — matematik ifodalar. 62. **`height: 100vh`** — ekran balandligining 100%. 63. **`min-content`** va **`max-content`** — elementni minimal/maksimal tarkibga moslash. 64. **`fit-content`** — tarkibga mos, lekin maksimal kenglik bilan cheklash. 65. **`position: sticky`** — yopishqoq element (fixed va relative orasi). 66. **`z-index: auto`** — stacking kontekstni boshqarish. 67. **`top: 50%; left: 50%; transform: translate(-50%, -50%)`** — markazlashning oltin usuli. 68. **`margin: 0 auto`** — blok elementni gorizontal markazlash. 69. **`aspect-ratio: 16/9`** — tomonlar nisbatini belgilash. 70. **`container queries`** — konteyner o‘lchamiga qarab stilizatsiya (responsive). --- ## 🧪 71–80: Interaktivlik va Holatlar 71. **`:hover`** va **`:focus`** — element ustiga kursorni olib borganda yoki fokuslanganda. 72. **`:active`** — element bosilganda (masalan, tugma). 73. **`:checked`** — checkbox yoki radio tugma belgilanganda. 74. **`:disabled`** — o‘chirilgan inputlarni stilizatsiya qilish. 75. **`:valid`** va **`:invalid`** — forma validatsiyasi holatiga qarab. 76. **`:target`** — URL dagi `#id` ga mos keladigan element. 77. **`:empty`** — ichida hech qanday tarkib bo‘lmagan element. 78. **`:focus-within`** — agar bola element fokusda bo‘lsa, ota elementni stilizatsiya qilish. 79. **`:root`** — global CSS o‘zgaruvchilarni e’lon qilish. 80. **`@media (prefers-color-scheme: dark)`** — qurilmaning tunga rejimiga moslashish. --- ## 🛠 81–90: Amaliy Qisqa Triklar 81. **`accent-color`** — checkbox, radio va progress rangini o‘zgartirish. 82. **`scroll-margin-top`** — skroll paytida yuqoridan chekinish. 83. **`user-select: none`** — matnni tanlab olishni bloklash. 84. **`pointer-events: none`** — elementni “ko‘rinmas” qilib, uni bosish yoki hover qilishni o‘chirish. 85. **`caret-color`** — kursorni matn maydonida rangini o‘zgartirish. 86. **`resize: none`** — textarea o‘lchamini o‘zgartirishni bloklash. 87. **`overflow: hidden`** — ortib ketgan tarkibni yashirish. 88. **`visibility: hidden`** vs **`display: none`** — farqlari. 89. **`opacity: 0`** — elementni shaffof qilish (lekin joyi qoladi). 90. **`box-sizing: border-box`** — hamma elementga qo‘llang (har doim foydali). --- ## 🚀 91–100: Ekzotik va Zamonaviy Imkoniyatlar 91. **`@container`** — konteyner so‘rovlari (container queries). 92. **`@layer`** — CSS qatlamlarini boshqarish (spesifiklikni nazorat qilish). 93. **`::marker`** — ro‘yxat markerlari stilini o‘zgartirish. 94. **`::selection`** — matn tanlangandagi fon va rang. 95. **`scroll-snap-type`** — skrollni “tortib” qo‘yish effekti. 96. **`color-scheme`** — brauzerga qaysi rang sxemasini qo‘llab-quvvatlashni aytish. 97. **`math-style: compact`** — matematik formulalarni ixcham ko‘rsatish. 98. **`hanging-punctuation`** — tinish belgilarini chetga chiqarib qo‘yish. 99. **`line-clamp`** — matnni ma’lum qatorlardan keyin kesish. 100. **`@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

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