هک های 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 */
}