به عنوان یک طراح سایت و یک 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:before{margin:10px 20px 10px 20px;color:#ff0000;-webkit-border-radius:16px;border-radius:16px;font-weight:normal;font-weight:normal}
همانطور که مشاهده می کنید تنها اتفاقی که افتاد خذف فضاهای اضافی و اینترها بودند. اما آیا می توانیم خروجی بهینه تری داشته باشیم؟ در ادامه قصد داریم تا ابزارهایی را معرفی کنیم تا بتوانیم فایل مظلوم CSS را بیشتر بچلانیم:
CSSO
در سایت گیتهاب پروژه ای معرفی شده است به نام CSSO که پا را کمی فراتر می گذارد و با گروه بندی کردن انتخابگرها, کوتاه کردن سینتکس در جاهایی که امکان وجود دارد و مواردی دیگر, حجم فایل CSS را کمی بیشتر کاهش می دهد.
نمونه کد ما بعد از انجام بهینه سازی توسط این ابزار بصورت زیر خواهد بود:
h1::before,h1:before{margin:10px 20px;color:red;-webkit-border-radius:16px;border-radius:16px;font-weight:400}
اتفاقایی که افتاد به قرار زیر هستند:
-
مقدار ویژگی
marginبهینه سازی شد. این بدین معنی است که این ابزار به خلاصه نویسی ویژگی ها و مقادیر آنها اهمیت می دهد. -
ff0000#بهredتبدیل شده است چون red تعداد کاراکترهای کمتری دارد. -
مقدار
normalبرای ویژگیfont-weightبه400تبدیل شده است. (باز هم به دلیل کاهش کاراکترها) -
دستور اضافه ای که نوشته شده (
;font-weight:normal) حذف شده است.
این ها مواردی بودند که در این مثال وجود داشت, اما این ابزار بهینه سازی های دیگری هم انجام می دهد. که می توانید خودتان در آدرس زیر آزمایش کنید:
همینطور اگر در مراحل کاری خود از gulp و یا grunt و یا خود npm استفاده می کنید, این ابزار برای این موارد هم پلاگین دارد:
cssnano
این ابزار هم بصورت متن باز در گیتهاب وجود دارد. cssnano نسبت به csso کمی گزینه های بیشتری برای بهینه سازی در اختیار ما قرار می دهد. در مثال ما نتیجه بهینه سازی بصورت زیر خواهد بود:
h1:before{margin:10px 20px;color:red;border-radius:1pc;font-weight:400}
مواردی که این ابزار بهینه می کند خیلی شفاف در اینجا توضیح داده شده است.
همچنین مثل ابزار قبل می توانید با توجه به نحوه مراحل کاری خود از پلاگین های مختلفی که برای این ابزار نوشته شده اند استفاده کنید. از پلاگین ویرایشگر اتم گرفته تا gulp و grunt که توضیحات کامل در مورد نحوه استفاده از این ابزار را می توانید در سایت خودش مطالعه کنید.
استفاده از اینگونه ابزارها ریسک خاص خود را دارد. اما شرکت های بزرگی از این ابزارها استفاده می کنند و هنوز هم به مشکل بر نخورده اند. از طرفی می توانید از طریق تنظیم کردن گزینه های بهینه سازی در این ابزارها ریسک را کنترل کنید.
همچنین چون این ابزارها بصورت متن باز در دسترس هستند اگر با مشکلی مواجه شدید کافی است تا در گیتهاب برای پروژه مربوطه مشکل را معرفی کنید تا در نسخه بعدی رفع شود.
کمک هم خواستید تا جایی که وقت و سوادم اجازه بده در خدمتم. پس از همین امروز استفاده کنید خیالتون راحت :)
طبق معمول عالی!!!
خیلی ممنون لطف دارین.
مجتبی جان خسته نباشی
یکپارچه و بهینه شده توضیح دادی دست گلت درد نکنه
حتما از این شیوه هم در طراحی مون استفاده می کنیم ببینیم این فایل بیچاره رو چقد باید چلوند …
موفق و پیروز باشی
ممنون از لطف شما. در چلوندن هم برای شما آرزوی موفقیت می کنم :)
مطلب فوق العاده ای بود، اما به نظرم وقتی از pre-proccessor هایی مثل sass استفاده می کنیم، شاید امکان استفاده از این کمپرسور ها نباشه مگر اینکه بعد از کامپایل و نهایی شدن کار دقیقا قبل از آپلود فایل اون ها رو بهینه کنی
ممنون از شما.
در مورد بحثی که مطرح کردین:
کافیه اگر از gulp یا امثالش استفاده می کنید یک تسک در قسمت خروجی گرفتن بنویسید که این کار رو انجام بده. هیچ مشکلی هم بوجود نمیاد. اگر هم منظورتون اینه وقتی این کار رو می کنید دیگه در زمان دیباگ کردن توی مرورگر خیلی بررسی کار سخت میشه. جواب فایل هایی هستند به اسم source maps که پسوند .map دارند.
مثلا وقتی فایل css بهینه میشه خوب انتخابگرها با هم در خیلی جاها یکی میشن و بررسیشون توی devtools سخته. کار فایل map اینه که باعث میشه ما همون کدی که توی فایل sass نوشتیم رو توی مرورگر ببینیم نه کد بهینه شده و شلوغ رو و حتی از طریق مرورگر می تونیم فایل پیش پردازنده رو ویرایش کنیم.
اولا پیشنهاد می کنم اگر مراحل کاریتون رو خودکار نکردین (مثلا همین کامپایل فایل Sass و یا بهینه سازی و غیره) با استفاده از ابزارهایی مثل gulp و یا grunt حتما انجام بدین. دوما حتما از فایل های map استفاده کنید.
این مطلب رو ببنید: https://developer.chrome.co…
احسنت به شما و مطالب آموزنده تون
فوق العاده بود
سلام خسته نباشی مهندس
csso موارد تکراری را یکی نمی کند؟
مثلا اگر یک مدیا کوئری چندبار تکرار شده باشه همه آنها را یکی نمی کنه؟
@media (min-width:46.25em){.x{a}}a
@media (min-width:46.25em){.y{b}}a
@media (min-width:46.25em){.z{c}}a
***************************************************
@media (min-width:46.25em){.x{a}.y{b}.z{b}}a
سلام. ممنونم
بله این کار رو هم انجام میده.
اگر از gulp یا grunt استفاده می کنید اون ها هم یک بسته هایی مثل gulp-combine-media-queries یا gulp-merge-media-queries رو دارند فقط مخصوص به همین کار.
مرسی که از em برای مدیاکوئری نوشتن استفاده کردید ?
با سلام و ممنون بابت زحماتتون
فرض کنیم که از یه قالب استفاده میکنیم که در بخش html آن از تعدادی کلاس استفاده شده ولی فایل css مربوطه بسیار وسیع تر هست و ممکنه کلاس های اضافی وجود داشته باشه که در html موجود نیست.
ممکن هست راهنمایی کنید چطور میشه این جور css ها رو بهینه سازی کرد ؟ آیا این ابزار میتونه هوشمندانه بخش های کاربردی رو نگه داره و بقیه رو حذف کنه و یا باید دستی فایل رو بررسی و قسمتهای اضافه رو حذف کرد ؟
سلام. آره همچین ابزارهایی وجود داره
https://github.com/uncss/uncss
سپاس از شما
سلام واقعا از سایت بسیار مفید و خوبتون تشکر می کنم، عالی
یه سوال داشتم، این
-webkit-border-radius: 16px;
چیه؟
احتمالا برای مرورگر IE که شعاع رو ساپورت نمیکنه هست؟
بازم ممنون و متشکر
یاعلی
سلام، همون طور که گفتید برای ساپورت مرورگرهای قدیمی هستش، ولی Webkit مال کروم قدیمی و سافاری هستش. پیشوند ms برای ie هستش و اگر جایی moz دیدید مال فایرفاکس هستش.
موفق باشید.
با سلام
این سوالی که می پرسم جاش اینجا نیست ولی دیگه چاره ای نداشتم چون نمی دونستم کجا مطرح کنم .
– بعضی وقتا عنوان ها خیلی طولانی میشن . بخاطر طولانی شدن میرن سطر بعدی و ترتیب قالب رو بهم میریزه . بخاطر این میخام بعد قبل اینکه عنوان بره سطر بعدی سه تا نقطه بندازه که ادامه داره . یعنی عنوان از سطر اول نره سطر بعدی ..
ایشالا تونسته باشم منظورم رو مطرح کنم
با تشکر
سلام، این رو مطالب کنید:
http://css-tricks.ir/reference/text-overflow
سلام
بازم یه سوال برام پیش اومده، می خواستم بدونم چه ویژگی هایی نیاز به پیشوند دارند، مثل همین Webkit، ای کاش یه پست بذارین یه توضیحی راجع به این بدین، که برای این که برنامه ما بیشترین هماهنگی رو داشته باشه برای چه ویژگی هایی چه پیشنود هایی رو باید اضافه کنیم، چون مثلا ممکنه یه ویژگی ای فقط تو IE نیاز به پیشوند داشته باشه، البته میشه تک تک بریم پشتیبانی ویژگی ها رو بررسی کنیم، اما اگه همشون و یکجا معرفی کنید چی میشه، بازم عالی عالی هستین ممنون
یا علی
https://css-tricks.ir/?p=580
سلام بابت سایت خوبتون خیلی ممنون
یه سوال در مورد group-css-media-queries دارم .
این package خیلی وقته که بروزرسانی نشده آیا استفاده ازش مشکل ایجاد نمیکنه؟
سلام ممنون از مطلب عالی تون می خواستم بدونم سایت یا نرم افزاری هست که برعکس این کار رو انجام بده یعنی کد هارو از حالت فشرده خارج کنه و گسترده بنویسه