דברים שעליך לדעת:
- עכשיו אפשר לציין אזור חיתוך באמצעות צילום אזור כשמשתמשים ב-
getDisplayMedia()
כדי לצלם את הכרטיסייה הנוכחית. - אפשר לכתוב תחביר של שאילתת מדיה באמצעות אופרטורים מתמטיים להשוואה.
- מעברים של רכיבים משותפים מתחילים תקופת ניסיון למקור.
- ויש עוד הרבה.
קוראים לי Pete LePage. נצלול פנימה ונראה מה חדש למפתחים בגרסה 104 של Chrome.
ציון אזור חיתוך באמצעות צילום אזור
getDisplayMedia()
מאפשר ליצור שידור וידאו מהכרטיסייה הנוכחית. אבל יש מקרים שבהם רוצים לצלם רק חלק קטן מהכרטיסייה, ולא את כולה. עד עכשיו, הדרך היחידה לעשות זאת הייתה לחתוך באופן ידני כל פריים של הסרטון.
באמצעות 'צילום אזור', אפליקציית אינטרנט יכולה להגדיר את האזור הספציפי במסך שאותו היא רוצה לשתף. לדוגמה, ב-Google Slides תוכלו להישאר בתצוגת העריכה הרגילה ולשתף את השקף הנוכחי.

כדי להשתמש בו, בוחרים את הרכיב שרוצים לשתף ויוצרים CropTarget
חדש על סמך הרכיב הזה. לאחר מכן, מתחילים את שיתוף המסך על ידי שיחה אל getDisplayMedia()
. לאחר מכן תוצג למשתמש בקשה להעניק הרשאה לשיתוף המסך. לאחר מכן, קוראים ל-track.cropTo()
ומעבירים את cropTarget
שנוצר קודם.
const elem = document.querySelector("#main");
const cropTarget = await CropTarget.fromElement(elem);
const stream = await navigator.mediaDevices
.getDisplayMedia({preferCurrentTab: true});
const [track] = stream.getVideoTracks();
await track.cropTo(cropTarget);
לפרטים נוספים, אפשר לעיין במאמר שיתוף כרטיסיות משופר באמצעות 'צילום אזור'.
שאילתות מדיה קלות יותר עם תחביר והערכה ברמה 4
שאילתות מדיה הן קריטיות לעיצוב רספונסיבי, ומאפשרות להגדיר סגנונות ספציפיים לגדלים שונים של חלון תצוגה. אבל אם אתם לא משתמשים בהם כל יום, התחביר יכול להיות קצת מבלבל.
ב-Chrome 104 נוספה תמיכה בשאילתות מדיה – רמה 4 – תחביר והערכה, שמאפשרת לכתוב שאילתות מדיה באמצעות אופרטורים רגילים של השוואה מתמטית.
לכן, במקום להשתמש בקוד כזה כדי לציין שדה ראייה בגודל של 400 עד 600 פיקסלים:
@media (min-width: 400px) and (max-width: 600px) {
/* Styles for viewports between 400px and 600px. */
}
אפשר לכתוב אותו כך:
@media (400px <= width <= 600px) {
/* Styles for viewports between 400px and 600px. */
}
בנוסף לכך שהסינטקס החדש מאפשר להשתמש בשאילתות מדיה קצרות יותר, הוא גם יכול להיות מדויק יותר. השאילתות min-
ו-max-
כוללות את כל הערכים, לדוגמה: min-width: 400px
בודקת רוחב של 400px ומעלה. התחביר החדש מאפשר לכם להביע בצורה ברורה יותר את המשמעות שלכם.
@media (width < 400px) {
/* Styles for viewports less than 400px. */
}
@media (400px <= width <= 600px) {
/* Styles for viewports between 400px and 600px. */
}
@media (601px <= width <= 1000px) {
/* Styles for viewports between 601px and 1000px. */
}
הוא כבר נתמך ב-Firefox, ויש פלאגין PostCSS שכותב מחדש את התחביר החדש בתור התחביר הישן, כדי להבטיח תאימות לדפדפנים.
פרטים נוספים זמינים במאמר של רייצ'ל, תחביר חדש לשאילתות מדיה של טווח ב-Chrome 104.
'מעברים של רכיבים משותפים' מתחילים תקופת ניסיון חדשה למקור
אפליקציות ספציפיות לפלטפורמה בדרך כלל כוללות מעברים חלקים בין תצוגות שונות, הן נראות יפה, הן שומרות על ההקשר של המשתמש ומספקות חוויית שימוש מהירה יותר. לעומת זאת, באינטרנט, ניווט מלא יכול להיות חמור ולפעמים הוא גורם למסך ריק לזמן קצר. באפליקציה עם דף אחד, המצב יכול להיות טוב יותר, אבל עדיין קשה לבצע מעברים.
החל מגרסת המקור לניסיון החדשה ב-Chrome 104, אפשר להשתמש במעברים של רכיבים משותפים כדי לספק מעברים חלקים, בין אם הם מתרחשים בין מסמכים (לדוגמה, באפליקציה עם כמה דפים) ובין אם הם מתרחשים בתוך מסמך (לדוגמה, באפליקציה עם דף אחד).
הנה דוגמה כללית לאופן שבו מעברים פועלים באפליקציה עם דף יחיד. בפונקציית הניווט, מקבלים את תוכן הדף החדש ובודקים אם יש תמיכה במעברים. אם אין תמיכה, מעדכנים את הדף ללא מעבר. אם כן, יוצרים transition()
ומפעילים עליו את start()
כדי להודיע ל-API שהשינוי ב-DOM הושלם.
async function spaNavigate(path) {
// Get new page content.
const data = await fetchPage(path);
// Check if transitions are supported, if not, use classic method.
if (!document.createDocumentTransition) {
await updateDOM(data);
return;
}
// Create transition
const transition = document.createDocumentTransition();
// Start transition, let API know when DOM change is complete.
transition.start(() => updateDOM(data));
}
מתחת לפני השטח, מעברים של רכיבים משותפים מתבססים על אנימציות CSS, כך שתוכלו לשנות את האפקט מהחלשה לכניסה, להחלקה או לכל אפקט אחר שתרצו.
זהו רק קצה הקרחון, אז כדאי לצפות בסרטון של ג'ייק בנושא הוספת מעברים בין דפים לאינטרנט או לקרוא את הסבר המפורט.
ועוד.
כמובן שיש עוד הרבה.
- כשקובצי cookie מוגדרים עם מאפיין
Expires
אוMax-Age
מפורש, הערך יוגבל עכשיו ל-400 ימים לכל היותר. - יש שיפורים ב-API להצגת מודעות בחלונות במסכים מרובים.
- נכס ה-CSS
overflow-clip-margin
מציין עד כמה תוכן האלמנט יכול להופיע לפני שהוא ייחתך.
קריאה נוספת
כאן מפורטות רק חלק מהנקודות העיקריות. בקישורים שבהמשך מפורטים שינויים נוספים בגרסה 104 של Chrome.
- מה חדש בכלי הפיתוח ל-Chrome (גרסה 104)
- תכונות שהוצאו משימוש והוסרו ב-Chrome 104
- עדכונים ב-ChromeStatus.com לגבי Chrome 104
- רשימת השינויים במאגר המקור של Chromium
- לוח הזמנים של הגרסאות החדשות של Chrome
להרשמה
כדי להתעדכן, כדאי להירשם לערוץ YouTube למפתחי Chrome, ותקבלו התראה באימייל בכל פעם שנעלה סרטון חדש.
קוראים לי פיט לייפ (Pete LePage), ואחרי שגרסת Chrome 105 תפורסם, אספר לכם מה חדש ב-Chrome.