آموزش‌ها

»

هنر css نویسی (نکاتی برای بهتر نوشتن استایل صفحات وب)

css انعطاف بالایی دارد و کارهایی که ما بخواهیم با استایل صفحات انجام دهیم را با روش‌های مختلف و سلکتورهای متعدد می‌توان انجام داد.

انتخاب موثر در سلکتورهای CSS

با همه کدهای زیر می‌توان color یک li خاص که دارای id برابر با xyz است را عوض کرد:

*             {color:blue;}
li            {color:green;}
li:first-line {color:yellow;}
ul li         {color:aqua;}
ul ol+li      {color:pink;}
h1 + *[rel=up]{color:navy;}
ul ol li.red  {color:red;}
li.red.level  {color:orange;}
#xyz         {color:silver;}
style="color:gray;"

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

کارایی (Performance) در CSS

با بزرگ شدن یک سایت و افزایش حجم css آن، بحث performance اهمیت می‌یابد چرا که:

• برخی کدهای css (مانند visibility:hidden) موجب تغییر در DOM می‌شود و مرورگر مجبور است موقعیت عناصر را کلا دوباره محاسبه کند
• برخی کدهای css (در نسخه 3 به بعد) حاوی انیمیشن یک المان است
• برخی کدهای css نسبت به حرکات کاربر قرار است واکنش نشان دهد (مثل hover)
• و ...

و در یک css بزرگ (مثلا 200,000 خط کد css) خود css موجب کندی سایت می‌شود.
در این خصوص کتب متعددی نوشته شده (مثل کتاب Developing Large Web Applications و ...)
در ادامه چند نمونه از نکاتی که (هرچند موجب کاهش خوانایی کد css می‌شود) اما باعث افزایش پرفرمنس و سرعت css می‌شود، ذکر می‌شود:

• حذف نام تگ در مورد غیر ضروری
  مثلا بجای ul#myID بهتر است از #myID استفاده شود.
• حذف والدهای غیرضروری
  مثلا بجای html div table tr td بهتر است از td استفاده شود.
• اجتناب از بکار بردن انتخابگر همه (ستاره)
  مثلا استفاده از * یا .myClass * به هیچ‌وجه توصیه نمی‌شود.
• از chain کردن اجتناب کنید
  مثلا بجای .icon.small بهتر است یکی از کلاس‌ها را بکار ببرید یا اینکه از یک انتخابگر مجزا استفاده کنید مثل .icon-small
  خاطرنشان می‌شود که chain کردن علاوه بر پرفرمنس، اشکالات متعدد دیگری هم دارد. مثلا در برخی براوزرهای قدیمی (IE) کار نمی‌کند و همچنین در برخی براوزرهای مدرن نیز به صورت ناقص کار می‌کند.

در خصوص پرفرمنس مطلب زیاد است و این مطلب در آینده تکمیل خواهد شد...

---

یادداشت‌های مرتبط

1. سرویس های آنلاین رایگان برای نوشتن، تست و بهینه سازی کدهای برنامه نویسی
2. استفاده از فونت دلخواه در صفحات وب
3. انیمیشن با CSS
4. همه چیز درباره داده ها و تصاویر Inline درون برنامه ای
5. نکاتی برای افزایش سرعت و کارآمدی سایت
6. حذف درخواست اضافه تصویر انیمیشن لودینگ
7. ادیتورهای محتوای غنی شده برای صفحات وب
8. همه چیز درباره کش(cache) سمت سرور و کاربر
9. کلید خارجی (Foreign Key) ، محاسن و معایب آن
10. روش ها و تکنیک های پنهان کردن ایمیل
11. بهینه سازی آنلاین سی اس اس و جاوا اسکریپت
12. استفاده از Media Queries ها و اصلاح عدم پشتیبانی IE6-8
13. نکات و ترفندهایی برای قالب دهی به نمای چاپ صفحات وب