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

[iacbook]

درود
همواره یکی از بزرگترین مشکلاتی که طراحان وب با آن سرو کار دارند اینست که سایت های طراحی شده بر اساس مرورگر فایرفاکس معمولا" در نسخه های اینترنت اکسپلورر بسیار بهم ریخته نمایش داده می شود که این مشکل با ارائه اینترنت اکسپلورر جدید نه تنها حل نشد بلکه چندین برابر هم شد!

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

با توجه به اینکه نسخه پیشفرض اینترنت اکسپلورر روی ویندوز اکس پی نسخه 6 می باشد و خیلی از کسانی که ویندوز نصب می کنند و وارد اینترنت می شوند هنوز از ماجرای مشکل دار بود نسخه های اینترنت اکسپلورر بی خبرند و در نهایت وقتی سایتی را با IE باز می کنند و مشکلاتی در آن می بینند فکر می کنند که اون سایت مشکل داره و طراحی خوبی براش انجام نشده!!!

در کل این مشکل بزرگیست که حل کردن این مشکل فوت و فن های زیادی دارد ...

مشکل اینترنت اکسپلورر با تگ دایو DIV
در نسخه های قبلی html بیشتر اجزای موجود در صفحه با “<table>” ها ساخته می شد ، ولی به علت انعطاف پذیری کم و تولید حجم کد زیاد است اندارد صفحات وب بر پایه استفاده از “<div>” بنا شد ، و به همین علت اینترنت اکسپلورر اولین مشکلی که داشت مشکل با تگ های div بود و به همین علت بسیاری از برنامه نویسان همواره از table ها استفاده می کردند که کاری بسیار غیر است اندارد و غلط هست .

راه های هک کردن اینترنت اکسپلورر :
منظور از هک کردن نوشتن دستوری هست که فقط اینترنت اکسپلورر قادر به خواندن آن باشد .
خیلی وقت ها مشاهده میشه که وقتی از دستور padding و یا margine برای جا به جا کردن اجزای صفحه استفاده میشه در فایر فاکس درست حرکت انجام میشه و در اینترنت اکسپلورر نصف و یا کمتر از اندازه داده شده حرکت انجام میشه ، در اینجا باید برای اینترنت اکسپلورر مقدار بیشتری مشخص کنید تا نصف اون برابر با مقدار اصلی شود.

و این مقدار جدید را که میخواهیم فقط اینترنت اکسپلورر ببیند با قرار دادن علامت های ” * “و یا ” # ” در ابتدای آنها مشخص میکنیم.

مثال :

کد:
padding-left:۲۰px
padding-left:۴۰px*

با استفاده از اینکار می توانید نمایش یکسانی در اینترنت اکسپلورر و فایر فاکس داشته باشید .

ولی یکی از مشکلاتی که در اینجور مواقع پیش میاد این هست که چون دستور ستاره دار رو همه نسخه های اینترنت اکسپلورر می خوانند احتمال این به وجود میاید که اینترنت اکسپلورر ۷ دستور اول رو درست نمایش داده باشه و با این کار وقتی دستور ستاره دار رو میخونه به هم ریخته باشه ، و در واقع ما مشکل رو درنسخه ۶ حل کردیم ولی نسخه ۷ به هم ریخته .

حال زمانی که با این مشکل رو به رو شدید باید از تگ important استفاده کنید ، علت استفاده از این تگ این هست که به دستور ما ارجحیت میدهد و این تگ را مرور گر های جدید به خوبی متوجه میشوند و مرور گر های قدیمی (IE ۶) اون رو نمیبینند ، بدین ترتیب عمل میکنیم که دستوری را که میخواهیم اینترنت اکسپلورر ۶ ببیند معمولی و دستور دیگر رو که میخواهیم اینترنت اکسپلورر ۷ و یا فایر فاکس ببینند همراه با important می نویسیم .

مثال :

کد:
padding-left:۴۰px
padding-left:۲۰px !important

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


استفاده از فایل CSS جداگانه برای اینترنت اکسپلورر :

شما میتونید به راحتی یک سی اس اس جدا گانه برای هر کدام از نسخه های اینترنت اکسپلورر بنویسید و با یک دستور شرطی در سربرگ (header) صفحه تون اون رو اضافه کنید و ببینید که زمانی که با اینترنت اکسپلورر وارد اون صفحه می شوید فقط اون سی اس اس مخصوص اینترنت اکسپلورر را خواهید دید .

مثال :

کد:
<link rel=”sytlesheet” type=”text/css” href=”bugFixForIE۶x.css”>
<link rel=”sytlesheet” type=”text/css” href=”bugFixForIE۷x.css


دوستان منتظر نظرات و پیشنهادات فنی شما هستیم...

[rn4j1m1]

× خوب با php میشه فهمید بروزر کاربر چی هست و با توجه به بروزش یه فایل css دیگه رو لود کرد !

[iacbook]

درسته
این رو باید در قسمت head در فایل ایندکس قرارداد تا مرورگر در قسمت انتخاب فایل سی اس اس بره سراغ سی اس اس مربوطه
-------
بقیه دوستان نظری ندارند؟

این مبحث فکر کنم خیلی اهمیت داشته باشه!
دیگه طراح وب نداریم اینجا؟؟؟؟؟؟

[persiansoft]

سلام دوست عزيز .
بهترين راه اين است كه فايل هاي css مشترك را در يك فايل قرار داده و كلاس هايي كه در مرورگرها متفاوت هست در فايل هاي css جداگانه ذخيره شود .
و در ابتداي صفحه چك شود و سپس فايل مربوط به همان مرورگر را انتخاب كنيد .
در اين روش نوشتن فايل هاي تنظيمات براي مرورگرهاي مختلف راه تر مي شود .
ولي واقعا table را نمي توان فراموش كرد .

موفق باشيد .

[rn4j1m1]

البته من همیشه مایکروسافت رو لعنت میکنم واسه ie6 فکر کنم همه ی طراحان وب هم همین نظر رو داشته باشن :D

[iacbook]

سلام دوست عزيز .
بهترين راه اين است كه فايل هاي css مشترك را در يك فايل قرار داده و كلاس هايي كه در مرورگرها متفاوت هست در فايل هاي css جداگانه ذخيره شود .
و در ابتداي صفحه چك شود و سپس فايل مربوط به همان مرورگر را انتخاب كنيد .
در اين روش نوشتن فايل هاي تنظيمات براي مرورگرهاي مختلف راه تر مي شود .
ولي واقعا table را نمي توان فراموش كرد .

موفق باشيد . :D

دقیقا" این راهیست که خیلی از شرکت های بزرگ دارن انجام میدن (مثل YOOtheme ).
اما بعضی هم کلا" همون فایل سی اس اسی که برای فایرفاکس تنظیم شده رو save as می کنند برای IE و قسمت های مربوطه رو تغییر میدن ( من هم معمولا" این کار رو انجام میدم! )
اما خیلی از شرکت ها هم دیدم که از دستوراتی برای دور زدن اینترنت اکسپلورر مثل دستور important و غیره استفاده می کنند که اینم بد نیست ...
روش های دیگه ای که وجود داره تا از طریق یک سی اس اس سایت رو با همه مرورگرها تطبیق داد چیه؟

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

[iacbook]

اکنون روش reset مرورگرها را ارئه میدم که امیدوارم بدردتون بخوره ;)

ببینید هر مرورگری یک سری استایل های درونی داره که از اونا استفاده می کنه.
مثلا مرورگر IE، ممکنه تگ P رو با مارجین 4 پیکسل نشون بده اما مرورگر Opera همین تگ رو با مارجین 5 پیکسل نمایش بده! بنابر این همین اختلافات باعث میشن که قالب طراحی شده شما در مرورگرهای مختلف متفاوت نمایش داده شود.
شما می توانید مرورگرها را با چندین خط دستور ریست کنید!!!

دستورات ریست ، مرورگرها را وادار می کند که با تگ های مختلف رفتاری مشابه را از خودشون نشان دهند و مقادیر یکسانی رو اجرا کنند!

شاید بگید چطوری! یکمی صبر کنید الان میگم ....

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


html, body, div, span, applet, object, 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,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: ''; content: none;}

/* remember to define focus styles! */
:focus {outline: 0;}

/* remember to highlight inserts somehow! */
ins {text-decoration: none;}
del {text-decoration: line-through;}

/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse: collapse; border-spacing: 0;}


برای استفاده از دستورات ریست 3 راه وجود داره:

1- قراردادن کدهای بالا در ابتدای فایل سی اس اس قالب
2- ایجاد فایلی بنام reset.css
3- استفاده اینترنال بصورت قراردادن در بین تگ های head قالب

حتما" قبل از شروع به نوشتن css قالب خود این دستورات را در به صفحه خود اضافه نمایید.
زیرا در صورتیکه بعد از نوشتن و یا در هنگام نوشتن css این دستورات را اضافه نمایید باعث میشه که چیدمان صفحه شما بهم بریزه.
یعنی اول اینا رو ابتدا قرار بدید و پس از مشاهده وضعیت قالب را ششروع به تنظیم نمایید...

این دستورات به تمامی متدها و تگ ها و المنت های موجود در صفحه، مقدار 0 و یا none می دهند و همین امر موجب میشود که مرورگر به ناچار، استایل های پیش فرض خود را مطابق با دستورات Reset کند و وقتی تمامی مرورگرها با این دستورات مواجه میشن، تمامی استایل های پیش فرض خود را ریست میکنند و نسبت به نمایش محتوای صفحه، رفتاری مشابه از خود نشان میدهند!

بعنوان مثال:


ol, ul {
list-style: none;
}


این دستور باعث میشه تمامی استایل هایی که به تگ های ol و ul نسبت داده میشن برابر با مقدار none بشن و دیگه ناسازگای هایی که ممکنه به وجود بیاد، برطرف میشن… خصوصا اگر صفحه فارسی هست، حتما باید از این دستور استفاده بشه.


موفق باشید

[persiansoft]

مطلب جالبي ديگر در همين رابطه
CSS Hacks- The good, the bad, and the ugly- Conditional comments (http://www.javascriptkit.com/dhtmltutors/csshacks.shtml)
موفق باشيد .

[iacbook]

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

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

[persiansoft]

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

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

سلام دوست عزيز .
درسته اين كد قابليت چك كردن نسخه هاي متفاوت اينترنت اكسپلورر را دارد البته

<!--[if !IE]>--> <link href="not_ie.css" rel="stylesheet" type="text/css"> <!--<![endif]-->
در اين قسمت حتي مي توان براي مرورگرهاي ديگر هم يك فايل جداگانه ساخت .
اين تگ هاي غير استاندارد ie واقعا در بعضي مواقع جالب مي شوند .

موفق باشيد .

[alisc]

دوستان ممنون میشم :

لطف کنید بگید اون کدی که میشه تایین کرد برای هر مرورگر چه استایلی بیاد چیه ؟

با تشکر فراوان

[iacbook]

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


مطلب جالبي ديگر در همين رابطه
CSS Hacks- The good, the bad, and the ugly- Conditional comments (http://www.javascriptkit.com/dhtmltutors/csshacks.shtml)
موفق باشيد .