עיצוב של פקדי טפסים כמו הרכיב <select> דווח במשך שנים כבעיה מרכזית של מפתחים, ואנחנו עובדים על פתרון. למרות שהעבודה הזו מורכבת ולקח הרבה זמן להגיע לתוצאה הנכונה, אנחנו קרובים מאוד להשקת התכונה הזו. גרסה של רכיב הבחירה שניתן להתאים אישית נמצאת באופן רשמי בשלב 2 ב-WHATWG, עם עניין רב בדפדפנים שונים ואב טיפוס שתוכלו לבדוק מ-Chrome Canary 130.
אנחנו מזמינים אותך לנסות אותו ולשלוח לנו משוב
מוודאים שהגרסה של Chrome Canary שמותקנת במכשיר מעודכנת לגרסה 130, ושה-feature flag של תכונות פלטפורמת האינטרנט הניסיוניות מופעל. כדי להפעיל את הדגל הזה, עוברים אל chrome://flags בסרגל הכתובות ומפעילים את #experimental-web-platform-features. אחרי שתעשו את זה, תוכלו לראות את ההדגמות של Codepen בפוסט הזה. אפשר גם לעיין באוסף Codepen הזה כדי לראות את כולם במקום אחד.
אתם יכולים להשתמש בטופס הזה כדי לשלוח משוב על התכונה. זה ייקח רק שלוש דקות!
בואו נצלול לתכונות של ה-API לבחירה בהתאמה אישית, שמבוסס על תג ה-HTML הקיים לבחירה.
הצטרפות ל-<select> החדש
כדי להביע הסכמה להתנהגות החדשה, צריך להשתמש במאפיין ה-CSS appearance גם בלחצן הבחירה שבדף וגם בבורר. כדי להביע הסכמה, צריך להגדיר את appearance: base-select ברכיב <select> וב-::picker(select).
::picker(select) הוא רכיב פסאודו חדש שסוכן המשתמש מספק, והוא חל רק על רכיבי <select> שהצטרפו להתנהגות החדשה באמצעות appearance: base-select. הרכיב המדומה הזה של הבורר הוא החלונית הקופצת שמופעלת על ידי לחצן הבחירה הבסיסי. אפשר להביע הסכמה לשניהם, כמו שמוצג בקוד הבא:
select,
::picker(select) {
appearance: base-select;
}
אתם יכולים להפעיל רק את הכפתור שמוצג בדף, אבל אתם לא יכולים להפעיל רק את החלונית הקופצת של הכלי לבחירת אמוג'י בלי להפעיל את הכפתור שמוצג בדף. השדה ::picker(select) נוצר רק אחרי שמחילים את appearance: base-select על <select>.
עכשיו אפשר להתאים אישית את הרכיב שנבחר. התפריט החדש שניתן להתאמה אישית כולל כמה סגנונות שמוגדרים כברירת מחדל ונראים אותו דבר בדפדפנים ובמערכות הפעלה שונות. כך נראה רכיב select מותאם אישית כברירת מחדל בהשוואה לרכיב select הקיים ב-Chrome ב-macOS:
פירוט החלקים
אחרי שנכנסים למצב החדש של רכיב select שניתן להתאמה אישית, הרכיבים החדשים שאתם יכולים לגשת אליהם כוללים:
- selectedoption: משקף את ה-HTML הפנימי של האפשרות שנבחרה כרגע.
- option::before: מכיל סימן וי שמציין את האפשרות שנבחרה כרגע כברירת מחדל לנגישות (האפשרות הזו עשויה להשתנות).
- ::picker(select): חלון קופץ שמכיל את כל התוכן מחוץ ל-button בתוך רכיב select שניתן להתאמה אישית.
אפשר לעצב כל חלק של הרכיב select. לדוגמה, אפשר להוסיף תוכן שרירותי לא אינטראקטיבי בתוך רכיבי <option>, לעצב את הכפתור שמשולב בדף ופותח את התפריט הנפתח של הבחירה, ולעצב את רשימת האפשרויות בתפריט הנפתח (::picker(select)).
אפשר גם לעצב את button, להוסיף חץ משלכם ולהוסיף תוכן שרירותי בתוך כל אחד מהרכיבים ומסביב להם. בנוסף להוספת תוכן, אתם יכולים להסתיר כל אחד מהרכיבים החדשים האלה ומהסגנונות שמוגדרים כברירת מחדל. לדוגמה, אם אתם לא רוצים שיופיע סימן וי ברכיב המדומה ::before של האפשרות, אתם יכולים להשתמש ב-CSS הבא.
/* Remove the default checkmark from the selected option */
option::before {
display: none;
}
יכול להיות מספר בלתי מוגבל של רכיבים בתוך רכיב ה-select, אבל הדפדפן יקבץ את כל מה שמחוץ לרכיב <button> לרכיב המדומה ::picker(select), שמתנהג כמו חלון קופץ שמעוגן ללחצן. ה<button> הזה מחליף את המצב של ::picker(select). אפשרויות ורכיבים אחרים שנמצאים ישירות בתוך הרכיב select יועברו אל ::picker(select), או שאפשר להוסיף רכיב wrapper משלכם למטרות עיצוב. גם הרכיב הזה ימוקם בתוך הרכיב המדומה ::picker(select).
<select>
<button>
<selectedoption></selectedoption>
</button>
// Everything else that will go into the ::picker(select) popover
</select>
הרכיב החדש <select> שניתן להתאמה אישית משתמש בפונקציונליות של popover ושל מיקום עוגן. הוא מבוסס על שתי הטכנולוגיות הבאות. זה אומר שרשימת האפשרויות הנפתחת בתוך רכיב select פועלת כחלון קופץ שמעוגן ללחצן הטריגר שפותח את רכיב select.
אפשר להשתמש במיקום של עוגן כדי לעצב את החלון הקופץ הזה של ::picker(select) (כולל עיגון שלו לאלמנטים אחרים). מודל התוכן הזה גם מאפשר לסגנונות של אנימציה בשכבה העליונה לפעול עם רשימת האפשרויות כדי להוסיף אנימציה לאפקטים של כניסה ויציאה.
שיפור הרכיב הקיים <select>
בעבר, צוות Chrome עבד על הרעיון של רכיב <selectlist>. בפוסט הזה מתוארת התכונה הזו, שעוצבה מחדש כדי להשתמש שוב ברכיב <select> הקיים.
אחד היתרונות העיקריים של שימוש חוזר ברכיב <select> הקיים הוא היכולת לשפר בהדרגה את רכיב ה-HTML הבסיסי. בהשוואה לרכיב חדש לגמרי, שימוש חוזר ב-<select> עדיין יציג תוכן משמעותי בדף. בדוגמה הבאה מוצגת הבחירה המותאמת אישית לעומת מה שמשתמש בדפדפן לא נתמך יראה:
option מוצג בגרסת ברירת המחדל של רכיב הבחירה.עיצוב בסיסי
השינויים יכולים להיות פשוטים, כמו סגנון חזותי של הרכיב שנבחר. לדוגמה, כדי לעדכן את סגנונות הכפתורים, את סגנונות הריחוף והמיקוד או את הרקע של אפשרויות הבחירה. אחרי שמביעים הסכמה באמצעות appearance: base-select, אפשר להחיל כל CSS שרוצים על החלקים של הבחירה.
כדי להתאים אישית את החץ, מוסיפים כפתור וחץ משלכם בתוך הרכיב select.
<select>
<button>
<selectedoption></selectedoption>
<span>
// Arrow here
</span>
</button>
// Everything else that will go into the ::picker(select) popover
</select>
אחר כך מעצבים את החץ:
/* style the arrow */
button span {
/* arrow styles */
transition: rotate 0.2s;
}
/* adjust arrow styles when the picker is open */
select:open button span {
rotate: -180deg;
}
תוכן מורכב בתוך האפשרויות
אפשר להוסיף תוכן ולעצב אותו מעבר למחרוזות בתוך הרכיבים של <option> ב-<select>. דוגמה בסיסית היא הוספת תמונות של דגלים לצד שמות של מדינות בתפריט נפתח. כדי לעשות את זה, מוסיפים רכיב תמונה לצד הטקסט של האפשרות.
<option value="france">
<img src="img/flag_of_france.svg" alt="" />
<span>France</span>
</option>
דוגמה מורכבת יותר יכולה לכלול תמונות פרופיל, שמות ומידע חלופי שיעזרו לכם להחליט איזה פריט לבחור בתפריט הנפתח.
<option value="eur">
<img src="euro-flag.png" alt="" />
<div class="currency">
<div class="currency-short">EUR</div>
<div class="currency-long">Euro</div>
</div>
<div class="symbol" aria-hidden="true">€</div>
</option>
עיצוב האפשרות שנבחרה
יכול להיות שתרצו שהאפשרות שנבחרה תוצג במצב שנבחר באופן שונה מאיך שהיא מוצגת בתפריט הנפתח. דוגמה לכך היא ממשק המשתמש של Gmail, שבו התווית מוסרת לאחר בחירת האפשרות כדי לחסוך מקום. כדי לעשות את זה, צריך להוסיף את הרכיב <selectedoption> לעיצוב. ה-<option> מכיל את כל תגי העיצוב הבאים:
<option value="reply-all">
<img class="material-symbol" src="material-symbol-reply.png">
<span class="text">Reply all</span>
</option>
עכשיו צריך להחיל את display: none על .text בתוך <selectedoption>' כדי להסתיר את תוכן הטקסט ולהציג רק את הסמל:
selectedoption .text {
display: none;
}
אפשרויות אינטראקטיביות
עם שליטה מלאה על הסגנון של ::picker(select), אפשר להוסיף לדמו הקודם אינטראקטיביות במעבר עם העכבר ובמיקוד. בהדגמה הזו, הפונקציה החדשה calc-size() משמשת להנפשת הרוחב של הכלי לבחירת צבעים, כך שיוצגו הסמלים או הרוחב המלא של האפשרויות כשמעבירים את העכבר מעל או אם לאפשרות הבחירה יש אפשרות עם focus-visible.
/* base styles when picker is open but not interacted with */
::picker(select) {
width: var(--icon-width);
transition: width 0.5s;
}
/* animate the text in on hover & focus */
::picker(select):hover,
select:has(option:focus-visible)::picker(select) {
/* auto width! */
width: calc-size(auto, size + 0.5rem);
}
הגבלות והערות לגבי נגישות
עם כוח גדול מגיעה אחריות גדולה. כדי לשמור על הנגישות, יש כמה מגבלות על התכונה.
- מלבד רכיבי
<option>, עדיין אסור להשתמש ברכיבים אינטראקטיביים (שניתן להתמקד בהם) בתוך<select>, כמו כפתורים או רכיבים אחרים. נכון לעכשיו, מודל התוכן המוצע מאפשר רק את הרכיבים<div>,<span>,<option>,<optgroup>,<img>,<svg>ו-<hr>. - כפתורים מפוצלים נמצאים כרגע בשלב הניסוי, ואנחנו עובדים על פתרון נגיש.
בעתיד, מודל התוכן צפוי להתרחב ולהיות גמיש יותר, ככל שסיפור הנגישות של החוויות האלה יתפתח.
סיכום
אנחנו שמחים לראות את ההתקדמות של התכונה הזו בקבוצות העבודה ובגופי התקינה, ולשתף את ההתקדמות שלנו בזמן שאנחנו מפתחים את אב הטיפוס באופן פעיל ומעריכים את הצורה של התכונה הזו. אם נתקלתם במשהו שלא עובד כמו שציפיתם, ספרו לנו.
התכונה הזו עדיין בפיתוח, ונשמח לקבל מכם משוב באמצעות טופס המשוב הקצר הזה.
תודה שעזרת לנו לעשות את זה נכון ולהקל על יצירת פקדי טפסים נגישים וניתנים להתאמה אישית באינטרנט.