MasterScripter

מה זה CSS Reset ולמה אני צריך את זה, אם בכלל

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

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

מה זה CSS Reset?

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

רנדור שונה בין דפדפנים

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, למה לכתוב עשרות ומאות שורות קוד?

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

איך ליצור את ה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:

אני לא יודע מה איתכם, אבל לי לא זכורה הפעם האחרונה שהשתמשתי באחד מהאלמנטים האלה.
האם באמת יש סיבה לשמור את החוקים הללו ב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

אם הגעת עד לפה, הגיע הזמן להירשם לניוזלטר!

Summary
Article Name
מה זה CSS Reset ולמה אני צריך את זה, אם בכלל
Description
הכל אודות CSS Reset והאופציות השונות שקיימות לשימוש בו.
Author
Publisher Name
MasterScripter
Publisher Logo
תגיות: ,
אודות 
יזם בוטסטראפ, מתכנת ומנהל מוצר. שותף מייסד בקבוצת סיזן שמספקת שירותי פיתוח וליווי טכנולוגי לחברות וארגונים, וב-edge אתגרים בחינוך שמפתחת מוצרים דיגיטליים לבתי ספר. המייסד של PBC - מועדון ספרים מקצועי.

4 תגובות

  1. ניר

    9 בפברואר 2017 - 18:26
    תגובה

    אני משתמש ב normalize.css בכל פרוייקט. עם זאת בפרוייקטים שלא אאכפת לי מהתמיכה שלהם באקספלורר אני שוקל לבטל את השימוש בהם. הסיבה שבחרתי ב normalize ולא ב reset הייתה בעקבות תשובה ישנו שקראתי ב stack overflow ששכנעה אותי להשתמש בו. לא זוכר את הסיבה וזה נשאר ככה מאז..

    אחלה מאמר.

    • שלומי זק

      14 בפברואר 2017 - 9:20
      תגובה

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

  2. מאור

    19 במרץ 2017 - 19:03
    תגובה

    אחלה מאמר. אני משתמש בnormalize גם.
    להגיד לך למה…אני לא יודע כנראה שהולך אחרי העדר 🙂

    • שלומי זק

      20 במרץ 2017 - 10:34
      תגובה

      תודה על המחמאות!
      לפעמים גם לתת לעדר לקחת החלטות בשבילך יכול להיות המהלך הנכון 😉

השאר/י תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *