Verbeteringen aan de voorgestelde <toestemming> element

Thomas Steiner

Gepubliceerd: 12 mei 2025

Het voorgestelde HTML-element <permission> bevindt zich nog in een testfase, terwijl het Chrome-team het verder ontwikkelt en voortbouwt op de basis die is gelegd tijdens onze eerste test . In dit bericht worden verbeteringen beschreven die u meer flexibiliteit en controle moeten bieden bij het aanvragen van machtigingen binnen webapplicaties. Voor een uitgebreid overzicht van de introductie van het <permission> -element en de eerste mogelijkheden ervan, verwijzen we u naar ons eerdere artikel Een test voor een nieuw HTML-element <permission> .

Inhoudelijke ondersteuning voor fallback-UX

Het <permission> -element was aanvankelijk gedefinieerd als een leeg element zonder inhoud tot Chrome 136. Vanaf Chrome 137 ondersteunt het inhoud, wat betekent dat het nu verplicht is om het te markeren met openings- en sluitingslabels:

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

Met deze wijziging kunt u alternatieve gebruikersinterfaces in de inhoud van het element opnemen. Deze alternatieve interfaces worden weergegeven in browsers die het <permission> -element niet ondersteunen of wanneer een niet-ondersteund type attribuut is opgegeven. Dit zorgt voor een soepelere werking en een verbeterde gebruikerservaring in verschillende browseromgevingen.

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

Gedetailleerdere programmatische functiedetectie

Om u te helpen bepalen of specifieke machtigingstypen worden ondersteund, hebben we een statische methode geïntroduceerd, isTypeSupported() :

HTMLPermissionElement.isTypeSupported('geolocation');

Deze methode retourneert een boolean die aangeeft of het opgegeven permissietype wordt ondersteund. In combinatie met de bestaande functiedetectie, typeof HTMLPermissionElement !== 'undefined' , kunt u nu programmatisch controleren of zowel het <permission> -element als specifieke permissietypen worden ondersteund.

Merk op dat u ook meerdere door spaties gescheiden permissietypen kunt doorgeven (bijvoorbeeld "camera microphone" ) en dat de functie dan controleert of de gehele tekenreeks een geldige "type" -waarde is. Als u bijvoorbeeld isTypeSupported() aanroept met de volgende parameters, krijgt u deze resultaten:

  • "camera" → true
  • "geolocation" → true
  • "camera geolocation" → false (Hoewel de typen afzonderlijk worden ondersteund, wordt de combinatie niet ondersteund.)

Bijgewerkte evenementnamen

In Chrome 136 hebben we twee nieuwe gebeurtenissen geïntroduceerd ter vervanging van de eerdere:

  • onpromptdismiss (vervangt ondismiss )
  • onpromptaction (vervangt onresolve )

Deze nieuwe gebeurtenissen bieden een duidelijkere semantiek en sluiten beter aan bij het gedrag van het element. De oudere gebeurtenissen worden in Chrome 138 afgekeurd, dus we raden aan uw gebeurtenisafhandelaars dienovereenkomstig bij te werken.

Pictogramondersteuning

We werken eraan om iconenondersteuning binnen het <permission> -element mogelijk te maken, gericht op Chrome 138. Met deze functie kunt u vooraf gedefinieerde iconen weergeven die overeenkomen met het type toestemming, met beperkte stylingopties zoals kleur- en formaataanpassingen. De exacte API-details worden nog afgerond.

De volgende voorbeelden tonen de standaardinstelling, een andere opvulkleur en geen opvulkleur maar met een zwarte omlijning.

Standaardstijl

Standaardweergave van het pictogram.

De standaardkleur van het pictogram is gelijk aan de tekstkleur van het toestemmingselement.

Aangepaste styling

De volgende voorbeelden tonen voorbeeldige aanpassingen aan de standaardstijl.

De kleur van het pictogram wijzigen 

::permission-icon {
  fill: black;
}

Aangepaste weergave met een effen zwart pictogram.

Wijziging van de omtrek van het pictogram 

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

Aangepaste weergave met een pictogram met zwarte omlijning.

Schakel het pictogram uit

Zodra de app is gestart, is het pictogram standaard ingeschakeld. Als je het pictogram wilt uitschakelen, kun je dat doen met de volgende CSS-code.

::permission-icon {
  display: none;
}

Stijlrichtlijnen

Voor uitgebreide richtlijnen over het stylen van het <permission> -element, inclusief best practices en beperkingen, raadpleegt u de stylingrichtlijnen voor <permission> . Deze bron biedt gedetailleerde instructies om u te helpen het element effectief te stylen binnen uw applicaties.

Uitgebreide platform- en functionaliteitsondersteuning

Het <permission> -element ondersteunt nu extra platforms en mogelijkheden:

  • Android-ondersteuning: Het element werkt nu ook op Android-apparaten, waardoor het toepasbaar is op verschillende gebruikersplatformen.
  • Ondersteuning voor geolocatie: U kunt nu toestemmingen type="geolocation" aanvragen met behulp van het <permission> -element met een extra boolean-attribuut preciselocation . Hoewel het attribuut preciselocation alleen de tekst van de prompt beïnvloedt, werken we er actief aan om in toekomstige updates onderscheid te maken tussen grove en precieze locatietoestemmingen.

Conclusies

Deze verbeteringen aan het <permission> -element maken deel uit van onze voortdurende inspanningen om toestemmingsverzoeken te stroomlijnen en de gebruikerservaring op het web te verbeteren. We moedigen u aan om met deze nieuwe functies te experimenteren en feedback te geven, zodat we deze functionaliteit verder kunnen verfijnen en ontwikkelen.

,

Thomas Steiner

Gepubliceerd: 12 mei 2025

Het voorgestelde HTML-element <permission> bevindt zich nog in een testfase, terwijl het Chrome-team het verder ontwikkelt en voortbouwt op de basis die is gelegd tijdens onze eerste test . In dit bericht worden verbeteringen beschreven die u meer flexibiliteit en controle moeten bieden bij het aanvragen van machtigingen binnen webapplicaties. Voor een uitgebreid overzicht van de introductie van het <permission> -element en de eerste mogelijkheden ervan, verwijzen we u naar ons eerdere artikel Een test voor een nieuw HTML-element <permission> .

Inhoudelijke ondersteuning voor fallback-UX

Het <permission> -element was aanvankelijk gedefinieerd als een leeg element zonder inhoud tot Chrome 136. Vanaf Chrome 137 ondersteunt het inhoud, wat betekent dat het nu verplicht is om het te markeren met openings- en sluitingslabels:

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

Met deze wijziging kunt u alternatieve gebruikersinterfaces in de inhoud van het element opnemen. Deze alternatieve interfaces worden weergegeven in browsers die het <permission> -element niet ondersteunen of wanneer een niet-ondersteund type attribuut is opgegeven. Dit zorgt voor een soepelere werking en een verbeterde gebruikerservaring in verschillende browseromgevingen.

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

Gedetailleerdere programmatische functiedetectie

Om u te helpen bepalen of specifieke machtigingstypen worden ondersteund, hebben we een statische methode geïntroduceerd, isTypeSupported() :

HTMLPermissionElement.isTypeSupported('geolocation');

Deze methode retourneert een boolean die aangeeft of het opgegeven permissietype wordt ondersteund. In combinatie met de bestaande functiedetectie, typeof HTMLPermissionElement !== 'undefined' , kunt u nu programmatisch controleren of zowel het <permission> -element als specifieke permissietypen worden ondersteund.

Merk op dat u ook meerdere door spaties gescheiden permissietypen kunt doorgeven (bijvoorbeeld "camera microphone" ) en dat de functie dan controleert of de gehele tekenreeks een geldige "type" -waarde is. Als u bijvoorbeeld isTypeSupported() aanroept met de volgende parameters, krijgt u deze resultaten:

  • "camera" → true
  • "geolocation" → true
  • "camera geolocation" → false (Hoewel de typen afzonderlijk worden ondersteund, wordt de combinatie niet ondersteund.)

Bijgewerkte evenementnamen

In Chrome 136 hebben we twee nieuwe gebeurtenissen geïntroduceerd ter vervanging van de eerdere:

  • onpromptdismiss (vervangt ondismiss )
  • onpromptaction (vervangt onresolve )

Deze nieuwe gebeurtenissen bieden een duidelijkere semantiek en sluiten beter aan bij het gedrag van het element. De oudere gebeurtenissen worden in Chrome 138 afgekeurd, dus we raden aan uw gebeurtenisafhandelaars dienovereenkomstig bij te werken.

Pictogramondersteuning

We werken eraan om iconenondersteuning binnen het <permission> -element mogelijk te maken, gericht op Chrome 138. Met deze functie kunt u vooraf gedefinieerde iconen weergeven die overeenkomen met het type toestemming, met beperkte stylingopties zoals kleur- en formaataanpassingen. De exacte API-details worden nog afgerond.

De volgende voorbeelden tonen de standaardinstelling, een andere opvulkleur en geen opvulkleur maar met een zwarte omlijning.

Standaardstijl

Standaardweergave van het pictogram.

De standaardkleur van het pictogram is gelijk aan de tekstkleur van het toestemmingselement.

Aangepaste styling

De volgende voorbeelden tonen voorbeeldige aanpassingen aan de standaardstijl.

De kleur van het pictogram wijzigen 

::permission-icon {
  fill: black;
}

Aangepaste weergave met een effen zwart pictogram.

Wijziging van de omtrek van het pictogram 

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

Aangepaste weergave met een pictogram met zwarte omlijning.

Schakel het pictogram uit

Zodra de app is gestart, is het pictogram standaard ingeschakeld. Als je het pictogram wilt uitschakelen, kun je dat doen met de volgende CSS-code.

::permission-icon {
  display: none;
}

Stijlrichtlijnen

Voor uitgebreide richtlijnen over het stylen van het <permission> -element, inclusief best practices en beperkingen, raadpleegt u de stylingrichtlijnen voor <permission> . Deze bron biedt gedetailleerde instructies om u te helpen het element effectief te stylen binnen uw applicaties.

Uitgebreide platform- en functionaliteitsondersteuning

Het <permission> -element ondersteunt nu extra platforms en mogelijkheden:

  • Android-ondersteuning: Het element werkt nu ook op Android-apparaten, waardoor het toepasbaar is op verschillende gebruikersplatformen.
  • Ondersteuning voor geolocatie: U kunt nu toestemmingen type="geolocation" aanvragen met behulp van het <permission> -element met een extra boolean-attribuut preciselocation . Hoewel het attribuut preciselocation alleen de tekst van de prompt beïnvloedt, werken we er actief aan om in toekomstige updates onderscheid te maken tussen grove en precieze locatietoestemmingen.

Conclusies

Deze verbeteringen aan het <permission> -element maken deel uit van onze voortdurende inspanningen om toestemmingsverzoeken te stroomlijnen en de gebruikerservaring op het web te verbeteren. We moedigen u aan om met deze nieuwe functies te experimenteren en feedback te geven, zodat we deze functionaliteit verder kunnen verfijnen en ontwikkelen.