Reset CSS

CSS Reset היא טכניקה קלה, יעילה ומהירה להטמעה שחוסכת לכל מפתח אינטרנט זמן ועצבים מיותרים בכל נושא ה-Cross Browser.

באופן מפתיע למדי רבים לא למדו כיצד לבצע 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;
}

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

פוסטים נוספים שכדאי לקרוא

פתרונות ומאמרים על פיתוח אינטרנט

יישום של nonce על מנת להגן מפני התקפות injection

בפוסט הקודם הסברתי על hash עם CSP על משאבי inline – שזה נחמד ומעולה אבל פחות ישים בעולם האמיתי שבו בדרך כלל התוכן ה-inline (בין

למפתחי ובוני אתרי אינטרנט

מדריך לשאילתות יעילות ל Chat GPT

כל אחד יכול לשאול את GPT, אבל אם תרצו לשאול אותו שאלות על תכנות – יש כמה שיטות וטיפים ליעל את העבודה מולו.

יסודות בתכנות

מספרים בינאריים בקוד

איך, ויותר חשוב למה, משתמשים במספרים בינאריים בתכנות? גם בפייתון ובג׳אווהסקריפט?

פתרונות ומאמרים על פיתוח אינטרנט

המנעו מהעלאת source control לשרת פומבי

לא תאמינו כמה אתרים מעלים את ה-source control שלהם לשרת. ככה תמצאו אותם וגם הסבר למה זה רעיון רע.

גלילה לראש העמוד