I’ve been coding websites for a long time but even I was a little puzzled when I came across a Hacker News comment where the commenter described their own makeshift CMS that involves using your own file system. The most interesting part to me was when the person said they add CSS to pages on their personal projects by means of HTTP headers.

I had heard of this technique before and the person does say in the comment that this doesn’t work in every browser. But I decided to do some research to figure out how one might do this and why this would be easier than just dropping in one or more <link> elements in the HTML.

I’m sure many of you who have been developing sites for more some time now are familiar with this. But I thought I’d write it up for those looking for a quick solution. This should especially be helpful because this apparently isn’t the easiest topic to search for since the terms “HTTP” and “header” are quite common in web development (and due to the fact that Google search has sucked for many years now).

Adding Headers via .htaccess

Before getting to the actual solution, let’s take a brief look at how to add HTTP headers in general. You can put a line like the following in your website’s (or directory’s) .htaccess file (assuming you’re on an Apache server):

Copy 
1Header add Header-Name "parameter=value"

This uses Apache’s Header directive. The part inside the quotes is a parameter/value pair that works as the value for that specific header.

To demonstrate, I’ll do the following, which creates a custom header:

Copy 
1Header add Funky-Music "getdownand=boogie"

This is just a header that I made up. You can also add any valid HTTP header, assuming you use the correct syntax. You also have the option to use the set argument instead of add, which will overwrite the header if it already exists. There are other arguments you can use, described in the aforementioned apache.org doc.

#css #incorporating