Modernizer چیست؟ چگونه سازگاری وب سایت در مرورگرها را تست کنیم؟ یکی از نگرانی‌هایی که هنگام طراحی صفحات وب وجود دارد این است که قابلیت‌هایی که ما در صفحه خود طراحی کرده‌ایم را کاربر می‌تواند به راحتی ببیند و یا امکانات مورد نظر را ندارد.
به عبارت دیگر صفحه‌ای را که طراحی کرده‌ایم با تا چه حد با مرورگرها سازگاری دارد. البته باید گفت که در خیلی از سایت‌های مؤسسات دولتی و برخی از دانشگاه‌ها برای این نکته اهمیتی قائل نیستند و در صفحه اول سایت عبارتی نوشته‌اند که از فلان مرورگر برای دسترسی به سایت استفاده کنید و خودشان را راحت کرده اند.
البته اشخاصی هم که به این سایت‌ها مراجعه می‌کنند مجبور هستند و آقای طراح هر سازی که دلش بخواهد می نوازد. ولی در بقیه سایت‌ها شرایط این‌گونه نیست و تلاش برای راحت‌تر بودن و همه پسند بودن صفحات است. بنابراین سعی می‌شود که همه بتوانند از سایت استفاده کنند. در این مطلب کتابخانه ای را معرفی می‌کنیم که می‌تواند برای شناسایی امکانات مرورگر بسیار مفید است.
Modernizr کتابخانه جاوا اسکریپت کوچکی است که مشخص می‌کند که مرورگری که کاربر در حال استفاده از آن است از کدام یک از امکاناتی که به HTML5 , CSS3 اضافه شده است پشتیبانی می‌کند و آن‌ها را در خود پیاده‌سازی کرده است و کدام یک را پیاده‌سازی نکرده است.
با استفاده از این کتابخانه می‌توان مشخص کرد که اگر مرورگری از امکانی پشتیبانی نکرد صفحه به چه شکل دیگری نمایش داده شود تا بدون استفاده از آن امکان هنوز وب سایت ما جذاب و قابل استفاده باشد. به عنوان یک مثال عالی می‌توان سایت گوگل را مثال زد که با همه مرورگرها سازگاری دارد و اگر مرورگری امکانات خاص html5, css3 را پشتیبانی کند وب سایت به صورت شکیل تر و با امکانات بیشتری لود می‌شود و اگر مرورگر نسبتاً قدیمی باشد باز وب سایت کار اصلی خود را انجام میدهد ولی به شکل ساده تر.
استفاده از این کتابخانه بسیار ساده است به شکلی که به ازای یک سری ویژگی‌های html5 می‌توانید دستور css بنویسید که اگر امکان مورد نظر پشتیبانی نشد چه خواصی به عنصر html اضافه شود. قبل از اینکه بخواهیم از این کتابخانه استفاده کنیم باید آن را دانلود کرده و به صفحه اضافه کنیم مانند کد زیر
<script src="modernizr.min.js" type="text/javascript"></script>
دقت کنید که کد بالا در بخش head اضافه می شود.در مثال زیر ویژگی audio بررسی می‌شود و در صورت نبودن این امکان عناصر قابل مشاهده نیستند. همانطور که مشاهده می‌کنید با استفاده از قوانین css ما این کار را انجام داده ایم.
/* In your CSS: */
.no-audio #music {
display: none; /* Don't show Audio options */
}
<!-- In your HTML: -->
<div id="music">
<audio>
<source src="audio.ogg" />
<source src="audio.mp3" />
</audio>
<button id="play">Play</button>
<button id="pause">Pause</button>
</div>
البته عمل بالا را می‌توان با استفاده از جاوااسکریپت هم انجام داد مانند کد زیر
if (Modernizr.audio) {
/* properties for browsers that
support audio */
}
else{
/* properties for browsers that
does not support audio */
}دقت کنید که در جاوااسکریپت از شی Modernizr استفاده شده است. ویژگی‌هایی که با استفاده از این کتابخانه می‌توان مورد بررسی قرار داد عبارتند از:
| ویژگی | CSS قانون | دستور جاوا اسکریپتی |
|---|---|---|
| @font-face | .fontface | Modernizr.fontface |
| Canvas | .canvas | Modernizr.canvas |
| Canvas Text | .canvastext | Modernizr.canvastext |
| HTML5 Audio | .audio | Modernizr.audio |
| HTML5 Audio formats | NA | Modernizr.audio[format] |
| HTML5 Video | .video | Modernizr.video |
| HTML5 Video Formats | NA | Modernizr.video[format] |
| rgba() | .rgba | Modernizr.rgba |
| hsla() | .hsla | Modernizr.hsla |
| border-image | .borderimage | Modernizr.borderimage |
| border-radius | .borderradius | Modernizr.borderradius |
| box-shadow | .boxshadow | Modernizr.boxshadow |
| Multiple backgrounds | .multiplebgs | Modernizr.multiplebgs |
| opacity | .opacity | Modernizr.opacity |
| CSS Animations | .cssanimations | Modernizr.cssanimations |
| CSS Columns | .csscolumns | Modernizr.csscolumns |
| CSS Gradients | .cssgradients | Modernizr.cssgradients |
| CSS Reflections | .cssreflections | Modernizr.cssreflections |
| CSS 2D Transforms | .csstransforms | Modernizr.csstransforms |
| CSS 3D Transforms | .csstransforms3d | Modernizr.csstransforms3d |
| CSS Transitions | .csstransitions | Modernizr.csstransitions |
| Geolocation API | .geolocation | Modernizr.geolocation |
| Input Types | NA | Modernizr.inputtypes[type] |
| Input Attributes | NA | Modernizr.input[attribute] |
| localStorage | .localstorage | Modernizr.localstorage |
| sessionStorage | .sessionstorage | Modernizr.sessionstorage |
| Web Workers | .webworkers | Modernizr.webworkers |
| applicationCache | .applicationcache | Modernizr.applicationcache |
| SVG | .svg | Modernizr.svg |
| SVG Clip Paths | .svgclippaths | Modernizr.svgclippaths |
| SMIL | .smil | Modernizr.smil |
| Web SQL Database | .websqldatabase | Modernizr.websqldatabase |
| IndexedDB | .indexeddb | Modernizr.indexeddb |
| Web Sockets | .websockets | Modernizr.websockets |
| Hashchange Event | .hashchange | Modernizr.hashchange |
| History Management | .historymanagement | Modernizr.historymanagement |
| Drag and Drop | .draganddrop | Modernizr.draganddrop |
| Cross-window Messaging | .crosswindowmessaging | Modernizr.crosswindowmessaging |
| addTest() Plugin API | NA | Modernizr.addTest(str,fn) |
همانند مثالی که برای صدا زده شد برای این که در css مشخص کنیم که امکانی وجود ندارد از no قبل از آن استفاده می کنیم.