Inert è un attributo HTML capace di disabilitare ogni evento che avverrà all'interno del contenitore in cui è applicato. Vediamo una sezione di codice per capire meglio questo concetto.
<div> <button>Click</button> </div> <div inert> <button>Non funziono</button> </div>
Come facilmente comprensibile, il secondo bottone non avrà alcuna funzionalità.
L'utilizzo di questo attributo è utile quando si vuole impedire l'accesso ad un controllo in fase di compilazione di un form, o quando, all'apertura di una modale, si vuole evitare che la pagina sottostante sia attiva.
Attraverso l'attributo Inert si disabiliteranno anche tutti i side-effects di accessibilità: un elemento all'interno di un div marcato con inert sarà automaticamente evitato da eventuali lettori di testo.
Ma se dal lato dell'accessibitilà possiamo considerarci soddisfatti, da quello dell'usabilità dobbiamo ancora lavorare in quanto un elemento inert risulta visivamente identico a uno non inert; per questa ragione, dobbiamo scrivere alcune righe di CSS che ci permetteranno di mostrare l'elemento diverso dallo standard.
[inert], [inert] * { opacity: 0.5; pointer-events: none; cursor: default; user-select: none; }
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Collegare servizi a Azure Container App con i service connector
Velocizzare l'installazione delle dipendenze in un workflow di GitHub
Migrare un progetto ASP.NET Core da .NET 6 a .NET 7
Raggruppare i parametri di una minimal API in un singolo oggetto in ASP.NET Core
Real world .NET Architecture
Eliminare spazio inutilizzato in un Azure Container Registry
Migrare un repository git da Azure DevOps a GitHub
Usare il throttling per limitare la frequenza degli eventi in Blazor
Utilizzare i metodi Linq MinBy e MaxBy per semplificare le ricerche degli elementi minimi e massimi in liste di oggetti complessi con LINQ
Utilizzare l'attributo autofill del CSS
Montare blob e file share su Azure App Service
Sviluppare applicazioni serverless con Azure Container Apps
I più letti di oggi
- Linting di un Dockerfile con un workflow di GitHub
- Sfruttare la local cache del browser tramite gli ETag in #aspnetcore https://aspit.co/cfc di @crad77 #webapi #aspnetmvc #blazor #cache
- Monitorare i server on-premises con Azure Arc
- 3 metodi JavaScript che ogni applicazione web dovrebbe contenere - Parte 2