Wednesday, 11 April, 2018 UTC
Summary
The missing 10%
Building a rendering dependency tree with CSS custom properties
<link>-in-<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
main and comments in the left column blocks reading of theabout-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
--gloop to 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.Writing that title made me feel really smart.
The HTML
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.initial.css
We hide all the area we’re not apt to render yet, then create a “blocker” custom property for each section.
main.css
The main content doesn’t have any render faith. As soon as the CSS loads it unsets its blocker (using
initial) and act itself.comments.css
The comments shouldn’t give before the main content, so the saying blocker is linked to
--main-blocker. .comments convert visible once this CSS loads and --main-blocker is unset.about-me.css
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,
600px .about-me displays as soon as its CSS loads.footer.css
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.--about-me-blocker See more:
Learn animation using CSS3, Javascript and HTML5
12 Must Have HTML5 Text Editors
Best ways to learn HTML in 2015
The post CSS Loading with Custom Properties appeared first on I'm Programmer.