Améliorations apportées à l'élément proposé

Thomas Steiner

Publié le : 12 mai 2025

L'élément HTML <permission> proposé est toujours en phase d'évaluation de l'origine, car l'équipe Chrome le peaufine en s'appuyant sur les bases établies lors de notre première phase d'évaluation de l'origine. Cet article présente les améliorations qui visent à vous offrir plus de flexibilité et de contrôle lorsque vous demandez des autorisations dans les applications Web. Pour obtenir une présentation complète de l'introduction de l'élément <permission> et de ses fonctionnalités initiales, consultez notre précédent article Essai d'origine pour un nouvel élément HTML <permission>.

Contenu de remplacement pour l'UX

L'élément <permission> était initialement défini comme un élément vide sans contenu jusqu'à Chrome 136. À partir de Chrome 137, il est compatible avec le contenu, ce qui signifie qu'il est désormais obligatoire de le baliser avec des balises d'ouverture et de fermeture :

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

Cette modification vous permet d'inclure des interfaces utilisateur de remplacement dans le contenu de l'élément. Ces solutions de remplacement s'affichent dans les navigateurs qui ne sont pas compatibles avec l'élément <permission> ou lorsqu'un attribut type non compatible est spécifié. Cela garantit une dégradation plus fluide et une expérience utilisateur améliorée dans différents environnements de navigateur.

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

Détection plus détaillée des fonctionnalités programmatiques

Pour vous aider à déterminer la compatibilité avec des types d'autorisations spécifiques, nous avons introduit une méthode statique, isTypeSupported() :

HTMLPermissionElement.isTypeSupported('geolocation');

Cette méthode renvoie une valeur booléenne indiquant si le type d'autorisation spécifié est compatible. Combiné à la détection de fonctionnalités existante, typeof HTMLPermissionElement !== 'undefined', vous pouvez désormais vous assurer par programmation que l'élément <permission> et les types d'autorisations spécifiques sont pris en charge.

Notez que vous pouvez également transmettre plusieurs types d'autorisations séparés par un espace (par exemple, "camera microphone"). La méthode renverra une valeur indiquant si la chaîne globale est une valeur "type" valide. Par exemple, l'appel de isTypeSupported() avec les paramètres suivants renvoie ces résultats :

  • "camera" → true
  • "geolocation" → true
  • "camera geolocation" → false (même si les types sont pris en charge individuellement, la combinaison ne l'est pas).

Noms d'événements modifiés

Dans Chrome 136, nous avons introduit deux nouveaux événements pour remplacer les précédents :

  • onpromptdismiss (remplace ondismiss)
  • onpromptaction (remplace onresolve)

Ces nouveaux événements fournissent une sémantique plus claire et s'alignent mieux sur le comportement de l'élément. Les anciens événements seront obsolètes dans Chrome 138. Nous vous recommandons donc de mettre à jour vos gestionnaires d'événements en conséquence.

Compatibilité avec les icônes

Nous travaillons à la prise en charge des icônes dans l'élément <permission>, prévue pour Chrome 138. Cette fonctionnalité vous permettra d'afficher des icônes prédéfinies correspondant au type d'autorisation, avec des options de style limitées telles que l'ajustement de la couleur et de la taille. Les détails exacts de l'API sont encore en cours de finalisation. 

Les exemples suivants montrent la couleur de remplissage par défaut, une couleur de remplissage différente et aucune couleur de remplissage, mais avec un contour noir.

Style par défaut

Rendu par défaut de l&#39;icône.

La couleur par défaut de l'icône est la même que celle du texte de l'élément d'autorisation.

Style modifié

Les exemples suivants montrent des modifications exemplaires apportées au style par défaut.

Changement de la couleur de l'icône

::permission-icon {
  fill: black;
}

Rendu modifié avec une icône noire unie.

Modification du contour de l'icône

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

Rendu modifié avec une icône de contour noir.

Désactiver l'icône

Une fois lancée, l'icône sera activée par défaut. Si vous souhaitez désactiver l'icône, vous pouvez le faire à l'aide du code CSS suivant :

::permission-icon {
  display: none;
}

Consignes relatives au style

Pour obtenir des conseils complets sur le style de l'élément <permission>, y compris les bonnes pratiques et les restrictions, consultez les consignes de style <permission>. Cette ressource fournit des instructions détaillées pour vous aider à styliser efficacement l'élément dans vos applications.

Prise en charge étendue des plates-formes et des fonctionnalités

L'élément <permission> est désormais compatible avec d'autres plates-formes et fonctionnalités :

  • Prise en charge d'Android : l'élément est désormais fonctionnel sur les appareils Android, ce qui élargit son applicabilité sur différentes plates-formes utilisateur.
  • Prise en charge de la géolocalisation : vous pouvez désormais demander des autorisations type="geolocation" à l'aide de l'élément <permission> avec un attribut booléen preciselocation supplémentaire. Bien que l'attribut preciselocation n'affecte que la formulation de la requête, nous nous efforçons de différencier les autorisations de localisation approximative et précise dans les prochaines mises à jour.

Conclusions

Ces améliorations apportées à l'élément <permission> s'inscrivent dans nos efforts continus pour simplifier les demandes d'autorisation et améliorer l'expérience utilisateur sur le Web. Nous vous encourageons à tester ces nouvelles fonctionnalités et à nous faire part de vos commentaires pour nous aider à affiner et à développer cette fonctionnalité.