هک سی‌اس‌اس – دستورات اختصاصی برای مرورگر اُپرا

علیها — Sat, 05 Dec 2009 13:55:57 +0000

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

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

خب، برگردیم سر ِ بحث ِ اصلی‌مان. برای اُپرا در حالت عادی، دستور اختصاصی وجود ندارد و باید از راه‌هایی که اصولا توصیه نمی‌شود، استفاده کرد. اما هک ِ زیر به ما در این مورد کمک بزرگی می‌کند و می‌‌توانیم خیلی راحت در بین دستورات سی‌اس‌اس، دستورات اختصاصی برای اُپرا بنویسیم:

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{

your css codes here..

}

یک مثال هم می‌زنم که کاملا متوجه‌ی ماجرا بشوید. به فرض، می‌خواهیم یک متن که در تگ P قرار دارد را در اُپرا با رنگ سبز نشان دهیم و در مرورگرهای دیگر با رنگ مشکی دیده شود. به این صورت عمل می‌کنیم:

p {
color: #000;
}

کد بالا، متن‌مان را مشکی می‌کند و کاری با نوع مرورگر ندارد.

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{

p {
color: #45c705;
}

}

واضح هست؟ با کد بالا گفتیم که متن موردنظر در اُپرا سبز باشد. همین :)

8 دیدگاه | فرستادن به: del.icio.us

یک طراح وب » دستورات اختصاصی

هک سی‌اس‌اس – دستورات اختصاصی برای مرورگر اُپرا