به شرکت طراحی سایت WEBRGB خوش آمدید.
آماده پاسخگویی هستیم: 4334 451 0936

طراحی سایت سازگار با اینترنت اکسپلورر

ارسال شده توسط: در بخش : آموزش طراحی و مدیریت سایت, بلاگ ۲۰ مهر ۱۳۹۱ دیدگاهها: ۲

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

برای تأمین این هدف، یک راه ۱۰۰٪ وجود دارد و آن استفاده از کدنویسی بهینه است که معمولاً هیچگونه مشکلی در نمایش در اینترنت اکسپلورر باقی نمیگذارد اما راههای دیگری نیز وجود دارند که سازگاری سایت با IE را تأمین میکنند. یکی از آنها کامنت گذاری در کد html است که به آن کامنت شرطی میگویند:

دستورات شرطی در IE

تمام طراحان وب و برنامه نویسان روش کامنت گذاری در html را میدانند:

<!– –>

این کار در کدنویسی بهتر و درک راحت تر کدها به برنامه نویسها کمک میکند. اما آنچه در اینجا هدف ماست، نوع خاصی از کامنت گذاری است که باعث می شود، وب سایت مرورگر کاربر را تشخیص داده و استایل (CSS) ویژه ی آن را لود نماید.

مثال:

<!–[if IE 7]>

<link rel=”stylesheet” type=”text/css” href=”…/ie7style.css” />

<![endif]–>

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

دستور شرطی فوق نمونه ی ساده ای از این سبک دستورات است. می توانیم به کمک دستورات شرطی، بازه ای از نسخه های مختلف IE را مورد هدف قرار دهیم:

  1. gt: نسخه های بالاتر از
  2. gte: نسه های برابر و بالاتر
  3. lt:‌نسخه های پایین تر از
  4. lte: نسخه های برابر و پایین تر از

برای مثال دو دستور شرطی به شکل زیر را معرفی میکنم:

<!–[if lt IE 7]>

<link rel=”stylesheet” type=”text/css” href=”http://www.blog.websaz24.com/wp-content/themes/DBS-Minimal/css/ie6style.css” />

<script type=”text/javascript” src=”http://www.blog.websaz24.com/wp-content/themes/DBS-Minimal/js/DD_belatedPNG_0.0.8a-min.js”></script>

<script type=”text/javascript”>DD_belatedPNG.fix(‘img#logo, #header #search-form, #slogan, a#left_arrow, a#right_arrow, div.slide img.thumb, div#controllers a, a.readmore, a.readmore span, #services .one-third, #services .one-third.first img.icon, #services img.icon, div.sidebar-block .widget ul li’);</script>

<![endif]–>

<!–[if IE 7]>

<link rel=”stylesheet” type=”text/css” href=”http://www.blog.websaz24.com/wp-content/themes/DBS-Minimal/css/ie7style.css” />

<![endif]–>

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

در CSS، کدهای مخصوصی برای نسخه های مختلف IE وجود دارد که از آنها نیز میتوانید بهره مند گردید البته گفته می شود این ها زیاد معتبر نیستند و بهتر است استفاده نشوند.

VN:F [1.9.22_1171]
Rating: 5.0/5 (1 vote cast)
VN:F [1.9.22_1171]
Rating: 0 (from 2 votes)

مطالب مرتبط

دیدگاهها: ۲

  1. ارسال شده توسط Farshad ۱۰ بهمن ۱۳۹۱ at ۹:۰۸ ب.ظ پاسخ

    منکه تنها مشکلم اینه که قالب در وسط اجرا نمیشه! و همش یا به طرف راست میره یا چپ.

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
    • ارسال شده توسط مدیریت سایت ۱۰ بهمن ۱۳۹۱ at ۱۰:۲۵ ب.ظ پاسخ

      @Farshad,
      اگر میخواید خودتون نیازهاتون رو تأمین کنید در این زمینه، پس واقعاً این مشکلات رو باید و باید تجربه کنید.
      موفق باشید.

      VN:F [1.9.22_1171]
      Rating: 0.0/5 (0 votes cast)
      VN:F [1.9.22_1171]
      Rating: 0 (from 0 votes)

نظر خود را با سایرین به اشتراک بگذارید!

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *