חדש בגרסה 121 של Chrome

Adriana Jara

דברים שעליך לדעת:

אני אדריאנה ג'ארה. אנחנו מזמינים אותך לבחון מה חדש אצל המפתחים בגרסה 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.
אלי משתמש באפליקציה של צד שלישי בשיחת ועידה בווידאו עם François.

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

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

Element Upload API (ממשק ה-API) של צילום רכיבים פותר את הבעיה הזו ומאפשר לטרגט את הרכיב שרוצים לשתף.

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

בקופה יוצרים שידור וידאו מכל רכיב כדי לקבל דוגמאות קוד ונרשמים לגרסת המקור לניסיון של ElementCapture

ופעולות נוספות.

כמובן שיש עוד הרבה.

  • לשיטות resizeBy() ו-resizeTo(), חלק מ-Document Picture-in-Picture API, נדרשת עכשיו תנועת משתמש.

  • אפשר לפתוח באופן פרוגרמטי את בוחר האפשרויות של הרכיב <select> באמצעות ה-method showPicker() של HTMLSelectElement.

  • scope_extensions נמצא בגרסת מקור לניסיון, הוא מאפשר להרחיב את ההתנהגות של אפליקציית אינטרנט כך שתכלול מקורות אחרים, אם יש הסכם בין המקור הראשי של אפליקציית אינטרנט לבין המקורות המשויכים.

קריאה נוספת

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

להרשמה

כדי להישאר מעודכנים, אפשר להירשם ערוץ YouTube למפתחי Chrome, ואתה תקבל התראה באימייל בכל פעם שנשיק סרטון חדש.

יו אדריאנה ג'ארה, וברגע ש-Chrome 122 יושק, אני כאן כדי לספר לך מה חדש ב-Chrome!