פורסם: 27 במרץ 2026
ב-Chrome 147 מוצגות העברות תצוגה בהיקף של רכיב, תכונה שמאפשרת להתחיל העברת תצוגה בעץ משנה של ה-DOM על ידי קריאה ל-Element.startViewTransition().
התכונה הזו מאפשרת להפעיל כמה מעברים בין תצוגות בו-זמנית, לקנן מעברים בין תצוגות שנמצאים בעיצומם ולפתור בעיות של שכבות עם תוכן position: fixed, וכל זאת תוך שמירה על האינטראקטיביות של שאר הדף.
מה השתנה?
מאז שהודענו על המוכנות של התכונה לבדיקות מפתחים ב-Chrome 140, שיתפנו פעולה עם הקהילה ועם קבוצת העבודה של CSS כדי לסיים את הפרטים, במיוחד לגבי התנהגויות ברירת המחדל:
- כברירת מחדל, שורשי ההיקף משתתפים בעצמם.
- מעברים בתצוגה עם היקף מכילים באופן אוטומטי את הפסאודו שלהם שמוטמעים בהם, באמצעות קבוצות מוטמעות של מעברים בתצוגה.
- הפסאודו
::view-transition-group-children()במעבר תצוגה עם היקף גזירה גוזם אוטומטית את התוכן שלו אם רכיב הבסיס של היקף הגזירה גוזם את הגלישה שלו. - כשמשתמשים במעברי תצוגה ברמת הרכיב, המאפיינים
contain: layoutו-view-transition-scope: allמוחלים אוטומטית על שורש ההיקף במהלך המעבר.
אחרי העדכונים האלה, מעברים בין תצוגות בהיקף של רכיב זמינים בגרסה היציבה של Chrome מגרסה 147.
הדגמות
ערבוב רשימות
בדמו הזה אפשר לערבב את הפריטים בכל רשימה. אפשר גם להחליף את המיקומים של הרשימות בלחיצה על הלחצן במרכז.
הדגמה חיה
הקלטת הדגמה
הסיבה לכך היא שנעשה שימוש במעברי תצוגה בהיקף רכיב, ולכן שתי הרשימות יכולות להריץ את מעברי התצוגה של הערבוב בו-זמנית. אפשר גם להתחיל את מעבר התצוגה החיצוני, שמחליף את המיקומים של הרשימות, בזמן שהפריטים ברשימה עדיין עוברים ארגון מחדש.
הטיול שלי לפטגוניה
הדמו My Patagonia Trip מדגים מעברים בין תצוגות בהיקף רכיב. הדמו הזה מבוסס על הסרטון של הקמפיין 'חוויית משתמש באינטרנט, בדמיון מחודש'.
משתמשים בתפריטים הנפתחים כדי לסנן את הפריטים ברשת. כדי להוסיף פריטים לרשימת הפריטים שנבחרו שמופיעה בסרגל הצד, לוחצים על הלחצן הוספה בכל פריט ברשת.
הדגמה חיה
כדי לראות את ההדגמה המלאה, פותחים את My Patagonia Trip בכרטיסייה נפרדת.
הקלטת הדגמה
ההדגמה משתמשת במעברי תצוגה בהיקף רכיב בשלושה מקומות:
- רשת הפריטים כשמסננים אותם.
- הפריטים ברשת כשמוסיפים אותם לרשימת הפריטים שנבחרו.
- סרגל הצד שבו מוצגת רשימת הפריטים שנבחרו.
לקריאת המדריך
כדי ללמוד הכול על מעברים בתצוגה שמוגבלים לרכיבים, קראו את המדריך. במאמר מוסבר איך מטמיעים מעברים בין תצוגות בהיקף של רכיב, מפורטים פרטים נוספים ומוצגים עוד הדגמות.