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

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

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

Smashing Magazine از آن مجله‌های نو پایی است که پیرامون توسعه و طراحی وب و با هدف بهره‌گیری از تکنیک‌های جدید، مطالب جالبی منتشر می‌کند. کم و بیش مطالبش را می‌خوانم. این مجله آنلاین دیروز مقاله جالبی با عنوان “35 طراح و 5 سئوال” منتشر کرد که خواندنش را به همه طراحان و علاقمندان به وب توصیه می‌کنم.

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

• 1- یک جنبه از طرح که بیشترین ارجحیت را به آن می‌دهید.
  2- یکی از مفیدترین تکنیک‌های CSS که اغلب از آن استفاده می‌کنید.
  3- یک فونت که اغلب در پروژه‌ها بکار می‌برید.
  4- یک کتاب عالی در زمینه طراحی که خواندن آن را توصیه می‌کنید.
  5- یک مجله در زمینه طراحی که بصورت روانه یا هفتگی می‌خوانید.

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

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

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

تغییر سایز متن بدون استفاده از واحد پیکسل
(در این پست سعی می کنم بیشتر در مورد تایپوگرافی بنویسم) قدیما هر وقت طرح های حرفه ای رو نگاه می کردم می دیدم بیشترشون برای سایز متن ها از واحد em بجای px استفاده می کنن. حالا دلیل این کار بماند آخر مقاله؟ اما جالب اینجا بود که اگر المانی رو که مثلا اندازش 12px بود رو می خواستی معادل کنی به واحد em بجاش می نوشتن 1.2em یعنی تقسیم بر ده می کردنش. کار ساده ای به نظر می رسید. ما هم گفتیم همه المان هایی که به واحد پیکسل هستند رو بر ده تقسیم و بجاش از em استفاده می کنیم. ولی دیدم خیلی سایزش متفاوت شد. دو تا کلاس ساده به شکل زیر ایجاد کنید: ادامه مطلب …

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

این خیلی مهمه که هر چیزی در یک امتداد و هم تراز با بقیه عناصر باشه. در ابتدا کار طراحی باید یکسری خطوط نامرئی رسم کنید که تماما عناصر صفحه رو پوشش بده. این خطوط کمک می کنه تا یک المان رو به اندازه معین و متناسبی ازلبه چپ یا راست ، بالا یا پایین فاصله گذاری کنید. یا قرارگیری عناصر رو در حالت های قرینه وار بررسی کنید و اون ها در بهترین حالت با همدیگه تطبیق بدین. این خطوط باید در ذهن یک طراح خلاق خود به خود رسم بشن ولی اگر اول کارید بهتره با یک کاغذ و قلم شروع کنید. ادامه مطلب …