Here you’ll find a list of tools, libraries, polyfills and other kinds of open source scripts I’ve developed over the years. Some of them only work in recent browsers. Also, obviously if you use a tool to help you with an experimental CSS feature, it probably won’t work in browsers that don’t support that feature.
Preview the border-corner-shape property before it’s implemented in browsers, through SVG.
Contrast Ratio is a modern tool for testing whether a combination of colors passes WCAG 2.0. It accepts any CSS color the browser accepts, including semi-transparent colors, color keywords, HSL(A) colors and the like. You can also share color combinations with others by just sharing the current URL.
Prism is a new lightweight, extensible syntax highlighter, built with modern web standards in mind. It’s a spin-off from Dabblet and is tested there daily by thousands.
Exactly how much CSS3 does your browser support?
An interactive CSS playground. Pretty much my most successful project so far, with thousands of visitors every day.
A CSS transitions gallery that shows what’s possible with even the most basic of transitions: one property, two values.
-prefix-free is a library that allows you to write standard, prefix-less CSS and have the necessary prefixes added on runtime. It uses feature detection for almost everything.
A tool that helps you work with the easing functions of CSS3 transitions & animations and share them with others.
A tool that helps you convert between the different CSS-accepted color formats (including name keywords) as well as share them with others.
An interactive gallery that demonstrates what’s possible with just CSS gradients. It also allows you to edit the code, to experiment with gradients yourself.
Chainvas is a tiny generic chaining library that can make any API’s methods chainable (like jQuery). Official plugins for the DOM and the Canvas API included.
A tool that converts the standard gradient syntax to
-webkit-gradient and adds the rest of the prefixes
A tool that helps you learn how the :nth-whatever() CSS3 pseudo-classes work.
A very thorough (perhaps too thorough) polyfill for the HTML5 <progress> element.
A script that enables incrementing/decrementing multiple numeric values in textfields with the keyboard arrow keys.
My popular slideshow framework, built exclusively with open web technologies. Includes plugins for editable CSS regions, syntax hightlighting and more.
A server-side script that automatically generates semi-transparent PNGs to be used as fallbacks for RGBA colors.