Etiqueta HTML en el menú de selección trucos CSS
Quiero presentarles un nuevo control experimental de la forma llamado <selectmenu>Profundizaremos en esto, incluido lo mucho más fácil que es peinar que el estilo tradicional. <select> Pero primero, llenemos un poco de contexto sobre por qué algo como esto <selectmenu> se necesita en primer lugar, ya que todavía está evolucionando y evolucionando.
Pregúntele a cualquier desarrollador web qué cree que le falta a la plataforma web hoy, existe la posibilidad de que los controles de estilo en el formulario estén en su lista. De hecho, la estilización de la forma fue votada como una de las 10 cosas que más faltan en El estado de la encuesta CSS en 2020Luego fue investigado más a fondo por greg whitworth Quién mostrado que <select> fue el control que los desarrolladores web tuvieron más problemas con el estilo CSS.
Aunque es relativamente fácil diseñar la apariencia de la pieza con los botones de un <select> (lo que ve en la página cuando la ventana emergente está cerrada), es casi imposible diseñar las opciones (lo que ve cuando la ventana emergente está abierta), y mucho menos agregar más contenido a la ventana emergente.
<select> elemento en SafariComo resultado, los sistemas de diseño y las bibliotecas de componentes introducen sus propios elementos personalizados creados desde cero utilizando marcado HTML personalizado, CSS y, a menudo, mucho JavaScript para tener algo que se integre bien con otros componentes.
Desafortunadamente, no es fácil hacer lo correcto con la semántica adecuada para la accesibilidad, la compatibilidad con el teclado y el posicionamiento de las ventanas emergentes. Los desarrolladores web han estado invirtiendo horas y horas a lo largo de los años, tratando de resolver los mismos problemas una y otra vez, y hay muchas opciones disponibles.
Ya es hora de que tengamos un estilo incorporado <select> ¡así que no necesitamos escribir este código nunca más!
La iniciativa de interfaz de usuario abierta
Abra la interfaz de usuario es un grupo de desarrolladores, diseñadores e implementadores de navegadores que están trabajando para resolver este problema y, mientras lo solucionan, están tratando con otros controles que faltan.
El propósito de la interfaz de usuario abierta es posiblemente permitir a los desarrolladores web diseñar y ampliar los controles integrados de la interfaz de usuario (esto incluye
El proyecto aún está en sus inicios, pero las cosas avanzan rápido y, como veremos a continuación, ya están sucediendo cosas emocionantes.
Puede unirse al grupo y participar en reuniones, investigaciones y esfuerzos de especificación.
Residencia en Interfaces de usuario abiertas <select> propuestala aplicación de un nuevo <selectmenu> el control ha comenzado en cromo!! El trabajo lo realiza el equipo de Microsoft Edge, en colaboración con el equipo de Google Chrome. Incluso ahora está disponible en navegadores basados en Chromium activando el indicador «Características experimentales de la plataforma web» en about:flags page.
<selectmenu> es un nuevo control incorporado que proporciona una experiencia de usuario para seleccionar opciones, al igual que <select>con un botón que muestra la etiqueta de valor seleccionada, una ventana emergente que aparece al hacer clic en ese botón y una lista de opciones que aparecen.
¿Por qué un nuevo nombre?
¿Por qué no simplemente reemplazar el existente? <select> El nombre «selectmenu» comenzó como un nombre de trabajo, pero parece haberse mantenido hasta ahora y nadie ha encontrado nada mejor.
Más importante aún, los existentes <select> el control se ha utilizado en la red durante mucho tiempo. Como tal, probablemente nunca se pueda cambiar de manera significativa sin causar problemas importantes de compatibilidad.
Entonces, el plan (y recordad que todo esto todavía es muy experimental) es para <selectmenu> ser un nuevo control independiente de <select>.
Pruébalo hoy
Todavía no está listo para la producción, pero si está tan emocionado como yo por usarlo, así es como se hace:
- Abra la versión Canary del navegador basado en Chromium (Chrome, Edge).
- Cambie el indicador «Características experimentales de la plataforma web» a
about:flagspágina y reiniciar. - Reemplace cualquier
<select>desde<selectmenu>en una pagina web!
¡Eso es todo! No hará mucho por defecto, pero como veremos más adelante, podrá modificar el estilo y ampliar el control de forma bastante amplia con este cambio de etiqueta de nombre.
¡Nos encantan los comentarios!
Antes de hablar sobre cómo usar el control, si lo usa, el equipo de Open UI y las personas que trabajan en la implementación de Chromium estarán felices de escuchar sus comentarios, si los tiene.
Como uno de los primeros evaluadores, puede ayudarlos activamente a mejorar el control para todos. Entonces, si encuentra errores o limitaciones en el diseño del control, envíe sus comentarios a crear un problema en el repositorio de Open UI GitHub!!
Y ahora, hablemos de cómo funciona el control.
Dado que las diferentes partes del menú de selección se pueden estilizar, es importante comprender primero su anatomía interna.
<selectmenu>es el elemento principal que contiene el botón y el cuadro de lista.<button>es el elemento que activa la visibilidad del cuadro de lista.<selected-value>es el elemento que muestra el valor de la opción de selección actual (opcional). Tenga en cuenta que esta parte no tiene que colocarse dentro<button>parte.<listbox>es la concha que contiene<option>arena<optgroup>s.<optgroup>agrupa s junto con etiqueta opcional.<option>representa el valor potencial que puede ser seleccionado por el usuario. Puede haber uno o más.
Comportamiento por defecto
El comportamiento predeterminado de <selectmenu> El control imita el comportamiento de <select> control. Puedes usarlo como un nativo. <select>con la siguiente marca mínima.
<selectmenu>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</selectmenu>Cuando haces esto, por defecto <button>, <selected-value>y <listbox > están hechos para ti.
Formando partes del control
¡Aquí es donde las cosas se ponen interesantes! Una forma de diseñar los controles para que se adapten a sus requisitos es usar CSS ::part() pseudo-elemento para seleccionar las diferentes partes en la anatomía del control que desea diseñar.
Considere el siguiente ejemplo donde ::part() se usa para diseñar el botón y partes del cuadro de lista:
<style>
.my-select-menu::part(button) {
color: white;
background-color: #f00;
padding: 5px;
border-radius: 5px;
}
.my-select-menu::part(listbox) {
padding: 10px;
margin-top: 5px;
border: 1px solid red;
border-radius: 5px;
}
</style>
<selectmenu class="my-select-menu">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</selectmenu>El ejemplo anterior conduce al siguiente estilo:
::part() se puede usar para peinar <button>, <selected-value>y <listbox> partes del mando.
Usa tu propia marca
Si lo anterior no es suficiente para sus necesidades, puede personalizar mucho más el control al proporcionar su propia marca para reemplazar la predeterminada y expandir o reorganizar las partes.
A <selectmenu> ha llamado tragamonedas que se puede reenviar para reemplazar las piezas predeterminadas. Por ejemplo, para reemplazar el botón predeterminado con el suyo propio, puede hacer lo siguiente:
<style>
.my-custom-select [slot="button"] {
display: flex;
align-content: center;
}
.my-custom-select button {
padding: 5px;
border: none;
background: #f06;
border-radius: 5px 0 0 5px;
color: white;
font-weight: bold;
}
.my-custom-select .label {
padding: 5px;
border: 1px solid #f06;
border-radius: 0 5px 5px 0;
}
</style>
<selectmenu class="my-custom-select">
<div slot="button">
<button behavior="button">Open</button>
<span class="label">Choose an option</span>
</div>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</selectmenu>EN slot="button" atributo en el exterior <div> habla de <selectmenu> para reemplazar el botón predeterminado con el contenido de <div>.
EN behavior="button" atributo en el interior <button> le dice al navegador que este elemento es lo que queremos usar como un nuevo botón. El navegador aplicará automáticamente todo el comportamiento de clic y teclado a este elemento, así como la semántica de accesibilidad adecuada.
El fragmento de código anterior conduce al siguiente estilo:
Tenga en cuenta que slot y behavior los atributos también se pueden utilizar para el mismo elemento.
Puede reemplazar la parte con la lista predeterminada de una manera similar:
<style>
.my-custom-select popup {
width: 300px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
gap: 10px;
padding: 10px;
box-shadow: none;
margin: 10px 0;
border: 1px solid;
background: #f7f7f7;
}
</style>
<selectmenu class="my-custom-select">
<div slot="listbox">
<popup behavior="listbox">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
</popup>
</div>
</selectmenu>Curiosamente, eso <popup> usado aquí es también sugerido por Open UI y actualmente implementado en Chromium.
El elemento con behavior="listbox" se requiere que sea un <popup>. Solicitud behavior="listbox" le dice al navegador que abra este elemento cuando <selectmenu> haga clic en el botón y el usuario puede elegir <option>s dentro de él con el ratón, las teclas de flecha y toque.
El fragmento de código anterior conduce al siguiente estilo:
Extender la marca
No solo puede reemplazar las partes predeterminadas con las suyas propias, como se ve arriba, también puede ampliar la verificación de control agregando nuevos elementos. Esto puede ser útil para aumentar el cuadro de lista o el botón con información adicional o para agregar una nueva funcionalidad.
Considere el siguiente ejemplo:
<style>
.my-custom-select [slot="button"] {
display: flex;
align-items: center;
gap: 1rem;
}
.my-custom-select button {
border: none;
margin: 0;
padding: 0;
width: 2rem;
height: 2rem;
border-radius: 50%;
display: grid;
place-content: center;
}
.my-custom-select button::before {
content: '25BC';
}
.my-custom-select popup {
padding: 0;
}
.my-custom-select .section {
padding: 1rem 0 0;
background: radial-gradient(ellipse 60% 50px at center top, #000a 0%, transparent 130%);
}
.my-custom-select h3 {
margin: 0 0 1rem 0;
text-align: center;
color: white;
}
.my-custom-select option {
text-align: center;
padding: 0.5rem;
}
</style>
<selectmenu class="my-custom-select">
<div slot="button">
<span class="label">Choose a plant</span>
<span behavior="selected-value" slot="selected-value"></span>
<button behavior="button"></button>
</div>
<div slot="listbox">
<popup behavior="listbox">
<div class="section">
<h3>Flowers</h3>
<option>Rose</option>
<option>Lily</option>
<option>Orchid</option>
<option>Tulip</option>
</div>
<div class="section">
<h3>Trees</h3>
<option>Weeping willow</option>
<option>Dragon tree</option>
<option>Giant sequoia</option>
</div>
</popup>
</div>
</selectmenu>Aquí usamos marcas personalizadas para ajustar la lista de opciones y crear su propio contenido, como se muestra a continuación:
Reemplace todo el DOM en la sombra
Finalmente, y si lo anterior no es suficiente, también puede extender el control de control reemplazando completamente su shadow DOM predeterminado llamando attachShadow()Por ejemplo, la manifestación en sección previa se puede modificar de la siguiente manera:
<selectmenu id="my-custom-select"></selectmenu>
<script>
const myCustomSelect = document.querySelector('#my-custom-select')
const shadow = myCustomSelect.attachShadow({ mode: 'closed' })
shadow.innerHTML = `
<style>
.button-container {
display: flex;
align-items: center;
gap: 1rem;
}
button {
border: none;
margin: 0;
padding: 0;
width: 2rem;
height: 2rem;
border-radius: 50%;
display: grid;
place-content: center;
}
button::before {
content: '\0025BC';
}
popup {
padding: 0;
}
.section {
padding: 1rem 0 0;
background: radial-gradient(ellipse 60% 50px at center top, #000a 0%, transparent 130%);
}
h3 {
margin: 0 0 1rem 0;
text-align: center;
color: white;
}
option {
text-align: center;
padding: 0.5rem;
}
option:hover {
background-color: lightgrey;
}
</style>
<div class="button-container">
<span class="label">Choose a plant</span>
<span behavior="selected-value" slot="selected-value"></span>
<button behavior="button"></button>
</div>
<popup behavior="listbox">
<div class="section">
<h3>Flowers</h3>
<option>Rose</option>
<option>Lily</option>
<option>Orchid</option>
<option>Tulip</option>
</div>
<div class="section">
<h3>Trees</h3>
<option>Weeping willow</option>
<option>Dragon tree</option>
<option>Giant sequoia</option>
</div>
</popup>
`
</script>Escrito de esta manera, <selectmenu>La marca de la costumbre está completamente encapsulada en su DOM sombreado <selectmenu> por lo tanto, se puede colocar en cualquier página sin el riesgo de interferencia de los estilos de contenido circundantes.
Como hemos visto, el nuevo experimento <selectmenu> El control ofrece mucha flexibilidad cuando se trata de diseñar e incluso extender el tradicional <select>. Y lo hace de la manera correcta, porque está integrado en el navegador, donde la accesibilidad y el posicionamiento de la vista se manejan por usted.
Hay una interfaz de usuario abierta más documentación para <selectmenu>y si desea ver más código que muestre cómo usar <selectmenu>, aquí hay algunas demostraciones además.
Nuevamente, esto está en progreso y ciertamente cambiará como resultado de los comentarios recibidos del grupo Open UI.
No veo la hora de que las especificaciones comiencen a aparecer en los cuerpos estándar de HTML y CSS y hacer que la implementación sea más estable, además de ver que otros navegadores están interesados en esto. ¡Tú puedes ayudar a que eso suceda! Pruebas de control, reportando problemaso me estoy uniendo son excelentes maneras de ayudar a que ese esfuerzo avance.