امروز جمعه ۲ آذر ۱۴۰۳

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

افکت های سی اس اس

مرجع افکت های طراحی وب CSS3

افکت های جیکوئری

افکت های آجاکس و جیکوئری طراحی وب

مرجع وردپرس

قالب ها و افزونه های حرفه ای وردپرس

مرجع اسکریپت

اسکریپت های کلون و نال شده آماده

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

آموزش ها

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

css-reset-code-ronakweb

کد 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 */

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, Revisions در وردپرس, آموزش, سایت, سایت در مرورگرها, کد, مرورگرها

1,077 بازدید

محمد

۱۹ مرداد ۱۳۹۸

جدیدترین نسخه سی ام اس ها

وردپرس فارسی نسخه 4/4/2
تاریخ انتشار : ۱۹ مرداد ۱۳۹۸

جوملا فارسی نسخه 3/4/8
تاریخ انتشار : ۱۹ مرداد ۱۳۹۸

پرستاشاپ فارسی نسخه 1/6/1/2
تاریخ انتشار : ۱۹ مرداد ۱۳۹۸

دروپال فارسی نسخه 7/41
تاریخ انتشار : ۱۹ مرداد ۱۳۹۸

پیوندها

برچسب‌ها

دسته بندی مطالب

تماس با ما / نمونه کارها / نقشه سایت

کلیـه حقــوق مـادی و معنوی این وبسایت محفـوظ می باشد.

میزبانی توسط سرورهای قدرتمند هاست دانلود

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

افکت های سی اس اس

افکت های جیکوئری

مرجع وردپرس

مرجع اسکریپت