sina salehifard 22 اردیبهشت 1393 10 4490 بازدید آموزش HTML
فیلم آموزش نحوه نوشتن توضیحات شرطی برای ie در HTML

اگر یک طراح سایت باشید حتماً یکی از دغدغه های شما نمایش یکسان طرح سایتتان در مرورگرهای مختلف است که معمولاً در مرورگر  IE با bug (اشکال) برخورد می کنید. از آنجایی که معمولاً مشتریان و بازدیدکنندگان وب سایت ها هنوز از مرورگر IE استفاده می کنند، باید برای نمایش صحیح صفحه در IE کدهای Css, JavaScript  و یا  html ای را که ایراد دارد، بصورت جدا بنویسیم. یکی از بهترین روش ها برای رهایی از دست این ناهماهنگی ها، استفاده از توضیحات (comment) شرطی است.

آنچه در این فیلم آموزشی خواهید آموخت :

  • نحوه استفاده از توضیحات شرطی (Conditional Comment) در کدهای html برای مرورگر اینترنت اکسپلورر با بیان مثال های کاربردی
  • آشنایی با انواع کامنت های شرطی
  • آموزش نوشتن Css, Script و کدهای html اختصاصی برای مرورگر IE

در ادامه ی سلسله مباحث طراحی سایت، برای آشنایی بیشتر با commetها در طراحی صفحات وب، می توانید فیلم آموزش درج توضیحات در css را نیز مشاهده کنید.

فیلم آموزش نحوه نوشتن توضیحات شرطی برای ie در HTML

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

دسترسی به این بخش مخصوص اعضاست. شما می توانید به رایگان عضو شوید و به این بخش دسترسی داشته باشید. ورود / عضویت

دسترسی سریع :

متن فیلم آموزشی نحوه نوشتن توضیحات شرطی برای ie در HTML

توضیحات شرطی (conditional comments) :

اکثر کاربران ایرانی از windows XP استفاده می کنند و مرورگر پیش فرض این سیستم عامل، internet explorer است. مرورگر IE دارای محدودیت ها و مشکلات زیادی است. این مرورگر open source نیست و نیازی به افکت ها و اسکریپت های خاص دارد تا فقط روی آن اعمال شود، به همین دلیل برای رفع باگ های آن نیاز به کامنت های شرطی داریم تا بتوانیم مشخص کنیم که مرورگر ما اینترنت اکسپلورر است. پس در این آموزش با توضیحات شرطی، فقط نحوه تشخیص مرورگر ie را توضیح خواهیم داد.

به عنوان نمونه می خواهیم متن هایی برای ورژن های مختلف IE نشان دهیم که مثلا اگر مرورگر آن IE بود، این دستور اجرا شود و اگر نبود، متن دیگری نوشته شود و به همین صورت برای ورژن های مختلف IE…

می خواهیم اگر کاربر با IE وارد صفحه وب سایت ما شد، متن Your Borower Is IE را چاپ کند و اگر با مرورگر دیگری وارد شد، Your Borower Is Not IE را چاپ کند :


<!--Target All VERSIONS of IE-->

<!--[if IE]>

<p>Your Borower Is Ie</p>

<![endif] -->

&nbsp;

&nbsp;

<!--Target everything EXCEPT IE-->

<!--[if !IE]><!-->

<p>Your Borower Is Not Ie</p>

<!--<![endif]-->

نکته : اول هر شرط،IF قرار می گیرد و آخر شرط endif به معنی پایان شرط قرار میگیرد. پس متن Target everything EXCEPT IE یا Target All VERSIONS of IE دلخواه است یعنی اینکه یک متن کامنت است و نوشتن آن برای گیچ نشدن کدنویس است.

اکنون صفحه وب خود را در مرورگر IE و مرورگرهای دیگر (فایرفاکس و … ) تست می کنیم.

IE :

IE-1

FIREFOX :

IE-2

پس به وسیله دستور IF در کامنت ها می توانیم شروطی برای صفحه خود داشته باشیم. شما می توانید بین IF و ENDIF هر متنی را که دوست دارید، بنویسید. حتی می توانید به جای تگ p از تگ link هم استفاده کنید که اگر کاربر با مرورگر ie صفحه وب را باز کرد، یک فایل Css که برای مرورگر ie کد شده است، load شود و اگر با مرورگر دیگری بود، به css دیگری لینک شود.

نکته : If !ie به معنی این است که اگر با مرورگر ie وارد نشود .

نکته : ساختار <!– [if ie] –>  برای همه ی مرورگرها مانند یک comment معمولی می باشد ولی ie طوری برنامه ریزی شده است که این ساختار خاص را میشناسد و محتوای کامنت شرطی را تجزیه می کند.

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


<!--Target ALL VERSIONS of IE-->

<!--[if IE]>

<link href="http://example.com/css/ie-fix.css" />

<p>Your browser is IE</p>

<![endif]-->

<!--Target everything EXCEPT IE-->

<!--[if !IE]><!-->

<p>Your Browser is not IE!</p>

<!--<![endif]-->

<!--Target IE 7 ONLY-->

<!--[if IE 7]>

<p>Your Browser is IE 7</p>

<![endif]-->

<!--Target IE 6 ONLY-->

<!--[if IE 6]>

<p>Your Browser is IE6! What an old browser! Don't you like to update your browser?</p>

<![endif]-->

<!--Target IE 6 and LOWER-->

<!--[if lt IE 7]>

<p>Your IE Browser version is older than 7 (It is 6 or lower)</p>

<![endif]-->

<!--[if lte IE 6]>

<p>Your IE Browser is IE6 or lower</p>

<![endif]-->

<!--Target IE 7 and LOWER-->

<!--[if lt IE 8]>

<p>Your IE Browser version is older than 8 (It is 7 or lower) </p>

<![endif]-->

<!--[if lte IE 7]>

<p>Your Browser version is 7 or lower</p>

<![endif]-->

<!--Target IE 8 and LOWER-->

<!--[if lt IE 9]>

<p>Your Browser is IE 9</p>

<![endif]-->

<!--[if lte IE 8]>

<p>Your Browser is IE 8 or lower</p>

<![endif]-->

<!--Target IE 6 and HIGHER-->

<!--[if gt IE 5.5]>

<p>Your IE Browser version is 6 or highter</p>

<![endif]-->

<!--[if gte IE 6]>

<p>Your IE Browser version is 6 or highter</p>

<![endif]-->

<!--Target IE 7 and HIGHER-->

<!--[if gt IE 6]>

<p>Your IE Browser version is 7 or highter</p>

<![endif]-->

<!--[if gte IE 7]>

<p>Your IE Browser version is 7 or highter</p>

<![endif]-->

<!--Target IE 8 and HIGHER-->

<!--[if gt IE 7]>

<p>Your IE Browser version is 8 or highter</p>

<![endif]-->

<!--[if gte IE 8]>

<p>Your IE Browser version is 8 or highter</p>

<![endif]-->

دسترسی سریع :

نظرات کاربران (10)



  1. omid

    با درود و سپاس از آموزشتون

    برای وردپرس چطور میشه این آموزش رو به کار برد.
    قالب من با IE هماهنگ نیست.
    ممنون میشم اگه کامل توضیح بدید.
    با سپاس

    • گروه آموزش طراحی سایت

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

      • امید

        من در دوره ثبت نام کردم
        ممکن است بگویید عنوان ویدئویی که این آموزش را می دهد چیست؟
        قالبی دارم که نیاز است با ie8 سازگار شود.
        با سپاس

        • گروه آموزش طراحی سایت

          با عرض سلام و احترام خدمت شما
          همانطوری که در جلسه آموزشی با عنوان “دریافت اطلاعات کلی و اصلی سایت وردپرسی با تابع ()bloginfo” توضیح داده شده است، شما در یک قالب وردپرس، میتوانید مستقیما از تگ های HTML برای ارتباط میان کدهای HTML و PHP تان و همچنین کدهای CSS استفاده کنید.
          در فیلم آموزشی جلسه مذکور، شما نحوه ی ایجاد اتصال بین فایل style.css و قالب وردپرس تان را می آموزید و دقیقا به همین سبک می توانید هر فایل CSS دیگری را نیز به قالب وردپرس تان ارتباط بدهید.
          به عنوان مثال می توانید فایلی با نام ie8-style.css بسازید و کدهای CSS که مربوط به سازگار کردن قالب وردپرس با IE8 به بالا هستند را در درون آن فایل بنویسید؛ سپس با نوشتن کد مربوطه (این کد به شما ایمیل شد)، آن را به قالب وردپرس تان (و البته تنها برای کاربرانی که از IE8 به بالا استفاده می کنند، متصل کنید.

  2. سینا

    سلام
    من بازهم تلاش کردم کد دقیق و عین اون چیزی که تو فیلم آموزش بود رو وارد کردم اما بازم مشکل همونه.
    یه جایی تو اینترنت خوندم که دیگه از این دستورات استفاده نمیکنن در واقع از کدهای جاوااسکریپت استفاده می کنن

    • گروه آموزش طراحی سایت

      با سلام
      خیر این کدها در حال حاضر نیز کاملا در طراحی صفحات وب معتبر و مورد استفاده اند.

      • سینا

        با سلام
        بله شما کاملا درست می فرمایید اما در مرورگر IE10 به بعد این دستورات به طور پیش فرض ساپورت نمیشه ولی با با استفاده از دستور زیر و به قول مایکروسافت میشه درمانش کرد

        منبع هم لینک زیره
        https://msdn.microsoft.com/en-us/library/hh801214%28v=vs.85%29.aspx

        • گروه آموزش طراحی سایت

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

  3. سینا

    با سلام
    من این دستورات شرطی(دستوراتی که مخصوص IEبود) را عینا در کامپیوترم با ویندوز 8.1 نوشتم اما هیچکدومشن در IE اجرا نشد
    و در ضمن دستوری که برای غیر IE بود در تمام مرورگرها و در خود مرورگر اینترنت اکسپلورر باز هم نمایش داده شد-لطفا راهنماییون کنید
    با تشکر

    • گروه آموزش طراحی سایت

      با عرض سلام و احترام خدمت شما
      لطفا در نوشتن کدها و همچنین مقایسه نسخه مرورگرتان دقت بفرمایید، چون همانطوری که در فیلم نیز مشاهده کردید، کدها بدون ایرادی اجرا میشوند.