مختصر نویسی در CSS

August 17, 2005 at 08:07 pm

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

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

در اولین مبحث به رنگ ها می پردازیم. بهترین روش عمومی برای کاربرد رنگ در CSS استفاده از آن در مبنای شانزده (هگزادسیمال) بین 00 تا FF است، که قبل از آن نیز علامت پوند (#) می آید. هر رنگ 6 رقم طول دارد، دو رقم برای هر بایت.

دو رقم اول برای درجه رنگ قرمز، دو رقم دوم درجه رنگ سبز و و دو رقم آخر شدت رنگ آبی را نشان می دهد. نکته ای که بیشتر افراد نمی دانند این است که هر رنگ مبنای 16 از سه جفت تشکیل شده است، شما می توانید یک رقم از هر جفت رنگ امن را حذف کنید. برای مثال مقدار 336699 با 369 برابر خواهد شد.

همان گونه که می دانید تنظیم یک رنگ امن به سادگی با انتخاب ترکیبی از مقدارهای امن مبنای 16 انجام می شود. در این حالت FF9966 یک رنگ امن مبنای 16 است اما DB9370 این چنین نیست، خوشبختانه اکثر ابزارهای طراحی وب نظیر dreamweaver ماکرومدیا دارای سلکتور رنگ های امن هستند.

هر چند تنظیم یک رنگ نا امن به نزدیکترین رنگ امن نسبتا ساده است، فقط هر یک از مقادیر قرمز، سبز یا آبی را به نزدیکترین مقدار امن بالا یا پایین گرد کنید. برای مثال رنگ نا امن 85A0C9 را می توان به رنگ امن 8899CC تبدیل و معادل آن یعنی 89C را جایگزین کرد. در این مثال 85 به بالا گرد شده یعنی 88 و A0 به پایین یعنی 99 و در آخر C9 را به بالا یعنی CC گرد کرده ایم.

مبحث رنگ های امن، موضوع بسیار جالبی است. اگر از این مفاهیم چیزی نمی گیرید، نگران نباشید، سعی می شود در آینده مفصل تر بیان شود. در مورد بعدی به سراغ مختصر نویسی مشخصه های ابعاد یه باکس می رویم. برای برخی از صفت های یک باکس می توان حداقل یک و حداکثر 4 مقدار در نظر گرفت. برای درک بیشتر نمود زیر را ببینید که در آن برای صفت اول یک مقدار، برای صفت دوم دو مقدار و همین طور تا صفت چهارم، که برایش 4 مقدار در نظر گرفته شده است:

property:value1;
property:value1 value2;
property:value1 value2 value3;
property:value1 value2 value3 value4; 

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

لازم نیست خودتان را به زخمت بیندازید. برای آنکه این موارد بهتر در ذهنتان بماند می توانید بمانند یک ساعت به آن نگاه کنید. ساعت 12 بالا، ساعت 3 راست، ساعت 6 پایین و ساعت 9 در سمت چپ. با این روش مشکلی در حفظ کردنشان نخواهید داشت.

برای مثال صفت Padding را در نظر می گیریم که برای تعیین لایه گذاری جهات یک مولفه بکار می رود. اگر بخواهیم به صورت تک تک مقدار لایه گذاری را برای هر جهت بکار بگیریم باید از فرمی مطابق زیر استفاده کنیم:

padding-top:1em;
padding-right:0;
padding-bottom:2em;
padding-left:0.5em; 

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

 padding:1em 0 2em 0.5em; 

در مبحث بعدی صفت border را بررسی می کنیم که برای تنظیم عرض حاشیه، سبک و رنگ جهات یک کادر مولفه به کار می رود. مشابه مورد قبلی اگر بخواهیم عرض و سبک و رنگ را به صورت تک تک به یک آبجکت نسبت دهیم باید از فرمی مشابه زیر استفاده کنیم:

border-width:1px;
border-style:solid;
border-color:#000; 

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

border:1px solid #000; 

شاید نیاز داشته باشید که یک مقدار را به همه جهات ندهید. فرض کنیم قصد دارید عرض حاشیه بالا و پایین را 1 پیکسل و سمت چپ و راست را برابر صفر در نظر بگیرید در این صورت نیازی نیست که مطابق زیر عمل کنیم:

border-top-width:1px;
border-right-width:0;
border-bottom-width:1px;
border-left-width:0;

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

border-width:1px 0 1px 0; 

البته خصوصیات دیگری جدای از عرض، سبک و رنگ برای صفت border تعیین شده که دارای پیشوند –moz- است اما بخشی از مشخصات رسمی CSS نمی باشند، ولی توسط سبک های مرورگرهای نت اسکیپ و موزیلا پذیرفته شده اند و ممکن است در نهایت قسمتی از 3 CSS شوند.

یکی دیگر از مواردی که می توانید مختصر نویسی را در آن بکار برید، پس زمینه یا به عبارتی همان background است. بجای آنکه از صفات تکی background-color برای رنگ پس زمینه، background-image برای تصویر پس زمینه، background-repeat برای تعیین اینکه آیا پس زمینه تکرار شود یا خیر و چگونه تکرار شود، background-attachment برای تعیین اینکه آیا تصویر پس زمینه در طول سند حرکت کند یا در مکانی ثابت باشد و background-position برای اینکه وقتی تصویر پس زمینه ای تعیین شده باشد، این صفت محل اولیه را نسبت به کادری که محتویات مولفه را در برگرفته است مشخص می کند، استفاده کنیم، می توانیم تمام این صفات را به طور مختصر در صفت background بگنجانیم. برای مثال مورد زیر را در نظر بگیرید

background-color:#f00;
background-image:url(bg.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0; 

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

background:#f00 url(bg.gif) no-repeat fixed 0 0; 

این صفات تنها جزئی از اختصارات بود. موارد دیگری برای صفت هایی همچون font، list و outline موجود است که در حوصله این مقاله نمی گنجد. انشا الله در پست های آتی در موردشان بحث خواهد شد. این مقاله اقتباسی است از یادداشت های جناب Roger Johansson در اینجا بعلاوه افزودنی ها و کاستنی های فراوان.

دسته: سی اس اس | نویسنده: مرتضی الوانی
  1. 23 نظر برای این مطلب ارسال شده است. نظر خود را ارسال کنيد »

  1. 1

    papiyoon


    اقا خیلی عالی بود ایول

    August 17, 2005 at 8:59 pm

  2. 2

    محمد خان


    مفید

    August 17, 2005 at 9:09 pm

  3. 3

    مملی آنلاین


    very hot !

    August 17, 2005 at 9:28 pm

  4. 4

    مانی منجمی


    مهمترینش فونت بود ، اونم اضافه کنی ، خیلی کامل می شه ،
    خسته نباشی

    August 18, 2005 at 12:39 am

  5. 5

    جیک و پیک


    ایول خیلی مفید بود مخصوصا اون قسمت بردرها.

    August 18, 2005 at 2:37 am

  6. 6

    آروین ابراهیم‌پور


    سلام
    حال شما خوبه؟
    با تبادل لینک موافقین؟

    August 18, 2005 at 5:37 am

  7. 7

    مهدي


    آقا شرمنده ها اصلا به اين پستت ربطي نداره.
    من تو وبلاگ شما در قسمت وردپرس اون مقاله آمارگيري حرفه در وردپرس رو انجام دادم ولي آخرش كه پلاگين رو فعال كردم و بعد خواستم برم تو صفحه ايندكس اين ارورو داد:
    Warning: main(../wp-admin/auth.php): failed to open stream: No such file or directory in /home/public_html/wp-stattraq/reporter/options.php on line 2

    Fatal error: main(): Failed opening required ‘../wp-admin/auth.php’ (include_path=’.:/usr/local/lib/php’) in /home/public_html/wp-stattraq/reporter/options.php on line 2
    دليل اينكه اينجا نوشتم اينه كه اون پستت فيلتر شده و نمي شد فرستاد. اگه كمك كني ممنون ميشم

    September 1, 2005 at 2:56 pm

  8. 8

    وب نما


    خوشحالم از اینکه میبینم دوباره برگشتی .
    آقا هرچی میتونی CSS یاد بده . بلکه ما هم به یه جایی برسیم .
    ممنون .
    رلستی به ما هم سر برن . خوشحالمون میکنی .
    موفق باشی .

    September 4, 2005 at 12:31 pm

  9. 9

    مهدي


    علي آقا يه دنيا ممنون به خاطر كمك هايي كه كردين
    البته كمكهاتون غير مستقيم بود يعني از مطالبتون استفاده كردم.
    بالاخره اين وبلاگ ما هم راه افتاد
    سر بزني خوشحال ميشم
    با تشكر مجدد

    September 4, 2005 at 7:03 pm

  10. 10

    محمد


    شما رفتی و اومدی ولی هنوز این فونت textarea نظرات تاهما نشده ((محمدخان!!!)) یادش رفت حتما بگه
    اگه حالا این تاهما بشه چی میشه
    ____________
    در مورد این moz یه کم بیشتر توضیح بده …

    September 6, 2005 at 1:49 am

  11. 11

    محمد مينايي


    دوست عزيز من خيلي وقته لينك دادم.
    همين…

    September 7, 2005 at 11:34 am

  12. 12

    Mohammadix


    سلام مرتضي
    وبلاگ خيلي مفيدي و دندون شكني داري. منم ورد پرسي هستم اگه حاضر باشي با هم تبادل لينكي داشته باشم.

    September 12, 2005 at 3:23 pm

  13. 13

    کوروش


    از شما بسیار سپاس گذارم

    September 24, 2005 at 7:41 pm

  14. 14

    محسن حمیدی


    آقا ممنون دستت درست ایول
    مفید بود
    کاملش کنی دیگه هورا میشه :)
    مخصوصا واسه فونت و مشخصات فونت
    خواستی بگو کمکت میکنم یه مرجع css با ه مبزنیم
    من کارم تو استاندارد سازی وبه
    سر بزن
    فعلا

    December 4, 2005 at 11:06 pm

  15. 15

    amirhhb


    agha kheili karetun doroste fagaht ageh ye emkane print ham be in maghalatun ezafeh mikardid digeh nureh alanur mishod ,MOVAFAGH VA PIRUZ BASHID >:d

    September 12, 2006 at 10:40 am

  16. 16

    نبی


    دومت گرم. خیلی جالب بود

    October 21, 2006 at 1:59 am

  17. 17

    بهروز


    بسیار عالی بود

    در ضمن بنده به شما لینک دادم

    October 28, 2008 at 6:23 pm

  18. 18

    وبلاگ شخصی علی فرهادی » بایگانی وب‌نامه (وبلاگ) » راهکارهایی برای بهینه سازی سایت


    [...] کردن کد تا حدی از حجم CSS کم کرد. (در این مورد آقایان الوانی و ستاری به طور مفصل توضیح [...]

    December 26, 2008 at 10:57 pm

  19. 19

    خلاصه‌نویسی CSS » اینترنت یکجا دانلود کنید


    [...] مطلب مرتبط: http://weblog.alvanweb.com/2005/08/17/css-shorthand [...]

    March 2, 2010 at 2:08 pm

  20. 20

    این روش ها برای افزایش سرعت سایت شما توصیه می شود؟ | eJostjoo


    [...] کردن کد تا حدی از حجم CSS کم کرد. (در این مورد آقایان الوانی و ستاری به طور مفصل توضیح [...]

    July 10, 2010 at 4:17 pm

  21. 21

    این روش ها برای افزایش سرعت سایت شما توصیه می شود؟


    [...] کردن کد تا حدی از حجم CSS کم کرد. (در این مورد آقایان الوانی و ستاری به طور مفصل توضیح [...]

    August 6, 2010 at 12:34 pm

  22. 22

    طراح وردپرس | طراحی انواع پوسته وردپرس


    [...] کردن کد تا حدی از حجم CSS کم کرد. (در این مورد آقایان الوانی و ستاری به طور مفصل توضیح [...]

    January 8, 2014 at 12:38 am

  23. 23

    افزایش سرعت وب سایت شما با چند راه کار ساده - WP-NEWS


    [...] کردن کد تا حدی از حجم CSS کم کرد. (در این مورد آقایان الوانی و ستاری به طور مفصل توضیح [...]

    February 27, 2014 at 6:33 pm

پیامک صوتی