CSS Reset چیست ؟

یکی از موضوعاتی که در دنیای طراحی سایت و کار با زبان طراحی سی اس اس با آن روبرو می‌شوید ، مفهوم CSS Reset است . اما CSS Reset چیست و چرا در پروژه‌های طراحی سایت لازم توجه است ؟

اگر کمی با دنیای وب آشنایی داشته باشید اطلاع دارید که چندین مرورگر مختلف درحال حاضر قابل استفاده است ازجمله مرورگر محبوب گوگل کروم که بسیاری از کاربران درحال استفاده از آن هستند ، مرورگر فایرفاکس ، مرورگر Opera و … که در این بین کروم و موزیلا کارایی گسترده‌تری دارند .

موضوعی که در دنیای وب سایت‌ها وجود دارد اینجاست که هر مرورگر باتوجه به کدنویسی هسته همان مرورگر ، برای نمایش صفحات وب سایت ، برخی استایل‌های CSS را بصورت پیشفرض بروی سایت‌ها اعمال می‌کند .

برای اینکه پروژه‌های طراحی شده توسط شما که یک طراح سایت هستید ، در تمامی مرورگرها به یک شکل و بدون اختلاف در نمایش ظاهری نمایش داده شده و تفاوتی در View سایت در مرورگرهای مختلف وجود نداشته باشد ، لازم است تا داخل فایل Style.css پروژه ، از کدهای CSS Reset استفاده کنید .

چگونه از CSS Reset استفاده کنیم ؟

استفاده از CSS Reset بسیار ساده است و صرفا باید چندخط کد را در ابتدای تمامی کدهای فایل Style.css خودتان قرار دهید .

برای اینکه دستورات CSS Reset را ایجاد کنید ، درصورتی که داخل نت سرچ کنید ، کدهای بسیاری برای شما نمایش داده می‌شود که باید درنظر داشته باشید برخی از این کدها احتمال دارد پروژه شما را دچار مشکل کند .

معمولا اصلی‌ترین قسمتی در مرورگرهای مختلف مسبب اشکال در نمایش می‌شوند ، خصوصیات Margin و Padding هستند که باید توجه داشته باشید در کدهای CSS Reset حتما وجود داشته باشند . به کد CSS Reset زیر دقت کنید :

*,
*::before,
*::after {
  box-sizing: border-box;
}

ul[class],
ol[class] {
  padding: 0;
  list-style: none;
}

body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
}

img {
  max-width: 100%;
}

a {
  text-decoration: none;
}

در این کد CSS Reset مشاهده می‌کنید که دستور خاصی جهت ایجاد اخلال در وضعیت کلی نمایش تگ‌های HTML نداریم و بروی مارجین و پدینگ بیشتر تمرکز شده است .

درمورد خصوصیت line-height نیز ممکن است کدهای CSS Reset مختلفی را مشاهده کنید . می‌توان اینگونه گفت که همین کد CSS Reset که در اختیار شما قرار داده شده است ، کامل و بی‌دردسر است و می‌توانید با خیال راحت این چند خط کد را داخل فایل Style.css و قبل از شروع به کدنویسی سایر بخش‌ها استفاده کنید .