Miglioramenti all'elemento <permission> proposto

Thomas Steiner

Pubblicato: 12 maggio 2025

L'elemento HTML <permission> proposto è ancora in fase di prova dell'origine, mentre il team di Chrome lo perfeziona, basandosi sulle fondamenta gettate nella nostra prova dell'origine iniziale. Questo post illustra i miglioramenti che mirano a offrirti maggiore flessibilità e controllo quando richiedi le autorizzazioni all'interno delle applicazioni web. Per una panoramica completa dell'introduzione dell'elemento <permission> e delle sue funzionalità iniziali, consulta il nostro articolo precedente Una prova dell'origine per un nuovo elemento HTML <permission>.

Supporto dei contenuti per l'esperienza utente di riserva

L'elemento <permission> è stato inizialmente definito come elemento vuoto senza contenuto fino a Chrome 136. A partire da Chrome 137 supporta i contenuti, il che significa che ora è obbligatorio contrassegnarli con tag di apertura e chiusura:

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

Questa modifica ti consente di includere interfacce utente di riserva all'interno del contenuto dell'elemento. Questi fallback vengono visualizzati nei browser che non supportano l'elemento <permission> o quando viene specificato un attributo type non supportato. In questo modo, si garantisce un degrado più graduale e una migliore esperienza utente in diversi ambienti browser.

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

Rilevamento più dettagliato delle funzionalità programmatiche

Per aiutarti a determinare il supporto per tipi di autorizzazioni specifici, abbiamo introdotto un metodo statico, isTypeSupported():

HTMLPermissionElement.isTypeSupported('geolocation');

Questo metodo restituisce un valore booleano che indica se il tipo di autorizzazione specificato è supportato. In combinazione con il rilevamento delle funzionalità esistente, typeof HTMLPermissionElement !== 'undefined', ora puoi assicurarti a livello di programmazione sia il supporto dell'elemento <permission> sia il supporto di tipi di autorizzazioni specifici.

Tieni presente che puoi anche trasmettere più tipi di autorizzazione separati da spazi (ad esempio, "camera microphone") e verrà restituito un valore che indica se la stringa complessiva è un valore "type" valido. Ad esempio, la chiamata di isTypeSupported() con i seguenti parametri restituisce questi risultati:

  • "camera" → true
  • "geolocation" → true
  • "camera geolocation" → false (anche se i tipi sono supportati singolarmente, la combinazione non lo è).

Nomi degli eventi aggiornati

In Chrome 136, abbiamo introdotto due nuovi eventi per sostituire quelli precedenti:

  • onpromptdismiss (sostituisce ondismiss)
  • onpromptaction (sostituisce onresolve)

Questi nuovi eventi forniscono una semantica più chiara e si allineano meglio al comportamento dell'elemento. Gli eventi meno recenti verranno ritirati in Chrome 138, pertanto ti consigliamo di aggiornare i gestori di eventi di conseguenza.

Supporto delle icone

Stiamo lavorando per abilitare il supporto delle icone all'interno dell'elemento <permission>, previsto per Chrome 138. Questa funzionalità ti consente di visualizzare icone predefinite corrispondenti al tipo di autorizzazione, con opzioni di stile limitate, ad esempio regolazioni di colore e dimensioni. I dettagli esatti dell'API sono ancora in fase di finalizzazione. 

Gli esempi riportati di seguito mostrano il colore predefinito, un colore di riempimento diverso e nessun colore di riempimento, ma con un contorno nero.

Stile predefinito

Rendering predefinito dell&#39;icona.

Il colore predefinito dell'icona è lo stesso del colore del testo dell'elemento di autorizzazione.

Stile modificato

I seguenti esempi mostrano modifiche esemplari allo stile predefinito.

Modifica del colore dell'icona

::permission-icon {
  fill: black;
}

Rendering modificato con icona nera piena.

Modifica del contorno dell'icona

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

Rendering modificato con icona del contorno nero.

Disattivare l'icona

Una volta lanciata, l'icona verrà attivata per impostazione predefinita. Se vuoi disattivare l'icona, puoi farlo utilizzando il seguente CSS

::permission-icon {
  display: none;
}

Linee guida per lo stile

Per indicazioni complete sullo stile dell'elemento <permission>, incluse best practice e limitazioni, consulta le linee guida di stile per <permission>. Questa risorsa fornisce istruzioni dettagliate per aiutarti a definire lo stile dell'elemento all'interno delle tue applicazioni in modo efficace.

Supporto esteso di piattaforme e funzionalità

L'elemento <permission> ora supporta piattaforme e funzionalità aggiuntive:

  • Supporto di Android: l'elemento è ora funzionale sui dispositivi Android, ampliando la sua applicabilità su diverse piattaforme utente.
  • Supporto della geolocalizzazione:ora puoi richiedere le autorizzazioni type="geolocation" utilizzando l'elemento <permission> con un attributo booleano preciselocation aggiuntivo. Anche se l'attributo preciselocation influisce solo sulla formulazione del prompt, stiamo lavorando attivamente per differenziare le autorizzazioni di accesso alla posizione approssimativa e precisa nei futuri aggiornamenti.

Conclusioni

Questi miglioramenti dell'elemento <permission> fanno parte del nostro impegno continuo per semplificare le richieste di autorizzazione e migliorare l'esperienza utente sul web. Ti invitiamo a sperimentare queste nuove funzionalità e a fornire un feedback per aiutarci a perfezionare e sviluppare questa funzionalità.