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

Adriana Jara

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

קוראים לי Adriana Jara. נצלול פנימה ונראה מה חדש למפתחים ב-Chrome 121.

עדכוני 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 מרחוק (לדוגמה, מסכה: url(masks.svg#star)).

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

עדכונים ב-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 מאפשרת להתאים טעינה מראש ספקולטיבית גם אם פרמטרים של שאילתות בכתובות URL משתנים. כותרת התגובה No-Vary-Search של HTTP מצהירה שאפשר להתעלם מחלקים מסוימים או מכל החלקים של שאילתת כתובת URL למטרות התאמה. אפשר להצהיר שהסדר של מפתחות הפרמטרים של השאילתה לא צריך למנוע התאמות, שפרמטרים ספציפיים של שאילתות לא צריכים למנוע התאמות או שרק פרמטרים ידועים מסוימים של שאילתות צריכים לגרום לחוסר התאמה.

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

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

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

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

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

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

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

הבעיה הזו נפתרת באמצעות Element Capture API, שמאפשר לכם לטרגט את הרכיב שרוצים לשתף.

צילום מסך של רכיב היעד ללא רשימת תפריטים נפתחת בתצוגה.
François לא רואה את הרשימה הנפתחת של Elad.

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

ועוד.

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

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

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

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

קריאה נוספת

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

להרשמה

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

קוראים לי Adriana Jara, ואחרי שגרסת Chrome 122 תושק, אספר לכם מה חדש ב-Chrome!