List of Really Useful Tools For CSS3 Developers

Generally speaking, CSS is very easy. But when browser vendors started implementing CSS3 features, things became little complicated. Not difficult but complicated. This is mainly due to two reasons: first of all many new CSS3 properties (e.g., transition, gradient, transform, etc) are not that simple and secondly we have to use vendor specific extensions.

Until the time your favorite IDE provides built in support for CSS3, your best friends are CSS3 generators, cheat sheets, reference guides and JavaScript based solutions. This is exactly what this roundup covers; it provides really useful tools that will assist you in learning and applying CSS3 today.

Related Updates

You should also take a look at “CSS3 Unleashed: Tips, Tricks and Techniques” – This post was published in June 2009, but we have just revamped this entire article, which now contain all the tools mentioned in this post and several other new useful resources to help you understand and learn CSS3. Another related roundup that we have just updated with lots of new cool tools (including CSS3 related tools) is one of our most popular post “List of Really Useful Tools for CSS Developers”.

Here is our list of useful tools for CSS3 developers:

Generators

JavaScript Solutions

  • Modernizr
    A really useful JavaScript library that detects native availability of HTML5/CSS3 features and offers you a way to maintain a fine level of control over your site regardless of a browser’s capabilities. If you prefer using MooTools, you can use MooModernizr (MooTools port of Modernizr)
  • CSS3 pseudo-class Selector Emulation
    ie-css3.js allows Internet Explorer to identify CSS3 pseudo-class selectors and render any style rules defined with them. Simply include the script in your pages, start using these selectors in your style sheets and they’ll work in IE.
  • CSS3 support for Internet Explorer 6, 7, and 8
    IE-CSS3 is a script to provide Internet Explorer support for several of the popular new styles available in the upcoming CSS3 standard.
  • Sizzle – JavaScript Selector Library
    A pure JavaScript CSS selector engine designed to be easily dropped in to a host library. Sizzle supports virtually all CSS3 selectors – this even includes some parts that are infrequently implemented such as escaped selectors (”.foo\\+bar”), Unicode selectors, and results returned in document order.
  • YUI Selector Utility
    The YUI CSS3 Selector Utility, providing a compact shorthand for collecting, filtering, and testing HTMLElements.
  • ie7-js
    A JavaScript library to make MSIE behave like a standards-compliant browser.

Reference

  • When Can I Use
    Browser compatibility tables for features in CSS3, HTML5, SVG and other upcoming web technologies.
  • Browser Support Checklist
    Uses Modernizr library to determine what “advanced” features your browser supports, including CSS3 features and selector supports.
  • CSS3 Selectors Test
    Automatically run a large number of small tests which will determine if your browser is compatible with number of CSS selectors.
  • SelectORacle
    Online tool that provides explanation of CSS2 and CSS3 selectors. Simply provide it with some selectors and it will return descriptions of what the selectors will match.
  • CSS3 Cheat Sheet & Quick Reference Guide
    Provides listing of the current CSS3 specification, listing of the properties accepted values, common selector pattern reference, organized by type / module, selector Type reference and unit reference and information. (For PDF Version)
  • CSS3 Pseudo Classes
    Part of SitePoint’s CSS Reference.
  • CSS3 Cheat Sheet
    listing of CSS3 properties, selectors types and allowed values in PDF format.
  • CSS3 Color Names
    Provides list of all 147 color names and their values in alphabetical order.

Now that you are finished with this round-up, consider reading our freshly updated related posts:

I hope you have enjoyed this post and found some new useful tools to work with. Please feel free to suggest any addition to the list in your comments.

Stay Updated

If you found this post useful, consider subscribing to our RSS Feed! You can also stay updated by following us on Twitter and Facebook or by subscribing to our FriendFeed.

Bookmark / Share

Bookmark and Share

Read More

SIMILAR/RELATED POSTS:

PREVIOUS POST:

NEXT POST:

Reader Comments

7 Responses to “List of Really Useful Tools For CSS3 Developers”
  1. Teylor Feliz says:

    Exactly what I was looking for!!!

    Thanks for this collection.

  2. Sedat Kumcu says:

    Thanks for this great resources. Best regards.

  3. http://www.standardista.com/ has grids of browser support for CSS3 selector, properties and values, showing which properties IE6, IE7, IE8, Chrome, Webkit, Firefox and Opera support, their syntax quirks (if they don’t follow the CSS3 specifications), and how they fail, when a browser has partial support.

  4. Excellent list of resources, thanks for the compilation.

  5. Mostafa says:

    Thank you so much , I wish ,I’ve visited your site earlier .

  6. Alex says:

    That’s exactly what I needed thank you! Will come in great handy with my web developing ;)

  7. This is a great set of tools and resources! Thanks for sharing.

Leave Comment

 
 

Stay Updated, Subscribe to RSS Feed

 
 
 
 

Blogroll

 

Sponsored Links