How can I add a timestamp to my CSS file and preload the file?

Question

I have this code at the top of my index.php file to add a timestamp to my CSS file so that latest version is always rendered.

$version = filemtime(JPATH_THEMES . '/' . $this->template . '/css/template.css');
JHtml::_('stylesheet', 'template.css', array('version' => $version, 'relative' => true));

However, I would also like to preload the file and can't work out how to add rel="preload" and as="style" and onload="this.rel='stylesheet'" to the above.

Answer 1

In Joomla 4 you can use the WebAsset Manager instead of HTMLHelper(JHtml).

In your template's index.php file:

$wa  = $this->getWebAssetManager();

$version = filemtime(JPATH_ROOT . '/media/templates/site/mytemplate/css/mymain.css');

$wa->registerAndUseStyle('template.mytemplate.mymmain', "mymain.css", ['version' => $version, 'relative' => true], ['rel' => "preload", 'as' => "style", 'onload' => "this.rel='stylesheet'" ], []);

in this example code, my css file is called: mymain.css and it is in media folder under templates/site/mytemplate/css subfolder as it should be. This has worked for me.

It is same with HTMLHelper:

use Joomla\CMS\HTML\HTMLHelper;

$version = filemtime(JPATH_ROOT . '/media/templates/site/mytemplate/css/mymain.css');

HTMLHelper::stylesheet('mymain.css', $options = ['version' => $version, 'relative' => true, ], $attribs = ['rel' => "preload", 'as' => "style", 'onload' => "this.rel='stylesheet'"]);

result:

<link href="/media/templates/site/mytemplate/css/mymain.css?1681564883" rel="preload" as="style" onload="this.rel='stylesheet'" />