נט2יו - איכות ברשת משנת 2004
  מה זה CSS Reset ולמה אני צריך את זה, אם בכלל
9/2/2017 7:58

אי שם בעבר הרחוק, ביקשה ממני אמי לחתוך עבורה מס' לימונים שישמשו להכנת מיץ לימון. לכשסיימתי לסחוט את הלימונים עד תום, אמי טעמה את מיץ הלימון שהכנתי והזדעזעה: "יש לזה טעם של בצל!" היא הכריזה.

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

בראש שלי זה היה מאוד הגיוני – למה לשטוף פעמיים כשאפשר לשטוף פעם אחת? מה כבר יכול לקרות, חשבתי והתבדתי.

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


מה לסיפור הפיוטי שלי ולCSS Reset, אתם בוודאי שואלים את עצמכם.

ובכן – בדיוק כמו שכל שף יודע שמתחילים לבשל רק כשהמטבח נקי, המחבתות נשטפו ולסכינים לא נדבק טעם של בצל, כך גם במקרה של מפתחי WEB ו- CSS Reset.

מפתחים רבים מעדיפים להשתמש בCSS Reset על מנת להשאיר את ה"מטבח" שלהם, הדפדפן, נקי ואחיד ככל האפשר – ולא משנה באיזה דפדפן ומערכת הפעלה הגולש מחליט להשתמש.


מה זה CSS Reset?


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

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

אך עם זאת, עדיין יש פערים מסויימים בחוקים שונים שחלים בדפדפנים השונים – זה יכול להתבטא ב- border ,padding, margin אולם זה עלול להתבטא גם בדברים שכיחים פחות.

יותר מכך, יכול להיות שבדברים שכבר פיתחתם יש אי-תאימויות ואתם אפילו לא ידעתם! דוגמא טובה לאי-תאימות שכזו ניתן למצוא במצב פוקוס על אלמנט קלט. בעוד שהכרום מציג outline כחול, אינטרנט אקספלורר לעומותו לא יציג חיווי כלל, בהנחה שלא נתנו שום הגדרה ולא השתמשנו בCSS Reset.


רנדור שונה בין דפדפניםhttp://masterscripter.co.il/wp-conten ... ent-Rendering-300x129.jpg 300w" sizes="(max-width: 680px) 100vw, 680px" />


CSS Reset הוא בעצם אוסף חוקי CSS כלליים אשר נועד לפתור בדיוק את הבעיה הזו – אי-התאימויות שבין הדפדפנים השונים. על ידי איפוס הגדרות ברירות מחדל שונות, הCSS Reset דואג לבטל את ההבדלים ברנדור הסטייל שבין הדפדפנים. השימוש בו נפוץ בקרב מפתחים, ובדרך כלל נהוג להטמיע אותו לפני יתר החוקים וההגדרות שאנחנו כותבים.


יתרונות וחסרונות


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

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


היתרון המרכזי בשימוש בCSS Reset הוא כמובן האחידות בנראות. בימים שבהם תחום הWEB דוחף את הגבולות עוד קצת בכל יום, הנראות כבר מזמן תופסת מקום נכבד. כולם רודפים אחרי ה"מוצר המושלם", זה שנראה הכי טוב ומרגיש הכי טוב ומתנהג הכי טוב, כזה שייתן את אפקט ה"ואו" ולא משנה כמה שעות יתבזבזו על מציאת המרחק המושלם בין הבלוקים באתר (זו רק דוגמא, כן? 😉 ). למה לסכן את המוצר המושלם שלנו, שכל כך הרבה ממנו תלוי בנראות – כשאפשר להשתמש בCSS Reset ולדאוג שלעולם אלמנטים לא יקבלו margin שאנחנו לא אישרנו מראש!


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

מעבר לכך, יש עוד מספר בעיות שעלולות לצוף בעקבות שימוש בCSS Reset. ישנם חוקי סטייל דיפולטיביים לדפדפנים, אשר מטרתם לשמור על האתר נגיש לבעלי מוגבלויות. איפוס שלהם ללא מתן התייחסות, יפגע בנגישות האתר. בנוסף, ישנן טענות מסויימות שמפתח יסודי ככל הנראה ידרוס בין כה את מרבית ההגדרות אשר הCSS Reset דואג לאפס, מה שיגרור חוקים מיותרים וקובץ CSS סופי שיכול להיות יעיל יותר.


ביצועים


הנקודה האחרונה שאני רוצה להתייחס בכל הקשור ל"בעד ונגד" CSS Reset הינה הפגיעה בביצועים.

מצד אחד, המקטרגים טוענים שעצם ההוספה של עוד חוקים, שלדעתם הם מיותרים, פוגעת בביצועים ובמהירות הטעינה של הדף. תוסיפו לכך את העובדה ששימוש בCSS Reset מאלץ אותנו לתת עוד הגדרות לכל אלמנט, והפגיעה בביצועים רק גדלה.

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


גישה שונה לCSS Reset


במרוצת השנים, התפתח זרם נוסף בכל הקשור בCSS Reset – זרם שמאמין שהCSS Reset נחוץ, אולם במתכונת קצת שונה.

אותו זרם חדש יצא מנקודת הנחה פשוטה פשוטה יחסית – הצורך בנראות אחידה ללא אי תאימויות עדיין קיים, אולם החסרונות של CSS Reset מתחילים לגבות מחיר כבד מידי.

הנחת העבודה הזאת הובילה למשהו שרובכם בוודאי מכירים – הלוא הוא הCSS Normalize.


מה בעצם ההבדל בין השניים?


ההבדל העיקרי בין השניים טמון בגישה. CSS Normalize לא מתמקד בלאפס חוקים דיפולטיביים ולספק למפתח "משטח חלק", אלא בליצור אחידות ועקביות בין הדפדפנים תוך כדי שמירה על הגדרות ברירת מחדל שימושיות.

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

מנגד, החסרון העיקרי הוא בדיוק הסיבה לקיומו של הCSS Reset – רנדור האלמנטים שלנו לא מאופס לחלוטין, מה שיכול להוביל לכך שאלמנטים מסויימים יקבלו הגדרות ברירת מחדל על אף שאנחנו לא כתבנו אותן בעצמנו.


CSS Reset-ים נפוצים


ברחבי הרשת ניתן למצוא היום מספר לא מבוטל של CSS Reset-ים שרק מחכים שישתמשו בהם. מובאים לפניכם (ממש עוד רגע!) ארבעה CSS Reset-ים פופולריים אשר בעיני מהווים את "מובילי התחום":


Reset CSS


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

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


Normalize.css


נורמלייז הוא אולי השם המוכר ביותר ברשימה הזאת. הפופולריות שלו בשיאה, כשבין היתר משתמשים בו חברות וארגונים כמו Twitter, GitHub, ועוד רבים וטובים.

ראוי לציין שמדובר מן הסתם בגישת הNormalize, ולא בגישת הReset הקלאסית.


Sanitize.css


Sanitize.css, שנכתבה על ידי אחד משני היוצרים של Normalize.css, גם היא מאסכולת הנירמול ולא האיפוס. בSanitize.css יש חלקים רבים מתוך Normalize.css, אך עם יותר "שומן" ודגש יותר חזק על נראות הדברים, תוך כדי שמירה על גישת הנירמול וניסיון שלא להתפזר יותר מידי. גם הפופולריות שלה גבוהה יחסית, ושווה לבחון אותה.


Hard Reset


קשה באמת לזקוף לזכותו את הקרדיט עבור בקושי 4 שורות קוד, אולם גם קשה להתעלם מהעובדה שבכל זאת רבים מייחסים לו את הרעיון. אנדרו קרספאניס טוען שהשורה וחצי הבאות של CSS הזניקו לו את הקריירה יותר ממה שהוא אי פעם חלם, במה שנודע היום כHard Reset. הרעיון כאן הוא מינימלי וממצה – בהנחה שהרוב המוחץ של השונות בדפדפנים מתבטאת בmargin ו- padding, למה לכתוב עשרות ומאות שורות קוד?

* {
padding:0;
margin:0;
}

חשוב לציין שהשימוש בסלקטור * עלול להיות בעייתי מבחינת היררכיות ופגיעה בביצועים, אז תעשו את השיקולים שלכם!


איך ליצור את הCSS Reset המושלם


ראשית עליי להתוודות – אני מתומכי השימוש בCSS Reset. אני מניח שכבר הסקתם את זה אם הגעתם עד לכאן, ואם לא – אז כל הכבוד לי על השמירה האדוקה על האובייקטיביות.

יחד עם זאת, בעיני אין חשיבות לCSS Reset בו אתם בוחרים להשתמש (כל עוד זה לא Hard Reset, ותכף תבינו למה).

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


מה הכוונה? בין אם זה Reset CSS, Normalize.css, Sanitize.css או כל אחד אחר שתתקלו בו וימצא חן בעיניכם – נקודת הפתיחה איננה הקובעת. מה שקובע הוא אם אתם לוקחים את הCSS Reset כתורה מסיני שאסור לגעת בה, או שאתם משפרים ומתאימים אותו לצרכים שלכם בכל פרוייקט.

בסופו של דבר, אם תקפידו לעשות את זה – לאחר זמן מסויים תשארו עם הCSS Reset המושלם, בשבילכם.


והנה דוגמא קטנה: גם בSanitize.css וגם בNormalize.css יש התייחסות לאלמנטים מסוג superscript ו- subscript:

/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/

sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}

sub {
bottom: -0.25em;
}

sup {
top: -0.5em;
}

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

האם באמת יש סיבה לשמור את החוקים הללו בCSS Reset שלנו?


האם באמת יש צורך בCSS Reset?


ישנם מפתחים רבים שעובדים עם CSS Reset כזה או אחר כבר שנים על גבי שנים, שהם בכלל לא יודעים מה זה לפתוח פרוייקט בלי אוטומטית להעביר איתם את הCSS Reset.

הנה מבחן קטן לאותם אנשים(שאני ביניהם!), אשר יכול אולי לשכנע אותנו לעבור לצד השני:

קחו פרוייקט גמור, כזה שאתם יודעים שנראה טוב בכל הדפדפנים השונים. הסירו את כל שורות הCSS Reset מהפרוייקט, ועכשיו בחנו את נראות הפרוייקט בדפדפנים השונים מחדש.

האם ההבדל גדול? האם הCSS Reset יוצר אחידות בפחות שורות קוד מכמה שהיה לוקח ליצור אותה בלעדיו?


לסיכום


לעניות דעתי, כל נושא האיפוס והנרמול של הCSS הוא נושא מעניין מאוד, במיוחד לאור העובדה שהוא נמצא בתודעה של מפתחים כבר מתחילת הדרך של HTML וCSS.

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

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

הבקשה האחרונה שלי אליכם היא לשמוע את דעתכם – האם אתם משתמשים בCSS Reset? אם כן, באיזה? ואם לא – למה לא?

אני רוצה לראות פה טיעונים משכנעים! 🙂


מקורות


Six Revisions – במאמר של שלושה חלקים על CSS Reset


Reddit – דיון על CSS Reset ב2017


cssreset.com – מה זה CSS Reset


הפוסט מה זה CSS Reset ולמה אני צריך את זה, אם בכלל הופיע ראשון בMasterScripter







האחריות על התגובות למאמרים השונים חלה על שולחיהן. הנהלת האתר אינה אחראית על תוכנן.
שליחת תגובה
חוקי שליחת תגובות*
תגובות חברי האתר מאושרות אוטומטית
כותרת*
_CM_USER*
_CM_EMAIL*
_CM_URL*
הודעה*
קוד אבטחה*

 הערה: התכנים המוצגים בעמוד זה ...

התכנים המופיעים במדור זה מועברים אוטומטית מבלוגים ואתרי מידע ברשת, כל הזכויות על התכנים: כולל טקסטים, תמונות, סרטים וכל מדיה נוספת, הנם של יוצרי החומר המקורי בלבד. אתר נט2יו אינו טוען לבעלות או לזכויות יוצרים על התכנים, אלא רק מצביע עליהם בצורה נוחה ומרוכזת, וכן מקשר אל האתר המקורי, עם המאמרים המלאים. אם למרות האמור לעיל, נתקלת בחשש להפרת זכויות יוצרים, או שתוכן מסויים באתר אינו לרוחך, אנא דווח לנו באמצעות טופס יצירת הקשר ונורידו בהקדם האפשרי מהאתר.
×

הצהרת נגישות

אתר זה מונגש לאנשים עם מוגבלויות על פי Web Content Accessibility Guidelines 2 ברמה AA.
האתר נמצא תמידית בתהליכי הנגשה: אנו עושים כל שביכולתנו שהאתר יהיה נגיש לאנשים עם מוגבלות.
אם בכל זאת נתקלתם בבעיית נגישות אנא שלחו לנו הערתכם במייל (אל תשכחו בבקשה לציין את כתובת האתר).

אודות ההנגשה באתר:

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