דפדפן האינטרנט של היום יש כברת דרך ארוכה מן הימים מטורף שבו כל סוג של עקביות בין הדפדפן היה משאלת לב. דפדפני האינטרנט של היום הם מאוד סטנדרטיים תואם. הם משחקים יפה ביחד ולספק להציג דף עקבי למדי על פני הדפדפנים השונים. זה כולל את הגירסאות העדכניות ביותר של Google Chrome, Microsoft Edge, Mozilla Firefox, Opera, Safari, ואת הדפדפנים השונים שנמצאו על מספר עצום של מכשירים ניידים המשמשים כדי לגשת לאתר היום.
אמנם ההתקדמות בהחלט נעשתה כשמדובר דפדפני אינטרנט וכיצד הם להציג CSS, יש עדיין חוסר עקביות בין אלה אפשרויות תוכנה שונות. אחד העיוותים הנפוצים הוא איך דפדפנים אלה לחשב שולי, ריפוד, גבולות כברירת מחדל.
בגלל היבטים אלה של מודל התיבה השפעה על כל האלמנטים HTML, ובגלל שהם חיוניים ביצירת פריסות דף, להציג עקבי אומר כי הדף עשוי להיראות נהדר בדפדפן אחד, אבל נראה קצת מחוץ אחרת. כדי להתמודד עם בעיה זו, מעצבי אתרים רבים לנרמל את ההיבטים האלה של מודל התיבה. נוהג זה ידוע גם בשם "אפס החוצה" את ערכי השוליים, ריפוד, גבולות.
הערה על ברירות מחדל לדפדפן
לדפדפני אינטרנט יש הגדרות ברירת מחדל עבור היבטי תצוגה מסוימים של הדף. לדוגמה, היפר-קישורים כחולים ומסומנים בקו תחתון כברירת מחדל. זה עקבי על פני דפדפנים שונים, ואף על פי שזה משהו שרוב המעצבים לשנות כדי להתאים את הצרכים העיצוביים של הפרויקט הספציפי שלהם, העובדה שהם כולם מתחילים עם ברירות מחדל זהה עושה את זה קל יותר לבצע שינויים אלה. לצערנו, ערך ברירת המחדל עבור שוליים, ריפוד וגבולות אינם נהנים מאותה רמה של עקביות בין הדפדפנים.
מנרמל ערכים עבור שוליים וריפוד
הדרך הטובה ביותר לפתור את הבעיה של המודל תיבת עקביים היא להגדיר את כל השוליים ואת ערכי ריפוד של רכיבי HTML לאפס. ישנן מספר דרכים שבהן תוכל לעשות זאת היא להוסיף כלל CSS זה לגיליון הסגנונות שלך:
* {מרווח: 0; ריפוד: 0; }כלל CSS זה משתמש בתו * או תו כללי. התו הזה פירושו "כל האלמנטים" והוא יבחר בעיקרון בכל אלמנט HTML ויגדיר את השוליים והריפוד ל -0. למרות שהכלל הזה הוא מאוד לא ספציפי, מכיוון שהוא נמצא בגיליון הסגנונות החיצוני שלך, הוא יהיה בעל סגוליות גבוהה יותר מדפדפן ברירת המחדל ערכים לעשות. מכיוון שברירות מחדל אלה הן מה שאתה מחליף, סגנון אחד זה יהיה להשיג את מה שאתה עושה לעשות.
אפשרות נוספת היא להחיל ערכים אלה על רכיבי HTML וגוף. מכיוון שכל שאר האלמנטים בדף שלך יהיו ילדים משני האלמנטים האלה, מפל ה- CSS צריך להחיל ערכים אלה על כל האלמנטים האחרים.
html, body {margin: 0; ריפוד: 0; }זה יתחיל את העיצוב שלך באותו מקום על כל הדפדפנים, אבל דבר אחד לזכור הוא כי ברגע שאתה מפעיל את כל השוליים ואת הריפוד, תצטרך סלקטיבי להפוך אותם בחזרה על חלקים מסוימים של דף האינטרנט שלך כדי להשיג את המראה ולהרגיש כי העיצוב שלך דורש.
גבולות
ייתכן שאתה חושב "אבל אין דפדפנים יש גבול סביב אלמנט הגוף כברירת מחדל". זה לא נכון. לגירסאות ישנות יותר של Internet Explorer יש גבול שקוף או בלתי נראה סביב אלמנטים. אלא אם כן אתה מגדיר את הגבול ל -0, הגבול הזה עלול לבלבל את פריסות הדף שלך. אם החלטתם שתמשיכו לתמוך בגירסאות עתיקות אלה של IE, יהיה עליכם לטפל בכך על ידי הוספת הפריטים הבאים לגוף ולסגנונות HTML:
HTML, גוף {
שוליים: 0px;
ריפוד: 0px;
border: 0px;
}
בדומה לאופן שבו כיבית את השוליים והריפוד, סגנון חדש זה יכבה גם את גבולות ברירת המחדל. אתה יכול גם לעשות את אותו הדבר באמצעות בורר כלליים המוצגת קודם לכן במאמר.
מאמר מקורי מאת ג'ניפר קרינין. בעריכת ג'רמי ג'ירארד ב -27 / 9/16.