Microsoft aggiunge la scheda Livelli compositi nello strumento Vista 3D

Microsoft sorprende gli sviluppatori web con una nuova funzionalità inserita nel suo Strumento di visualizzazione 3D, che fa parte degli strumenti di sviluppo (Dev Tools). Annunciata martedì, la funzionalità chiamata scheda Layers compositi si unirà ad altri strumenti di 3D View utilizzati per affrontare i normali problemi di sviluppo Web, come barre di scorrimento non necessarie, problemi di stacking dell'indice z e complessità DOM.

La funzione Livelli compositi ha lo scopo di frazionare la pagina web nel giusto numero di livelli. Microsoft Edge Senior Product Manager Patrizio Brosset dice che sarà utile quando i componenti sono animati o cambiano indipendentemente dal resto. Si può ricordare che Microsoft Edge DevTools aveva in precedenza uno strumento Layers separato che offriva le stesse funzionalità. Tuttavia, l'azienda ha deciso di rimuovere il pannello, risultando nella sua fusione con lo strumento 3D View.

In un post sul blog che annuncia l'arrivo della nuova funzionalità, Brosset spiega anche quanto siano importanti i livelli e come accadano sostanzialmente sul web discutendo dell'attività dei motori di rendering del browser ad alto livello. Secondo lui, un motore di browser segue una serie di passaggi per passare da HTML e CSS ai pixel su uno schermo. Queste procedure includono l'analisi del codice HTML e la creazione dell'albero DOM, l'analisi del codice CSS e l'acquisizione di informazioni su stile e layout, la produzione di una nuova struttura ad albero e il disegno della pagina sullo schermo.

"Durante quest'ultimo passaggio, il motore può decidere di dipingere la pagina in una volta sola, o di dividerla in più livelli, dipingerli individualmente e quindi comporre l'immagine finale da essi", osserva Brosset. “Ci sono specifiche proprietà CSS ed elementi HTML che fanno decidere al motore di creare un livello separato. Ad esempio, l'utilizzo di una proprietà di trasformazione 3D o della proprietà di modifica consente al motore di creare livelli. In questo modo, quando il contenuto di questi livelli cambia, il motore deve solo ridipingere questi singoli livelli e non l'intera finestra".

Facendo clic sulla scheda Livelli compositi verranno mostrati agli utenti i livelli creati, in cui il loro elenco viene visualizzato nella barra laterale sul lato sinistro. Lo strumento evidenzierà anche le cose nella scena 3D e facendo clic sui livelli fornirà agli utenti informazioni preziose su di essi, come le dimensioni.

"Come sviluppatore web, può essere molto utile sapere se una parte della pagina che intendi animare è, in effetti, nel suo stesso livello", aggiunge. “Se lo è, puoi essere certo che durante la riproduzione dell'animazione, non sarà necessario ridipingere anche il resto della pagina. Ma è altrettanto importante controllare di non creare accidentalmente troppi livelli, poiché ognuno ha bisogno di memoria".