دستورات اختصاصی مرورگرهای Chrome و Safari

نوشته فرهاد عیدی • 14 ارديبهشت 1390

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

chrome-safari-differenet-css-code.jpg

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

اگر شما می‌خواهید یک فایل سبک‌دهی (Stylesheet) کاملا متفاوت را به مرورگر خود نسبت دهید می‌توانید با استفاده از دستور زیر این کار را انجام دهید. در دستور زیر شما در قسمت نوع متالینک خود به جای text/css عبارت text/chrome یا text/safari را وارد می‌کنید که باعث می‌شود مرورگرهای دیگر این فایل را فراخوانی نکنند. این روش در مرورگرهای فایرفاکس 3.6 و 4 ، اوپرا 10 و 11 و مرورگر Internet Explorer نسخه‌های 6، 7 و 8 تست شده است و این مرورگرها فایل سبک‌دهی مربوط به این کد را به هیچ عنوان بارگذاری نمی‌کنند.

<link rel="stylesheet" href="/style.css" type="text/chrome" />

و البته این روش برای مرورگر Safari نیز به درستی کار میکند:

<link rel="stylesheet" href="/style.css" type="text/safari" />

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

@media screen and (-webkit-min-device-pixel-ratio:0) {
...
}

به عنوان مثال:

@media screen and (-webkit-min-device-pixel-ratio:0) {
#div {
    Margin-top:  90px;
}
}

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

نویسنده فرهاد عیدی
موارد مرتبط chrome google اختصاصی اپل دستورات سافاری safari فایل مرورگر کروم گوگل