PHP & CSS Hacks

July 17, 2005 at 06:20 pm

در پست قبلی مقدمه ای در مورد CSS Hacks بیان شد، حال در این پست قصد داریم راه حل باکلاس و بسیار جالبی را به کمک php برای شناسایی مرورگر و ارسال کدهای CSS متناسب با آن ارائه کنیم. برای آنکه بتوانیم دستورات PHP را در یک فایل css بکار ببریم، نیازمند این هستیم که از طریق شیوه نامه پیوندی (Linked Stylesheet) محتویات فایلی با پسوند php را در برچسب head صفحه، به شکل زیر قرار دهیم:

<link rel="stylesheet" href="styles.php" type="text/css" />

اکنون شما باید فایلی با نام styles.php در همان دایرکتوری که فایل صفحه تان قرار دارد ایجاد کنید. در اولین خط این فایل، با استفاده از تابع header نوع محتویات به صورت text/css تعریف می شود. هنگامی که این فایل در صفحه فراخوانی می شود اطلاعاتی از مرورگر کاربر به وسیله پارامترهای از پیش تعریف شده در php دریافت می شود و سپس کد css متناسب با آن مرورگر، ارسال خواهد شد. بدین منظور تابع detect را جهت شناسایی مرورگر، نسخه آن و پلتفرم (نوع سیستم عامل) به شکل زیر تعریف می کنیم: 

<?php
header("Content-type: text/css");
$d = detect();
$b = $d&#91;'browser'&#93;;
$v = $d&#91;'version'&#93;;
$o = $d&#91;'os'&#93;;
function detect()
	{
	$browser = array ("IE", "OPERA", "MOZILLA", "NETSCAPE", "FIREFOX", "SAFARI");
	$os = array ("WIN","MAC","LINUX");
	$info&#91;'browser'&#93; = "OTHER";
	$info&#91;'os'&#93; = "OTHER";
	foreach ($browser as $parent)
		{
		$s = strpos(strtoupper($_SERVER&#91;'HTTP_USER_AGENT'&#93;), $parent);
		$f = $s + strlen($parent);
		$version = substr($_SERVER&#91;'HTTP_USER_AGENT'&#93;, $f, 5);
		$version = preg_replace('/&#91;^0-9,.&#93;/','',$version);
		if ($s)
	   {
	$info&#91;'browser'&#93; = $parent;
	$info&#91;'version'&#93; = $version;
	     }
		}
	foreach ($os as $val)
		{
		if (eregi($val,strtoupper($_SERVER&#91;'HTTP_USER_AGENT'&#93;))) $info&#91;'os'&#93; = $val;
		}
	return $info;
	}
?>

نترسید، کد بالا هیچ چیز عجیبی نداره، بجز چندتا پارامتر و دو سه تا حلقه و عبارت شرطی. کدهای رنگ رنگی زیادی شلوغش کرده. روی هر تابعی که کارش رو نمی دونید کلیک کنید تا توضیحاتش رو در سایت php ببینید یا هر جاش گیر کردین عنوان کنید تا توضیح داده بشه. تا اینجا پایه کار شکل گرفته و باقی امور به خلاقیت شما بر می گردد. برای نمونه همان مدل جعبه ای پست قبل را در نظر بگیرید. اینبار می خواهیم مشکل را با استفاده از تابعی که نوشتیم حل کنیم. به سادگی و با استفاده از یک عبارت شرطی if/else این کار به صورت زیر امکان پذیر است:

#header {
  padding: 2em; 
  border: 0.5em;
  width: <?php
    if ($o == "WIN" && $b == "IE" && $v < 6) echo "15em;"
    else echo "10em;";
} &#91;/css&#93;

حالا کد بالا یعنی چه؟ یه عبارت شرطی ساده است که اگر سیستم ما ویندوز بود و مرورگرش از نوع IE و نسخه اش از 6 کمتر بود مقدار عرض رو 15em لحاظ کن در غیر اینصورت 10em. دقت کنید که ما در این شرط از عملگر and (&&) استفاده کردیم، یعنی همه شروط باید درست باشند تا نتیجه داری ارزش TRUE شود.  فکر کنم با این مثال متوجه سادگی و انعطاف پذیری در استفاده از php نسبت به استفاده از کاراکترهای ویژه و دستورات نامفهوم درکدهای css شده باشید. واسه همهینه که فریاد زدم برو php یاد بگیر. 

مثال مفید دیگری را بررسی می کنیم. همان گونه که می دانید ورژن های قدیمی اکثر مرورگرها از تصاویر با فرمت png پشتیبانی نمی کنند. یعنی اگر برای پشت صحنه یک عنصر در صفحه تصویری با فرمت png تعریف کنیم، در مرورگرهای مذکور نمایش داده نخواهد شد. راه حل چیست؟ مرورگرهای قدیمی را از ذهنمان حذف کنیم؟ برای یک طراح حرفه ایی غیر ممکن است. چون هنوز هستن کسانی که ورژن اکسپلررشان 5 یا 5.5 است. حتما می گویید از فرم gif استفاده می کنیم. باز هم برای یک طراح حرفه ایی این کار دشوار است. زیرا امکانات چشمگیری در مورد تصاویر png نسبت به gif موجود است که از آنجمله می توان شفاف سازی بهبود یافته را نام برد. 

حتما می گین من نمی فهمم شفاف سازی بهبود یافته یعنی چه همون gif خوفه گیر هم نده! بنده هم در جواب عرض می کنم که شفاف سازی بهبود یافته یعنی اینکه فایل های png بیشتر از آنکه بخواهند محدود به تنها یک رنگ برای ماسک های شفافیت باشند، می توانند تا 256 رنگ در یک ماسک استفاده کنند، بنابراین آنها لبه های شفاف خود را صاف و اثرات سایه را از بین می برند. قبلا مقاله ایی در مورد این دو نوع فرمت نوشته بودم. خلاصه اینکه نهایت کار این می شه که از کدهای css بهمراه php به شکل زیر اسفاده کنیم که نه سیخ بسوزه نه کباب:

&#91;css&#93;body   {
    background: url(<?php
    if ($o == "WIN" && $b == "IE" && $v < 6) echo "background.gif";
    else echo "background.png";
    ?>);
    }

فکر نکنم نیازی به تحلیل کد بالا باشه. کاملا مفهومه! مثال ها و کاربردهای مفید زیادی در این زمینه وجود داره که توضیحاتش از حوصله من خارجه. برای تمرین بیشتر فایلهای اسکریپت مقاله را از اینجا دریافت کنید. مقاله ایی که خوندید از نوشته ی استاد David Hellsing در اینجا و اطلاعات ناچیز من در اینباره اقتباس شده بود.

دسته: سی اس اس | نویسنده: مرتضی الوانی

  1. 21 نظر برای این مطلب ارسال شده است. نظر خود را ارسال کنيد »

  1. 1

    ميلاد قيصري

    ُسلام حاجي!!
    خيلي جالب بود !!
    خسته نباشي
    ادامه بده
    يا حق

    July 17, 2005 at 7:20 pm

  2. 2

    محمد

    بابا ایول!

    July 17, 2005 at 8:11 pm

  3. 3

    rahim

    سلام عالی بود
    می گم که راجع به چگونگی گذاشتن عکس در sidebar وردپرس و همینطور راجع به چگونگی ایجاد این منوهای سایه دار قشنگت در وردپرس هم توضیحاتی بده
    تک خوری بده :D

    July 19, 2005 at 11:25 am

  4. 4

    hamed

    سلام
    اقا ما باید چه کنیم شما برای سایت من یه قالب وردپرس بزنی!
    یه کمکی بکن دیگه

    July 20, 2005 at 2:14 am

  5. 5

    محمد

    چه جالبه .. هرچه به عمق این css میری بیشتر گیر میکنی ؟؟؟!!

    July 22, 2005 at 5:35 am

  6. 6

    سید

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

    July 28, 2005 at 7:13 am

  7. 7

    مرتضی الوانی

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

    درمورد نکته دومی هم که مطرح نمودید کاملا عرض شما صحیح است. اتفاقا در اثنای نگارش مقاله همین نکته به ذهنم رسید. به سراغ چندید فرام طراحی منجمله sitepoint رفتم و مشکل را مطرح کردم. در جواب پاسخ های گوناگونی دریافت کردم که یکی از آن ها این بود که بیایم از تلفیق جاوا اسکریپت و اختصاص ویژگی alternative styleshet استفاده کنیم. به این صورت که فایل css پیش فرض ما همان باشد که از تجزیه تحلیل رشته های مرورگر کاربر نتیجه شده. حال اگر کاربر به صورت آفلاین فایل را با مرورگر دیگری باز کرد بیاییم با جاوااسکریپت مرورگر را شناسایی و css مربوطه را برای حالت پیش فرض پیج مشخص کنیم. جدای از تمام این تفاسیر بسیاری از طراحان حرفه ای وب که از چنین روش های نوینی استفاده می کنند نسخه های متفاوتی را برای چاپ صفحات یا ذخیره ان ها ارائه می دهند و فکر کنم در این میان اگر این فرم ها هم موجود باشد باز هم ما ایرانی ها صفحات را با همین فرم ذخیره می کنیم. در مورد تغییر آبجکت های مرورگر یا User Agent ها ایراد از ما نیست ایراد از کاربر است.

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

    July 28, 2005 at 10:49 am

  8. 8

    لینکدونی

    استفاده از دستورات PHP در فایل CSS

    July 29, 2005 at 1:43 am

  9. 9

    زوگولو

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

    August 4, 2005 at 8:08 pm

  10. 10

    حامد

    اگر مي شه روش هك كردن را برايم بفرست
    قربانت خداحافظ

    August 9, 2005 at 8:11 pm

  11. 11

    مهدی

    سلام.میشه طریقه ساختن درایو مجازی را بوسیله نرم افزارزیر برام بفرستید؟ daemon tools

    August 10, 2005 at 3:09 pm

  12. 12

    ali

    اگه ممکنه تو نوشتن یه صفحه با css وتقریبا بدون html کمک کنید

    November 14, 2005 at 10:53 am

  13. 13

    Alvanweb » فشرده سازی CSS به کمک PHP

    […] با استفاده از ob_end_flush ابتدا بافر خروجی را می بندد و بعد محتویات بافر را در مرورگر چاپ می کند (در آینده در مورد بافر کردن خروجی و مزایای ان به تفصیل خواهم نوشت) حال اگر قصد دارید بدون تغییر پسوند، فایل را در صفحه فراخوانی کنید کافیست SetHandler را به شکل زیر در فایل .htaccess بکار ببرید. در غیر اینصورت پسوند CSS فایل را به فرمت PHP تغییر دهید، جزئیات این کار قبلا در این پست شرح داده شد. […]

    August 29, 2006 at 10:27 am

  14. 14

    Saeed

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

    September 21, 2006 at 1:23 am

  15. 15

    Bonyanalam

    والا کلی تایپ کردم به خاطر وارد نکردن ایمیل همش پرید !

    گفتم که خیلی خوشحالم که یه ایرانی رو می بینم تو اشتراک اطلاعات خساست به خرج نمی ده !

    ما اگه استاد هم که باشیم بازم شاگردیم ، وبلاگ شما نقش یه استادو واسم بازی کرد ! اولین باره کامنت می ذارم اما کلی تستفاده کردم .

    یه بحثی بود در مورد شناسائی مرورگر کاربر … که با توجه به نوع مرورگر کاربر استایل مخصوصی رو فراخونی می کرد . اگه در این مورد با css خارجی بحث بشه ، فکر می کنم کمک بزرگی باشه واسه طراحان وب .

    با آرزوی موفقیت برای تو دوست خوب .

    September 27, 2006 at 1:55 am

  16. 16

    نبی

    سلام
    ای ول داره !
    در مورد واژه هک باید عرض کنم این کلمه است با معنای کلی و به نظرم بجا استفاده شده است. یادم میاد کتابی دیدم با عنوان “هک های گوگل” که به نوعی ترفندها و کلکها به این موتور جستجو رو توسط زبان های برنامه نویسی آموزش میداد….

    باز هم ممنون
    نبی

    October 21, 2006 at 1:23 am

  17. 17

    مجید

    سلام
    اقا یه دیباگر بدر بخور مجانی که بشه همه صفحات و تریس کرد سراغ ندارید

    November 1, 2006 at 10:34 pm

  18. 18

    Alvanweb » توضیح نویسی فایل‌های CSS

    […] یادداشت‌هایی برای خودتان گاهی اوقات برای حل یک مشکل خاص ممکن است به CSS Hack نیاز داشته باشید. در این موارد نوشتن توضیح مختصری در مورد نحوه کار کد و یا اگر توضیحی در مورد آن بر روی اینترنت موجود است و از آن استفاده کرده‌اید، درج نشانی آن صفحه یک ایده خوب است: […]

    July 14, 2007 at 4:41 pm

  19. 19

    امید

    خیلی جالب بود .
    ممنون

    March 6, 2008 at 1:37 am

  20. 20

    Teknoloji Platformu

    Thanks For List ;)

    November 11, 2008 at 10:25 am

  21. 21

    fa

    agent dar web chiye?

    November 23, 2008 at 12:09 am