‫Cross-browser כברירת מחדל: איך פועלים הנתיבים החלופיים לתצוגה של Baseline ב-Modern Web Guidance

Tara Agyemang

פורסם: 12 בנובמבר 2026

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

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

למה סוכני תכנות טועים בתמיכה בדפדפן בלי הדרכה

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

  • שימוש בקוד מדור קודם כברירת מחדל: נתוני האימון של המודל מלאים בדפוסים מדור קודם, וההערכות של Modern Web Guidance מראות שהמודלים עדיין ממליצים על רבים מהדפוסים האלה. סוכנים כותבים לעיתים קרובות קוד JavaScript מורכב או מוסיפים ספריות חיצוניות, כשאפשר להשתמש בתכונה מובנית של HTML או CSS.
  • שימוש בתכונות חדשות בלי רשת ביטחון: כשמבקשים מסוכן להשתמש בתכונת אינטרנט חדשה יותר, בדרך כלל הוא כותב קוד לדפדפנים תומכים ועוצר שם. הוא מדלג על זיהוי התכונות ומשמיט את החלופות, מה שגורם לדף להפסיק לפעול בדפדפנים שלא תומכים בתכונה.

נתונים מחבילת ההערכה של Modern Web Guidance מראים עד כמה הפער הזה נפוץ. לגבי תכונות שעדיין לא פועלות בכל הדפדפנים המובילים, חבילת ההערכה בודקת זיהוי תכונות, כללי @supports, חלופות או פוליפילים מותנים. מודלים לא מונחים עוברים את הבדיקות האלה רק ב-43% מהמקרים. כשהתכונה Modern Web Guidance מופעלת, שיעור ההצלחה מזנק ל-87%.

איך נתוני הבסיס משפיעים על כל המלצה

כדי להחליט מתי תכונה באינטרנט צריכה חלופה, Modern Web Guidance מסתמך על Baseline. ‫Baseline עוקב אחרי התמיכה בקבוצת הדפדפנים העיקריים (Chrome,‏ Edge,‏ Firefox ו-Safari במחשב ובנייד) באמצעות שלושה סטטוסים:

  • Baseline זמין באופן נרחב: התכונה פועלת בכל הדפדפנים העיקריים במשך 30 חודשים לפחות.
  • Baseline Newly available: התכונה פועלת בכל הדפדפנים העיקריים, החל מהתאריך שבו הדפדפן האחרון הוסיף תמיכה.
  • זמינות מוגבלת: התכונה עדיין לא נתמכת בכל הדפדפנים העיקריים.

כל מדריך של Modern Web Guidance כולל נתונים מובְנים של סטטוס Baseline וגרסת דפדפן מהחבילה web-features. כשסוכן התכנות טוען מדריך, הוא מקבל את סטטוס התמיכה המדויק של התכונה, את תאריכי ההשקה ואת גרסאות הדפדפן, לצד הוראות ההטמעה. לדוגמה:

Browser support for <dialog closedby>: Limited availability.
Supported by: Chrome 134 (Mar 2025), Edge 134 (Mar 2025), and Firefox 141 (Jul 2025).
Unsupported in: Safari.

כברירת מחדל, Modern Web Guidance פועל לפי שני כללים שמבוססים על הנתונים האלה:

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

ארבע תבניות חלופיות שבהן Modern Web Guidance משתמש בפועל

לא כל תכונה באינטרנט צריכה את אותו סוג של חלופה. הכלי Modern Web Guidance מתאים כל תכונה לאחת מ-4 גישות חלופיות, בהתאם לאופן שבו התכונה פועלת בדפדפנים שלא נתמכים:

תבנית חלופית מתי Modern Web Guidance משתמשת בזה
שיפור הדרגתי (progressive enhancement) בלי קוד חלופי תכונות דקורטיביות או תוספות שדפדפנים לא נתמכים מתעלמים מהן באופן בטוח בלי לשבש את הפריסה או ההתנהגות.
זיהוי תכונות CSS באמצעות הכלל @supports סגנונות חזותיים או סגנונות פריסה שמסתמכים על תכונת CSS חדשה יותר, ויכולים להיראות לא תקינים אם הם מיושמים באופן חלקי.
‫JavaScript קל בהתאמה אישית ממשקי API או מאפייני HTML אינטראקטיביים שצריכים סקריפט קטן ללא תלות כדי לשכפל את ההתנהגות בדפדפנים ישנים יותר.
‫Polyfills שנטענים באופן מותנה תכונות CSS או JavaScript גדולות יותר שדורשות טעינה דינמית של polyfill שנבדק רק כשחסרה תמיכה מקורית.

שיפור הדרגתי (progressive enhancement) בלי קוד חלופי

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

לדוגמה, הצהרת ה-CSS‏ text-wrap: balance (זמינה לאחרונה ב-Baseline) מאזנת את אורכי השורות בכותרות.

.balanced {
  text-wrap: balance;
}

‫Speculation Rules API (זמינות מוגבלת) שולף מראש או מרנדר מראש את הדפים הבאים. דפדפנים לא נתמכים מתעלמים באופן בטוח מבלוקים של <script type="speculationrules"> ומהצהרות CSS לא מזוהות.

<script type="speculationrules">
  {
    "prefetch": [{
      "where": { "href_matches": "/*" },
      "eagerness": "moderate"
    }]
  }
</script>

בגלל ההתנהגות הזו, הנציג יכול להוסיף את התכונות האלה ישירות בלי קוד חלופי נוסף.

זיהוי תכונות CSS באמצעות הכלל @supports

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

לדוגמה, שאילתות מאגר מעוגנות (container-type: anchored, זמינות מוגבלת) בתיאור קצר ממוקם מאפשרות להפוך את החץ של התיאור הקצר כשהוא מתהפך ליד קצה אזור התצוגה. בדפדפנים שלא תומכים בשאילתות של קונטיינרים מעוגנים, החץ לא יכול לזהות את ההיפוך ועלול להצביע לכיוון הלא נכון. הסוכן מקבל הנחיה מ-Modern Web Guidance לעטוף את סגנונות החיצים בכלל @supports (container-type: anchored), כדי שהחץ שמוגדר כברירת מחדל יופיע רק בדפדפנים שתומכים גם בכלל ההיפוך @container anchored().

@supports (container-type: anchored) {
  .tooltip-content::before {
    content: "▼";
    position: absolute;
    inset-block-end: 0;
  }
}

@container anchored(fallback: flip-block) {
  .tooltip-content::before {
    content: "▲";
    inset-block-start: 0;
    inset-block-end: auto;
  }
}

‫JavaScript קל בהתאמה אישית

כשפיצ'ר אינטראקטיבי של HTML לא נתמך בכל הדפדפנים העיקריים, יכול להיות שלא יהיה צורך להשתמש בספריית צד שלישי. באינטראקציות עצמאיות, Modern Web Guidance מספקת חלופה קצרה ב-JavaScript ללא תלות, מאחורי בדיקת תכונות.

לדוגמה, המאפיין closedby="any" ברכיב <dialog> (זמינות מוגבלת) מאפשר למשתמשים לסגור תיבת דו-שיח מודאלית בלחיצה על הרקע. בדפדפנים שלא תומכים במאפיין closedby, המדריך כולל רכיב click listener קטן שבודק קודם את האובייקט HTMLDialogElement.prototype:

const dialog = document.querySelector('dialog');

if (!('closedBy' in HTMLDialogElement.prototype)) {
  dialog.addEventListener('click', (event) => {
    if (event.target !== dialog) return;

    const rect = dialog.getBoundingClientRect();
    const clickedInDialog =
      rect.top <= event.clientY &&
      event.clientY <= rect.top + rect.height &&
      rect.left <= event.clientX &&
      event.clientX <= rect.left + rect.width;

    if (!clickedInDialog) {
      dialog.close();
    }
  });
}

‫Polyfills שנטענים באופן מותנה

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

במקרים כאלה, Modern Web Guidance מנחה את הסוכן לבדוק קודם אם יש תמיכה ולטעון באופן דינמי polyfill שנבדק באמצעות הביטוי import() מה-bundler או מ-CDN. דפדפנים שתומכים ב-polyfill לא מורידים קוד נוסף, ודפדפנים ישנים יותר מאחזרים את ה-polyfill לפי דרישה.

if (!CSS.supports('anchor-name: --a')) {
  await import('@oddbird/css-anchor-positioning');
}

התאמה אישית של יעד התמיכה בדפדפן של הפרויקט

כברירת מחדל, Modern Web Guidance מתייחס לתכונות שזמינות באופן נרחב ב-Baseline כבטוחות לשימוש בלי חלופות. הוא דורש חלופות לתכונות שזמינות רק בגרסאות Baseline Newly available ו-Baseline מלאי מוגבל.

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

אתם יכולים להגדיר מדיניות תמיכה מותאמת אישית בדפדפן בקובץ AGENTS.md או CLAUDE.md של הפרויקט:

## Browser support policy

- Target **Baseline 2024** or earlier. Omit fallbacks and `@supports` blocks for features that reached Baseline in or before 2024.
- Allow **Baseline Newly available** features when paired with a custom fallback of 20 lines or fewer.
- Don't add polyfill dependencies. Prefer CSS `@supports` rules or built-in HTML fallbacks instead.

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

בודקים גם את הנתיב המודרני וגם את הנתיב החלופי

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

כשבודקים בדפדפן אחד, מאמתים רק ענף אחד של הקוד. לדוגמה, Chrome ו-Firefox מריצים את המאפיין closedby="any" המקורי ברכיב <dialog>, ואילו Safari מריץ את ה-JavaScript click-outside כחלופה. אם בודקים את תיבת הדו-שיח ב-Chrome בלבד, מאזין הגיבוי הזה אף פעם לא פועל במהלך הבדיקה.

כדי לאמת את שני נתיבי הקוד, מחברים את סוכן התכנות לכמה מנועי דפדפן בו-זמנית:

כשהכלים האלה מחוברים, הנציג יכול לפתוח את הדף שלכם ב-Chrome, ב-Firefox וב-Safari בתהליך עבודה אחד. לאחר מכן, המערכת יכולה לוודא שהתכונה המקורית וחוויית הגיבוי פועלות כצפוי.

איך מתחילים להשתמש ב-Modern Web Guidance

כדי להוסיף את Modern Web Guidance לפרויקט, מריצים את תוכנת ההתקנה האינטראקטיבית מספריית הפרויקט:

npx modern-web-guidance@latest install

אם מותקנת גרסה קודמת, מריצים את פקודת העדכון כדי לשדרג לגרסה 1.0:

npx modern-web-guidance@latest update

אתם יכולים להתקין את Modern Web Guidance גם דרך מאגרי פלאגינים של Claude Code, ‏Codex, ‏Cursor, ‏Antigravity, ‏GitHub Copilot, ‏WebStorm, ‏Kimi Code ו-Grok.

מידע נוסף זמין במשאבים הבאים: