Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why does Firefox not use CSS from an local absolute path?

Tags:

html

css

firefox

I have a local HTML file which has a link to a local CSS file. Both files are on machine A. The HTML is in one location but the CSS is stored elsewhere on machine A. The HTML file is a report generated by a program running on machine A. The user reads the HTML report on machine A.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>My very first html document</title>
    <link rel="stylesheet" type="text/css" href="C:\tmp\folder1\css\mystyle.css"  />
</head>
<body>
    <div class="myclass" >Hello World!</div>
</body>
</html>

CSS mystyle.css

.myclass {
    background-color: yellow;
}

The folder structure is like so:

C:
+
+->tmp
     +
     +>folder1
     |       +
     |       +>css
     |           +
     |           +>mystyle.css
     +>folder2
             +
             +>index.html

In Firefox the CSS is not applied. The results from Firefox, Chrome, IE, Edge (clockwise). enter image description here

Version of Firefox: 63.0.3 (64bit)

What I have tried

  1. Relative path to the CSS (href="../folder1/css/mystyle.css" ). This works.
  2. Changed from forward slash to backward slash, escaped slashes. This did not work.

I would prefer the absolute path for the CSS. I would prefer not to copy the CSS.

Questions

  1. Can someone explain why Firefox does not apply the CSS?
  2. What is a quick fix for this problem?
  3. What is the right-thing-to-do?
like image 664
robor Avatar asked Nov 18 '25 10:11

robor


2 Answers

Prepend file:// to the href of your css link and it will work. I just tried it myself using your folder structure. It originally didn't work in Firefox as reported but it did work in Chrome. Prepending file:// allows it to work on both.

<link rel="stylesheet" type="text/css" href="file://C:/tmp/folder1/css/mystyle.css"  />
  1. Firefox has no access to your filesystem for obvious security reason (see this kb post for more infos ) .
  2. There are many possible workaround if you'd like to keep your css file on a different location, the most popular one being webpack or any other build system. Basically every modern front end development stack uses it. It is a node.js tool that will gather all your static assets using preconfigured path and "bundle them" in a local build.
  3. If it is just a single css file for a single use-case, just use a relative path (or a file:/// prefixed path). The best solution here is obviously the quickest and easiest.
like image 27
BJRINT Avatar answered Nov 21 '25 10:11

BJRINT