Resources aren’t requested by CSS, but by the DOM

Avatar of Chris Coyier
Chris Coyier on

UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today.

This is a good tweet from Harry:

I like it because, as he says, it’s the correct way to think about it. It helps form a mental model of how websites work.

Just to spell it out a bit more…

/*
  Just because I'm in the CSS, doesn't mean I'll load!
  In order for `myfont.woff2` to load, a selector needs to 
  set `font-family: 'MyWebFont';` AND something in the DOM
  needs to match that selector for that file to be requested.
*/
@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff2') format('woff2');
}

/*
  Just because I'm in the CSS, doesn't mean I'll load!
  In order for `whatever.jpg` to load, the selector
  `.some-element` needs to be in the DOM. 
*/
.some-element {
  background-image: url(whatever.jpg);
}