حالت موضوعی | حالت خطی

**majid33**

با سلام و خسته نباشید
چطوری میشه یه قالبی رو که طراحی شده برای مرورگرهای مختلف بهینه کرد طوری که در همه مرورگرها به یک صورت نمایش داده بشه
مثلا تکست ها جابجا نشن و مشکلاتی از این دست

**صدرا حسابی**

اول از همه اینکه وقتی از کد جاوا اسکریت داخل 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>

}

**majid33**

ممنون از وقتی که میزارید،خیلی خیلی ممنونم ازتون

متوجه کد دومی نشدم، اونو باید کجا قرار بدم ؟

قسمت head

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

<head>

    <jdoc:include type="head" />

<script type="text/javascript" src="https://code.jquery.com/jquery-1.8.3.js"></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>

</head>

ولی باز مشکلم حل نشد فایلهای css رو نمیتونه بخونه
حتی لینکها رو به اینصورت هم نوشتم ولی باز جواب نداد

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

document.write('<'+'link rel="stylesheet" href="templates/<?php echo $this->template ?>/style/style-mozila.css" />');

**صدرا حسابی**

خواهش می کنم، به صورت html به همراه عکس و فایل های cssتون آمادش کردم، می تونید این html رو در مرورگرهای مختلف تست کنید و ببینید که فایل های css به درستی شناسایی می شوند.
حالا از روی همین نمونه کدهارو وارد بخش head قالبتون بکنید.
کد دوم هم در واقع داره خود browser هارو تعریف می کنه و در کد بعدی دارید از اون تعریف استفاده می کنید، حتی می شه بر اساس ورژن مرورگر تعریف رو دقیق تر کرد.

وقتی کدهارو وارد کردید اول با فایرباگ ببینید تمام بخش ها در head خونده شده باشه، و اینکه ارروری نداشته باشید، بعد از اون در مورد آدرس می تونید یک بار اون رو به صورت مطلق آدرس دهی کنید تا مطمئن بشید کد به درستی خونده می شه، احتمالا به صورت نسبی اینجوری آدرس دهی کنید به درستی خونده می شه:

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

templates/your-template-name/style/style-mozila.css

**majid33**

ممنون درست شد Rose

خیلی خیلی ممنونم ازتون. چند وقتی بود دنبال این قضیه بودم بالاخره با راهنمایی های شما مشکلم حل شد.
فقط یک سوال دیگه
این کار من از درسته یا نه ؟ برای هر مرورگر یه css خاص لود بشه ؟
آیا برای تمامی قالبهای (قالبهای جوملا و html) که طراحی میشه این کار انجام میشه ؟ یا روش بهتری وجود داره ؟

**mostafa272**

معمولا این طوریه که یه فایل CSS اصلی و پیش فرض رو در نظر میگیرند که این فایل مثلا
به طور کامل با مرورگر فایرفاکس سازگاری داره و برای تمام مرورگرها هم لود میشه
بعدش میان توی فایل CSS مربوط به هر مرورگر موارد استثنا رو که در فایل اصلی برای اون مرورگر پشتیبانی نمیشه رو
قرار می دهند.

**صدرا حسابی**

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

**majid33**

میشه دقیق بفرمایید آقای mostafa272 روش کار به چه صورته ؟

آقای حسابی ممنون از اطلاعات خوبتون
اگر امکانش هست روش هایی رو که میفرمایید بصورت مفصل توضیح بدید تا از مطالبتون استفاده کنیم Rose