Microsoft lisää Yhdistelmätasot-välilehden 3D-näkymätyökaluun

Lukuajan kuvake 3 min. lukea


Lukijat auttavat tukemaan MSpoweruseria. Saatamme saada palkkion, jos ostat linkkien kautta. Työkaluvihje-kuvake

Lue ilmoitussivumme saadaksesi selville, kuinka voit auttaa MSPoweruseria ylläpitämään toimitustiimiä Lue lisää

Yhdistelmät tasot -välilehti 3D-näkymätyökalussa
3D-näkymätyökalun Yhdistelmät tasot -välilehdellä näet luodut tasot.

Microsoft yllättää verkkokehittäjät uudella ominaisuudella, joka on lisätty siihen 3D-näkymätyökalu, joka on osa kehitystyökaluja (Dev Tools). Tiistaina julkistettu ominaisuus nimeltä Composted Layers -välilehti liittyy muihin 3D View -työkalujen työkaluihin, joita käytetään tavallisten web-kehitysongelmien, kuten tarpeettomien vierityspalkkien, z-indeksien pinoamisongelmien ja DOM-monimutkaisuuden ratkaisemiseen.

Yhdistelmätasot-ominaisuuden tarkoituksena on jakaa verkkosivu oikeaan määrään tasoja. Microsoft Edge Vanhempi tuotepäällikkö Patrick Brosset sanoo, että siitä on hyötyä, kun komponentit animoidaan tai muuttuvat muista riippumatta. Voidaan muistaa, että Microsoft Edge DevToolsilla oli aiemmin erillinen Layers-työkalu, joka tarjosi samat toiminnot. Yritys kuitenkin päätti poistaa sen paneelin, mikä johti sen yhdistämiseen 3D-näkymätyökaluun.

Blogiviestissä, jossa kerrotaan uuden ominaisuuden saapumisesta, Brosset kertoo myös kuinka tärkeitä tasot ovat ja miten ne pohjimmiltaan tapahtuvat verkossa keskustelemalla korkealla tasolla selaimen renderöintikoneiden toiminnasta. Hänen mukaansa selainmoottori seuraa sarjaa vaiheita siirtyäkseen HTML:stä ja CSS:stä pikseleihin näytöllä. Näitä toimenpiteitä ovat HTML-koodin jäsentäminen ja DOM-puun luominen, CSS-koodin jäsentäminen ja tyyli- ja asettelutietojen hankkiminen, uuden puurakenteen tuottaminen ja sivun maalaus näytölle.

"Tämän viimeisen vaiheen aikana kone voi päättää maalata sivun yhdellä kertaa tai jakaa sen useisiin kerroksiin, maalata ne yksitellen ja sitten muodostaa niistä lopullisen kuvan", Brosset huomauttaa. "On tiettyjä CSS-ominaisuuksia ja HTML-elementtejä, jotka saavat moottorin päättämään erillisen kerroksen luomisesta. Esimerkiksi 3D-muunnosominaisuuden tai will-change-ominaisuuden käyttäminen saa moottorin luomaan tasoja. Tällä tavalla, kun näiden kerrosten sisältö muuttuu, moottorin tarvitsee maalata uudelleen vain nämä yksittäiset kerrokset, ei koko näkymää."

Yhdistelmätasot-välilehden napsauttaminen näyttää käyttäjille luodut tasot, jolloin heidän luettelonsa näkyy sivupalkissa vasemmalla. Työkalu korostaa myös 3D-näkymän asioita, ja tasojen napsauttaminen antaa käyttäjille arvokasta tietoa niistä, kuten koosta.

"Verkkokehittäjänä voi olla erittäin hyödyllistä tietää, onko sivun osa, jonka aiot animoida, todellakin omassa kerroksessaan", hän lisää. ”Jos on, voit olla varma, että animaation toiston aikana sivun muuta osaa ei tarvitse maalata uudelleen. Yhtä tärkeää on kuitenkin varmistaa, että et myöskään luo vahingossa liikaa tasoja, sillä jokainen tarvitsee muistia."