Google Chrome
Smashing Magazine
Mozilla Developer Network
CSS-Tricks
CSS و سردرد ناشی از مرورگرهای مختلف
۵ آبان ۱۳۸۸ ساعت ۰۱:۵۵
طراحی وب
ابزارهای طراحی بصورت Cross-Browser
وقتی میخوای CSS بنویسی حتما می دونی که کدهات توی مرورگرهای مختلف که هر روز دارند بیشتر می شن، متفاوت رندر میشه. مخصوصا اینترنت اکسپلورر که به زبون خودش حرف می زنه! واسه اینکه CSS به اصطلاح Cross-Browser داشته باشیم یعنی توی همه مرورگرها، خروجی ثابتی داشته باشه، دو راه وجود داره:
راه اول reset کردن مشخصه های صفحه است. علت اصلی اینکه مرورگرها، خروجی متفاوتی دارند اینه که هر کدوم یه سری مقادیر پیش فرض دارند که با مقادیر ما ادغام میشه. مثلا Opera بصورت پیش فرض یه فاصله کمی برای رکوردهای جدول تعیین می کنه ولی مثلا فایرفاکس نمی کنه یا یه جور دیگه مقدار میده و وقتی من میام دستی برای این فاصله ها مقدار تعیین می کنم، به مقدار پیش فرض اضافه میشه و تفاوتها ظاهر میشن.
کدهای Reset کدهایی هستند که میان همه این مقادیر پیش فرض که متفاوت هستند رو مقدار میدن و چون مقدار تعیین میشه، دیگه از پیش فرض خبری نیست و همه مشابه هم میشن. نمونه مثل این:
<style type="text/css">
*, html, body {
margin:0;
padding:0;
}
</style>
این کدها باید قبل از همه کدهای CSS فراخوانی بشن تا کدهای دیگه، تحت تاثیر اونا قرار بگیرن.این کدها رو میشه از فریم ورک CSS گوگل با نام Blue Print گرفت. یا با سرچ پیدا کرد.
البته این روش به مشکل داره و اونم اینه با Reset کردن CSS، فقط پیش فرضها خنثی میشن و باگهای احتمالی (توی IE حتمی) اصلاح نمیشن. مثلا IE6 توی Float باگ داره و اشتباه عمل می کنه.
راه دوم استفاده از جاوااسکریپت هست. می دونی که با جاوااسکریپت میشه نوع و نسخه مرورگر رو تشخیص داد و بالطبع میشه براساس مرورگر، استایل رو اصلاح کرد. چند تا اسکریپت آماده برای این کار وجود داره که من اینجا بهترینش رو معرفی می کنم به نام
این اسکریپت واقعا عالیه. چرا؟ چون استفاده ازش یه جور خفنی گوگولی و ساده است! کافیه تا اسکریپت سه چهار خطی اش رو توی صفحه فراخوانی کنی. مثلا این شکلی:
<head> ... <script type="text/javascript" src="js/css_browser_selector.js"></script> ... </head>حالا جای باحالش شروع میشه و اون اینه که شما یه کلاس CSS با مشخصه مرورگر توی صفحه فعال داری که همه اجزا صفحه رو شامل میشه! مطمئنم سر در نیاوردی! مثال خود سایت رو ببینی متوجه میشی
<style type="text/css">
.ie .example { background-color: yellow }
.ie7 .example { background-color: orange }
.gecko .example { background-color: gray }
.win.gecko .example { background-color: red } /* Gecko in Windows */
.linux.gecko .example { background-color: pink } /* Gecko in Linux */
.opera .example { background-color: green }
.ff3_5 .example { background-color: blue } /* Firefox 3.5 */
.webkit .example { background-color: black }
</style>
یعنی وقتی IE7 داشت صفحه رو رندر میکرد، رنگ زمینه کلاس example. نارنجی خواهد بود یا توی Opera سبزه.ذوق زده شدی! نکته خوبش اینکه تقریبا همه نسخه های مرورگرهای مختلف رو پشتیبانی می کنه یعنی فایرفاکس2، فایرفاکس3 و حتی فایرفاکس 3.5!
یه سری میگن ترفندهای جاوااسکریپ برای CSS غیراستاندارد هستند و موقعی که جاوااسکریپت غیرفعال باشه، کار نمی کنند.
با بخش اولش کاملا موافقم ولی بخش دومش رو نه. غیرفعال بودن جاوااسکریپت مال زمان دایناسورهای اینترنت بوده که مرورگرها جاوااسکریپت رو صحیح اجرا نمی کردند و کلی باگ و خطر امنیتی با جاواسکریپت همراه بود ولی الان دیگه از این خبرها نیست. کسی که جاوااسکریپت مرورگرش رو غیرفعال کنه، نصف اینترنت رو از دست میده. مگه اینکه هدف خاصی مثل هک و نفوذ داشته باشه که اون یارو اصلا فاکتور محسوب نمیشه! میخواست غیرفعال نکنه!
خلاصه ما اینو توصیه می کنیم! به سایتش برو، مثال و کاربرد و توضیحاتش رو ببین و داونلود کن!
تو چی فکر می کنی؟