Real Time Web Analytics پرسش و پاسخ Elam

طراحی

Fallback Strategy چیست؟

نویسنده : کامران جعفری
تاریخ انتشار:
12:10:35 1394-08-16
در این مقاله به آموزش Fallback Strategy در طراحی مدرن می پردازیم.

بسیاری از طراحان وب در پیاده سازی خود نگران این موضوع هستند که کدهای آنها در مرورگرهای مختلف به درستی نمایش داده شوند. یکی از بهترین استراتژی ها در حل این موضوع استفاده از راهبردی به نام Fallback  یا Fallback Strategy است. با لرن روت همراه باشید تا این راهبرد مدرن را برای شما توضیح دهیم.

کاربران اینترنت، وبگردی خود را با انواع مرورگر ها انجام می دهند. از Internet Explorer نسخه های قدیمی تا نسخه 10 آن و Microsoft Edge و یا در گروه مرورگر های پیشرفته تر نظیر Google Chrome, Mozilla Firefox  یا Safari که هرکدام استانداردهای خود را دارند. پس یک طراح وب در زمان پیاده سازی باید این موضوع را در نظر بگیرد که با طیف وسیعی از مرورگرها روبروست که هر کدام استانداردهای خود را دارند و هرکدام پشتیبانی های متفاوتی از کدهای او دارند. از همین رو بسیار منطقی است تا طراحان از Fallback Strategy استفاده کنند  تا ریسک بوجود آمده در اثر استفاده کاربران از مرورگرهایی که تکنیک های استاندارد را به خوبی پشتیبانی نمی کنند کاهش دهند.
اگر بخواهیم به این سوال پاسخ دهیم که Fallback Strategy چیست، باید بگوییم این استراتژی یک روش جایگزین خواهد بود در زمانی که کدهای شما که به سبک کدهای مرورگرهای استاندارد نوشته شده اند، در مرورگر کاربر پشتیبانی نشوند.
در این مقاله ما به بررسی راه های پیاده سازی این استراتژی در HTML, CSS و جاوا اسکریپت می پردازیم.
•    HTML
در این حالت شما به احتمال زیاد از Fallback Strategy استفاده کرده اید. در این حالت، این راهبرد پیشنهاد می دهد که در صورتی که یک المان HTML در مرورگر کاربر پشتیبانی نمی شود، به جای آن یک المان، متن یا هر چیز دیگری بعنوان یک جایگزین به او نمایش داده شود. در مثال زیر ما یک تگ از نوع object تعریف می کنیم که یک وکتور گرافیکی یا SVG بعنوان داده به آن داده شده است. در صورت عدم پشتیبانی مرورگر کاربر از SVG، ما به او یک عکس نشان می دهیم. به مثال زیر توجه کنید:

<object data="vectorLearnRoute.svg" type="image/svg+xml">
   <img src="LearnRouteFallbackImage.png">
</object>
 

 گاهی حتی اگر شده با یک پیغام ساده، کاربر را، از مشکل به وجود آمده آگاه کنید، مثلا زمانی که مرورگر کاربر از تگ Audio پشتیبانی نمی کند:

<audio id="myAudio" src="audiofile.wav">
متاسفانه مرورگر شما این قسمت را پشتیبانی نمی کند، جهت پخش موسیقی، آن را از قسمت منو دانلود کنید
   </audio>

  •    Java Script
زمانی که از توابع جاوا اسکریپت استفاده می کنید، با توجه به مرورگر کاربر با استفاده از دستورات شرطی شرایط متفاوت را مدیریت کنید. در مثال زیر ما یک تابع تعریف کرده ایم که در صورتی که مرورگر کاربر مدرن و استاندارد بوده و DOM را پشتیبانی کند، در یک شرط و در صورتی که از نسخه های فدیمی Internet Explorer استفاده کند و DOM را پشتیبانی نکند در شرط دیگری این موضوع مدیریت می شود. 

function registerEvent( sTargetID, sEventName, fnHandler ) 
{
   var oTarget = document.getElementById( sTargetID );
   if ( oTarget != null ) 
   {
      if ( oTarget.addEventListener ) {   
         oTarget.addEventListener( sEventName, fnToBeRun, false );
      } else {
        var sOnEvent = "on" + sEventName; 
        if ( oTarget.attachEvent ) 
        {
           oTarget.attachEvent( sOnEvent, fnHandler );
        }
      }
   }
}
  

•    CSS
استفاده از این استراتژی در CSS، مهم ترین بخش از این استراتژی می باشد، زیرا طیف وسیعی از ویژگی های موجود در CSS در مرورگرهای متفاوت، با شرایط متفاوت پشتیبانی می شود، یا مقادیر پیش فرض متفاوت دارد و یا به طور کل پشتیبانی نمی شود. پس این بخش، بخش طلایی این استراتژی است.
برای مثال، ما در این بخش در مورد ویژگی شفافیت و کدری یا Opacity را مثال می زنیم. می دانیم که در IE 9 از این ویژگی پشتیبانی می شود، پس یک Div را بصورت زیر مقداردهی می کنیم:

 #css3filter {      
    opacity: 0.5;
  }

این روش، در IE 9 به بالا و مرورگرهای مدرن، پشتیبانی می شود، اما در نسخه های پایین IE نه. برای نسخه های پایین IE مجبوریم به صورت زیر عمل کنیم:

 #alphafilter {      
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter:alpha(opacity=50);
  }

حالا برای اینکه به سبک Fallback Strategy عمل کرده باشیم، این دو را با هم ترکیب می کنیم:

#combined {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter:alpha(opacity=50);
    opacity: 0.5;
  }

  در این حالت، در هر شرایطی که باشد و هر مرورگری که کاربر استفاده کند، این ویژگی به درستی اعمال خواهد شد.

برچسب ها:
مقالات مشابه