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

This is a good tweet from Harry:

Simple yet significant thing all developers should keep in mind: CSS resources (fonts, background images) are not requested by your CSS, but by the DOM node that needs them [Note: slight oversimplification, but the correct way to think about it.]

— Harry Roberts (@csswizardry) September 10, 2021

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

---

The post Resources aren’t requested by CSS, but by the DOM appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

from CSS-Tricks https://ift.tt/3CA2ImH
via IFTTT