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

Una Kravets

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

אנחנו מזמינים אותך לנסות אותו ולשלוח לנו משוב

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

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

נבחן את התכונות של ממשק ה-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> מכיל את כל תגי העיצוב הבאים:

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

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

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

סיכום

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

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

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