תאריך פרסום: 3 ביוני 2026
ברוכים הבאים לסיכום החודשי של Baseline. במאי 2026, כמה תכונות חדשות של CSS, מאפייני אירועים ותוספות ל-API הפכו לזמינות ב-Baseline Newly available, בעוד שיחידות CSS, מאפייני אינטראקציה של משתמשים ופסאודו-מחלקות הגיעו ל-Baseline Widely available, לצד עדכונים חשובים מקהילת המפתחים.
סקר בנושא מצב ה-CSS בשנת 2026
הסקר השנתי של קהילת האינטרנט לבדיקת המצב הגיע: הסקר State of CSS 2026 פתוח עכשיו. השנה, המארגנים השקיעו מאמץ מיוחד בשיפור הסקר, והתמקדו בתכונות שהכי חשובות למפתחים בעידן של קידוד בעזרת AI. ספקי דפדפנים עוקבים מקרוב אחרי התוצאות האלה כדי לתת עדיפות לתוכניות הפיתוח שלהם ולטפל בנקודות הכאב של המפתחים. חשוב להביע את דעתכם ולשתף את החוויה שלכם בנוגע להתפתחות של CSS לפני שהסקר ייסגר ב-1 ביולי.
תכונות חדשות שזמינות ב-Baseline
התכונות שמופיעות בקטע הזה נתמכות החל ממאי 2026 בסט הליבה של הדפדפנים, ועכשיו הן זמינות כ-Baseline חדש.
שאילתות בנוגע לסגנון מאגר
השאילתות של רכיבי Container כבר לא מוגבלות לגודל. בעזרת שאילתות סגנון, עכשיו אפשר להחיל סגנונות על רכיבים על סמך המאפיינים המותאמים אישית של רכיב Container הורה. כך אפשר ליצור רכיבים מודולריים מאוד שיכולים להתאים את העיצוב או הסגנון שלהם על סמך המיקום ההקשרי שלהם, בלי להסתמך על מבני מחלקה מורכבים.
מידע נוסף זמין בדף העזר של MDN בנושא @container.
:open pseudo-class
כדי לעצב אלמנטים עם מצבים פתוחים וסגורים – כמו <dialog> ו-<details> – היה צריך קודם לבדוק מאפיינים או לנהל מחלקות. פסאודו-המחלקות :open מפשטות את התהליך הזה, כי הן מתאימות לאלמנטים האלה רק כשהם במצב פתוח, וכך מאפשרות ליצור קוד CSS נקי יותר ודקלרטיבי יותר.
אפשר לקרוא על זה בדף MDN בנושא פסאודו-מחלקת open.
ToggleEvent.source
כשעובדים עם Popover API, חשוב מאוד להגיב לשינויים במצב. המאפיין source של הממשק ToggleEvent מחזיר את רכיב הבקרה שהפעיל את פעולת ההחלפה של חלון הקופץ. כך אפשר לזהות את המקור של האירוע ולתאם אינטראקציות מורכבות עם ממשק המשתמש.
מידע נוסף זמין במסמכי התיעוד של MDN בנושא ToggleEvent.source.
מלון אחד (image-rendering)
המאפיין image-rendering CSS מאפשר לכם לשלוט באלגוריתם של שינוי הגודל שמשמש לשינוי הגודל של תמונות. האפשרות הזו שימושית במיוחד לפיקסל ארט, לתמונות ברזולוציה נמוכה או לקודי QR, שבהם חשוב להימנע מאינטרפולציה מטושטשת ולשמור על קנה מידה חד ומפוקסל.
כאן מוסבר איך משתמשים בו בדף MDN בנושא עיבוד תמונות.
text-decoration-skip-ink: all
לפעמים קשה לקרוא קווים תחתונים שעוברים דרך אותיות עם חלקים תחתונים. האפשרות text-decoration-skip-ink: auto מדלגת על הדיו רק כשהיא מצטלבת, אבל אם מגדירים אותה ל-all, הקו התחתון מדלג על כל הגליפים בלי קשר להצטלבות, וכך מקבלים יותר שליטה על האסתטיקה של הטיפוגרפיה.
פרטים נוספים זמינים במדריך MDN בנושא text-decoration-skip-ink.
SharedWorker
SharedWorker API מספק תהליך עובד ברקע ייעודי שאפשר לגשת אליו מכמה הקשרים של גלישה, כמו חלונות, כרטיסיות או מסגרות iframe שונים באותו מקור. האפשרות הזו שימושית לשיתוף מצב, לניהול חיבורים או לתיאום משימות ברקע בין גבולות של כרטיסיות.
אפשר לעיין בתיעוד של MDN בנושא SharedWorker.
תכונות Baseline שזמינות במקומות רבים
התכונות הבאות הפכו לזמינות באופן נרחב ב-Baseline, כלומר הן תואמות לשימוש בפרויקטים שלכם.
lh יחידת אורך
היחידה היחסית lh תואמת לגובה השורה המחושב של הרכיב שבו היא משמשת. כך קל יותר לשנות את הגודל של רכיבים כמו תגי סמלים או הדגשות ברקע, כך שיתאימו בדיוק לגובה של שורת טקסט.
מידע נוסף זמין במאמר בנושא יחידות אורך ב-MDN.
rlh יחידת אורך
בדומה ליחידה lh, היחידה rlh מייצגת את גובה השורה, אבל באופן ספציפי של רכיב הבסיס (<html>). כך אפשר ליצור קצב אנכי עקבי בכל הדף, בלי קשר לגודל הגופן המקומי או לשינויים בגובה השורה.
מידע נוסף זמין במאמר בנושא יחידות אורך במאגר המידע של MDN.
Navigator.userActivation
הרבה ממשקי API לאינטרנט (כמו הפעלת סרטונים, חלונות קופצים או גישה ללוח) דורשים אינטראקציה של המשתמש לפני שאפשר להפעיל אותם. המאפיין Navigator.userActivation מחזיר אובייקט שמכיל מידע על מצב ההפעלה הנוכחי וההיסטורי של המשתמש בחלון, ומאפשר לסקריפטים לוודא שהתרחשה תנועת משתמש.
מידע נוסף על השימוש ב-API הזה זמין בדף MDN בנושא Navigator.userActivation.
clip-path
מאפיין ה-CSS clip-path מאפשר ליצור אזור חיתוך שמגדיר איזה חלק מאלמנט צריך להיות גלוי. באמצעות צורות בסיסיות (כמו עיגולים, אליפסות או מצולעים) או נתיבי SVG, אפשר ליצור עיצובים ומעברים מושכים בלי להסתיר תוכן שגולש מהמסגרת.
פרטים נוספים על ההטמעה זמינים בדף של clip-path ב-MDN.
:user-invalid pseudo-class
בניגוד ל-:invalid, שמחיל סגנון ברגע שדף נטען (מה שלעתים קרובות מוביל לחוויית משתמש לא טובה), פסאודו-המחלקות :user-invalid מתאימות רק לרכיבי טופס לא תקינים אחרי שהמשתמש קיים איתם אינטראקציה. כלומר, אפשר להציג משוב על אימות הטופס אחרי שהמשתמש עוזב את השדה.
מידע נוסף על האופן שבו הוא פועל זמין בתיעוד של MDN בנושא :user-invalid.
זה הכול
אם פספסנו משהו שקשור ל-Baseline, נשמח לדעת כדי שנוכל לכלול אותו במהדורה הבאה. אם יש לכם שאלות או שאתם רוצים לשלוח משוב על Baseline, אתם יכולים להגיש בעיה בכלי למעקב אחר בעיות.