Prośba o opinię dewelopera: opcja do wyboru

Una Kravets

Od lat stylizacja elementów sterujących formularzem, takich jak element <select>, była największym problemem dla programistów, dlatego pracowaliśmy nad rozwiązaniem. Chociaż jest to skomplikowana praca, która wymagała dużo czasu, jesteśmy już bardzo blisko udostępnienia tej funkcji. Dostosowywalna wersja elementu select jest oficjalnie na etapie 2 w WHATWG, cieszy się dużym zainteresowaniem w różnych przeglądarkach, a prototyp można przetestować w Chrome Canary 130.

Wypróbuj tę funkcję i podziel się z nami swoją opinią

Sprawdź, czy Chrome Canary jest zaktualizowany do wersji 130 i czy masz włączoną flagę eksperymentalnych funkcji platformy internetowej. Możesz włączyć tę flagę, wpisując chrome://flags na pasku adresu i włączając #experimental-web-platform-features. Następnie możesz zobaczyć dema Codepen w tym poście. Możesz też sprawdzić tę kolekcję Codepen, aby wyświetlić je wszystkie w jednym miejscu.

Aby przesłać opinię o tej funkcji, użyj tego formularza. Zajmie to tylko 3 minuty.

Przyjrzyjmy się funkcjom interfejsu Select API, który opiera się na dotychczasowym tagu HTML select.

Włączanie nowej wersji <select>

Aby włączyć nowe działanie, użyj właściwości CSS appearance zarówno w przycisku wyboru na stronie, jak i w selektorze wyboru. Aby to zrobić, ustaw wartość appearance: base-select w elemencie <select> i w elemencie ::picker(select).

::picker(select) to nowy pseudoelement dostarczony przez użytkownika, który ma zastosowanie tylko do elementów <select>, które zostały włączone za pomocą appearance: base-select. Ten pseudoelement selektora to wyskakujące okienko wywoływane przez podstawowy przycisk wyboru. Możesz włączyć obie opcje, jak pokazano w tym kodzie:

select,
::picker(select) {
  appearance: base-select;
}

Możesz włączyć tylko przycisk na stronie, ale nie możesz włączyć tylko wyskakującego okienka selektora bez włączenia przycisku na stronie. ::picker(select) jest tworzony tylko wtedy, gdy appearance: base-select zostanie zastosowany w przypadku <select>.

Teraz możesz dostosować wybrany element. Nowa opcja wyboru z możliwością dostosowania zawiera kilka domyślnych stylów, które wyglądają tak samo w różnych przeglądarkach i systemach operacyjnych. Oto jak wygląda domyślny element selektowania w Chrome na macOS:

Analiza poszczególnych części

Gdy znajdziesz się w nowym trybie elementów do wyboru z możliwością ich dostosowywania, nowe elementy, do których masz teraz dostęp, to: - selectedoption: odzwierciedla wewnętrzny kod HTML opcji, która jest obecnie wybrana. – option::before: zawiera znacznik wyboru wskazujący, że wybrana opcja jest domyślną opcją ułatwień dostępu (może ulec zmianie). – ::picker(select): menu podręczne zawierające wszystkie treści poza button w ramach opcji dostosowania.

Możesz sformatować dowolną część selekcji. Możesz na przykład dodać dowolne nieinteraktywne treści do elementów <option>, nadać styl przyciskowi na stronie, który otwiera menu wyboru, i nadać styl menu opcji (elementowi ::picker(select)).

Możesz też nadać styl button, czyli swojemu własnemu wskaźnikowi strzałki, oraz dodać dowolne treści do środka lub wokół dowolnego elementu. Oprócz dodawania treści możesz ukryć dowolne z tych nowych elementów i stylów domyślnych. Jeśli np. nie chcesz, aby w pseudoelemencie ::before opcji pojawiała się znacznik wyboru, użyj tego kodu CSS.

/* Remove the default checkmark from the selected option */
option::before {
 display: none;
}

W elementach wyboru może znajdować się nieograniczona liczba elementów, ale przeglądarka sklasyfikuje wszystko poza elementem <button> jako pseudoelement ::picker(select), który działa jak wyskakujące okienko zakotwiczone do przycisku. Ten <button> włącza lub wyłącza ::picker(select). Opcje i inne elementy bezpośrednio wewnątrz elementu select zostaną przeniesione do elementu ::picker(select). Możesz też podać własny element opakowujący na potrzeby stylizacji. Ten otoczka zostanie również umieszczony wewnątrz pseudoelementu ::picker(select).

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

Nowa, dostosowywalna <select> wykorzystuje funkcje wyskakujących okienek i pozycjonowania za pomocą kotwicy. Jest ona zbudowana na podstawie tych dwóch technologii. Oznacza to, że lista opcji w menu w elemencie select działa jak menu wyskakujące, które jest zakotwiczone do przycisku uruchamiającego, który otwiera element select.

Aby nadać styl temu ::picker(select), możesz użyć pozycjonowania za pomocą kotwicy (w tym kotwiczenia do innych elementów). Ten model treści oznacza też, że style animacji górnej warstwy działają z listą opcji, aby animować efekty wejścia i wyjścia.

Ulepszenie dotychczasowego elementu <select>

Wcześniej zespół Chrome pracował nad pomysłem elementu <selectlist>. W tym poście opisaliśmy, jak zmienić tę funkcję, aby używała istniejącego elementu <select>.

Jedną z głównych zalet ponownego używania istniejącego elementu <select> jest możliwość stopniowego ulepszania podstawowego elementu HTML. W porównaniu z zupełnie nowym elementem ponowne użycie <select> nadal będzie generować na stronie treści o znaczeniu. Na przykładzie poniżej porównujemy spersonalizowany element select z tym, co zobaczy użytkownik w nieobsługiwanej przeglądarce:

Stylizacja podstawowa

Zmiany mogą być tak proste jak zmiana stylu wizualnego wybranego elementu. Możesz na przykład zaktualizować style przycisków, styl kursora i styla fokusa lub tło opcji wyboru. Po włączeniu usługi porównywania cen appearance: base-select zastosuj dowolną usługę porównywania cen do wybranych części.

Aby dostosować wskaźnik strzałki, dodaj własny przycisk i strzałkę wewnątrz elementu wyboru.

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

Następnie nadaj strzałce styl:

/* 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;
}

złożone treści w opcjach;

Możesz też dodawać treści i stylizować je w elementach <option> wewnątrz elementu <select>. Podstawowym przykładem jest dodawanie obrazów flag obok nazw krajów w menu. Aby to zrobić, dodaj element obrazu obok tekstu opcji.

<option value="france">
  <img src="img/flag_of_france.svg" alt="" />
  <span>France</span>
</option>

Bardziej złożony przykład może obejmować zdjęcia profilowe, nazwy i inne informacje, które pomogą Ci zdecydować, który element wybrać w menu.

<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>

Nadawanie stylu wybranej opcji

Możesz chcieć, aby wybrana opcja była wyświetlana w wybranym stanie inaczej niż w menu. Przykładem jest interfejs Gmaila, w którym, aby zaoszczędzić miejsce, etykieta znika po wybraniu opcji. Aby to zrobić, użyj elementu <selectedoption> do stylizacji. <option> zawiera wszystkie te znaczniki:

 <option value="reply-all">
    <img class="material-symbol"  src="material-symbol-reply.png">
    <span class="text">Reply all</span>
  </option>

Teraz zastosuj display: none do .text w sekcji <selectedoption>, aby ukryć treść tekstową i wyświetlić tylko ikonę:

selectedoption .text {
  display: none;
}

Opcje interakcji

Dzięki pełnej kontroli nad stylami ::picker(select) możesz tworzyć na podstawie poprzedniego demonstracyjnego szablonu interaktywne elementy, które będą reagować na najechanie kursorem i kliknięcie. W tym pokazie nowa funkcja calc-size() służy do animowania szerokości selektora od wyświetlania ikon do wyświetlania pełnej szerokości opcji po najechaniu kursorem lub jeśli selektor ma opcję widoczną po najechaniu kursorem.

/* 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);
}

Ograniczenia i uwagi dotyczące dostępności

Z wielką mocą wiąże się wielka odpowiedzialność. Aby zapewnić dostępność, wprowadziliśmy pewne ograniczenia tej funkcji.

• Poza elementami <option> w elementach <select> nie są jeszcze dozwolone żadne elementy interaktywne (które można zaznaczyć), takie jak przyciski czy inne elementy. Obecnie proponowany model treści dopuszcza tylko elementy <div>, <span>, <option>, <optgroup>, <img>, <svg> i <hr>.
• Przyciski podzielone są obecnie w fazie eksperymentalnej, ponieważ pracujemy nad rozwiązaniem umożliwiającym dostępność.

W przyszłości model treści powinien się rozszerzyć i stać się bardziej elastyczny, ponieważ w przypadku tych treści zostanie rozbudowana historia dotycząca dostępności.

Podsumowanie

Cieszymy się, że ta funkcja jest rozwijana przez grupy robocze i organizacje opracowujące standardy. Chcielibyśmy podzielić się z Wami naszymi postępami w tworzeniu prototypu i ocenie tej funkcji. Jeśli coś nie działa zgodnie z oczekiwaniami, daj nam znać.

Ta funkcja jest wciąż w fazie rozwoju, dlatego prosimy o wypełnienie krótkiego formularza opinii.

Dziękujemy za pomoc w ułatwieniu tworzenia w internecie łatwo dostępnych i spersonalizowanych elementów sterujących formularzy.