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

The image shows a tweet highlighting a crucial concept in web development: resources aren't loaded solely because they're referenced in CSS; the DOM must also request them.

This insightful tweet emphasizes the correct mental model for understanding website functionality. Let's clarify this further:

/*  CSS alone doesn't guarantee loading.  To load 'myfont.woff2',  'font-family: 'MyWebFont';' must be set in a selector *AND* an element in the DOM must match that selector. */
@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff2') format('woff2');
}

/* Similarly, 'whatever.jpg' only loads if the selector '.some-element' exists in the DOM. */
.some-element {
  background-image: url('whatever.jpg');
}

In essence, the CSS provides instructions, but the DOM dictates which resources are actually fetched and used by the browser to render the webpage. The presence of a resource in the CSS is a necessary but not sufficient condition for it to be loaded.

The above is the detailed content of Resources aren't requested by CSS, but by the DOM. For more information, please follow other related articles on the PHP Chinese website!