آموزش HTML - کتابخانه Modernizr

کتابخانه Modernizr یک کتابخانه کوچک جاوااسکریپت است که پشتیبانی یا عدم پشتیبانی مرورگر کاربر از یک ویژگی خاص در فناوری‌های وب را تشخیص می‌دهد. این کتابخانه روش آسانی برای شناسایی هر ویژگی جدید ارائه می‌دهد تا بتوانیم بر اساس قابلیت‌های مرورگر، اقدام مناسب را انجام دهیم. برای مثال، اگر مرورگری از ویژگی ویدیو پشتیبانی نکند، می‌توانیم پیام ساده‌ای درباره همین موضوع نمایش دهیم. همچنین می‌توانیم بر اساس دسترس‌پذیری ویژگی‌ها، قواعد CSS ایجاد کنیم و این قواعد در صورتی که مرورگر از ویژگی جدید پشتیبانی نکند، به طور خودکار روی صفحه وب اعمال می‌شوند.

پیش از شروع استفاده از Modernizr، باید کتابخانه جاوااسکریپت آن را به صورت زیر در بخش header صفحه HTML خود قرار دهیم −

<script src="modernizr.min.js" type="text/javascript"></script>

نمونه

در ادامه، ساختار دستور ساده برای مدیریت ویژگی‌های پشتیبانی‌شده و پشتیبانی‌نشده آورده شده است −

<!-- In your CSS: -->
.no-audio #music {
   display: none; <!-- to not show Audio options -->
}
.audio #music button {
  <!-- Style the Play and Pause buttons nicely -->
}

<!-- 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>

در اینجا شایان ذکر است برای مرورگرهایی که از یک ویژگی/ویژگی خاص پشتیبانی نمی‌کنند، باید پیشوند "no-" را به نام آن ویژگی اضافه کنید.

قطعه کد زیر را می‌توان برای تشخیص یک ویژگی خاص از طریق جاوااسکریپت اضافه کرد −

if (Modernizr.audio) {
   <!-- properties for browsers that
   support audio -->
}

else{
   <!-- properties for browsers that
   does not support audio -->
}

ویژگی‌های قابل تشخیص توسط Modernizr

در ادامه لیستی از ویژگی‌هایی که می‌توانند توسط Modernizr تشخیص داده شوند آمده است −