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

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

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

מיקרו בקרים

הפעלת מסך oled קטנטן עם esp32

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

בינה מלאכותית

להריץ ממשק של open-webui על הרספברי פיי

להפעיל ממשק של צ׳אט ג׳יפיטי שאפשר לגשת אליו מכל מחשב ברשת הביתית על רספברי פיי עם מודל בשם tinydolphin שרץ על רספברי פיי.

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