قالب بندی و بهینه سازی فایل های CSS دیگر با کمک این ابزارهای دستی قابل انتخاب ، سردردهایی برای توسعه دهندگان وب نیست!


از زمان شروع آن ، از صفحات سبک آبشاری (CSS) به طور گسترده ای برای ترسیم تصاویر صفحات وب استفاده شده است. آنها شامل تعریف رنگ ها ، چیدمان ها ، انیمیشن ها و قلم ها هستند. مستقل از HTML ، CSS به شما امکان می دهد یک نسخه وب را به راحتی با انواع مختلف دستگاه های با اندازه های مختلف صفحه نمایش تطبیق دهید بدون اینکه بخواهید کمی از محتوای صفحه را تغییر دهید.

CSS به دلیل نحوه اعمال مقادیر خاصیت برای سلسله مراتب محتوا ، به عنوان شیوه نامه آبشار گفته می شود. عناصر کودک می توانند ارزشهای خاصیت را از عناصر والدین خود به ارث ببرند یا نادیده بگیرند. این قابلیت ها از طریق یک مدل مبتنی بر دامنه سلسله مراتبی اثر ارائه می شود. مشکلی که در این مدل وجود دارد اینست که اگر به درستی مورد استفاده قرار نگیرد می تواند به طور جدی بر عملکرد وب سایت تأثیر بگذارد.

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

بهینه سازی CSS می تواند به روش های مختلفی انجام شود: پرونده های CSS می توانند در اندازه کاهش یافته ، تمیز شوند ، تست شوند یا برای صحت سنجی اعتبار سنجی شوند ، مرتب شوند ، می توانند برای درک کد آن فرمت شوند و به طور کلی بهتر شوند. تنظیم شده است تا تجربه کاربری بهتری داشته باشید. ما برای هر یک از این کارها انتخابی از بهترین ابزارها انجام دادیم.

# ابزار تنظیم CSS

CSS Minify

CSS Minify یک ابزار ساده برای انجام CSS minify است: فرایند گرفتن CSS زیبا ، قابل خواندن ، خوش فرم و از بین بردن تمام فاصله ها ، تورفتگی ها ، خط های جدید و نظرات. CSS به دست آمده حاصل می تواند با موفقیت بدون استفاده از این عناصر استفاده شود. همچنین ، کوچک کردن CSS خواندن CSS را دشوارتر می کند ، دلسرد کردن سارقان کد برای سرقت از شیوه نامه های سخت کوش شما.

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

روپوش

روپوش ابزاری برای بهینه سازی CSS شما نیست. در عوض ، این یک کتابخانه CSS منبع باز است که با سرعت در ذهن طراحی شده است. این یک نسل از زبان طراحی Adobe است که برای براکت ها ، Edge Reflow ایجاد شده است.

Topcoat شامل PSD و بسیاری از آثار با طراحی دیگر ، به همراه مجموعه ای از آیکون های SVG ساده و تمیز و راهنمای سبک. همچنین ابزارهای معیار و خانواده فونت Adobe Source Sans Pro را ارائه می دهد.

کد سازنده

کد سازنده مبتنی بر CSS Tidy ، تجزیه کننده و بهینه ساز منبع باز CSS است. به شما امکان می دهد تا کد CSS را برای پردازش در یک متن متن یا از طریق URL آن چسب بزنید. پس از انجام کار خود ، کد بهینه شده را به همراه لیستی از تغییرات ایجاد شده نشان می دهد. می توانید کد اصلاح شده را در کلیپ بورد کپی کنید یا آن را برای استفاده بعدی در یک پرونده ذخیره کنید.

ابزار لیستی از گزینه های قابل توجهی و جامع ارائه می دهد که به شما امکان می دهد نتایج آن را تنظیم کنید تا تنظیمات برگزیده خود را برآورده کنید. به عنوان مثال ، این پنج گزینه برای فشرده سازی فراهم می کند ، از فشرده سازی کم تا بالاترین فشرده سازی. گزینه های دیگر به شما امکان می دهد مرتب سازی ، اشکال دیگر فشرده سازی ، حذف موارد غیر ضروری ، را بین دیگران مشخص کنید.

CSS نانو

یکی دیگر از ابزارهای کوچک سازی CSS است CSS نانو. این یکی از ابزاری است که برای تبدیل سبک ها با JavaScript با نام PostCSS ایجاد شده است. به لطف معماری افزونه این ابزار ، سازندگان CSS Nano توانستند آن را از ماژول های کوچک با کارکردهای محدود بسازند.

به طور پیش فرض ، CSS Nano پرونده CSS شما را برای پردازش در اختیار شما قرار می دهد و فقط بهینه سازی های ایمن را روی آن انجام می دهد. اما ابزار همچنین گزینه هایی برای فشار آوردن به فشرده سازی را به حد مجاز ارائه می دهد. عملکرد CSS هنوز یکسان خواهد بود ، اما فضای غیرضروری آن حذف می شود. همچنین ، شناسه های آن فشرده می شوند و تعاریف غیرضروری آن کاملاً پاک می شود.

# ابزار تمیز کردن CSS

نشانه گذاری کثیف

نشانه گذاری کثیف دقیقاً برعکس مینی فایرها عمل می کند: هر کد را که شما از آن تغذیه می کنید و آن را تمیز می کند ، طول می کشد و خواندن آن را آسان می کند – تا زمانی که کد CSS معتبر باشد. کد حاصل کاملاً زیبا شده است.

سازندگان Dirty Markup می گویند که نزدیک به یک میلیارد خط کد (با در نظر گرفتن نه تنها CSS بلکه HTML و JavaScript) با استفاده از ابزار خود زیباتر شده اند.

انتخابگرهای گرد و غبار

انتخابگرهای گرد و غبار به منظور اسکن یک وب سایت و پیدا کردن انتخاب های CSS استفاده نشده به منظور حذف آنها و کاهش اندازه کد شما ایجاد شده است. به عنوان افزونه ای برای Firefox و Opera کار می کند.

انتخابکنندگان گرد و غبار می توانند در یک صفحه شخصی کار کنند یا یک نقشه سایت کامل را خزوند ، جزئیات کلیه شیوه نامه ها و انتخاب کننده های یافت شده را به شما نشان دهد و آنها را در موارد استفاده و استفاده نشده سازماندهی کند. نسخه Firefox قادر است همزمان با مرور صفحات ، به طور خودکار صفحات را اسکن کند. فقط باید این نکته را در نظر داشته باشید که ، در صورت انجام این کار ، وقایع جهش باعث تغییر اسکن های اضافی در صورت تغییر صفحه می شوند.

CSS Lint

CSS Lint یک رابط حداقلی را ارائه می دهد: فقط یک جعبه متن بزرگ که در آن کد CSS خود را جای می دهید تا آن را “چسبانده” کنید. این نمی گوید که روند پوشش با کد شما چه خواهد کرد ، اما یک پیام هشدار دهنده در بالای صفحه به شما می گوید که نتایج به احساسات شما آسیب می رساند – و همچنین به شما در بهتر کردن کد کمک می کند.

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

# ابزارهای آزمایش / اعتبارسنجی CSS

تست استرس CSS

تست استرس CSS به عنوان یک نشانک (یک قطعه کوچک از کد JavaScript) کار می کند که تست استرس را برای CSS هر صفحه وب مشخص می کند. این ابزار تمام عناصر موجود در کد CSS و کلاسهای آنها را فهرست بندی می کند. سپس تست استرس را با از بین بردن کلاسها یک به یک و زمان بندی شدن صفحه برای پیمایش صفحه شروع می کند.

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

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

خدمات اعتبارسنجی CSS

خدمات اعتبارسنجی CSS برگه های سبک آبشار و (X) HTML را با شیوه نامه تأیید می کند. این ابزار خصوصیات تعریف شده در تمام نسخه های CSS را بررسی می کند. برای اعتبارسنجی یک صفحه یا پرونده CSS ، فقط کافی است URI آن را وارد کنید (شناسه منبع یکنواخت) و گزینه های اصلی مانند مشخصات (نوع CSS برای بررسی) ، دستگاه هدف ، هشدارها برای نشان دادن و آنچه باید با پسوند های فروشنده ارائه دهید. مسائل مرتبط (نمایش خطاها یا هشدارها).

بعد از تنظیم همه ، دکمه بررسی را زده و منتظر نتایج خواهید بود. گزارش نهایی لیستی از خطاها و هشدارها را به شما نشان می دهد ، جایی که می توانید خصوصیات نامعتبر ، خطاهای نحوی ، افزونه های فروشنده ناشناخته را بیابید ، بین بسیاری از موارد دیگر که باید در CSS خود اصلاح کنید تا تنظیم کنید. این گزارش همچنین کلیه کدهای معتبر CSS را در صفحه شما نشان می دهد.

BackstopJS 3

BackstopJS 3 تست رگرسیون بصری رابط های کاربری وب پاسخگو را خودکار می کند. کار خود را با مقایسه یک سری عکسهای DOM انجام می دهد. این لیست مهیج از ویژگی ها را ارائه می دهد: گزارشگری در مرورگر ، تنظیمات چاپ برای صفحه نمایش و برخی از ویژگی های خاص دیگر مانند فیلتر صفحه نمایش و مرجع / تست / بازرس تفاوت تصویری.

با استفاده از اسکریپت های Puppeteer و ChromyJS ، BackstopJS 3 می تواند تعامل های کاربر را شبیه سازی کند ، و می تواند تست هایی را با Chrome Headless انجام دهد. به منظور رفع مشکلات رندر کراس پلتفرم ، رندر داکر یکپارچه نیز دارد. این ابزار می تواند در سطح جهانی یا محلی به عنوان یک بسته مستقل اجرا شود و با CI و کنترل منبع عملکرد خوبی دارد. BackstopJS 3 بسیار آسان برای استفاده است: فقط با سه دستور شما می توانید یک مسیر طولانی را طی کنید.

نتیجه

امیدوارم که ابزارهای CSS فوق به شما کمک کند تا فایلهای CSS برنامه وب خود را برای عملکرد بهتر بهینه کنید. اگر علاقه مند به یادگیری پیشرفته CSS هستید ، این موضوع را بررسی کنید دوره درخشان.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me