CSS @supports qoidasini o'zlashtirish: Zamonaviy veb-dizayn uchun funksiyalarni aniqlash

Doimiy rivojlanib borayotgan veb-dasturlash sohasida brauzerlararo muvofiqlikni ta'minlash va qo'llab-quvvatlanmaydigan funksiyalarni to'g'ri boshqarish juda muhimdir. CSS @supports qoidasi funksiyalarni aniqlash uchun kuchli mexanizmni taqdim etadi, bu esa dasturchilarga ma'lum bir funksiyaning brauzer tomonidan qo'llab-quvvatlanishiga qarab CSS uslublarini shartli ravishda qo'llash imkonini beradi. Ushbu blog posti @supports qoidasining nozikliklariga chuqur kirib boradi, uning sintaksisi, imkoniyatlari va mustahkam hamda kelajakka mo'ljallangan veb-dizaynlar yaratish uchun amaliy qo'llanilishini o'rganadi.

CSS @supports nima?

@supports qoidasi, shuningdek, CSS qo'llab-quvvatlash selektori sifatida ham tanilgan, bu brauzerning ma'lum bir CSS funksiyasini yoki funksiyalar kombinatsiyasini qo'llab-quvvatlashini tekshirish imkonini beruvchi shartli at-qoidadir. U shartni baholaydi va faqat shart to'g'ri bo'lgandagina qoida ichida belgilangan uslublarni qo'llaydi. Bu sizga yangi CSS funksiyalarini qo'llab-quvvatlaydigan brauzerlar uchun veb-saytingizning ko'rinishi va funksionalligini progressiv ravishda yaxshilash, shu bilan birga eski brauzerlar uchun zaxira yechimlar taqdim etish imkonini beradi.

Buni CSS uchun "if" operatori deb o'ylang. JavaScript o'zgaruvchilarini tekshirish o'rniga, siz to'g'ridan-to'g'ri CSS imkoniyatini tekshirasiz.

@supports Sintaksisi

@supports qoidasining asosiy sintaksisi quyidagicha:

            @supports (shart) {
  /* Agar shart to'g'ri bo'lsa, qo'llaniladigan CSS qoidalari */
}

            

              
                Copy
              
            
          

shart oddiy CSS xususiyat-qiymat juftligi yoki mantiqiy operatorlardan foydalanadigan murakkabroq ibora bo'lishi mumkin.

Asosiy misollar: Yagona CSS funksiyalarini aniqlash

Keling, display: grid xususiyatini qo'llab-quvvatlashni aniqlashning oddiy misolidan boshlaymiz:

            @supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
  }
}

            

              
                Copy
              
            
          

Ushbu misolda, agar brauzer display: grid-ni qo'llab-quvvatlasa, @supports qoidasi ichidagi uslublar .container elementiga qo'llaniladi va grid maketini yaratadi. grid-ni qo'llab-quvvatlamaydigan brauzerlar uslublarni shunchaki e'tiborsiz qoldiradi va kontent an'anaviyroq blokli maketda ko'rsatilishi mumkin.

Yana bir misol, yopishqoq sarlavhalar yoki yon panellarni yaratish uchun foydali bo'lgan position: sticky-ni qo'llab-quvvatlashni aniqlash:

            @supports (position: sticky) {
  .sticky-element {
    position: sticky;
    top: 0;
    background-color: white; /* Yaxshiroq ko'rinish uchun */
    z-index: 10;
  }
}

            

              
                Copy
              
            
          

Murakkab so'rovlar: Shartlarni mantiqiy operatorlar bilan birlashtirish

@supports qoidasi and, or va not kabi mantiqiy operatorlardan foydalanib shartlarni birlashtirganingizda yanada kuchliroq bo'ladi.

"and" Operatori

and operatori @supports qoidasining qo'llanilishi uchun uning har ikki tarafidagi shartlarning ikkalasi ham to'g'ri bo'lishini talab qiladi. Masalan:

            @supports (display: flex) and (backdrop-filter: blur(10px)) {
  .element {
    display: flex;
    backdrop-filter: blur(10px);
  }
}

            

              
                Copy
              
            
          

Ushbu qoida faqat brauzer ham display: flex, ham backdrop-filter: blur(10px)-ni qo'llab-quvvatlasagina qo'llaniladi. Agar ulardan biri qo'llab-quvvatlanmasa, qoidalar qo'llanilmaydi.

"or" Operatori

or operatori @supports qoidasining qo'llanilishi uchun uning har ikki tarafidagi shartlardan kamida bittasi to'g'ri bo'lishini talab qiladi. Turli vendor prefikslarini tekshirishni ko'rib chiqing:

            @supports ((--webkit-mask-image: url(image.png)) or (mask-image: url(image.png))) {
  .masked-element {
    -webkit-mask-image: url(image.png);
    mask-image: url(image.png);
  }
}

            

              
                Copy
              
            
          

Ushbu misol -webkit-mask-image (eski Safari va Chrome versiyalari uchun) yoki standart mask-image xususiyatini tekshiradi. Agar ulardan biri qo'llab-quvvatlansa, maskalash uslubi qo'llaniladi.

"not" Operatori

not operatori o'zidan keyingi shartni inkor etadi. U faqat shart noto'g'ri bo'lganda to'g'ri deb baholanadi. Bu, ayniqsa, ma'lum bir funksiyani qo'llab-quvvatla*maydigan* brauzerlar uchun zaxira yechimlar taqdim etishda foydalidir.

            @supports not (display: grid) {
  .container {
    /* Grid-ni qo'llab-quvvatlamaydigan brauzerlar uchun zaxira uslublar */
    float: left;
    width: 33.33%; /* Zaxira maket misoli */
  }
}

            

              
                Copy
              
            
          

Bunday holatda, @supports not (display: grid) qoidasi ichidagi uslublar display: grid-ni qo'llab-quvvatla*maydigan* brauzerlarga qo'llaniladi. Bu hatto eski brauzerlarning ham asosiy maketga ega bo'lishini ta'minlaydi.

Amaliy misollar va qo'llash holatlari

Keling, veb-dizaynlaringizni yaxshilash uchun @supports qoidasidan qanday foydalanishning ba'zi amaliy misollarini ko'rib chiqamiz.

1. Zaxira yechimlari bilan CSS o'zgaruvchilari (maxsus xususiyatlar)ni joriy etish

CSS o'zgaruvchilari uslublarni boshqarish va dinamik mavzular yaratishning kuchli usulini taklif qiladi. Biroq, eski brauzerlar ularni qo'llab-quvvatlamaydi. Zaxira yechimlar taqdim etish uchun biz @supports-dan foydalanishimiz mumkin:

            /* Standart uslublar (CSS o'zgaruvchilarisiz brauzerlar uchun) */
body {
  background-color: #f0f0f0;
  color: #333;
}

@supports ( --custom-property: true ) {
  body {
    background-color: var(--background-color, #f0f0f0); /* Agar o'zgaruvchi aniqlanmagan bo'lsa, zaxira yechim */
    color: var(--text-color, #333);
  }
}

            

              
                Copy
              
            
          

Bu yerda biz avval CSS o'zgaruvchilarini qo'llab-quvvatlamaydigan brauzerlar uchun standart uslublarni aniqlaymiz. Keyin, @supports qoidasi ichida, agar ular qo'llab-quvvatlansa, CSS o'zgaruvchilarini qo'llash uchun var()-dan foydalanamiz. `var()`-ning ikkinchi argumenti - bu maxsus xususiyat aniqlanmagan taqdirda ishlatiladigan zaxira qiymat. Bu qo'llab-quvvatlaydigan brauzerlarda potentsial aniqlanmagan CSS o'zgaruvchilarini boshqarishning mustahkam usulidir.

2. Font-Display yordamida tipografiyani yaxshilash

font-display xususiyati shriftlar yuklanayotganda qanday ko'rsatilishini nazorat qiladi. U ko'pchilik zamonaviy brauzerlar tomonidan qo'llab-quvvatlanadi, lekin eski brauzerlar uni tanimasligi mumkin. Zaxira yechim taqdim etgan holda tipografiyani yaxshilash uchun @supports-dan qanday foydalanish mumkin:

            @font-face {
  font-family: 'MyCustomFont';
  src: url('my-custom-font.woff2') format('woff2'),
       url('my-custom-font.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* Standart uslublar */
body {
  font-family: 'MyCustomFont', sans-serif;
}

@supports (font-display: swap) {
  @font-face {
    font-family: 'MyCustomFont';
    src: url('my-custom-font.woff2') format('woff2'),
         url('my-custom-font.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Zamonaviy brauzerlar uchun swap-dan foydalanish */
  }
}

            

              
                Copy
              
            
          

Ushbu misolda biz font-face-ni aniqlab, uni body-ga qo'llaymiz. Keyin @supports qoidasi font-display: swap-ni qo'llab-quvvatlashini tekshiradi. Agar qo'llab-quvvatlansa, u font-face-ni font-display: swap bilan qayta aniqlaydi va brauzerga maxsus shrift yuklanguniga qadar zaxira matnni ko'rsatishni buyuradi. font-display-ni qo'llab-quvvatlamaydigan brauzerlar shunchaki maxsus shriftni yuklanganda, almashtirish harakatisiz ishlatadi.

3. Forma elementlarini Appearance bilan uslublash

appearance xususiyati forma elementlarining tabiiy ko'rinishini boshqarish imkonini beradi. Biroq, uning qo'llab-quvvatlanishi brauzerlar bo'ylab farq qilishi mumkin. Mavjud bo'lgan joylarda tabiiy ko'rinishlardan foydalangan holda izchil uslublashni ta'minlash uchun @supports-dan foydalanishingiz mumkin:

            /* Eski brauzerlar uchun standart uslublar */
input[type="checkbox"] {
  /* Maxsus katakcha uslubi */
  width: 20px;
  height: 20px;
  border: 1px solid #ccc;
  /* ... boshqa maxsus uslublar ... */
}

@supports (appearance: none) or (-webkit-appearance: none) {
  input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    /* Zamonaviy brauzerlar uchun yaxshilangan uslub */
    width: 20px;
    height: 20px;
    border: 1px solid #ccc;
    background-color: white;
    position: relative;
    cursor: pointer;
  }

  input[type="checkbox"]:checked::before {
    content: "\2713"; /* Tasdiqlash belgisi */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    color: green;
  }
}

            

              
                Copy
              
            
          

Ushbu misol avval appearance xususiyatini qo'llab-quvvatlamaydigan brauzerlar uchun katakchalarga maxsus uslub beradi. Keyin, @supports qoidasi ichida, u appearance xususiyatini none-ga qaytaradi va vizual jozibador katakcha yaratish uchun pseudo-elementlardan foydalangan holda yaxshilangan uslublarni qo'llaydi. Bu turli brauzerlarda izchil ko'rinishni ta'minlaydi va imkoniyat bo'lganda tabiiy ko'rinishlardan foydalanadi.

4. Zaxira yechimlari bilan CSS shakllaridan foydalanish

CSS shakllari kontent oqib o'tishi mumkin bo'lgan shakllarni aniqlash orqali to'rtburchak bo'lmagan maketlarni yaratish imkonini beradi. Biroq, brauzer tomonidan qo'llab-quvvatlash universal emas. @supports sizga silliq degradatsiyani amalga oshirishga imkon beradi.

            .container {
  width: 400px;
  height: 300px;
  position: relative;
}

.shaped-element {
  width: 200px;
  height: 200px;
  float: left; /* CSS shakllarisiz brauzerlar uchun zaxira yechim */
  margin-right: 20px;
}

@supports (shape-outside: circle(50%)) {
  .shaped-element {
    float: none; /* float-ni olib tashlash */
    shape-outside: circle(50%);
    width: 200px;
    height: 200px;
    margin-right: 20px;
  }
}

            

              
                Copy
              
            
          

Bu yerda biz float: left-ni zaxira yechim sifatida ishlatamiz. CSS shakllarini qo'llab-quvvatlamaydigan brauzerlar shunchaki .shaped-element-ni chapga siljitadi. shape-outside-ni qo'llab-quvvatlaydigan brauzerlarda float olib tashlanadi va shakl qo'llaniladi, bu esa matnning doira atrofida oqishiga imkon beradi.

5. Rasmlarni boshqarish uchun `object-fit`-dan foydalanish

object-fit xususiyati rasmlarning o'lchami qanday o'zgartirilishi va ularning konteynerlariga qanday moslashishini nazorat qilish uchun juda foydalidir. Biroq, qo'llab-quvvatlanmasligi zaxira yechimlarni talab qiladi.

            .image-container {
  width: 200px;
  height: 150px;
  overflow: hidden; /* Rasmning toshib ketmasligini ta'minlash */
}

.image-container img {
  width: 100%;
  height: auto; /* Tomonlar nisbatini saqlash */
}

@supports (object-fit: cover) {
  .image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Konteynerni to'ldirish uchun rasmni kesish */
    object-position: center; /* Kesilgan qismni markazlashtirish */
  }
}

            

              
                Copy
              
            
          

Standart uslublar rasmning konteyner ichida o'z tomonlar nisbatini saqlashini ta'minlaydi. Keyin @supports qoidasi rasmni konteynerni to'liq to'ldirish uchun kesish uchun object-fit: cover-ni qo'llaydi va object-position: center kesilgan qismni markazlashtiradi, natijada turli brauzerlarda izchil va vizual jozibador rasm ko'rinishi hosil bo'ladi.

@supports-dan foydalanishning eng yaxshi amaliyotlari

@supports qoidasidan samarali foydalanish uchun quyidagi eng yaxshi amaliyotlarni hisobga oling:

• Progressiv yaxshilash: @supports-dan ilg'or funksiyalarni qo'llab-quvvatlaydigan brauzerlar uchun foydalanuvchi tajribasini yaxshilash uchun foydalaning, shu bilan birga eski brauzerlar uchun funksional asosni ta'minlang.
• Maxsuslik: @supports-dan foydalanganda CSS maxsusligiga e'tibor bering. @supports qoidasi ichidagi uslublar har qanday ziddiyatli uslublarni bekor qilish uchun tegishli maxsuslikka ega ekanligiga ishonch hosil qiling.
• Sinovdan o'tkazish: @supports qoidalari kutilganidek ishlayotganiga ishonch hosil qilish uchun veb-saytingizni turli brauzerlar va qurilmalarda sinchkovlik bilan sinab ko'ring. Qo'llanilgan uslublarni tekshirish va har qanday muvofiqlik muammolarini aniqlash uchun brauzer dasturchi vositalaridan foydalaning.
• Vendor prefikslari: Vendor prefiksli xususiyatlarni tekshirayotganda, turli vendor prefikslarini qamrab olish uchun or operatoridan foydalaning. Masalan: @supports ((-webkit-transform: rotate(45deg)) or (transform: rotate(45deg))).
• O'qish uchun qulaylik: @supports qoidalaringizni o'qish uchun qulay formatda yozing. Har bir qoidaning maqsadini tushuntirish uchun to'g'ri chekinishlar va izohlardan foydalaning.
• Haddan tashqari foydalanishdan saqlaning: @supports kuchli bo'lsa-da, uni haddan tashqari ishlatishdan saqlaning. @supports-dan ortiqcha foydalanish sizning CSS-ingizni murakkablashtirishi va uni saqlashni qiyinlashtirishi mumkin. Uni ma'lum muvofiqlik muammolarini hal qilish yoki ma'lum funksiyalarni yaxshilash uchun strategik ravishda ishlating.

Zaxira yechimlarining ahamiyati

Zaxira yechimlarini taqdim etish @supports-dan foydalanishning muhim jihatidir. Bu yangi CSS funksiyalarini qo'llab-quvvatlashidan qat'i nazar, keng doiradagi brauzerlarda izchil foydalanuvchi tajribasini ta'minlaydi. Yaxshi ishlab chiqilgan zaxira yechimi quyidagicha bo'lishi kerak:

• Funksional bo'lishi: Zaxira yechimi, yaxshilangan versiya kabi vizual jozibador ko'rinmasa ham, funksiyaning asosiy funksionalligini ta'minlashi kerak.
• Kirish imkoniyati bo'lishi: Zaxira yechimi barcha foydalanuvchilar, shu jumladan nogironligi bo'lgan shaxslar uchun ham ochiq bo'lishi kerak.
• Qo'llab-quvvatlanadigan bo'lishi: Zaxira yechimini saqlash va yangilash oson bo'lishi kerak.

Masalan, agar siz grid maketidan foydalanayotgan bo'lsangiz, zaxira yechim asosiy maket yaratish uchun float yoki inline-bloklardan foydalanishni o'z ichiga olishi mumkin. Agar siz CSS o'zgaruvchilaridan foydalanayotgan bo'lsangiz, ranglar va shriftlar uchun standart qiymatlarni taqdim etishingiz mumkin.

Brauzer mosligi masalalari

@supports qoidasi zamonaviy brauzerlar tomonidan keng qo'llab-quvvatlansa-da, ba'zi muvofiqlik masalalaridan xabardor bo'lish muhim:

• Eski brauzerlar: Juda eski brauzerlar @supports qoidasini umuman qo'llab-quvvatlamasligi mumkin. Bunday hollarda, @supports qoidasi ichidagi barcha uslublar e'tiborsiz qoldiriladi. Ushbu brauzerlar uchun yetarli zaxira yechimlarini taqdim etish juda muhim.
• Internet Explorer: Internet Explorer-ning eski versiyalari CSS funksiyalari uchun cheklangan qo'llab-quvvatlashga ega. Zaxira yechimlari to'g'ri ishlayotganiga ishonch hosil qilish uchun veb-saytingizni har doim Internet Explorer-da sinab ko'ring. Agar kerak bo'lsa, IE-ga xos tuzatishlar uchun shartli izohlardan foydalanishni o'ylab ko'ring (garchi bu odatda funksiyalarni aniqlash foydasiga tavsiya etilmasa ham).
• Mobil brauzerlar: Mobil brauzerlar odatda @supports-ni yaxshi qo'llab-quvvatlaydi. Biroq, izchil foydalanuvchi tajribasini ta'minlash uchun veb-saytingizni turli mobil qurilmalar va ekran o'lchamlarida sinab ko'rish hali ham muhim.

CSS funksiyalari va @supports qoidasining o'zi uchun maxsus brauzer qo'llab-quvvatlashini tekshirish uchun Can I use... kabi manbalarga murojaat qiling.

Kirish imkoniyati masalalari

@supports-dan foydalanganda, veb-saytingiz qobiliyatidan qat'i nazar, hamma uchun foydalanishga yaroqli bo'lishini ta'minlash uchun kirish imkoniyatini hisobga olish juda muhimdir. Mana ba'zi kirish imkoniyati masalalari:

• Semantik HTML: Kontentingizga aniq tuzilma va ma'no berish uchun semantik HTML elementlaridan foydalaning. Bu yordamchi texnologiyalarga veb-saytingizni to'g'ri tushunish va izohlashga yordam beradi.
• ARIA atributlari: Elementlaringizning rollari, holatlari va xususiyatlari haqida qo'shimcha ma'lumot berish uchun ARIA atributlaridan foydalaning. Bu dinamik kontent va maxsus vidjetlarning kirish imkoniyatini yaxshilashi mumkin.
• Klaviatura navigatsiyasi: Veb-saytingizdagi barcha interaktiv elementlarga klaviatura orqali kirish mumkinligiga ishonch hosil qiling. Fokus tartibini boshqarish uchun tabindex atributidan foydalaning va qaysi element hozirda fokusda ekanligini ko'rsatish uchun vizual ishoralarni taqdim eting.
• Rang kontrasti: Veb-saytingizdagi matn va fon ranglari o'rtasida yetarli rang kontrasti mavjudligiga ishonch hosil qiling. Bu ko'rish qobiliyati zaif foydalanuvchilarga kontentingizni o'qishni osonlashtiradi.
• Yordamchi texnologiyalar bilan sinovdan o'tkazish: Veb-saytingiz nogironligi bo'lgan foydalanuvchilar uchun ochiq ekanligiga ishonch hosil qilish uchun uni ekran o'quvchilari kabi yordamchi texnologiyalar bilan sinab ko'ring.

Asosiy funksiyalarni aniqlashdan tashqari: Maxsus qiymatlarni tekshirish

Ko'pgina misollar xususiyatni qo'llab-quvvatlashni tekshirishga qaratilgan bo'lsa-da, @supports *maxsus* qiymatlarni ham tekshirishi mumkin.

            @supports (transform-origin: 50% 50%) {
  .element {
    transform-origin: 50% 50%;
  }
}

            

              
                Copy
              
            
          

Bu ortiqcha tuyulishi mumkin, ammo murakkabroq qiymatlarni qo'llab-quvvatlashni tekshirishda foydalidir. Masalan:

            @supports (display: contents) {
  .element {
    display: contents;
  }
}

            

              
                Copy
              
            
          

Ushbu misol display xususiyati uchun `contents` qiymatini qo'llab-quvvatlashini tekshiradi. display o'zi keng qo'llab-quvvatlansa-da, display: contents yangiroq qo'shimcha bo'lib, bu sizga zaxira yechim taqdim etish imkonini beradi.

Funksiyalarni aniqlashning kelajagi

@supports qoidasi zamonaviy veb-dasturlashning tamal toshidir, bu dasturchilarga eski brauzerlar bilan muvofiqlikni saqlagan holda yangi CSS funksiyalarini qabul qilish imkonini beradi. CSS rivojlanishda davom etar ekan, @supports qoidasi mustahkam, moslashuvchan va kelajakka mo'ljallangan veb-dizaynlar yaratish uchun muhim vosita bo'lib qoladi. PostCSS va Babel kabi vositalar bilan birgalikda u eng yangi funksiyalar va keng tarqalgan brauzer tomonidan qabul qilinishi o'rtasidagi bo'shliqni bartaraf etishga yordam beradi.

Xulosa

CSS @supports qoidasi zamonaviy, mustahkam va brauzerlararo mos keladigan veb-saytlar yaratishga intilayotgan har qanday veb-dasturchi uchun bebaho vositadir. Uning sintaksisi, imkoniyatlari va eng yaxshi amaliyotlarini tushunib, siz dizaynlaringizni progressiv ravishda yaxshilash, zaxira yechimlarini taqdim etish va keng doiradagi brauzerlar va qurilmalarda izchil foydalanuvchi tajribasini ta'minlash uchun @supports-dan foydalanishingiz mumkin. Funksiyalarni aniqlash kuchini qabul qiling va veb-dasturlash mahoratingizni keyingi bosqichga ko'taring. Butun dunyo bo'ylab odamlar tomonidan ishlatiladigan turli xil veb-brauzerlarga xizmat ko'rsatish uchun sinchkovlik bilan sinovdan o'tkazishni va puxta o'ylangan zaxira yechimlarini taqdim etishni unutmang.