دلیل استفاده از css rest

2 سال پیش توسط elhammaleki آپدیت شد
آفلاین
user-avatar
Ali ( 1205 تجربه )
3 سال پیش

لینک کوتاه اشتراک گذاری

0

چرا از reset.min.css استفاده می شود؟

بهترین پاسخ
آفلاین
user-avatar
mohammad.b
3 سال پیش

سلام
دوست عزیز خود مرورگر ها یکسری استایلهای پیش فرض دارن که اگه اینها ریست نشه و یه مقدار اولیه بهش داده نشه باعث میشه که سایت شما در مرورگرهای مختلف بصورت متفاوت به نمایش در بیاد
مثلا میتونید شما یه باکس ساده تعریف کنید و اینو در مرورگر های مختلف مشاهده کنید بعد یه فایل ریست به طرحتون اضافه کنید و دوباره مشاهده کنید خیلی راحت متوجه موضوع خواهید شد
css reset هم نمونه های مختلفی داره که برای شروع میتونید ازشون استفاده کنید ولی در اینده میتونید برای خودتون یه ریست فایل بنویسید
normalize یکی از خوباش هست که میتونید استفاده کنید در طرحتون
اول فایل css هم این کد رو اضافه کنید که باعث میشه خیلی از مشکلات حل بشه

*{
    padding: 0;
    margin: 0;
    border: 0;
    box-sizing: border-box;
}

این فایل ریستی هست که من استفاده میکنم میتونید از این استفاده کنید فشرده شده هستش

*,body{margin:0}*,[type=checkbox],[type=radio],legend{padding:0;box-sizing:border-box}button,hr,input{overflow:visible}audio,canvas,progress,video{display:inline-block}progress,sub,sup{vertical-align:baseline}html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects;text-decoration:none}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{padding:.35em .75em .625em}legend{color:inherit;display:table;max-width:100%;white-space:normal}textarea{overflow:auto}[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}summary{display:list-item}[hidden],template{display:none}*{border:0;list-style:none}
آفلاین
user-avatar
حسام موسوی ( 434337 تجربه )
3 سال پیش
تخصص : طراح و برنامه نویس

لینک کوتاه اشتراک گذاری

0

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

آفلاین
user-avatar
mohammad.b ( 925 تجربه )
3 سال پیش

لینک کوتاه اشتراک گذاری

1

سلام
دوست عزیز خود مرورگر ها یکسری استایلهای پیش فرض دارن که اگه اینها ریست نشه و یه مقدار اولیه بهش داده نشه باعث میشه که سایت شما در مرورگرهای مختلف بصورت متفاوت به نمایش در بیاد
مثلا میتونید شما یه باکس ساده تعریف کنید و اینو در مرورگر های مختلف مشاهده کنید بعد یه فایل ریست به طرحتون اضافه کنید و دوباره مشاهده کنید خیلی راحت متوجه موضوع خواهید شد
css reset هم نمونه های مختلفی داره که برای شروع میتونید ازشون استفاده کنید ولی در اینده میتونید برای خودتون یه ریست فایل بنویسید
normalize یکی از خوباش هست که میتونید استفاده کنید در طرحتون
اول فایل css هم این کد رو اضافه کنید که باعث میشه خیلی از مشکلات حل بشه

*{
    padding: 0;
    margin: 0;
    border: 0;
    box-sizing: border-box;
}

این فایل ریستی هست که من استفاده میکنم میتونید از این استفاده کنید فشرده شده هستش

*,body{margin:0}*,[type=checkbox],[type=radio],legend{padding:0;box-sizing:border-box}button,hr,input{overflow:visible}audio,canvas,progress,video{display:inline-block}progress,sub,sup{vertical-align:baseline}html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects;text-decoration:none}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{padding:.35em .75em .625em}legend{color:inherit;display:table;max-width:100%;white-space:normal}textarea{overflow:auto}[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}summary{display:list-item}[hidden],template{display:none}*{border:0;list-style:none}
آفلاین
user-avatar
elhammaleki ( 6047 تجربه )
2 سال پیش
تخصص : طراح و توسعه دهنده

لینک کوتاه اشتراک گذاری

1

سازگاری با مرورگرها

برای ارسال پاسخ لازم است، ابتدا وارد سایت شوید.