BlackDal Active CSS

[حامد مصافی]

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


قابلیت های کلیدی :
1. حذف کامنت ها
در خروجی ActiveCSS تمام کامنت های موجود در استایل به منظور کاهش حجم و دور نگاه داشتن تغییرات نا تمام از دید کاربر حذف خواهند شد.
2. امکان درج شرط برای مرورگر و موتور مرورگر ها به صورت یک خطی و چند خطی
این امکان را خواهید داشت تا در مورد اعمال یک خط یه یک بلاک شرطی را تعیین کنید. این شرط می تواند شامل نام مرورگر یا یکی از نام های هم خانواده مرور گر باشد. مثال:

[if ie]display: inline-block;

[if gecko].style{
display: block;
background-color: green;
}علاوه بر سینتکس فوق امکان درج شروط بلوکی حتی با بلوک else نیز وجود دارد، مثال:

[if gecko]
display: block;
overflow: auto;

-moz-border-radius-topright: 7px;
-moz-border-radius-topleft: 7px;
-moz-box-shadow: #dcdcdc 2px 0px 2px 2px;
[else]
display: inline-table;
[endif]
3. امکان مقایسه نسخه مرورگر

با درج نسخه مرورگر و استفاده از علامت های مقایشه شرط (<, >, <=, >=, =) قادر خواهید بود تا تطابق نسخه مرورگر کاربر را در شرط اعمال کنید

[if gecko>4]
background-color: green
[else]
background-color: red
[endif]نکته : نسخه مرورگر در حالتی بررسی خواهد شد که نام مرورگر مطابقت داشته باشد. در مثال زیر اگر مرورگر کاربر ie نسخه 2 باشد پس زمینه قرمز خواهد بود، اما اگر ie نباشد بدون درنظر گرفتن نسخه بلاک شرط اجرا نخواهد شد. حتی اگر مرورگر دیگری با نسخه 2 باشد

[if ie=2]
background-color: red;
[endif]4. امکان درج نقض شرط
هر یک از شروط ذکر شده امکان نقض را نیز خواهند داشت،)علامت ! قبل از نام مرورگر) مثال:

[if !ie]display: inline-block;

[if !gecko].style{
display: block;
background-color: green;
}5. امکان درج شرط برای پلتفرم
به جای نام مرورگر می توانید نام پلتفرم سرویس گیرنده را نیز ذکر کنید

/* this will be displayed in windows nt or server */
[if winnt]display: inline-block;6. تعریف متغیر
با استفاده از این امکان قادر خواهید بود تا یک متغیر را تعریف کرده و در خلال تعاریف استایل از آن استفاده کنید. یک متغیر در اولین مکان مقدار دهی ایجاد شده و پس از آن در طول آن فایل و همچنین فایل های import شده قابل شناسایی خواهند بود.

$var1=green
.style1{
display: block;
background-color: $var1;
}
.style2{
background-color: $var1;
}همچنین امکان تعریف متغیر در بلوک های شرطی با سینتکس زیر وجود دارد:

[if gecko]
$main_bg=#eeeeee
[else]
$main_bg=#fe33ff
[endif]

body{
background-color: $main_bg;
}
.style1{
display: block;
background-color: $main_bg;
}
7. پشتیبانی از import فایل دیگر
پردازنده ActiveCSS دستورات import را شناسایی کرده و پس از بررسی و پردازش فایل متن خروجی را در محل دستور import درج می کند. توجه: درج کوتیشن ( ‘ ) قبل و بعد از نام فایل اجباری است.

@import url(‘sample-test.css’);


$bg_color=#‎‎9c9c9;
@import url(‘sample-test.css’);

#BodyDiv {
/*width: 100%;*/
left: 0px;
right: 0px;

[if ie]display: inline-block;

[if gecko]
display: block;
overflow: auto;

-moz-border-radius-topright: 7px;
-moz-border-radius-topleft: 7px;
-moz-box-shadow: #dcdcdc 2px 0px 2px 2px;
[else]
display: inline-table;
[endif]

border-color: $bg_color;
}


[if gecko]
$main_bg=#eeeeee
[else]
$main_bg=#fe33ff
[endif]

@import url('Texts.css');نحوه استفاده:
1. استفاده مستقیم از parser
کلاس CssParser توانایی ترجمه یک فایل css را دارد. سازنده این کلاس مسیر یک فایل را دریافت کرده و متد ProccessCSS متن ترجمه شده را بر می گرداند.


protected void Page_Load(object sender, EventArgs e)
{
string theme = Request["theme"];
string fileName = Request["f"];

if (string.IsNullOrEmpty(theme)) theme = "light";
if (string.IsNullOrEmpty(fileName)) fileName = "main";

fileName = string.Concat("/Themes/", theme, "/", fileName, ".css");
fileName = Server.MapPath(fileName);

BlackDal.ActiveCSS.CssParser parser;
parser = new BlackDal.ActiveCSS.CssParser(fileName);
Response.ContentType = "text/css";
Response.CacheControl = "public";
Response.Expires = int.MaxValue;
Response.Write(parser.ProccessCSS());

}2. استفاده از handler
در این روش تمام در خواست های فایل با پسوند css توسط ActiveCSS ترجمه شده و به مرورگر تخویل داده می شود. برای فعال سازی این روش باید خط زیر را به فایل web.config و در بخش httpHandlers اضافه کنید
توجه: برای استفاده از این روش باید در IIS پسوند css به موتور ASP.NET مپ شده باشد.

<add verb="*" path="*.css" type="BlackDal.ActiveCSS.CssHandler" />