Modernizr یک کتابخانه بر پایه جاوا اسکریپت است که مرورگر بازدیدکنندگان را بررسی و مشخص می کند مروگر آنها کدام دسته از ویژگیهای HTML5و CSS3 را پشتیبانی میکند و سپس کلاسهای مشخصی را به تگ html صفحات اختصاص میدهد. در نتیجه Modernizr ابزار مناسبی برای طراحان جهت شرطی سازی نحوه نمایش صفحات بر اساس مرورگرهای مختلف خواهد بود. (با استفاده از کلاسهای شرطی CSS میتوان نحوه نمایش المانها و تگها را بر اساس نوع مروگر بازدید کننده تنظیم نمود.)در حالت معمول و بدون استفاده از Modernizr، طراح وب سایت باید تمام مرورگرها را بشناسد و بداند که هر یک چه ویژگی‌هایی را پشتیبانی می‌کنند و بر اساس نوع مرورگر کد مربوط به آن را بنویسید؛ اما با استفاده از Modernizr تنها کافی است با پیروی از یک الگوی خاص، تمام مرورگرها به درستی نمایش داده شوند. عدم وابستگی به هیچ سیستمی حتی jQuery عدم اضافه کردن افکتهایHTML5و CSS3 به مرورگر کاربرانبررسی ویژگیهایHTML5و CSS3مرورگر بازدیدکنندگان در چند هزارم ثانیهبرای نمونه توجه شما را به یک مثال توجه نموده و تفاوت مرورگرهای فایرفاکس و اینترنت اکسپلورر در نمایش یا عدم نمایش ستون های چندگانه و سایه ها را جلب می نمایم. نمایش ستون های چندگانه و تصویر سایه دار در مرورگر فایرفاکسعدم نمایش ستون های چندگانه و تصویر سایه دار در مرورگر اینترنت اکسپلورراستایل جایگزین به کمک Modernizr و نمایش در مرورگر اینترنت اکسپلورر (حتی نسخه های ٦ به پایین) این اسکریپت ۴۰ ویژگی HTML5 و CSS3 را برای مرورگر بازدیدکنندگان در چند هزارم ثانیه بررسی نموده نتیجه آزمایش را به شیء Modernizr اختصاص می دهد. سپس کلاس هایی را به تگ html صفحه اضافه می نماید که مشخص کننده پشتیبانی یا عدم پشتیبانی مرورگر بازدید کننده از ویژگی خاصی خواهد بود. همچنینModernizr با معرفی تابع Load خود امکان بارگذاری شرطی اسکریپت هایPolyfills را جهت بهینه سازی المان های صفحه برای مرورگرهای قدیمی فراهم می آورد.نمونه ای از Source صفحات وب که پک کامل اسکریپت Modernizr را اجرا می کند.ابتدا به صفحه دانلود Modernizr مراجعه نمایید در این صفحه بیش از ۴۰ ویژگی CSS3 و HTML5 به همراه ویژگی های دیگر Modernizr قابل مشاهده می باشد. توصیه می شود بعد از تکمیل شیوه نامه اصلی سایت، فاکتورها و ویژگی های html5 و CSS3 استفاده شده در طرح خود را مشخص کرده سپس اقدام به انتخاب پکیج Modernizr نمایید تا حجم پکیج این اسکریپت تا حد امکان کاهش و سرعت بارگذاری آن افزایش یابد.البته شما می توانید پک کامل Modernizrرا کپی کرده و ذخیره نمایید. به توصیه نویسنده اسکریپت، می بایست بعد از ذخیره سازی Modernizr، فایل مورد نظر را داخل تگ<head> و بعد از لینک شیوه نامه به پوسته خود معرفی نمایید.منظور از Polyfill اسکریپت هایی است که به منظور هموارسازی و هماهنگ سازی API های جدید برای مرورگرهای قدیمی استفاده می شوند. به عنوان مثال زمانی که شما از websocket Polyfill استفاده می کنید این اسکریپت کلاسwindow.websocket را با همان مقادیر و متدهای اورجینالWebsocket در مرورگرهای قدیمی ایجاد می نماید. بنابراین احتیاجی به نگارش API متفاوت برای مرورگرهای قدیمی نبوده تنها کافیست API اصلی (websocket) را توسعه داده و با استفاده از websocket Polyfill این قابلیت را به مرورگرهای قدیمی بیافزایید. تقریبا برای تمامی ویژگی هایی که Modernizr شناسایی می کند یک اسکریپت polyfill جهت بهینه سازی آن ویژگی HTML5) یا CSS3 (برای مروگرهای قدیمی نوشته شده است .نکته این که هدف اصلی، ارائه خروجی بهینه برای بازدیدکنندگان خواهد بود. بنابراین قبل از افزودن اسکریپت های متعدد که باعث کاهش سرعت بارگذاری صفحات می شود، لزوم استفاده و حجم بازدیدهایی که توسط مرورگرهای قدیمی صورت می گیرد، را بررسی نمایید. یکی از راه کارهای مناسب جهت استفاده بهینه از اسکریپت های Polyfills تابع Load می باشد.تابع Loadیکی از ویژگی های Modernizr است که در صفحه دانلود می توانید آن را به پکModernizr خود بیافزایید. این تابع منابع ( فایل های شیوه نامه CSS و جاوا اسکریپت JS) شما را به صورت شرطی بارگذاری می نماید. اگر ملزم به استفاده از polyfills می باشید امکان بارگذاری یا عدم بارگذاری polyfills مختلف متناسب با مرورگر بازدیدکنندگان و با کمک Modernizr.load فراهم شده، حجم ترافیک وب سایت شما کاهش می یابد.یک مثال : Modernizr.load({test: Modernizr.geolocation,//ویژگی مورد نظرyep : geo.js, // درصورت برقراری شرط باگذاری می شودnope: geo-polyfill.js //رد شرط باعث بارگذاری این اسکریپت می شود}); در این مثال ابتدا، Modernizr مرورگر بازدید کننده را برای ویژگی geolocation بررسی می کند. در صورتی که مرورگر مورد نظر این ویژگی را پشتیبانی نماید اسکریپت اول (geo.js) و در صورت عدم پشتیبانی و رد شرط، اسکریپت geo-polyfill بارگذاری خواهد شد. // می توانید آرایه ای از شرط ها را جهت بررسی وارد نمایید.Modernizr.load([// Presentational polyfills{// ویژگی هایی که برای اجرای پوسته خود نیاز داریم.test : Modernizr.fontface && Modernizr.canvas && Modernizr.cssgradients,// در صورت عدم پشتیبانی اسکریپت و شیوه نامه زیر بارگذاری خواهد شد.nope : [presentational-polyfill.js, presentational.css]},// Functional polyfills{// This just has to be truthytest : Modernizr.websockets && window.JSON,// socket-io.js and json2.jsnope : functional-polyfills.js,// همچنین می توان آرایه ای از اسکریپت ها و شیوه نامه ها را جهت بارگذاری معرفی کنید.both : [ app.js, extra.js ],complete : function () {// بعد از پایان یافتن اسکریپت ها دستورالعملی که در این مکان قرار می گیرد اجرا خواهد شد.myApp.init();}},// بعد از اجرای تمامی اسکریپت های پیش فرض حال می توانید آنالیکتیک خود را اجرا کنید.post-analytics.js]); تابعModernizr.load باعث کاهش سرعت بارگذاری صفحات نخواهد شد و می توان با تنظیم متناسب پارامترها، بررسی شرطهای مختلف و اجرای اسکریپتهای بهینه ساز را به صورت موازی انجام داد.تابعLoad بر پایه اسکریپت yepnope.js نگارش شده اما مستقلا توسطModernizr اجرا می شود. با استفاده از Modernizr می توانید از اجرای اسکریپت خاصی مطمئن شوید تنها کافیست آدرس های متفاوتی از منبع اسکریپت مورد نظر را به این تابع اختصاص دهید. در مثال بعد آدرس متفاوت جهت اجرای jQuery به این تابع اختصاص یافته که در صورت عدم دسترسی به آدرس اول، لینک کمکی برای بارگذاری استفاده می شود. Modernizr.load([{load: //ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js,complete: function () {if ( !window.jQuery ) {Modernizr.load(js/libs/jquery-1.7.1.min.js);}}},{// بعد از اجرای جی کوئری اسکریپتی که به آن وابسته است اجرا خواهد شد.load: needs-jQuery.js}]); با اجرای صفحه، Modernizr شیء Modernizr را در مرورگر کاربر ایجاد می نماید. که می توان این شیء را توسط اسکریپت های دیگر فراخوانی کرد. همچنین با توجه به پکی که دانلود و نصب گردیده کلاس هایی (CSS) را به تگ html صفحه مورد نظر می افزاید.به این ترتیب می توان نحوه نمایش المانهایی که از ویژگی های HTML5 و CSS3 استفاده می کنند، به صورت شرطی در شیوه نامه تعریف کرد. وب سایت BrowserStackابزار مناسبی جهت آزمایش صفحات وب در مرورگرهای مختلف خواهد بود. این وب سایت بیش از ۳۰۰ مرورگر مختلف را شبیه سازی می نماید.
Modernizr یک کتابخانه بر پایه جاوا اسکریپت است که مرورگر بازدیدکنندگان را بررسی و مشخص می کند مروگر آنها کدام دسته از ویژگیهای HTML5و CSS3 را پشتیبانی میکند و سپس کلاسهای مشخصی را به تگ html صفحات اختصاص میدهد. در نتیجه Modernizr ابزار مناسبی برای طراحان جهت شرطی سازی نحوه نمایش صفحات بر اساس مرورگرهای مختلف خواهد بود. (با استفاده از کلاسهای شرطی CSS میتوان نحوه نمایش المانها و تگها را بر اساس نوع مروگر بازدید کننده تنظیم نمود.)در حالت معمول و بدون استفاده از Modernizr، طراح وب سایت باید تمام مرورگرها را بشناسد و بداند که هر یک چه ویژگی‌هایی را پشتیبانی می‌کنند و بر اساس نوع مرورگر کد مربوط به آن را بنویسید؛ اما با استفاده از Modernizr تنها کافی است با پیروی از یک الگوی خاص، تمام مرورگرها به درستی نمایش داده شوند. عدم وابستگی به هیچ سیستمی حتی jQuery عدم اضافه کردن افکتهایHTML5و CSS3 به مرورگر کاربرانبررسی ویژگیهایHTML5و CSS3مرورگر بازدیدکنندگان در چند هزارم ثانیهبرای نمونه توجه شما را به یک مثال توجه نموده و تفاوت مرورگرهای فایرفاکس و اینترنت اکسپلورر در نمایش یا عدم نمایش ستون های چندگانه و سایه ها را جلب می نمایم. نمایش ستون های چندگانه و تصویر سایه دار در مرورگر فایرفاکسعدم نمایش ستون های چندگانه و تصویر سایه دار در مرورگر اینترنت اکسپلورراستایل جایگزین به کمک Modernizr و نمایش در مرورگر اینترنت اکسپلورر (حتی نسخه های ٦ به پایین) این اسکریپت ۴۰ ویژگی HTML5 و CSS3 را برای مرورگر بازدیدکنندگان در چند هزارم ثانیه بررسی نموده نتیجه آزمایش را به شیء Modernizr اختصاص می دهد. سپس کلاس هایی را به تگ html صفحه اضافه می نماید که مشخص کننده پشتیبانی یا عدم پشتیبانی مرورگر بازدید کننده از ویژگی خاصی خواهد بود. همچنینModernizr با معرفی تابع Load خود امکان بارگذاری شرطی اسکریپت هایPolyfills را جهت بهینه سازی المان های صفحه برای مرورگرهای قدیمی فراهم می آورد.نمونه ای از Source صفحات وب که پک کامل اسکریپت Modernizr را اجرا می کند.ابتدا به صفحه دانلود Modernizr مراجعه نمایید در این صفحه بیش از ۴۰ ویژگی CSS3 و HTML5 به همراه ویژگی های دیگر Modernizr قابل مشاهده می باشد. توصیه می شود بعد از تکمیل شیوه نامه اصلی سایت، فاکتورها و ویژگی های html5 و CSS3 استفاده شده در طرح خود را مشخص کرده سپس اقدام به انتخاب پکیج Modernizr نمایید تا حجم پکیج این اسکریپت تا حد امکان کاهش و سرعت بارگذاری آن افزایش یابد.البته شما می توانید پک کامل Modernizrرا کپی کرده و ذخیره نمایید. به توصیه نویسنده اسکریپت، می بایست بعد از ذخیره سازی Modernizr، فایل مورد نظر را داخل تگ<head> و بعد از لینک شیوه نامه به پوسته خود معرفی نمایید.منظور از Polyfill اسکریپت هایی است که به منظور هموارسازی و هماهنگ سازی API های جدید برای مرورگرهای قدیمی استفاده می شوند. به عنوان مثال زمانی که شما از websocket Polyfill استفاده می کنید این اسکریپت کلاسwindow.websocket را با همان مقادیر و متدهای اورجینالWebsocket در مرورگرهای قدیمی ایجاد می نماید. بنابراین احتیاجی به نگارش API متفاوت برای مرورگرهای قدیمی نبوده تنها کافیست API اصلی (websocket) را توسعه داده و با استفاده از websocket Polyfill این قابلیت را به مرورگرهای قدیمی بیافزایید. تقریبا برای تمامی ویژگی هایی که Modernizr شناسایی می کند یک اسکریپت polyfill جهت بهینه سازی آن ویژگی HTML5) یا CSS3 (برای مروگرهای قدیمی نوشته شده است .نکته این که هدف اصلی، ارائه خروجی بهینه برای بازدیدکنندگان خواهد بود. بنابراین قبل از افزودن اسکریپت های متعدد که باعث کاهش سرعت بارگذاری صفحات می شود، لزوم استفاده و حجم بازدیدهایی که توسط مرورگرهای قدیمی صورت می گیرد، را بررسی نمایید. یکی از راه کارهای مناسب جهت استفاده بهینه از اسکریپت های Polyfills تابع Load می باشد.تابع Loadیکی از ویژگی های Modernizr است که در صفحه دانلود می توانید آن را به پکModernizr خود بیافزایید. این تابع منابع ( فایل های شیوه نامه CSS و جاوا اسکریپت JS) شما را به صورت شرطی بارگذاری می نماید. اگر ملزم به استفاده از polyfills می باشید امکان بارگذاری یا عدم بارگذاری polyfills مختلف متناسب با مرورگر بازدیدکنندگان و با کمک Modernizr.load فراهم شده، حجم ترافیک وب سایت شما کاهش می یابد.یک مثال : Modernizr.load({test: Modernizr.geolocation,//ویژگی مورد نظرyep : geo.js, // درصورت برقراری شرط باگذاری می شودnope: geo-polyfill.js //رد شرط باعث بارگذاری این اسکریپت می شود}); در این مثال ابتدا، Modernizr مرورگر بازدید کننده را برای ویژگی geolocation بررسی می کند. در صورتی که مرورگر مورد نظر این ویژگی را پشتیبانی نماید اسکریپت اول (geo.js) و در صورت عدم پشتیبانی و رد شرط، اسکریپت geo-polyfill بارگذاری خواهد شد. // می توانید آرایه ای از شرط ها را جهت بررسی وارد نمایید.Modernizr.load([// Presentational polyfills{// ویژگی هایی که برای اجرای پوسته خود نیاز داریم.test : Modernizr.fontface && Modernizr.canvas && Modernizr.cssgradients,// در صورت عدم پشتیبانی اسکریپت و شیوه نامه زیر بارگذاری خواهد شد.nope : [presentational-polyfill.js, presentational.css]},// Functional polyfills{// This just has to be truthytest : Modernizr.websockets && window.JSON,// socket-io.js and json2.jsnope : functional-polyfills.js,// همچنین می توان آرایه ای از اسکریپت ها و شیوه نامه ها را جهت بارگذاری معرفی کنید.both : [ app.js, extra.js ],complete : function () {// بعد از پایان یافتن اسکریپت ها دستورالعملی که در این مکان قرار می گیرد اجرا خواهد شد.myApp.init();}},// بعد از اجرای تمامی اسکریپت های پیش فرض حال می توانید آنالیکتیک خود را اجرا کنید.post-analytics.js]); تابعModernizr.load باعث کاهش سرعت بارگذاری صفحات نخواهد شد و می توان با تنظیم متناسب پارامترها، بررسی شرطهای مختلف و اجرای اسکریپتهای بهینه ساز را به صورت موازی انجام داد.تابعLoad بر پایه اسکریپت yepnope.js نگارش شده اما مستقلا توسطModernizr اجرا می شود. با استفاده از Modernizr می توانید از اجرای اسکریپت خاصی مطمئن شوید تنها کافیست آدرس های متفاوتی از منبع اسکریپت مورد نظر را به این تابع اختصاص دهید. در مثال بعد آدرس متفاوت جهت اجرای jQuery به این تابع اختصاص یافته که در صورت عدم دسترسی به آدرس اول، لینک کمکی برای بارگذاری استفاده می شود. Modernizr.load([{load: //ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js,complete: function () {if ( !window.jQuery ) {Modernizr.load(js/libs/jquery-1.7.1.min.js);}}},{// بعد از اجرای جی کوئری اسکریپتی که به آن وابسته است اجرا خواهد شد.load: needs-jQuery.js}]); با اجرای صفحه، Modernizr شیء Modernizr را در مرورگر کاربر ایجاد می نماید. که می توان این شیء را توسط اسکریپت های دیگر فراخوانی کرد. همچنین با توجه به پکی که دانلود و نصب گردیده کلاس هایی (CSS) را به تگ html صفحه مورد نظر می افزاید.به این ترتیب می توان نحوه نمایش المانهایی که از ویژگی های HTML5 و CSS3 استفاده می کنند، به صورت شرطی در شیوه نامه تعریف کرد. وب سایت BrowserStackابزار مناسبی جهت آزمایش صفحات وب در مرورگرهای مختلف خواهد بود. این وب سایت بیش از ۳۰۰ مرورگر مختلف را شبیه سازی می نماید.