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

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

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


اگر سوالی دارید، بپرسید!

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

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

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

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

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

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

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

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

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

سوال بعدی

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

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

-webkit- <!-- for Webkit browsers (chrome, Safari) -->
-moz- <!-- for FireFox -->
-o- <!-- for Opera -->
-ms- <!-- for Internet Explorer -->

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

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

مثال :

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

background-image:     linear-gradient(right, #000, #FFF);

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

background-image:     -ms-linear-gradient(right, #000, #FFF); 
background-image:      -o-linear-gradient(right, #000, #FFF);

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

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

مقالات مشابه


خطای White Screen of Death در وردپرس
برترین غول های طراحی تم وردپرس
جلسه هفتم آموزش پنل مدیریت ووکامرس
جلسه ششم آموزش پنل مدیریت ووکامرس

نظرات (0)

شما نیاز دارید وارد شوید برای ارسال نظر.