کاربرد CSS Reset در طراحی وب

۱۴۴ بازدید

آخرین به‌روزرسانی: ۱۹ اردیبهشت ۱۳۹۷

زمان مطالعه: ۲ دقیقه

سازگاری سایت با مرورگرهای مختلف

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

فهرست مطالب این نوشته

سازگاری سایت با مرورگرهای مختلف

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

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

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

CSS Reset مجموعه‌ای از کدهای CSS است که تمامی استایل های پیش‌فرض عناصر و تگ‌های HTLM را که در مرورگرهای مختلف، با ظاهری متفاوت نمایش داده می‌شود را در حالت پیش‌فرض قرار می‌دهد. با استفاده از این روش، تمامی مرورگرها از تنظیمات پیش فرضی که شما برای سایتتان تعین کرده‌اید استفاده می‌کنند و سپس سایر تغییراتی را که شما بر روی سایت اعمال کرده‌اید را استفاده می‌کنند. این روش کمک می‌کند تا سایت شما با ظاهر یکسانی بر روی تمامی مرورگرها نمایش داده شود. فقط توجه داشته باشید که به دلیل اینکه تمامی خصوصیت‌ها به حالت پیش‌فرض و 0 برگردانده می‌شوند، نیاز است تا بعد از استفاده از CSS Reset، از دستور line-height در استایل تگ Body استفاده کنید تا فاصله بین خطوط کل قالب تنظیم شود.

در ادامه یک نمونه از CSS Reset آمده است:

1html, body, div, span, applet, object, iframe,
2
3h1, h2, h3, h4, h5, h6, p, blockquote, pre,
4
5a, abbr, acronym, address, big, cite, code,
6
7del, dfn, em, img, ins, kbd, q, s, samp,
8
9small, strike, strong, sub, sup, tt, var,
10
11b, u, i, center,
12
13dl, dt, dd, ol, ul, li,
14
15fieldset, form, label, legend,
16
17table, caption, tbody, tfoot, thead, tr, th, td,
18
19article, aside, canvas, details, embed,
20
21figure, figcaption, footer, header, hgroup,
22
23menu, nav, output, ruby, section, summary,
24
25time, mark, audio, video {
26
27margin: 0;
28
29padding: 0;
30
31border: 0;
32
33font-size: 100%;
34
35font: inherit;
36
37vertical-align: baseline;
38
39}
40
41/* HTML5 display-role reset for older browsers */
42
43article, aside, details, figcaption, figure,
44
45footer, header, hgroup, menu, nav, section {
46
47display: block;
48
49}
50
51body {
52
53line-height: 1;
54
55}
56
57ol, ul {
58
59list-style: none;
60
61}
62
63blockquote, q {
64
65quotes: none;
66
67}
68
69blockquote:before, blockquote:after,
70
71q:before, q:after {
72
73content: ';
74
75content: none;
76
77}
78
79table {
80
81border-collapse: collapse;
82
83border-spacing: 0;
84
85}