Thursday, February 25, 2021
More

    CSS Loading with Custom Properties

    Must Read

    Programmerhttp://www.improgrammer.net
    We started this site to inspire young minds to motivate and encourage them towards Programming Language. In this site you will get programming tutorials, tech, programming facts, programming fun and programming blogs.

    The missing 10%

    <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.

    Building a rendering dependency tree with CSS custom properties

    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

    Latest Articles

    More Recipes Like This