بهینه سازی قالب برای مرورگرهای مختلف

[صدرا حسابی]

اول از همه اینکه وقتی از کد جاوا اسکریت داخل html یا php استفاده می کنی باید از تگ <script> استفاده کنی مثلا(در xhtml) :

کد: (انتخاب همه)

<script type="text/javascript">

###########
SCRIPTe SHOMA!!
###########

</script>

در هر حال بهتر کدها داخل یک فایل .js خارجی ریخته بشه و در head قالب فراخوانی بشه، زمانی که کدها داخل فایل js. قرار می گیرند دیگه نیازی نیست تگ script استفاده بشه.

مورد دیگه باید کتابخونه jquery برای اجرای کدخونده بشه، مشکلی که در این روش وجود داره اینه که jQuery.browser فقط تا ورژن 1.8.3 ساپورت می شه و بعد از اون حذف شده ولی در هر صورت قابل استفادست.(البته روش های دیگه رو آموزشش رو بعدا می ذارم) من کدهارو کامل قرار می دم همین جوری می تونی تو Head کپی کنی اجرا می شن، ولی بهتر در فایل های .js مجزا قرار بگیرند، البته کدهارو کمی تغییر دادم، اگه آدرس دهی فایلهای css مشکل داشت تغییرشون بده من نسبت به فایل index.php آدرس دادم.

کد: (انتخاب همه)

<script type="text/javascript" src="https://code.jquery.com/jquery-1.8.3.js"></script>

کد: (انتخاب همه)

<script type="text/javascript">
var userAgent = navigator.userAgent.toLowerCase(),
    browser   = '',
    version   = 0;

$.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase());

// Is this a version of IE?
if ($.browser.msie) {
  userAgent = $.browser.version;
  userAgent = userAgent.substring(0,userAgent.indexOf('.'));    
  version = userAgent;
  browser = "Internet Explorer";
}

// Is this a version of Chrome?
if ($.browser.chrome) {
  userAgent = userAgent.substring(userAgent.indexOf('chrome/') + 7);
  userAgent = userAgent.substring(0,userAgent.indexOf('.'));    
  version = userAgent;
  // If it is chrome then jQuery thinks it's safari so we have to tell it it isn't
  $.browser.safari = false;
  browser = "Chrome";
}

// Is this a version of Safari?
if ($.browser.safari) {
  userAgent = userAgent.substring(userAgent.indexOf('safari/') + 7);    
  userAgent = userAgent.substring(0,userAgent.indexOf('.'));
  version = userAgent;    
  browser = "Safari";
}

// Is this a version of Mozilla?
if ($.browser.mozilla) {
    //Is it Firefox?
    if (navigator.userAgent.toLowerCase().indexOf('firefox') != -1) {
        userAgent = userAgent.substring(userAgent.indexOf('firefox/') + 8);
        userAgent = userAgent.substring(0,userAgent.indexOf('.'));
        version = userAgent;
        browser = "Firefox"
    }
    // If not then it must be another Mozilla
    else {
      browser = "Mozilla (not Firefox)"
    }
}

// Is this a version of Opera?
if ($.browser.opera) {
    userAgent = userAgent.substring(userAgent.indexOf('version/') + 8);
    userAgent = userAgent.substring(0,userAgent.indexOf('.'));
    version = userAgent;
    browser = "Opera";
}
</script>

کد: (انتخاب همه)

<script type="text/javascript">
if (browser.indexOf("Chrome")>-1) {
document.write('<'+'link rel="stylesheet" href="style/style-chrome.css" />');
} else if (browser.indexOf("Firefox")>-1) {
    document.write('<'+'link rel="stylesheet" href="style/style-mozila.css" />');
} else if (browser.indexOf("Opera")>-1) {
    document.write('<'+'link rel="stylesheet" href="style/style-opera.css" />');
} else if (browser.indexOf("Internet Explorer")>-1) {
    document.write('<'+'link rel="stylesheet" href="style/style-ie.css" />');
</script>
}