L'avvento dei dispositivi mobili con diversi form factor come smartphone e tablet ha obbligato il mondo del web a dotarsi di strumenti per visualizzare correttamente le pagine su ogni device. Tra questi strumenti, le media query rivestono un ruolo fondamentale in quanto permettono di specificare stili CSS in base alle dimensioni e alle capacità del device.
Sebbene le media query siano molto potenti, esistono casi in cui bisogna reagire non tanto al cambiamento delle dimensioni del browser, ma al cambiamento delle dimensioni di un singolo oggetto. Ad esempio, se diamo la possibilità all'utente di cambiare le dimensioni del font, automaticamente cambiano anche le dimensioni del suo contenitore e potremmo dover reagire a questo cambio adattando le dimensioni di altri oggetti o nascondendoli o altro ancora.
In questi casi l'evento resize dell'oggetto window non può aiutarci in quanto non viene scatenato. Tuttavia possiamo ricorrere all'utilizzo delle Resize Observer API che ci permettono di sottoscriverci al cambiamento di dimensioni di uno o più oggetti.
const observer = new ResizeObserver(entries => { for (let entry of entries) { // codice } }); resizeObserver.observe(document.querySelector('#mydiv'));
Come si vede dal codice, la classe ResizeObserver accetta in input nel costruttore un callback che viene invocato quando un oggetto viene ridimensionato dal browser. Successivamente, viene chiamato il metodo observe al quale viene passata la lista di oggetti di cui osservare le dimensioni.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
3 metodi JavaScript che ogni applicazione web dovrebbe contenere - Parte 2
Configurare dependabot per aggiornare le dipendenze di terze parti con GitHub Actions
Ricevere avvisi su metriche dei server Azure Arc
Evitare la command injection in un workflow di GitHub
Sfruttare al massimo i topic space di Event Grid MQTT
Miglioramenti nell'accessibilità con Angular CDK
Eseguire operazioni con timeout in React
Gestire domini wildcard in Azure Container Apps
Utilizzare la libreria Benchmark.NET per misurare le performance
Utilizzare ChatGPT con Azure OpenAI
Creazione di componenti personalizzati in React.js con Tailwind CSS
Eseguire una GroupBy per entity in Entity Framework