Ali
4 سال پیش توسط Ali مطرح شد
3 پاسخ

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

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


html_css
تگ‌های محبوب
لاراول
php
laravel
متفرقه
reactjs
عمومی
html_css
nodejs
vuejs
وردپرس
پایتون
css
فلاتر
react
javascript
ثبت پرسش جدید
mohammad.b
@mohammad.balvayeh 4 سال پیش آپدیت شد
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}

حسام موسوی
تخصص : طراح و برنامه نویس
@hesammousavi 4 سال پیش مطرح شد
0

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


mohammad.b
@mohammad.balvayeh 4 سال پیش آپدیت شد
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}

elhammaleki
تخصص : طراح و توسعه دهنده
@mrselmaleki 3 سال پیش مطرح شد
1

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


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام