Add CSS to a page using HTTP headers

Tue 28, Apr 2020

Hey y'all,

I just read about the Link header at Impressive Webs. It works just like the <link> HTML tag. That means that you can use it to add stylesheets to a website! Below is a PHP-based demo:

The page:

<?php
header('Link: <styles.css>; rel=stylesheet');
echo '<p>Some text here. This will get displayed using a sans-serif font if your browser supports the Link header. If not, your browser\'s default font will be used.</p>';

The stylesheet (named styles.css):

html,
body {
    font-family: sans-serif
}

The header will look like this:

Link: <styles.css>; rel=stylesheet

You can add multiple stylesheets by adding multiple Link headers, btw.

Browser support

Even though this is a standardized feature that has been around since HTML4, it seems to work in Firefox only. It is not deprecated, though. This is what the HTML4 spec says about it:

This section only applies to user agents conforming to versions of HTTP that define a Link header field. Note that HTTP 1.1 as defined by [RFC2616] does not include a Link header field (refer to section 19.6.3).

Why bother if it's only supported in Firefox?

I think it's just something really cool to look at. If you use it in a project, I'd highly recommend you to use <link> in addition, because otherwise most users probably won't see your stylesheets.

If you want to find out more about it, I'd highly recommend you to read this article at Impressive Webs and look at the Link header's MDN page.

You are on page 1 right now.


Back to top