زوپیرنت

در این ده جلسه، کدهای مختلفی که برای طراحی سایت در CSSوجود دارد، دوره شد. ولی مشکلی که شاید تا الان به آن برخورد کرده باشید، این است که کدهای CSS در همه مرورگرها طبق خواست ما عمل نمی کنند. شما انتظار دارید مثلا وقتی از کد outline در CSS استفاده می کنید، حاشیه ای خارج از متن برای شما نمایش داده شود، ولی در بعضی مرورگرها این اتفاق نمی افتد. در مقایسه مرورگرهای معروف در وب که شامل google chrome, Firefox و Internet Explorer است، در آیتم های مختلفی که برای CSS و به خصوص ۳ CSS وجود دارد، مرورگر internet explorer بدترین نوع سازگاری(incompatible) را دارد، ولی چون کاربرانی که سیستم عامل ویندوز دارند، به طور پیش فرض این مرورگر در سیستمشان نصب است، پس با تمام مشکلاتی که این مرورگر دارد، باید قبول کنیم که تعدادی از کاربران هم سایت شما را با اینترنت اکسپلورر خواهند دید. خود مرورگر اینترنت اکسپلورر، نسخه های متفاوتی دارد: IE6, 7, 8, 9

نسخه ۹ این مرورگر به مراتب بهتر از نسخه های قبلی اش است و اشکال هایش تا حدودی برطرف شده، ولی همچنان با یک سری از آیتم های CSS3 ناسازگاری دارد.
دو روش برای رفع مشکلات ناسازگاری مرورگر با CSS وجود دارد:
۱- استفاده از ترفندها: در این روش، باید برای هر CSS ی که در مرورگر به درستی به نمایش درنمی آید از یک قاعده خاص برای رفع آن استفاده کنیم. مثلا چون کد position: fixed در اینترنت اکسپلورر نسخه ۶ و پایین تر از آن درست کار نمی کند، می توانیم به صورت زیر آن را تعریف کنیم:

.test{
position: fixed;
_position: absolute
}

مرورگرهای امروزی، کاراکتر “_” را قبل از دستور قبول نمی کنند و آن را اعمال نمی کنند ولی مرورگر IE 6 آن را اعمال می کند.
مانند کد بالا برای مرورگرها و سیستم عامل های مختلف زیاد است (مثلا برای firefox 3 یا opera 9). مشکل استفاده از این کدها، این است که حجم کدهای CSS زیاد شده و مدیریت آن ها سخت می شود. همچنین مرورگرهایی مانند فایرفاکس، زود به زود ورژن های جدید ارائه می دهند پس ممکن است استفاده از ترفندهای ما برای سازگاری CSS با مرورگرها بی اثر شود. پس این روش، روش مناسبی نیست. ولی برای دیدن موارد بیشتر می توانید با جستجوی عبارت CSS hacks آیتم های مختلف را ببینید.
۲- استفاده از توضیحات شرطی (conditional comments): همانطور که می دانیم، بیشتر ناسازگاری ها با مرورگر اینترنت اکسپلورر است، پس می توانیم با عبارات شرطی متوجه شویم که کاربر از مرورگر اینترنت اکسپلورر با چه ورژنی استفاده می کند تا CSS مناسب همان صفحه برایش نمایش داده شود یا اینکه نوشته ای برای کاربر نمایش داده شود. فرمت عبارت شرطی به صورت زیر است:

<!--[if IE 6]>
<link rel="stylesheet" href="ie6.css"/>
<p>مرورگر شما قدیمی است</p>
<![endif]-->

در بالا گفته شده که اگر مرورگر کاربر، اینترنت اکسپلورر ۶ باشد، از CSS به نام ie6.css استفاده شود. ضمنا نوشته ” مرورگر شما قدیمی است ” هم برای وی به نمایش درآید. علاوه بر کد بالا، خط زیر را که معرفی CSS برای بقیه مرورگرهای دیگر است را به بخش head اضافه می کنیم.

<link rel="stylesheet" href="all.css"/>

در بخش html

<p>this is paragraph <br/><b>this is b tag</b></p>

ie6.css

p{
 color:red;

}
b{
 color:blue;
}

all.css

p{
 color:red;
}
p > b{
 color:blue;
}

برای اجرای پروژه بالا، باید ورژن های مختلف مرورگر اینترنت اکسپلورر را داشته باشید. می توانید از لینک زیر، برنامه IETester را دانلود کنید تا این امکان را به شما بدهد.
IETester
خروجی پروژه بالا به صورت زیر خواهد بود:
در IE 6

در IE 9

همانطور که در بالا دیدید، نوشته “مرورگر شما قدیمی است” فقط در IE 6 به نمایش درآمد. نکته دیگر، استفاده از کد p > b در CSS بود و معنی اش این است که تگ های b که درون تگ p هستند را با رنگ آبی نمایش دهد. ولی این کد در IE 6 کار نمی کند، پس در ie6.css، فقط به تگ b، رنگ آبی را اختصاص داده ایم.
شرط بالا، حالت های دیگری هم می تواند داشته باشد که به شرح زیر است:
(<[if IE 6]–!> به جای عبارت IE 6، می توان آیتم های زیر را قرار داد)
IE: فقط مرورگر اینترنت اکسپلورر
lt: کمتر از (مانند lt IE9 و منظور این است که فقط مرورگرهای اینترنت اکسپلورر کمتر از ورژن ۹)
lte: کمتر یا مساوی
gt: بزرگ تر از
gte: بزرگ تر یا مساوی
!: نامساوی (مانند IE! همه مرورگرها به غیر از اینترنت اکسپلورر)
|: یا
&: و

دانلود فایل تمرین condition