Verbeteringen aan de voorgestelde <toestemming> element

Thomas Steiner

Gepubliceerd: 12 mei 2025

Het voorgestelde HTML <permission> -element bevindt zich nog in de testfase, terwijl het Chrome-team het verder verfijnt en voortbouwt op de basis die is gelegd in onze eerste testfase . In dit bericht worden verbeteringen besproken die u meer flexibiliteit en controle moeten bieden bij het aanvragen van machtigingen binnen webapplicaties. Raadpleeg ons eerdere artikel Een testfase voor een nieuw HTML <permission> -element voor een uitgebreid overzicht van de introductie en de initiële mogelijkheden van het <permission> -element.

Inhoudelijke ondersteuning voor fallback UX

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

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

Met deze wijziging kunt u fallback-gebruikersinterfaces opnemen in de content van het element. Deze fallbacks worden weergegeven in browsers die het <permission> -element niet ondersteunen of wanneer een niet-ondersteund type is opgegeven. Dit zorgt voor een elegantere degradatie 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>

Meer gedetailleerde detectie van programmatische functies

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

HTMLPermissionElement.isTypeSupported('geolocation');

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

Houd er rekening mee dat u ook meerdere door spaties gescheiden machtigingstypen kunt doorgeven (bijvoorbeeld "camera microphone" ) en dat deze optie retourneert of de gehele string een geldige "type" waarde is. Als u bijvoorbeeld isTypeSupported() aanroept met de volgende parameters, worden de volgende resultaten weergegeven:

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

Bijgewerkte gebeurtenisnamen

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

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

Deze nieuwe gebeurtenissen zorgen voor een duidelijkere semantiek en sluiten beter aan bij het gedrag van het element. De oudere gebeurtenissen worden in Chrome 138 niet meer ondersteund, dus we raden aan uw gebeurtenishandlers dienovereenkomstig bij te werken.

Icoon ondersteuning

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

In de volgende voorbeelden ziet u de standaardinstelling, een andere opvulkleur en geen opvulkleur maar met een zwarte omtrek.

Standaardstyling

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

Aangepaste styling

De volgende voorbeelden tonen voorbeeldwijzigingen van de standaardstyling.

Verandering van de pictogramkleur

::permission-icon {
  fill: black;
}

Wijziging van de pictogramomtrek

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

Schakel het pictogram uit

Zodra het is gestart, is het pictogram standaard ingeschakeld. Als u het pictogram wilt uitschakelen, kunt u dit doen met behulp van de volgende CSS-code.

::permission-icon {
  display: none;
}

Stijlrichtlijnen

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

Uitgebreide platform- en capaciteitsondersteuning

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

• Android-ondersteuning: het element is nu functioneel op Android-apparaten, waardoor de toepasbaarheid ervan op verschillende gebruikersplatforms wordt vergroot.
• Ondersteuning voor geolocatie: U kunt nu type="geolocation" -machtigingen aanvragen met het <permission> -element met een extra booleaans kenmerk preciselocation . Hoewel het kenmerk preciselocation ' alleen van invloed is op de formulering van de prompt, werken we actief aan het onderscheid tussen grove en precieze locatiemachtigingen in toekomstige updates.

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 kunnen verfijnen en verder kunnen ontwikkelen.