مقالات تخصصی

شامل مقالات طراحی وب سایت - پرتال سازمانی و وب سایت های شخصی و تکنولوژی روز طراحی وب

Modernizr چیست؟

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

modernizr-website

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

چرا Modernizr؟

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

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

Modernizr-Browser1

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

Modernizr-Browser2

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

Modernizr-Browser3