کد Css Reset و Html5 سازگاری قالب و نمایش یکسان سایت در مرورگرها

یکی از نکات مهم در طراحی سایت یا طراحی قالب وردپرس رعایت اصل سازگاری و نمایش صحیح وب سایت در مرورگرهای اینترنتی متفاوت می باشد. از پرکاربرد و محبوب ترین مرورگر های وب می توان به کروم، فایرفاکس و سافاری اشاره کرد که تقریبا کمترین ناسازگاری را چه در نسخه های قدیم و چه در ورژنهای به روز در میان سایر Browser بروزرها دارا می باشند و از بدترین مرورگرها می توان به اینترنت اکسپلورر ie در نسخه های ۷ و ۸ اشاره کرد که به کابوسی برای طراحان تبدیل شده بود به همین دلیل تقریبا دیگر هیچ طراحی وقتش را برای سازگاری کامل سایت با ie نسخه ۷ و ۸ صرف نمی کند. در این مطلب از روناک وب نحوه نمایش پیش فرض یکسان وب سایت در مرورگرهای متفاوت با استفاده از کد Css Reset و Html5 سازگاری قالب و نمایش یکسان سایت در مرورگرها را مرور می کنیم پس همراه ما باشید.

کد Css Reset سازگاری قالب و نمایش یکسان سایت در مرورگرها

کد Css Reset نمایش صحیح سایت در بروزرهای مختلف و بخصوص ie

احتمالا می دانید که هر مرورگری کدهای html بدون شیوه نامه سی اس اس را به شکلی نمایش می دهد برای درک بهتر این موضوع بهتر است قالب html ای بدون داشتن کد سی اس اس css ریست طراحی کنید سپس قالب را در مرورگرهای مختلف مشاهده کنید، خواهید دید که در چینش و نمایش بخش های مختلف پوسته تفاوت هایی وجود دارد، این تفاوتها ممکن است در برخی مرورگرها مانند اینترنت اکسپلورر ie تا حدی زیاد باشد که کل قالب بهم ریخته نمایش داده شود. به همین دلیل برای یکسان کردن حالت پیش فرض در تمام مرورگرها از کد css reset استفاده می کنیم.

کد CSS Reset چیست و چگونه کار می کند؟

کد CSS Reset مجموعه ای از استایل سی اس اس ( CSS Style ) است که تمامی Style پیش فرض عناصر و تگ های HTML ( که در مرور گرهای گوناگون ، متفاوت است ) را در حالت پیش فرض قرار میدهد . با استفاده از این روش تمامی مرورگرها به طور پیش فرض دارای نمایش یکسانی خواهند شد و طراح وب سایت می تواند با استفاده از این روش استایل یا شیوه نامه ها (CSS Style ) را با توجه به نیازهای خود تعیین کند. بعد از قرار دادن کدهای ریست در فایل style اصلی قالب وردپرس یا پوسته سایت تان به برای نمایش صحیح متن ها بایستی از دستور line-height با مقدار مناسب در استایل تگ body استفاده کنید تا فاصله بین خطوط کل قالب تنظیم شوند. نمونه از کدهای css ریست در زیر آمده که برای استفاده از آن کدها را در ابتدای فایل شیوه نامه پوسته سایت کپی کنید.

/* css reset */
html,body,div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, menu, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, menu, section {
	display: block;
}
body {
	line-height: 1px;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

سازگاری html5 با مرورگرهای قدیمی

سازگاری html5 با مرورگرهای قدیمی

همینطور که اطلاع دارید در جدیدترین نسخه اچ تی ام ال که html5 می باشد چندین تگ یا برچسب جدید اضافه شده که برای شناسایی بهتر محتوای صفحه توسط موتورهای جستجو و ایجاد برخی قابلیتها مانند ساخت انیمیشن بدون استفاده از فلش کاربرد دارند. تگهایی مانند header، article ، footer ، aside و … جزو جدیدترین برچسب های اضافه شده به html 5 هستند. مشکلی اینجا بوجود می آید عدم سازگاری مرورگرهای قدیمی با تگهای جدید می باشد و به همین دلیل باعث بهم ریخت قالب و عدم نمایش صحیح و استاندارد آن می شود خوشبختانه برای حل این مشکل و سازگار کردن بروزرهای قدیمی راه حلی وجود دارد و آن افزودن یا فراخوانی اسکریت جاوایی که معمولا با نام html5shiv.js شناخته می شود در پوسته سایت است. چون مرورگر ie در نسخه های قدیمی تر از ۹ بیشترین ناسازگاری با html5 را دارد از این کد جاوا تنها برای مرورگر ie استفاده می کنیم. برای این منظور کد زیر را در ابتدای قالب و در فایل header.php فراخوانی می کنیم. دانلود فایل html5shiv.js با حجم ۳ کیلوبایت

<!--[if lt IE 9]><script src="<?php bloginfo('template_url'); ?>/js/html5shiv.js" type="text/javascript"></script><![endif]-->
1,004 بازدید 3 نظر
خیلی خوشم اومد.
به نظر من !!!
  1. محمد اصلانی می گه:
    ۱۵:۳۵ مورخه ۱۷ آبان ۹۵

    ببخشید در ابتای قالب هدر منظور تون کجاست زیر تگ htmlیا قبل تگ headیا بعدش لطفا دقیق تر مشخص کنید

    • محسن بینا می گه:
      ۱۹:۱۰ مورخه ۱۷ آبان ۹۵

      سلام بررسی میکنم و براتون ایمیل میکنم فکر میکنم زیر html باید باشه از طریق ایمیل بهتون اطلاع میدم
      باتشکر

    • مهران می گه:
      ۲۱:۵۰ مورخه ۲۰ آبان ۹۵

      دوست عزیز این این اسکریپت داخل تگ head استفاده میشه.

با عضوت در خبرنامه ایمیلی جدیدترین مطالب و فیلم های آموزشی را در ایمیل تان دریافت کنید. اعضاء خبرنامه و صفحات اجتماعی روناک وب از امکانات ویژه ای برخوردار خواهند شد !!!