The missing 10%
<body> blocks the parse while CSS loads, meaning that translation is blocked for all consecutive content.
This is perfect for mobile, where each section’s CSS blocks itself and all following sections, but on the desktop, the CSS for
comments in the left column blocks reading of the
about-me right column, even if
about-me‘s CSS loads first. This is because the blocking is based on origin order, but in this design, it’d be fine for the right column to display before the left column.
We want to build a need tree where each element is render-blocked until other precise elements have rendered. Also, assurance needs to be able to adjust when viewport width changes. Sounds fun, right?
CSS custom properties
MDN has a great article on CSS custom properties, but for the sake of this article, here’s all you need to know…
Here we’re wanting to know the page background to be the value of a custom property,
--gloop else fallback to.
red As a result, the background is red. But if we added:
…we’ve set the custom property
green, so now the page background is green. But if we added:
initial gets limited treatment here. It effectively unsets,
--gloop so now the page background is back to red.
Building a rendering dependency tree with CSS custom properties
Writing that title made me feel really smart.
So we load
/initial.css via a
<link>, or we could inline it, as great as it blocks rendering. But we load all the more stylesheets asynchronously.
We hide all the area we’re not apt to render yet, then create a “blocker” custom property for each section.
The main content doesn’t have any render faith. As soon as the CSS loads it unsets its blocker (using
initial) and act itself.
The comments shouldn’t give before the main content, so the saying blocker is linked to
.comments convert visible once this CSS loads and
--main-blocker is unset.
Similar to above,
.about-me bank on its own CSS and the comments. But when the page is wider it’s visible in two columns, so we no lengthy want
.about-me to depend on the comments in terms of rendering:
Done! When the viewport width is over,
.about-me displays as soon as its CSS loads.
The footer shouldn’t render until together the main content & about my sections have accomplished. To achieve this
--footer-blocker gets its value from,
--main-blocker but once
--main-blocker is unset it decline back to getting its value from.