۲ مطلب با موضوع «کدنویسی» ثبت شده است

چرا فایل ریست (Reset) اولین فایلی است که در CSS استفاده می کنم؟

خب اگر دوست دارید هر بار المنتی مانند ul یا ol را استایل می کنید، نقطه ها و حاشیه پیش فرضی که مرورگر اضافه میکنه رو دستی حذف کنید، پس ادامه این مقاله را نخوانید.

آنهایی که به سرعت کدنویسی شان اهمیت می دهند و از نوشتن کدهای تکراری بی زار هستند شاید بخواهند از از فایلی یا مجموعه دستوراتی با عنوان CSS Reset در ابتدای کدهای CSS شان استفاده کنند تا تمامی استایل های پیش فرض مرورگر را از بین ببرد، طوری که هیچ یک از المان ها از h1 و h2 گرفته تا p و ul و table و body و ... هیچ کدام استایل نداشته باشند.

این متداول ترین کدیه که به عنوان CSS Reset استفاده میشه: (با قدردانی از خانواده Meyer)

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

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

چرا box-sizing اولین دستوری است که در CSS می نویسیم؟

چرا؟! چون کار رو راحت می کنه همین. من زیاد اهل نوشته های طولانی نیستم و با احترام به دوست عزیزم Chris Coyier از گزافه گویی زیاد خوشم نمیاد برای همین میرم سره اصل مطلب...

box-sizing: border-box یعنی می خوام وقتی عرض یه المنت رو میزارم 100 پیکسل دیگه می خوام همین 100 پیکسل بمونه و هرچقدر هم padding و border بهش اضافه کنم نمی خوام این عرض بیشتر از 100 پیکسل بشه، همین.

در روش پیش فرض یعنی box-sizing: content-box هر چه قدر border و padding اضافه کنید، این مقدار به width هم اضافه میشه و اگه باکس ها رو float کرده باشین، قشنگ گند میزنه به همه چی.

در یک کلام box-sizing: border-box کار چینش صفحات سایت رو بسیار راحت تر می کنه.

html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

*, *:before, *:after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}