This can be a good tweet from Harry:
Easy but important factor all builders ought to take into accout: CSS assets (fonts, background photographs) usually are not requested by your CSS, however by the DOM node that wants them [Note: slight oversimplification, but the correct way to think about it.]
— Harry Roberts (@csswizardry) September 10, 2021
I prefer it as a result of, as he says, it’s the proper means to consider it. It helps type a psychological mannequin of how web sites work.
Simply to spell it out a bit extra…
/*
Simply because I am within the CSS, does not imply I will load!
To ensure that `myfont.woff2` to load, a selector must
set `font-family: ‘MyWebFont’;` AND one thing within the DOM
must match that selector for that file to be requested.
*/
@font-face {
font-family: ‘MyWebFont’;
src: url(‘myfont.woff2’) format(‘woff2’);
}
/*
Simply because I am within the CSS, does not imply I will load!
To ensure that `no matter.jpg` to load, the selector
`.some-element` must be within the DOM.
*/
.some-element {
background-image: url(no matter.jpg);
}
The publish Assets aren’t requested by CSS, however by the DOM appeared first on CSS-Tips. You’ll be able to assist CSS-Tips by being an MVP Supporter.
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!