CSS @supports qoidasi: Xususiyatlarni aniqlash bo'yicha keng qamrovli qo'llanma

Veb-ishlab chiqishning doimiy rivojlanib borayotgan tendensiyalarida, brauzerlararo moslikni ta'minlash va izchil foydalanuvchi tajribasini taqdim etish sezilarli qiyinchilik tug'dirishi mumkin. Turli brauzerlar turli CSS xususiyatlarini qo'llab-quvvatlaydi va universal ravishda mavjud bo'lmagan xususiyatlarga tayanib, buzilgan tartiblar va hafsalasi pir bo'lgan foydalanuvchilarga olib kelishi mumkin. CSS @supports qoidasi xususiyatlarni aniqlash uchun kuchli mexanizmni taqdim etadi, bu sizga foydalanuvchining brauzeri tomonidan ma'lum bir xususiyat qo'llab-quvvatlanishiga qarab CSS uslublarini shartli ravishda qo'llashga imkon beradi.

CSS @supports qoidasi nima?

@supports qoidasi - bu CSS-da shartli qoida bo'lib, brauzer ma'lum bir CSS xususiyatini qo'llab-quvvatlayaptimi, yo'qmi, tekshirishga imkon beradi. Aslida, u CSS uchun if bayoni sifatida harakat qiladi, ma'lum bir xususiyatning mavjudligiga asoslangan holda turli xil uslublarni yozishga imkon beradi. Bu progressiv yaxshilashga imkon beradi, bu erda siz yangi CSS xususiyatlarini ularni qo'llab-quvvatlaydigan brauzerlarda ishlatishingiz va eski brauzerlar uchun tushish imkoniyatini taqdim etishingiz mumkin.

Brauzerning hidlanishidan (brauzer nomi va versiyasini aniqlash) farqli o'laroq, bu ishonchsizlik va texnik xizmat ko'rsatish xarajatlari tufayli odatda tavsiya etilmaydi, @supports xususiyatlarni aniqlashga qaratilgan. Bu sizning brauzeringiz brauzerning nomi yoki versiyasidan qat'iy nazar, aslida ma'lum bir CSS mulki yoki qiymatini qo'llab-quvvatlayaptimi, yo'qmi, tekshirishni anglatadi. Ushbu yondashuv ancha mustahkam va kelajakka mo'ljallangan.

@supports qoidasining sintaksisi

@supports qoidasining sintaksisi oddiy:

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

@supports not (condition) {
  /* Agar shart bajarilmasa, qo'llash uchun CSS qoidalari */
}

            

              
                Copy
              
            
          

• @supports: Qoidani boshlaydigan kalit so'z.
• (condition): Sinovdan o'tkaziladigan shart. Bu odatda CSS mulk-qiymat jufti yoki yanada murakkab mantiqiy ifoda.
• {}: Figurali qavslar shart bajarilgan taqdirda qo'llaniladigan CSS qoidalarini o'z ichiga oladi.
• not: Shartni inkor qiladigan ixtiyoriy kalit so'z. Ushbu blokdagi CSS qoidalari shart bajarilmagan taqdirda qo'llaniladi.

@supports ning asosiy misollari

@supports qoidasi qanday ishlashini ko'rsatish uchun bir nechta oddiy misollarni ko'rib chiqaylik.

display: grid qo'llab-quvvatlashini tekshirish

CSS Grid Layout kuchli tartib tizimidir, lekin u barcha eski brauzerlar tomonidan qo'llab-quvvatlanmaydi. Gridni qo'llab-quvvatlamaydigan brauzerlar uchun tushish tartibini taqdim etish uchun @supports dan foydalanishingiz mumkin.

            .container {
  display: flex; /* Eski brauzerlar uchun tushish */
  flex-wrap: wrap;
}

@supports (display: grid) {
  .container {
    display: grid; /* Uni qo'llab-quvvatlaydigan brauzerlarda Grid Layout dan foydalaning */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1em;
  }
}

            

              
                Copy
              
            
          

Ushbu misolda, display: grid ni qo'llab-quvvatlamaydigan brauzerlar flexbox tartibidan foydalanadi, qo'llab-quvvatlaydigan brauzerlar esa grid tartibidan foydalanadi.

position: sticky qo'llab-quvvatlashini tekshirish

position: sticky elementga position: relative kabi ma'lum bir chegaraga yetguncha, bu nuqtada position: fixed ga aylanishiga imkon beradi. Bu yopishqoq sarlavhalar yoki yon panellar yaratish uchun foydalidir.

            .sticky-header {
  position: relative; /* Eski brauzerlar uchun tushish */
}

@supports (position: sticky) {
  .sticky-header {
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 10;
  }
}

            

              
                Copy
              
            
          

Bu yerda position: sticky ni qo'llab-quvvatlamaydigan brauzerlar oddiygina nisbatan joylashtirilgan sarlavhaga ega bo'ladi, qo'llab-quvvatlovchi brauzerlar esa yopishqoq sarlavha effektini oladi.

not kalit so'zidan foydalanish

not kalit so'zi sizga xususiyat qo'llab-quvvatlanmaganda uslublarni qo'llashga imkon beradi.

            .element {
  background-color: lightblue;
}

@supports not (backdrop-filter: blur(5px)) {
  .element {
    background-color: rgba(173, 216, 230, 0.8); /* backdrop-filter ni qo'llab-quvvatlamaydigan brauzerlar uchun tushish */
  }
}

            

              
                Copy
              
            
          

Ushbu holatda, agar brauzer backdrop-filter xususiyatini qo'llab-quvvatlamasa, element xiralashtirilgan fon o'rniga yarim shaffof och ko'k fondan foydalanadi.

Mantiqiy operatorlar bilan murakkab shartlar

@supports qoidasi sizga mantiqiy operatorlardan foydalanib bir nechta shartlarni birlashtirishga imkon beradi: and, or.

and operatoridan foydalanish

and operatori uslublar qo'llanilishi uchun ikkala shart ham to'g'ri bo'lishini talab qiladi.

            @supports (display: flex) and (align-items: center) {
  .container {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

            

              
                Copy
              
            
          

Ushbu misol flexbox uslublarini faqat brauzer display: flex va align-items: center ni qo'llab-quvvatlasa qo'llaydi.

or operatoridan foydalanish

or operatori uslublar qo'llanilishi uchun kamida bitta shart to'g'ri bo'lishini talab qiladi.

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

            

              
                Copy
              
            
          

Bu yerda, agar brauzer prefiksli -webkit-mask-image yoki standart mask-image xususiyatini qo'llab-quvvatlasa, uslublar qo'llaniladi. Bu sotuvchi prefikslarini boshqarish uchun foydalidir.

not ni mantiqiy operatorlar bilan birlashtirish

Siz not ni and va or bilan murakkab shartlar uchun birlashtirishingiz mumkin.

            @supports not ((transform-origin: 50% 50%) and (perspective: 500px)) {
  .element {
    /* Agar transform-origin yoki perspektiv qo'llab-quvvatlanmasa qo'llash uchun uslublar */
    /* Bu eski brauzerlarda 3D transformatsiyalar uchun tushish bo'lishi mumkin */
  }
}

            

              
                Copy
              
            
          

@supports ning amaliy qo'llanilishi

@supports qoidasi foydalanuvchi tajribasini yaxshilash va brauzerlararo moslikni ta'minlash uchun keng ko'lamli ssenariylarda qo'llanilishi mumkin.

Tipyografiyani yaxshilash

Siz @supports ni qo'llab-quvvatlaydigan brauzerlarda font-variant-numeric yoki text-shadow kabi ilg'or tipografiya xususiyatlarini qo'llash uchun foydalanishingiz mumkin.

            p {
  font-family: sans-serif;
}

@supports (font-variant-numeric: tabular-nums) {
  p {
    font-variant-numeric: tabular-nums;
  }
}

@supports (text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5)) {
  h1 {
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
  }
}

            

              
                Copy
              
            
          

Ilg'or tartiblarni amalga oshirish

Avvalroq ko'rilganidek, @supports turli xil tartib tizimlarini boshqarish uchun juda yaxshi. Siz uni brauzer qo'llab-quvvatlashiga asoslanib flexbox, grid tartibi yoki hatto suzuvchi kabi eski texnikalar o'rtasida o'tish uchun ishlatishingiz mumkin.

            .container {
  float: left; /* Juda eski brauzerlar uchun tushish */
  width: 100%;
}

@supports (display: flex) {
  .container {
    display: flex;
    justify-content: space-between;
  }
}

@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
  }
}

            

              
                Copy
              
            
          

Vizual effektlarni qo'llash

filter, backdrop-filter va clip-path kabi zamonaviy CSS xususiyatlari ajoyib vizual effektlarni yaratish uchun ishlatilishi mumkin. Ushbu effektlar eski brauzerlarda tartibni buzmasligi uchun @supports dan foydalaning.

            .image {
  border-radius: 5px; /* Tushish */
}

@supports (clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)) {
  .image {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  }
}

@supports (backdrop-filter: blur(10px)) {
  .modal {
    backdrop-filter: blur(10px);
  }
}

            

              
                Copy
              
            
          

Sotuvchi prefikslarini boshqarish

Sotuvchi prefikslari kamroq tarqalgan bo'lsa-da, ular eski brauzer versiyalari bilan ishlashda dolzarb bo'lishi mumkin. @supports sizga kerak bo'lganda prefikslangan xususiyatlarni qo'llashga yordam beradi.

            .element {
  /* Standart xususiyat */
  user-select: none;

  /* Xususiyatni aniqlash bilan sotuvchi prefiksli xususiyatlar */
  @supports not (user-select: none) and (-webkit-user-select: none) {
    .element {
      -webkit-user-select: none; /* Eski Safari uchun */
    }
  }

  @supports not (user-select: none) and (-moz-user-select: none) {
    .element {
      -moz-user-select: none; /* Eski Firefox uchun */
    }
  }
}

            

              
                Copy
              
            
          

@supports dan foydalanish bo'yicha eng yaxshi amaliyotlar

@supports qoidasidan samarali foydalanish uchun ushbu eng yaxshi amaliyotlarni ko'rib chiqing:

• Progressiv yaxshilashga ustuvorlik bering: Barcha brauzerlarda ishlaydigan asosiy, funktsional dizayndan boshlang. Keyin, zamonaviy brauzerlar uchun yaxshilanishlarni qo'shish uchun @supports dan foydalaning.
• Oddiy saqlang: Haddan tashqari murakkab shartlardan saqlaning. Oddiy shartlarni tushunish va saqlash osonroq.
• Sinchiklab sinovdan o'tkazing: Tushish uslublari to'g'ri ishlashini va kutilgan joyda yaxshilangan uslublar qo'llanilishini ta'minlash uchun veb-saytingizni turli brauzerlarda sinab ko'ring. Brauzer sinov vositalari va haqiqiy qurilmalardan foydalaning.
• Xususiyat so'rovlaridan kamroq foydalaning: @supports kuchli bo'lsa-da, ortiqcha foydalanish CSS-ning shishishiga olib kelishi mumkin. Xususiyat haqiqatan ham zarurmi yoki shunchaki yoqimli narsami, deb o'ylab ko'ring.
• Kodingizga izoh bering: Nima uchun @supports dan foydalanayotganingizni va tushish uslublari nima uchun mo'ljallanganligini aniq hujjatlashtiring. Bu sizning kodingizni o'zingiz va boshqalar uchun tushunish va saqlashni osonlashtiradi.
• Brauzerning hidlanishidan saqlaning: JavaScriptga asoslangan brauzerning hidlanishidan foydalanish istagiga qarshilik qiling. @supports xususiyatlarni aniqlash uchun yanada ishonchli va kelajakka mo'ljallangan yechimni taqdim etadi.
• Polifillarni ko'rib chiqing: Ba'zi xususiyatlar uchun polifillar (eski brauzerlarda yo'qolgan funksionallikni ta'minlaydigan JavaScript kutubxonalari) @supports ga qaraganda yaxshiroq variant bo'lishi mumkin, ayniqsa siz barcha brauzerlarda izchil tajribaga muhtoj bo'lsangiz. Biroq, polifillning foydalarini uning ishlashga ta'siriga qarshi torting.

@supports ga alternativa

@supports CSS-da xususiyatlarni aniqlashning asosiy usuli bo'lsa-da, ko'rib chiqiladigan muqobil yondashuvlar mavjud.

Modernizr

Modernizr - HTML5 va CSS3 xususiyatlarining mavjudligini aniqlaydigan mashhur JavaScript kutubxonasidir. U <html> elementiga xususiyatni qo'llab-quvvatlashga asoslangan klasslarni qo'shadi, bu sizga CSS bilan ma'lum brauzerlarni nishonga olish imkonini beradi. Kuchli bo'lsa-da, Modernizr JavaScriptga bog'liqlik qo'shadi va sahifani yuklash vaqtini oshirishi mumkin.

JavaScript xususiyatlarini aniqlash

Siz xususiyatlarni qo'llab-quvvatlashni aniqlash va uslublarni dinamik ravishda qo'llash uchun JavaScriptdan ham foydalanishingiz mumkin. Ushbu yondashuv ko'proq moslashuvchanlikni taqdim etadi, ammo @supports yoki Modernizr dan foydalanishga qaraganda murakkabroq bo'lishi mumkin. Agar JavaScriptni bajarish uchun juda ko'p vaqt ketishi bo'lsa, bu uslubsiz kontentning miltillashiga (FOUC) olib kelishi mumkin.

Shartli izohlar (Internet Explorer uchun)

Shartli izohlar Microsoft-ga xos texnika bo'lib, Internet Explorer versiyalarini nishonga olish uchun mo'ljallangan. Ular odatda tavsiya etilmaydi, chunki ular standart CSS emas va faqat IE da ishlaydi. Biroq, ular IE xatolari yoki cheklovlarini hal qilish kerak bo'lgan kamdan-kam hollarda foydali bo'lishi mumkin. Shuni yodda tutingki, shartli izohlar IE10 va undan keyingi versiyalarda qo'llab-quvvatlanmaydi.

            <!--[if lt IE 9]>
  <link rel="stylesheet" href="ie8-and-below.css">
<![endif]-->

            

              
                Copy
              
            
          

@supports ning cheklovlari

O'zining kuchli tomonlariga qaramay, @supports ba'zi cheklovlarga ega:

• Mulkiy qiymat juftligi bilan cheklangan: Eng keng tarqalgan foydalanish holati ma'lum CSS mulk-qiymat juftlarini qo'llab-quvvatlashini tekshirishdir. Murakkab shartlar mumkin bo'lsa-da, ular qiyin bo'lib qolishi mumkin.
• Qisman qo'llab-quvvatlashni aniqlamaydi: @supports faqat xususiyat qo'llab-quvvatlanadimi yoki yo'qmi, aytib berishi mumkin. U qo'llab-quvvatlash darajasi yoki amalga oshirishning har qanday cheklovlari haqida ma'lumot bermaydi.
• Spetsifikani hisobga olish: @supports bloklarida qo'llaniladigan uslublar boshqa CSS qoidalari bilan bir xil xususiyatga ega. @supports ichidagi uslublarni bekor qilishda o'ziga xoslikni hisobga oling.
• Juda eski brauzerlarda qo'llab-quvvatlanmaydi: Juda eski brauzerlar (masalan, IE8 va undan past) @supports ni qo'llab-quvvatlamaydi. Ushbu brauzerlar uchun shartli izohlar yoki polifillar kabi muqobil usullardan foydalanishingiz kerak bo'ladi.

Xulosa

CSS @supports qoidasi zamonaviy veb-ishlab chiqish uchun zaruriy vositadir. Bu sizga yanada mustahkam va moslashuvchan CSS kodini yozishga imkon beradi, bu sizning veb-saytlaringiz keng ko'lamli brauzerlarda yaxshi foydalanuvchi tajribasini taqdim etishini ta'minlaydi. Progressiv yaxshilashni qabul qilib va @supports dan strategik foydalanib, siz eski brauzerlarni qo'llab-quvvatlagan holda va barcha foydalanuvchilar uchun izchil tajribani ta'minlagan holda, eng so'nggi CSS xususiyatlaridan foydalanishingiz mumkin. Brauzerning hidlanishiga emas, balki xususiyatlarni aniqlashga ustuvorlik berishni, sinchkovlik bilan sinab ko'rishni va kodni toza va yaxshi hujjatlashtirishni unutmang.

Veb rivojlanishda davom etar ekan, @supports kabi texnikalarni o'zlashtirish, global auditoriyaga xizmat ko'rsatadigan yuqori sifatli, kirish mumkin va kelajakka mo'ljallangan veb-saytlarni yaratish uchun tobora muhim bo'lib boradi. Shunday qilib, xususiyatlarni aniqlash kuchini qabul qiling va innovatsion va ishonchli veb-tajribalarini yarating.