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

روش های هک 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 اجرا شود.

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

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

<!--[if for IE 8]><link rel="stylesheet" href="/for-ie-8.css"><![endif]-->
<!--[if for IE 7]><link rel="stylesheet" href="/for-ie-7.css"><![endif]-->
<!--[if for IE 6]><link rel="stylesheet" href="/for-ie-6.css"><![endif]-->

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

/* استایل شیت اصلی و عموعی */
.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 خود را بسته به کلاس های مورد نظر بنویسید.

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

<!--[if lt IE 6]><html class="ie6"><![endif]-->
<!--[if IE 7]><html class="ie7"><![endif]-->
<!--[if IE 8]><html class="ie8"><![endif]-->

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

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

هک های 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 همزمان استفاده کرد:

<!--[if lt IE 9]><html class="for-ie8"><![endif]-->

دستورات فوق به مرورگر می گوید که در ورژن های پائین تر از 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*/

 

منبع : www.websiteha.com

 

نظرات 

 
+1 #1 fery 1391-05-24 12:01
با سلام
من یک قالب دارم که در کروم صحیح نمایش می یابد اما در موزیلا ی قسمتش بهم میریزه
چجوری میتونم از هک css استفاده کنم.مشکلش را میدونم باید پدینگ در css کروم با موزیلا پیکسلش فرق کنه
ممنون
 
 
+2 #2 مـرادی 1391-05-24 14:56
سلام

فکر نمیکنم چنین مشکلی وجود داشته باشد

معمولا کدهای در هر دو مرورگر فایرفاکس و کروم مثل هم نمایش داده میشود

برای نمایش کدهای خاص فقط در مرورگر فایرفاکس از کد زیر استفاده کنید:
@-moz-document url-prefix(){
/*your code here
}

کافی است کدهای خود را که فقط میخواهید در فایرفاکس اجرا شود را در این تگ قرار دهید.

برای راهنمایی بیشتر به انجمن جومینا مراجعه کنید.

موفق باشید.
 
 
+1 #3 سپیده صفری 1392-11-06 09:59
سلام خسته نباشید
من یک سایتی طراحی کردم با جوملا 2.5 که بالای صفحه را گرادینت دادم که این تغییر در گوگل کروم فقط نشون داده میشه و در مرورگرهای دیگه این تغییر اعمال نمیشه!
نمیدونم باید چیکار کنم ؟
میشه لطف کنید و هرچه سریعتر منوراهنمایی کنید!!!!!!!
 
 
+1 #4 مـرادی 1392-11-08 12:04
سلام خانم صفری

احتمالا کد css3 شما فقط برای مرورگر کروم ست شده است.
سایت خود را معرفی می کردید بهتر می شد تشخیص داد.
 
 
+2 #5 طراحی سایت 1392-11-20 18:44
ممنون از شما
 
 
+1 #6 mina 1393-01-27 09:35
سلام خسته نباشید
سایت من در همه ی ورژن های ie مشکل داره اسکرول نمی خوره یعنی نصف صفحه را نشان نمیده.
سایت با جوملا 2.5 قالب امیرکبیره.
ممنون میشم اگه راهنماییم کنید
:sad:
 

به علت ارسال اسپم های فراوان، قسمت نظرات سایت در حال حاضر غیرفعال می باشد.
به این دلیل از شما کاربران گرامی عذرخواهی می کنیم.

ایمن شده بوسیله وب سایت تک وب دیزاین تک وب دیزاین