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 Please
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.
CSSDesk
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.
CSSPrefixer
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.css
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-Crush
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 Tool
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 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 BucklerCraig 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.
