آیا مرورگر از این ویژگی پشتیبانی می‌کند؟

آیا از پشتیبانی یک مرورگر از کدهای خود نگرانید؟

آیا از تکه تکه کد نوشتن خسته شده‌اید؟

نمی‌دانید کدام مرورگر چه کدهایی را پشتیبانی می‌کند؟

نگران نباشد Modernizr تمام این کارها را برای شما انجام می‌دهد و با تست‌هایی که انجام می‌دهد به شما می‌گوید که مرورگر کاربر چه ویژگی‌هایی را پشتیبانی می‌کند

آیا از پشتیبانی یک مرورگر از کدهای خود نگرانید؟ آیا از تکه تکه کد نوشتن خسته شده‌اید؟ نمی‌دانید کدام مرورگر چه کدهایی را پشتیبانی می‌کند؟ نگران نباشد Modernizr تمام این کارها را برای شما انجام می‌دهد و با تست‌هایی که انجام می‌دهد به شما می‌گوید که مرورگر کاربر چه ویژگی‌هایی را پشتیبانی می‌کند.

با استفاده از این ابزار ساده می‌توانید به راحتی برای تمام مرورگرها کد بنویسید و مطمئن باشد که برای همه به درستی نمایش داده می‌شود؛ در این پست به معرفی مختصر این پدیده نو ظهور خواهیم پرداخت.

در واقع مدرنایزر یک پلاگین جی‌کوئری است که مرورگر را برای ویژگی‌های مختلف css3 و html5 آزمایش می‌کند و به تگ body کلاس مشخصی می‌دهد که به وسیله آن به راحتی می‌توانید در کد css خود برای تمام شرایط کد خاص بنویسید. به طور مثال شما می‌خواهید از سایه‌های css استفاده کنید؛ همان‌طور که می‌دانید بعضی از مرورگرها از این ویژگی پشتیبانی نمی‌کنند. شما می‌خواهید برای حالتی که این ویژگی پشتیبانی می‌شود و حالتی که پشتیبانی نمی‌شود کد جدا بنویسید تا در تمام حالات به درستی نمایش داده شود.

در حالت معمول و بدون استفاده از این ابزار شما باید تمام مرورگرها را بشناسید و بدانید که کدام یک چه ویژگی‌هایی را پشتیبانی می‌کنند و بر اساس مرورگر کد بنویسید. اما با استفاده از مدرنایزر فقط کافی است از یک الگو خاص پیروی کنید و برای هر ۲ حالت کد بنویسید تا روی تمام مرورگرها به درستی نمایش داده شود به مثال زیر دقت کنید تا موضوع برایتان روشن شود.

بعد از لارگذاری کامل صفحه، اگر از ویژگی پشتیبانی شود مدرنایزر کلاس آن را اضافه می‌کند و اگر پشتیبانی نشود کلاس منفی آن را به body اضافه می‌کند. برای ویژگی text-shadow در صورت مثبت بودن کلاس textshadow و در صورت عدم پشتیبانی کلاس no-textshadow  اضافه می‌گردد. حال شما برای انتخاب تگ‌ها در حالتی که این ویژگی توسط مرورگر پشتیبانی می‌شود کافی است به این صورت انتخاب کنید:

.textshadow  #contaner  و برای حالتی که این ویژگی پشتیبانی نمی‌شود:

.no-textshadow #container

به همین سادگی شما تمام حالت ممکن را پوشش داده‌ید. از این ابزار برای ویژگی‌های html5 هم می‌توان استفاده کرد به طور مثال :

Modernizr.load({ test: Modernizr.geolocation, yep : 'geo.js', nope: 'geo-polyfill.js' });

این کد تست می‌کند که آیا ویژگی geolocation پشتیبانی می‌شود یا نه؛ اگر مثبت بود فایل geo.js لود می‌شود در غیر این صورت geo-polyfill.js لود خواهد شد.

برای آشنایی بیشتر و دریافت این ابزار می‌توانید به سایت Modernizr مراجعه کنید.

منبع : وبلاگینا