تا %60 تخفیف خرید برای 4 نفر با صدور مدرک فقط تا
00 00 00

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

مهدی عادلی فر
مهدی عادلی فر
0 پسند
163 بازدید
0 نظر
10 ماه قبل

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

کتابخانه 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 .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 قبل از آن استفاده می کنیم.

با وب سایت tosinso همراه باشید

نویسنده: مهدی عادلی فر

منبع: جزیره طراحی وب Tosinso.

هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد.

نظر شما
برای ارسال نظر باید وارد شوید.
0 نظر

هیچ نظری ارسال نشده است! اولین نظر برای این مطلب را شما ارسال کنید...