My flirts with CSS3

At my day job I mostly work with Flash, AfterEffects, Photoshop. About a year ago I wanted to try something new and created Shitty Day using HTML, jQuery and CSS. And a couple months later, after I discovered that CSS3 can do animations, I did a photo-only tumblr theme called Organ. Nobody really cared until Cameron Moll (thanks) posted it on his blog and I got asked to create an official theme. It got featured in the theme garden and I was like.. wow.. it seems people really like this CSS3 stuff. So I kept on experimenting and created some more CSS3 demos.

I’m really happy that most people enjoy them. But there are also some concerns. If you look at all the demos, you’ll see that most of them only work correctly in -webkit and some just in Safari. And they also lack a graceful degradation. There are people like Paul or Divya that have been pushing me to make them more cross-browser. Thanks and sorry, for letting you down so often. I can understand that some say: If it’s not cross-browser it doesn’t “count”. And Web Designers have a responsibility and so on..

Well, this is just a hobby for me. I do it only for fun. Doing cross-browser support is the exact opposite of fun. Some might get a kick out of it, but for me, I would just be kicking the wall non-stop. That’s why I usually don’t even try and jump right to the next demo. Or call me lazy, that’s fine too.

But I guess the main reason why all my experiments work best in Safari is the tool I’m using: CSSEdit. If you don’t know about it, there’s one killer feature that changed everything. I would say, if it wasn’t for that feature, I probably would’ve never started doing CSS. It’s the Live Preview! Every change you make in your CSS get’s instantly updated. It’s like Firebug. Because I like to try out new stuff, I don’t know upfront how to do things.. I kinda just throw properties in there and start tweaking the numbers till I get to some interesting result. Without Live Preview, I would have to save the file, switch to the browser, refresh, switch back to the editor and start over. For the basic stuff you get things usually right without having to see a preview, but not if you’re trying to do Photoshop-like styles with CSS. Can you imagine having to save for web your Photoshop design just to see your changes? Insane right? So because CSSEdit uses Safari to render the Live Preview it automatically will work best in Safari, so there you have it.. blame them. ;-)

Unfortunately I’m still waiting desperately till CSSEdit get’s updated to support CSS3. I’m puzzled what they are waiting for, if browsers already start dropping prefixes. They could have such a nice head-start before the big guys like Adobe start to add it. Heck, there are tons of online CSS3 generator tools and there is even and app for the iPad. But nothing for desktop? WTF?

Wait a minute.. online tools. Online? Damn, that’s it! This will solve everything! A complete HTML/CSS editor in the browser with live editing. Something like jsfiddle, but with auto-complete and a GUI. Things like box-shadows, text-shadows, gradients just scream to be manipulated with sliders. But the best part by far.. you could do your cross-browser hacking right there in any browser you want to support. Maybe such an online editor is technically not possible with older browsers? Or extremely hard to do. Or just have limited features. I have no idea. But trying to add all possible web rendering engines into a desktop editor sounds way harder. The term designing in the browser would get a whole new meaning, because you’re literally designing in the browser.

Also all files are kept in the cloud. After doing changes, you could just save it, push it to your live server or commit it to something like GitHub or so. Also some kind of SVN or collaboration feature with co-workers could be build in.

Who is gonna do it? Is somebody already working on it? Is that why CSSEdit doesn’t get updated? Or maybe Adobe? Will they move to a subscription model with a “Dreamweaver Live”? I also would love if 37signals would give it a try. They have the cloud experience, they do web stuff, they have the customers already paying with a subscription model. And how awesome would that be with some integration with their current products. Let’s see.

Update: Here a couple tools that go into that direction. Thanks for sharing. Symbiote, LiveReload, CSS3 auto-complete for CSSEdit, Akshell.