Pass PHP variables to CSS?

Question

I want to pass some variables to my css, without using inline styles. During some research I found different sources pointing to the same solution. For example here on the Joomla forum.

Basicly they explain how to use a php file as a stylesheet and incluse the php it like that:

<?php $document->addStyleSheet(.../my-custom-file.css.php'); ?>

Is this good practice? Should I do it like that or is there a better way provided by Joomla? Would this be able to cache? Would it be able to be combined and compressed by some other plugings for performance?

Any insights are most appreciated. Thanks!

Answer 1

Personally I wouldn't use a .css.php file.

The following assumes you WON'T be supporting Internet Explorer and I will be answering your question about CSS filters. The grid/masonry can be asked as a separate question.

So, let's say you want to set a CSS filter (grayscale) and the percentage is set dynamically.

You firstly want to have the following CSS file (my-custom-file.css):

.element {
  filter: var(--grayscale-filter)
}

You can then set your PHP variable and inject the CSS:

$percentage = '80%'; // Change 80% to whatever you like.
$css_filter = 'grayscale(' . $percentage . ')';

Joomla\CMS\Factory::getDocument()->addStyleDeclaration('
  :root {
    --grayscale-filter: ' . $css_filter . '
  }
');

This will set the --grayscale-filter variable with the value of 80%, which in turn is then called by var(--grayscale-filter) from your CSS file.

Hope this helps get you started off.