CSSHTMLطراحی وب

طراحی سایت Cross Browser

cross-browser-compatibility

همانطور که می دانید کاربران در سرتاسر دنیا از Browser های مختلفی برای مشاهده ی صفحات اینترنتی استفاده می کنند و این Browser ها نیز برای نمایش المنت های HTML از مقادیر پیش فرضی که در الگوریتم های خود دارند استفاده می کنند و طبیعتا الگوریتم های رندرینگ آنها با هم یکسان نیست، همین نکته باعث می شود تا گاهی سایتی که ما طراحی می کنیم در مرورگرهای مختلف به یک شکل دیده نشود و بعضا در بعضی مرورگر ها طرح ما کاملا بهم ریخته شود.

بعنوان مثال مقادیر margin, padding, border در مرورگرهای مختلف کاملا متفاوت است و اکثرا باعث بهم ریختگی طرح وب سایت در مرورگرهای مختلف می شود. برای رفع برخی از این مشکلات می توانید در ابتدای فایل CSS این مقادیر پیش فرض را در مرورگر Reset کنید، با اینکار وقتی فایل CSS شما در هر مرورگری اجرا می شود کلیه مقادیر پیش فرض مرورگر را بصورت واحد تنظیم می کند و بخش زیادی از مشکل Cross Browser Compatibility برطرف خواهد شد. برای Reset کردن این مقادیر این کدها را در ابتدای فایل CSS خود کپی کنید:
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, font, 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 {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}


:focus {
    outline: 0;
}


ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}


table {
    border-collapse: collapse;
    border-spacing: 0;
}

در صورتیکه می خواهید از این فایل در چندین CSS استفاده کنید، می توانید این دستورات را در یک فایل CSS ذخیره کنید و هر زمان که نیاز بود با استفاده از دستور import در ابتدای فایل CSS از آن استفاده کنید.

مثال:

@import url('CorssBrowser.css');

نظرات