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

הוא לא בדיוק 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 לגרסה 130 של Chrome
• רשימת השינויים במאגר המקור של Chromium
• לוח הזמנים של הגרסאות החדשות של Chrome

להרשמה

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

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