חדש בפלטפורמת האינטרנט במאי

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

Rachel Andrew

גרסאות יציבות של דפדפנים

במאי 2024, Firefox 126, Safari 17.5 ו-Chrome 125 הציגו את היציבות. הפוסט הזה בוחן את התכונות החדשות שנוספו לפלטפורמת האינטרנט.

מיקום של עוגן CSS

גרסה 125 של Chrome כוללת מיקום של עוגן ב-CSS. כך ניתן לקשור רכיב שממוקם באופן מוחלט לרכיב אחד או יותר בדף אחר (העוגנים), באופן הצהרתי, ללא שימוש ב-JavaScript. המיקום של העוגן פועל בצורה יעילה כשניתן לגלול את העוגנים. דוגמה נפוצה היא למקם חלון קופץ כמו הסבר קצר ליד הרכיב שהפעיל אותו, או תפריט בחירה ורשימת האפשרויות הקופץ שלו.

מידע נוסף זמין בממשק ה-API למיקום עוגן ב-CSS.

תמיכה בדפדפן

  • 125
  • 125
  • x
  • x

מקור

פונקציות ערך בשלבים של CSS — round(), mod() ו-rem()

גרסה 125 של Chrome כוללת גם את פונקציות הערך המדורגות, כך שהפונקציות האלה זמינות עכשיו בגרסה הבסיסית חדשה (Baseline Newly). פונקציות הערך המדורג, round(), mod() ו-rem(), משנות כולן ערך נתון לפי 'ערך שלב' אחר.

מידע נוסף זמין במאמר הפונקציות המתמטיות של ערך מדורג ב-CSS זמינות עכשיו ב-Baseline 2024.

תמיכה בדפדפן

  • 125
  • 125
  • 118
  • 15.4

מקור

הפונקציה light-dark()

בנוסף, פונקציית הצבע של CSS light-dark() זמינה ב-Safari 17.5, שמצטרפת גם ל-Baseline Newly Available.

light-dark() היא פונקציה שמקבלת שני ארגומנטים, ששניהם חייבים להיות <color>. אחת מהאפשרויות האלה נבחרת בהתאם לערכת הצבעים שבה נעשה שימוש.

  • אם ערכת הצבעים שבה נעשה שימוש היא light או לא ידועה, מוחזר הערך המחושב של הערך הראשון.
  • אם ערכת הצבעים שבה נעשה שימוש היא dark, מוחזר הערך המחושב של הצבע השני.

מידע נוסף זמין במאמר צבעים תלויי סכימת צבעים ב-CSS באמצעות light-dark() .

תמיכה בדפדפן

  • 123
  • 123
  • 120
  • 17.5

מקור

ממשק ה-API של נעילת המסך ממצב שינה

האפשרות 'נחיתה ב-Firefox 126' היא ה-Screen Wake Lock API, תכונה נוספת שמשולבת עכשיו בחבילת Baseline החדשה. ה-API הזה מאפשר למנוע מהמכשיר לעמעם ולנעול את המסך.

מידע נוסף על השימוש בתכונה הזו זמין במאמר להישאר במצב ער עם ממשק ה-API של נעילת המסך ממצב שינה.

תמיכה בדפדפן

  • 84
  • 84
  • 126
  • 16.4

מקור

ממשק API של Compute Pressure

ה-Compute Pressure API מציע מצבים ברמה גבוהה שמייצגים את עומס המעבד (CPU) על המערכת. היא מאפשרת ליישום להשתמש במדדי החומרה הבסיסיים כדי להבטיח שהמשתמשים יוכלו לנצל את כל כוח העיבוד הזמין להם, כל עוד המערכת נמצאת בלחץ בלתי הפיך.

התכונה הזאת זמינה ב-Chrome בגרסה 125. Intel הובילה את עבודת התכנון וההטמעה של ה-API הזה, שמאפשר לאפליקציות לשיחות ועידה בווידאו לאזן באופן דינמי בין תכונות לביצועים.

קראו את מסמכי התיעוד של Compute Pressure API.

תמיכה בדפדפן

  • 125
  • 125
  • x
  • x

מקור

הכלל @starting-style

ב-Safari 17.5 יש את הכלל @starting-style. הכלל הזה ב-CSS מאפשר להחיל סגנון שהדפדפן יכול לחפש לפני שהאלמנט פתוח בדף, כנדרש לאנימציות כניסה.

הכלל @starting-style הוא אחת מהתכונות שכלולות בארבע תכונות חדשות של CSS לאנימציות כניסה ויציאה בצורה חלקה.

תמיכה בדפדפן

  • 117
  • 117
  • x
  • 17.5

מקור

גרסאות של דפדפן בטא

בגרסאות של דפדפן הבטא אפשר לראות תצוגה מקדימה של הדברים שיהיו בגרסה היציבה הבאה של הדפדפן. זה זמן נהדר לבדוק תכונות חדשות, או הסרות, שעשויות להשפיע על האתר שלכם, לפני שהעולם יקבל את הגרסה הזו. גרסאות הבטא החדשות הן Firefox 127 ו-Chrome 126. הגרסאות האלה מביאות לפלטפורמה תכונות נהדרות. כל הפרטים מופיעים בנתוני הגרסה. הנה כמה מהשינויים הבולטים.

גרסה 126 של Chrome כוללת מעברים בין תצוגות של מסמכים שונים לניווט באותו מקור. בעבר הייתם צריכים לבנות מחדש את האתר שלכם ל-SPA כדי להשתמש ב-View Migrates API. הם לא נספרים כך יותר. מעברים בין תצוגות מופעלים עכשיו כברירת מחדל לניווטים מאותו מקור. אפשר ליצור מעבר תצוגה בין שני מסמכים שונים בעלי אותו מקור.

דפדפן Firefox 127 כולל שיטות נוספות של הגדרת JavaScript — intersection(), union(), difference(), symmetricDifference(),isSubsetOf(), isSupersetOf() ו-isDisjointFrom().