منو
خانهدیگر

سازگاری بین مرورگرها: طراحی وب پاسخگو برای مرورگرهای قدیمی. مجموعه ای از ویژگی های CSS3 متقابل مرورگر طرح css متقابل مرورگر

هر طراح وب یا طراح صفحه‌آرایی می‌داند که چگونه CSS3 می‌تواند زندگی را آسان‌تر، سرعت بخشد و روند طرح‌بندی را بهینه کند. ویژگی هایی مانند "border-radius" و "box-shadow" امکان جلوگیری از استفاده از تصاویر غیر ضروری و ده ها خط کد را فراهم می کند که به نوبه خود روند طرح بندی سایت را سرعت می بخشد و سرعت بارگذاری آن را افزایش می دهد. با استفاده از CSS3 در کارم، با مشکل سازگاری بین مرورگرها مواجه شدم، یعنی سایت ها در مرورگرهای قدیمی و البته در نمایش داده می شوند. اینترنت اکسپلورر. امروز به شما خواهم گفت که از چه ابزارهایی برای دستیابی به سازگاری بین مرورگرهای CSS3 از جمله اینترنت اکسپلورر استفاده می کنم.

بیایید نگاهی دقیق‌تر به تعدادی از روش‌هایی بیندازیم که می‌توان برای دستیابی به استفاده بین مرورگر از CSS3 استفاده کرد.

تنظیمات اولیه

اسکریپت ها را دانلود کرده و در همان پوشه با استایل های CSS کپی کنید. در اینجا لیستی از اسکریپت هایی که به آنها نیاز داریم آمده است: CSS3 PIE دستیار ما در کار با IE است. PIE به اینترنت اکسپلورر می آموزد که CSS3 را درک کند. پوشه دانلود CSS3PIE شامل تمام فایل های مورد نیاز ما است. ما از فایل PIE.htc استفاده خواهیم کرد و از طریق CSS به آن دسترسی خواهیم داشت، بنابراین باید آن را در همان پوشه ای قرار دهیم که فایل های سبک قرار دارد.

Selectivizr برای مدیریت انتخابگرهای CSS3 استفاده می شود. در ترکیب با کتابخانه های جاوا اسکریپت، مانند jQuery یا Mootools. من توصیه می کنم Mootools را انتخاب کنید زیرا از تمام ویژگی های Selectivizr (انتخاب کننده های CSS) پشتیبانی می کند.

در این مثال، من از میزبانی گوگل با کتابخانه Mootools استفاده خواهم کرد، برای انجام این کار، به سادگی کد لازم را در هد قرار می دهم:< script type = "text/javascript" src = "selectivizr-min.js" >
< script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/mootools/1.4.0/mootools-yui-compressed.js " >
همچنین می‌توانیم از jQuery برای دریافت جایگزین سایه متنی CSS3 استفاده کنیم. تنها کاری که باید انجام دهیم این است که پلاگین سایه متنی jQuery را دانلود کرده و آن را با jQuery متصل کنیم: عالی است، اکنون می توانیم مشکلات بین مرورگرهای CSS3 را حل کنیم.

گوشه های گرد (شعاع مرزی)

گرد کردن گوشه ها احتمالا بهترین چیزی است که CSS3 به ما داده است. خوشبختانه می توانید از آن استفاده کنید و نترسید نمایش صحیحدر اینترنت اکسپلورر CSS3PIE در این مورد به ما کمک خواهد کرد.

حاشیه-شعاع: 10 پیکسل

رفتار: url (PIE.htc)؛

همانطور که می بینید، ما فقط باید اسکریپت PIE را بعد از خاصیت border-radius "تماس" کنیم.

BOX-SHADOW & RGBA COLORS

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

box-shadow: 5px 5px 5px rgba(0 , 0 , 0 , . 75);

رفتار: url (PIE.htc)؛

شما همچنین می توانید از رنگ های RGBA هنگام تعیین ویژگی های "background-color" استفاده کنید.

پس زمینه دوتایی

و دوباره از پیشوند -pie- استفاده می کنیم:

پس زمینه: url (img/flash.png) 20px 20px بدون تکرار , url (img/airplane.png) 90px 50px بدون تکرار , #00BFF3 ; /* مرورگرهای مدرن */

Pie-background: url (img/flash.png) 20px 20px بدون تکرار، url (img/airplane.png) 90px 50px بدون تکرار، #00BFF3; /* IE6+ */

رفتار: url (PIE.htc)؛


BORDER-IMAGE

آخرین ویژگی CSS3 که PIE پشتیبانی می کند border-image است:

border-image: url (border.png) 27 27 27 27 round round;

رفتار: url (PIE.htc)؛

انتخابگرهای CSS3

زمان استفاده از Selectivizr فرا رسیده است. ما جاوا اسکریپت را همانطور که در بالا نشان داده شده است وصل می کنیم و تمام انتخابگرهای CSS3 برای IE6+ در دسترس خواهند بود!

جدول tr: فرزند اول (

پس زمینه: #252525 ;

جدول tr: nth-child(2 n+ 1) (

پس زمینه: #ebebeb ;


سایه متن

سازگاری بین مرورگرهای این ویژگی را می توان به راحتی با استفاده از کتابخانه jQuery به دست آورد. پس از اینکه آن را وصل کردیم، به سادگی تابع textShadow()" را برای انتخابگر مورد نیاز فراخوانی می کنیم:

$(document).ready(function ()(

$(.txt").textShadow();


برای جلوه کامل، به سادگی "text-shadow" را به استایل های CSS خود اضافه کنید.

text-shadow: 2px 2px 2px black;


فیلترهای IE

برای جایگزینی برخی از قوانین CSS3، می توانید از فیلترهای IE نیز استفاده کنید. در اینجا یک مثال برای گرادیان پس‌زمینه آورده شده است:

پس زمینه: #FFFFFF ;

فیلتر: progid:DXImageTransform.Microsoft.gradient(startColorStr= "#444444" , EndColorStr= "#999999"); /* IE6–IE9 */



ویژگی زیر معادل قانون «تبدیل» است. اما نحو آن به قدری پیچیده است که توصیه می کنم از یک ژنراتور ویژه برای محاسبه مقدار مورد نیاز استفاده کنید.

/* IE8+ - متأسفانه باید روی یک خط باشد */

Ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.9848077530122079، M12=-0.17364817766693127، M21=0.17364817266693، M21=0.17364817266693، M21=0.17364817266693=0.17364817266693 9, S izingMethod="بسط خودکار")" ;

فیلتر: progid:DXImageTransform.Microsoft.Matrix(

M11 = 0.9848077530122079،

M 12 = -0.17364817766693127،

M21 = 0.17364817766693127،

M22 = 0.9848077530122079،

SizingMethod= "auto expand");

margin-left: -14px ;

margin-top: -21px;



سازگاری بین مرورگرها معمولاً به توانایی یک وب سایت برای یکسان (یا به همان اندازه خوب) در همه مرورگرها اشاره دارد.

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

مسدود کردن. مرورگرهای مدرن

که در زمان حالمرورگرهای زیر محبوب هستند: Internet Explorer (به اختصار IE، مرورگری از مایکروسافت، ساخته شده در ویندوز)، Opera (مرورگر نروژی)، موزیلا (معروف به فایرفاکس)، گوگل کروم(مرورگر گوگل)، سافاری (مرورگر اپل). مرورگرها در دستگاه های تلفن همراه: اندروید، IOS.

مسدود کردن. موتورهای مرورگر

علاوه بر مرورگرها، چیزی به نام وجود دارد موتورمرورگر. موتور هسته مرورگر است که HTML و CSS را به یک تصویر قابل مشاهده روی صفحه تبدیل می کند. تعداد موتورهای بسیار کمتری نسبت به مرورگرها وجود دارد و در نتیجه، بسیاری از مرورگرها دارای موتورهای یکسان و در نتیجه ویژگی ها و اشکالات (مشکلات) یکسانی هستند.

انواع موتورها: Gecko (Mozilla/Firefox). Webkit (Safari، Google Chrome، Opera 14+، Android، IOS). Presto (Opera تا نسخه 14). ترایدنت (اینترنت اکسپلورر).

لطفاً توجه داشته باشید که Opera، با شروع نسخه 14، به موتور Webkit تغییر مکان داد.

در حال حاضر، Webkit به دو موتور Blink از Google Chrome و Opera 14+ و یک موتور از Safari تقسیم شده است. این دو موتور همچنان از پیشوند -webkit پشتیبانی می‌کنند، با این حال، جداسازی آنها از قبل در برخی از ویژگی‌های CSS، مانند خط فاصله، دیده می‌شود.

مرورگر اینترنت اکسپلورر دیگر رسما وجود ندارد، آخرین نسخه آن یازدهمین نسخه است. با این حال، در واقع، این مرورگر نام خود را تغییر داده است (اما نه موتور) و اکنون Edge نامیده می شود.

مسدود کردن. پیشوندهای فروشنده

وضعیت فعلی در بین مرورگرها این است که قبل از اینکه یک ویژگی CSS در مشخصات ظاهر شود، مرورگرها ممکن است پیاده سازی کنند نسخه آزمایشیاین ویژگی با یک پیشوند خاص به نام پیشوند فروشنده(از کلمه فروشندگان - توسعه دهندگان، پیشوند توسعه دهندگان).

بیایید با استفاده از مثال ویژگی box-sizing (تغییر مدل بلوک) به این نگاه کنیم.

P (اندازه جعبه: جعبه حاشیه؛)

این ویژگی فقط با فایرفاکس 29 پشتیبانی می شود، اما قبلاً با آن نسخه های فایرفاکس 2 با پیشوند -moz در دسترس بود:

P (-moz-box-sizing: border-box;)

سایر مرورگرها پیشوندهای مشابهی دارند: -moz - Mozilla/Firefox (موتور Gecko)، -webkit - مرورگرهای مبتنی بر موتور Webkit (Google Chrome، Safari، Opera 14+، Android، IOS)، -o - Opera تا نسخه 13 شامل (موتور Presto)، -ms – IE از نسخه 8+.

بنابراین، نسخه متقابل مرورگر ویژگی box-sizing، با استفاده از پیشوندهای فروشنده، به این صورت خواهد بود (نیازی به نوشتن آن با پیشوند -ms نیست، IE بلافاصله به پشتیبانی از این ویژگی تغییر می کند):

P ( -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; )

در CSS، بسیاری از ویژگی ها پیاده سازی مشابهی دارند: با یا بدون پیشوند.

لطفاً توجه داشته باشید که Opera از نسخه 14 به Webkit تغییر مکان داده است و اکنون از پیشوند -webkit استفاده می کند، در حالی که پیشوند -o فقط برای نسخه های قدیمی تر (تا 14) باقی خواهد ماند.

قاعده زیر وجود دارد: خواص با پیشوند قبل از خواص بدون پیشوند نوشته می شوند. این کار به این دلیل انجام می شود که ویژگی اصلی، ویژگی های پیشوندی را لغو کند، زیرا مرورگر می تواند یک ویژگی را با یا بدون پیشوند پشتیبانی کند. و یک ویژگی با پیشوند ممکن است با برخی مشکلات کار کند.

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

مسدود کردن. از کجا می توانم ببینم چه پیشوندهایی بنویسم؟

من یک سرویس ویژه caniuse.com را توصیه می کنم، جایی که می توانید ببینید از چه ویژگی هایی می توان استفاده کرد و آیا نیاز به نوشتن پیشوند برای آنها دارید یا خیر.

مسدود کردن. آمار مرورگر

برای اینکه بدانید در حال حاضر کدام مرورگر باید پشتیبانی شود و کدام یک باید رها شود، باید آمار مرورگرهای منطقه سایت را ردیابی کنید. این را می توان با استفاده از سرویس زیر انجام داد: gs.statcounter.com - همه مرورگرها با نسخه های کشور (انگلیسی).

مسدود کردن. چگونه یک سایت را در مرورگرهای مختلف تست کنیم

پس از ایجاد یک سایت، باید آن را در تمام مرورگرهای محبوب تست کنید. با این حال، انجام این کار آنطور که به نظر می رسد آسان نیست - نه تنها مرورگرها از نسخه ای به نسخه دیگر متفاوت هستند، بلکه بین یک نسخه از مرورگر در ویندوز و به عنوان مثال لینوکس نیز تفاوت هایی وجود دارد. واضح است که داشتن چنین تعداد مرورگر به سادگی غیرممکن است.

خدمات ویژه ای به کمک می آیند که از سایت اسکرین شات می گیرند نسخه های مختلفسایت.

مسدود کردن. عادی سازی سبک ها

علاوه بر ترشحات، به اصطلاح وجود دارد عادی سازی- این زمانی است که مقادیر ویژگی (به عنوان مثال، حاشیه و padding) به صفر بازنشانی نمی شوند، اما مقادیر مناسب خاصی مشخص می شوند (به طوری که padding پیش فرض در همه مرورگرها یکسان و راحت است).

  • به یاد داشته باشید که تنظیم مجدد استایل ها باید قبل از اتصال استایل ها انجام شود و نه بعد از آن!
  • CSS Reset باید در یک فایل جداگانه (معمولا به نام reset.css) قرار گیرد. در این صورت می توانید بدون هیچ تلاشی برای جداسازی آن از سایر قوانین CSS از آن در پروژه های مختلف استفاده کنید.
  • از اصلاح خود reset.css نترسید. آن را با خودتان تطبیق دهید، کاری کنید که برای شما کار کند. در صورت نیاز در مورد خاص خود تغییر دهید، مرتب کنید، حذف کنید و اضافه کنید.
  • اضافه کردن سبک های پیش فرض برای h1-h6 منطقی است (به عنوان مثال اندازه فونت، برای td (تراز کردن متن: مرکز) و غیره.
    • سپس باید چه بکنی:

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

    وقتی همه چیز را تصمیم گرفتید، به مطالعه یک موضوع جدید بروید.


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

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

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

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

    فهرست مطالب سند

    CSS برای IE 5, 5.5, 6, 7 Conditional Comments مرورگرهای اینترنت اکسپلورر مدت‌هاست که از اصطلاحات شرطی پشتیبانی می‌کنند که به شما امکان می‌دهد محتوا را فقط برای IE قابل مشاهده کنید. نظرات مشروط آسان شد به شکلی خاصشکل گرفت نظرات HTML، که فقط نسخه های خاصی از Internet Explorer را برای ویندوز درک می کنند. به عنوان مثال، می توانید از نظرات شرطی برای رفع اشکال شفافیت PNG در IE استفاده کنید.

    برای استفاده از آنها نیاز دارید:

  • ابتدا یک شیوه نامه مشترک برای همه مرورگرها بدون هیچ هک ایجاد کنید و سپس به کار بر روی تصحیح خطاها هنگام نمایش صفحه در IE ادامه دهید.
  • سپس شیوه نامه با خطاهای اصلاح شده به طور جداگانه ذخیره می شود و به شیوه نامه برای همه نسخه های IE (به عنوان مثال، all-ie.css) تبدیل می شود.
  • برگه های سبک جداگانه را با رفع اشکال به طور جداگانه برای هر نسخه IE (به عنوان مثال، ie-5.0.css) ذخیره کنید.
  • در مرحله بعد، باید این شیوه نامه ها را به صورت متوالی از طریق کد HTML با استفاده از نظرات شرطی به هم متصل کنید.
    • نحو نظر شرطی نظر شرطی زیر توسط مرورگرهای IE5، IE5.5 و IE6 و همچنین IE7 و IE8 قابل درک است:

    استفاده از CSS برای IE5 اگر نیاز به اعمال نظر شرطی فقط برای IE5 دارید، فقط باید نسخه 5.0 را در IE 5.0 مشخص کنید.

    استفاده از CSS برای IE5.5 اگر بخواهید آن را نسبت به IE5.5 اعمال کنید، به شکل زیر خواهد بود:

    استفاده از CSS برای IE6 به همین صورت برای IE6:

    استفاده از CSS برای IE5 و IE5.5 به طور همزمان یا برای چندین نسخه اگر نیاز به رفع اشکال با مدل جعبه در IE5 و IE5.5 با استفاده از نظرات شرطی دارید، می توانید از بخشی از نمایه نسخه یا عملگرهای مقایسه استفاده کنید.

    مثال اول استایل شیت را به هر نسخه ای از اینترنت اکسپلورر که رقم اول آن 5 است متصل می کند:

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

    به جای lt (l ess t hen - less) می توانید از lte (l ess t hen یا e برابر به - کمتر یا برابر)، gt (g reater t hen - more)، gte (g reater t hen یا e qual استفاده کنید. به - بزرگتر یا مساوی)، نکته اصلی با این همه تنوع احتمالی این است که ترتیب تعیین نظرات شرطی را به درستی انتخاب کنید تا در موقعیتی قرار نگیرید که برای برخی از مرورگرها گروه هایی از نظرات شرطی تلاقی می کنند و یک نتیجه غیرمنتظره ایجاد می کنند. نتیجه

    ترتیب استفاده اگر نمی خواهید شیوه نامه های عمومی بر جداولی که به طور خاص برای اینترنت اکسپلورر ایجاد می شوند تسلط داشته باشند، ابتدا باید استایل شیت های عمومی را به هم وصل کنید و تنها پس از آن جداول را برای IE به هم وصل کنید. در یک مثال به این صورت است:

    مزایای دیگر این روش با استفاده از نظرات شرطی، شما همچنین راهی برای تعیین مطمئن تر نسخه مرورگر دارید. مرورگرهایی که وانمود می کنند اینترنت اکسپلورر هستند، اما نیستند، از شیوه نامه طراحی شده برای IE استفاده نمی کنند. با استفاده از این روش، می توانید آمار دقیقی در مورد اینکه بازدیدکنندگان شما از چه نسخه ای از اینترنت اکسپلورر استفاده می کنند، بدون خطاهای ناشی از برنامه ها و مرورگرهایی که جعل هویت اینترنت اکسپلورر هستند، تولید کنید. )اسناد HTML کاملاً مطابق با مشخصات باقی خواهند ماند اشکال زدایی نظرات مشروط یک نکته قابل ذکر است.

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

    اما این نظر مشروط اجرا نخواهد شد:

    برای ردیابی تفاوت ها در پردازش CSS تا حد امکان نسخه های مختلف IE عملکرد خوبی داشته است برنامه رایگان IETester، که از تمام نسخه های IE از 5 تا 8 پشتیبانی می کند. و برای تغییر سریع پارامترهای CSS در IE8 با فشار دادن F12، یک ابزار توسعه دهنده در دسترس است که یادآور FireBug در موزیلا فایرفاکس است.

    مشابه اعلان شیت‌های سبک، این روش می‌تواند کد HTML را از نسخه‌های خاص یا تمام نسخه‌های IE پنهان کند. به عنوان مثال، متن "HTML code" در همه مرورگرها به جز IE6 نمایش داده می شود اگر آن را در یک نظر شرطی مانند این قرار دهید:

    کد HTML

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

    مشابه نظرات شرطی، IE 5--IE 8 از برچسب ... پشتیبانی می کند. این تگ به شما امکان می دهد اطلاعات را از کاربران اینترنت اکسپلورر مخفی کنید، بنابراین کد:

    نیست مرورگر اینترنتکاوشگر

    کاربران اینترنت اکسپلورر به صورت زیر نشان داده می شوند: این اینترنت اکسپلورر است و کاربران سایر مرورگرها به صورت زیر نشان داده می شوند: این اینترنت اکسپلورر نیست.

    برچسب معتبر نیست.

    CSS IE را هک می کند برای اینکه کد HTML را با اعلام چندین شیوه نامه به هم نریزید، یا اگر نیاز به ذخیره یک فایل CSS دارید، می توانید سبک های جداگانه ای بنویسید که فقط در IE کار می کنند. علاوه بر این، یک گزینه برای هر دو IE6 و IE7 وجود دارد.

    برای IE همه نسخه ها. اگر پیشوند خاصی را با دو اسلش رو به جلو (//) قرار دهید، آن را فقط مرورگرهای اینترنت اکسپلورر همه نسخه‌ها می‌پذیرند. سایر مرورگرها این ویژگی را نادیده می گیرند.

    در IE6 می توان علامت منفی (-) یا زیرخط (_) را در مقابل یک ویژگی قرار داد بدون اینکه IE7 به آن پاسخ دهد. همچنین می توانید از ساختار زیر استفاده کنید:

    * html .style (...)

    مثلا:

    سبک ( پس‌زمینه: قرمز؛ /* برای مرورگرهای معمولی */ //پس‌زمینه: سبز؛ /* برای همه IE */ -پس‌زمینه: آبی؛ /* برای IE6 */) * html .style (پس‌زمینه: آبی؛ /* دیگر روش برای IE6 */)

    در این حالت، پس زمینه در مرورگرهای اپرا و فایرفاکس قرمز، در IE7 سبز و در اینترنت اکسپلورر 6 آبی خواهد بود.

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

    برای IE7 از هک CSS استفاده می شود:

    *: first-child+html .style (...)

    *+html .style (...)

    CSS برای فایرفاکس همچنین هک های ویژه CSS وجود دارد که به شما امکان می دهد فقط سبک ها را نشان دهید مرورگر فایرفاکس.

    html: root .style (...) /* برای Safari هم کار می کند */

    سبک، x: -moz-any-link (...)

    برای تغییر سریع پارامترهای CSS در فایرفاکس با فشار دادن F12، ابزار توسعه دهنده Firebug در دسترس است (نیاز به نصب اولیه دارد) - این بهترین در بین آنالوگ ها است.

    CSS برای Opera هک CSS برای مرورگر اپرابا مثال های زیر ارائه می شود:

    از نویسنده: مردم از مرورگرهای مختلف برای مشاهده صفحات وب استفاده می کنند. البته محبوب ترین آنها مانند کروم وجود دارد. موارد کمتر استفاده شده نیز وجود دارد (سافاری، اینترنت اکسپلورر)، اما اگر یک وب سایت برای افراد ایجاد می کنید، باید در مورد سازگاری بین مرورگرها بدانید - چگونه این کار را انجام دهید و در مورد چیست. بیایید ببینیم چگونه می توان اطمینان حاصل کرد که سایت شما در همه مرورگرهای اصلی یکسان نمایش داده می شود.

    هدف اصلیسازگاری بین مرورگرها – برای جلوگیری از تغییرات قابل توجه در طراحی سایت در مرورگرهای وب مختلف. اگر تفاوت فقط در جزئیات کوچک است و این بر درک کلی سایت تأثیر نمی گذارد، می توان گفت که شما با مشکل مرورگر متقابل برخورد کرده اید. اما هنوز چه توصیه واقعی در این مورد می توان ارائه کرد؟

    نحوه دستیابی به سازگاری بین مرورگرها

    در حال حاضر، 5 مرورگر اصلی و محبوب وجود دارد که برای آنها باید سایت خود را بهینه کنید. و اگر دوستی با جدیدترین نسخه‌های مرورگرهای وب معمولاً آسان است، پس چرا نسخه قدیمی تر، ممکن است مشکلات بیشتری وجود داشته باشد.

    برای مثال IE6 یکی از مشکل سازترین مرورگرها از نظر پشتیبانی از تگ های جدید html و ویژگی های css. و با این حال، امروزه برخی هنوز نیاز دارند که سایت به طور معمول در این مرورگر نمایش داده شود. به نظر من، این در حال حاضر بیش از حد است. پشتیبانی IE8 کافی است.

    با این حال، این عقب نشینی کوچک. اکنون بیایید به مراحل واقعی که به سازگاری سایت شما با مرورگرهای متقابل کمک می کند نگاه کنیم.

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

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

    بنابراین، ابتدا باید به وب سایت رسمی بروید. https://modernizr.com/download. در اینجا باید فناوری هایی را که قصد دارید در وب سایت خود استفاده کنید، علامت بزنید. باید گفت که لیست بسیار طولانی و بدون دانش متوسط ​​از استانداردهای وب مدرن و به انگلیسیشما به سختی می توانید آن را بفهمید در هر صورت، خواص بصری نیز وجود دارد. حتی اگر تمام کادرها را علامت بزنید، کد به دست آمده خیلی دست و پا گیر نخواهد بود.

    برنج. 1. انتخاب فناوری هایی که کتابخانه بررسی خواهد کرد.

    بررسی عملکرد کتابخانه

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

    بر این اساس، اگر در تگ htmlچنین کلاسی نشان داده می شود، به این معنی که این فناوری در این مرورگر کار می کند. اگر چیزی پشتیبانی نشود، کلاس "no-name of technology" ثبت خواهد شد. اجازه بدهید فوراً برای شما مثالی بزنم:

    برای مثال، باید ویژگی box-shadow را علامت بزنید. برای مرجع، سایه عنصر را تنظیم می کند. اگر مرورگر از آن پشتیبانی کند، این کلاس سبک در تگ html ظاهر می شود. اگر مرورگرهای وب ویژگی را تشخیص ندهند، کلاس "no-boxshadow" ظاهر می شود.

    برنج. 2. کلاس های زیادی را در تگ html خواهید دید. در این حالت می بینیم که مرورگر تقریباً از تمام فناوری ها پشتیبانی می کند.

    اکنون کنترل سازگاری بین مرورگرها کاملاً در دست شماست. کافی است چند ویژگی جایگزین برای کلاس no-boxshadow تنظیم کنید و در همه مرورگرهایی که از ویژگی box-shadow پشتیبانی نمی کنند، این قوانین به جای آن اعمال می شوند. خیلی راحت است.

    من یک مثال دیگر در Habrahabr پیدا کردم که می خواهم در اینجا به شما بگویم. مثالی وجود داشت که چگونه می توان از کتابخانه برای پیاده سازی جایگزین ها در مرورگرهای قدیمی استفاده کرد.

    انتخابگر Multiplebgs ( پس‌زمینه-تصویر: url("image.png") مرکز 40 پیکسل بدون تکرار، url("image2.png"); ) انتخابگر .no-multiplebgs (تصویر پس زمینه: url("image.png") مرکز 40 پیکسل خاکستری روشن بدون تکرار؛ )

    انتخابگر Multiplebgs ( پس زمینه - تصویر : url ("image.png") مرکز 40 پیکسل بدون تکرار، url ("image2.png")؛ )

    No - انتخابگر multiplebgs ( پس زمینه - تصویر: url ("image.png") مرکز 40 پیکسل بدون - تکرار خاکستری روشن؛ )

    توضیح مثال. ما علاقه مند به فناوری پس زمینه های متعدد هستیم که مدت هاست در CSS3 پشتیبانی می شود. برای این کار کافیست آدرس عکس ها و پارامترهای آنها را که با کاما از هم جدا شده اند لیست کنید. به طور طبیعی، مرورگرهای قدیمی از این پشتیبانی نمی کنند، بنابراین ما با استفاده از کلاس .no-multiplebgs استایل های خود را برای آنها می نویسیم. مشخص می کند که اگر مرورگر از پس زمینه های متعدد پشتیبانی نمی کند، باید سبک ها اعمال شوند.

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

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

    مسائل مربوط به سازگاری بین مرورگرها ذهن توسعه دهندگان وب را برای مدت طولانی عذاب می دهد، دقیقاً تا زمانی که یک مرورگر را منتشر کنند که بدون استثنا توسط همه استفاده می شود (یعنی هرگز - یادداشت ویراستار). در حال حاضر مزخرف ترین IE6 است، تا حدی IE7، که کارهای اضافی زیادی را به طراحان چیدمان اضافه می کند که به کسی توهین نمی کنند.

    من مجموعه‌ای از هک‌های CSS را مورد توجه شما قرار می‌دهم که به آسان‌تر کردن زندگی شما و دستیابی به ذن دستیابی به سازگاری بین مرورگرها کمک می‌کند.

    تنظیمات CSS را بازنشانی کنید. همه مرورگرها در ابتدا نوعی از سبک های CSS. به عنوان مثال، تاسف بارترین مثال، که برای اکثر مرورگرها (اگر نه همه) معمول است، که در آن حاشیه پیش فرض 10 پیکسل برای تگ بدنه مشخص شده است، در نتیجه محتوای قرار داده شده در داخل از لبه مرورگر دور می شود. مرورگر، که ایده ظاهر اصلی طرح را از بین می برد. بارزترین مثال وب سایت فروشگاه معروف Intersport یا به عبارت بهتر شعبه روسیه آن است - آنها هنوز نمی دانند که حاشیه را می توان بازنشانی کرد.
    من معمولاً از ساختار زیر برای تصحیح پارامترهای تداخلی استفاده می کنم:

    * (حاشیه: 0 پیکسل؛ بالشتک: 0 پیکسل؛)
    img (حاشیه: 0; )
    a، img، div، ورودی (طرح کلی: هیچ، )
    ol، ul (لیست-سبک-موقعیت: داخل؛)

    در اصل، این برای دستیابی به سازگاری بین مرورگرها و نمایش صحیح سایت کافی است. با این حال، من فکر می کنم هنوز هم ارزش شروع بازنشانی تمام CSS را دارد. شاید من کمی محافظه کار هستم، به همین دلیل است که هنوز این کار را انجام نمی دهم - اگر همه چیز خوب است چرا این کار را انجام دهم. اما شاید من چیزی را از دست داده ام.
    این مشکل به طور اساسی در سایت حل شد - آنها کد زیر را ارائه می دهند:

    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a، abbr، مخفف، آدرس، بزرگ، نقل قول، کد،
    del، dfn، em، فونت، img، ins، kbd، q، s، samp،
    کوچک، ضربه، قوی، زیر، sup، tt، var،
    b، u، i، مرکز،
    dl، dt، dd، ol، ul، li،
    مجموعه فیلد، فرم، برچسب، افسانه،
    جدول، عنوان، tbody، tfoot، thead، tr، th، td (
    حاشیه: 0;
    بالشتک: 0;
    حاشیه: 0;
    طرح کلی: 0;
    اندازه فونت: 100%;
    vertical-align: baseline;
    پس زمینه: شفاف
    }
    بدنه (ارتفاع خط: 1؛ )
    ol، ul (سبک لیست: هیچکدام؛ )
    بلوک نقل قول، q ( نقل قول: هیچ؛ )
    blockquote:قبل، blockquote:after، q:before، q:after (
    محتوا: ""؛
    محتوا: هیچ
    }
    /* به یاد داشته باشید که سبک های فوکوس را تعریف کنید! */
    :focus (طرح کلی: 0; )
    /* به یاد داشته باشید که درج ها را به نحوی برجسته کنید! */
    ins (تزیین متن: هیچ؛ )
    del (تزیین متن: خط از طریق؛ )
    /* جداول همچنان به "cellspacing="0"" در نشانه گذاری نیاز دارند */
    جدول (
    border-collapse: فرو ریختن;
    فاصله مرزی: 0;
    }

    حداقل ارتفاع در IE. اینترنت اکسپلورر 6 به طور کامل حداقل ارتفاع CSS را نمی پذیرد، به خصوص زمانی که به آن نیاز است. مشکل به این ترتیب رفع می شود:

    انتخابگر (
    حداقل ارتفاع: 300 پیکسل؛
    ارتفاع: خودکار; !مهم
    ارتفاع: 300 پیکسل;
    }

    برجسته کردن پیوندها قاب نقطه چیندر مرورگرها اغلب مانع ایجاد می شود، منظره را خراب می کند و مورد نیاز کسی نیست.
    برای مرورگرهای معمولی (از جمله IE8) باید تنظیم کنید طرح کلی: هیچکدام() و برای IE6 و IE7 باید از یک نامعتبر استفاده کنید outline:expression(hideFocus="true"). اگرچه این هک معمولاً برای IE6 و IE7 مورد نیاز نیست (من موردی را به خاطر ندارم که با پیوندهای a خوب کار کند)، می توانید با اختصاص دادن این پارامتر از طریق جاوا اسکریپت یا از طریق برخی از کتابخانه ها اعتبار کد را بدست آورید. به عنوان مثال، برای jQuery کد به شرح زیر است:

    $("a").attr("hideFocus"، "true").css("outline"، "none");

    شفافیت. گاهی اوقات باید شفافیت را روی بلوک ها تنظیم کنید. این به سادگی انجام می شود، اما، افسوس، نامعتبر است:

    انتخابگر (
    filter:alpha(opacity=75);
    -moz-opacity:.75;
    Opacity:.75;
    }

    شفافیت PNG در IE6. وجود ساختار را فراموش نکنید:

    img، div (
    فیلتر: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);
    }

    اما از آنجایی که نامعتبر است و حتی اگر یک png را به عنوان پس زمینه مشخص کنید، نمی توان آن را در موقعیت قرار داد و رندر کرد. بنابراین استفاده از آن توصیه می شود اصلاح IE PNG ().

    حالت درون یابی دو مکعبی برای تصاویر مقیاس شده. به نظر مبهم می رسد، اما هیچ چیز پیچیده ای وجود ندارد. به یاد دارید در IE6 (و ظاهراً در IE7 نیز) اگر یک تصویر را در صفحه قرار دهیم و اندازه آن را کاهش دهیم، آنگاه کوچک می شود و به نظر می رسد یک مزخرف است؟ بنابراین، راهی برای رفع این مشکل وجود دارد (اگرچه، متأسفانه، نامعتبر است)

    img ( -ms-interpolation-mode: bicubic; )

    پیمایش در IE. به طور پیش فرض، در کاوشگرها (ششم، شاید هفتم)، نوار اسکرول عمودی همیشه در مرورگر نمایش داده می شود، حتی زمانی که اصلاً محتوایی در صفحه وجود ندارد. تعمیر آن آسان است.

    html (سرریز: خودکار؛ )

    دو برابر کردن فیلدها در IE اگر float:left و حاشیه مشخص شده وجود داشته باشد، حاشیه در خر خفه می شود. راه حل این است display:inline().

    کلاس شبه: شناور برای اینترنت اکسپلورر. از آنجایی که خر بسیار سفت است، فقط برای برچسب a از شناور پشتیبانی می کند. گاهی اوقات این کافی است (از آنجایی که a را می توان با استفاده از display:block به یک div تبدیل کرد)، و گاهی اوقات اصلاً کافی نیست. هیچ راه حل CSS برای این وجود ندارد، اما راه حل های jQuery وجود دارد. یک کلاس در CSS ایجاد می کنیم (در مورد ما با نام classname)، به آن رنگ، پس زمینه و غیره می دهیم، خوب، و کد عنصر مورد نظر را اضافه می کنیم (در مورد ما برای li است).