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
Simulare Azure Cosmos DB in locale con Docker
Gestire il routing HTTP in Azure Container App
Selettore CSS :has() e i suoi casi d'uso avanzati
Anonimizzare i dati sensibili nei log di Azure Front Door
Creare una libreria CSS universale: i bottoni
Path addizionali per gli asset in ASP.NET Core MVC
Utilizzare l'espressione if inline in una pipeline di Azure DevOps
Sfruttare GPT-4o realtime su Azure Open AI per conversazioni vocali
Configurare automaticamente un webhook in Azure DevOps
Effettuare il log delle chiamate a function di GPT in ASP.NET Web API
Aggiornare a .NET 9 su Azure App Service
Loggare le query più lente con Entity Framework
I più letti di oggi
- Gestione CSS in Blazor con .NET 9
- Documentare i servizi REST con Swagger e OpenAPI con .NET 9
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- .NET Conference Italia 2024 - Milano
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!