آفلاین
user-avatar

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

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

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

بهترین پاسخ انتخاب شده توسط Ali
آفلاین
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
حسام موسوی ( 382929 تجربه )
3 سال پیش
تخصص : طراح و برنامه نویس

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

آفلاین
user-avatar
mohammad.b ( 725 تجربه )
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
elhammaleki ( 5660 تجربه )
1 سال پیش
تخصص : طراح و توسعه دهنده

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

برای ارسال پاسخ باید وارد سایت شوید