CSS Zoom: Elementlarni masshtablash bo'yicha to'liq qo'llanma

Veb-ishlab chiqishda veb-sahifadagi elementlarni dinamik ravishda masshtablash qobiliyati kuchli vositadir. CSS bunga erishish uchun bir nechta mexanizmlarni taqdim etadi, ayniqsa zoom xossasi (hozirda asosan eskirgan) va transform: scale() funksiyasi. Ushbu qo'llanmada ushbu texnikalarni chuqur o'rganib, ularning qo'llanilishi, brauzer mosligi, ishlash samaradorligi va moslashuvchan dizayn uchun eng yaxshi amaliyotlarni ko'rib chiqamiz.

CSS Zoom'ni tushunish

zoom xossasi elementning tarkibini masshtablash imkonini beradi. U mohiyatan elementning barcha tarkibi hajmini berilgan koeffitsientga ko'paytiradi. Tarixan qo'llanilgan bo'lsa-da, uning cheklovlari va muqobillarini tushunish juda muhim.

Sintaksis

zoom xossasining asosiy sintaksisi:

            element {
  zoom: value;
}

            

              
                Copy
              
            
          

Bu yerda value quyidagicha bo'lishi mumkin:

• normal: Standart qiymat, zoom: 1 ga teng.
• <number>: Masshtablash koeffitsientini ifodalovchi raqamli qiymat. 1 dan katta qiymatlar elementni kattalashtiradi, 1 dan kichik qiymatlar esa uni kichraytiradi. Masalan, zoom: 2 hajmni ikki baravar oshiradi, zoom: 0.5 esa ikki baravar kamaytiradi.
• <percentage>: Masshtablash koeffitsientini ifodalovchi foizli qiymat. Masalan, zoom: 200% zoom: 2 ga teng, zoom: 50% esa zoom: 0.5 ga teng.

Misol

Bu yerda zoom xossasidan foydalanishni ko'rsatuvchi oddiy misol keltirilgan:

            <div style="zoom: 1.5;">
  Bu matn asl hajmining 150%ida ko'rsatiladi.
</div>

            

              
                Copy
              
            
          

Brauzer mosligi

zoom xossasi tarixan brauzerlar tomonidan notekis qo'llab-quvvatlangan. U Internet Explorer'ning eski versiyalarida va ba'zi boshqa brauzerlarda ishlagan bo'lsa-da, hozirda u asosan nostandart va eskirgan deb hisoblanadi. Odatda, yanada zamonaviy va keng qo'llab-quvvatlanadigan transform: scale() foydasiga zoom'dan foydalanishdan qochish tavsiya etiladi.

zoom'ning cheklovlari

zoom'dan foydalanish bir necha muammolarga olib kelishi mumkin:

• Nostandart: Nostandart xossa bo'lgani uchun uning turli brauzerlardagi harakati oldindan aytib bo'lmaydigan bo'lishi mumkin.
• Maket muammolari: Ba'zan u kutilmagan maket muammolari va render artefaktlariga sabab bo'lishi mumkin.
• Qulaylik muammolari: Faqat zoom'ga tayanish qulaylikka salbiy ta'sir ko'rsatishi mumkin, ayniqsa ekran o'quvchilari yoki boshqa yordamchi texnologiyalarga tayanadigan foydalanuvchilar uchun. Matn vizual ravishda kattalashishi mumkin, ammo asosiy HTML tuzilmasi o'zgarishsiz qoladi, bu esa yordamchi texnologiyalarni chalkashtirishi mumkin.

transform: scale() funksiyasi: Zamonaviy muqobil

transform xossasi scale() funksiyasi bilan birgalikda elementlarni masshtablashning yanada ishonchli va keng qo'llab-quvvatlanadigan usulini taqdim etadi. Bu yondashuv yaxshiroq nazoratni taklif qiladi va zoom xossasi bilan bog'liq ko'plab muammolardan qochadi.

Sintaksis

transform: scale()'dan foydalanish sintaksisi:

            element {
  transform: scale(x, y);
}

            

              
                Copy
              
            
          

Bu yerda:

• x: Gorizontal yo'nalishdagi (kenglik) masshtablash koeffitsienti.
• y: Vertikal yo'nalishdagi (balandlik) masshtablash koeffitsienti.

Agar faqat bitta qiymat berilsa, u ham x, ham y o'qlari uchun ishlatiladi, natijada bir xil masshtablash amalga oshiriladi.

Misol

Bu yerda transform: scale()'dan qanday foydalanishga oid bir nechta misollar keltirilgan:

            /* Bir xil 150% ga masshtablash */
.scale-uniform {
  transform: scale(1.5);
}

/* Kenglikni 200% va balandlikni 50% ga masshtablash */
.scale-non-uniform {
  transform: scale(2, 0.5);
}

/* 75% gacha kichraytirish */
.scale-down {
  transform: scale(0.75);
}

            

              
                Copy
              
            
          

Brauzer mosligi

transform xossasi, shu jumladan scale() funksiyasi, Chrome, Firefox, Safari, Edge va Opera kabi zamonaviy brauzerlarda a'lo darajada qo'llab-quvvatlanadi. Bu uni veb-ishlab chiqishda elementlarni masshtablash uchun ishonchli tanlovga aylantiradi.

transform: scale()'ning afzalliklari

transform: scale()'dan foydalanish zoom xossasiga nisbatan bir qancha afzalliklarni taqdim etadi:

• Standart xossa: transform standart CSS xossasi bo'lib, brauzerlarda bir xil ishlashini ta'minlaydi.
• Apparat tezlashtirish: Ko'pgina brauzerlar transformatsiyalarni apparat yordamida tezlashtirishi mumkin, bu esa silliqroq va samaraliroq masshtablashga olib keladi.
• Aniq nazorat: Siz x va y o'qlari uchun masshtablash koeffitsientini mustaqil ravishda nazorat qilishingiz mumkin, bu esa bir xil bo'lmagan masshtablash imkonini beradi.
• Boshqa transformatsiyalar bilan integratsiya: scale() murakkab vizual effektlar yaratish uchun rotate(), translate() va skew() kabi boshqa transformatsiya funksiyalari bilan birlashtirilishi mumkin.

Amaliy qo'llanilishi va misollar

Elementlarni masshtablash foydalanuvchi tajribasini yaxshilash va vizual jozibali dizaynlar yaratish uchun turli xil stsenariylarda qo'llanilishi mumkin.

Sichqoncha olib borilganda tasvirni kattalashtirish

Keng tarqalgan qo'llanilish holati - bu rasm ustiga sichqoncha olib borilganda kattalashtirish effektini ta'minlash. Bunga CSS o'tishlari (transitions) yordamida erishish mumkin:

            .image-zoom {
  width: 200px;
  height: 150px;
  overflow: hidden; /* Kattalashtirilgan rasmning o'z konteyneridan chiqib ketishini oldini oladi */
}

.image-zoom img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Rasmning konteynerni buzilishlarsiz to'ldirishini ta'minlaydi */
  transition: transform 0.3s ease;
}

.image-zoom:hover img {
  transform: scale(1.2);
}

            

              
                Copy
              
            
          

Ushbu misol foydalanuvchi rasm ustiga sichqonchani olib borganida silliq kattalashtirish effektini yaratadi. Konteynerdagi overflow: hidden xossasi kattalashtirilgan rasmning o'z chegaralaridan chiqib ketishini oldini olish uchun zarur.

Sichqoncha olib borilganda tugma effektlari

Sichqoncha olib borilganda tugmalarni masshtablash foydalanuvchiga vizual fikr-mulohaza berib, tugma interaktiv ekanligini ko'rsatishi mumkin:

            .button {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.button:hover {
  transform: scale(1.1);
}

            

              
                Copy
              
            
          

Ushbu kod parchasi foydalanuvchi tugma ustiga sichqonchani olib borganida uni asl hajmining 110% gacha kattalashtiradi.

Fokus olganda tarkibni kattalashtirish

Qulaylik maqsadida, tarkib fokus olganda (masalan, foydalanuvchi forma maydoniga tab tugmasi bilan o'tganda) uni kattalashtirishni xohlashingiz mumkin:

            input[type="text"]:focus {
  transform: scale(1.1);
  outline: none; /* Standart fokus konturini olib tashlash */
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); /* Vizual ko'rsatkich uchun nozik soya qo'shish */
}

            

              
                Copy
              
            
          

Bu misol matn kiritish maydonini fokus olganda 110% ga kattalashtirib, foydalanuvchiga vizual ishora beradi.

Masshtablash yordamida dinamik maketlar yaratish

Masshtablash mavjud bo'sh joy yoki foydalanuvchi o'zaro ta'siriga qarab elementlar hajmini o'zgartiradigan dinamik maketlar yaratish uchun ishlatilishi mumkin. Masalan, kartochkalar panjarasini ko'rib chiqing:

            .card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.card {
  background-color: #f0f0f0;
  padding: 20px;
  border-radius: 5px;
  transition: transform 0.3s ease;
}

.card:hover {
  transform: scale(1.05);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

            

              
                Copy
              
            
          

Bu sichqoncha olib borilganda biroz kattalashadigan, vizual jihatdan jozibali o'zaro ta'sirni ta'minlaydigan moslashuvchan kartochkalar panjarasini yaratadi.

Ishlash samaradorligi bo'yicha mulohazalar

transform: scale() odatda samarali bo'lsa-da, uning ishlashga potentsial ta'sirini, ayniqsa murakkab maketlarda yoki kam quvvatli qurilmalarda, yodda tutish muhimdir. Ishlashni optimallashtirish uchun ba'zi eng yaxshi amaliyotlar:

• Apparat tezlashtirishdan foydalaning: Brauzer transformatsiyalar uchun apparat tezlashtirishdan foydalanayotganiga ishonch hosil qiling. Ko'pgina zamonaviy brauzerlarda bu avtomatik tarzda sodir bo'ladi.
• Qayta joylashuv (Reflows) va qayta chizishni (Repaints) minimallashtiring: Masshtablash qayta joylashuv (maketni qayta hisoblash) va qayta chizishni (ekranni qayta chizish) keltirib chiqarishi mumkin. Bularni bir vaqtning o'zida yoki tez-tez ko'p sonli elementlarni masshtablashdan qochish orqali minimallashtiring.
• CSS o'tishlaridan (Transitions) oqilona foydalaning: O'tishlar silliq animatsiyalar yaratishi mumkin bo'lsa-da, haddan tashqari uzun yoki murakkab o'tishlar ishlashga ta'sir qilishi mumkin. Qisqa, yaxshi optimallashtirilgan o'tishlardan foydalaning.
• Turli qurilmalarda sinab ko'ring: Optimal ishlashni ta'minlash uchun masshtablash effektlaringizni har doim turli xil qurilmalar va ekran o'lchamlarida sinab ko'ring.

Qulaylik bo'yicha mulohazalar

Masshtablash effektlaridan foydalanganda, veb-saytingiz barcha foydalanuvchilar, shu jumladan nogironligi bo'lganlar uchun ham foydalanishga yaroqli bo'lishini ta'minlash uchun qulaylikni hisobga olish juda muhim.

• Matnning o'qilishi: Masshtablangan matn o'qilishi oson bo'lishini ta'minlang. Matnni o'qish qiyin bo'ladigan darajada kichraytirishdan saqlaning.
• Klaviatura navigatsiyasi: Agar siz interaktiv elementlarda masshtablashdan foydalanayotgan bo'lsangiz, ularga klaviatura orqali kirish mumkinligini ta'minlang. Element fokus olganda masshtablash effektlarini qo'llash uchun :focus psevdo-sinfidan foydalaning.
• Ekran o'quvchilari bilan moslik: Masshtablash effektlaringizni ekran o'quvchilari bilan sinab ko'rib, ularning to'g'ri talqin qilinishiga ishonch hosil qiling. Ekran o'quvchisi foydalanuvchilarini chalkashtirishi mumkin bo'lgan tarzda masshtablashdan foydalanishdan saqlaning.
• Muqobil yo'llarni taqdim eting: Agar masshtablash muhim ma'lumotni yetkazish uchun ishlatilsa, masshtablash effektini sezolmaydigan foydalanuvchilar uchun ushbu ma'lumotga kirishning muqobil usullarini taqdim eting.
• prefers-reduced-motion'ni hisobga oling: Foydalanuvchi o'z operatsion tizim sozlamalarida kamroq harakatni so'raganligini aniqlash uchun prefers-reduced-motion media so'rovidan foydalaning. Agar shunday bo'lsa, siz masshtablash animatsiyalarining intensivligini o'chirib qo'yishingiz yoki kamaytirishingiz mumkin. Bu vestibulyar buzilishlari yoki harakatga sezgirligi bo'lgan foydalanuvchilar uchun juda muhim.

            @media (prefers-reduced-motion: reduce) {
  .button:hover {
    transform: none; /* Sichqoncha olib borilganda masshtablashni o'chirish */
  }
}

            

              
                Copy
              
            
          

Moslashuvchan dizayn uchun eng yaxshi amaliyotlar

Masshtablash moslashuvchan dizaynda qimmatli vosita bo'lishi mumkin, bu sizga ekran o'lchami yoki qurilma yo'nalishiga qarab elementlar hajmini sozlash imkonini beradi. Quyida ba'zi eng yaxshi amaliyotlar keltirilgan:

• Media so'rovlardan foydalaning: Ekran o'lchamiga qarab turli xil masshtablash koeffitsientlarini qo'llash uchun media so'rovlardan foydalaning.
• Haddan tashqari masshtablashdan saqlaning: Elementlarni haddan tashqari masshtablashdan saqlaning, chunki bu vizual buzilish yoki maket muammolariga olib kelishi mumkin.
• Tarkibni hisobga oling: Ko'rsatilayotgan tarkibga mos keladigan masshtablash koeffitsientlarini tanlang. Masalan, siz rasmlarni matnga qaraganda agressivroq masshtablashni xohlashingiz mumkin.
• Puxta sinovdan o'tkazing: Moslashuvchan masshtablash effektlaringiz kutilganidek ishlashini ta'minlash uchun ularni turli xil qurilmalar va ekran o'lchamlarida sinab ko'ring.

Quyida ekran o'lchamiga qarab masshtabni sozlash uchun media so'rovlardan foydalanishga misol keltirilgan:

            .element {
  transform: scale(1);
}

@media (max-width: 768px) {
  .element {
    transform: scale(0.8);
  }
}

@media (max-width: 480px) {
  .element {
    transform: scale(0.6);
  }
}

            

              
                Copy
              
            
          

Ushbu kod parchasi elementni 768px dan kichik ekranlarda 80% gacha va 480px dan kichik ekranlarda 60% gacha kichraytiradi.

transform: scale() ni boshqa CSS xossalari bilan birlashtirish

transform xossasini yanada murakkab va qiziqarli effektlar yaratish uchun boshqa CSS xossalari bilan birlashtirish mumkin. Quyida bir nechta misollar keltirilgan:

Aylantirish va masshtablash

Siz rotate() va scale() funksiyalari yordamida elementni bir vaqtning o'zida aylantirishingiz va masshtablashingiz mumkin:

            .rotated-scaled {
  transform: rotate(45deg) scale(1.2);
}

            

              
                Copy
              
            
          

Ushbu kod parchasi elementni 45 darajaga aylantiradi va uni asl hajmining 120% gacha kattalashtiradi.

Ko'chirish va masshtablash

Siz translate() va scale() funksiyalari yordamida elementni bir vaqtning o'zida ko'chirishingiz (siljitishingiz) va masshtablashingiz mumkin:

            .translated-scaled {
  transform: translate(50px, 20px) scale(0.8);
}

            

              
                Copy
              
            
          

Ushbu kod parchasi elementni o'ngga 50px va pastga 20px siljitadi va uni asl hajmining 80% gacha kichraytiradi.

Qiyshaytirish va masshtablash

Siz skew() va scale() funksiyalari yordamida elementni bir vaqtning o'zida qiyshaytirishingiz (buzishingiz) va masshtablashingiz mumkin:

            .skewed-scaled {
  transform: skew(20deg, 10deg) scale(1.1);
}

            

              
                Copy
              
            
          

Ushbu kod parchasi elementni x o'qi bo'ylab 20 darajaga va y o'qi bo'ylab 10 darajaga qiyshaytiradi va uni asl hajmining 110% gacha kattalashtiradi.

Ilg'or texnikalar

Quyida transform: scale()'dan foydalanishning ba'zi ilg'or texnikalari keltirilgan:

Boshlang'ich nuqtani nazorat qilib masshtablash

transform-origin xossasi masshtablash amalga oshiriladigan nuqtani nazorat qilish imkonini beradi. Standart bo'yicha, masshtablash elementning markazi atrofida amalga oshiriladi. Buni transform-origin xossasini o'rnatish orqali o'zgartirishingiz mumkin.

            .scale-from-top-left {
  transform-origin: top left;
  transform: scale(1.2);
}

            

              
                Copy
              
            
          

Ushbu kod parchasi elementni uning yuqori chap burchagidan masshtablaydi.

3D masshtablash

scale3d() funksiyasi elementni uch o'lchamda masshtablash imkonini beradi. Bu yanada murakkab va vizual jihatdan qiziqarli effektlar yaratish uchun ishlatilishi mumkin.

            .scale-3d {
  transform: scale3d(1.2, 0.8, 1);
}

            

              
                Copy
              
            
          

Ushbu kod parchasi elementni x o'qi bo'ylab 120%, y o'qi bo'ylab 80% va z o'qi bo'ylab 100% ga masshtablaydi.

Keyfreymlar yordamida masshtabni animatsiya qilish

Siz CSS keyfreymlari yordamida murakkab masshtablash animatsiyalarini yaratishingiz mumkin.

            @keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.pulse {
  animation: pulse 2s infinite;
}

            

              
                Copy
              
            
          

Ushbu kod parchasi elementni qayta-qayta kattalashtirib va kichraytirib, pulsatsiyalanuvchi animatsiya yaratadi.

Xulosa

transform: scale() funksiyasi veb-ishlab chiqishda elementlarni masshtablash uchun kuchli va ko'p qirrali vositadir. Uning sintaksisi, brauzer mosligi, ishlash samaradorligi va qulaylikka ta'sirini tushunib, siz undan foydalanuvchi tajribasini yaxshilash va vizual jozibali dizaynlar yaratish uchun samarali foydalanishingiz mumkin. zoom xossasi tarixiy ahamiyatga ega bo'lsa-da, undan yanada zamonaviy va ishonchli transform: scale() foydasiga voz kechish yaxshiroqdir. Joylashuvi yoki qurilmasidan qat'i nazar, barcha foydalanuvchilar uchun optimal natijalarni ta'minlash uchun masshtablash effektlaringizni har doim turli xil qurilmalar va ekran o'lchamlarida sinab ko'rishni unutmang.