תכונות מעניינות שנוספו לדפדפני אינטרנט במהלך מאי 2024 בגרסאות היציבות ובגרסאות הבטא.
גרסאות יציבות של דפדפנים
במאי 2024, הגרסאות Firefox 126, Safari 17.5 ו-Chrome 125 הפכו לגרסאות יציבות. בפוסט הזה נסקור את התכונות החדשות שנוספו לפלטפורמת האינטרנט.
מיקום עוגן ב-CSS
גרסה 125 של Chrome כוללת מיקום של עוגן CSS. כך אפשר לקשור רכיב שמוגדר במיקום מוחלט לרכיב אחד או יותר בדף (העוגנים) באופן דקלרטיבי, בלי להשתמש ב-JavaScript. מיקום העוגנים פועל בצורה יעילה כשאפשר לגלול בעוגנים. תרחיש לדוגמה: מיקום חלון קופץ, כמו תיאור כלים, לצד הרכיב שהפעיל אותו, או תפריט בחירה עם רשימת האפשרויות של החלון הקופץ.
מידע נוסף זמין במאמר השקה: CSS anchor positioning API.
פונקציות של ערכים מדורגים ב-CSS – round()
, mod()
ו-rem()
mod()
ו-rem()
גרסה 125 של Chrome כוללת גם את הפונקציות של ערכי המדרגות, כלומר הפונקציות האלה זמינות עכשיו בגרסת Baseline. פונקציות הערך המדורג, round()
, mod()
ו-rem()
, משנות ערך נתון בהתאם ל'ערך של שלב' אחר.
מידע נוסף זמין במאמר פונקציות מתמטיות של ערכי CSS מדורגים זמינות עכשיו ב-Baseline 2024.
הפונקציה light-dark()
פונקציית הצבע light-dark()
ב-CSS, שנמצאת ב-Safari 17.5, מצטרפת גם היא לתכונות החדשות שזמינות בגרסה הבסיסית.
light-dark()
היא פונקציה שמקבלת שני ארגומנטים, ושניהם חייבים להיות <color>
. המערכת בוחרת אחת מהן בהתאם לערכת הצבעים שבה נעשה שימוש.
- אם ערכת הצבעים שבה נעשה שימוש היא
light
או לא ידועה, הערך המחושב של הערך הראשון מוחזר. - אם ערכת הצבעים שבה נעשה שימוש היא
dark
, המערכת מחזירה את הערך המחושב של הצבע השני.
מידע נוסף זמין במאמר צבעים תלויים-ערכת-צבעים ב-CSS באמצעות light-dark() .
Screen Wake Lock API
ב-Firefox 126 מופיע Screen Wake Lock API, תכונה נוספת שזמינה עכשיו ב-Baseline Newly Available. ממשק ה-API הזה מספק דרך למנוע מהמכשיר לעמעם את המסך ולנעול אותו.
איך משתמשים בתכונה הזו באמצעות Screen Wake Lock API
Compute Pressure API
ב-Compute Pressure API יש מצבים ברמה גבוהה שמייצגים את עומס המעבד במערכת. היא מאפשרת להטמעה להשתמש במדדי החומרה המתאימים כדי להבטיח שהמשתמשים יוכלו לנצל את כל כוח העיבוד שזמין להם, כל עוד המערכת לא נמצאת בלחץ בלתי נסבל.
התכונה הזו זמינה ב-Chrome 125. Intel הובילה את תהליך העיצוב וההטמעה של ה-API הזה, שיאפשר לאפליקציות לשיחות ועידה בווידאו לאזן באופן דינמי בין תכונות לביצועים.
התיעוד של Compute Pressure API
הכלל @starting-style
כלל @starting-style
נכלל בגרסה 17.5 של Safari. כלל ה-at-rule הזה ב-CSS מאפשר לכם להחיל סגנון שהדפדפן יכול לחפש לפני שהרכיב נפתח בדף, לפי הצורך לצורך אנימציות כניסה.
הכלל @starting-style
הוא אחת מהתכונות שמפורטות במאמר ארבע תכונות CSS חדשות ליצירת אנימציות חלקות של כניסה ויציאה.
גרסאות בטא של דפדפנים
גרסאות בטא של דפדפנים נותנות לכם תצוגה מקדימה של תכונות שייכללו בגרסה היציבה הבאה של הדפדפן. זו הזדמנות מצוינת לבדוק תכונות חדשות או הסרות שעשויות להשפיע על האתר שלכם, לפני שהן יהיו זמינות לכולם. הגרסאות החדשות של גרסת הבטא הן Firefox 127 ו-Chrome 126. במהדורות האלה נוספו לפלטפורמה תכונות רבות ומועילות. כל הפרטים מפורטים בהערות למהדורה. ריכזנו כאן כמה מהשינויים הבולטים.
גרסה 126 של Chrome כוללת מעברים בין תצוגות במסמכים שונים במעברים באותו מקור. בעבר, כדי להשתמש ב-View Transitions API, הייתם צריכים לתכנן מחדש את האתר כ-SPA. הם לא נספרים כך יותר. מעברים בין תצוגות מופעלים עכשיו כברירת מחדל בניווטים מאותו מקור. אפשר ליצור מעבר תצוגה בין שני מסמכים שונים מאותו מקור.
גרסה 127 של Firefox כוללת שיטות נוספות של JavaScript Set – intersection()
, union()
, difference()
, symmetricDifference()
, isSubsetOf()
, isSupersetOf()
ו-isDisjointFrom()
.