Bruce Bruce - 6 months ago 20
CSS Question

Can I include a CSS StyleSheet from a local drive, in a page served from a web site

My goal is to have a page, served by a web site, containing a to a stylesheet, that is available not on the web site, and not on a different web site, but on a local drive.

Something like;

<!DOCTYPE html>
<html>
<head>
<link href="/styles/something.css" rel="stylesheet" />
<link href="file:///C:/custom.css" rel="stylesheet" />
</head>


My initial research shows that browsers don't seem to support this, but I'm willing to be proved wrong, or discover some sneaky way of doing it. (I tried the above, that doesn't work.)

[I know, I know, you wanna know "why". This is for the site designer - it would allow him to edit the css locally while designing and see the effect on the "semi-live" site. ie the round-trip for edits would be very fast, and I wouldn't need to give him access to the actual site. By extension, for teaching purposes, it would allow multiple people to simultaneously practice their CSS skills locally]

Obviously any edits made to the local file will only be visible on that local computer - that's the whole idea. If you had 10 students each would see the same site with a different css file.

Answer

Well, if you can setup Apache on your machine, this is easily done.

This is assuming the question is this

I want to be able to have a site in a central location (live) and allow users accessing that site to be able to make changes to the site by editing a local file. These changes will only be visible to the person making the change and the rest will just see whatever CSS is on their local copy.

So this means that you have to serve a local file from multiple computers and each person viewing the site may have a different looking copy. If I'm right, read on.

Setup a local environment (maybe with WAMP?) on all the machines you want to be able to allow local edits. The important thing is that everyone must have the same hostname defined (either localhost, or something else - don't forget to add it to your hosts file). Place the CSS file inside your webroot and add a link to your live site pointing to that link.

<link href="http://www.mysite.com/base.css" rel="stylesheet" />
<link href="http://localhost/custom.css" rel="stylesheet" />

And voila! Local editing.

Caveats

  1. Everyone needs to have their files placed in the same local URL otherwise it won't work

  2. You need to setup a local environment (very easy)