بروز رسانی اسفند ۲۳ام, ۱۳۹۹ ۶:۵۶ بعد از ظهر
اسفند ۱۹, ۱۳۹۴ admin آموزش پیشرفته css, آموزش مقدماتی css 0
به عنوان یک طراح وبسایت و مرکز خبرهای جدید و همچنین یک CSS کار خیلی خیلی خیلی کار درست قطعا دائما فایل CSS را minify می کنید. جهت آنهایی که هنوز به مرحله “خیلی خیلی خیلی” نرسیدند و همچنین می خواهند بدانند معنی minify کردن چیست بایستی و حتما گفت عملیاتی می باشد که روی یک فایل انجام می می شود تا مواردی شامل کامنت ها, فضاهای خالی و همچنین اینترهای اضافی که در کد وجود دارند را حذف کند. در واقع با آن کار ما فایل مورد نظر را تا جایی که امکان دارد می چلانیم تا به کم حجم ترین حالت ممکن برسد.
کد زیر را در نظر بگیرید:
h1::before, h1:before
margin: 10px 20px 10px 20px;
color: #ff0000;
-webkit-border-radius: 16px;
border-radius: 16px;
font-weight: normal;
font-weight: normal;
در صورتی که از یک minify کننده ساده بهره بری و استفاده کنیم پس نتیجه آن می شود که بصورت زیر خواهد بود:
h1::before,h1:beforemargin:10px 20px 10px 20px;color:#ff0000;-webkit-border-radius:16px;border-radius:16px;font-weight:normal;font-weight:normal
همانطور که دیدن می کنید تنها اتفاقی که افتاد خذف فضاهای اضافی و همچنین اینترها بودند. ولی باید توجه داشت آیا می توانیم خروجی بهینه تری داشته باشیم؟ در ادامه نیت و اراده داریم تا ابزارهایی را معرفی کنیم تا بتوانیم فایل مظلوم CSS را اکثرا و بیشتر بچلانیم:
در وبسایت و مرکز خبرهای جدید گیتهاب پروژه ای معرفی شده می باشد به نام CSSO که پا را کمی فراتر می گذارد و همچنین با تیم بندی کردن انتخابگرها, کوتاه کردن سینتکس در جاهایی که امکان وجود دارد و همچنین مواردی دیگر, حجم فایل CSS را کمی اکثرا و بیشتر کاهش می دهد.
نمونه کد ما بعد از انجام بهینه سازی توسط آن ابزار بصورت زیر خواهد بود:
h1::before,h1:beforemargin:10px 20px;color:red;-webkit-border-radius:16px;border-radius:16px;font-weight:400
اتفاقایی که افتاد به قرار زیر خواهند بود:
margin
بهینه سازی شد. آن بدین معنی می باشد که آن ابزار به خلاصه نویسی ویژگی ها و همچنین مقادیر آنها اهمیت می دهد.
ff0000#
به red
تغییر پیدا کردن شده می باشد زیرا و به درستی که red تعداد کاراکترهای کمتری دارد.
normal
جهت ویژگی font-weight
به ۴۰۰
تغییر پیدا کردن شده می باشد. (باز هم به دلیل کاهش کاراکترها)
;font-weight:normal
) حذف شده می باشد.
آن ها مواردی بودند که در آن مثال وجود داشت, ولی باید توجه داشت آن ابزار بهینه سازی های غیره ای هم انجام می دهد. که می توانید خودتان در آدرس زیر آزمایش کنید:
همینطور در صورتی که در مراحل کاری خود از gulp و همچنین یا grunt و همچنین یا خود npm بهره بری و استفاده می کنید, آن ابزار جهت آن موارد هم پلاگین دارد:
آن ابزار هم بصورت متن باز در گیتهاب وجود دارد. cssnano نسبت به csso کمی گزینه های بیشتری جهت بهینه سازی در اختیار ما قرار می دهد. در مثال ما پس نتیجه آن می شود که بهینه سازی بصورت زیر خواهد بود:
h1:beforemargin:10px 20px;color:red;border-radius:1pc;font-weight:400
مواردی که آن ابزار بهینه می کند خیلی شفاف در اینجا توضیح داده شده می باشد.
همچنین مثل ابزار قبل می توانید با توجه به نحوه مراحل کاری خود از پلاگین های مختلفی که جهت آن ابزار نوشته شده اند بهره بری و استفاده کنید. از پلاگین ویرایشگر اتم گرفته تا gulp و همچنین grunt که توضیحات کامل در مورد نحوه بهره بری و استفاده از آن ابزار را می توانید در وبسایت و مرکز خبرهای جدید خودش مطالعه کنید.
بهره بری و استفاده از اینگونه ابزارها ریسک خاص خود را دارد. ولی باید توجه داشت شرکت های بزرگی از آن ابزارها بهره بری و استفاده می کنند و همچنین هنوز هم به مشکل بر نخورده اند. از طرفی می توانید از طریق تنظیم کردن گزینه های بهینه سازی در آن ابزارها ریسک را کنترل کنید.
همچنین زیرا و به درستی که آن ابزارها بصورت متن باز در دسترس خواهند بود در صورتی که با مشکلی مواجه شدید کافی می باشد تا در گیتهاب جهت پروژه مربوطه مشکل را معرفی کنید تا در ورژن و نسخه بعدی رفع می شود.
کمک هم خواستید تا جایی که وقت و همچنین سوادم اجازه بده در خدمتم. بعد از همین امروز بهره بری و استفاده کنید خیالتون راحت
اسفند ۲۳, ۱۳۹۹ 0
اسفند ۱۰, ۱۳۹۹ 0
بهمن ۲۵, ۱۳۹۹ 0
بهمن ۰۹, ۱۳۹۹ 0
مرداد ۱۲, ۱۳۹۹ 0
اردیبهشت ۰۸, ۱۳۹۹ 0
خرداد ۱۴, ۱۳۹۶ 0
اردیبهشت ۱۰, ۱۳۹۶ 0