1

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!

  • 1
    What sort of variables do you want to pass? – Lodder Jun 18 at 5:39
  • @TVBZ please respond to Lodder's question (I'm curious as well). This may be an XY problem which may benefit from alternative perspectives. – mickmackusa Jun 19 at 5:52
  • @Lodder several actually. Some parameters that are defined inside the module settings. If using a php file is good practice, I could also work out some conditions to only generate the css that is requiered. For example, I could add a dropdown with some predefined css filter templates for the images, and in php only echo the css if it is used. Or I could add some fields to select a layout (grid, masonry) and a field to enter amount of columns... Basicly if php is good practice, it offers endless flexibility. – TVBZ Jun 19 at 11:07
2

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.

| improve this answer | |
  • Aah.. That's even better. So this css file can be cached? Just out of curiosity, could a .css.php be cached? – TVBZ Jun 19 at 15:44
  • 1
    The browser will cache the my-custom-file.css like it does any other CSS file. Your will need to instruct your server to cache the HTML (which includes the inline CSS) yourself. I'm sure you can cache the contents of a .css.php file. – Lodder Jun 19 at 18:10
  • Thanks. Pure css file makes more sence to me anyway. I will make multiple css files (1 per template style) and load that conditionally. – TVBZ Jun 20 at 20:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.