My Joomla Template is loading my custom CSS using JS. Is there a way to add the unique version tag to my custom CSS? i.e: custom.css?20180101

Question

I normally just add my unique tag to the css path in the section of my html, but my template is adding my custom CSS via Javascript:

if (is_file(T3_TEMPLATE_PATH . '/css/custom.css')) {
$this->addStyleSheet(T3_TEMPLATE_URL . '/css/custom.css');
}

I tried adding the unique tag to the above, but it doesn't work:

if (is_file(T3_TEMPLATE_PATH . '/css/custom.css')) {
$this->addStyleSheet(T3_TEMPLATE_URL . '/css/custom.css?20180101');
}

I inspected my web page and it removes my unique tag:

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

Answer 1

Adding a version query string to a stylesheet is super easy.

// You don't need to grab the document yourself, but I include it here for completeness.
$document = JFactory::getDocument();
$document->addStyleSheet('/templates/mytemplate/css/test.css',['version' => '123ABC']);

You can also specify the version value as 'auto' but as the value it uses doesn't automatically update when the css file is updated I think it is a bit useless for adding custom stylesheets. If you're changing the css sheet a lot then it's common practice to use the filemtime timestamp of the css file as the version string.

Also note there is no javascript involved in your question, the template is adding the css via php, so you may wish to clean up your question slightly.

Answer 2

Another automated approach would be to append the current date (year/month/day) which would result in your version being updated daily, like so:

$today = JFactory::getDate()->format('Ymd');
JHtml::_('stylesheet', 'custom.css', array('version' => $today, 'relative' => true));