منوی برگه ها
TwitterRssFacebook
منوی دسته ها

ارسال شده توسط در تاریخ ۲۴ بهم ۱۳۸۸ در طراحی وب | ۸ دیدگاه

مقاله شماره ۱ طراحی وب – ۵ تکنیک مهم در CSS

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

مشکل اول : چرا استایل های CSS من اعمال نمی شوند؟

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

[codesyntax lang=”css”]

#wrap #myStyle
{
color: black;
}

[/codesyntax]

چون Specifity در اینجا بیشتر است متن مشکی باقی می ماند. با اضافه کردن شناسه  wrap# به میزان وزنی انتخاب کننده افزوده می شود. بنابراین استایل اولیه در مقایسه با این استایل نادیده گرفته می شود.

چگونه می توان این مشکل را حل کرد؟ در صورتی که این امکان وجود داشته باشد که استایل ثانویه را حذف کنید این یک راه حل است اما اگر این امکان وجود ندارد، باید به مقدار specificityبیافزایید. به زودی به طور دقیق تر به مفهوم specificity خواهیم پرداخت اما فعلا کد را به صورت زیر تغییر دهید :

[codesyntax lang=”css”]

#wrap p#myStyle
{
color: red;
}

[/codesyntax]

اکنون با اضافه کردن انتخابگر p رنگ متن قرمز می شود و در نتیجه این استایل بر استایل های دیگر غالب می شود.

مشکل دوم : تفاوت موقعیت دهی نسبی و مطلق چیست؟

شاید مبحث موقعیت دهی، برای طراحان تازه کار و متوسط از هر چیز دیگری مشکل تر باشد که البته این به این دلیل نیست که واقعا این مبحث، مبحث مشکلی است. بلکه بیشتر به این دلیل می تواند باشد که شاید نام گذاری مطلق و نسبی برای این مبحث کمی گیج کننده است. برای اینکه این موضوع را به خوبی متوجه شوید، بهتر است که ابتدا با موقعیت دهی مطلق شروع کنیم. فرض کنید که در ابتدا یک فایل HTML و CSS خالی داریم. اگر به طور مثال می خواستیم که یک تصویر را به صورت مطلق در صفحه قرار دهیم، مثلا به فاصله ۱۰۰ پیکسل از چپ و ۱۰۰ پیکسل از بالا، از کد زیر استفاده می کردیم :

[codesyntax lang=”css”]

img
{
position: absolute;
top: 100px;
left: 100px;
}

[/codesyntax]

این هم نتیجه حاصله :

absolutePositionedRelativeToBrowserWindow

نکته مهم : اجزایی که به صورت مطلق موقعیت دهی می شوند، موقعیت آنها نسبت به نزدیکترین جزء والد موقعیت دهی شده تعیین می شود. (به قسمت های رنگی توجه ویژه داشته باشید)

در این مورد خاص، چون هیچ عضو والد موقعیت دهی شده ای وجود ندارد پس موقعیت دهی نسبت به پنجره مرورگر تعیین می شود.

حالا فرض کنید که یک div که به صورت نسبی موقعیت دهی شده است را به دور تصویر خود قرار دهیم :

[codesyntax lang=”html4strict”]

<body>
  <div id="wrapper">
    <img src="#" alt="Some Image" />
  </div>
</body>

[/codesyntax]

خوب به این قسمت توجه کنید : برای اینکه یک مرجع موقعیت دهی (positioning context) ایجاد کنیم باید گزاره position: relative را به div والد در استایل مربوطه وارد کنیم :

[codesyntax lang=”css”]

div#wrapper
{
position: relative;
background: gray; /*Just to see the borders.*/
height: 600px;    /*Because the image is absolutely positioned, we need to force the height.*/
width: 770px;
margin: auto;
}

[/codesyntax]

این هم نتیجه حاصله :

absolutePositioningRelativeToDiv

حالا اگر از موقعیت دهی مطلق استفاده کنیم، موقعیت دهی نسبت به div والد انجام می شود. دقت کنید که استفاده از گزاره position در استایل div والد در اینجا بسیار با اهمیت است و اگر آن را حذف کنیم، موقعیت دهی باز نسبت به پنجره مرورگر انجام می شود.

اطلاعات بیشتر در این زمینه :

cssTricksAbsoluteAndRelativePositioning کریس کویر، چند نمونه مثال عملی را به کار می برد تا نشان دهد که چگونه و چه موقع از موقعیت دهی استفاده کنیم. این آموزش شامل یک دمو و سورس کد قابل دانلود است. برای مطالعه این آموزش روی این لینک کلیک کنید.

digitalWebدر این آموزش برخی از نکات مبهم در یادگیری CSS و به ویژه Positioning تشریح شده است. اگر مهارت های CSS شما متوسط یا حتی ضعیف است با این آموزش می توانید بر CSS مسلط شوید. برای مطالعه این آموزش روی این لینک کلیک کنید.

مشکل سوم : چگونه مشکل مارجین دوبرابر در اینترنت اکسپلورر ۶ را حل کنم؟

برای کسانی که با این مشکل آشنا نیستند به توضیح مختصر این مشکل می پردازم : اگر شما یک جزء را float کنید و سپس در همان جهت float به آن جزء مارجین اضافه کنید، اینترنت اکسپلورر ۶ مقدار مارجین را دوبرابر می کند. به طور مثال یم مارجین ۱۰۰ پیکسلی چپ به ۲۰۰ پیکسل افزایش می یابد.

سه راهکار برای رفع این مشکل وجود دارد که به توضیح آنها می پردازیم :

نوع Display را به Inline تغییر دهید : ساده ترین راه که توسط استیو کلاسون کشف شده است این است که نوع display را به inline تغییر دهید.

[codesyntax lang=”css”]

#floatElement
{
display: inline;
float: left;
margin-left: 100px;
}

[/codesyntax]

استفاده از کامنت های شرطی : خوشبختانه تغییر نوع display اسن مشکل را حل می کند. اما اگر به هر دلیلی بخواهید از روش دیگری استفاده کنید چه؟ اینترنت اکسپلورر به شما اجازه می دهد با استفاده از کامنت های شرطی، ورژن های مختلف مرورگر را نشانه بگیرید.  کد زیر را به تگ head فایل خود اضافه کنید :

[codesyntax lang=”html4strict”]

<!--[if lt IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->

[/codesyntax]

این کد می گوید که اگر ورژن مرورگر بازدید کننده این صفحه ۶ یا پایینتر است یک صفحه سبک خاص را بارگذاری کن. مرورگرهای مدرن امروزی این کد را نادیده می گیرند. حالا در این صفحه سبک خاص باید اصلاحات لازم را انجام دهیم :

[codesyntax lang=”css”]

#floatElement
{
float: left;
margin-left: 50px;
}

[/codesyntax]

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

استفاده از هک underscore : راه های زیادی برای هدف قرار دادن اینترنت اکسپلورر ۶ وجود دارد. به طور معمول روش کامنت های شرطی بر دیگر روش ها ترجیح دارد. اما اگر فقط بخواهیم یک ویژگی را تغییر دهیم از روش underscore استفاده می کنیم. مثال زیر را در نظر بگیرید :

[codesyntax lang=”css”]

#floatElement
{
float: left;
margin-left: 100px;
_margin-left: 50px;
}

[/codesyntax]

مرورگر های مدرن امروزی وقتی به underscore برسند، آن استایل را به کلی نادیده می گیرند. اما در عوض IE6 علامت underscore را نادیده می گیرد و استایل را اعمال می کند. در این مثال مرورگرهای مدرن ۱۰۰ پیکسل مارجین در نظر می گیرند و مرورگر IE6 فقط ۵۰ پیکسل!

مطالب بیشتر در این زمینه :

dustinBrewerرفع مشکل مارجین دوبرابر IE6 به روش DustinBrewer : داستین در یک آموزش مفید و مختصر به معرفی و تشریح راه حل این مشکل می پردازد. حتما به سایت داستین بروید و روش او را هم یاد بگیرید. برای مطالعه این آموزش روی این لینک کلیک کنید.

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

مشکل چهارم : آیا روشی وجود دارد که بتوان مقدار specificity یک انتخابگر را اندازه گرفت؟

بله وجود دارد. اما تعداد کمی از افراد این مطلب را میدانند که چطور specificityرا اندازه گیری کنند. و اکثرا برای حل مشکل عدم اعمال استایل ها شروع به افزودن identifier ها می کنند تا جایی که استایل اعمال شود. خوب این روش هم بد نیست اما بهتر است بدانید که چگونه به وزن انتخابگر ها بیافزایید. خوب بگذارید اول به هر کدام  از انتخاب گر ها یک امتیاز بدهیم :

  • اجزاء : ۱ امتیاز
  • کلاس ها : ۱۰ امتیاز
  • Identifier ها : ۱۰۰ امتیاز
  • استایل های درون خطی : ۱۰۰۰ امتیاز

خوب حالا بیایید تا با هم سعی کنیم وزن استایل زیر را اندازه گیری کنیم (به ترازو نیازی نداریم!) :

[codesyntax lang=”css”]

body #wrap div#sidebar ul li a.selected
{
random styling....
}

[/codesyntax]

خوب با توجه به امتیازهایی که در نظر گرفتیم اول باید این استایل را قطعه قطعه کنیم. المنت body یک امتیاز می گیرد. سپس یک Id داریم (wrap) و ۱۰۰ امتیاز به مجموع امتیازات اضافه می شود. سپس div#sidebar را داریم. به نظر شما چند امتیاز برای آن باید در نظر بگیریم؟ اگر جواب شما ۱۰۰ است اشتباه کرده اید زیرا المنت div را هم باید در نظر بگیرید پس جواب صحیح ۱۰۱ امتیاز است که به امتیاز های قبلی اضافه می شود. المنت های ul و li و a هر کدام ۱ امتیاز می گیرند.  در نهایت کلاس selected هم ۱۰ امتیاز دیگر اضافه می کند. با جمع همه امتیازات به مقدار ۲۱۵ می رسیم. توصیه می شود چند دقیقه وقت صرف کنید و نحوه امتیاز دهی را به خوبی یاد بگیرید. مطمئن باشید در آینده از هدر رفتن بیهوده وقت شما ممانعت می کند.

اطلاعات بیشتر در این زمینه :

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

stuffAndNonsenseهنر specificity را در یک سیستم جالب و جنگ ستارگان گونه بیاموزید. این مقاله را هم حتما مطالعه کنید.

مشکل پنجم : بهترین راه برای تست وب سایت در مرورگر های مختلف چیست؟

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

مطالب بیشتر در این زمینه :

ieTabدر صورتی که از جابجایی مکرر بین اینترنت اکسپلورر و فایرفاکس برای تست وب سایتتان خسته شده اید بهتر است افزونه IE Tab برای فایرفاکس را دانلود کنید. برای اطلاعات بیشتر در این زمینه به این لینک مراجعه کنید.

منتظر نظرات سازنده شما هستیم.

۸ دیدگاه

  1. فوق العاده با سلیقه و حرفه ای هستید
    موفق باشید….

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

  3. بابت مطلب خوبتون در مورد وزنها ممنونم.

  4. ممنون از مشکل دوبرابر IE6و وزن ها،عالی بود

  5. با مفهوم position ها مشکل داشتم،عالی بود.ممنون و موفق باشید

  6. ممنون از این آموزش. واقعا جای آموزش هایی که به مطالب فنی و تخصصی طراحی بپردازند در وب فارسی خالی است. در بسیاری از سایت های خارجی، این آموزش ها در باره نکات فنی css , html , .. وجود دارد و جا دارد که اینجا هم چنین اتفاقی توسط برنامه نویسان حرفه ای بیفتد.

  7. سلام…من یه مشکل دارم
    .یک div والد برای موقعیت دهی عناصر انتخاب میکنم که تمام عناصر داخل این div والد باشن.div والد رو مارجین ۰ میذارم تا اتوماتیک وسط قرار بگیره.براش رنگ انتخاب میکنم و مقدارش رو relative قرار میدم..بعد که عناصر رو با absolute مقدار دهی میکنم نسبت به div والد.
    Div والد تا نصفه بیشتر ادامه پیدا نمیکنه.دلیلش چیه؟

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Time limit is exhausted. Please reload CAPTCHA.

Pin It on Pinterest

Share This

Share This

Share this post with your friends!