The state of CSS & Graphics

I don’t know about you, but I find that keeping track of what graphics-related CSS properties are supported in what browser, and under what conditions, and with which vendor prefix, is a little daunting. caniuse.com is extremely helpful for this, but it’s still not very easy to find out things like, ‘Under what conditions can I apply a clip path to HTML vs SVG?’  Chrome supports both -webkit-clip-path and clip-path.  What’s the difference?

To answer this question, I’ve created a new GitHub repo: css-graphics

The repo consists of a simple table that attempts to answer these questions.  Please, please, please, if you find this useful and you see some out of date or incomplete information, make the change and do a pull request.  I’d love to see this kept up to date and kept useful.

Yes, I know the table is pretty sparse right now.  I need to add information on CSS regions, compositing & blending, shapes and more.  It would also be good to somehow specify if you have to turn on a custom flag to enable the feature.  But don’t let me get in the way, please help me keep this up to date.

Understanding Compositing and Blending

With Canvas blending now in Chrome Canary, WebKit Nightly and Firefox, it’s a good idea to start getting your head wrapped around this spec.  It seems to be moving along nicely and is starting to show up in more and more browsers. Continue reading

CSS Exclusions and Shapes Split Into 2 Specs

It can often take several years for a W3C spec to go from initial submission (a W3C member submitted a suggestion for a Web standard) to final recommendation status. Often though, a spec is split up into multiple independent  specs to allow each spec to evolve independently, and hopefully faster.

This is what recently happened with the CSS Exclusions & Shapes Specification.  Exclusions and Shapes are in fact two independent features.  Different people could and should therefore be working on the two specs independently rather than having everyone make decisions about both features.  So now we have CSS Exclusions and CSS Shapes. Continue reading

Twitter Bootstrap typeahead.js with underscore.js Templating – A Tutorial

In a previous post, I described how to use the Twitter Bootstrap Typeahead component. The Twitter Bootstrap team recently announced however that they would be switching to Twitter’s typeahead.js for the next major release. That sounds pretty great to me.  typeahead.js is much more powerful than the current Twitter Bootstrap typehead component. Fortunately, since typeahead.js is already available, you don’t have to wait for Twitter Bootstrap v3 to start using it. Using typeahead.js with Twitter Bootstrap isn’t very well documented just yet.  As well, there is no documentation to be found on how to use Underscore.js templates with typeahead.js, so I thought I’d help you along here. Continue reading