Prefix free by Lea Verou

The other day I read an article by the Goddess of CSS, Lea Verou, where she wrote about a little research she did on which browsers support unprefixed gradients, and what percentage of users needs them.

In the article Lea mentions a script she wrote called Prefix free (link via title of this post). What this Prefix free script does is that it processes every stylesheet in <link> or <style> elements and adds a vendor prefix where needed. The only limitation is that @import-ed files are not supported, so you would have to link all the stylesheets from the <head>-section of your site (or dump all the styles in one file?).

Installing is a breeze as you just include prefixfree.js right under the call for the stylesheets in the <head>-section.

Collapsing Header Tutorial

It has been quiet here on WP TIPS due to the weeklong celebration of the Chinese New Year. Now we’re back in full force and the first post of the Year of the Snake is a link to a tutorial to give your site a cool “collapsing header” effect.

As you will learn from the tutorial at Line25 (linked from the title), it’s all done with CSS and it is actually quite simple to make.

How to add a custom CSS editor to your WordPress theme

Just read another amazing tutorial by Chris Bavota over at TutsPlus (link via title of this Post).

The tutorial is clearly aimed at theme developers and in it Chris explains how to add a custom CSS editor to your WordPress theme.

The advantage of using this custom CSS editor (by Ace) is that users of your theme don’t have to murk around in the main stylesheet and instead can add all their own styles to this separate stylesheet. It will be loaded after the main stylesheet and therefore will override any of the styles set before.

And then the biggest advantage of that in turn is that if you, the theme developer, come with an update to your theme, the user does not need to worry that he/she will lose all custom styles.

I am so going to use this for my next theme! Are you?

4 ways on dealing with vendor prefixes

Chris Coyier published a great article over at CSS Tricks in which he offers 4 different ways on how to deal with CSS vendor prefixes.

After an initial struggle (stylesheet has to start with actual styles, not with Theme information) the Prefixr is the one I will definitely start using!