פורסם: 20 במאי 2025
עורכי קוד מודרניים מאפשרים לכם להיות הרבה יותר פרודוקטיביים כי הם מרכזים את הכלים ואת מסמכי העזר שאתם צריכים כדי ליצור דברים בצורה יעילה – זה ה-I ב-IDE. אחד השיפורים בפרודוקטיביות בהרבה סביבות פיתוח משולבות (IDE), כמו Visual Studio Code (VS Code), הוא הצגת מידע נוסף על תכונות אינטרנט כשמעבירים מעליהן את העכבר בעורך. המידע הזה כולל תיאור של התכונה, דפדפנים נתמכים, מדריך לתחביר וקישור למידע נוסף ב-MDN.
מידע על תאימות לדפדפן שימושי במיוחד בהקשר של IDE, כי אפשר לקבל משוב מיידי על מידת יכולת הפעולה ההדדית של תכונה מסוימת, רק על ידי הצבת הסמן מעליה. תוכלו להשתמש במידע הזה כדי להחליט אם תכונה מסוימת עומדת ביעדי התמיכה בדפדפן, אם צריך לנקוט צעדים כדי לשפר אותה בהדרגה או למלא אותה, או אם כדאי להימנע משימוש בה לחלוטין.
aspect-ratio בגרסאות קודמות של VS Code, עם תמיכה בדפדפן שמצוינת במונחים של מספרי גרסאות:Edge 88, Firefox 89, Safari 15, Chrome 88, Opera 74
בגרסאות קודמות של VS Code, המידע הזה הוצג במונחים של מספרי גרסאות של דפדפנים, בדומה למה שאפשר לראות בטבלאות תאימות באתרים כמו MDN, Can I Use או כאן ב-web.dev. אבל מה שמשותף לכל האתרים האלה הוא שהם גם התחילו לסכם את מגוון האפשרויות המורכב של תמיכה בדפדפנים באמצעות Baseline. לכן, כדי להתאים את VS Code לדרך שבה משאבים אחרים מעבירים מידע על תאימות לדפדפן, VS Code תומך עכשיו גם ב-Baseline.
כדי לקבל את ממשק המשתמש החדש של Baseline, צריך לשדרג לגרסה 1.100 של VS Code או לגרסה חדשה יותר. הכול עובד מיד – לא צריך תוספים או הגדרות נוספות.
aspect-ratio בגרסה האחרונה של VS Code, עם תמיכה בדפדפן שמוצגת במונחים של Baseline: "Widely available across major browsers (Baseline since 2021)"
כשמעבירים את העכבר מעל תכונת אינטרנט בגרסה העדכנית של VS Code, מוצג הסטטוס שלה ב-Baseline. כדי שתקבלו מושג כמה זמן התכונה נתמכת, ב-VS Code יצוין גם השנה שבה היא הפכה לבסיסית. לחלופין, אם התכונה עדיין לא עומדת בדרישות של Baseline, המערכת תציין באילו דפדפנים היא עדיין לא הוטמעה באופן מלא.
בגרסאות קודמות של VS Code, התהליך הזה לא היה פשוט. צריך לחשוב קצת כדי להסתכל על רשימת הגרסאות הנתמכות של הדפדפנים ולהבין אילו דפדפנים חסרים. יכול להיות שהחלק הכי פחות ברור היה כמה זמן התכונה נתמכה בדפדפנים. לשם כך, צריך לדעת מתי כל גרסה פורסמה, וזה לא מידע שזמין לכולם. למזלנו, כל הנתונים האלה נלקחים בחשבון בסטטוס ובשנה של נתוני הבסיס.
autocorrect של הזמינות המוגבלתהגרסה הזו כוללת גם משהו חדש לגמרי. בעבר, יכולתם להציג רק נתוני תמיכה בדפדפן עבור מאפייני CSS. האפשרות הזו הייתה שימושית במיוחד לאור הקצב המהיר שבו אנחנו משיקים תכונות CSS חדשות מדי שנה. אבל יש גם הרבה חדשנות ב-HTML! החל מהגרסה הזו, ב-VS Code יוצג גם מידע על תמיכה בדפדפן עבור רכיבי HTML ומאפיינים מבחינת סטטוס הבסיס שלהם.
לדוגמה, מאפיין הקלט autocorrect הושק בדפדפן הראשון שלו, Firefox, רק לפני כמה חודשים. המשוב המיידי שמתקבל לגבי הזמינות המוגבלת של התכונה מאפשר לדעת איפה היא תפעל ואיפה לא. במקרה הזה, אין נזק בשימוש בדפדפנים לא נתמכים, אז אפשר להשתמש בהם.
dialog Widely available (זמין באופן נרחב) ומעל המאפיינים popover Newly available (זמינים חדשים)תכונות אחרות של HTML, כמו הרכיב dialog, לא פועלות בצורה חלקה כמו autocorrect. לכן, זה מרגיע לדעת שאפשר להפעיל את dialog כרטיס המידע כשמעבירים את העכבר מעל המילה ולראות שהיא אכן נחשבת ל-Baseline מאז 2022, ושהיא זמינה באופן נרחב בדפדפנים המובילים. המידע הזה יעזור לכם להשתמש בתכונות שאולי חשבתם שהן מתקדמות מדי.
Popover API הוא דוגמה נוספת לתכונת HTML שהיא גם Baseline, אבל רק מאז 2024, ולכן היא עדיין נחשבת ל-Newly available. כלומר, למרות שהוא נתמך בכל הדפדפנים המובילים, הוא עדיין לא זמין באופן נרחב כי לא עברו 2.5 שנים מאז ההשקה שלו. לכן, כדאי לנקוט משנה זהירות לפני שמשחררים את התכונה הזו לכל המשתמשים.
autocorrect עדיין לא בסיסית, וביטול האזהרה באמצעות הערההמידע הזה זמין ב-VS Code, וזה משפר מאוד את הפרודוקטיביות. אבל מה אם לא צריך להעביר את העכבר מעל תכונה כדי לראות אם היא תכונת בסיס? האפשרות הזו קיימת בזכות כלי נפרד אבל קשור: linters.
לדוגמה, התוסף ESLint ל-VS Code יכול לבצע בדיקת קוד בקובצי HTML ו-CSS ולהוסיף קו תחתון גלי לכל התכונות שעדיין לא עומדות בדרישות של Baseline. התכונה הזו מבוססת על הכללים use-baseline שנוספו לאחרונה מהפלאגינים HTML ESLint ו-ESLint for CSS. יש גם כלל דומה ל-Stylelint, אם זה מה שאתם מחפשים. כמובן, זו רק אחת מההטבות הרבות של כלי Linter, אבל היא ממחישה עד כמה הם משלימים את כרטיסי המידע החדשים שמופעלים באמצעות Baseline.
אם אתם משתמשים ב-VS Code, כדאי לכם לנסות את הכרטיסים הצפים החדשים. ואם אתם לא משתמשים ב-VS Code, יש לי חדשות טובות בשבילכם. סביבות פיתוח משולבות רבות הן הסתעפויות של Code – OSS (גרסת הקוד הפתוח של VS Code) או שהן מסתמכות על אותם שרתי שפה שמפעילים את כרטיסי ה-HTML וה-CSS שלה. יכול להיות שיחלפו שבועות או חודשים עד שסביבות הפיתוח המשולבות האלה ישודרגו לגרסה העדכנית ביותר, אבל כשהן ישודרגו, הן אמורות לקבל באופן אוטומטי את ממשק המשתמש החדש של Baseline:
- VSCodium
- Firebase Studio
- סמן
- גלישת רוח
- Zed
- Eclipse Theia
- Trae
- סביבות פיתוח וירטואליות ב-GitHub
- סביבות עבודה ב-GitLab
- Replit
- StackBlitz (Bolt)
חברת JetBrains פועלת גם לשילוב של Baseline בכל סביבות הפיתוח המשולבות (IDE) שלה שמבוססות על IntelliJ, החל מ-WebStorm. נפרט על כך בפוסט נפרד בבלוג – כדאי לעקוב.
יותר ויותר משאבים וכלים למפתחים מוסיפים תמיכה ב-Baseline, והשילובים החדשים האלה של סביבות פיתוח משולבות (IDE) בהובלת VS Code מרגשים במיוחד. אנחנו מבלים כל כך הרבה זמן בסביבות הפיתוח המשולבות שלנו, והנתונים הבסיסיים האלה בהישג יד יעזרו לנו להוסיף עוד בהירות ועקביות בין הכלים לתהליכי העבודה של הפיתוח שלנו. במדריך שלנו בנושא Baseline יש מידע נוסף על Baseline ועל שילובים אחרים של כלים כמו זה.