تیشرت Laravel
خرید
اطلاعات بیشتر
تیشرت اختصاصی برنامه نویس ها
خرید
اطلاعات بیشتر

اعمال CSS های جداگانه به هر یک از مرورگر های Opera,Firefox,Chrome,Safari و IE

سلام ;

روی قالب جدید فتولیا داشتم کار می کردم که مجبور شدم راهی پیدا کنم برای اینکه به یه div در هر مرورگر یه سبک css خاص اعمال بشه . بعد از کمی جستجو به راه جالبی رسیدم که خلاصه ترش رو قبلا در مورد مرورگر معظم اینترنت اکسپلورر دیده بودیم :) بله همون شرط هایی که IF IE و … ولی این بار در مورد تمام مرورگرها باید کار می کرد .

برای این کار مجبوریم از هک های css استفاده کنیم گرچه ممکنه فایل css ما رو غیر استاندارد کنه ولی گاهی چاره ای نیست ;)

برای نمایش کارکرد این روش ۶ پاراگراف برای مرورگرهای مختلف ایجاد کردیم که در هر مرورگری فقط یکی از پاراگراف ها رنگی می شوند .

 

هدف قرار دادن InternetExplorer در CSS

/* IE 7 */
html > body #ie7
{
*color:blue;
}

/* IE 6 */
body #ie6
{
_color:blue;
}

 

هدف قرار دادن Firefox در CSS

/* Firefox 1 - 2 */
body:empty #firefox12
{
color:blue;
}

/* Firefox */
@-moz-document url-prefix()
{
#firefox { color:blue; }
}

 

هدف قرار دادن Safari/Chrome در CSS

با توجه به اینکه این دو مرورگر از موتور یکسان webkit استفاده کردن ،سبک ما به هر دو به صورت یکسان اعمال خواهد شد

/* Safari/Chrome */
@media screen and (-webkit-min-device-pixel-ratio:0)
{
#safarichrome { color:blue; }
}

 

هدف قرار دادن Opera در CSS

/* Opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{
head~body #opera { color:blue; }
}

 

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

 

 

 

در همین رابطه :   نمایش سه بعدی (3D) وب سایت با مرورگر Firefox 11

11 Comments

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

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

")/*]]>*/