5 Free CSS Tools

Jason Brown - Tuesday, December 20, 2011

We web developers and designers use a lot of tools to help us create compatible, well-built websites more easily and quickly. Today I'm sharing with you a few of the tools that I like, specifically those made to assist with CSS.

1. CSS Typeset

   This handy tool lets you adjust text properties in CSS and see the changes in real time. Then you can simply copy the generated CSS and add your own selectors. The only downside to me is that it only supports a few fonts and doesn't let you enter a custom font to try out. With web fonts being so widely supported this seems like a useful feature.

2. Code Beautifier

   This is a very customizable CSS optimizer. It reduces file size while (optionally) maintaining readability. It can remove extra spacing, invalid properties, and almost everything that wastes space. It only seems to get rid of some comments though, I'm not sure what the determining factor is.

3. Modernizr

   I've talked about Modernizr before. It's a fantastic little JavaScript utility that makes it easy to create CSS fallbacks for older browsers while fully supporting CSS3 in browsers that can handle it. It also allows conditional resource loading based on browser capabilities.

4. W3C CSS Validation Service

   The World Wide Web Consortium's official CSS validation service will notify you of any problems with your CSS, be it syntax errors, invalid selectors, invalid properties, or invalid values. You can choose which CSS profile to test against and validate by URL, upload, or direct input.

5. When can I use...

   This website provides detailed information on CSS3 and HTML5 support by browser and version. It's perfect if you want to know whether a feature you're considering will go unseen by many of your viewers. It also indicates total support percentage based on browser market shares.

About Matcha Design
Matcha Design is a full-service creative agency specializing in web design, print, identity, branding, interface design, video production, still photography and motion design. Using our passion for excellence, multi-cultural background, and award winning practices, we consistently provide high-quality, custom, innovative solutions to meet the diverse marketing needs of our clients. For more information, visit www.MatchaDesign.com.