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

تا قبل از اومدن HTML5 دردسرهای کمتری روی دوش طراح‌ها بود، بعد از اومدن HTML5 از اونجایی که اینترنت اکسپلورر از HTML5 پشتیبانی نمی‌کرد طراح‌ها باید کدنویسی‌های HTML5 رو برای اینترنت اکسپلورر هم یکسان‌سازی می‌کردن.

تو این پست قراره ۵ افزونه و ابزار وردپرس رو به شما معرفی کنم که به کمکشون به راحتی می‌تونید پوسته‌ی HTML5 و CSS3 تون رو تو مرورگرهایی که از این قابلیت‌ها پشتیبانی نمی‌کنن (مثل نسخه‌ی ۶ تا ۸ اینترنت اکسپلورر) نمایش بدید، و اینترنت اکسپلورر رو مجبور کنید رفتار محترمانه‌تری نسبت به طراحی شما داشته باشه :دی.

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

IE-CSS3 اسکریپتی هستش که توسط Nick Fetchak توسعه داده شده، توسط IE-CSS3 شما می‌تونید به راحتی از متدهای طراحی جدید در مرورگرهای قدیمی‌ای مثل اینترنت اکسپلورر ۵، ۶، ۷ و ۸ استفاده کنید.

وقتی شما از این روش استفاده می‌کنید نیاز نیست تغییرات زیادی در شیوه‌ی کاری خودتون بدید، شما باید مثل قبل کدهای CSS مورد نظرتون رو بنویسید، فقط در آخر یک خط به کد CSSتو اضافه می‌کنید تا اینترنت اکسپلورر رو مجبور کنید اون دستورات رو اجرا کنه، مثل نمونه کد زیر:

.box {
  -moz-border-radius: 15px; /* Firefox */
  -webkit-border-radius: 15px; /* Safari and Chrome */
  border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */
  -moz-box-shadow: 10px 10px 20px #000; /* Firefox */
  -webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */
  box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
  behavior: url(ie-css3.htc); /* This lets IE know to call the script on all elements which get the 'box' class */
}

برای استفاده از این قابلیت فقط کافیه فایل ie-css3.htc رو در کنار فایل استایل پوسته‌ی وبلاگتون قرار بدید و خط آخر کد بالا رو برای قسمت‌هایی که از CSS3 استفاده کردید کپی کنید تا اینترنت اکسپلورر هم اون‌ها رو اجرا کنه. به همین راحتی :)

۲. افزونه‌ی Selectivizr

Selectivizr یکی دیگه از گزینه‌هایی هستش که توسط اون می‌تونید اینترنت اکسپلورر (نسخه‌ی ۶ تا ۸) رو مجبور به این کنید که مثل بقییه مرورگرها با کدهاتون برخورد بکنه.

این افزونه با کمک جاوا اسکریپت سعی می‌کنه ظاهر سایت شما رو در مرورگرهای مختلف شبیه هم نشون بده، تنها کاری هم که شما باید انجام بدید اینه که افزونه‌ی Selectivizr رو روی وردپرس خودتون نصب و فعال کنید، به همین راحتی و خوشمزگی ;).

۳. افزونه‌ی HTML5shiv

اگه طراح و یا کدنویس باشید احتمالاً می‌دونید که اینترنت اکسپلورر (البته بجز نسخه‌ی ۹) قادر به اجزای کدهای HTML5 نیست، HTML5shiv افزونه‌ای هستش که این مشکل رو توسط یه کد جاوا اسکریپت حل می‌کنه، کافیه که شما این افزونه رو برای وردپرس خودتون نصب کنید تا بدون نگرانی از HTML5 در طراحی استفاده کنید و دیگه نگران اجرا نشدنش در اینترنت اکسپلورر نباشید.

۴. افزونه‌ی Modernizr

افزونه‌ی Modernizr کتاب‌خانه‌ی جاوا اسکریپت خودش رو به صفحه اضافه می‌کنه و به واسطه‌ی اضافه کردن این کتاب‌خانه‌ی جاوا اسکریپت به شما اجازه می‌ده که از CSS3 و HTML5 در مرورگرهایی که از این قابلیت پشتیبانی نمی‌کنن استفاده کنید.

Modernizr یه سایت اختصاصی هم برای سفارشی کردن کد مورد استفادش داره، شما می‌تونید به این صفحه از سایتش برید و انتخاب کنید که از چه دستوراتی در صفحه‌ی وبتون استفاده کردید و کد نهایی رو سفارشی‌سازی کنید (شما نمی‌تونید با آی‌پی ایران وارد سایتش بشید!).

۵. استفاده از فریم‌ورک HTML5 TwentyTen Five

یکی از ابزارهای دیگه‌ای هم که تو این زمینه می‌تونه کمک حال شما باشه، پوسته‌ی آماده‌ی TwentyTen Five هستش که به کمک زبان HTML5 طراحی شده و با استفاده از کتابخانه‌ی جاوا اسکریپت Modernizr هم برای مرورگرهای مختلف بهینه‌سازی شده و در همه‌ی مرورگرها به طور درست نمایش داده می‌شه!
می‌تونید از اینجا دانلودش کنید و ازش استفاده کنید!

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

خب در این آخر هم به شما پیشنهاد می‌کنم حتماً از مرورگر گوگل کروم، فایرفاکس، اپرا و یا سافاری استفاده کنید تا هم امنیت بیشتری داشته باشید، هم وب رو زیباتر ببینید.