کد 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 می باشد چندین تگ یا برچسب جدید اضافه شده که برای شناسایی بهتر محتوای صفحه توسط موتورهای جستجو و ایجاد برخی قابلیتها مانند ساخت انیمیشن بدون استفاده از فلش کاربرد دارند. تگهایی مانند 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]-->
]]>