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

Pete LePage

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

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

קוראים לי פיט לייפאג (Pete LePage). נצלול פנימה ונראה מה חדש למפתחים ב-Chrome 130.

תיעוד של מצב 'תמונה בתוך תמונה'

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

ממשק ה-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

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

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

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

הוספת box-decoration-break: clone מאפשרת ל-React להריץ את כל הפריימים בנפרד, וכך ליצור מראה הרבה יותר יפה.

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

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

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

ועוד.

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

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

קריאה נוספת

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

• נתוני הגרסה של Chrome 130
• מה חדש בכלי הפיתוח ל-Chrome (גרסה 130)
• עדכונים ב-ChromeStatus.com לגבי Chrome 130
• רשימת השינויים במאגר המקור של Chromium
• לוח הזמנים של הגרסאות החדשות של Chrome

להרשמה

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

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