Differences In JS & CSS File Inclusion
Recently I made a startling discovery. I discovered that the inclusion methods for JS and CSS in a regular HTML document are not as alike as they may seem. So I'm posting a post to let the world take part in my recent revelation. It's best shown with an example, so here goes.
Say I have a site with a file structure like this:
/root/ /root/files/css/ /root/files/img/ /root/files/js/ /root/en/ /root/sv/
In one stylesheet, located on
/root/files/css/style.css I include an image file with the following URL:
However, in a JS file, located on
/root/files/js/script.js I have to include the same image file with the following URL:
It took a while before I realized this, and realized why there's a difference. The reason is simply that JS is imported directly into the page where it is included, just like any other server-side scripting language (like PHP, ASP, ETC), so if I include the JS file on
/sv/index.html, then that is where the code is executed, whereas the CSS file remains its own directory and styles the HTML page from a distance. When I include the CSS in
/sv/index.html, the CSS is still located at
Is this one of those 'aha' moments everybody has, or is it just me? Hopefully it's not just me; it might be worth knowing. Thus the post. Have a good day!