Modernizr چیست؟

modernizr1

با عرضه نسخه های جدید مرورگر های گوناگون، کماکان مرورگر هایی وجود دارند که تمامی قابلیت های  HTML۵ و CSS٣ را پشتیبانی نمی کنند، همچنین بسیاری از کاربران، هنوز از نسخه های قدیمی یک مرورگر استفاده می کنند؛ در همین راستا طراحان وب جهت نمایش قابلیت های جدید HTML۵ و CSS٣ ، باید راهکاری را جهت نمایش مناسب وب سایت خود در مرورگرهای قدیمی کاربران به کار بگیرند.Modernizr یک کتابخانه بر پایه جاوا اسکریپت است که مرورگر بازدید کنندگان را بررسی و مشخص می کند مروگر مورد نظر کدام دسته از  ویژگی‎ های HTML۵ و CSS٣ را پشتیبانی می ‎کند و سپس کلاس‎ های مشخصی را به تگ html صفحات اختصاص می ‎دهد؛ در نتیجهمدرنایزر ابزار مناسبی برای طراحان جهت شرطی ‎سازی نحوه نمایش صفحات بر اساس مرورگر های مختلف خواهد بود. با استفاده از کلاس‎ های شرطی CSS می‎توان نحوه نمایش المان‎ها و تگ‎ها را بر اساس نوع مروگر بازدید کننده تنظیم نمود.

modernizr-website

در حالت معمول و بدون استفاده از این ابزار، طراح وب سایت باید تمام مرورگرها را بشناسد و بداند که هر یک چه ویژگی‌هایی را پشتیبانی می‌کنند و بر اساس نوع مرورگر کد مربوط به آن را بنویسید؛ اما با استفاده از مدرنایزر تنها کافی است باپیروی از  یک الگو خاص،  برای هر ۲ حالت کد نوشت تا روی تمام مرورگرها به درستی نمایش داده شود.

چرا Modernizr؟

  • عدم وابستگی به هیچ سیستمی حتی به jQuery
  • عدم اضافه کردن افکت‎های HTML۵ وCSS٣ به مرورگر کاربران
  • بررسی ویژگی‎های HTML۵ و CSS٣ مرورگر بازدیدکنندگان در چند هزارم ثانیه

نمایش ستون های چندگانه و تصویر سایه دار در مرورگر فایرفاکس:

Modernizr-Browser1

عدم نمایش ستون های چندگانه و تصویر سایه دار در مرورگر اینترنت اکسپلورر:

Modernizr-Browser2

استایل جایگزین به کمک Modernizr و نمایش در مرورگر اینترنت اکسپلورر (حتی نسخه های ۶ به پایین):

Modernizr-Browser3

/پایان مقاله