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

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

<div id="container">
<div class="percent"></div>
<div class="bar"></div>
</div>

المنت div کلی با آی‌دی container بدنه اصلی نوار را ایجاد میکند، المنت با کلاس percent درصد نوار را نمایش میدهد که میتوانید به دلخواه آن را حذف کنید و المنت بعدی با کلاس bar قسمت رنگی نوار را تشکیل میدهد که مقدار پر شده‌ی نوار را مشخص میکند.

بعد از این نوبت به نوشتن کد CSS میرسد:

#container {
background: #F0F0F0;
width: 200px;
height: 20px;
position: relative;
}
#container .percent {
text-align: center;
position: absolute;
width: 200px;
height: 20px;
top: 12%;
font: 12px Tahoma, Geneva, sans-serif;
}
#container .bar {
background: #3C0;
height: 20px;
}

مشخصه width دو المنت اول باید یکی باشد و مشخصه height هرسه المنت باید یکی باشد.

حالا کد اول را بصورت زیر تغییر میدهیم :

<div id="container">
<div class="percent">65%</div>
<div class="bar" style="width: 65%;"></div>
</div>

با تغییر دادن درصد مشخصه width میزان پر شدن نوار را مشخص میکنیم، حالا میتوانیم این درصد را به کمک یه زبان مانند php یا javascript تعیین کنیم و یا این کار را دستی انجام دهیم.

همچنین گاهی بنا به هر دلیلی قصد داریم تا قسمتی از سایت در مرورگر‌های مختلف متفاوت نمایش داده شود، یا میخواهیم متناسب با مرورگر مورد استفاده کاربر به او پیامی را نشان دهیم.

در این شرایط راه‌های زیادی وجود دارد که میتوان به کمک آنها نوع مرورگر را تشخیص داد، بیشتر این راه‌ها مارا مجبور به استفاده از نوعی اسکریپت میکنند.

اما در این مطلب قصد دارم تا امکان توضیحات شرطی (Conditional Comments) را که از نسخه اینترنت اکسپلورر ۵ به وسیله مایکروسافت در این مرورگر جای داده شده را توضیح دهم.

ابتدا باید انواع توضیحات شرطی را شرح دهیم :
توضیحات استاندارد در زبان HTML - این توضیحات که بطور استاندارد در زبان HTML وجود دارند و توسط تمام مرورگر‌ها شناخته میشوند، این توضیحات کار خاصی انجام نمیدهند و فقط برای نوشتن توضیحات در قسمتی از کد استفاده میشوند و هنگام تجزیه کد توسط مرورگر نادیده گرفته میشوند.
شیوه نگارش این نوع توضیحات به این صورت میباشد :

<!-- Comment Content -->

توضیحات شرطی از نوع downlevel-hidden – این نوع توضیحات در مرورگر‌هایی که توضیحات شرطی را نمیشناسند نادیده گرفته میشنود و محتوای آنها نمایش داده نمیشوند، شیوه نگارش آنها بصورت زیر است :

<!-- [if expression]>
HTML
<![endif]-->

توضیحات شرطی از نوع downlevel-revealed – این نوع توضیحات در مرورگر‌هایی که توضیحات شرطی را نمیشناسند بدون در نظر گرفتن نتیجه شرط اجرا میشوند ولی در مرورگر‌هایی که توضیحات شرطی را میشناسند فقط در صورتی که نتیجه شرط درست باشد اجرا میشوند، شیوه نگارش آنها بصورت زیر میباشد:

<![if expression]>
HTML
<![endif]>

خصوصیات توضیحات شرطی :

نحوه استفاده :
نحوه استفاده از این دستورات در زیر بصورت کلی نمایش داده شده است.

<!--[if IE]> <p>You are using Internet Explorer.</p> <![endif]-->
<!--[if !IE]> <p>You are not using Internet Explorer.</p> <![endif]-->

<!--[if IE 7]> <p>Welcome to Internet Explorer 7!</p> <![endif]-->
<!--[if !(IE 7)]> <p>You are not using version 7.</p> <![endif]-->

<!--[if gte IE 7]> <p>You are using IE 7 or greater.</p> <![endif]-->
<!--[if (IE 5)]> <p>You are using IE 5 (any version).</p> <![endif]-->
<!--[if (gte IE 5.5)&(lt IE 7)]> <p>You are using IE 5.5 or IE 6.</p> <![endif]-->
<!--[if lt IE 5.5]> <p>Please upgrade your version of Internet Explorer.</p> <![endif]-->

<!--[if true]> You are using an <em>uplevel</em> browser. <![endif]-->
<!--[if false]> You are using a <em>downlevel</em> browser. <![endif]-->

<!--[if true]><![if IE 7]> <p>This nested comment is displayed in IE 7.</p> <![endif]><![endif]-->

حالا برای مثال اگر بخواهیم که فایل CSS در مرورگر اینترنت اکسپلورر و دیگر مرورگر‌ها متفاوت باشد میتوانیم از کدی شبیه کد زیر استفاده کنیم.

<!--[if IE 6]>
<link rel="stylesheet" href="IE6-style.css" type="text/css" media="screen" />
<![endif]-->