آشنایی با بهترین ترفندهای CSS در طراحی صفحات وب
آشنایی با بهترین ترفندهای CSS در طراحی صفحات وب
با یکی دیگر از آموزش های زبان استایل دهی صفحات وب CSS با شما همراه هستیم. مجموعه ای از زیباترین و بهترین ترفندهای CSS را در این مطلب بررسی و تست خواهیم کرد، هرکدام از این ترفندهای CSS می تواند در بخش های مختلفی از طراحی استایل صفحات وبسایت شما کاربرد داشته باشد.
پس با آموزشی دیگر از استایل دهی در طراحی صفحات وب با کدنویسی به زبان ساده همراه باشید.
ابتدا می توانید نگاهی به آموزش های قبلی از استایل دهی صفحات وبسایت بیندازید تا اطلاعات اولیه ای از آشنایی با CSS داشته باشید.
۳ نوع اصلی استایل شیت در CSS
Inline
استایل شیتهای inline دارای کدهایی است که در تگ یک سند نوشته شده‌اند. آنها فقط روی تگی که در آن به کار رفته‌اند، تاثیر می‌گذارند:
|
1 |
<a href="#" style="text-decoration: none;"> |
Embedded
استایل شیتهای Embeded دارای کدهایی هستند که به صورت embed شده در رأس یک سند قرار دارند. این استایل‌ها تنها روی صفحه‌ای تاثیر دارند که در آن تعبیه یا embed شده‌اند:
|
1 2 3 |
<style type="text/css"> p { color: #00f; } </style> |
External
این نوع از استایل شیتها در یک سند جداگانه ایجاد شده و سپس به انواع مختلفی از سندهای تحت وب ضمیمه می‌شوند. این استایل شیتهای اکسترنال روی هر سندی که به آن ضمیمه شوند، تاثیر می‌گذارند:
|
1 |
<link rel="stylesheet" type="text/css" href="styles.css" /> |
بهترین ترفندهای CSS در طراحی صفحات وب
۱- کد های CSS خود را سازماندهی کنید
در هر جنبه‌ای از زندگی، سازماندهی به امور بسیار کمک کننده است و می‌تواند به کاهش استرس و رسیدگی ساده‌تر به کارها کمک کند. در مورد کدهای CSS هم دقیقا همینطور است. در اولین مورد از ترفندهای CSS به سازماندهی کدها باید بپردازیم، به جای نوشتن کدها به ترتیبی که به ذهنتان می‌رسد، بهتر است کدها را در آرایشی سازماندهی شده بنویسید.
ابتدا مواردی که اهمیت کمتری دارند را نوشته و سپس به ترتیب به موارد مهم‌تر بپردازید. این کار باعث ایجاد یک ساختار منطقی میشود که کار ویرایش CSS را بسیار ساده‌تر می‌سازد.
استفاده از یک آرایش و ساختار ساده نه تنها برای ویرایش‌های بعدی مفید است، بلکه به برنامه نویسانی که بعدا با کد شما سر و کار خواهند داشت هم کار را ساده‌تر می‌سازد:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
۱٫ Generic Items (body, a, p, h1, etc.) ۲٫ #header ۳٫ #nav-menu ۴٫ #main-content /****** main content *********/ styles goes here... /****** footer *********/ styles go here... |
۲- از inline CSS اجتناب کنید
این مورد یکی از مهترین ترفندهای CSS است که نقش مهمی در امتیازدهی سئو دارد. گرچه inline css هم کاربردهای خودش را دارد اما بنا به دلایلی باید از استفاده زیاد از آن اجتناب کرد. یکی از مهم‌ترین دلایل این است که استایل‌های inline، محتوا را از طرح جدا نمی‌کنند. این ویژگی می‌تواند کار برنامه نویسی و طراحی را با دشواری‌هایی رو به رو کند.
دلیل دیگر این است که نگهداری از این استایل بسیار دشوار است. در نهایت، این که inline css به راحتی قابل دسترسی نبوده و صفحات وب سایت را سنگین می‌کند.
۳- محتوا را از طراحی جدا کنید
یکی از مهم‌ترین دلایل برای استفاده از CSS جدا سازی کدهای طراحی از HTML و نگهداری آنها در مکانی دیگر است تا طراح به راحتی بتواند به آنها دسترسی پیدا کند. این ایده بسیار مفید است چون طراح یک وب سایت لزوما نباید برنامه نویس محتوا هم باشد.
۴- تاریخ زدن، انتخاب عنوان و امضا در CSS
وقتی دیگران نیاز دارند تا سوالاتی در مورد CSS بپرسند، قرار دادن اطلاعات تماس در بالای کدها بسیار مفید است. این کار حتی در زمان طراحی مواردی مانند تم و قالب برای دیگران هم مفید است.
همچنین، یک ترفند خوب دیگر افزودن کد HTML برای رنگ‌های نمونه در بالای کدها است. این کار باعث میشود در وقت فردی که کار ویرایش و تغییرات را انجام می‌دهد، تا حد زیادی صرفه جویی شود چون آنها مجبور نیستند برای یافتن کد رنگ‌ها تلاش کنند، تنها کاری که باید انجام دهند اسکرول کردن به بالای کد و کپی کردن آن است:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
/*====== Onextrapixel Team Copyright 2011 OXP Written for - www.onextrapixel.com swatch colors ------------- ۱۳۴۳۷a - dark blue ۱d74be - mid blue e1e1e1 - light gray a3a4a4 - mid gray ۸a8a8a - gray ======== */ |
۵- یک کتابخانه از قالب های CSS داشته باشید
اگر اغلب در تمپلیت CSS از ساختار مشابهی استفاده میشود، چرا یک کپی از آن را نگه نداریم؟ نیازی نیست هر بار همه چیز را از صفر شروع کنیم. برای صرفه جویی در وقت، تمام کدها را برداشته و فایل را به عنوان یک فایل CSS برای استفاده‌های بعدی ذخیره کنید.
۶- از CSS کوتاه استفاده کنید
برای اینکه استایل شیتها سریع‌تر بارگزاری شده و در زمان صرفه جویی کنید، همیشه از کدهای کوتاه استفاده کنید. این کار باعث نظم و تمیزی استایل شیت شده و تمرین خوبی هم برای کدنویسی با CSS محسوب میشود. شما می‌توانید به جای کد زیر:
|
1 2 3 4 5 |
#crayon { margin-left: 5px; margin-right: 7px; margin-top: 8px; } |
از این کد استفاده کنید:
|
1 2 3 |
#crayon { margin: 8px 7px 0px 5px; // top, right, bottom and left values respectively. } |
۷- از شیوه های مفید برای نام گذاری در CSS استفاده کنید
همانطور که بالاتر هم گفته شد، یکی از بهترین دلایل برای استفاده از CSS، مزیت امکان جداسازی استایل‌ها از محتوا است. CSS کار طراحی مجدد یک سایت را بسیار ساده کرده است و نیازی به دستکاری HTML هم نیست.
اگر ستون ID شامل نام‌هایی باشد که تغییر آنها در آینده سخت است، این می‌تواند محدود کننده بوده و زمان زیادی را از شما بگیرد. از نام‌هایی استفاده کنید که می‌توانند تطبیق پذیر باشند. نام ستونی را col-left یا نام‌هایی مانند این نگذارید چون در آینده جای زیادی برای تغییر آن وجود نخواهد داشت.
۸- به جای زیرخط از خط فاصله در CSS استفاده کنید
اگر در کد خود از زیرخط (ـ) استفاده کنید، در مرورگرهای قدیمی ممکن است کدهای CSS شما کار نکند. استفاده از خط فاصله به جای زیرخط، می‌تواند به سازگاری بیشتر با نسخه‌های قدیمی شود.
۹- اجتناب از تکراری نویسی در CSS
یکی از بهترین ترفندهای CSS که می‌تواند زندگی شما را ساده‌تر کند استفاده از میانبر در هر جای ممکن است. همیشه به دنبال روش‌هایی برای گروه بندی آیتم‌های مشابهی باشید که ممکن است از یک نوع فونت، حاشیه و رنگ استفاده کنند.
راهی که CSS این میانبرها را تفسیر می‌کند به خاطر بسپارید. ترتیب آن به صورت بالا، راست، پایین و چپ است. حرکتی خلاف عقربه‌های ساعت را در نظر بگیرید که از ساعت ۱۲ آغاز شده است:
|
1 2 3 4 5 |
h1, h2 { margin: 1em 2em ; font-size: 1em; color: #222; } |
کد بالا بسیار کارامدتر از این است:
|
1 2 3 4 5 6 7 8 9 10 11 |
h1 { margin: 1em 2em ; font-size: 1em; color: #222; } h2 { margin: 1em 2em ; font-size: 1em; color: #222; } |
۱۰- از تصاویر بزرگ در صفحات وب استفاده نکنید
استفاده از تصاویر بزرگ در پس زمینه صفحات وب باعث افزایش زمان بارگذاری صفحه وب سایت خواهد شد. بهترین کار این است که تا حد ممکن از تصاویر کوچک استفاده کرده و هر زمان که نیاز بود از ویژگی‌های تکراری CSS استفاده کنید:
|
1 2 3 |
body { background:url(bg.jpg) repeat-x; } |
۱۱- برای استایل شیت های کوچک تر در CSS بهینه سازی کنید
با استفاده از برخی از نکات بالا می‌توان به راحتی اندازه استایل شیت را کوچک کرد. با داشتن استایل شیتهای کوچک‌تر، مقدار زمان بارگذاری صفحه تا حد زیادی کاهش می‌یابد. همچنین، نگهداری و بروز رسانی آن هم ساده‌تر خواهد شد. همیشه کدهای غیر ضروری را حذف کنید.
هنگام استفاده از فریم ورک‌های CSS با دقت عمل کنید چون می‌توانند کدهای غیر ضروری زیادی به کدهای شما اضافه کنند که هیچ وقت مورد استفاده قرار نمی‌گیرند. روش دیگر برای کوچک کردن استایل شیت این است که صفر را به عنوان واحد اندازه گیری در نظر نگیرید. اگر حاشیه به صورت صفر تنظیم شود، نیازی نیست آن را ۰px یا ۰em بنامید. CSS درک می‌کند که صفر همان صفر است نه واحد اندازه گیری.
۱۲- CSS را اعتبارسنجی کنید
اگر همه چیز همان طور که برنامه ریزی کرده اید نتیجه ندهد، فهمیدن اینکه خطاها در کجا قرار دارند کاری زمان‌بر و خسته کننده است. برای صرفه جویی در زمان از CSS Validator وب سایت W3C استفاده کنید تا برخی از خطاهای موجود CSS را پیدا کنید. این ابزار رایگان بوده و واقعا مفید است.
۱۳- از Reset CSS استفاده کنید
با استفاده از CSS reset، از ناسازگاری‌های مرورگرها اجتناب میشود. در عمل، استفاده از این قابلیت برای حذف حاشیه‌هایی که ناسازگاری دارند و همچنین ارتفاع خط، padding و دیگر ویژگی‌هایی که ناسازگاری دارند و باعث ظاهر متفاوت صفحات می‌شوند هم مفید است. استفاده از CSS reset باعث یک شکلی صفحات وب سایت شما در مرورگرهای مختلف میشود. CSS reset به این شکل است:
|
1 2 3 4 5 6 |
html,body,iv,span,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup, tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td { margin:; padding:; border:; outline:; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; } :focus { outline:; } body { line-height:1; color:#000; background:#fff; } ol,ul { list-style:none; } table { border-collapse:separate; border-spacing:; } caption,th,td { text-align:left; font-weight:normal; } |
۱۴- نوشتن کد های CSS برای مرورگرهای Gecko و سپس استفاده از آن در مرورگرهای IE و Webkit
معمولا اگر CSS به درستی در مرورگرهای Gecko (شامل Netscape، Firefox، Mozilla، Camino، Flock) کار کند، احتمال اینکه در سایر مرورگرهای مانند IE و Webkit (شامل Safari، کروم) به خوبی کار کند زیاد است. برای صرفه جویی در زمان و مشکلاتی که در زمان یافتن خطاها رخ می‌دهد، بهتر است از همان ابتدا CSS را برای مرورگرهای Gecko بنویسید.
۱۵- داشتن نظم در کدهای CSS
بهتر است عادت کنید که استایل شیت های مخصوص مرورگر را از یکدیگر جدا نگه دارید و کامنت‌های شرطی جاوا اسکریپت و کدهای سمت سرور را هم در صورت نیاز در آن قرار دهید. این روش برای اجتناب از خطاهای CSS در استایل شیتهای اصلی CSS بسیار مفید است. برای داشتن کدهای تمیز و قابل مدیریت، استفاده از این روش لازم است.
در انتها با ۱۵ مورد از بهترین ترفندهای CSS آشنا شدید، امیدواریم در آموزش های بعدی شما را با مفاهیم کاربردی CSS بیشتر آشنا کنیم.