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;
}

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

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

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

נגישות טכנית – פודקאסט ומבוא

פרק בפודקאסטעל נגישות בעברית שצולל לכלים האוטומטיים ולפן המאד מאד טכני של הנגישות.

צילום מסך של סוואגר
יסודות בתכנות

openAPI

שימוש בתשתית הפופולרית למיפוי ותיעוד של API וגם הסבר בסיסי על מה זה API

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

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

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

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