צוות Chrome היה נוכח מאוד בכנס CSS Day השנה. ניהלנו את מרכז העזרה של CSS, וענו על שאלות של המשתתפים, אבל גם השתמשנו בלוח לבן כדי לשאול את האנשים מה לדעתם עדיין חסר ב-CSS. בפוסט הזה אשתף את התוצאות של השאלה הזו, ואבקש ממך למלא את הסקר הקצר הזה כדי לספר לנו מה חסר לדעתך ב-HTML וב-CSS. האם אתם מסכימים עם המשתתפים ב-CSS Day?
עשרת הבקשות המובילות
המשתתפים התבקשו לכתוב רעיונות על פתקיות ולהוסיף אותם ללוח. אנשים יכלו גם להוסיף סטיקר כדי להצביע על רעיונות. אלו עשרת המאפיינים המובילים:
תמיכה בהוספת סגנון לקלט
זו הייתה הבקשה הפופולרית ביותר לתכונה חדשה עם 21 קולות. חשוב מאוד למצוא דרכים לעצב את הרכיבים הנפוצים האלה בממשק המשתמש באופן עקבי.
אנחנו ב-Chrome מודעים לכך שזו אחת מנקודות החולשה העיקריות של המפתחים, ואנחנו פועלים כדי ליצור פתרונות טובים יותר למפתחים. לדוגמה, רכיבים נבחרים שניתן להתאים אישית נועדו לספק דרך להביע הסכמה לשימוש בהתנהגות חדשה של עיצוב. לאחר מכן תוכלו להוסיף תמונות או עיצוב מורכב יותר לאפשרויות. היתרון של הגישה הזו הוא שהיא תאפשר חזרה לתפריט בחירת רגילה, כך שזו תהיה שיפור הדרגתי.
מוסתר באופן ויזואלי
עם 19 קולות ב-CSS Day, זו הייתה הבקשה השנייה הכי פופולרית. הבקשה היא לאפשרות להוסיף תוכן שמשמש רק קוראי מסך. יכול להיות שמדובר ברכיב HTML, שבו התוכן לא מוצג אלא רק נקרא על ידי קורא מסך.
בדרך כלל, כדי לעשות זאת יוצרים כיתה .visually-hidden כדי להסתיר את התוכן, אבל עדיין לאפשר גישה אליו לקוראי מסך.
זו בקשה פופולרית, אבל יש אנשים שלא חושבים שצריך להטמיע אותה. לפרטים נוספים, אפשר לקרוא את המאמר Visually hidden content is a hack that needs to be resolved, not enshrined ואת הדיון הזה בנושא CSS WG issue 560.
position: sticky inside overflow:hidden
הבקשה קיבלה 16 הצבעות. בשלב הזה, האפשרות position: sticky פועלת רק כשכל ההורים הם overflow: visible.
יש בעיה פתוחה משנת 2017 עם בקשה לכך, וייתכן שהיום אין צורך רב יותר בתרחיש השימוש הראשוני של הפעלת השימוש ב-overflow: hidden לניקוי ערכים צפים, אבל יש תרחישים רבים אחרים שמפורטים בשרשור.
אנימציה ל-height: auto
12 משתתפים הצביעו על כך שרוצים להעביר את האירוע לheight: auto. אנחנו שמחים לבשר שהתכונה הזו תגיע לפלטפורמת האינטרנט באמצעות המאפיין interpolate-size והפונקציה calc-size() ב-CSS.
התכונות האלה יהיו זמינות החל מ-Chrome 129.
בקרוב יפורסם פוסט עם מידע נוסף על הנושאים האלה.
סוגי קלט נוספים
ב-HTML5 יש הרבה סוגים שונים של האלמנט <input>, למשל type="email" לכתובת אימייל או type="range" לפס ההזזה של טווח.
בכנס CSS Day קיבלנו 10 קולות להוספת עוד סוגים כאלה, למשל טווח כפול או השלמה אוטומטית עם רשימת נתונים מותאמת אישית.
מספרים אקראיים אמיתיים ב-CSS
בקשה נוספת עם 10 קולות הייתה לקבלת מספרים אקראיים אמיתיים ב-CSS. בעבר ביקשו זאת ומצאו פתרון לanimation-duration אקראי.
שיעורי סגנון של Mixin
נוספו ל-CSS כמה תכונות שעד עכשיו היו זמינות רק במעבדים מראש של CSS – משתנים עם מאפיינים מותאמים אישית, ועכשיו גם CSS Nesting. עם זאת, נכסי מיקסין לשימוש חוזר עדיין לא הפכו לחלק מהשפה, אבל שבעה מהמשתתפים ב-CSS Day התעניינו בהם.
קבוצת העבודה בנושא CSS החליטה להתחיל לעבוד על מפרט לתכונה הזו, ואתם יכולים להוסיף את המחשבות והתרחישים לדוגמה שלכם לדיון בבעיה הזו.
סגנונות גלובליים ב-Shadow DOM
בעיה נוספת עם שרשור דיון גדול של תרחישים לדוגמה היא הבקשה לאפשר לסגנונות CSS גלובליים לחול ב-DOM בצל. שישה אנשים ביקשו זאת ב-CSS Day. היכולת הזו תאפשר להחיל סגנונות איפוס גלובליים גם על רכיבי אינטרנט, וקובצי CSS בודדים יפעלו בכל הרכיבים של האתר. כדאי לעיין בסיכום הזה של תרחישים לדוגמה, ולהודיע לנו אם גם אתם רוצים שתהיה לכם אפשרות כזו.
חלוקת יחידות מעורבות
הוגשה הצעה ל-Interop 2024 שבה התבקשה היכולת לחלק ביחידות מעורבות – לדוגמה calc(100vw / 1px). הנושא נחשב רחב מדי ל-Interop 2024, אבל הרבה מפתחים, כולל שישה אנשים ב-CSS Day, רוצים לראות את ההטמעה הזו.
nth-letter
ב-CSS יש כמה רכיבי פסאודו שפועלים כאילו עטפתם span סביב קטע תוכן כלשהו. לדוגמה, סופר-הרכיב ::first-letter מטרגט את האות הראשונה בשורה הראשונה של מאגר הפריטים שאליו הוא מיושם.
האפשרות ::nth-letter לא מופיעה ברשימה הזו, וביקשתם אותה כמעט עשרים שנה, כך שאנחנו יודעים שזו בקשה ארוכת טווח של מפתחי אתרים.::nth-letter בכנס CSS Day, שישה אנשים הצביעו על התכונה הזו, והיא נכנסה למקום האחרון ברשימת 10 התכונות שהכי רוצים.
האם אתם מסכימים עם עשרת המובילים ב-CSS Day?
נשמח לשמוע מקהלים רחבים יותר על הבעיות האלה. האם אחת מהן נכללת ב-10 הבעיות המובילות שלך? אם לא, יש משהו נוסף שהיית רוצה לראות ב-CSS וב-HTML? כדי להודיע לנו, תוכלו למלא את הטופס הקצר הזה, ונסכם את התשובות בפוסט נפרד.