מה חדש בגרסה 130 של Chrome

Pete LePage

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

אני פיט להפיג'. אנחנו מזמינים אותך לבחון מה חדש אצל המפתחים ב-Chrome 130.

מסמך במצב 'תמונה בתוך תמונה'

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

חלון 'תמונה בתוך תמונה' ב-Spotify

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

כדי להשתמש בה, צריך לבקש חלון חדש של מסמך בחלון בחלון. הערך המוחזר של promise מומר לאובייקט JavaScript של חלון 'תמונה בתוך תמונה'. לאחר מכן, משתמשים בו כדי להוסיף את התוכן שלכם לחלון.

async function openDPiP() {
  const player = document.querySelector("#player");
  const pipWindow = await documentPictureInPicture
.requestWindow();
  pipWindow.document.body.append(player);
}

pipButton.addEventListener('click', openDPiP);

באמצעות המאפיין החדש preferInitialWindowPlacement אפשר להורות ל-Chrome לפתוח תמיד את החלון של 'תמונה בתוך תמונה' במיקום ובגודל שמוגדרים כברירת מחדל, במקום להשתמש שוב במיקום או בגודל של החלון הקודם.

// Open a Picture-in-Picture window in its default position / size.
const pipWindow = await documentPictureInPicture.requestWindow({
  preferInitialWindowPlacement: true,
});

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

הצהרות מוערמות ב-CSS

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

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

.foo {
    width: fit-content;

    @media screen {
        background-color: red;
    }

    background-color: green;
}

כדי לפתור מקרים קיצוניים כאלה, קבוצת העבודה של CSS הציגה את הכלל של הצהרות בתצוגת עץ, שמוטמע בגרסה 130 של Chrome. עכשיו, אותו בלוק CSS יוצר רקע ירוק, כצפוי. אם שילבתם הצהרות חשופות עם כללים בתוך כללים, עליכם לבדוק את הקוד שוב.

במאמר של Bramus, שיפור ההטמעה של CSS באמצעות CSSNestedDeclarations, מוסבר בהרחבה על הנושא.

box-decoration-break

המאפיין box-decoration-break של CSS מאפשר לציין איך מקטעים של רכיב יעובדו כשהם מפוזרים במספר שורות, עמודות או דפים.

ללא מעברי שורה

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

מעברי שורה עם פלחים

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

מעברי שורה עם יצירת עותק

הוספת box-decoration-break: clone מאפשרת להציג כל קטע בנפרד, וכך ליצור מראה הרבה יותר יפה.

הוא לא בדיוק Baseline, אבל הוא זמין ב-Chrome וב-Firefox, וב-Safari הוא מופיע עם קידומת של הספק.

.bdb-clone {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

למידע נוסף, אפשר לעיין במסמכי התיעוד של box-decoration-break ב-MDN ובפוסט של רחל המאפיין box-decoration-break ב-Chrome 130.

ועוד.

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

קריאה נוספת

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

להרשמה

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

קוראים לי פיט לייפ (Pete LePage), ואחרי שגרסת Chrome 131 תפורסם, נעדכן אתכם כאן לגבי מה שחדש ב-Chrome.