کدهای سی اس اس برای تمامی مرورگرها

کدهای سی اس اس برای تمامی مرورگرها

5/5 - (5 امتیاز)

چگونه کدنویسی کنیم تا در تمامی مرورگرها ظاهر سایت به شکل منظم و مرتب دیده شود؟ استفاده از گیت ها این قابلیت را برای شما فراهم می سازد.

برخی از وب سایت ها را وقتی با مرورگرهای مختلف بررسی می کنیم ظاهرشان یکسان نیست. مثلا در گوگل کروم وبسایت فوق العاده عالی است اما در موزیلا بهم ریخته می شود چرا؟

ما قبلا در رابطه با Cross Browser توضیح داده بودیم که چی هست و کارش چیه اما در این مقاله می خواهیم تخصصی تر نگاه کنیم.

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

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

برای نسخه هایی که از آن پشتیبانی نمی شود چکار باید کرد؟ پس بزارید قدم به قدم پیش بریم

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

برای جواب به این پرسش یکی از سایت های مطرح در این زمینه w3schools است. شما پس از ورود به این سایت کد مورد نظر را در قسمت جستجو وارد می کنید و مشاهده می نماید نسخه چه مرورگرهایی از کد پشتیبانی می کند.

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

سوال بعدی

چگونه کدهای سی اس اس را برای تمامی مرورگرها بهینه سازی کنیم؟

گیت هایی وجود دارد که برای هر مرورگر تعریف شده و با استفاده از آنها شما می توانید آن کد را برای مرورگر خاص بهینه کنید. گیت ها به شرح زیر است :

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

  • webkit برای استفاده در مرورگر کروم و سافاری
  • moz برای استفاده در مرورگر موزیلا
  • o برای استفاده در مرورگر اوپرا
  • ms برای استفاده در مرورگر اینترنت اکسپلورر خدابیامرز

مثال :

در زیر می خواهیم کدی بنویسیم که بکگراند را گردینت بکند یعنی مثلا از سمت راست یک رنگ به سمت چپ تغییر کند.

در حالت عادی کد به شکل فوق نوشته می شود اما برای نمایش در اینترنت اکسپلورر و اوپرا باید کدهای زیر را هم به کد بالا اضافه کرد.

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

منبع » آکادمی ایتروز

اشتراک گذاری

فیسبوک
تویتر
لینکدین
تلگرام
واتس‌اپ
پینترست
ایمیل
پرینت

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *