بارها برایم پیش آمده است که در هنگام انجام یک پروژه یک (یا چندین) انتخابگر برای تست ایجاد کرده‌ام و با بالارفتن حجم کدنویسی، یادم رفته است که آن‌ها را پاک کنم. یا برعکس انتخابگری را تعریف کرده‌ام که المانش را به دلایلی پاک کرده‌ام یا نامش را تغییر داده‌ام. شاید برای شما هم اتفاق افتاده باشد.

SitePoint افزونه‌ای بنام Dust-Me Selectors برای فایرفاکس منتشر کرده است که به شما کمک می‌کند به راحتی این سلکتورها را شناسایی کنید.

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

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

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

+ برای ساخت Sitemap می توانید از این سرویس استفاده کنید. وردپرسی ها هم می‌توانند با سرویس گوگل به کمک این پلاگین Sitemap بسازند.

امروز متوجه شدم که این اکستنشن محبوب من با نسخه جدید جی‌میل که جدیداً عرضه شده است تداخل دارد. گوگل برای کاربران سیستم‌ عامل‌های لینوکس و ویندوز راه حلی را پیشنهاد داده است. کافیست در تنظیمات این اکستنشن تیک گزینه نمایش XMLHttpRequests را بردارید و Network Monitoring را هم غیر فعال کنید. البته اگر قصد ندارید آن را تماما از کار بیندازید.

صحبت از Firebug شد. اکستنشنی که هر طراح و توسعه‌دهنده‌ی وب به آن نیاز خواهد داشت. چند روز قبل Roger در وبلاگش مطلبی در مورد شیوه‌های تشخصی سی اس اس با دو ابزار آنلاین نوشته بود که بد نیست مختصری در مورد آنها توضیح بدهم.

همانطور که می‌دانید چندین ابزار وجود دارد که می‌توانید از آنها برای عیب‌یابی سی اس اس استفاده کنید. بعضی‌ها مثل دو اکستنشن Web Developer و Firebug با مرورگرها قابل استفاده هستند. اما گاهی اوقات پیش میاد که دسترسی به این مرورگرها یا اکستنشن‌ها وجود ندارد. هر چند XRAY‌ و MRI این دو ابزار آنلاین، قابلیت‌های سایرین رو به طور کامل ندارند اما می‌توانند کار راه انداز باشند.

XRAY به شما اجازه می‌دهد که تنها با یک کلیک بر روی عنصر، خصوصیات آن عنصر، مثل نوع عنصر، کلاس، آی دی، اندازه، حاشیه‌ها و … را در یک پنجره معلق جدید ببینید. ویژگی جالب آن نمایش عناصر وارث به صورت سلسله مراتبی است.

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

همان اوایلی که Blueprint به عنوان یک سی‌اس‌اس فریمورک (CSS Framework) منتشر شد قصد داشتم در موردش بنویسم اما فرصت مناسبی پیدا نکردم. این روزها فریمورک در توسعه وب معنای کاملاً نامفهومی پیدا کرده است. با فریمورک‌های جاوا اسکریپتی نظیر jQuery ،Yahoo UI و Prototype این مفهوم پر رنگ‌تر شده است. اما اصلاً یک فریمورک چیست؟ و فقط مورد نیاز یک برنامه‌نویس است یا یک طراح وب هم می‌تواند از آن بهره ببرد؟

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

فکر می‌کنم برای مقدمه تا همین اندازه از فریمورک بدانید کافی باشد برای اطلاعات بیشتر می‌توانید مقاله “فریمورک برای طراحان” نوشته Jeff Croft را بخوانید. به گفته نویسنده سی‌اس‌اس فریمورک، همین مقاله باعث شده است تا به فکر ایجاد یک فریمورک عمومی برای سی‌اس‌اس بیفتد. برویم سراغ اصل مطلب که همان سی‌اس‌اس فریمورک و پروژه Blueprint است. ادامه مطلب …

در این مقاله در مورد توضیح نویسی (Commenting) در فایل‌های CSS بحث خواهد شد. علاوه بر بیان مزایا، در انتها معایب آن ذکر و راه‌حل مناسبی پیشنهاد می‌شود. سطح مقاله مبتدی بوده و در زیرگروه مقدمات و پایه آموزش CSS قرار می‌گیرد.

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

افزودن توضیح در CSS بسیار ساده است. یک توضیح در CSS با علامت */ شروع و با /* خاتمه می‌یابد. این نوع از توضیح‌نویسی به عنوان C style شناخته می‌شود چرا که در زبان برنامه‌نویسی C این متد کاربرد دارد. توضیحات می‌توانند در یک یا چند خط باشند و در هر جایی در کنار کد قرار بگیرند: ادامه مطلب …