با عرضه نسخه های جدید مرورگر های گوناگون، کماکان مرورگر هایی وجود دارند که تمامی قابلیت های HTML5 و CSS3 را پشتیبانی نمی کنند، همچنین بسیاری از کاربران، هنوز از نسخه های قدیمی یک مرورگر استفاده می کنند؛ در همین راستا طراحان وب جهت نمایش قابلیت های جدید HTML5 و CSS3 ، باید راهکاری را جهت نمایش مناسب وب سایت خود در مرورگرهای قدیمی کاربران به کار بگیرند. Modernizr یک کتابخانه بر پایه جاوا اسکریپت است که مرورگر بازدید کنندگان را بررسی و مشخص می کند مروگر مورد نظر کدام دسته از ویژگی های HTML5 و CSS3 را پشتیبانی می کند و سپس کلاس های مشخصی را به تگ html صفحات اختصاص می دهد؛ در نتیجه مدرنایزر ابزار مناسبی برای طراحان جهت شرطی سازی نحوه نمایش صفحات بر اساس مرورگر های مختلف خواهد بود. با استفاده از کلاس های شرطی CSS میتوان نحوه نمایش المانها و تگها را بر اساس نوع مروگر بازدید کننده تنظیم نمود.
در حالت معمول و بدون استفاده از این ابزار، طراح وب سایت باید تمام مرورگرها را بشناسد و بداند که هر یک چه ویژگی‌هایی را پشتیبانی می‌کنند و بر اساس نوع مرورگر کد مربوط به آن را بنویسید؛ اما با استفاده از مدرنایزر تنها کافی است باپیروی از یک الگو خاص، برای هر ۲ حالت کد نوشت تا روی تمام مرورگرها به درستی نمایش داده شود.
چرا Modernizr؟
- عدم وابستگی به هیچ سیستمی حتی به jQuery
- عدم اضافه کردن افکتهای HTML5 وCSS3 به مرورگر کاربران
- بررسی ویژگی‌های HTML5 و CSS3 مرورگر بازدیدکنندگان در چند هزارم ثانیه
نمایش ستون های چندگانه و تصویر سایه دار در مرورگر فایرفاکس:
عدم نمایش ستون های چندگانه و تصویر سایه دار در مرورگر اینترنت اکسپلورر:
استایل جایگزین به کمک Modernizr و نمایش در مرورگر اینترنت اکسپلورر (حتی نسخه های ۶ به پایین):
