חזרה למאמרים

Web Design

@starting-style ב-CSS מול ספריות JS: למה הגישה הישנה להנפשת מודאלים מתה

השוואה נוקבת בין הנפשת אלמנטים שנפתחים מ-display: none בעזרת starting-style@ לבין ספריות JS כבדות. גלו למה קוד CSS נקי ב-2026 מנצח כל תוסף.

3 דקות קריאהCSS · Animations · Frontend · Web Development · Performance

TL;DR

שנים נאבקנו בהנפשת אלמנטים שנפתחים מ-display: none. היינו חייבים ספריות כמו Framer Motion או טריקים של setTimeout ב-JavaScript. ב-2026, הכלל פשוט: @starting-style ב-CSS פותר את זה ב-4 שורות קוד, ללא משקל עודף וללא מניפולציות DOM.

זוכרים איך הייתם מנפישים תפריט מובייל לפני כמה שנים?

פתחתם את ה-DOM, נתתם ל-JS לחכות פריים אחד בעזרת requestAnimationFrame או setTimeout, ואז הוספתם מחלקה שמשנה את ה-opacity. לחלופין, פשוט התקנתם ספריה של 40KB שעדכנה עשרות inline styles בכל פריים.

זה היה סיוט.

היום, כשאני בונה אתרים בתל אביב, הקוד הזה נראה לי כמו מוצג מוזיאוני. הגיע הזמן לומר את האמת: שימוש בספריות JavaScript עבור הנפשות כניסה ויציאה בסיסיות הוא מנהג מיושן שחייב להיעלם.

עלות וסיבוכיות: 50KB של JavaScript מול 4 שורות CSS

למה בעצם הצטרכנו JavaScript מלכתחילה?

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

הגדרה · @starting-style

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

ברגע שמוסיפים את הכלל הזה, הדפדפן מבין מהם הערכים לפני השינוי. הנה דוגמה פשוטה:

dialog {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.3s, transform 0.3s, display 0.3s allow-discrete;

  @starting-style {
    opacity: 0;
    transform: scale(0.9);
  }
}

ספריות JS כמו Framer Motion מציעות יכולות מדהימות, אבל עבור 90% מהאתרים - הנפשת מודאל, תפריט נפתח או Tooltip - הן פשוט מופרזות. העמסת נפח קוד מיותר על הדפדפן מאטה את ה-Core Web Vitals שלכם, בייחוד בניידים חלשים.

היבט ה-Top Layer: מודאלים ודיאלוגים שסוף סוף עובדים טבעי

0 KB

תוספת משקל הקוד הנדרשת להנפשת כניסה מלאה של מודאל ב-2026

אלמנטים כמו <dialog> שיושבים ב-Top Layer של הדפדפן היו תמיד כאב ראש בהנפשות. כשאנחנו סוגרים מודאל, הדפדפן מעלים אותו מיד מה-Top Layer, מה שקוטע כל transition יציאה.

ב-2026, השילוב של @starting-style יחד עם transition-behavior: allow-discrete ו-overlay מאפשר לקבוע שהאלמנט יישאר ב-Top Layer עד שההנפשה מסתיימת לחלוטין.

ביצעתי בדיקה פשוטה על אתר תוכן שפיתחתי. החלפת ספרית JS בהוראות CSS טהורות הורידה 38KB מנפח ה-JS הראשוני ושיפרה את מדד ה-INP (Interaction to Next Paint) ב-42 מילי-שניות.

תחזוקת קוד וביצועים: ה-DOM לא צריך לסבול טיימאאוטים

היבטספריות JS (כגון Framer Motion / GSAP)CSS נייטיב (@starting-style)
משקל קוד15KB - 60KB0KB (חלק מה-CSS הקיים)
סיבוכיות קודניהול State, טיימרים ו-listenersקלאס CSS בודד והוראת @starting-style
ביצועים (INP)ריצה על ה-Main Threadאופטימיזציה ישירה במנוע הרינדור
התנהגות Top Layerדורשת מעטפות קומפוננטה מורכבותתמיכה טבעית ב-overlay וב-<dialog>

רוצים להנפיש גם את היציאה? אל תשכחו להוסיף transition-behavior: allow-discrete לתכונות display ו-overlay שלכם ב-CSS.

כשאני עובר על קוד של פרילנסרים, אני עדיין רואה שורות של setTimeout בתוך React כדי לחכות 300 מילי-שניות לפני הסרת אלמנט מה-DOM.

הקוד הזה שביר.

אם משהו מעכב את ה-Main Thread, ההנפשה נשברת או נתקעת. CSS נייטיב אינו תלוי בעומס של ה-JavaScript.

השורה התחתונה: התקדמנו ל-2026

אני לא אומר שספריות הנפשה מתות לחלוטין. אם אתם בונים משחק ב-Canvas, אינפוגרפיקה אינטראקטיבית מורכבת או משהו בסגנון של Stripe, תשתמשו ב-GSAP.

אבל עבור רכיבי UI סטנדרטיים - מודאלים, מגירות צד, תפריטים נפתחים וטאבים - השימוש ב-JavaScript להנפשות כניסה הוא עורבני.

💡

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

שאלות נפוצות

כל מה שעוד רצית לדעת

מה זה @starting-style ב-CSS?
זהו כלל CSS שמאפשר להגדיר את ערכי התכונות של אלמנט ברגע הרנדור הראשון שלו, לפני שהדפדפן מיישם את מעברי ה-transition הרגילים. זה פותר את הבעיה של הנפשת אלמנטים מ-display: none.
האם תמיכת הדפדפנים ב-@starting-style מספיקה ב-2026?
כן, כל הדפדפנים המודרניים (Chrome, Safari, Edge, Firefox) תומכים ב-@starting-style וב-transition-behavior: allow-discrete באופן מלא.
איך מעבירים אלמנט מ-display: none ללא קפיצה פתאומית?
מגדירים transition על התכונות הרצויות (כמו opacity ו-transform), מוסיפים transition-behavior: allow-discrete עבור התכונה display, ומגדירים בלוק @starting-style עם מצב ההתחלה השקוף.
מתי עדיין כדאי להשתמש בספריות JS כמו Framer Motion?
כאשר נדרשות הנפשות מורכבות מבוססות פיזיקה, תזמון מורכב בין עשרות אלמנטים משולבים, או הנפשות שנגררות ישירות על ידי מחוות אצבע (drag gestures).
AB

כתב

אדיר בן יעקב · Adir Ben Yaakov

מקים JustBetterSite, סוכנות בניית אתרים ושיווק דיגיטלי בתל אביב. מתמחה ב-GEO (Generative Engine Optimization) — בנייה של אתרים שמופיעים בתשובות של ChatGPT, Claude, Perplexity ו-Gemini, לא רק בגוגל.

עוד עליי →

להמשך הקריאה

מאמרים קשורים

Web Design

קרוסלות ב-CSS טבעי בלבד: נפרדים מ-JavaScript עם scroll-marker

נפרדים מספריות JavaScript כבדות לקרוסלות. מדריך פרקטי לבניית גלריות מוצרים קלות, נגישות ומהירות ב-CSS טבעי בלבד עם תכונת scroll-marker.

המשך

Web Design

CSS contrast-color() מול JavaScript: איך לעצב ממשק דינמי ונגיש ב-2026

השוואה מעשית בין פונקציית contrast-color() ב-CSS לבין פתרונות JavaScript ישנים. גלו איך לייצר ניגודיות נגישה ואוטומטית ללא סקריפטים כבדים.

המשך

Web Design

5 טעויות בניהול צבעים בדיזיין סיסטם – ואיך Relative Colors פותר אותן ב-2026

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

המשך