Reference an external CSS file without using the `.css` extension

Question

Is it possible to reference a plain text file as a CSS file within HTML? I have no control over the name or extension of the external CSS file. Take the following as an example:

I have a file called index.html with the following code between the <head> tags:

<head>
    <title>Website</title>
    <link rel="stylesheet" href="https://example.com/styles">
</head>

The external file at example.com/styles looks like this:

body {
    color: red;
    font-family: sans-serif;
    background: blue;
}

If I open index.html I get the following error in my browser's terminal:

The stylesheet https://example.com/styles was not loaded because its MIME type, “text/plain”, is not “text/css”.

Even if I specify the MIME type with type="text/plain" when referencing the styles file, I still get the same error.

Again, I don't have any control over what the styles file is called, or what it's extension is. All I know is it's URL. Obviously this issue could be mitigated by having a web server download the styles file and then give the local copy a .css extension, but for this project I don't have access to a back-end server.

Only thing that comes to mind is some magic on the server to interpolate that path to a CSS file, but I just ask why is this a thing for you? — Phix
– Phix, Commented Jan 29, 2020 at 0:30
I'm playing around with IPFS where files are served by their content hash rather than their address. So if I upload style.css to IPFS, I get can then reference that file using the hash of it's content. IPFS strips .css or any other extension from the file name. — johnnymatthews
– johnnymatthews, Commented Jan 29, 2020 at 17:27

Jonathan Ginsburg · Accepted Answer · 2020-01-29 00:33:47Z

1

The following achieves what you intend, but is arguably bad practice. It requests the resource and then inserts it in the style tag, bypassing the MIME check by the browser. I would suggest getting the CSS and serving it with correct Content-Type.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>CSS From Text File</title>
  <style id="style"></style>
</head>

<body>
  <div id="styled"></div>
</body>

<script>
  const style = document.getElementById('style');
  const req = new XMLHttpRequest();
  req.onloadend = () => {
    style.innerHTML = req.responseText;
  };
  req.open("GET", "style.txt");
  req.send();
</script>

</html>

style.txt


#styled {
  height: 100px;
  width: 100px;
  background: red;
}

answered Jan 29, 2020 at 0:33

Jonathan Ginsburg

1,2281 gold badge10 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

johnnymatthews Over a year ago

That's a creative work-around, and it fixes the issue to an extent. However sites using this method are obviously still a bit sketchy since they're bypassing the MIME check, as you mentioned. I guess another solution would be to pull in the styles and serve them directly from the index.html between <style> tags as your JS does.

Jonathan Ginsburg Over a year ago

I agree! @reelyard

Collectives™ on Stack Overflow

Reference an external CSS file without using the `.css` extension

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related