بروز رسانی دی ۲۶ام, ۱۳۹۹ ۳:۰۴ بعد از ظهر
مهر ۱۴, ۱۳۹۵ sara nikzad آموزش پیشرفته css 0
فرض کنید قصد طراحی یک قالب بسیار شیک با تصاویر و افکت های زیبا دارید. اولین مشکلی که وجود دارد عدم پشتیبانی مرورگر 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, برای مرورگر اینترنت اکسپلورر ۸ و ماقبل آن */ .test { color : red ; } /* for-ie-7.css, برای مرورگر اینترنت اکسپلورر ۷ و ماقبل آن */ .test { color : white ; } /* for-ie-6.css, برای مرورگر اینترنت اکسپلورر ۶ و ماقبل آن */ .test { color : black ; } |
اگر مایل به استفاده از شیوه نامه های مشروط در فایل های جداگانه نیستید، میتوانید از کلاس ها مشروط استفاده کنید. شما میتوانید کلاس های مشروط را بر روی تگ <body>
و یا تگ <html>
اعمال کنید و دستورات CSS خود را بسته به کلاس های مورد نظر بنویسید.
نحوه استفاده از کلاس های مشروط به صورت زیر است:
۱
۲
۳
۴
|
<!--[if lt IE 7]><html class="ie6"><![endif]--> <!--[if IE 7]><html class="ie7"><![endif]--> <!--[if IE 8]><html class="ie8"><![endif]--> <!--[if gt IE 8]><!--> <!--<![endif]--> |
پس از نوشتن دستورات فوق در کدهای HTML، فقط کلاس هایی که برای مرورگر مورد نظر نوشته شده اند بر روی صفحه اعمال میشوند. بنابراین چیزی که مرورگر اجرا می کنید به صورت زیر است:
۱
۲
۳
۴
|
.test { color : black ; } .ie 8 .test { color : red ; } /* IE8 */ .ie 7 .test { color : white ; } /* IE7 */ .ie 6 .test { color : black ; } /*IE6 and IE5*/ |
در اینجا نمونه ای از نحوه نوشتن دستورات بطوری که فقط در مرورگر مورد نظر اجرا شوند را مشاهده می کنید:
۱
۲
۳
۴
۵
۶
۷
|
.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 همزمان استفاده کرد:
۱
۲
|
<!--[if lt IE 9]><html class="for-ie8"><![endif]--> <!--[if gt IE 8]><!--> <!--<![endif]--> |
دستورات فوق به مرورگر می گوید که در ورژن های پائین تر از IE9 برای سند <html>
کلاس هایی با نام for-ie8
را مورد استفاده قرار بده. سپس کلاسی به صورت زیر تعریف میکنیم:
۱
|
.for-ie 8 |
اکنون با تلفیق هر دو روش بر روی همه مرورگرهای IE8، IE7 و IE6 به شکل زیر تسلط خواهیم داشت و همه آنها را با استایل های متفاوت پوشش میدهیم:
۱
۲
۳
۴
۵
۶
۷
۸
۹
|
.test { color : black ; } .for-ie 8 .test { color : red ; /* IE8 and older */ * color : green ; /* IE7 and older */ _color : blue ; /* IE6 and older */ } |
دی ۲۶, ۱۳۹۹ 0
مرداد ۱۲, ۱۳۹۹ 0
خرداد ۰۳, ۱۳۹۹ 0
اردیبهشت ۰۹, ۱۳۹۹ 0