Ó, HTML bože, wwwládca webapp neba, vďaka! Na toto som čakal roky (desiatky rokov).
Kto pracuje s web technológiami, kde sa používa HTML, isto neraz zaklial, keď musel použiť klasický, hmm, nazvyme ho ”combobox”. HTML tag <select> s jeho položkami <option> je štýlovateľný asi tak, ako chcieť urobiť z trabanta mercedes. O jeho funkcionalite ani nehovoriac. Preto bolo vždy potrebné použiť nejaký komponent (JS). Ale tomu je teraz koniec.
Vyskúšajte si to
Ak máte minimálne Chrome Canary 130, cez chrome://flags si zapnite príznak #experimental-web-platform-features a môžete sa pohrať s Codepen ukážkami https://codepen.io/collection/BNZjPe alebo skúsiť nakódovať niečo vlastné.Nové tagy/selectory
V rámci CSS teraz viete „masírovať” vzhľad celého ovládacieho prvku. Pseudoštýly select::picker si zamilujete.
Medzi nové možnosti, ku ktorým máte teraz prístup, patria selectedoption, option::before, option:checked, ďalej spomínaný ::picker(select): t.j. celý dropdown, ktorý obsahuje položky okrem button-u.
Takto môžete upraviť ľubovoľnú časť HTML tagu <select>. Môžete napríklad pridať ľubovoľný HTML obsah do elementov <option>, upraviť štýl tlačidla, ktorý otvára rozbaľovaciu ponuku a upraviť aj samotný picker.
Môžete tiež upraviť štýl tlačidla, pridať vlastný arrow indikátor, prípadne pridať ľubovoľný obsah, či už v rámci alebo „okolo” ktoréhokoľvek z prvkov. Okrem pridávania obsahu môžete skryť ktorýkoľvek z týchto nových prvkov a predvolených štýlov. Ak napríklad nechcete v položkách option zobrazovať „check”, použite nasledujúci CSS:
/* Remove the default checkmark from the selected option */
option::before {
display: none;
}
Vylepšený <select>
Pôvodne tím Chromu pracoval na novom prvku <selectlist>. Myšlienka vylepšiť a opätovne použiť existujúci prvok <select> nakoniec zvíťazila.
Jednou z kľúčových výhod opätovného použitia prvku <select> je spätná kompatibilita a možnosť postupne vylepšovať základný prvok HTML. V porovnaní s úplne novým prvkom bude použitie <select> na existujúcich stránkach aj naďalej renderovať korektný obsah. Nasledujúci príklad ukazuje nový <select> v porovnaní s tým, čo uvidí používateľ v nepodporovanom prehliadači - stále ok, čo poviete?:
Plnohodnotný HTML obsah v rámci <option>
V rámci novej implementácie <select> budete môcť pridávať plnohodnotný HTML obsah v rámci jeho položiek <option>. Typickým príkladom môže byť pridanie obrázkov vlajok pred názvy krajín v rozbaľovacej ponuke:
<option value="france">
<img src="img/flag_of_france.svg" alt="Vivat, France!" />
<span>France</span>
</option>
Zložitejší príklad môže zahŕňať napr. profilové fotografie, mená a doplnkové informácie, ktoré pomôžu použíávateľovi rozhodnúť sa, ktorú položku v pickeri si vybrať. Pre výber meny by to mohlo vyzerať nasledovne:
<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>
Záverom
Popri výhodách treba spomenúť aj druhú stranu mince. Aby boli web stránky a jej funkcie naďalej prístupné, „veci” majú určité obmedzenia.
Okrem prvkov <option> nie sú v rámci <select> zatiaľ povolené žiadne interaktívne (focusable) prvky, ako sú tlačidlá a pod. Navrhovaný model obsahu zatiaľ umožňuje iba prvky <div>, <span>, <option>, <optgroup>, <img>, <svg> a <hr>. Očakáva sa, že v budúcnosti sa obsahový model rozšíri, aby bol flexibilnejší.
Ak narazíte na niečo, čo nefunguje, dajte vedieť! (Feedback form)