כלי לבדיקת בעיות ב-CSS לפני שהן נוצרות

אני גאה לבשר לכם על יציאתו לאור של הספר שלי: "ללמוד ג'אווהסקריפט בעברית". הספר מלמד מרמת מתחילים עד רמת מתקדמים מאוד ובעברית! כ-2000 איש שותפים לפרויקט שגייס כ-300,000 ש"ח ובתמיכת הקריה האקדמית אונו והחברות וויקס, אאוטבריין, אלמנטור, Chegg, איירון סורס, Really Good ו-Honey Book. עדיין אפשר להצטרף לפרויקט! ליחצו כאן למידע על הספר וגם לפרקים בחינם

לפני כמה חודשים התכבדתי להופיע בפודקאסט “מפתחים חסרי תרבות”. בפודקאסט שמחתי לדבר על CI שזה ראשי תיבות של Continuous Integration. אני ממליץ לכולם לשמוע את הפרק פה.

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

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

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

איך עושים את זה? באמצעות כלי קטן שנקרא doiuse והוא עובד מעולה בכל שפה שהיא ועל כל תוצר שהוא. אפשר להריץ אותו גם על SCSS וגם על קבצי CSS מקומפלים. איך הוא עובד? הכי פשוט שיש:

  1. מתקינים באמצעות npx doiuse
  2. מפעילים בנוסח הבא משורת הפקודה:
doiuse --browsers "ie >= 10" ./public/**/*.css 

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

אם יש לכם ב-CSS משהו שלא תואם את הגרסה שהשתמשתם בה, ובכן – תקבלו הודעה וגם שגיאה (תלוי בקופיגורציה). למשל, אם קראתם את המאמר של אלעד שכטר על CSS Sticky ומיהרתם לשים ב-CSS שלכם משהו כזה:

.some-component {
  position: sticky;
  top: 0;
}

ותריצו את הכלי, או בבילד או אפילו מקומית אצלכם באופן אוטומטי בכל פעם שעושים commit, אז תקבלו הודעת שגיאה:

doiuse --browsers "ie >= 11" ./public/*/.css
CSS position:sticky not supported by: IE (11) (css-sticky)

זה יהיה מבאס מאוד, אבל הרבה יותר מבאס יהיה לגלות את זה כשה-QA יגיע אליכם בפנים מכורכמות למשל.

אם אתם לא מכירים את אלעד שכטר או את קבוצת הפייסבוק שלו CSS Masters, אני ממליץ לכם לבדוק! קבוצות נוספות מומלצות יש פה ואתם מוזמנים לבדוק (או להוסיף שם קבוצות ודברים מענינים).

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

אני גאה לבשר לכם על יציאתו לאור של הספר שלי: "ללמוד ג'אווהסקריפט בעברית". הספר מלמד מרמת מתחילים עד רמת מתקדמים מאוד ובעברית! כ-2000 איש שותפים לפרויקט שגייס כ-300,000 ש"ח ובתמיכת הקריה האקדמית אונו והחברות וויקס, אאוטבריין, אלמנטור, Chegg, איירון סורס, Really Good ו-Honey Book. עדיין אפשר להצטרף לפרויקט! ליחצו כאן למידע על הספר וגם לפרקים בחינם

אהבתם? לא אהבתם? דרגו!


תגיות: פורסם בקטגוריה: פתרונות ומאמרים על פיתוח אינטרנט

אל תשארו מאחור! יש עוד מה ללמוד!

3 comments on “כלי לבדיקת בעיות ב-CSS לפני שהן נוצרות
  1. אני הייתי מנסה לשכלל את התהליך ולא מכשיל בילד על כל קוד שלא נתמך.
    למשל לפעמים אני ארצה להשתמש בsticky ולשים עוד קוד CSS שהדפדפן יפול אליו בfallback ועדיין הלינטר יציג לי שגיאות.
    לא מכיר את הכלי הספיציפי המדובר, בPHPCS אפשר לסמן שורה מסויימת כמוחרגת והלינטר ידלג מעליה, כדאי לחשוב על מימושים כאלו

  2. יגאל הגיב:

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

כתיבת תגובה

האימייל לא יוצג באתר.