Modernizr چیست؟

Modernizr چیست؟

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

modernizr-website

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

 

چرا Modernizr؟

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

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

Modernizr-Browser1

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

Modernizr-Browser2

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

Modernizr-Browser3

5 پاسخ
    • مسیح مقدم
      مسیح مقدم says:

      پیشنهاد می کنم برای استفاده داکیومنت های سایت اصلی رو بخونید. به یقین توضیح بسیار جامع و بهتری ارائه شده. قصد ما صرفاً معرفی و ارزش استفاده از این تکنولوژی بود.

      پاسخ دادن
  1. هادی
    هادی says:

    مدتها بود وقتی پروژه ایجاد میکردم در دات نت به صورت پیش فرض به پروژه اضافه میکرد.ولی کارش رو نمیدونستم.خیلی کتابخانه جالب و خوبیه.

    پاسخ دادن

دیدگاه خود را ثبت کنید

Want to join the discussion?
Feel free to contribute!

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *