How do you handle dynamic CSS in WordPress?

2 Views

I’m in need of some CSS for a WordPress plugin which are dynamic and would like to know what is the best or the most common method. I’m currently using method two but have problems with IE9. So I thought there could be a better solution for dynamic CSS and came up with these:

1.) include a style block with the wp_head hook

Pro:

Read More
  • No extra server request

Contra:

  • Depending on the size a lot data on each page
  • not so pretty
  • not cacheable

2.) Use admin_url('admin-ajax.php?action=my_css') in a link tag

Pro:

  • create CSS on-the-fly (and cache it with Transient API)
  • uses wp_enqueue_style
  • cacheable with expire headers

Contra

  • requires to load wp-load.php
  • doesn’t work on IE9 (why?)

3.) create a CSS file on changes

Pro

  • fast
  • no need to load the whole WordPress (wp-load.php)

Contra

  • not really dynamic
  • require write rules for certain folders
  • possible out of date or missing cause of script issues or missing permissions

I don’t like method one cause the style is not required on every page and method two doesn’t work on IE9.

Should I go with the third one or are the any disadvantages with it?

Thanks in advance!

Post Views: 2

Related posts

Leave a Reply

2 comments

  1. You are somewhat limited with PHP not having a built-in persistent cache. If you can guarantee that you will have memcached, APC, or even file write access, then you can use any of these methods to cache your CSS, and retrieve it using a key. You would not need to use wp-load.php to do so, thus your performance would be improved over having to load all the plugins, etc.

    That said, your dynamic CSS should work in IE9 assuming you set header('Content-type: text/css'); before you output the CSS, per the Microsoft article MIME-Handling Change: text/css.

    All that said, you could try a hybrid approach of #1 and #2 – it sounds like #3 is out if you can’g guarantee that you have file write permissions. To implement, just detect the user-agent of the requesting browser, and set up a single function to output your CSS. If it is not IE9, you can include the stylesheet using admin_url('admin-ajax.php?action=my_css') and call your output from the hooked function, and if it is IE9 you can include the stylesheet in the header by calling the function from a hook to wp_head. This way you are able to cache the CSS for most clients, and work around for IE – your cons about page size, etc are valid… but it’s IE9.

    As long as you are able to cache the CSS per client, then you are typically looking at only one extra request to wp-load.php which shouldn’t be too great of a performance hit.

    You can check for IE9 using if (false!==strpos('MSIE 9;', $_SERVER['HTTP_USER_AGENT']))

  2. I’ve created a library called wp-dynamic-css that allows you to generate CSS from dynamic content.

    The library allows you to use a special syntax to represent variables inside your CSS file.

    This is how it can be used:

    // 1. Load the library
require_once 'wp-dynamic-css/bootstrap.php';

// 2. Enqueue the stylesheet (using an absolute path, not URL)
wp_dynamic_css_enqueue( 'my-dynamic-style', 'path/to/my-style.css' );

// 3. Set the callback function (used to convert variables to actual values)
function my_dynamic_css_callback( $var_name )
{
   return get_theme_mod($var_name);
}
wp_dynamic_css_set_callback( 'my-dynamic-style', 'my_dynamic_css_callback' );

    Now let’s say you have a file called my-style.css with this code:

    body {
   background-color: $body_bg_color;
}

    If, for example, calling get_theme_mod('body_bg_color') returns the value #fff, then my-style.css will be compiled to:

    body {
   background-color: #fff;
}