אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » פיתוח אינטרנט » פתרונות ומאמרים על פיתוח אינטרנט » כלי לבדיקת בעיות ב-CSS לפני שהן נוצרות

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

רן בר-זיק יולי 29, 2019 7:07 am 3 תגובות

הדפדפן לא תומך ב-CSS שלכם? ככה תדעו על זה מראש

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
CSS

3 תגובות

  1. שמעיה ספירו הגב יולי 29, 2019 בשעה 2:48 pm

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

  2. יגאל הגב יולי 30, 2019 בשעה 11:51 am

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

    • רחל הגב יולי 31, 2019 בשעה 10:56 am

      יש גם כלי לבדיקת JS ?

השארת תגובה

ביטול

ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

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

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

גלילה לראש העמוד