צוות 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 הצבעות בעד הוספת סוגים נוספים כאלה, למשל, double range או autocomplete עם datalist מותאם אישית.
מספרים אקראיים אמיתיים ב-CSS
בקשה נוספת עם 10 הצבעות הייתה לקבלת מספרים אקראיים אמיתיים ב-CSS. בעבר התקבלה בקשה דומה והיה פתרון עקיף לבעיה של animation-duration אקראי.
שילוב של סגנונות בכיתות
ב-CSS נוספו כמה תכונות שהיו קיימות בעבר במעבדי CSS מקדימים – משתנים עם מאפיינים מותאמים אישית, ועכשיו גם CSS Nesting. עם זאת, מיקסינים לשימוש חוזר עדיין לא הפכו לחלק מהשפה, אבל שבעה מהמשתתפים ב-CSS Day הביעו עניין בשימוש בהם.
קבוצת העבודה בנושא CSS החליטה להתחיל לעבוד על מפרט לתכונה הזו, ואתם יכולים להוסיף את המחשבות שלכם ואת תרחישי השימוש שלכם לדיון בבעיה הזו.
סגנונות גלובליים ב-Shadow DOM
בעיה נוספת שנוצרה לגביה שרשור ארוך של דיונים על תרחישי שימוש היא הבקשה לאפשר החלה של סגנונות CSS גלובליים בתוך Shadow 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, שישה אנשים הצביעו בעד התכונה הזו, והיא הגיעה למקום האחרון ברשימת עשר התכונות המבוקשות ביותר.
האם אתם מסכימים עם עשרת המוצרים המובילים של CSS Day?
נשמח לשמוע מקהל רחב יותר על הבעיות האלה. האם אחת מהן נכללת בעשר הבעיות העיקריות שלך? אם לא, יש עוד משהו שהיית רוצה לראות ב-CSS וב-HTML? כדי להודיע לנו, אפשר למלא את הטופס הקצר הזה ואנחנו נסכם את התשובות בפוסט נוסף.