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

Adriana Jara

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

שמי אדריאנה ג'ארה. בואו נראה מה חדש למפתחים ב-Chrome 121.

עדכוני CSS.

נתחיל עם עדכונים לשירות ה-CSS:

הנכסים scrollbar-color ו-scrollbar-width זמינים עכשיו. בעזרתם אפשר להתאים אישית סרגלי גלילה ולשנות את הצבע והרוחב שלהם, כפי שבטח ניחשת.

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

פסאודו-אלמנטים ::spelling-error ו-::grammar-error מאפשרים לכם להתאים אישית את הצבעים של שגיאות האיות והדקדוק, להדגיש מילים שאויתו בצורה שגויה עם צבעי רקע או קישוטים אחרים, וליישם בדיקת איות מותאמת אישית עם מראה משולב יותר.

שיפרנו את האנונימיזציה של CSS ל-SVG. זוהי בהמשך לתמיכה המשופרת במסיכת CSS ב-Chrome 120, ונוספה תמיכה חדשה באנונימיזציה ב-SVG (כמה מסכות, וגם mask-mode, mask-composite, mask-position ו-mask-repeat). בנוסף, יש עכשיו תמיכה במסכות SVG מרחוק (לדוגמה, מסכה: url(masks.svg#star)).

תיקון: גרסה קודמת של המאמר הזה הזכירה הוספה של תמיכה בתנאים של supports() ל-@import, וזו לא הייתה התמיכה. השינוי נכלל בגרסה 122 של Chrome.

עדכונים לגבי Speculation Rules API

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

עכשיו ה-API כולל תמיכה בכללי מסמכים: הם הרחבה לתחביר של כללי הספקולציות, שמאפשר לדפדפן לקבל את רשימת כתובות ה-URL לטעינה ספקולטיבית מאלמנטים בדף. כללי המסמך עשויים לכלול קריטריונים שעבורם אפשר להשתמש בקישורים האלה. השילוב הזה עם השדה החדש "eagerness" מאפשר לכם לשלוף מראש קישורים בדפים או לעבד אותם מראש באופן אוטומטי, באמצעות העברת העכבר או העכבר כלפי מטה.

הנה דוגמה לכללים במסמך:

{
  "prerender": [
    {"where": {"and": [
       {"href_matches": "/*"},
       {"not": {"href_matches": "/logout"}},
       {"not": {"selector_matches": ".no-prerender"}}
     ]}}
  ]
}

שינוי נפרד מאפשר לציין כללי ספקולציות באמצעות כותרת תגובת ה-HTTP של כללי ספקולציות. הכותרת היא חלופה לשימוש ברכיבי <script> בתוך השורה. הערך של הכותרת הזו חייב להיות כתובת URL שמפנה למשאב טקסט עם סוג MIME מסוג "application/speculationrules+json". הכללים של המשאב יתווספו לקבוצת הכללים של המסמך.

כמו כן, ההינט No-Vary-Search מאפשר התאמה של שליפה מראש (prefetch) שמבוססת על ספקולציות, גם אם הפרמטרים של השאילתה בכתובת ה-URL משתנים. כותרת התגובה No-Vary-Search של HTTP מצהירה שאפשר להתעלם מחלקים או מחלקים של השאילתה בכתובת URL לצורך התאמה. הוא יכול להצהיר שסדר המפתחות של פרמטרים של שאילתות לא אמור למנוע התאמות, שפרמטרים ספציפיים של שאילתה לא יכולים למנוע התאמות, או שרק פרמטרים מסוימים של שאילתה אמורים לגרום לחוסר התאמה.

מידע נוסף על השינויים האלה זמין במאמר שיפורים ב-Speculation Rules API.

גרסת מקור לניסיון של Element Capture API

Element capture API זמין בגרסת מקור לניסיון. ה-API הזה מאפשר לכם לתעד ולתעד רכיב HTML ספציפי. הפונקציה הופכת תיעוד של הכרטיסייה כולה לתיעוד של עץ משנה ספציפי ב-DOM, שמתעדים רק צאצאים ישירים של רכיב היעד. במילים אחרות, הכלי חותך ומסיר גם תוכן סתומים וגם תוכן נסתר.

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

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

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

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

Element Capture API פותר את הבעיה הזו בכך שהוא מאפשר לך למקד לרכיב שברצונך לשתף.

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

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

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

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

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

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

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

קריאה נוספת

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

להרשמה

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

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