CSS Under The Hood

Daily Standup

April 25, 2018

I’m back! Back to a normal schedule after some work events & travel. Slowly getting back into the coding projects I left off with a few weeks ago which has been good! Big help: I left each one in a place that’s turned out to be really straightforward to pick up again…tips for future me!

CSS Meetup Group

Tonight I went to the inaugural meetup for the new CSS.la group. In one of the projects it’s a lot of CSS I’ve been working on so I thought it would be good to talk to some more people who are doing the same. We learned about the basics of how CSS works under the hood and got some good info I didn’t really know before!:

  • The steps to rendering a web page:
    • request goes out
    • response comes back in bytes
    • bytes are translated into strings of text
    • tokenizer translates the text into nodes which get parsed and put into a tree structure (the DOM)
    • when a node contains a link to a stylesheet another request goes to the server
    • server responds with more bytes which are translated
    • CSS strings are tokenized, parsed and put into a tree structure (CSS OM)
    • the object models (DOM & CSS OM) are combined into a render tree
    • the browser uses the render tree to layout the page and determine where everything will go (this is called reflow)
    • then it paints all of the individual nodes
    • then it puts the painted nodes where they go on the page (this is called composite)
  • How different CSS properties trigger different stages of the above process: for example changes to opacity and transform only trigger a new composite whereas something else might trigger a new reflow, paint, and composite. This has effects on performance. CSS Triggers is a good site for learning about this.
  • In the dev tools console you can read all CSS properties on all nodes with document.styleSheets if you need to debug
  • Houdini is a CSS translator to let you try new CSS properties before they’re widely supported

Up Next

Working on 2 websites currently & eager to finish one so that I can start working on something new. The other one will take a while.

Tags icon Stacked price tag looking things Tags: