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
Semplificare il deployment di siti statici con Azure Static Web App
Sfruttare lo streaming di una chiamata Http da Blazor
Utilizzare un service principal per accedere a Azure Container Registry
Short-circuiting della Pipeline in ASP.NET Core
Utilizzare la libreria Benchmark.NET per misurare le performance
Limitare le richieste lato server con l'interactive routing di Blazor 8
Eseguire query manipolando le liste contenute in un oggetto mappato verso una colonna JSON
Utilizzare la session affinity con Azure Container Apps
Generare file PDF da Blazor WebAssembly con iText
Sviluppare un'interfaccia utente in React con Tailwind CSS e Preline UI
Personalizzare l'errore del rate limiting middleware in ASP.NET Core
Generare file per il download da Blazor WebAssembly