דברים שעליך לדעת:
- התכונה 'תמונה בתוך תמונה' במסמך מאפשרת לכם לשלוט יותר בחלונות של תמונה בתוך תמונה.
- הצהרות CSS מוטמעות מתקנות כמה מקרים מורכבים.
- אתם יכולים לציין את ההתנהגות של קישוטים ברכיבים שמתפרסים על פני כמה שורות.
- ויש עוד הרבה אפשרויות.
קוראים לי פיט לה-פייג'. בואו נבדוק מה חדש למפתחים ב-Chrome 130.
תמונה בתוך תמונה במסמך
Picture-in-picture 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, אפשר להגדיר שחלון התמונה בתוך תמונה ייפתח תמיד במיקום ובגודל שמוגדרים כברירת מחדל, במקום להשתמש במיקום או בגודל של החלון הקודם.
// Open a Picture-in-Picture window in its default position / size.
const pipWindow = await documentPictureInPicture.requestWindow({
preferInitialWindowPlacement: true,
});
פרטים נוספים מופיעים בפוסט של פרנסואה תמונה בתוך תמונה לכל רכיב.
הצהרות מקוננות של שירות CSS
CSS nesting מאפשר קיצור של סלקטורים, קריאה קלה יותר ויותר מודולריות על ידי הטמעה של כללים בתוך כללים אחרים. CSS Nesting הוא Baseline Newly available, והוא זמין כבר כמעט שנה.
היו כמה מקרים קיצוניים שבהם התכונה לא פעלה כמו שציפינו. לדוגמה, בקטע ה-CSS הבא, צבע הרקע אמור להיות ירוק כי הוא מופיע אחרון, אבל הוא אדום.
.foo {
width: fit-content;
@media screen {
background-color: red;
}
background-color: green;
}
כדי לפתור מקרים חריגים כאלה, קבוצת העבודה של CSS הציגה את הכלל nested declarations, שמיושם ב-Chrome 130. עכשיו, אותו בלוק CSS יוצר רקע ירוק, כמו שציפינו. אם השתמשתם בהצהרות פשוטות עם כללים מקוננים, כדאי לבדוק שוב את הקוד.
במאמר של Bramus CSS nesting improves with CSSNestedDeclarations מופיע הסבר מפורט יותר.
box-decoration-break
מאפיין ה-CSS box-decoration-break מאפשר לציין איך צריך להציג את חלקי האלמנט כשהם נפרדים על פני כמה שורות, עמודות או דפים.
לדוגמה, הרכיב הזה נראה טוב כשכל הטקסט נמצא בשורה אחת.
כשהתוכן מתפצל לכמה שורות, קישוטים כמו background, box shadow, border וכו' נחתכים, ונוצר מראה די קיצוני.
כשמוסיפים את התג box-decoration-break: clone, כל קטע מוצג בנפרד, והמראה הרבה יותר נעים.
הוא לא בדיוק Baseline, אבל הוא זמין ב-Chrome וב-Firefox, ויש לו קידומת ספק ב-Safari.
.bdb-clone {
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
לפרטים נוספים, אפשר לעיין במסמכי box-decoration-break MDN ובפוסט של רייצ'ל The box-decoration-break property in Chrome 130.
ועוד!
כמובן שיש עוד הרבה.
- אחרי כמה ניסיונות כושלים, קונטיינרים של גלילה ניתנים למיקוד במקלדת סוף סוף מגיעים.
- WebGPU מקבלת מיזוג כפול של מקורות.
- וב-Web Serial מופיע מאפיין מחובר.
קריאה נוספת
המידע הזה כולל רק נקודות עיקריות. בקישורים הבאים מפורטים שינויים נוספים ב-Chrome 130.
- נתוני הגרסה של Chrome 130
- מה חדש בכלי הפיתוח ל-Chrome (130)
- עדכונים ב-Chrome 130 ב-ChromeStatus.com
- רשימת השינויים במאגר המקור של Chromium
- יומן ההפצות של Chrome
הרשמה
כדי להתעדכן, כדאי להירשם כמנויים לערוץ YouTube של Chrome Developers. כך תקבלו התראה באימייל בכל פעם שנעלה סרטון חדש.
קוראים לי פיט לה-פייג', וברגע שגרסה Chrome 131 תושק, נהיה כאן כדי לספר לכם מה חדש ב-Chrome.