Bookmarks: CSS3 Goodness

I’ve been working on some HTML 5 and CSS3 layouts lately and I realized I spent more time covering all vendor prefixes in the stylesheets than working on the actual aesthetics or UX. That just won’t do. If libraries like jQuery can abstract out all the complex JavaScript and make it cross-browser, why can’t we have some cross-browser CSS3 too? Well, you can.

  • Prefix Free
    This is the greatest method cross-browser compatibility I’ve ever come across, not just for CSS3. All you need to do is write pure, standards compliant CSS3 without any vendor prefixes and simply include the Prefix Free JS. The script will go through the style sheets, pick out any incompatible rules and put vendor prefixes there based on the user-agent. This is great because you don’t have to learn any new rule syntax or constructs.
  • Less
    Less isn’t exactly only for cross-browser CSS3, but more useful for writing complex, nested and variable CSS. You can assign variables instead of hard-coding hex values and just change the variable once for the entire sheet color to change and you can simply include class names inside other classes or selectors to inherit the rules. Less makes CSS pretty flexible.
  • CSS3 Please
    If you don’t want to use additional scripts to force compatibility or are working in an environment where scripts might be a problem, CSS3 Please is the easiest way to generate compatible, vendor-prefixed CSS3 rules that you can copy paste into your style sheets. Commonly used rules are already presented in a code-editor like page and changing the value for one rule will automatically change all the vendor-prefixed rule values.

The need for this was realized after putting in some stupidly redundant yet simple-to-see CSS3 animations on flarepath.in and by the source code of a CSS3 feature advocacy showcase site Gradients, Motherfucker.

Advertisement

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this:
search previous next tag category expand menu location phone mail time cart zoom edit close