דברים שעליך לדעת:
- מוסיפים מגע ייחודי לטקסט באמצעות אנימציה של
font-palette
ועדכוני CSS נוספים. - יש שיפורים ב-Speculation Rules API.
- אפשר לנסות את Element Recording API בגרסת המקור לניסיון.
- ויש עוד הרבה עוד.
אני אדריאנה ג'ארה. אנחנו מזמינים אותך לבחון מה חדש אצל המפתחים בגרסה 121 של Chrome.
עדכונים לשירותי CSS.
נתחיל עם עדכוני CSS:
הנכסים scrollbar-color
ו-scrollbar-width
זמינים עכשיו. בעזרתם תוכלו להתאים אישית את סרגלי הגלילה ולשנות את הצבע והרוחב שלהם, כפי שבטח ניחשתם.
המאפיין font-palette
מאפשר לבחור לוח צבעים ספציפי להצגת גופן צבע. הנכס הזה תומך עכשיו באנימציה, כך שהמעבר בין לוחות הצבעים הופך למעבר חלק בין שני לוחות הצבעים שנבחרו.
פסאודו הרכיבים ::spelling-error
ו::grammar-error
מאפשרים לכם להתאים אישית את הצבעים לשגיאות איות ודקדוק, להדגיש מילים באיות שגוי בצבעי רקע או קישוטים אחרים, ולהטמיע בדיקת איות מותאמת אישית עם מראה משולב יותר.
שיפרנו את התממת ה-CSS עבור SVG. זוהי הודעת המשך לתמיכה המשופרת במסכות CSS ב-Chrome 120, שנוספה תמיכה חדשה ב-mask editing ל-SVG (מספר מסכות, וגם mask-mode
, mask-composite
, mask-position
ו-mask-repeat
). בנוסף, יש עכשיו תמיכה במסכות SVG מרחוק (לדוגמה, mask: url(masks.svg#star)
).
תיקון: בגרסה קודמת של המאמר הזה הוזכרה הוספת תמיכה בתנאים של supports()
ל-@import
, אבל לא הייתה תמיכה כזו. השינוי נכלל בגרסה 122 של Chrome.
עדכונים לממשק ה-API של Speculation Rules API
אתרים יכולים להשתמש ב-Speculation Rules API כדי להגדיר ל-Chrome באופן פרוגרמטי אילו דפים לעבד מראש, וכך לשפר את חוויית המשתמש על ידי צמצום זמן הניווט בדפים.
עכשיו ה-API תומך בכללים למסמכים: הם הרחבה לתחביר של כללי ההשערה, שמאפשר לדפדפן להשיג את רשימת כתובות ה-URL לטעינה ספקולטיבית מאלמנטים בדף. כללי מסמכים עשויים לכלול קריטריונים שעבורם אפשר להשתמש בקישורים האלה. יחד עם השדה eagerness החדש, תוכלו לאחזר מראש או לעבד מראש קישורים באופן אוטומטי בדפים באופן מיידי, כשמעבירים את העכבר מעליהן או מעבירים את העכבר כלפי מטה.
דוגמה לכללי מסמך:
{
"prerender": [
{"where": {"and": [
{"href_matches": "/*"},
{"not": {"href_matches": "/logout"}},
{"not": {"selector_matches": ".no-prerender"}}
]}}
]
}
שינוי נפרד מאפשר לציין כללי ספקולציות באמצעות כותרת התגובה Speculation-Rules HTTP. הכותרת היא חלופה לשימוש ברכיבי <script>
בתוך השורה. הערך של הכותרת הזו צריך להיות כתובת URL שמפנה למשאב טקסט עם סוג MIME של "application/speculationrules+json"
. הכללים של המשאב יתווספו לקבוצת הכללים של המסמך.
בנוסף, הרמז No-Vary-Search
מאפשר התאמה של שליפה מראש (prefetch) על סמך ספקולציות, גם אם הפרמטרים של השאילתות בכתובת ה-URL משתנים. כותרת התשובה No-Vary-Search
של HTTP מצהירה שאפשר להתעלם מחלקים מסוימים של שאילתה של כתובת URL או מכולם למטרות התאמה. היא יכולה להצהיר שהסדר של המפתחות של הפרמטרים של שאילתות לא אמור למנוע התאמות, שפרמטרים ספציפיים של שאילתה לא אמורים למנוע התאמות או שרק פרמטרים מוכרים מסוימים של שאילתות צריכים לגרום לחוסר התאמה.
מידע נוסף על השינויים האלה זמין במאמר שיפורים ב-Speculation Rules API.
גרסת המקור לניסיון של Element Capture API
Element Upload API זמין בגרסת המקור לניסיון. ה-API הזה מאפשר לכם לצלם ולהקליט רכיב HTML ספציפי. הוא הופך צילום של כל הכרטיסייה לתיעוד של עץ משנה DOM ספציפי, ומתעד רק צאצאים ישירים של רכיב היעד. כלומר, הוא חותך ומסיר גם תוכן שמוסתר וגם תוכן מוסתר.
אפליקציה לשיחות ועידה בווידאו שמאפשרת להטמיע אפליקציות של צד שלישי ב-iframe היא דוגמה למצב שבו Element Upload API יכול להיות שימושי. בתרחיש כזה, כדאי לתעד את ה-iframe הזה כסרטון ולשדר אותו למשתתפים מרוחקים.
![צילום מסך של שיחת ועידה בווידאו ב-Chrome.](https://developer.chrome.com/static/docs/web-platform/element-capture/image/1.png?authuser=5&hl=he)
שימו לב שאפשר להשתמש בתכונה צילום אזור כדי לעשות זאת, אבל במקרה כזה, אם תוכן מסוים, כמו רשימה נפתחת, מוצג מעל התוכן שנבחר, התפריט הנפתח הזה יהיה חלק מההקלטה.
![צולמה צילום מסך של רשימה נפתחת.](https://developer.chrome.com/static/docs/web-platform/element-capture/image/3.png?authuser=5&hl=he)
Element Upload API (ממשק ה-API) של צילום רכיבים פותר את הבעיה הזו ומאפשר לטרגט את הרכיב שרוצים לשתף.
![צילום מסך של רכיב היעד ללא רשימה נפתחת.](https://developer.chrome.com/static/docs/web-platform/element-capture/image/4.png?authuser=5&hl=he)
בקופה יוצרים שידור וידאו מכל רכיב כדי לקבל דוגמאות קוד ונרשמים לגרסת המקור לניסיון של ElementCapture
ופעולות נוספות.
כמובן שיש עוד הרבה.
לשיטות
resizeBy()
ו-resizeTo()
, חלק מ-Document Picture-in-Picture API, נדרשת עכשיו תנועת משתמש.אפשר לפתוח באופן פרוגרמטי את בוחר האפשרויות של הרכיב
<select>
באמצעות ה-methodshowPicker()
שלHTMLSelectElement
.scope_extensions
נמצא בגרסת מקור לניסיון, הוא מאפשר להרחיב את ההתנהגות של אפליקציית אינטרנט כך שתכלול מקורות אחרים, אם יש הסכם בין המקור הראשי של אפליקציית אינטרנט לבין המקורות המשויכים.
קריאה נוספת
הנושאים האלה כוללים רק חלק מהעדכונים העיקריים. בקישורים הבאים ניתן למצוא מידע על שינויים נוספים בגרסה 121 של Chrome.
- מה חדש בכלי הפיתוח ל-Chrome (121)
- הפסקת השימוש ב-Chrome 121 והסרות שלו
- עדכונים ל-ChromeStatus.com ל-Chrome 121
- רשימת השינויים במאגר המקור של Chromium
- יומן הגרסאות של Chrome
להרשמה
כדי להישאר מעודכנים, אפשר להירשם ערוץ YouTube למפתחי Chrome, ואתה תקבל התראה באימייל בכל פעם שנשיק סרטון חדש.
יו אדריאנה ג'ארה, וברגע ש-Chrome 122 יושק, אני כאן כדי לספר לך מה חדש ב-Chrome!