Mejoras en el elemento <permission> propuesto

Thomas Steiner

Publicado: 12 de mayo de 2025

El elemento <permission> de HTML propuesto aún se encuentra en la prueba de origen, ya que el equipo de Chrome lo está perfeccionando y se basa en la base establecida en nuestra prueba de origen inicial. En esta publicación, se comparten las mejoras que tienen como objetivo brindarte más flexibilidad y control cuando solicitas permisos en aplicaciones web. Para obtener una descripción general completa de la introducción del elemento <permission> y sus capacidades iniciales, consulta nuestro artículo anterior Una prueba de origen para un nuevo elemento <permission> de HTML.

Compatibilidad de contenido para la UX alternativa

El elemento <permission> se definió inicialmente como un elemento vacío sin contenido hasta Chrome 136. A partir de Chrome 137, admite contenido, lo que significa que ahora es obligatorio marcarlo con etiquetas de apertura y cierre:

<permission>
  <!-- optional content -->
</permission>

Este cambio te permite incluir interfaces de usuario alternativas dentro del contenido del elemento. Estos elementos alternativos se muestran en los navegadores que no admiten el elemento <permission> o cuando se especifica un atributo type no admitido. Esto garantiza una degradación más elegante y una mejor experiencia del usuario en diferentes entornos de navegador.

<!-- Invalid `type` attribute value -->
<permission type="not-supported">
  <p>Your browser does not support the specified <code>type</code>.</p>
</permission>

Detección de funciones programáticas más detallada

Para ayudarte a determinar la compatibilidad con tipos de permisos específicos, presentamos un método estático, isTypeSupported():

HTMLPermissionElement.isTypeSupported('geolocation');

Este método devuelve un valor booleano que indica si se admite el tipo de permiso especificado. En combinación con la detección de funciones existente, typeof HTMLPermissionElement !== 'undefined', ahora puedes asegurarte de forma programática de que se admitan tanto el elemento <permission> como los tipos de permisos específicos.

Ten en cuenta que también puedes pasar varios tipos de permisos separados por espacios (por ejemplo, "camera microphone") y se devolverá si la cadena general es un valor "type" válido. Por ejemplo, llamar a isTypeSupported() con los siguientes parámetros devuelve estos resultados:

• "camera" → true
• "geolocation" → true
• "camera geolocation" → false (aunque los tipos se admiten de forma individual, la combinación no se admite)

Se actualizaron los nombres de los eventos

En Chrome 136, presentamos dos eventos nuevos para reemplazar los anteriores:

• onpromptdismiss (reemplaza a ondismiss)
• onpromptaction (reemplaza a onresolve)

Estos nuevos eventos proporcionan una semántica más clara y se alinean mejor con el comportamiento del elemento. Los eventos anteriores dejarán de estar disponibles en Chrome 138, por lo que te recomendamos que actualices tus controladores de eventos según corresponda.

Compatibilidad con íconos

Estamos trabajando para habilitar la compatibilidad con íconos dentro del elemento <permission>, y el objetivo es que esté disponible en Chrome 138. Esta función te permitirá mostrar íconos predefinidos correspondientes al tipo de permiso, con opciones de diseño limitadas, como ajustes de color y tamaño. Los detalles exactos de la API aún se están definiendo. 

En los siguientes ejemplos, se muestran el color de relleno predeterminado, un color de relleno diferente y ningún color de relleno, pero con un contorno negro.

Estilo predeterminado

El color predeterminado del ícono es el mismo que el color del texto del elemento de permiso.

Diseño modificado

En los siguientes ejemplos, se muestran modificaciones ejemplares del diseño predeterminado.

Cambio del color del ícono

::permission-icon {
  fill: black;
}

Cambio del contorno del ícono

::permission-icon {
  fill: white;
  stroke: black;
  stroke-width: 20px;
}

Inhabilita el ícono

Una vez que se lance, el ícono estará habilitado de forma predeterminada. Si quieres inhabilitar el ícono, puedes hacerlo con el siguiente CSS

::permission-icon {
  display: none;
}

Normas de estilo

Para obtener orientación integral sobre cómo aplicar estilo al elemento <permission>, incluidas las prácticas recomendadas y las restricciones, consulta los lineamientos de diseño de <permission>. Este recurso proporciona instrucciones detalladas para ayudarte a aplicar estilos de manera eficaz al elemento dentro de tus aplicaciones.

Compatibilidad ampliada con plataformas y capacidades

El elemento <permission> ahora admite plataformas y capacidades adicionales:

• Compatibilidad con Android: El elemento ahora funciona en dispositivos Android, lo que amplía su aplicabilidad en diferentes plataformas de usuarios.
• Compatibilidad con la geolocalización: Ahora puedes solicitar permisos de type="geolocation" con el elemento <permission> y un atributo booleano preciselocation adicional. Si bien el atributo preciselocation solo afecta la redacción de la instrucción, estamos trabajando de forma activa para diferenciar los permisos de ubicación aproximada y precisa en futuras actualizaciones.

Conclusiones

Estas mejoras en el elemento <permission> forman parte de nuestros esfuerzos continuos por optimizar las solicitudes de permisos y mejorar la experiencia del usuario en la Web. Te recomendamos que experimentes con estas funciones nuevas y nos envíes tus comentarios para ayudarnos a perfeccionar y desarrollar esta capacidad.