When you try to implement a new appealing feature, you may face some annoying browser incpompatibilies that sometimes just can’t be fixed –oh hello, IE. Now, you may choose the easy way out and think of something to completely replace what you had in mind in the first place, but you may also want to stick to your idea, and that’s what this post is about. Yet, to achieve a website that’s not buggy, the latter comes at the cost of only using your feature on the browsers that support it, while finding a fallback for the others. But, wouldn’t it be a shame to not be able to use an awesomely fresh and mind-blowing property only because of some browsers’ slow capacity to evolve?

Let’s talk example. I once wanted to implement an effect that would slowly fill a given text (actually a menu title) with a given color on hover. I started to code the whole thing, using the CSS background-clip property. Little did I know that this is is currently only supported with a -webkit- prefix. To be able to implement the effect anyway, at least on the browsers on which it was possible, I used the command add_filter('body_class','browser_body_class'); in the function.php file, that basically commands WordPress to run the function browser_body_class (below) every time the WP function body_class is used.

What this function does, is she returns a class containing the desired info about the browser of the visitor. Now in your CSS sheet, you just need to separate the actions as you would do if a ‘if’ command were at your disposal. 

Author: Joana

Webdesigner @ Yhello

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.