همانطور که می دانید، ساخت وب سایت های واکنش گرا بسیار بیشتر از عرض است. شما به حسگرهایی نیاز دارید که برای تنظیم سایت‌ها به شما بازخورد بدهند روی عوامل دیگر

بهترین راه برای بهبود بازخورد ما از حسگر یا مرورگر کاربر، استفاده از کتابخانه جاوا اسکریپت به نام مدرنیزر. در این مقاله توضیح خواهم داد که چرا وقتی از عرض فراتر می روید، Modernizr ابزاری ارزشمند است.

در توسعه front-end، توسعه دهندگان از تنظیم یک سایت برای تناسب با محدودیت های موتور طرح بندی استفاده شده توسط یک مرورگر خاص استفاده می کردند. در سال 2003، تنها سه مرورگر وجود داشت: Netscape، Internet Explorer و Opera. فایرفاکس، سافاری و اولین مرورگر موبایل، Opera Mini، در سال 2005 منتشر شدند. کروم تا سال 2008 منتشر نشد.

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

ما از طراحی وب ریسپانسیو برای استفاده از مرورگرهای جدید و پیشرفته موبایل استفاده می کنیم. اما، در حالی که مرورگرهای جدید را در نظر می گیریم، مهم است که این کار را به ضرر مرورگرهای قدیمی انجام ندهیم.

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

بهبود پیشرونده یکی از استراتژی‌های مقابله با شکست مرورگرها در پشتیبانی از ویژگی‌های مدرن است. وسوسه ساختن برای به روزترین ویژگی ها وجود دارد، اما، در یک وب واکنش گرا، طراحی سایت مطابق با چارچوبی است که از طریق آن مشاهده می شود. طراحی وب ریسپانسیو به این دلیل محبوب شده است که واضح ترین زمینه تغییر – اندازه قاب – را حل می کند، اما زمینه یک مرورگر بسیار عمیق تر از اندازه نمای آن است.

SVG یک راه حل عالی برای نمایشگرهای با وضوح بالا است، اما در مورد پشتیبانی آن در مرورگرهای قدیمی چطور؟ در اینترنت اکسپلورر 8 یا قدیمی‌تر پشتیبانی نمی‌شود، بنابراین اگر از آن مرورگر پشتیبانی می‌کنید، باید یک نسخه بازگشتی ایجاد کنید. می‌توانید مرورگر را شناسایی کنید و سبک‌های جایگزین را در مقابل آن مرورگر ارائه کنید، اما پس از آن باید همان سبک‌های جایگزین را برای هر مرورگری که از SVG پشتیبانی نمی‌کند، استفاده کنید.

آیا اگر بتوانید سبکی بنویسید که در برابر هر مرورگری که از SVG پشتیبانی نمی کند استفاده شود، آسان تر نیست؟ به این ترتیب، شما مجبور نخواهید بود با گزارش های باگ کاربران نسخه های قدیمی تر همراه باشید. شما فقط می توانید یک بار بازگشت را تنظیم کنید و آن را فراموش کنید.

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

اگر Chrome دارید و DevTools را فعال کرده اید، بازرس وب مرورگر خود را با کلیک راست باز کنید. روی آ page و Inspect Element را انتخاب کنید. سپس، کلیک کنید روی کنسول و بعد از caret عبارت navigator.userAgent را تایپ کرده و Enter را بزنید. با این کار، user-agent مرورگر فعلی شما، که رشته‌ای از متن است که برای شناسایی مرورگر در حال استفاده استفاده می‌شود، برمی‌گرداند. کروم موارد زیر را برمی گرداند:

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/537.35 (KHTML, like Gecko) Chrome/27.0.1443.2 Safari/537.35

از بسیاری جهات، شی ناوبر یکی از بهترین حسگرهایی است که ما در اختیار داریم تا سیستم خود را در مورد توانایی کاربرمان آگاه کنیم. با این حال، این خیلی آینده دوستانه نیست. این عمل کننده های سایت شما را پایه گذاری می کند روی فرضیات زیادی در مورد کارهایی که مرورگر انجام می دهد و چه کارهایی را پشتیبانی نمی کند. همچنین غیر قابل اعتماد است زیرا کاربران می توانند آن را برای دسترسی به سایت هایی که ممکن است مرورگر قادر به پشتیبانی آنها نباشد پیکربندی کنند.

کاری که Modernizr انجام می دهد

Modernizr یک کتابخانه جاوا اسکریپت است که برای شناسایی ویژگی های مرورگر استفاده می شود. در سر شما بارگذاری شده است page و در طول یک اجرا می شود page بار. افزودن آن به سایت شما به سادگی افزودن هر کتابخانه جاوا اسکریپت دیگری مانند jQuery است، اما پس از افزودن، Modernizer کنترل باورنکردنی در رندر کردن خود به شما می دهد. page و حصول اطمینان از اینکه به هر کاربر یک تجربه با کیفیت ارائه می شود.

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

Modernizr همچنین مجموعه ای از کلاس ها را برای تگ HTML اعمال می کند و به شما امکان تغییر دادن page’s CSS با استفاده از کلاس های CSS مربوطه. این کلاس‌های CSS به شما امکان می‌دهند از سیستم‌های CSS برای ساخت محرک‌هایی استفاده کنید که صفحات شما را تنظیم می‌کنند تا پیشرفت‌های پیشرونده در دسترس را برای page.

برخلاف استفاده از User Agent، Modernizr ویژگی ها را مستقیماً با اجرای یک سری تست جاوا اسکریپت که مقادیر بولی (درست یا نادرست) را برمی گرداند، شناسایی می کند. این امر کلاس هایی را که روی تگ html تنظیم شده اند دیکته می کند و به شما امکان می دهد از جاوا اسکریپت برای تشخیص در دسترس بودن یک ویژگی استفاده کنید.

نصب Modernizr

نصب Modernizr به سادگی پیوند دادن به کتابخانه جاوا اسکریپت در سر است page، اما محل نصب process پیچیده می شود، ایجاد نسخه ای است که شما نیاز دارید. Modernizr در دو نسخه قابل دانلود می باشد. نسخه توسعه و نسخه تولید.

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

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

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

برای مثال ما، من روی نسخه توسعه کار خواهم کرد. من متوجه شدم که وقتی در حال ساخت یک سایت هستم، بهتر است با نسخه کامل کار کنم و بعد از اینکه فهمیدید از چه ویژگی هایی در سایت خود استفاده خواهید کرد، نسخه را کوتاه کنید.

استفاده از Modernizr برای CSS بین مرورگرها

بیایید چند ویژگی ساده را با Modernizr شناسایی کنیم. ما با یک سایت نمونه خام شروع می کنیم.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="https://www.webdesignerdepot.com/2013/10/master-responsive-design-with-modernizr/js/modernizr.min.js"></script>
</head>
<body>
</body>
</html>

بیایید از این تست کوچک برای تشخیص اینکه آیا مرورگر ما قادر به پشتیبانی از SVG است یا خیر استفاده کنیم. برای سادگی ما فقط دو تگ span را به آن اضافه می کنیم page برای شناسایی پشتیبانی

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="https://www.webdesignerdepot.com/2013/10/master-responsive-design-with-modernizr/js/modernizr.min.js"></script>
<style type="text/css">
.yes{color:green;}
.no{color:red;}
span{display:none;}
.svg .yes{display:inline;}
.no-svg .no{display:inline;}
</style>
</head>
<body>
<div>
<span class="yes">Huzzah! You have SVG support.</span>
<span class="no">BOO! You don't have SVG support.</span>
</div>
</body>
</html>

اگر این را در مرورگری که از SVG پشتیبانی می کند آزمایش کنید، پیام “Huzzah! You have SVG support” را خواهید دید. در حالی که اگر مرورگری دارید که از SVG پشتیبانی نمی کند، “BOO! شما پشتیبانی SVG ندارید” را خواهید یافت. پیام

این مثال بسیار ابتدایی است، اما ایده اصلی استفاده از Modernizr برای رفع مشکلات بین مرورگرها را نشان می دهد. اگر همین اصلاح را با استفاده از روش عامل کاربر قدیمی انجام می‌دادیم، باید برای هر مرورگر یک شیوه نامه داشته باشیم که از SVG پشتیبانی نمی‌کند و CSS خود را برای هر کدام تغییر دهیم. (برای هر کسی که علاقه مند است، تنها مرورگر اصلی فاقد پشتیبانی SVG اینترنت اکسپلورر 7 و پایین تر است.)

با افزودن کلاس svg/no-svg به html روی را page، CSS شما اکنون دارای یک انتخابگر است که می تواند برای نادیده گرفتن قوانین CSS موجود استفاده شود. چون هست روی تگ والد، می تواند برای نادیده گرفتن سایر کلاس ها استفاده شود روی را page.

بنابراین، در این مورد، به هر دو تگ span display:none; داده می شود. اگر پشتیبانی از SVG وجود ندارد، اعلان display:inline روی تگ span با کلاس .no به لطف قانون no-svg، display:hidden را لغو می کند. روی تگ html

بیایید یک مثال مفیدتر از همان ایده را امتحان کنیم. ممکن است بخواهیم یک تصویر پس زمینه SVG داشته باشیم روی را page، که اگر مرورگر از SVG پشتیبانی نکند به PNG برمی گردد. به طور پیش فرض از تصویر PNG استفاده می کنیم. به این ترتیب، SVG ارائه نمی شود مگر اینکه مورد نیاز باشد و تبدیل به یک پیشرفت پیشرونده می شود.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="https://www.webdesignerdepot.com/2013/10/master-responsive-design-with-modernizr/js/modernizr.min.js"></script>
<style type="text/css">
.skull{
width:300px;
height:300px;
background-image:url(images/skull.png);
background-size:100% auto;
background-repeat: no-repeat;
}
.svg .skull{background-image:url(images/skull.svg);}
</style>
</head>
<body>
<div class="skull"></div>
</body>
</html>

اکنون یک جمجمه SVG بسیار جذاب داریم که برای کاربرانی که نمایشگرهایی با وضوح بالا دارند بسیار جذاب و واضح به نظر می رسد و همچنان برای کاربرانی که مرورگرهای قدیمی تر دارند خوب به نظر می رسد.

خلاصه

اطلاعات زیادی در مورد Modernizr وجود دارد. ما به شما نشان دادیم که چگونه کار قابلیت مرورگر متقابل را بدون نیاز به به خاطر سپردن یا حفظ لیست در حال اجرا از مرورگرهایی که از SVG پشتیبانی می کنند، انجام می دهد.

این به طور استثنایی به عنوان یک سیستم عمل می کند که با آن به محرک های کاربر شما برای ایجاد وب سایت های سریع و بسیار کاربردی خدمت می کند.

آیا از Modernizr در پروژه های خود استفاده می کنید؟ از چه روش های دیگری برای ارائه محتوای واکنش گرا استفاده کرده اید؟ در نظرات به ما اطلاع دهید.

تصویر/تصویر کوچک ویژه، تصویر خطوط واگرا از طریق Shutterstock.