Today I Learned - Rocky Kev

TIL How CSS get added into the DOM

POSTED ON:

TAGS: css html

When a application encounters a CSS file, it'll:

  1. Wait for the file to be downloaded
  2. load the CSS file
  3. create a CSS Object Model. (CSSOM)
  4. Combine the CSSOM with the DOM tree.

At the end, the DOM tree becomes the "Render Tree". (Render Tree is CSSOM + DOM Tree with all the correct stylings)

That step 1 where it waits for the file to be downloaded is render-blocking.

SOURCE: "Simple CSS Hack to Reduce Page Load Time"
https://javascript.plainenglish.io/simple-css-hack-to-reduce-page-load-time-366f7aaaa3be

Related TILs

Tagged: css

TIL the alternate keyword

If 'alternate' appears along with the stylesheet keyword, the linked file is an alternative stylesheet. It won’t be applied to the document, but it will be ready for when we need it.

TIL Logical Properties

For that sweet sweet Internationalization you want to avoid directional words like 'left', 'right', 'top', and 'bottom'.

TIL Using pseudo-classes in your querySelector!

let notTuna = document.querySelectorAll('.sandwich:not(.tuna)')