۱۳۸۵/۱۱/۱۱

توضیحات شرطی - Conditional Comments

سلام

مقدمه
گاهی اوقات در طراحی سایت، شما به مشکل مغایرت طراحی در دو مرورگر فایرفاکس و اینترنت اکسپلورر برخورد می کنید. مثلا text-align در فایرفاکس درست دیده می شود ولی اینترنت اکسپلورر آن را اشتباه نمایش می دهد. البته در صورت کد نویسی صحیح اینگونه مشکلات کمتر پیش می آید.
Conditional Comments، توضیحات شرطی خاصی می باشند که همانند یک اکستنشن در IE نسخه 5 به بالا کار می کنند. Conditional Comments به شما قابلیت تشخیص مرورگر IE و نسخه آن را می دهند.

نحوه استفاده
در زیر یک توضیح ساده که در بین کدهای x-html نوشته می شود را مشاهده می کنید:
<!-- This text will be ignored by the browser. -->

ساده ترین دستور زبان Conditional Comments مانند زیر است:
<!--[if IE]> 
This text will be shown by IE/win ver. 5.0 and higher.
<![endif]-->


برای اعمال دستورات بر روی نسخه خاصی از IE می توانید نسخه آن را به صورت زیر بعد از [if IE بنویسید(در اینجا نسخه های 5 اعمال شده اند. مانند 5, 5.1, 5.5 و ...):
<!--[if IE 5]> 
The major version number of this browser is 5.
<![endif]-->

(در اینجا نسخه 5.5 اعمال شده است)
<!--[if IE 5.5000]> 
You are using IE/win 5.5.
<![endif]-->

همچنین این دستورات قابلیت استفاده از عمگلر هایی مانند <, > و ... را دارند که در زیر معرفی شده اند:
lt : کوچکتر less than
lte : کوچکتر یا مساوی less than or equal
gt : بزرگتر greater than
gte : بزرگتر یا مساوی greater than or equal

نحوه نگارش این عملگرها در دستور زبان Conditional Comments به صورت زیر است:
<!--[if gte IE 6]> 
This text will be shown by IE/win ver. 6.0 and higher.
<![endif]-->

عملگر نفی (!) نیز قابل استفاده است:
<!--[if !gte IE 6]>
This text will be shown by IE/win ver. 6.0 and higher.
<![endif]-->

و یا:
<!--[if !IE]> 
This text will be not be shown by any version of IE/win that understands conditional comments. It won't be shown by any other browsers either because they will treat this as a normal comment.
<![endif]-->

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

نمونه کد کامل برای X-HTML


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Conditional comments</title>
</head>
<body>
<!--[if !IE]> <p>This is page is not being viewed with Internet Explorer
for Windows version 5.0 or higher.</p> <!--<![endif]-->
<!--[if IE]> <p>This is page is being viewed with Internet Explorer
for Windows version 5.0 or higher.</p> <![endif]-->
</body>
</html>

نمونه کد کامل برای CSS
<head>
<title>Conditional comments</title>
<link rel="sytlesheet" type="text/css" href="style.css">
<!--[if IE 5]>
<link rel="sytlesheet" type="text/css" href="bugFixForIE5x.css">
<![endif]-->
</head>

منبع (source)
موفق باشید

۵ نظر:

  1. Salam. az in ke sar zadi mamnoonam. hamoon tor ke khasti yek ax az mohite barnameye KP Coldwall gereftam boro bebin nazaret ro ham bede. rasti barnamaro dl koni ha

    پاسخحذف
  2. Salam. mamnoon ke mikhay KP Coldwall ro dl koni, bale man barnamaro dar site " betanews.com " sabt kardam, vali hanooz tayid nashode. rasti to age mitooni dar zamineye sabte barname rahnamayi koni begoo. bye felan

    پاسخحذف
  3. W3C@情報商材Laboratory...

    W3Cの文書構造は、検索エンジンにもかなり重要視されている
    部分にあたると言われています。
    ちなみにW3CはWWWの技術を標準化する団体です。
    しかし、色んなところでSE...

    پاسخحذف