Accessing Computed Styles

The computed styles of HTML elements are the values of all CSS properties that were applied after the styles were resolved. The computed styles are accessed through the Window.getComputedStyle() method. It returns an object containing all CSS values of the applied styles.

Unlike Chrome and other web browsers in Prysm you can’t access the styles immediately after the page loads. They are available after the third frame when accessed in the window.onload event and after the second frame after each page layout. The styles are not available immediately because in order to resolve them Prysm has to perform a page layout which is a very heavy operation. It significantly affects the performance. Delaying the resolving of the styles improves both the initial performance and the performance after each page layout. To make sure the styles are available you need to delay the call to getComputedStyle:

requestAnimationFrame(() => {
    requestAnimationFrame(() => {
        requestAnimationFrame(() => {
            const myElement = document.getElementById('element');
            const computedStyles = getComputedStyle(myElement);
        });
    });
});

To avoid manually nesting requestAnimationFrame calls you can wrap the above code in a function. This will improve the readability of the code and it will also make it easier to add delays.

let isLoading = true;
window.addEventListener('load', () => {
    requestAnimationFrame(() => isLoading = false);
}, { capture: true });

function getStyles(callback = () => { }, count, ...callbackArguments) {
    if (count === undefined) count = isLoading ? 3 : 2;

    if (count === 0) {
        return callback(...callbackArguments);
    }
    count--;
    requestAnimationFrame(() => {
        this.getStyles(callback, count, ...callbackArguments);
    });
}

Now you can access the styles like this:

// will delay 2 frames
getStyles(() => {
    let elStyles = getComputedStyle(document.querySelector('.test'));
});

// will delay 3 frames
window.addEventListener('load', () => {
    getStyles(() => {
        let elStyles = getComputedStyle(document.querySelector('.test'));
    });
});