description

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

- 5 ماه پیش
توسط mohammad.b آپدیت شد
Ali ( 790 تجربه )
5 ماه پیش

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

بهترین پاسخ انتخاب شده توسط Ali
mohammad.b
5 ماه پیش

سلام
دوست عزیز خود مرورگر ها یکسری استایلهای پیش فرض دارن که اگه اینها ریست نشه و یه مقدار اولیه بهش داده نشه باعث میشه که سایت شما در مرورگرهای مختلف بصورت متفاوت به نمایش در بیاد
مثلا میتونید شما یه باکس ساده تعریف کنید و اینو در مرورگر های مختلف مشاهده کنید بعد یه فایل ریست به طرحتون اضافه کنید و دوباره مشاهده کنید خیلی راحت متوجه موضوع خواهید شد
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}
حسام موسوی ( 57465 تجربه )
5 ماه پیش

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

mohammad.b ( 546 تجربه )
5 ماه پیش

سلام
دوست عزیز خود مرورگر ها یکسری استایلهای پیش فرض دارن که اگه اینها ریست نشه و یه مقدار اولیه بهش داده نشه باعث میشه که سایت شما در مرورگرهای مختلف بصورت متفاوت به نمایش در بیاد
مثلا میتونید شما یه باکس ساده تعریف کنید و اینو در مرورگر های مختلف مشاهده کنید بعد یه فایل ریست به طرحتون اضافه کنید و دوباره مشاهده کنید خیلی راحت متوجه موضوع خواهید شد
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}
برای ارسال پاسخ باید وارد سایت شوید