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

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

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

کد 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;
}

 

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

[ad_2]

لینک منبع مطلب