نرمال سازی CSS چیست ؟

از آنجایی که مرورگرها توسط شرکت های مختلفی تولید شده اند لذا تفسیرهای مختلفی از کدهای CSS دارند . در گاهی مواقع شما مشاهده می کند که یک قالب در مرورگری بدون اشکال و در مرورگر دیگر دچار بهم ریختگی ظاهری می شود . این بهم ریختگی ممکن است خیلی شدید نباشد و فقط در حد ظاهر شدن یک پیکسل فاصله بین اجزاء صفحه یا مقداری تو رفتگی در متن برخی از عناصر صفحه ظاهر شود ، ولی در هر صورت اشکال است و از طرف کارفرما مورد توجه و انتقاد قرار می گیرد .

برای رفع این مشکل ، متخصصین توصیه می کنند چند خط کد عمومی در بالای کدهای CSS پروژه قرار دهید تا حالت نمایش عناصر صفحه را در مرورگرهای مختلف یکسان سازی نمایند . به این عمل نرمال سازی CSS می گویند .

جهت نرمال سازی CSS چه کار کنیم ؟

جهت نرمال سازی کدهای CSS در مرورگرهای مختلف ، پیشنهادات زیادی مطرح است و شما با جستجو در گوگل به توصیه های مختلفی در این رابطه می رسید ، ولی کدی که من از آن استفاده می کنم هم کم حجم است و هم در اکثر موارد بدون مشکل نیاز پروژه را بر طرف می کند .

این کد به شرح زیر است :

/* CSS Normalize */
html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit;font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,html [type="button"],/* 1 */
[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,/* 1 */
menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}


/* Box-sizing border-box */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

چطور از کدهای نرمال سازی CSS استفاده کنم ؟

جهت استفاده از این کدها فقط کافیست آنها را در بالا صفحه CSS اصلی پروژه کپی نمایید و یا در داخل یک فایل CSS جدا قرار داده و در تم اصلی سایت فراخوانی نمایید ( البته قبل از سایر CSS های صفحه ) به این صورت در ابتدای اجرای صفحه ابتدا این کدها اجرا و وضعیت نمایش CSS در آن مرورگر را نرمال سازی می کنند و سپس کدهای CSS شما اجرا و شکل تم (UI) را ایجاد می کند .

کدهای نرمال سازی CSS را حتما قبل از کدهای CSS خودتان فراخوانی نمایید .

امیدوارم این مطلب برای شما مفید بوده باشد .