بهینه سازی کدهای CSS

شنبه, ۵ام بهمن , ۱۳۸۷ | ۴ دیدگاه

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

امروز قصد دارم به نکات بسیار ریز و مهم  اشاره کنم و شما باید این بحث را بسط داده و در تمام کدهایی که برای Style های صفحات خود مینویسید آنرا اعمال کنید.

مثال ۱- فرص کنید میخواهید برای وب سایتی پس زمینه یا BackGround تعیین کنید و آنرا در سمت راست صفحه و بدون تکرار قرار دهید، شاید در وحله اول شما کدی مانند این بنویسید :

  1. background-image: url(images/example-background.png);
  2. background-repeat:no-repeat;
  3. background-position:right;

این کد از نظر اجرایی به صورت صحیح کار میکنید اما چون تمام Attribute ها به Property پس زمینه (BackGround) اشاره دارد میتوان کد فوق را بصورت بهینه شده و به اینصورت بنویسیم :

۱٫background: url(images/example-background.png) no-repeat right;

مثال ۲- بهینه سازی Margin , Padding

مسلما از Attribute های فوق به کررات استفاده کرده اید و میدانید که این ۲ بسیار کارا و مفید هستند. فرض کنید میخواهید برای Table که ساخته اید Margin و Padding تعیین کنید، شاید در وحله اول کد را بصورت بهینه نشده و به اینصورت بنویسید :

  1. margin-top:30px;
  2. margin-right:15px;
  3. margin-bottom:30px;
  4. margin-left:15px;
  5. padding-top:15px;
  6. padding-right:10px;
  7. padding:bottombottom:15px;
  8. margin-left:10px;

میبینید که خواسته خود را در ۸ خط نوشتید، اما حالا نگاه کنید به فرم بهینه این دستور :

  1. margin:30px 15px 30px 15px;
  2. padding:15px 10px 15px 10px;

در رابطه با margin و padding باید بدانید که میتوانید کل ۴ جهت و یا تنها یک جهت را مطابق شکل زیر مقدار دهی کنید :

همچنین قوانین ذکر شده در عکس بالا برای Padding و Border-Width هم کاربرد دارد .

مثال ۳- بهینه سازی Attribute فونت

در این مثال هم مانند مثالهای قبل کدهای بهینه نشده را به کدهای بهینه شده تبدیل میکنیم :

  1. font-family:Arial, Helvetica, sans-serif;
  2. font-size:36px;
  3. font-weight:lighter;

کد بهینه شده :

  1. font: lighter 36px Arial, Helvetica, sans-serif;
امیدوارم که مثالهای آورده شده کارایی لازم رو داشته باشند و از این به بعد کدنویسی های خود را بصورت بهینه سازی شده بنویسید. موفق باشید
Be Sociable, Share!


۴ دیدگاه


  1. Alireza
    ۲۹ بهمن ۱۳۸۹

    آقای مهندس،من همیشه به بلاگ شما به عنوان یک مرجع برای رفع مشکلاتم استفاده میکنم،واقعا بهتون خسته نباشید میگم..
    اگرامکان پذیره درمورد MSDN و امکاناتی که مایکروسافت (هاست،کدینگ،و..) در اون بخش برای سیستم های لایسنس دار در اختیار میگذاره یک مرجع آموزشی بهم معرفی کنید،ممنونم ازتون..اگرامکانش هست،آموزش ویژوال ۲۰۱۰ رو هم به مطالبتون اضافه کنید..با سپاس



  2. […] […]



  3. […] خلاصه نویسی کدهای CSS که می توانید در اینجا مطالبی را در این مورد […]



  4. […] خلاصه نویسی کدهای CSS که می توانید در اینجا مطالبی را در این مورد […]



دیدگاه خود را بنویسید