Melhorias no elemento <permission> proposto

Thomas Steiner

Publicado em: 12 de maio de 2025

O elemento HTML <permission> proposto ainda está em teste de origem, já que a equipe do Chrome está refinando o recurso com base na fundação estabelecida no nosso teste de origem inicial. Esta postagem compartilha melhorias que visam oferecer mais flexibilidade e controle ao solicitar permissões em aplicativos da Web. Para uma visão geral abrangente da introdução do elemento <permission> e das funcionalidades iniciais dele, consulte nosso artigo anterior Um teste de origem para um novo elemento HTML <permission>.

Suporte de conteúdo para UX substituta

O elemento <permission> foi inicialmente definido como um elemento vazio sem conteúdo até o Chrome 136. A partir do Chrome 137, ele oferece suporte a conteúdo, o que significa que agora é obrigatório marcá-lo com tags de abertura e fechamento:

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

Essa mudança permite incluir interfaces de usuário de substituição no conteúdo do elemento. Esses substitutos são mostrados em navegadores que não são compatíveis com o elemento <permission> ou quando um atributo type não compatível é especificado. Isso garante uma degradação mais gradual e uma experiência do usuário aprimorada em diferentes ambientes de navegador.

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

Detecção de recursos programáticos mais detalhada

Para ajudar você a determinar o suporte a tipos específicos de permissão, apresentamos um método estático, isTypeSupported():

HTMLPermissionElement.isTypeSupported('geolocation');

Esse método retorna um booleano indicando se o tipo de permissão especificado é compatível. Combinado com a detecção de recursos atual, typeof HTMLPermissionElement !== 'undefined', agora é possível garantir de forma programática o suporte para o elemento <permission> e para tipos específicos de permissão.

Também é possível transmitir vários tipos de permissão separados por espaço (por exemplo, "camera microphone"), e a função vai retornar se a string geral é um valor "type" válido. Por exemplo, chamar isTypeSupported() com os seguintes parâmetros retorna estes resultados:

• "camera" → true
• "geolocation" → true
• "camera geolocation" → false (embora os tipos sejam compatíveis individualmente, a combinação não é).

Nomes de eventos atualizados

No Chrome 136, lançamos dois novos eventos para substituir os anteriores:

• onpromptdismiss (substitui ondismiss)
• onpromptaction (substitui onresolve)

Esses novos eventos oferecem uma semântica mais clara e se alinham melhor ao comportamento do elemento. Os eventos mais antigos serão descontinuados no Chrome 138. Por isso, recomendamos atualizar seus manipuladores de eventos de acordo com isso.

Compatibilidade com ícones

Estamos trabalhando para ativar o suporte a ícones no elemento <permission>, com previsão para o Chrome 138. Com esse recurso, você pode mostrar ícones predefinidos correspondentes ao tipo de permissão, com opções de estilização limitadas, como ajustes de cor e tamanho. Os detalhes exatos da API ainda estão sendo finalizados. 

Os exemplos a seguir mostram o padrão, uma cor de preenchimento diferente e sem cor de preenchimento, mas com um contorno preto.

Definir o estilo padrão.

A cor padrão do ícone é a mesma do texto do elemento de permissão.

Estilo modificado

Os exemplos a seguir mostram modificações exemplares no estilo padrão.

Mudança na cor do ícone

::permission-icon {
  fill: black;
}

Mudança no contorno do ícone

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

Desativar o ícone

Depois que ele for lançado, o ícone será ativado por padrão. Se quiser desativar o ícone, use o seguinte CSS

::permission-icon {
  display: none;
}

Diretrizes de estilo

Para orientações abrangentes sobre como estilizar o elemento <permission>, incluindo práticas recomendadas e restrições, consulte as diretrizes de estilo <permission>. Este recurso fornece instruções detalhadas para ajudar você a estilizar o elemento de maneira eficaz nos seus aplicativos.

Suporte expandido a plataformas e recursos

O elemento <permission> agora é compatível com mais plataformas e recursos:

• Suporte para Android:o elemento agora funciona em dispositivos Android, aumentando a aplicabilidade em diferentes plataformas de usuários.
• Suporte à geolocalização:agora você pode solicitar permissões de type="geolocation" usando o elemento <permission> com um atributo booleano preciselocation adicional. Embora o atributo preciselocation afete apenas a redação da solicitação, estamos trabalhando ativamente para diferenciar as permissões de local aproximado e exato em atualizações futuras.

Conclusões

Essas melhorias no elemento <permission> fazem parte dos nossos esforços contínuos para simplificar as solicitações de permissão e melhorar a experiência do usuário na Web. Recomendamos que você teste esses novos recursos e envie feedback para nos ajudar a refinar e desenvolver essa capacidade.