The proper way to link to your stylesheet


#1

I'm sure I came across something on the web a couple of years ago, that said that you could link to your stylesheet, like this:

<head>
  <link rel="stylesheet" href="theme.css">
</head>

But have just seen somewhere else, that it should now read:

<head>
  <link rel="stylesheet" type="text/css" href="theme.css">
</head>

What is the official proper way please?


#2

The type attribute is not required in html5, but is required in previous html versions.


#3

The spanking-brand-new way to link to .css stylesheets is to include the version number:

<link rel="stylesheet" href="css/theme.css?v=1.0">


#4

does that help with caching or something? i.e. if you change to
<link rel="stylesheet" href="css/theme.css?v=1.1">;
the browser would download the new version?

or some other reason?


#5

Correct.


#6

I have long used the method of adding the date to my stylesheet name (e.g. style170118.css), which serves the same purpose and also lets me see at a glance when it was last updated.


#7

My own method which takes the maintenance work out of it is this in a global php script:-

$csstime = date ("Y-m-d\TH-i", filemtime($_SERVER["DOCUMENT_ROOT"] . '/css/style.css'));

Then in the head of the html template:-

<link rel="stylesheet" href="css/style.css?<?= $csstime ?>">

So it updates automatically, but only when updated, so people can still load a cached version unless there has been an update.


#8

Presumably that needs the server to be running PHP, correct?


#9

Yes.


#10

I think the trailing parameter would prevent caching.

If the CSS file is quite small and PHP is available I would recommend loading inline because it would eliminate one less http request:

<style>
  <?= file_get_contents( 'style.css'); ?>
</style>

Every saved little bit helps performance :slight_smile:


#11

It's something I would like to see a definitive answer for. I'm aware that adding a version parameter to things like css is something a few people do, but does it stop caching altogether, even if the parameter/value doesn't change?
Searching around It's hard to find recent and definitive information on this.
The first article I came across seems clear that for a resource to be cached you should not use variables, but put the version in the filename. But that is nearly 10 years old, and that's exactly what I was attempting to avoid with my above code: having to manually rename my css every time I edit it, then also change the name in the link to it in the html head. :weary: The way I have been doing it I don't even need to think about versioning, I just FTP the file and the server does the donkey work.
But the information in that article appears to be corroborated by GTmetrix:-

PageSpeed: Remove query strings from static resources

Overview
Most proxies, most notably Squid up through version 3.0, do not cache resources with a "?" in their URL even if a Cache-control: public header is present in the response. To enable proxy caching for these resources, remove query strings from references to static resources, and instead encode the parameters into the file names themselves.

Then I found another, relatively recent article, which makes reference to the previous one, giving an update that the default behaviour of Squid (which was the issue identified) was no longer the case and it would now cache URLs with variables.

It may be something worth looking into and testing so we know what the facts are today.


closed #12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.