کاربرد 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}

درصورتی‌که می‌خواهید طراحی وب را شروع کنید و یا مایل به یادگیری مباحث بیشتری دارید، آموزش‌های زیر را پیشنهاد می‌کنیم:

#

بر اساس رای ۳ نفر
آیا این مطلب برای شما مفید بود؟
اگر بازخوردی درباره این مطلب دارید یا پرسشی دارید که بدون پاسخ مانده است، آن را از طریق بخش نظرات مطرح کنید.
نظر شما چیست؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *