Reset CSS

באופן מפתיע למדי רבים לא למדו כיצד לבצע Reset ל-CSS שלהם. מדובר בהליך פשוט, קל להבנה שחוסך לא מעט זמן בפיתוח. הסיבה שבעטיה אנו מבצעים Reset ל-CSS היא פשוטה יחסית – לכל דפדפן יש דרך קצת שונה לטפל באלמנטים מסוימים. יש כאלו שנותנים לאלמנט מסוים מרווח כפול של line-height ויש כאלו שנותנים שוליים או padding שונה לאלמנטים שונים. לפיכך צריך לבצע סוג של ‘אתחול’ – מתן ערכים קבועים לאלמנטים מסוימים על מנת למנוע שונות בדפדפנים מסוימים.

למשל לתגית table יש שוליים של כמה פיקסלים באינטרנט אקספלורר אך אין לה שוליים בדפדפן האינטרנט אופרה. במקום לגלות את זה רק בשלב העיצוב (או יותר מאוחר), הגדרה פשוטה בתחילת העמוד של margin: 0px ל-table ולאלמנטים אחרים חוסכת מאיתנו זמן ועצבים.

אין אלמנטים קבועים שצריך לעשות להם Reset ובפועל כל אחד בוחר את האלמנטים שעליהם הוא מבצע איתחול בהתאם לעיצוב שלו ולשכיחות האלמנטים. אם האלמנט span למשל נפוץ מאד בעיצוב שלכם, לא הייתי מאתחל אותו אלא מקדיש לו חלק משלו ב-CSS. למרות זאת, ישנם כמה CSS Reset ברשת, חלקם יותר פופולריים וחלקם פחות. אני משתמש בגרסה משלי, מותאמת לעברית שכולם רשאים להשתמש בה או לשנות אותה בהתאם לצורך:

html
{
	direction: ltr;
}
body
{
	direction: rtl;
	line-height: 1em;
	text-align: right;
}
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, font, 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 
{
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
ul 
{
	list-style: none;
}
blockquote, q 
{
	quotes: none;
}
blockquote:before, blockquote:after,q:before, q:after 
{
	content: '';
	content: none;
}
ins 
{
	text-decoration: none;
}
del 
{
	text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table 
{
	border-collapse: collapse;
	border-spacing: 0;
}

ההנאה מובטחת.

אהבתם? לא אהבתם? דרגו!

(אין הצבעות)