ورود به کارتابل مشتریان وب مهراز
سازگاری طراحی واکنشی وب با Cross-browser
مفاهیم طراحی وبدر حين ايجاد يک وب سايت – مخصوصا اگر هدف شما ايجاد يک وب سايت با ساختار واکنشي (responsive) باشد – يکي از مهمترين و تکراري ترين مشکلات اين است که طراح وب مجبور است با سازگاري cross-browser مواجه شود ( که سازگاري با مرورگرهاي مختلف مي باشد).
طراح يک وب سايت بايد از درست کار کردن و عاري از ارور بودن وب سايت خود مطمئن باشد و خاطر جمع باشد که صفحه وب نوشته شده توسط او در هر پلتفرمي درست عمل خواهد کرده و صحيح نمايش داده شود.اين مسئله يکي از پيچيده ترين و خسته کننده ترين جنبه هايي است که بايد به هنگام طراحي هر پروژه جديدي ، در نظر بگيريد. اما ضروري است که در اين زمينه "شما" نبايد چيزي را از قلم بياندازيد و سازگاري مرورگرها را بطور مداوم و در طول اجراي پروژه در ذهن خود نگه داريد.
بسياري از ظرفيت هاي جديد CSS که در ورژن جديد CSS3 معرفي شده اند ، هنوز بطور گسترده توسط تمامي مرورگرهاي اصلي پشتيباني نمي شوند. در واقع برخي ها تشخيص داده نشده و کاملا در نظر گرفته نمي شوند که باعث ايجاد مشکلات بزرگي خواهد شد اگر بر خصوصيات پشتيباني نشده CSS تکيه کرده باشيد. اين مسئله فقط محدود به نوع مرورگرها نيست. بلکه در برخي مرورگر ها دو نسخه متفاوت نيز مي توانند ويژگي هاي و تکنيک هاي متنوع طراحي را پشتيباني کنند يا نکنند، که سازگاري با مرورگرها جزو مهم اين ويژگي ها مي باشد.
تصاوير و رسانه ها بايد منعطف و منطبق با دستگاه هاي مختلف باشند و در عين حال موضوع حياتي است که سرعت بارگذاري صفحه را پايين نياورند. اگرچه هنوز راه حلي ايده آل براي مشکلاتي از قبيل اندازه صفحات نمايش مختلف، پهناي باند محدود، عملکرد در رزولوشن بالا و ... وجود ندارد.
اين مشخص است که استفاده از يک تصوير تکي (بزرگترين نسخه ممکن) ، نمي تواند راه حلي قابل توصيه براي تمام دستگاه ها باشد. تصور کنيد که يک کاربر اسمارت فون نسل دوم بخواهد طرح شما را بارگذاري کند. سواي بارگذاري بسيار کند تصوير شما، اين تصاوير با رزولوشن بالاي شما، احتمالا حدود يک چهارم اندازه اصلي نمايش داده خواهند شد.
بزرگترين مشکل اين است که کوئري هاي رسانه اي با در مرورگرهاي قديمي کار نمي کنند. در نتيجه يک صفحه وب با طراحي واکنشي، فقط توسط کساني که مرورگرهايشان از نظر ويژگي هاي جديد CSS3 بروز مي باشد، کاملا صيح مشاهده خواهد شد. خوشبختانه 3 راه حل بر پايه جاوااسکريپت وجود دارد که مي تواند به ما کمک کند تا براي مرورگرهاي قديمي فاقد پشتيباني CSS3 ، طراحي واکنشي ارائه دهيم : Respond.js ، Modernizr و adaptive.960.js
Respond.js
اولين راه حلي که به آن اشاره خواهيم کرد ساده ترين آنها است. اين اسکريپت، درک و اجراي کوئري رسانه اي CSS3 را در نسخه هاي قديمي مرورگرها فعال مي کند :
<script type="text/javascript" src="js/respond.min.js"></script>
اسکريپت بالا روي صفحه فراخوانده خواهد شد و پشتيباني از تمام کوئري هاي رسانه اي را براي مرورگرهاي قديمي تر اضافه مي کند. اين اسکريپت باعث خواهد شد حتي در مرورگرهاي قديمي تر نيز دستورالعمل هاي CSS3 درست کار کند.
Modernizr
راه حل دوم استفاده از ابزاري به نام Modernizr مي باشد. اين ابزار، کتابخانه کوچکي از جاوااسکريپت مي باشد که در دسترس بودن پياده سازي بومي براي تکنولوژي نسل بعد وب را بررسي و تاييد مي کند. بطور مثال : ويژگي هايي که از مشخصات HTML5 و CSS3 نشأت گرفته اند.
بسياري از اين ويژگي ها هم اکنون حداقل در يکي از مرورگرهاي اصلي پياده سازي شده است. کاري که اين ابزار انجام مي دهد اين است که به شما مي گويد اين خصوصيات به صورت بومي در مرورگر مورد نظر پياده سازي شده است يا خير.
بعد از فاز اول يافتن ويژگي ها، Modernizr يک آبجکت جاوااسکريپت با نتايج ايجاد مي کند و کلا س ها را به عناصر HTML اضافه مي کند تا توسط CSS شما هدف قرار بگيرد.
Modernizr اين مرورگر ها را پشتيباني مي کند : IE6+، Firefox 3.5+، Opera 9.6+، Safari 2+، Chrome، Mobile Safari، Android WebKit browser، Opera Mobile
شما مي توانيد از اينجا نسخه کامل کتابخانه را دانلود کرده و آن را بر اساس مشخصه ها خود پياده سازي کنيد.
شما بايد اين کد را داشته باشيد :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Your title</title>
<script type="text/javascript" src="modernizr-latest.js""></script>
</head>
<body>Your content</body>
</html>
حال شما يک کتابخانه جاوااسکريپت داريد که نشان مي دهد تابع هاي HTML5 و CSS3 که استفاده کرده ايد پشتيباني مي شوند يا خير. صفحه را در مرورگر اجرا کنيد و به کد آن در Chrome developer tools يا Firebug نگاه کنيد.
بايد چيزي شبيه اين را مشاهده کنيد :
<html class="js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase no-indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage no-borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio no-localstorage no-sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">
adapt.960.js
سومين راه حل که مي توان در نظر داشت با دو راه حل قبلي بسيار متفاوت است. با اين حال مفهوم آن خيلي شبيه به کوئري هاي رسانه اي CSS3 مي باشد.
اگر از CSS3 در يک فايل تکي استفاده کنيم، کتابخانه به ما براي جدا کردن و قرار دادن کد درون چند فايل CSS نياز خواهد داشت، براي هر نوع دستگاه يک فايل. کتابخانه راه حل هر دستگاه را تحليل کرده و CSS طراحي شده براي رزولوشن مشخص آن نمايشگر را فراخواني خواهد کرد.
با خط زير مي توانيم کتابخانه را در صفحه خود فعال کنيم :
<script type="text/javascript" src="js/adapt.min.js"></script>سپس بايد کد زير را کپي کنيم :
<script type="text/javascript">
var ADAPT_CONFIG = {
// Where is your CSS?
path: 'assets/css/',
dynamic: true,
callback: myCallback,
range: [
'0px to 760px = mobile.css',
'760px to 980px = 720.css',
'980px to 1280px = 960.css',
'1280px to 1600px = 1200.css',
'1600px to 1920px = 1560.css',
'1940px to 2540px = 1920.css',
'2540px = 2520.css'
]
};
</script>
CSS معمول – همان CSS که بايد براي تمام اندازه هاي نمايشگر تنظيم شود- بايد در يک فايل CSS متفاوت قرار گيرد، که براي راحتي کار ، مي توانيم master.css را فراخواني کرده و آن را قبل از ادغام اين کتابخانه بازيابي کنيم. درست مانند يک فايل CSS معمولي.
<link href="assets/master.css" rel="stylesheet" type="text/css" media="screen" />
نتيجه گيري
کدام يک از راه حل ها را بايد اتخاذ کرد؟ هر سه آنها موجود مي باشند. اگر اولي (respond.js) را برگزينيد (بر خلاف adapt.960.js که به چندين فايل CSS نياز دارد) بايد يک فايل تکي CSS بنويسيد. و در نهايت اگر Modernizr را انتخاب کنيد مزاياي ظرفيت هاي جديد CSS3 در مرورگرهاي قابل پشتيباني را خواهيد داشت که مي توانيد توسط آنها وضعيت موجود در مرورگرهاي غيرقابل پشتيباني را کنترل کنيد.
نظر شما
>