CSS Reset چیست؟ راهنما و آموزش کامل CSS Reset

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

CSS Reset چیست

برای درک کامل CSS Reset ها و رسیدن به پاسخ سوال CSS Reset چیست ، فیلم آموزشی زیر میتواند بسیار مفید باشد

انواع مرورگرها

همانطور که میدانید ما انواع مختلفی از مرورگرها داریم. ممکن است شما به عنوان یک طراح وب یا برنامه نویس وب، از مرورگرهای مختلفی مثل گوگل کروم، فایرفاکس، اینترنت اکسپلورر، سافاری و… استفاده کنید.

هرکدام از مرورگرهای موجود، یک سری استایل های پیشفرضی دارند که روی تگ های HTML اعمال میکنند. برای مثال گوگل کروم و فایرفاکس، مقادیر مختلفی از margin ها، padding ها و… را روی تگ های HTML اعمال میکنند.

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

چرا باید از CSS Reset ها استفاده کنیم؟

برای اینکه بتوانید این استایل های پیشفرض مرورگرها را از بین ببرید و خنثی کنید، باید از CSS Reset ها استفاده کنید. در واقع اگر بخواهیم بگوییم که CSS Reset چیست ، میتوانیم این تعریف را داشته باشیم:

CSS Reset چیست : CSS Reset ها به شما کمک میکنند که استایل های پیشفرضی که مرورگرها روی تگ های مختلف اعمال میکنند را خنثی کنید و از بین ببرید. این موضوع باعث میشود که صفحه‌ی وب طراحی شده توسط شما در نهایت روی تمامی مرورگرها، به یک شکل نمایش داده میشود.

در واقع CSS Reset ها به شما کمک میکنند که طراحی یکسانی در تمام مرورگرها داشته باشید.

شاید برایتان سوال پیش بیاید که CSS Reset چیست ؟ آیا یک روش کدنویسی است؟ یا یک کتابخانه است؟

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

CSS Reset چیست و دقیقا چه کاری میکند؟

قبل از اینکه بخواهیم روش استفاده از CSS Reset را یاد بگیریم، در زیر میخواهیم یک صفحه‌ی وب را در دو حالت بررسی کنیم. حالت اول، وقتی CSS Reset روی آن صفحه‌ وب تنظیم نشده است و حالت دوم وقتی که CSS Reset رو آن تنظیم شده است.

یک صفحه‌ی وب ساده بدون استفاده از CSS Reset شکلی شبیه به زیر خواهد داشت:

اما وقتی CSS Reset را وارد یک صفحه‌ی وب میکنید و از آن استفاده میکنید، صفحه‌ی وب‌تان شبیه عکس زیر میشود:

همانطور که در تصویر بالا میبینید، بعد از استفاده از CSS Reset ها، چند اتفاق برای سایت شما می‌افتد:

1. همه‌ی padding ها و margin های پیشفرض مرورگر ها از بین میرود
2. همه‌ی استایل های متون مثل سایز، رنگ، کلفتی متن و… از بین میرود
3. و بطور خالی صفحه‌ی وب شما خالی از هرگونه استایل پیشفرض میشود.

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

روش استفاده از CSS Reset ها

برای اسفتاده از CSS 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, 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, nav, 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, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

سپس یک فایل مثلا با نام reset.css بسازید و این کد ها را در آن قرار دهید.

کار تمام است. الان فقط کافی است که این فایل را با استفاده از یک خط کد HTML ساده، در قسمت تگ <head> فایل HTML خود وارد کنید تا استایل های CSS Reset لود شود:

<link rel="stylesheet" href="reset.css">

با استفاده از اینکار میتوانید کاری کنید که تمام استایل های پیشفرض مرورگرهای مختلف خنثی شود.

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