Why adding version number to CSS file path?

Question

I noticed some websites put the version numbers (especially) in the CSS file path. For example:

<link rel="stylesheet" type="text/css" href="style.css?v=12345678" />

What is the main purpose to put the version number? If the purpose is to remember when the CSS file was updated last time, shouldn't the version number added as a comment inside the CSS file?

Gluttony

Possible duplicate of What does appending "?v=1" to CSS and Javascript URLs in link and script tags do? – Funches

Answer 1

From HTML5 ★ Boilerplate Docs:

What is ?v=1" '?v=1' is the JavaScript/CSS Version Control with Cachebusting

Why do you need to cache JavaScript CSS? Web page designs are getting richer and richer, which means more scripts and stylesheets in the page. A first-time visitor to your page may have to make several HTTP requests, but by using the Expires header you make those components cacheable. This avoids unnecessary HTTP requests on subsequent page views. Expires headers are most often used with images, but they should be used on all components including scripts, stylesheets etc.

How does HTML5 Boilerplate handle JavaScript CSS cache? HTML5 Boilerplate comes with server configuration files: .htacess, web.config and nginx.conf. These files tell the server to add JavaScript CSS cache control.

When do you need to use version control with cachebusting? Traditionally, if you use a far future Expires header you have to change the component's filename whenever the component changes.

How to use cachebusting? If you update your JavaScript or CSS, just update the "?v=1" to "?v=2", "?v=3" ... This will trick the browser think you are trying to load a new file, therefore, solve the cache problem.

Aver

You can do it dynamically with PHP forcing it to change version numbers on save. Below is an example for WordPress. <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); echo '?v=' . filemtime( get_stylesheet_directory() . '/style.css'); ?>" type="text/css" media="screen, projection" /> – Hairdresser

Can you please guide me how can i add version variable. I mean how it will work . Thanks – Pincince

Answer 2

It's there to make sure that you have the current version. If you change your website and leave the name as before, browser may not notice the change and use old CSS from its cache. If you add version, the browser will download the new stylesheet.

Optional

Answer 3

If you set caches to expire far in the future adding ?v=2 will let the server know this is a new file but you won't need to give it a unique name (saving you a global search and replace)

HTM5 boilerplate also includes it in their project.

Check this video also: HTML5 Boilerplate Walkthrough.

Menam

Answer 4

One of the reason could be to bypass file caching. Same name CSS files can be cached by the servers and may result in bad display if new version has has layout changes.

Recaption

Answer 5

This is to optimise browser-caching. You can set the header for CSS files to never expire so the browser will always get it from its cache.

But if you do this, you'll get problems when changing the CSS file because some browsers might not notice the change. By adding/changing the version-parameter it's "another" request and so it won't be taken from the cache (but after the new version is cached, it's taken from there in the future to save bandwidth/number of requests until the version changes again).

A detailed explanation can be found at html5boilerplate.com.

Howland

Answer 6

My knowledge is pretty much out of date regarding websites, but the variable stored in the 'href' argument is received by the browser through HTTP. Using the usual tricks in URL-rewriting you could actually have an arbitrary script that produces CSS-output when called. That output can differ, depending on the argument.

Chilt

how can i use that argument value in css file? – Pushover