css-custom-property

مانند سایر زبان های برنامه نویسی که از متغیر ها برای نگهداری مقداری استفاده می شود که بتوان بعدا در هر زمان به آن مراجعه کرد، در سی اس اس هم برای نگهداری و یا ذخیره سازی
مواردی مانند رنگ ها، نام فونت، اندازه فونت و … استفاده می شود و می توان در جاهای مختلف فایل سی اس اس آن را صدا کرد و از مقدار آن استفاده کرد. اسم رسمی و صحیح این متغیرها custom properties می باشد که معمولا در بین توسعه دهندگان و برنامه نویسان به نام متغیر جا افتاده است.

custom propertiyها امکان تعریف و تغییر متغیرها را می دهند که این متغیرها در سرتاسر فایل stylesheet قابل دسترسی هستند. قدیم تر برای انجام چنین کاری حتما باید از CSS preprocessors کمک می گرفتیم. مانند Sass

مفهوم root: و ()var

اصول اولیه custom properties اولین قدمی است که قبل از هر چیزی باید آن را بدانیم. از اینرو قبل از هر چیزی مفاهیمی را برای روشن تر شدن بهتر موضوع توضیح می دهیم. custom propertiy یک اسم، متغیر یا همان ویژگی است که با دو علامت hyphen یا همان خط فاصله شروع می شود. دقت کنید که با underline اشتباه نکنید. مثال: bg-color– .خوب حالا برای فراخوانی متغیری که تعریف کرده ایم باید از ()var استفاده کنیم.
به مثال زیر دقت کنید:

  
      :root {
        --bg-color: #000;
        --text-color: #fff;
      }
  

()var: فراخوانی متغیر

برای فراخوانی متغیری که قبلا تعریف شده است از ()var استفاده می کنیم. به این صورت که نام متغیری که میخواهیم فراخوانی در داخل پرانتر قرار می دهیم.

  
      div {
        color: var(--text-color);
        background-color: var(--bg-color);
      }
  

تعریف custom propertiyها یا به عبارت عمومی تر آن، متغیرها داخل root: به این معنی می باشد که متغیر تعریف شده در کل سند قابل ارجاع می باشد و متغیر در بالاترین سطح سند تعریف شده. root: تقریبا شبیه html می باشد. که اگر ویژگی را به html اختصاص دهیم در کل سند تاثیر می گذارد. root: هم به این صورت است که در تمام سند قابل دسترسی است.

مقادیر fallback

مقادیر fallback، مقادیری هستند که اگر یک custom property تعریف نشده باشد، مقدار fallback به جای آن استفاده می شود.

  
      div {
        color: var(--text-color, #000); // مقدار ۰۰۰# در صورت در دسترس نبودن متغیر اعمال می شود
        background-color: var(--bg-color, #fff); // در صورت در دسترس نبودن متغیر مقدار فال بک استفاده می شود
      }
  

 

تعریف یک custom property برای المنتی غیر از root: و html باعث می شود که آن متغیر فقط برای همان المنت و فرزندان آن المنت قابل استفاده باشد.

 

تفاوت متغیرهای سی اس اس (CSS Custom Properties) با متغیرهایی که توسط Preprocessorها مانند Sass ایجاد می شوند:

  • custom propertyها در خود مرورگر تفسیر می شوند و مانند sass نیازی به کامپایل شدن به فایل استاندارد css ندارند.
  • custom propertyها می توانند توسط جاوا اسکریپت فراخوانده شوند و تغییراتی را توسط جاوا اسکرپیت در آن ها اعمال کرد در صورتی که متغیرها در برنامه هایی مانند sass کامپایل می شوند و فقط مقادیر آن ها قابل دسترسی هستند.

فراخوانی از طریق JavaScript

برای دسترسی و فراخوانی به یک custom property از طریق جاوا اسکریپت به شکل زیر عمل می کنیم:

  
      document.documentElement.style.setProperty('--bg-color', #ccc); // مقدار دو همان فال بک است که اختیاری می باشد
  

 
 
 

نویسنده: سعید پناهی

طراح و توسعه دهنده وب، رابط کاربری. فرانت اند. علاقه مند به یادگیری و آموزش

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

احتمالا از اینها هم خوشتون بیاد

تفاوت let و var

در گذشته تنها روشی که برای تعریف متغیر در جاوا اسکریپت استفاده می شد استفاده از کلمه کلیدی var بود. این کلمه برای مدت های طولانی برای تعریف متغیر ها در جاوا اسکریپت به کار می رفت اما مشکلاتی هم به همراه داشت که باعث شد درنسخه های بعدی جاوا اسکریپت با اضافه کردن دو کلمه کلیدی دیگر const و let برای تعریف کردن متغیر، این مشکلات بر طرف شود. بعد از انتشار نسخه ۶ جاوا اسکریپ دو کلمه کلیدی دیگر let و const برای تعریف متغیر به این زبان اضافه شد. که در مجموع سه کلمه کلیدی برای تعریف متغیر در این زبان مورد استفاده قرار می گیرد. به طور کلی کلمه کلیدی const برای تعریف یک ثابت به کار می رود. منظور از ثابت متغیری است که مقدار آن ثابت است مثلا اگر یک ثابت رو معادل یک رشته قرار دادیم نمی توان آن را تغیر داد.

بررسی واحدهای REM -EM – VH- VW و تفاوت بین آنها

برای مدت های طولانی طراحان و توسعه دهندگان وب سایت ها برای اندازه گذاری فونت، حاشیه و یا هر عنصر دیگری از واحد px که نشان دهنده پیکسل بود استفاده می کردند. اما امروزه با توجه به گسترش استفاده از دستگاه های مختلف مانند موبایل و تبلت برای نمایش وب سایت ها لزوم استفاده از واحدهایی که کنترل بیشتری به توسعه دهنده و طراح بدهد بیشتر شد. از این رو واحدهای rem و em تقریبا جای واحد px را گرفت.

نصب و استفاده از npm

نصب و استفاده از NPM

NPM مخفف Node Package Manager است. یک پکیج منیجر یا مدیریت پکیجی است که برای NodeJs نوشته شده است. (npm قسمتی از پلتفرم NodeJs است) البته این به معنای آن نیست که حتما باید در پروژه هایی که با NodeJs نوشته می شوند از NPM استفاده کرد بلکه در خیلی از موارد دیگر هم می شود از آن استفاده کرد. اجرای دستورات NPM از طریق خط فرمان (Command line) صورت می گیرد. دانستن ان پی ام به تنهایی کاربردی ندارد اما پیش نیاز خیلی از تکنولوژی های دیگر وب است.