مهدی عادلی فر
بنیانگذار توسینسو و برنامه نویس

Modernizer چیست؟ تست وب سایت برای سازگاری با مرورگرها

Modernizer چیست؟ چگونه سازگاری وب سایت در مرورگرها را تست کنیم؟ یکی از نگرانی‌هایی که هنگام طراحی صفحات وب وجود دارد این است که قابلیت‌هایی که ما در صفحه خود طراحی کرده‌ایم را کاربر می‌تواند به راحتی ببیند و یا امکانات مورد نظر را ندارد.

دوره های شبکه، برنامه نویسی، مجازی سازی، امنیت، نفوذ و ... با برترین های ایران
سرفصل های این مطلب
  1. کتابخانه modernizr
  2. استفاده از Modernizr

به عبارت دیگر صفحه‌ای را که طراحی کرده‌ایم با تا چه حد با مرورگرها سازگاری دارد. البته باید گفت که  در خیلی از سایت‌های مؤسسات دولتی و برخی از دانشگاه‌ها برای این نکته اهمیتی قائل نیستند و در صفحه اول سایت عبارتی نوشته‌اند که از فلان مرورگر برای دسترسی به سایت استفاده کنید و خودشان را راحت کرده اند.

البته اشخاصی هم که به این سایت‌ها مراجعه می‌کنند مجبور هستند و آقای طراح هر سازی که دلش بخواهد می نوازد. ولی در بقیه سایت‌ها شرایط این‌گونه نیست و تلاش برای راحت‌تر بودن و همه پسند بودن صفحات است. بنابراین سعی می‌شود که همه بتوانند از سایت استفاده کنند. در این مطلب کتابخانه ای را معرفی می‌کنیم که می‌تواند برای شناسایی امکانات مرورگر بسیار مفید است.

کتابخانه modernizr

Modernizr کتابخانه جاوا اسکریپت کوچکی است که مشخص می‌کند که مرورگری که کاربر در حال استفاده از آن است از کدام یک از امکاناتی که به HTML5 , CSS3 اضافه شده است پشتیبانی می‌کند و آن‌ها را در خود پیاده‌سازی کرده است و کدام یک را پیاده‌سازی نکرده است.

با استفاده از این کتابخانه می‌توان مشخص کرد که اگر مرورگری از امکانی پشتیبانی نکرد صفحه به چه شکل دیگری نمایش داده شود تا بدون استفاده از آن امکان هنوز وب سایت ما جذاب و قابل استفاده باشد. به عنوان یک مثال عالی می‌توان سایت گوگل را مثال زد که با همه مرورگرها سازگاری دارد و اگر مرورگری امکانات خاص html5, css3 را پشتیبانی کند وب سایت به صورت شکیل تر و با امکانات بیشتری لود می‌شود و اگر مرورگر نسبتاً قدیمی باشد باز وب سایت کار اصلی خود را انجام میدهد ولی به شکل ساده تر.

استفاده از Modernizr

استفاده از این کتابخانه بسیار ساده است به شکلی که به ازای یک سری ویژگی‌های 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.fontfaceModernizr.fontface
Canvas.canvasModernizr.canvas
Canvas Text.canvastextModernizr.canvastext
HTML5 Audio.audioModernizr.audio
HTML5 Audio formatsNAModernizr.audio[format]
HTML5 Video.videoModernizr.video
HTML5 Video FormatsNAModernizr.video[format]
rgba().rgbaModernizr.rgba
hsla().hslaModernizr.hsla
border-image.borderimageModernizr.borderimage
border-radius.borderradiusModernizr.borderradius
box-shadow.boxshadowModernizr.boxshadow
Multiple backgrounds.multiplebgsModernizr.multiplebgs
opacity.opacityModernizr.opacity
CSS Animations.cssanimationsModernizr.cssanimations
CSS Columns.csscolumnsModernizr.csscolumns
CSS Gradients.cssgradientsModernizr.cssgradients
CSS Reflections.cssreflectionsModernizr.cssreflections
CSS 2D Transforms.csstransformsModernizr.csstransforms
CSS 3D Transforms.csstransforms3dModernizr.csstransforms3d
CSS Transitions.csstransitionsModernizr.csstransitions
Geolocation API.geolocationModernizr.geolocation
Input TypesNAModernizr.inputtypes[type]
Input AttributesNAModernizr.input[attribute]
localStorage.localstorageModernizr.localstorage
sessionStorage.sessionstorageModernizr.sessionstorage
Web Workers.webworkersModernizr.webworkers
applicationCache.applicationcacheModernizr.applicationcache
SVG.svgModernizr.svg
SVG Clip Paths.svgclippathsModernizr.svgclippaths
SMIL.smilModernizr.smil
Web SQL Database.websqldatabaseModernizr.websqldatabase
IndexedDB.indexeddbModernizr.indexeddb
Web Sockets.websocketsModernizr.websockets
Hashchange Event.hashchangeModernizr.hashchange
History Management.historymanagementModernizr.historymanagement
Drag and Drop.draganddropModernizr.draganddrop
Cross-window Messaging.crosswindowmessagingModernizr.crosswindowmessaging
addTest() Plugin APINA

Modernizr.addTest(str,fn)

همانند مثالی که برای صدا زده شد برای این که در css مشخص کنیم که امکانی وجود ندارد از no قبل از آن استفاده می کنیم.


مهدی عادلی فر
مهدی عادلی فر

بنیانگذار توسینسو و برنامه نویس

مهدی عادلی، بنیان گذار TOSINSO. کارشناس ارشد نرم افزار کامپیوتر از دانشگاه صنعتی امیرکبیر و #C و جاوا و اندروید کار می کنم. در زمینه های موبایل و وب و ویندوز فعالیت دارم و به طراحی نرم افزار و اصول مهندسی نرم افزار علاقه مندم.

نظرات