Verbesserungen am vorgeschlagenen -Element

Thomas Steiner

Veröffentlicht: 12. Mai 2025

Das vorgeschlagene HTML-Element <permission> befindet sich noch in der Testphase, da das Chrome-Team es weiterentwickelt und dabei auf den Grundlagen aufbaut, die in unserem ersten Ursprungstest gelegt wurden. In diesem Beitrag werden Verbesserungen vorgestellt, die Ihnen mehr Flexibilität und Kontrolle beim Anfordern von Berechtigungen in Webanwendungen bieten sollen. Eine umfassende Übersicht über die Einführung des <permission>-Elements und seine ursprünglichen Funktionen finden Sie in unserem früheren Artikel An origin trial for a new HTML <permission> element.

Inhaltsunterstützung für Fallback-UX

Das <permission>-Element wurde bis Chrome 136 als leeres Element ohne Inhalt definiert. Ab Chrome 137 wird Inhalt unterstützt. Das bedeutet, dass er jetzt mit öffnenden und schließenden Tags gekennzeichnet werden muss:

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

Durch diese Änderung können Sie Fallback-Benutzeroberflächen in den Inhalt des Elements einfügen. Diese Fallbacks werden in Browsern angezeigt, die das <permission>-Element nicht unterstützen, oder wenn ein nicht unterstütztes type-Attribut angegeben ist. So wird ein reibungsloserer Übergang und eine verbesserte Nutzerfreundlichkeit in verschiedenen Browserumgebungen gewährleistet.

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

Detailliertere programmatische Feature-Erkennung

Damit Sie leichter herausfinden können, ob bestimmte Berechtigungstypen unterstützt werden, haben wir die statische Methode isTypeSupported() eingeführt:

HTMLPermissionElement.isTypeSupported('geolocation');

Diese Methode gibt einen booleschen Wert zurück, der angibt, ob der angegebene Berechtigungstyp unterstützt wird. In Kombination mit der vorhandenen Funktionserkennung typeof HTMLPermissionElement !== 'undefined' können Sie jetzt programmatisch sowohl die Unterstützung für das <permission>-Element als auch die Unterstützung für bestimmte Berechtigungstypen sicherstellen.

Sie können auch mehrere durch Leerzeichen getrennte Berechtigungstypen übergeben (z. B. "camera microphone"). Die Funktion gibt dann zurück, ob der gesamte String ein gültiger "type"-Wert ist. Wenn Sie isTypeSupported() beispielsweise mit den folgenden Parametern aufrufen, werden diese Ergebnisse zurückgegeben:

• "camera" → true
• "geolocation" → true
• "camera geolocation" → false (Die Typen werden zwar einzeln unterstützt, die Kombination jedoch nicht.)

Aktualisierte Ereignisnamen

In Chrome 136 haben wir zwei neue Ereignisse eingeführt, die die bisherigen ersetzen:

• onpromptdismiss (ersetzt ondismiss)
• onpromptaction (ersetzt onresolve)

Diese neuen Ereignisse bieten eine klarere Semantik und stimmen besser mit dem Verhalten des Elements überein. Die älteren Ereignisse werden in Chrome 138 eingestellt. Wir empfehlen daher, Ihre Event-Handler entsprechend zu aktualisieren.

Symbolunterstützung

Wir arbeiten daran, die Unterstützung von Symbolen im <permission>-Element zu ermöglichen. Dies ist für Chrome 138 geplant. Mit dieser Funktion können Sie vordefinierte Symbole für den Berechtigungstyp anzeigen lassen. Die Styling-Optionen sind begrenzt und umfassen nur Anpassungen von Farbe und Größe. Die genauen API-Details werden noch finalisiert. 

Die folgenden Beispiele zeigen die Standardeinstellung, eine andere Füllfarbe und keine Füllfarbe, aber mit einem schwarzen Umriss.

Standardstil

Die Standardfarbe des Symbols entspricht der Textfarbe des Berechtigungselements.

Geänderte Formatierung

Die folgenden Beispiele zeigen beispielhafte Änderungen am Standardstil.

Änderung der Symbolfarbe

::permission-icon {
  fill: black;
}

Änderung des Symbolumrisses

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

Symbol deaktivieren

Nach der Einführung ist das Symbol standardmäßig aktiviert. Wenn Sie das Symbol deaktivieren möchten, können Sie dazu das folgende CSS verwenden:

::permission-icon {
  display: none;
}

Stilrichtlinien

Eine umfassende Anleitung zum Formatieren des <permission>-Elements, einschließlich Best Practices und Einschränkungen, finden Sie in den Richtlinien zum Formatieren von <permission>. In dieser Ressource finden Sie eine detaillierte Anleitung dazu, wie Sie das Element in Ihren Anwendungen effektiv gestalten können.

Erweiterte Unterstützung von Plattformen und Funktionen

Das Element <permission> unterstützt jetzt zusätzliche Plattformen und Funktionen:

• Android-Unterstützung:Das Element funktioniert jetzt auf Android-Geräten und kann somit auf verschiedenen Nutzerplattformen eingesetzt werden.
• Unterstützung der Geolocation:Sie können jetzt type="geolocation"-Berechtigungen mit dem <permission>-Element mit einem zusätzlichen booleschen Attribut preciselocation anfordern. Das Attribut preciselocation wirkt sich nur auf die Formulierung des Prompts aus. Wir arbeiten jedoch aktiv daran, in zukünftigen Updates zwischen Berechtigungen für den ungefähren und den genauen Standort zu unterscheiden.

Zusammenfassung

Diese Verbesserungen am <permission>-Element sind Teil unserer fortlaufenden Bemühungen, Berechtigungsanfragen zu optimieren und die Nutzerfreundlichkeit im Web zu verbessern. Wir empfehlen Ihnen, diese neuen Funktionen auszuprobieren und Feedback zu geben, damit wir sie weiter verbessern können.