DEV Community


Posted on

WordPress Fallback CSS

I'm writing a WordPress theme. In it, I make liberal use of custom properties. I don't want to completely leave IE users in the cold, so as part of my build process I'm using a modified postcss-css-variables to generate fallback values.

I initially baked all this into the stylesheet, but that proved excessive. Plus, I don't want to penalize users of modern browsers. So now I'm building two stylesheets as part of the build process: one which uses custom properties, and one which contains static, fallback values. The question now is how best to load the best one for each user.

I rather like the approach that the folks at CodyHouse use for their framework:

  if('CSS' in window && CSS.supports('color', 'var(--color-var)')) {
    document.write('<link rel="stylesheet" href="assets/css/style.css">');
  } else {
    document.write('<link rel="stylesheet" href="assets/css/style-fallback.css">');
  <link rel="stylesheet" href="assets/css/style-fallback.css">
Enter fullscreen mode Exit fullscreen mode

Unfortunately, it's not possible using WordPress's wp_enqueue_style method to load a stylesheet inside a noscript tag. The approach I'm taking right now is the reverse of the above: I'm loading the modern stylesheet by default, then running some js to detect browsers that aren't supported:

if ( ! ( 'CSS' in window && CSS.supports('color', 'var(--color-var)') ) ) {
    const css = document.getElementById( 'screen-css' );
    css.href = css.href.replace( 'screen', 'screen-fallback' );
Enter fullscreen mode Exit fullscreen mode

This will replace the stylesheet with the fallback if custom properties are not supported. This results in no change of experience for modern browsers (aside from a little snippet of js), while IE users will get a brief FOUT while the stylesheets are swapped.

So given the limitations of how WordPress loads stylesheets, can this be improved?

Top comments (1)

vanaf1979 profile image
Stephan Nijman • Edited

You probably found an answer by now, but let me add some options for you.

Maybe you can achieve the desired effect with html conditionals!? I wrote a article about these and other enqueue options here: (Scroll down to "Adding Conditional stylesheets:")

As for your first option... You're right that you can't enqueue noscripts, but adding these to the head is actually pretty simple. I have created a little Gist for you with a implementation of your noscript here:

Or maybe you can just restructure your Css and implement some progressive enhancements using @support. Check out this article:

Hope this helps...

I'm curious what your final solution is, so please share. ;)