اعمال استایل CSS جداگانه در مرورگر اینترنت اکسپلورر
کد تخفیف در جریان norooz97 %15 تا آخر خرداد 1397

در طراحی ها، عموما برای بخش ظاهری سایت یک استایل عمومی در نظر گرفته می شود که در این فایل استایل دهی تمامی عناصر و بخش های یک سایت انجام می شود. این دستورات CSS با اکثر مرورگرهای جدید سازگار هستند اما در میان این مرورگرها، اینترنت اکسپلورر (Internet Explorer) کمی متفاوت تر است و برخی از استایل ها ممکن است در آن به خوبی اجرا نشود یا همخوانی نداشته باشد.

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

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

قدم اول در چنین کاری این است که سایت را با مرورگر Internet Explorer باز کنیم. سپس از طریق امکان Inspect Element ، به جعبه ابزار توسعه دهندگان دسترسی پیدا کنیم و CLASS یا ID و همچنین استایل ها و خاصیت های آن بخش مورد نظر را پیدا کنیم و در همانجا به صورت زنده تغییرات را اعمال کنیم. در صورتی که نتیجه تغییرات مناسب بود، آن استایل جدید را در کدهای زیر اعمال می کنیم.

در اینجا ما 3 دستور متفاوت برای تعریف استایل های مجزا برای اینترنت اکسپلورر داریم. هر یکی از این کدها، مربوط به نسخه ای از این مرورگر است.

 


تعریف استایل برای اینترنت اکسپلورر نسخه 9 به پایین

این کد تنها برای اینترنت اکسپلورر نسخه 9 به پایین اجرا خواهد شد. بنابراین شما باید در مکانی از قالب یک فایل با فرمت css ایجاد کنید و تمامی تغییراتی که قصد دارید تنها در این مرورگر اجرا شوند را داخل این فایل قرار دهید.

این کد را نیز باید در فایل های قالب ، برای مثال در وردپرس، در فایل header.php و قبل از بسته شدن تگ </head> باید قرار دهید.

<!--[if IE]>
  <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

 


تعریف استایل برای IE نسخه 10 و 11

کد زیر، تنها برای نسخه 10 و 11 مرورگر اینترنت اکسپلورر استفاده میشود.

کد زیر را در فایل استایل اصلی قالبتان قرار دهید (در کنار مابقی دستورات CSS)

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     /* IE10+ CSS styles go here */
}

توجه: در خط 2 تمامی دستورات CSS لازم (به همراه کلس و خاصیت ها) قرار دهید. همچنین بهتر است برای گرفتن نتیجه بهتر، مقادیر خاصیت های جدید را به همراه !important وارد کنید تا در اینترنت اکسپلورر این تغییرات جایگزین دستورات عمومی استایل شود.

مثال:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     /* IE10+ CSS styles go here */
     body {
          background: #000 !important;
     }
}

 


تعریف استایل برای نسخه 12 یا همان مرورگر Edge

مرورگر Edge مایکروسافت را همه به نسخه 12 مرورگر IE می شناسند.  در این مرورگر هم ممکن است با مشکل استایل مواجه شوید، اما اگر می خواهید مانند مرورگر IE برخی از استایل ها را تنها در مرورگر Edge اجرا کنید. از کد زیر استفاده کنید. مکان استفاده و نحوه تغییرات داخل کد هم مانند کد قبل است.

@supports (-ms-accelerator:true) {
  /* IE Edge 12+ CSS styles go here */ 
}
کانال موزیک

هنوز دیدگاهی ارسال نشده! نظر شما چیست؟

دیدگاه شما درباره این صفحه چیست؟