What Is Style.Cssver=1 Tag

what is style.css?ver=1 tag?

To avoid caching of CSS.

If the website updates their CSS they update the ver to a higher number, therefore browser is forced to get a new file and not use cached previous version.

Otherwise a browser may get a new HTML code and old CSS and some elements of the website may look broken.

why does my 'style.css' file become 'style.css?ver=4.1.1'?

?ver=4.1.1 is adding to it beacuse that is defined as the stylesheet version in your funtions.php when enqueuing the css file. if you look through your funtions.php you should be able to find something like

 wp_register_style("main-styles", get_stylesheet_directory_uri() . "/style.css", '', '4.1.1');

or

wp_enqueue_style("main-styles", get_stylesheet_directory_uri() . "/style.css", '', '4.1.1');

and that last part is responsible for adding that when u inspect element. If you need to see the site without cache version just hit ctrl+f5 and it will load the site with new changes.

What does appending ?v=1 to CSS and JavaScript URLs in link and script tags do?

These are usually to make sure that the browser gets a new version when the site gets updated with a new version, e.g. as part of our build process we'd have something like this:

/Resources/Combined.css?v=x.x.x.buildnumber

Since this changes with every new code push, the client's forced to grab a new version, just because of the querystring. Look at this page (at the time of this answer) for example:

<link ... href="http://sstatic.net/stackoverflow/all.css?v=c298c7f8233d">

I think instead of a revision number the SO team went with a file hash, which is an even better approach, even with a new release, the browsers only forced to grab a new version when the file actually changes.

Both of these approaches allow you to set the cache header to something ridiculously long, say 20 years...yet when it changes, you don't have to worry about that cache header, the browser sees a different querystring and treats it as a different, new file.

Why adding version number to CSS file path?

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.

Wordpress how to tell my css version

If I'm not mistaken, you need to have in your style.css

/*
Theme Name: ThemeName
Version: 1.0.0
Author: yourname
Author URI: http://yourwebsite.com
Description: your description
Theme URI: your theme URL
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: random tags go here
*/

Right on top. Also in your functions.php file you'll need

<?php
define('THEME_NAME', 'ThemeName');
define('THEME_VERSION', '1.0.0');

And then just enqueue it in functions.php with

wp_enqueue_style('main_css', get_stylesheet_uri(), array(), THEME_VERSION);

You can make it dependent on other stylesheets if you want in the array, and the theme version goes after it.

Problem with my Wordpress CSS version Cache updating

The best way I've found of forcing a stylesheet to enqueue the latest version is using the filemtime() function, which will use the modified date of the file as the latest version. That way it will be relatively cache friendly but also update when the style is.

e.g.

    wp_enqueue_style( 'rit-style-css', get_stylesheet_directory_uri() . '/style.css', array(), filemtime(  get_stylesheet_directory() . '/style.css' ) );

Make sure to put it in a function that's added to the wp_enqueue_scripts action if it's not already.

If you're working in a child theme or similar then you'll need to dequeue the file before enqueuing it again.

function example_update_stylesheet(){

       wp_dequeue_style( 'rit-style-css' );

       wp_enqueue_style( 'rit-style-css', get_stylesheet_directory_uri() . '/style.css', array(), filemtime(  get_stylesheet_directory() . '/style.css' ) );

}

add_action( 'wp_enqueue_scripts', 'example_update_stylesheet', 100 ); /*Late priority*/

---

Related Topics