Myth : با این ابزار با خیال راحت کدهای CSS مدرن رو استفاده کنید!

‏  3 دقیقه
۳۰ آذر ۱۳۹۵

myth

در این مطلب میخایم ابزاری رو بهتون آموزش بدیم که با استفاده از اون میتونین با خیال راحت کدهای CSS جدیدی که در همه مرورگرها پشتیبانی نمیشن رو استفاده کنید و این ابزار اون رو به حالتی در میاره که در مرورگرهای مورد نیاز شما پشتیبانی بشه. این ابزار یک پیش پردازنده هست که بیشتر شبیه به یک Polyfill رفتار میکنه و یک معادل قدیمی برای کدهای جدید به وجود میاره که مرورگرهای قدیمی هم توانایی استفاده از اونا رو داشته باشن.

همونطور که میدونید هر چه که به سمت جلو میریم، کدهای جدیدتر و حرفه ای‌تری پا به میدان میزارن و قابلیتهای جدیدی رو به ارمغان میارن. اما ما طراحان وب به دلیل اینکه در همه مرورگرها قابلیت پشتیبانی از این ویژگی‌ها نیست، از اونا استفاده نمیکنیم و تمایلی برای یادگیری اونا نداریم. حالا با استفاده از این ویژگی میتونیم هر کد CSS مدرن و جدیدی که قصد داریم رو قرار بدیم و این ابزار اون رو برای ما به کد مناسب تبدیل میکنه و بعد از اون ما ازش استفاده میکنیم.

این ابزار بر پایه Node.js هست و برای اجرا شدن نیاز به Node داره. پس شما باید برای استفاده از این ابزار Node رو بر روی سیستمتون داشته باشید. اگر ندارید با آموزشی که در این لینک قرار داره، اون رو نصب کنید. بهمراه Node مدیریت کننده بسته‌ها یا NPM هم بر روی سیستم شما نصب میشه که میتونین با استفاده از اون بسته‌ها و ابزارهای وابسته به Node رو نصب کنید. برای نصب Myth در ابتدا CMD رو باز میکنیم و دستور npm install -g myth رو درونش قرار میدیم و Enter میزنیم:install myth

همونطور که دیدید این ابزار نصب شد. برای اطمینان از نصب بصورت زیر عمل میکنیم:install myth 2

دیدید که نسخه 1.5.0 این ابزار نصب شده است. حالا فرض کنید یک فایل بنام input.css بسازیم و کدهای زیر رو درونش قرار بدیم:

:root {
  --purple: #847AD1;
  --large: 10px;
}

a {
  color: var(--purple);
}

pre {
  padding: var(--large);
}

همونطور که دیدید از برخی از ویژگی‌های مدرن CSS مثل متغیرها و :root استفاده شده. حالا برای اینکه از ابزار myth استفاده کنیم و معادل این کد رو بدست بیاریم بصورت زیر درون CMD عمل میکنیم:install myth 3

میبینید که دستور myth input.css output.css رو درون CMD قرار دادیم. با اینکار فایل input.css رو بعنوان ورودی انتخاب کردیم و گفتیم که یک فایل بنام output.css بساز و کدهای خروجی رو درونش قرار بده. بعد از اینکه این دستور اجرا شد، خروجی در output.css بصورت زیر هست:

a {
  color: #847AD1;
}

pre {
  padding: 10px;
}

میبینید که محاسبات مربوط به متغیرها و ... انجام شده و خروجیشون بصورت ساده قرار گرفته و همه مرورگرها میتونن این مورد رو اجرا کنن. اگر ورودی بصورت زیر باشه:

:root {
  --purple: #847AD1;
  --large: 10px;
}

a {
  color: var(--purple);
}

a:hover {
  color: color(var(--purple) tint(20%));
}

pre {
  margin: calc(var(--large) * 2);
}

خروجی بصورت زیر خواهد بود:

a {
  color: #847AD1;
}

a:hover {
  color: rgb(157, 149, 218);
}

pre {
  margin: 20px;
}

دیدید که متدهای color و calc هم به سادگی تبدیل شدن. بهمین راحتی این ابزار کار رو برای ما راحت میکنه و با خیال راحت میتونیم کدنویسی کنیم. اگر در آینده ویژگی‌های جدیدتری هم بیان بدون نگرانی میتونیم ازشون استفاده کنیم. برای مطالعه بیشتر در مورد این ابزار میتونین به این لینک مراجعه کنید.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق و پیروز باشید.

یا علی

چه امتیازی به این مقاله می دید؟
نویسنده محمد اسفندیاری
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.
ارسال دیدگاه
خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :

 

نظرات کاربران

spring spring

سلام
من چند روزه که دارم سعی می کنم بتونم از برنامه output بگیرم ولی با یه error مواجه میشم.
لطفا میشه راهنماییم کنید.
این هم عکسشه :
http://uupload.ir/files/d8cs_ghgfh.png

محمد اسفندیاری

سلام
هم Node.js و هم Myth رو به روز رسانی کنید
ببینید مشکل برطرف میشه یا خیر
موفق باشید

spring spring

سلام ، ممنون از مطالب مفیدتون.

-می خواستم بدونم کسانی که حرفه ای کد میزنن

از این چنین ابزار هایی برای پشتیبانی 100 درصدی وبسایتاشون استفاده می کنن

یا این که “بعد از طراحی” چک می کنن

که کدام دستورات در مرورگر های قدیمی پشتیبانی نمی شوند تا از پیشوند ها و پلیفیل ها استفاده کنند؟

کلا مرحله تست پیشتیبانی مرحله آخره یا نه ؟

محمد اسفندیاری

ببینید دوست عزیز اول شما باید ببینید که کاربرانتون بیشتر از چه مرورگرهایی پشتیبانی میکنن و متناسب با همون مرورگرها مواردی که میخواین رو به وجود بیارید
ابزارهای زیادی مثل Autoprefixer هستند که با استفاده از اونا میتونین کدهای خودتون رو برای مرورگرهای قدیمی هم بهینه سازی کنید
همچنین شما میتونین از ویژگی های بسیار مدرن استفاده کنید و در مرورگرهای قدیمی که این موارد رو پشتیبانی نمیکنن، استایل دیگه ای رو در نظر بگیرید تا فقط کاربر بتونه ظاهر کلی سایت رو مشاهده کنه و میتونین یک پیام نیز به کاربران مرورگرهای قدیمی نمایش بدین تا مرورگرهای خودشون رو به روز رسانی بکنند تا بتونن سایت رو در بهترین حالت مشاهده کنند
همچنین این هم بگم که تقریبا 80 درصد کاربران از مرورگرهای به روز استفاده میکنه و جای نگرانی زیادی بابت این قضیه وجود ندارد
با استفاده از @supports میتونین ویژگی های جدید رو فقط برای مرورگرهایی که از ویژگی ها پشتیبانی میکنند، قرار بدین
ابزار Modernizr هم میتونه به شما در این زمینه کمک بکنه
موفق باشید

احمد

تشکر از شما
ابزار بسیار جالبی هست.

محمد اسفندیاری

خواهش میکنم
موفق باشید