why can my browser still open an html file not served through a static file server?

Question

Just wondering how/why this works, when I'm making a simple html file and linking in some css, then dragging my html file into the browser, no static web server is needed for me to view the file.

Why is that so..

I'm looking at my browser's network tab, and no request is made for the css file, and my browser still displays it perfectly..

Is there a way to do without a static file server on the web for html, css, js files, like when dragging and dropping a file into a browser?

Just going back and requestionning basics here..

Thanks in advance!

Answer 1

Because the link to your CSS file is relative, and your CSS file is accessible locally. Browsers can be used to access local files, not just files on the Internet.

When working with links, you may see just the name of the file referenced, as such:

<a href="file.html">Link</a>

This is known as a relative link. file.html is relative to wherever the document is that is linking to it. In this case, the two files would be in the same folder.

There's a second type of link, known as an absolute URL, where the full path is specified.

Consider a typical absolute website link:

<a href="http://website.com/file.html">Link</a>

With a local file, this would essentially be:

<a href="file://[YOUR WEBSITE]/file.html">Link</a>

The file protocol can be used to access local files.

Considering both the homepage (presumably index.html) and file.html would live in the same folder on both a web server and your local machine, <a href="file.html">Link</a> would work for either scenario. In fact, with a relative link, the location of the second file is automatically determined based on the location of the first file. In my example, index.html would live at file://[YOUR WEBSITE]/index.html, so your browser is smart enough to known to look in file://[YOUR WEBSITE]/ when searching for any relative URLs.

Note that the same scenario applies to any other file! <link> and <script> tags will look for files in the exact same way -- that includes your stylesheet :)

Hope this helps!