Skip to main content

7 of the Best CSS3 Utilities

By Craig Buckler

JavaScript

Share:

Free JavaScript Book!

Write powerful, clean and maintainable JavaScript.

RRP $11.95

While searching for CSS3 tools I discovered several free utilities which weren’t typical code generators or font utilities. I hope you find these as useful as I do…

CSS3 PleaseCSS3 Please screenshot

Of all the tools, utilities and generators, I use CSS3 Please the most. The concept is simple — it shows an element with editable CSS3 properties. It’s a quick reminder of the syntax and allows you to play with different settings. Highly recommended.

CSSDeskCSS Desk screenshot

CSSDesk is a tool developed by Josh Pyles of pixelmatrixdesign.com. It’s similar to CSS3 Please; there are fewer starting styles but the interface is cleaner and you can edit the HTML.

CSSPrefixerCSSPrefixer screenshot

I accept vendor prefixes are necessary but they’re still a pain. CSSPrefixer can make your life easier — paste some non-prefixed code in the box and it’ll return all the required vendor-prefixed alternatives.

Alternatively, you can install a Python application to add prefixes and minify your CSS files.

normalize.cssnormalize.css screenshot

At first glance, normalize.css appears to be another CSS reset. But rather than reseting styles, it normalizes them so they’re consistent across all browsers. Useful defaults are retained — such as margins on headings or input borders.

normalize.css is a great CSS starting point and all the code is commented so you can remove unnecessary features.

CSS-CrushCSS-Crush screenshot

Like many other CSS minifiers, CSS-Crush is a PHP application which reduces file sizes to speed up page loading. However, it has several other tricks up its sleeve:

  • Variables — define often used fonts, colors or other properties
  • Automatic @import parsing — all CSS files are merged into one
  • Aliases — CSS3 vendor-prefixed properties can be automatically generated
  • Macros — transform snippets into longer code
  • Functions — use mathematical formulas in expressions, e.g. width: percent(480, 960); transforms into width: 50%;
  • Images can be imported and converted to data URIs.

Ceaser CSS Easing Animation ToolCeaser screenshot

CSS3 transitions are amazing but few of us delve beyond the ease or linear options. Ceaser is an easy-to-use tool which offers a range of animation opportunities. Choose a standard or preset easing type, tweak the curve and copy the code.

When can I use…caniuse.com screenshot

caniuse.com is one of the most useful HTML5 and CSS3 resources on the web. Search for any property or API name to discover which desktop and mobile browsers support the feature. The tool also provides links to associated website tools and tutorials. Bookmark it now!

Have I missed your favorite CSS3 tool?

Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.

New books out now!

Learn how Git works, and how to use it to streamline your workflow!


Google, Netflix and ILM are Python users. Maybe you should too?