4 روش هک CSS برای حل مشکلات در مرورگرهای مختلف

هک های CSS در اکثر مواقع ناجی طراحان و توسعه دهنگان وب هستند. تصور کنید لحظه ای را که ناامیدانه به دنبال یک راه حل برای استفاده از دستوری هستید که در مرورگری پشتیبانی میشود و با مرورگر دیگری سازگاری ندارد؛ در این حین یافتن یک تکه کد هک CSS و رفع مشکل، بسیار لذت بخش است و میتواند ساعت ها صرفه جویی در وقت را برای یک طراح به ارمغان بیاورد. در این ارسال 4 شیوه هک کاربردی و محبوب در CSS را به شما معرفی خواهم کرد.

فرض کنید قصد طراحی یک قالب بسیار شیک با تصاویر و افکت های زیبا دارید. اولین مشکلی که وجود دارد عدم پشتیبانی مرورگر IE6 از بسیاری دستورات CSS و از همه مهمتر عدم پشتیانی این مرورگر از فرمت تصویری PNG است. همچنین برخی دیگر از دستورات که در IE8 اجرا میشوند، در IE7 و IE6 عمل نمیکنند.

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

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

شیوه نامه های مشروط

به زبان ساده شیوه نامه های مشروط، فایل های CSS هستند که بسته به مرورگر کاربر، یکی از آنها بر روی قالب اعمال می شود. یعنی توسط دستورات شرطی تعین می کنیم که مثلا اگر مرورگر بازدیدکننده IE6 بود فایل CSS با نام for-ie-6.css و اگر مرورگر بازدیدکننده IE7 بود فایل CSS با نام for-ie-7.css و اگر مرورگر IE8 بود فایل CSS با نام for-ie-8.css اجرا شود.

نکته جالب این است که نیازی به نگرانی در مورد سایر مرورگرها نیست و سایر مرورگرها این دستورات شرطی را نادیده میگیرند.

دستورات شیوه نامه های مشروط در داخل صفحه و داخل تگ قرار میگیرند. نحوه استفاده از شیوه نامه های مشروط به صورت زیر است:




نحوه اعمال شدن دستورات فوق بر روی صفحه چیزی شبیه استفاده از دستورات زیر برای مرورگرهای مختلف است:

/* استایل شیت اصلی و عموعی */
.test { color: black; }

/* for-ie-8.css,  برای مرورگر اینترنت اکسپلورر 8 و ماقبل آن  */
.test { color: red; }

/* for-ie-7.css, برای مرورگر اینترنت اکسپلورر 7 و ماقبل آن */
.test { color: white; }

/* for-ie-6.css, برای مرورگر اینترنت اکسپلورر 6 و ماقبل آن  */
.test { color: black; }

کلاس های مشروط

اگر مایل به استفاده از شیوه نامه های مشروط در فایل های جداگانه نیستید، میتوانید از کلاس ها مشروط استفاده کنید. شما میتوانید کلاس های مشروط را بر روی تگ <body> و یا تگ <html> اعمال کنید و دستورات CSS خود را بسته به کلاس های مورد نظر بنویسید.

نحوه استفاده از کلاس های مشروط به صورت زیر است:





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

.test { color: black; }
.ie8 .test { color: red; } /* IE8 */
.ie7 .test { color: white; } /* IE7 */
.ie6 .test { color: black; } /*IE6 and IE5*/

هک های CSS

در اینجا نمونه ای از نحوه نوشتن دستورات بطوری که فقط در مرورگر مورد نظر اجرا شوند را مشاهده می کنید:

.test {
color: black;
color: green\9; /* IE8 and older, but there’s more… */
*color: blue; /* IE7 and older */
_color: red; /* IE6 and older */
color: expression('red'); /* IE6 and above */
}

استفاده همزمان از کلاس های مشروط و هک های CSS

برای کم کردن تعداد دستورات کلاس های مشروط که پیشتر گفتیم، می توان از تکنیک ترکیب کلاس های مشروط و هک CSS همزمان استفاده کرد:



دستورات فوق به مرورگر می گوید که در ورژن های پائین تر از IE9 برای سند <html> کلاس هایی با نام for-ie8 را مورد استفاده قرار بده. سپس کلاسی به صورت زیر تعریف میکنیم:

.for-ie8

اکنون با تلفیق هر دو روش بر روی همه مرورگرهای IE8، IE7 و IE6 به شکل زیر تسلط خواهیم داشت و همه آنها را با استایل های متفاوت پوشش میدهیم:

.test {
color: black;
}

.for-ie8 .test {
color: red; /* IE8 and older */
*color: green; /* IE7 and older */
_color: blue; /* IE6 and older */
}

نظرات (8) -

  • محمد

    09/11/1390 12:35:00 ق.ظ | پاسخ به این نظر

    سلام
    استاد عزیز
    ممنون از این آموزش
    فکر میکنم مشکلات ما بیشتر از این حد باشد،به آدرس زیر در ie6 نگا کنین
    tam-co.net
    منوی بالا کاملا ناقص و متفاوت است
    چنین مشکلاتی را چگونه باید برطرف نمائیم
    با تشکر

  • Bvk

    10/04/1390 12:05:42 ق.ظ | پاسخ به این نظر

    ضمن سلام و خسته نباشید ، تشکر بابت توضیحات جامعی که فرمودید ولی مشکل ما هنوز پا برجاست ئ مشکل عمده ما این هستش که اول من اینو میخوام بدونم که برای استفاده از دستورات شرطی که عرض کردید باید یک استایل جدا برای مرورگر اکسپلورر 7.0 فرضا نوشته بشه و بعد فراخوان کنیم در شرط ؟ و اگر این طور هست چگونه مثلا : یک همچین کدی : -moz-border-radius:5px;border-rدadius:5px;-moz-box-shadow: inset -2px -2px 10px #f00;
    color:#575757;text-shadow:1px 1px 0 #FFFFFF;
    -webkit-box-shadow: inset -2px -2px 10px #888; که در موزیلا 8.0 نمایش داده میشه رو تبدیل کنیم به کد مخصوص اکسپلورر 7.0 و یا هر نسخه از مرورگر . لطفا در این امر بنده رو راهنمایی فرمایید

  • حمید

    10/28/1390 11:19:27 ب.ظ | پاسخ به این نظر

    سلام

    جناب میرزایی خسته نباشین.

    روش آخر و به کار گیری * و _ رو تا حالا جایی نخونده بودم.

    با تشکر

  • mahdi GHG

    11/07/1390 10:16:03 ق.ظ | پاسخ به این نظر

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

    • Admin

      11/07/1390 11:32:02 ق.ظ | پاسخ به این نظر

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

  • مهدی

    12/18/1390 08:16:51 ب.ظ | پاسخ به این نظر

    ممنونم از مقالات خوبتون مهندس جان
    فقط یه سوال ؟
    من این تکنیک رو از قبل خونده بودم و چند بار هم تست کردم ولی اجرا نمی شه و هیچکدوم از استایلها لود نمیشن (با هیچ ورژن مرورگری)
    و دوم اینکه آیا با این روش فقط استایل میتونیم لود کنیم یا تگهای درون بادی هم میشه لود کرد؟

    مجدد متشکرم از زحمات شما

Loading