CSS'ning yangi imkoniyatlari: @function qoidasiga chuqur nazar

Ko'p yillar davomida CSS veb-uslublarining asosi bo'lib, ranglar va shriftlar uchun oddiy tildan murakkab maketlar va animatsiyalarga qodir bo'lgan mukammal tizimga aylandi. Biroq, veb-ilovalar murakkablashgani sari, ishlab chiquvchilar o'zgaruvchilar, miksinlar va eng muhimi, funksiyalar kabi dasturlashga o'xshash mantiqni joriy etish uchun ko'pincha Sass va Less kabi preprotsessorlarga murojaat qilishdi. Ushbu vositalar muhim bo'shliqni to'ldirib, yanada qulay, kengaytiriladigan va DRY (Don't Repeat Yourself - O'zingizni Takrorlamang) uslublar jadvallarini yaratishga imkon berdi. Ammo CSS buni o'zida qila olsa-chi? Sahnaga CSS @function qoidasi chiqadi.

@function at-qoidasi CSS yozish uslubimizni inqilob qilishga qodir istiqbolli taklifdir. Bu ishlab chiquvchilarga brauzerning uslub va maket mexanizmiga past darajadagi kirishni ta'minlash uchun mo'ljallangan API'lar to'plami bo'lgan kengroq CSS Houdini tashabbusining bir qismidir. @function yordamida qayta ishlatiladigan, parametrga asoslangan funksiyalarni to'g'ridan-to'g'ri .css fayli ichida aniqlash orzusi haqiqatga aylanmoqda, bu esa ko'plab umumiy vazifalar uchun tashqi yig'ish vositalariga bog'liqligimizni kamaytirishi mumkin.

Ushbu keng qamrovli qo'llanmada biz CSS @function qoidasini boshidan oxirigacha o'rganamiz. Biz uning sintaksisini ko'rib chiqamiz, parametrlarni qanday aniqlashni tushunamiz, amaliy qo'llash holatlarini o'rganamiz va uning hozirgi holati hamda butun dunyo bo'ylab veb-ishlab chiqish uchun kelajakdagi oqibatlarini muhokama qilamiz.

CSS @function qoidasi nima?

Mohiyatan, CSS @function at-qoidasi ishlab chiquvchilarga o'z uslublar jadvali davomida chaqirilishi mumkin bo'lgan maxsus funksiyani aniqlash imkonini beradi. Statik qiymatlarni saqlaydigan CSS Maxsus Xususiyatlaridan (o'zgaruvchilardan) farqli o'laroq, maxsus funksiya kirish parametrlarini qabul qilishi, hisob-kitoblar yoki manipulyatsiyalarni amalga oshirishi va dinamik qiymatni qaytarishi mumkin.

Buni quyidagicha tasavvur qiling:

• CSS Maxsus Xususiyati (Custom Property) o'zgarmas qiymatga o'xshaydi: --primary-color: #007bff;. U qiymat saqlaydi.
• CSS Maxsus Funksiyasi (Custom Function) retseptga o'xshaydi: --calculate-padding(2). U tarkibiy qismni (2 raqamini) oladi, ko'rsatmalar to'plamiga amal qiladi (masalan, asosiy birlikka ko'paytirish) va sizga natija (masalan, 16px) beradi.

Bu imkoniyat CSS'ni haqiqiy dasturlash tiliga yaqinlashtiradi, bu esa veb-ilovaning uslublar qatlamida to'g'ridan-to'g'ri yanada murakkab va inkapsulyatsiya qilingan mantiqni amalga oshirishga imkon beradi. Bu hozirgacha faqat preprotsessorlar tomonidan kompilyatsiya vaqtida hal qilingan muammoning mahalliy, brauzerda talqin qilinadigan yechimidir.

Bo'shliqni to'ldirish: @function va Preprotsessor funksiyalari

Agar siz Sass bilan ishlagan bo'lsangiz, @function tushunchasi sizga juda tanish tuyuladi. Sass'da siz shunday funksiya yozishingiz mumkin:

Sass misoli:

            @function spacing($multiplier) {
  @return $multiplier * 8px;
}

.element {
  padding: spacing(2); // padding: 16px; ga kompilyatsiya qilinadi
}
            

              
                Copy
              
            
          

Taklif etilayotgan mahalliy CSS @function qoidasi xuddi shu natijaga erishishni maqsad qiladi, ammo muhim farq bilan: u brauzerda ishlaydi. Bu farq jiddiy oqibatlarga olib keladi:

• Yig'ish bosqichi talab qilinmaydi: Siz ushbu funksiyalarni to'g'ridan-to'g'ri CSS faylingizda yozishingiz va ishlatishingiz mumkin, ularni qayta ishlash uchun Sass kabi kompilyator yoki Webpack kabi bog'lovchiga ehtiyoj sezmaysiz. Bu, ayniqsa, kichik loyihalar yoki to'g'ridan-to'g'ri yondashuvni afzal ko'radigan ishlab chiquvchilar uchun ishlab chiqish jarayonlarini soddalashtiradi.
• Dinamik va kontekstni biluvchi: Ular brauzer tomonidan talqin qilinganligi sababli, bu funksiyalar boshqa jonli CSS qiymatlari va xususiyatlari, jumladan, ish vaqtida o'zgarishi mumkin bo'lgan CSS Maxsus Xususiyatlari (masalan, JavaScript orqali) bilan o'zaro ta'sir o'tkazishi mumkin. Preprotsessor funksiyasi faqat kompilyatsiya vaqtida ma'lum bo'lgan qiymatlarga kira oladi.
• Standartlashtirish: Bu funksiyalarni yaratishning global standartlashtirilgan usulini ta'minlaydi, bu esa uslublar jadvallarining turli loyihalar va ishlab chiqish muhitlari o'rtasida ko'proq portativ va o'zaro mos bo'lishini ta'minlaydi.

Biroq, shuni ta'kidlash kerakki, hozirda preprotsessorlar ancha boy xususiyatlar to'plamini taklif qiladi, jumladan, murakkab boshqaruv oqimlari (if/else shartlari, tsikllar) va keng kutubxonadagi o'rnatilgan funksiyalar. Mahalliy CSS @function qoidasi hisob-kitoblar va qiymatlarni o'zgartirishga qaratilgan asoslardan boshlanmoqda.

CSS funksiyasi anatomiyasi: Sintaksis va parametrlar

Sintaksisni tushunish @functionni o'zlashtirishning birinchi qadamidir. Tuzilma intuitiv va boshqa zamonaviy CSS xususiyatlariga mos keladigan tarzda ishlab chiqilgan.

            @function --mening-funksiya-nomim(<parametr-1>, <parametr-2>, ...) {
  /* ... funksiya mantig'i ... */
  return <qandaydir-qiymat>;
}
            

              
                Copy
              
            
          

Keling, har bir komponentni tahlil qilaylik.

Funksiya nomlanishi

Maxsus funksiya nomlari, xuddi CSS Maxsus Xususiyatlari kabi, ikkita chiziqcha (--) bilan boshlanishi kerak. Bu qoida muallif tomonidan belgilangan konstruksiyalar uchun aniq, izchil nomlar fazosini ta'minlaydi va kelajakdagi mahalliy CSS funksiyalari bilan to'qnashuvlarning oldini oladi. Masalan, --calculate-fluid-size yoki --to-rem yaroqli nomlardir.

Parametrlarni aniqlash

Parametrlar - bu sizning funksiyangizning kirish ma'lumotlari. Ular funksiya nomidan keyin keladigan qavslar () ichida aniqlanadi. Siz vergul bilan ajratilgan bir yoki bir nechta parametrni belgilashingiz mumkin.

Standart qiymatlar: Siz parametrlar uchun standart qiymatlarni taqdim etishingiz mumkin, bu ularni ixtiyoriy qiladi. Bu parametr nomidan keyin ikki nuqta va standart qiymatni qo'yish orqali amalga oshiriladi.

            /* Ixtiyoriy parametrli funksiya */
@function --adjust-opacity(<color>, <amount>: 0.8) {
  return color-mix(in srgb, <color>, transparent calc(100% * (1 - <amount>)));
}
            

              
                Copy
              
            
          

Ushbu misolda, agar --adjust-opacity() faqat bitta argument (rang) bilan chaqirilsa, <amount> avtomatik ravishda 0.8 ga o'rnatiladi.

Funksiya tanasi

Figurali qavslar {} ichida joylashgan funksiya tanasi mantiqni o'z ichiga oladi. Bu yerda siz hisob-kitoblarni amalga oshirasiz va kirish parametrlarini boshqarasiz. Kerakli natijani yaratish uchun tana ichida calc(), min(), max(), clamp() va color-mix() kabi standart CSS funksiyalaridan foydalanishingiz mumkin.

Dastlabki spetsifikatsiya qiymatlarni hisoblashga qaratilgan bo'lsa-da, infratuzilma kelajakda, CSS tili rivojlanishi bilan yanada murakkab mantiqni qo'shish kabi yaxshilanishlarga imkon beradi.

Qaytariladigan qiymat

Har bir funksiya return bayonoti bilan tugashi kerak. Bu bayonot funksiya chaqirilganda chiqaradigan qiymatni belgilaydi. Qaytarilgan qiymat keyin funksiya chaqirilgan CSS xususiyatida ishlatiladi. return bayonotisiz funksiya yaroqsiz hisoblanadi.

Amaliy qo'llash holatlari va misollar

Nazariya ajoyib, ammo @functionning haqiqiy kuchi amaliy qo'llanilish orqali namoyon bo'ladi. Keling, maxsus funksiyalar sizning uslublar jadvallaringizni sezilarli darajada yaxshilashi mumkin bo'lgan ba'zi real hayotiy stsenariylarni ko'rib chiqaylik.

1-holat: Moslashuvchan tipografiya va o'lchamlar

Responsiv tipografiya ko'pincha matnning turli ekran o'lchamlari orasida silliq o'lchamlanishini ta'minlash uchun murakkab clamp() funksiyalarini o'z ichiga oladi. Bu takrorlanuvchi va o'qilishi qiyin kodga olib kelishi mumkin.

Oldin (Takrorlanuvchi clamp()):

            h1 {
  /* clamp(MIN, VAL, MAX) */
  font-size: clamp(2rem, 1.5rem + 2.5vw, 4rem);
}

h2 {
  font-size: clamp(1.5rem, 1rem + 2vw, 3rem);
}

p {
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
}
            

              
                Copy
              
            
          

Bu juda ko'p so'zli va xatolarga moyil. @function yordamida biz bu mantiqni toza, qayta ishlatiladigan yordamchi dasturga abstraktlashtirishimiz mumkin.

Keyin (Maxsus funksiyadan foydalanish):

            /* Moslashuvchan o'lcham funksiyasini aniqlash */
@function --fluid-size(<min-size>, <max-size>, <min-viewport>: 320px, <max-viewport>: 1200px) {
  /* clamp formulasining o'zgaruvchan qismini hisoblash */
  --variable-part: (<max-size> - <min-size>) / (<max-viewport> - <min-viewport>);

  return clamp(
    <min-size>,
    calc(<min-size> + 100vw * var(--variable-part)),
    <max-size>
  );
}

/* Funksiyadan foydalanish */
h1 {
  font-size: --fluid-size(2rem, 4rem);
}

h2 {
  font-size: --fluid-size(1.5rem, 3rem);
}

p {
  font-size: --fluid-size(1rem, 1.25rem);
}
            

              
                Copy
              
            
          

Natija ancha deklarativ va qulay. Murakkab hisob-kitob funksiya ichida inkapsulyatsiya qilingan va ishlab chiquvchi faqat minimal va maksimal kerakli o'lchamlarni taqdim etishi kerak.

2-holat: Ranglar bilan ishlashning ilg'or usullari

Preprotsessor foydalanuvchilari lighten(), darken() va saturate() kabi funksiyalarni yaxshi ko'radilar. Mahalliy CSS color-mix() funksiyasi yordamida biz o'z versiyalarimizni yaratishimiz mumkin.

Och va to'q ranglar funksiyalarini yaratish:

            /* 
  Rangning ochroq versiyasini (tint) yaratadi.
  <base-color>: Boshlang'ich rang.
  <weight>: Qancha oq rang aralashtirishni ko'rsatuvchi 0% dan 100% gacha foiz.
*/
@function --tint(<base-color>, <weight>) {
  return color-mix(in srgb, <base-color>, white <weight>);
}

/*
  Rangning to'qroq versiyasini (shade) yaratadi.
  <base-color>: Boshlang'ich rang.
  <weight>: Qancha qora rang aralashtirishni ko'rsatuvchi 0% dan 100% gacha foiz.
*/
@function --shade(<base-color>, <weight>) {
  return color-mix(in srgb, <base-color>, black <weight>);
}

:root {
  --brand-primary: #007bff;
}

.button-primary {
  background-color: var(--brand-primary);
  border-color: --shade(var(--brand-primary), 20%);
}

.button-primary:hover {
  background-color: --tint(var(--brand-primary), 15%);
}
            

              
                Copy
              
            
          

Bu yondashuv butun ilova bo'ylab rang o'zgarishlarini yaratishning izchil va tizimli usulini ta'minlaydi, bu esa mavzu yaratishni ancha oson va mustahkam qiladi.

3-holat: Oraliq masofalar shkalasini qo'llash

Dizayn tizimlari uyg'un va bashorat qilinadigan foydalanuvchi interfeyslarini yaratish uchun izchil oraliq masofalarga tayanadi. Funksiya yagona asosiy birlik asosida oraliq masofalar shkalasini qo'llashi mumkin.

            :root {
  --base-spacing-unit: 8px;
}

/*
  Ko'paytiruvchiga asoslangan oraliq qiymatini hisoblaydi.
  --spacing(1) -> 8px
  --spacing(2) -> 16px
  --spacing(0.5) -> 4px
*/
@function --spacing(<multiplier>) {
  return calc(<multiplier> * var(--base-spacing-unit));
}

.card {
  padding: --spacing(3); /* 24px */
  margin-bottom: --spacing(2); /* 16px */
}

.container {
  padding-left: --spacing(2.5); /* 20px */
  padding-right: --spacing(2.5); /* 20px */
}
            

              
                Copy
              
            
          

Bu ilovadagi barcha oraliq masofalarning belgilangan dizayn tizimiga rioya qilishini ta'minlaydi. Agar asosiy oraliq birligini o'zgartirish kerak bo'lsa, siz uni faqat bir joyda (--base-spacing-unit o'zgaruvchisida) yangilashingiz kerak bo'ladi va butun shkala avtomatik ravishda yangilanadi.

Maxsus funksiyangizdan qanday foydalanish kerak

@function yordamida funksiyani aniqlaganingizdan so'ng, uni ishlatish rgb() yoki calc() kabi mahalliy CSS funksiyasini chaqirish kabi oddiy. Siz funksiya nomini va undan keyin uning argumentlarini o'z ichiga olgan qavslarni ishlatasiz.

            /* Funksiyalarni uslublar jadvalining yuqori qismida aniqlang */
@function --to-rem(<px-value>, <base>: 16) {
  return calc(<px-value> / <base> * 1rem);
}

@function --shade(<color>, <weight>) {
  return color-mix(in srgb, <color>, black <weight>);
}

/* Ularni qoidalaringizda ishlating */
body {
  font-size: --to-rem(16);
}

.title {
  font-size: --to-rem(48);
  border-bottom: 1px solid --shade(#cccccc, 10%);
}
            

              
                Copy
              
            
          

Eng kuchli jihatlardan biri bu chaqiruvlarni ichma-ich joylashtirish va maksimal moslashuvchanlik uchun ularni maxsus xususiyatlar kabi boshqa CSS xususiyatlari bilan birlashtirish qobiliyatidir.

            :root {
  --base-font-size-px: 18;
  --primary-theme-color: #5b21b6;
}

body {
  font-size: --to-rem(var(--base-font-size-px));
  color: --shade(var(--primary-theme-color), 25%);
}
            

              
                Copy
              
            
          

Joriy holat: Brauzer tomonidan qo'llab-quvvatlanish va kelajakdagi yo'l

Bu barcha ishlab chiquvchilar uchun muhim nuqta: Ushbu maqola yozilayotgan vaqtda, CSS @function qoidasi eksperimental xususiyat bo'lib, hali hech bir yirik brauzerning barqaror versiyalarida qo'llab-quvvatlanmaydi. U "CSS Functions and Values API Level 1" spetsifikatsiyasining ishchi loyihasining bir qismidir, bu uning sintaksisi va xatti-harakati hali o'zgarishi mumkinligini anglatadi.

Siz uning rivojlanishini Can I use... va MDN Web Docs kabi platformalarda kuzatib borishingiz mumkin. Ba'zi xususiyatlar tungi brauzer tuzilmalarida (Chrome Canary yoki Firefox Nightly kabi) eksperimental bayroqlar ostida mavjud bo'lishi mumkin. Ishlab chiqarish muhitlari uchun u hali foydalanishga tayyor emas.

Xo'sh, nega hozir bu haqda o'rganish kerak? CSS'ning yo'nalishini tushunish bir necha jihatdan yordam beradi:

• Kelajak uchun ko'nikmalarni shakllantirish: Kelajakda nima bo'lishini bilish kelajakdagi loyihalarni rejalashtirishga va veb-standartlarning uzoq muddatli traektoriyasini tushunishga yordam beradi.
• Asboblarni tanlashda ma'lumot berish: Mahalliy funksiyalarning paydo bo'lishi sizning asbob tanlovingizga ta'sir qilishi mumkin. Faqat oddiy funksiyalarga muhtoj bo'lgan loyihalar preprotsessordan butunlay voz kechishi mumkin.
• Jamiyatga hissa qo'shish: Ishlab chiquvchilar ushbu xususiyatlar bilan tajriba o'tkazib, brauzer ishlab chiqaruvchilari va standartlar organlariga qimmatli fikr-mulohazalarni taqdim etishlari mumkin, bu esa yakuniy amalga oshirishni shakllantirishga yordam beradi.

Ayni paytda, PostCSS ekotizimidagi vositalar @function sintaksisini kengroq qo'llab-quvvatlanadigan formatga transpilyatsiya qilish uchun paydo bo'lishi mumkin, bu sizga bugungi kunda kelajakka mos CSS yozish imkonini beradi.

Potentsial va kelajakdagi oqibatlar

@function ning joriy etilishi shunchaki yangi sintaksis qismi emas; u CSS uchun falsafiy siljishni anglatadi. Bu ilgari boshqa vositalarga topshirilgan vazifalarni bajara oladigan kuchliroq, o'zini o'zi ta'minlaydigan til sari harakatdir.

Ilg'or CSS'ni ommalashtirish

Murakkab JavaScript-ga asoslangan yig'ish muhitiga bo'lgan talabni olib tashlash orqali, mahalliy CSS funksiyalari murakkab, qulay va kengaytiriladigan CSS yozish uchun kirish to'sig'ini pasaytiradi. Bu oddiy statik veb-saytlardan tortib yirik ilovalargacha bo'lgan keng ko'lamli loyihalarda ishlaydigan ishlab chiquvchilarga preprotsessorning qo'shimcha yukisiz zamonaviy usullardan foydalanish imkoniyatini beradi.

Houdini API'lari bilan o'zaro moslik

@function Houdini jumboqining faqat bir qismidir. Kelajakda u boshqa Houdini API'lari bilan uzluksiz integratsiya qilishi mumkin. Tasavvur qiling-a, maxsus fon chizish uchun Paint API tomonidan to'g'ridan-to'g'ri ishlatiladigan qiymatni hisoblaydigan funksiya yoki yangi maket yaratish uchun Layout API'ga ma'lumot beradigan funksiya, bularning barchasi DOM yoki ekran o'zgarishlariga dinamik ravishda javob beradi.

CSS arxitekturasida yangi davr

Funksiyalar uslublar jadvallarini arxitekturalash uchun yangi naqshlarni yaratishga imkon beradi. Biz loyihaga xos bo'lgan, ulashish mumkin bo'lgan va tashqi bog'liqliklarni talab qilmaydigan yordamchi funksiyalar kutubxonalarini (masalan, --text-color-contrast(), --calculate-aspect-ratio()) yaratishimiz mumkin. Bu to'g'ridan-to'g'ri CSS'da qurilgan yanada mustahkam va o'z-o'zini hujjatlashtiradigan dizayn tizimlariga olib keladi.

Xulosa

CSS @function at-qoidasi uzoq kutilgan maxsus, parametrga asoslangan funksiyalar kuchini to'g'ridan-to'g'ri brauzerga olib kelishni va'da qiladigan muhim taklifdir. Ishlab chiquvchilarga murakkab mantiqni abstraktlashtirish, dizayn izchilligini ta'minlash va toza, qulayroq kod yozish imkonini berish orqali u oddiy CSS va preprotsessorlar imkoniyatlari o'rtasidagi sezilarli bo'shliqni to'ldiradi.

Garchi biz uni ishlab chiqarishda ishlatishdan oldin keng brauzer qo'llab-quvvatlashini kutishimiz kerak bo'lsa-da, u taqdim etadigan kelajak porloqdir. Bu har doim ham tashqi vositaga murojaat qilmasdan zamonaviy veb-ishlab chiqish talablarini bajara oladigan yanada dinamik, dasturiy va kuchli CSS'dan darak beradi. Spetsifikatsiyani o'rganishni boshlang, brauzer yangilanishlarini kuzatib boring va CSS'ni tubdan yangi va kuchliroq usulda yozishga tayyorlaning.