شايان
مدیران قدیمی
- تاریخ عضویت
- 2 سپتامبر 2003
- نوشتهها
- 4,813
- لایکها
- 9
با توجه به همه گیر شدن طرح های مبتنی بر 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 مقدار در نظر گرفته شده است:
اگر از یک مقدار استفاده شود، یعنی به صفت یک مقدار نسبت داده شود آن مقدار برای همه جهات لحاظ می شود. اگر از دو مقدار استفاده شود، مقدار اول برای بالا و پایین و مقدار دوم برای چپ و راست در نظر گرفته می شود. اگر از سه مقدار استفاده شود، مقدار اول برای بالا، مقدار دوم برای چپ و راست و مقدار سوم برای پایین لحاظ خواهد شد. و در انتها اگر از 4 مقدار استفاده شود، مقدار اول برای بالا، مقدار دوم سمت راست، مقدار سوم پایین و مقدار چهارم برای چپ خواهد بود.
لازم نیست خودتان را به زخمت بیندازید. برای آنکه این موارد بهتر در ذهنتان بماند می توانید بمانند یک ساعت به آن نگاه کنید. ساعت 12 بالا، ساعت 3 راست، ساعت 6 پایین و ساعت 9 در سمت چپ. با این روش مشکلی در حفظ کردنشان نخواهید داشت.
برای مثال صفت Padding را در نظر می گیریم که برای تعیین لایه گذاری جهات یک مولفه بکار می رود. اگر بخواهیم به صورت تک تک مقدار لایه گذاری را برای هر جهت بکار بگیریم باید از فرمی مطابق زیر استفاده کنیم:
در حالی که اگر بخواهیم از صفت مختصر برای تعیین لایه گذاری تمام جهات مولفه استفاده کنیم. یک خط زیر می تواند جایگزین آن شود ( تمام این موارد همچنین برای صفت margin که برای تنظیم کناره های یک مولفه استفاده می شود، کاربرد دارد
در مبحث بعدی صفت border را بررسی می کنیم که برای تنظیم عرض حاشیه، سبک و رنگ جهات یک کادر مولفه به کار می رود. مشابه مورد قبلی اگر بخواهیم عرض و سبک و رنگ را به صورت تک تک به یک آبجکت نسبت دهیم باید از فرمی مشابه زیر استفاده کنیم:
در حالی که صفت border به طور مختصر می تواند به شیوه زیر به کار رود. فکر کنم تا اینجا متوجه شده باشید که تا چه اندازه، مختصر نویسی می تواند در کاهش کدها و مهمتر از آن کاهش سایز فایل موثر باشد.
شاید نیاز داشته باشید که یک مقدار را به همه جهات ندهید. فرض کنیم قصد دارید عرض حاشیه بالا و پایین را 1 پیکسل و سمت چپ و راست را برابر صفر در نظر بگیرید در این صورت نیازی نیست که مطابق زیر عمل کنیم:
بلکه بجای آن می توان یک خط زیر را جایگزین کرد. این موضوع همچنین برای تعیین سبک و رنگ حاشیه در صفت border صادق است.
البته خصوصیات دیگری جدای از عرض، سبک و رنگ برای صفت border تعیین شده که دارای پیشوند –moz- است اما بخشی از مشخصات رسمی CSS نمی باشند، ولی توسط سبک های مرورگرهای نت اسکیپ و موزیلا پذیرفته شده اند و ممکن است در نهایت قسمتی از 3 CSS شوند.
یکی دیگر از مواردی که می توانید مختصر نویسی را در آن بکار برید، پس زمینه یا به عبارتی همان background است. بجای آنکه از صفات تکی background-color برای رنگ پس زمینه، background-image برای تصویر پس زمینه، background-repeat برای تعیین اینکه آیا پس زمینه تکرار شود یا خیر و چگونه تکرار شود، background-attachment برای تعیین اینکه آیا تصویر پس زمینه در طول سند حرکت کند یا در مکانی ثابت باشد و background-position برای اینکه وقتی تصویر پس زمینه ای تعیین شده باشد، این صفت محل اولیه را نسبت به کادری که محتویات مولفه را در برگرفته است مشخص می کند، استفاده کنیم، می توانیم تمام این صفات را به طور مختصر در صفت background بگنجانیم. برای مثال مورد زیر را در نظر بگیرید
حال می توان تمام صفت های فوق را به طور خلاصه و جمع و جور به شکل زیر به کار برد.
این صفات تنها جزئی از اختصارات بود. موارد دیگری برای صفت هایی همچون font، list و outline موجود است که در حوصله این مقاله نمی گنجد. انشا الله در پست های آتی در موردشان بحث خواهد شد. این مقاله اقتباسی است از یادداشت های جناب Roger Johansson در اینجا بعلاوه افزودنی ها و کاستنی های فراوان.
http://weblog.alvanweb.com/2005/08/17/css-shorthand/
اغلب افراد برخی از این مختصر نویسی ها را می دانند اما عده کثیری از آن ناآگاهند. با این راهکار، چندین مشخصه در یک خط خلاصه می شود. بنابراین نه تنها مختصر نویسی صفت ها و عناصر 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 صادق است.
کد:
[COLOR=#000000]border-width:1px 0 1px 0; [/COLOR]
البته خصوصیات دیگری جدای از عرض، سبک و رنگ برای صفت 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 در اینجا بعلاوه افزودنی ها و کاستنی های فراوان.
http://weblog.alvanweb.com/2005/08/17/css-shorthand/