בקשה למשוב מהמפתח: בחירה בהתאמה אישית

Una Kravets

במשך שנים, דיווחנו על עיצוב של אמצעי בקרה בטופס כמו האלמנט <select> כאחד מנקודות החולשה העיקריות של המפתחים, ועבדנו על פתרון. העבודה הזו מורכבת ונדרש הרבה זמן כדי לבצע אותה בצורה נכונה, אבל אנחנו מתקרבים מאוד להשקת התכונה הזו. גרסה להתאמה אישית של רכיב הבחירה נמצאת באופן רשמי בשלב 2 ב-WHATWG, עם עניין רב בדפדפנים שונים ועם אב טיפוס שאפשר לבדוק ב-Chrome Canary 130.

כדאי לנסות את התכונה ולשלוח לנו משוב

מוודאים שגרסת Chrome Canary מותקנת בגרסה 130, ושהדגל של התכונות הניסיוניות של פלטפורמת האינטרנט מופעל. כדי להפעיל את הדגל הזה, עוברים לכתובת chrome://flags בסרגל הכתובות ומפעילים את ההגדרה #experimental-web-platform-features. לאחר מכן, אמורים להופיע הדמואים של Codepen שצירפנו לפוסט הזה. לחלופין, אפשר להיכנס לאוסף הזה ב-Codepen כדי לראות את כולם במקום אחד.

אתם יכולים לשלוח משוב על התכונה באמצעות הטופס הזה. התהליך יימשך רק שלוש דקות.

נבחן את התכונות של ממשק ה-API לבחירה בהתאמה אישית, שמבוסס על תג ה-select הקיים ב-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>.

עכשיו אפשר להתאים אישית את הרכיב שבחרתם. התפריט הנפתח החדש להתאמה אישית מגיע עם כמה סגנונות ברירת מחדל שנראים אותו הדבר בכל הדפדפנים ומערכות ההפעלה. כך נראה בורר ברירת המחדל המותאם אישית בהשוואה לבורר הקיים ב-Chrome ב-macOS:

פירוט החלקים

כשעוברים למצב הבחירה החדש שניתן להתאמה אישית, הרכיבים החדשים שיש לכם עכשיו גישה אליהם כוללים: - selectedoption: משקף את ה-HTML הפנימי של האפשרות שנבחרה כרגע. - option::before: מכיל סימן וי כדי לציין שהאפשרות שנבחרה כרגע היא ברירת המחדל של נגישות (הדבר עשוי להשתנות). - ::picker(select): חלון קופץ שמכיל את כל התוכן מחוץ ל-button בתוך תפריט בחירה שניתן להתאמה אישית.

אפשר לעצב כל חלק של התפריט הנפתח. לדוגמה, אפשר להוסיף תוכן שרירותי לא אינטראקטיבי בתוך הרכיבים <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), או שתוכלו להוסיף עטיפה משלכם למטרות עיצוב. גם העטיפה הזו תוצג בתוך רכיב הסימון המשנה ::picker(select).

<select>
  <button>
    <selectedoption></selectedoption>
  </button>
  // Everything else that will go into the ::picker(select) popover
</select>

הערך החדש של <select>, שניתן להתאים אישית, משתמש בפונקציונליות של חלון קופץ ושל מיקום עוגן. הוא מבוסס על שתי הטכנולוגיות הבסיסיות האלה. כלומר, רשימת האפשרויות בתפריט הנפתח בתוך תיבת הבחירה פועלת כחלון קופץ שמקובע ללחצן ההפעלה שפותח את תיבת הבחירה.

אפשר להשתמש במיקום עוגן כדי לקבוע את הסגנון של חלון הקופץ ::picker(select) (כולל הצמדה שלו לרכיבים אחרים). מודל התוכן הזה גם אומר שסגנונות של אנימציה בשכבה העליונה פועלים עם רשימת האפשרויות כדי ליצור אנימציה של אפקטים של כניסה ויציאה.

שיפור הרכיב <select> הקיים

בעבר, צוות Chrome עבד על הרעיון של רכיב <selectlist>. במאמר הזה מתוארת גרסה מחודשת של התכונה הזו, שבה נעשה שימוש חוזר ברכיב <select> הקיים במקום ברכיב החדש.

אחד מהיתרונות העיקריים של שימוש חוזר ברכיב <select> הקיים הוא היכולת לשפר בהדרגה את רכיב ה-HTML הבסיסי. בהשוואה לרכיב חדש לגמרי, שימוש חוזר ב-<select> עדיין יניב תוכן בעל משמעות בדף. בדוגמה הבאה מוצגת הבחירה המותאמת אישית לעומת מה שמשתמש בדפדפן לא נתמך יראה:

עיצוב בסיסי

השינויים יכולים להיות פשוטים כמו עיצוב חזותי של רכיב הבחירה. לדוגמה, כדי לעדכן את סגנונות הלחצנים, את סגנונות העכבר מעל הלחצן והסגנון של הלחצן שמושם עליו המיקוד, או את הרקע של האפשרויות שנבחרו. אחרי שמביעים הסכמה באמצעות appearance: base-select, מחילים את כל קובצי ה-CSS הרצויים על החלקים שבחרתם.

כדי להתאים אישית את החץ המציין את הבחירה, מוסיפים לחצן וחץ משלכם בתוך האפשרות לבחירה.

<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> מכיל את כל הרכיבים הבאים של ה-Markup:

 <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>.
• לחצנים מפוצלים נמצאים כרגע בשלב הניסוי, בזמן שאנחנו עובדים על פתרון נגיש.

בעתיד, מודל התוכן צפוי להתרחב ולהיות גמיש יותר, ככל שנרחיב את הנושא של נגישות לחוויות האלה.

סיכום

אנחנו שמחים לראות את התקדמות התכונה הזו בקבוצות עבודה ובגופי תקנים, ולשתף את ההתקדמות שלנו בזמן שאנחנו מפתחים את האב טיפוס ומעריכים את הצורה של התכונה הזו. אם נתקלתם במשהו שלא פועל כמצופה, נשמח לדעת.

התכונה הזו עדיין בפיתוח, ונשמח לקבל ממך משוב באמצעות הטופס הקצר הזה.

תודה על המעורבות שלך בכך שנעשה את זה נכון, ונעזור לאנשים ליצור בקלות אמצעי בקרה נגישים ומותאמים אישית באינטרנט.