پارس جوم :: انجمن های تخصصی جوملا

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

کد: 

background-image: url(images/example-background.png);

    background-repeat:no-repeat;

    background-position:right;

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

کد: 

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

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

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

کد: 

margin-top:30px;

    margin-right:15px;

    margin-bottom:30px;

    margin-left:15px;

    padding-top:15px;

    padding-right:10px;

    padding:bottombottom:15px;

    margin-left:10px;

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

کد: 

margin:30px 15px 30px 15px;

    padding:15px 10px 15px 10px;

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

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

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

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

کد: 

font-family:Arial, Helvetica, sans-serif;

    font-size:36px;

    font-weight:lighter;

کد بهینه شده :

کد: 

font: lighter 36px Arial, Helvetica, sans-serif;

پارس جوم :: انجمن های تخصصی جوملا

publichtml