A Microsoft hozzáadja az Összetett rétegek lapot a 3D nézet eszközhöz

A Microsoft egy új funkcióval lepi meg a webfejlesztőket 3D nézet eszköz, amely a Fejlesztői eszközök (Dev Tools) része. A kedden bejelentett, Összetett rétegek lap elnevezésű funkció a 3D View egyéb olyan eszközei mellé fog csatlakozni, amelyeket a szokásos webfejlesztési problémák megoldására használnak, mint például a szükségtelen görgetősávok, a z-index halmozási problémák és a DOM bonyolultsága.

Az Összetett rétegek funkció célja a weboldal megfelelő számú rétegre történő felosztása. Microsoft él Senior Product Manager Patrick Brosset azt mondja, hogy hasznos lesz, ha az összetevők animáltak vagy a többitől függetlenül változnak. Emlékeztetni kell arra, hogy a Microsoft Edge DevTools korábban külön Layers eszközzel rendelkezett, amely ugyanazt a funkciót kínálta. A cég azonban úgy döntött, hogy eltávolítja a panelt, aminek eredményeként egyesült a 3D View eszközzel.

Az új funkció érkezését bejelentő blogbejegyzésben Brosset azt is részletezi, hogy mennyire fontosak a rétegek, és hogyan történnek alapvetően a weben, magas szinten tárgyalva a böngésző-renderelő motorok tevékenységét. Elmondása szerint egy böngészőmotor lépések sorozatát követi, hogy a HTML-től és a CSS-től a képernyő pixeljéig haladjon. Ezek az eljárások magukban foglalják a HTML-kód elemzését és a DOM-fa létrehozását, a CSS-kód elemzését és a stílus- és elrendezési információk megszerzését, egy új fastruktúra létrehozását és az oldal képernyőre festését.

„Az utolsó lépés során a motor dönthet úgy, hogy egy mozdulattal megfesti az oldalt, vagy több rétegre osztja, külön-külön lefesti őket, majd ezekből állítja össze a végső képet” – jegyzi meg Brosset. „Vannak meghatározott CSS-tulajdonságok és HTML-elemek, amelyek miatt a motor úgy dönt, hogy külön réteget hoz létre. Például egy 3D-s transzformációs tulajdonság vagy a will-change tulajdonság használatával a motor rétegeket hoz létre. Ily módon, amikor a rétegek tartalma megváltozik, a motornak csak ezeket az egyes rétegeket kell újrafestenie, nem pedig a teljes nézetablakot.

Az Összetett rétegek fülre kattintva a felhasználók megjelenítik a létrehozott rétegeket, és listájuk a bal oldali oldalsávban jelenik meg. Az eszköz a 3D-s jelenetben lévő dolgokat is kiemeli, és a rétegekre kattintva a felhasználók értékes információkat kapnak azokról, például a méretről.

„Webfejlesztőként nagyon hasznos lehet tudni, hogy az oldal animálni kívánt része valóban a saját rétegében van-e” – teszi hozzá. „Ha igen, akkor biztos lehet benne, hogy az animáció lejátszása közben az oldal többi részét sem kell átfesteni. De ugyanilyen fontos ellenőrizni, hogy véletlenül se hozzon létre túl sok réteget, mivel mindegyikhez memória kell.”