ایجاد: ۱۴:۱۰ ۱۳۹۱/۱۰/۴
ویرایش: ۱۴:۳۰ ۱۳۹۲/۱۰/۱۶

آموزش‌ها

»

هنر 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. نکات و ترفندهایی برای قالب‌دهی به نمای چاپ صفحات وب

مدیریت

نام وسیله

اعتبار ورود

نام کاربری

رمز عبور

رمز یکبارمصرف

... لیست تمام آموزش‌ها

تبلیغات

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

دامنه‌هایی که می‌تواند مصرف مذهبی داشته باشد:
دامنه‌هایی که می‌تواند مصرف تخصصی داشته باشد:
دامنه‌هایی که می‌تواند مصرف شخصی/عمومی داشته باشد: