אם הייתי מחלק את התפתחות ה-CSS לקטגוריות, עברנו הרבה מעבר לימים שבהם פשוט ביקשנו רדיוס גבול כדי להרגיש שאנחנו חיים בעתיד. כרגע אנחנו חיים ברגע שבו הפלטפורמה מעניקה לנו כלים שלא רק מצווים את השכבה הוויזואלית, אלא מגדירים מחדש באופן מהותי את האופן שבו אנו מעצבים ממשקים. חשבתי שלא ניתן לעלות על מספר התכונות שהוכרזו בשנת 2024. מעולם לא טעיתי בשמחה כל כך.
"CSS Wrapped 2025" של צוות Chrome אינו רק רשימה של תכונות; זהו מניפסט לרשת דינמית ומולדת. כמי שבילה כמה שנים בתיעוד האבולוציות הללו - מהגדרת תקופות "CSS5" ועד למורכבויות של כלי עזר מודרניים לפריסה - אני מוצא את עצמי מסתכל על סיכום השנה בתחושה עצומה של התרגשות. אנו רואים שינוי לעבר "ארגונומיה אופטימלית" ו"אינטראקציות מהדור הבא" המאפשרות לנו להפסיק להילחם בקוד ולהתחיל לפסל ממשקים במצבם הטבעי.
במאמר זה, אתה יכול למצוא מבט מקיף על התכונות הבולטות מהדוח של Chrome, שנצפה מבעד לעדשת הניסויים האחרונים שלי ותקוות לעתיד הפלטפורמה.
מהפכת הרכיבים: לבסוף, בחירה מקורית הניתנת להתאמה אישית
במשך שנים, הסתמכנו על ספריות JavaScript כבדות לסגנון נפתחות, "בעיה בת עשרות שנים" שהפלטפורמה פתרה סוף סוף. כפי שפרטתי בצלילה העמוקה שלי לתוך ההיסטוריה של הבחירה הניתנת להתאמה אישית (ומאמרים קשורים), זו הייתה דרך ארוכה שכללה ממשק משתמש פתוח, שמות של אופניים כמו
התוספת הפנטסטית לאפשר תוכן עשיר בתוך אפשרויות, כגון תמונות או דגלים, היא מהנה מאוד. אנחנו יכולים ליצור כל מיני אפשרויות בימינו:
הדגמה: יצרתי הדגמה של Poké-adventure שמראה כיצד האלמנט החדש
ראה את העט בחירה הניתנת להתאמה אישית עם תמונות בתוך האפשרויות ואת התוכן שנבחר [מזלג] על ידי utilitybend.
הדגמה: מבט מקיף על עיצוב הבחירה עם אלמנטים פסאודו בלבד.
ראה את העט בחירה הניתנת להתאמה אישית עם אלמנטים פסאודו בלבד [מזלג] על ידי utilitybend.
הדגמה: לחלופין, אתה יכול להעלות אותו מדרגה עם הדגמה זו של בחירת תפריט באמצעות optgroups.
ראה את העט תפריט בחירה בפועל עם optgroups [forked] לפי utilitybend. תכונה זו לבדה מסמנת שינוי מסיבי באופן שבו נבנה טפסים, צמצום התלות והחובות הטכניים. סמני גלילה ומותו של קרוסלת JavaScript יצירת קרוסלות הייתה היסטורית נקודת חיכוך בין מפתחים ללקוחות. לקוחות אוהבים אותם, מפתחים חוששים מה-JavaScript הנדרש כדי להפוך אותם לנגישים ובעלי ביצועים. הגעתם של ::scroll-marker ו-:scroll-button() פסאודו-אלמנטים משנה את הדינמיקה הזו לחלוטין. תכונות אלו מאפשרות לנו ליצור נקודות ניווט וכפתורי גלילה אך ורק עם CSS, המקושרים באופן מקורי למיכל הגלילה. כפי שכתבתי בבלוג שלי, זו הייתה אהבה בשקופית הראשונה. היכולת ליצור מחוון פונקציונלי לחלוטין ונגיש ללא שורה אחת של JavaScript היא לא רק נוחה; זה ניצחון לביצועים. יש כמה דאגות נגישות סביב תכונה זו, ולמרות שהן תקפות, ייתכן שיש דרך עבורנו המפתחים לגרום לזה לעבוד. הדבר הטוב הוא שכל השינויים האלה בממשק המשתמש הופכים את זה להרבה יותר קל ממניפולציה מותאמת אישית של DOM וגרירת תגי אריה, אבל אני סוטה... כעת נוכל לקבץ סמנים באופן אוטומטי באמצעות scroll-marker-group ולעצב את הכפתורים באמצעות מיקום עוגן כדי למקם אותם בדיוק היכן שאנו רוצים.
.carousel { overflow-x: אוטומטי; scroll-marker-group: אחרי; /* יוצר את המיכל עבור נקודות */
/* צור את הכפתורים */ &::scroll-button(inline-end),&::scroll-button(inline-start) { תוכן: " "; מיקום: מוחלט; /* השתמש במיקום עוגן כדי למרכז אותם */ עמדה-עוגן: --קרוסלה; top: anchor(center); }
/* צור את הטושים על הילדים */ div { &::scroll-marker { תוכן: " "; רוחב: 24 פיקסלים; רדיוס הגבול: 50%; סמן: מצביע; } /* הדגש את הסמן הפעיל */ &::scroll-marker:target-current { רקע: לבן; } } }
הדגמה: הניסוי שלי ביצירת קרוסלה אך ורק מתוך HTML ו-CSS, תוך שימוש במיקום עוגן כדי למקם את הכפתורים.
ראה את קרוסלת העט טהור HTML ו-CSS [מזלג] על ידי utilitybend.
הדגמה: גרסה מחודשת של סליידר חלקלק של Webshop באמצעות attr() כדי למשוך תמונות רקע באופן דינמי לתוך הסמנים.
ראה את הגרסה המחודשת של ה-Pen Webshop החלקה ב-CSS [forked] על ידי utilitybend. שאילתות מדינה: דבר דביק תקוע? דבר סנאפי נחטף? במשך זמן רב, חסרה לנו היכולת לדעת אם "דבר דביק תקוע" או אם "פריט חטוף נתקע" מבלי להסתמך על פריצות של IntersectionObserver. Chrome 133 הציג שאילתות של מצב גלילה, המאפשר לנו לבצע שאילתות על מצבים אלה באופן הצהרתי. על ידי הגדרת סוג-מיכל: scroll-state, כעת נוכל לעצב ילדים על סמך אם הם תקועים, נקרעים או עולים על גדותיהם. זהו שיפור מסיבי של "איכות חיים" שחיכיתי לו בכיליון עיניים מאז יום ה-CSS 2023. הוא אפילו התפתח מאוד מאז שאנחנו יכולים לראות גם את כיוון המגילה, מקסים! לדוגמא פשוטה: סוף סוף נוכל להחיל צל על כותרת רק כאשר היא נצמדת למעשה לחלק העליון של נקודת התצוגה: .header-container { סוג מיכל: scroll-state; מיקום: דביק; למעלה: 0;
כותרת { מעבר: תיבת צל 0.5 שניות קלות החוצה; /* השאילתה בודקת את מצב המיכל */ @container scroll-state(תקוע: למעלה) { box-shadow: rgba(0, 0, 0, 0.6) 0px 12px 28px 0px; } } }
הדגמה: כותרת דביקה שמחילה צל רק כשהיא באמת תקועה.
עיין בכותרות Pen Sticky עם שאילתת מצב גלילה, ובדוק אם האלמנט הדביק תקוע [מזלג] על ידי utilitybend.
הדגמה: רשימה בנושא פוקימון שמשתמשת בשאילתות מצב גלילה בשילוב עם מיקום עוגן כדי להעביר מסגרת על הדמות שצולמה כעת.
ראה את השאילתה Pen Scroll-state כדי לבדוק איזה פריט מוצמד עם CSS, גרסת פוקימון [מזלג] על ידי utilitybend. ארגונומיה אופטימלית: היגיון ב-CSS הקטע "ארגונומיה אופטימלית" של CSS Wrapped מדגיש תכונות שהופכות את זרימות העבודה שלנו לאינטואיטיביות יותר. שלוש תכונות בולטות כמשנות לאופן בו אנו כותבים לוגיקה:
if() הצהרות סוף סוף אנחנו מקבלים תנאים ב-CSS. הפונקציה if() פועלת כמו אופרטור שליש עבור גיליונות סגנונות, ומאפשרת לנו להחיל ערכים המבוססים על מדיה, תמיכה או שאילתות סגנונות בשורה. זה מפחית את הצורך בחסימות @media מילוליות עבור שינויים במאפיינים בודדים. @function functions סוף סוף נוכל להעביר קצת היגיון למקום אחר, וכתוצאה מכך כמה קבצים נקיים יותר, תכונה אמיתית של איכות חיים. sibling-index() ו-sibling-count()פונקציות ספירת העצים הללו פותרות את הבעיה של אנימציות מדהימות או פריטי סגנון המבוססים על גודל רשימה. כפי שחקרתי ב-Styling אחים עם CSS מעולם לא היה קל יותר, זה מבטל את הצורך בקוד קשיח של מאפיינים מותאמים אישית (כמו --index: 1) ב-HTML שלנו.
דוגמה: חישוב פריסות כעת נוכל לכתוב נוסחאות מתמטיות תמציתיות. לדוגמה, הפתעה של אנימציה עבור קלפים הנכנסים למסך הופכת להיות טריוויאלית: .card-container > * { אנימציה: לחשוף 0.6 שניות קלות קדימה; /* אין יותר משתני --אינדקס ידניים! */ animation-delay: calc(sibling-index() * 0.1s); }
אפילו התנסיתי בשימוש בפונקציות הללו יחד עם טריגונומטריה כדי למקם פריטים במעגל מושלם ללא JavaScript.
הדגמה: אנימציות קלפים מדהימות באופן דינמי.
ראה את קלפי Pen Stagger באמצעות sibling-index() [forked] על ידי utilitybend.
הדגמה: הצבת פריטים במעגל מושלם באמצעות מדד אחים, ספירת אחים ותכונת CSS @function החדשה.
ראה את העט העיגול באמצעות מדד האחים, ספירת האחים ופונקציות [מזלג] על ידי utilitybend. רשימת המטלות שלי ב-CSS: תכונות שאני לא יכול לחכות לנסות בזמן שהייתי עסוק בפיסול נבחרים ומעברים, הדוח "CSS Wrapped 2025" עמוס בכל טוב אחר שעדיין לא הספקתי להפעיל ב-CodePen. אלה נמצאים גבוה ברשימה שלי לניסויים הבאים שלי: שאילתות מיכל מעוגנת השתמשתי ב-CSS Anchor Positioning עבור הכפתורים בהדגמת הקרוסלה שלי, אבל "CSS Wrapped" מדגישהתפתחות של זה: שאילתות מיכל מעוגנת. זה פותר בעיה שהייתה לכולנו עם טיפים: אם הדפדפן הופך את תיאור הכלים מלמעלה למטה בגלל אילוצי מקום, ה"חץ" לעתים קרובות מצביע לכיוון הלא נכון. בעזרת שאילתות מיכל מעוגן (@container anchored(fallback: flip-block)), נוכל לעצב את האלמנט על סמך מיקום ה-fallback שהדפדפן בחר בפועל. קבוצות מעבר של תצוגה מקוננת מעברי צפייה היו מהפכה, אבל הם הגיעו עם פשרה ספציפית: הם שיטחו את עץ האלמנטים, שלעתים קרובות שבר טרנספורמציות תלת-ממדיות או הצפת: קליפ. תמיד הייתה לי הרגשה שחסר משהו, ואולי זו רק התשובה. על ידי שימוש ב-view-transition-group: nearest, נוכל סוף סוף לקנן קבוצות מעבר זו בתוך זו. זה מאפשר לנו לשמור על אפקטי גזירה או סיבובי תלת מימד במהלך מעבר - דבר שהיה בלתי אפשרי בעבר מכיוון שהאלמנטים הונפו עד לרמה העליונה. .card img { view-transition-name: תמונה; view-transition-group: הקרוב ביותר; /* שמור את זה מקונן! */ }
טיפוגרפיה וצורות לבסוף, הארגונום שבי מגרד לנסות את Text Box Trim, שמבטיח להסיר את הרווח הלבן המעצבן הזה מעל ומתחת לתוכן הטקסט (המוביל) כדי להשיג סוף סוף יישור אנכי מושלם. ולצד היצירתי, צורת פינה ופונקציית shape() פותחות פריסות לא מלבניות, ומאפשרות "ריבועים" ונתיבים מורכבים המגיבים למשתני CSS. עם זאת, אני לא יכול לחכות כדי שיהיה לי עיצוב מלא של squircles! עתיד מלא תקווה אנו עדים לעולם שבו CSS הופך להיות מסוגל לטפל בהיגיון, מצב ואינטראקציות מורכבות שהיו שייכים בעבר ל-JavaScript. תכונות כמו moveBefore (שימור מצב DOM עבור iframes/סרטונים) ו-attr() (שימוש בסוגים מעבר למחרוזות לצבעים ורשתות) מחזקים עוד יותר את המציאות הזו. בעוד שחלק מהתכונות הללו ניסיוניות או ספציפיות לכרום, אין להכחיש את המומנטום. עלינו לקוות לתמיכה מתמשכת בכל הדפדפנים באמצעות יוזמות כמו Interop כדי להבטיח שהיכולות הללו יהפכו לקו הבסיס. עם זאת, מנועי דפדפן חשובים באותה מידה כמו שיש את כל התכונות המדהימות האלה ב-"Chrome first". יש לדון, להתעסק ולבדוק את התכונות החדשות הללו לפני שיגיעו אי פעם לדפדפנים. זה רגע פנטסטי להיכנס ל-CSS. אנחנו כבר לא רק מסמכי סטיילינג; אנו מייצרים יישומים דינמיים, ארגונומיים וחזקים עם ערכת כלים מקורית שהיא חזקה מאי פעם. בואו נצא לדרך עם העידן החדש הזה ונפיץ את הבשורה. זהו CSS Wrapped!
