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
Usare i settings di serializzazione/deserializzazione di System.Text.Json di ASP.NET all'interno di un'applicazione non web
Utilizzare il metodo ExceptBy per eseguire operazione di sottrazione tra liste
Bloccare l'esecuzione di un pod in mancanza di un'artifact attestation di GitHub
Estrarre dati randomici da una lista di oggetti in C#
Utilizzare il metodo IntersectBy per eseguire l'intersection di due liste
Effettuare il refresh dei dati di una QuickGrid di Blazor
Usare i servizi di Azure OpenAI e ChatGPT in ASP.NET Core con Semantic Kernel
Utilizzare WhenEach per processare i risultati di una lista di task
.NET Aspire per applicazioni distribuite
Proteggere le risorse Azure con private link e private endpoints
Change tracking e composition in Entity Framework
Sfruttare GPT-4o realtime su Azure Open AI per conversazioni vocali