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
Creazione di plugin per Tailwind CSS: espandere le Funzionalità del Framework
Ottimizzare la latenza in Blazor 8 tramite InteractiveAuto render mode
Ottenere il contenuto di una cartella FTP con la libreria FluentFTP
Routing statico e PreRendering in una Blazor Web App
Hosting di componenti WebAssembly in un'applicazione Blazor static
Creare un'applicazione React e configurare Tailwind CSS
Applicare il versioning ai nostri endpoint ASP.NET Core Minimal API
Eseguire attività con Azure Container Jobs
Usare lo spread operator con i collection initializer in C#
Configurare policy CORS in Azure Container Apps
Utilizzare la libreria Benchmark.NET per misurare le performance
Supportare il sorting di dati tabellari in Blazor con QuickGrid
I più letti di oggi
- Riordinare le righe di una GridView di ASP.NET con jQuery
- Creazione di un alarm con suono personalizzato con Windows Phone 7.1
- Utilizzare la session affinity con Azure Container Apps
- Blue-green deployment con Azure Web App e DevOps
- Ed infine anche il calendario :)
- Configurare la diagnostica di Azure attraverso Visual Studio
- Recuperare la data di creazione di un tag tramite una pipeline YAML di Azure DevOps
- Microsoft Security Bulletin MS05-002
- .NET Core e dispositivi IoT
- Eseguire attività pianificate con Azure Container Jobs