אתחול דפי HTML בעזרת קוד CSS

כמה פעמים קרה לכם שעיצבתם כותרת או טבלה או כל אלמנט אחר בדף HTML והוא נראה נפלא בדפדפן אחד ולא כל כך נפלא בדפדפן אחר? לי זה קורה לא מעט. במקרה כזה אני מתחיל לבדוק את הקוד שלי  ולנסות להוסיף או להוריד תכונות בקוד ה - CSS עד שאחרי הרבה זיעה וקפה אני מצליח (או לא) לקבל דף זהה בכל הדפדפנים המובילים. הרבה פעמים הפיתרון הוא לא יותר מהוספת Margin לאלמנט או הקטנת Padding מאלמנט אחר.

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

על מנת להבין את הצורך באתחול ויצירת בסיס שווה עבור כל האלמנטים, עלינו לזכור שלכל דפדפן יש הגדרות ברירת מחדל עבור כל אלמנט HTML. הבעיה היא שלכל דפדפן (או משפחת דפדפנים) יש ברירות מחדל אחרות. לדוגמה, חלק מן הדפדפנים מציגים כניסה (Indentation) של רשימות באמצעות הגדרת שוליים שמאליים (left margin) בעוד דפדפנים אחרים מממשים את הכניסה הזו באמצעות שימוש בריפוד שמאלי (left padding). הבדלים מסוג זה נמצא כמעט בכל אלמנט ואלמנט, אפילו בדברים בסיסיים ביותר כגובה שורה (line height). הבדלים אלה עלולים לגרום להבדלים נוספים כגובהם של אלמנטים, המראה הכללי של הדף ועוד. באמצעות אתחול דפי ה - HTML שלנו נוכל לקבל ברירות מחדל זהות בתכונות כגון: ריפוד, שוליים, גובה שורה, גודל פונט, משפחת פונטים, גודל אלמנטים ועוד.

לשמחת כולנו אין צורך שנשב ונכתוב בעצמנו את כל הקוד הדרוש לאתחול דפי HTML אנשים (וחברות) אחרים כבר עשו את העבודה במקומנו. הקוד המועדף עליי (אתם יכולים לבחור בכל קוד אחר) הוא זה של Eric Meyer.:

/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/

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;

}

קוד זה משרת מיליוני אתרים בכל רחבי העולם. הקוד נמצא בבעלות הציבור (Public domain)  ולכן אתם יכולים להעתיק אותו מהאתר של אריק או מהאתר הזה, לערוך בו שינויים, להוסיף עליו קוד ועוד. בכוונת תחילה קוד זה אינו מכיל ברירות מחדל מקובלות כגון צבעי אלמנטים וכדומה משום שמטרתו העיקרית לנסות ולהשוות את האופן שבו דפדפנים שונים מציגים את תגי ה - HTML ותו לא.

מלבד הקוד של Eric Meyer נפוצות עוד כמה תבניות קוד מסוג זה ולהלן קישורים לכמה מהם. מומלץ לבקר באתרים, לעמוד על השוני בקוד ולאמץ לעצמכם את מה שנראה לכם טוב בכל אחת מתבניות הקוד הבאות: הקוד של יאהו נחשב לאיכותי מאוד, האתר HTML Doctor הכין תבנית קוד מיוחדת המותאמת באופן מיוחד ל - HTML5. כמו כן, מומלצת מאוד תבנית הקוד שכתב David Hellsing.

 

כלים ומאמרים בנושא

המדריך השלם לשפת HTML5

מבוא למודל הקופסה


 
© 2010-2013  www.Devschool.co.il | מדיניות פרטיות | תנאי שימוש