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

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);
}