Cross Domain AJAX with CSSHttpRequest

Normally, AJAX is limited to retrieving data on the same domain that served the page. This is a limitation of the XMLHttpRequest, done mostly for security purposes. There are several ways to get around this limitation, of course, using a variety of methods and techniques. This is one of the stranger that I’ve come across – CSSHttpRequest.

Essentially, this small JavaScript library exploits the fact that CSS stylesheets are not subject to the same domain policy, which enables cross-domain POST requests for .css files. This allows you to pull CSS rules from remote domains – rules that contain name-value pairs embedded in valid CSS styles. The particular technique used is to return name-value pairs in background url fields for fake style rules, as such:

#c0 { background: url(data:,Hello%20World!); }

The client-side applies these style rules when they return from the remote domain, then JavaScript is used to read the property values and turn them into essentially JSON data ready for client consumption.

Of course, there’s a reason that the same origin policy is enforced. Normally, resources on the same domain are considered trusted, while external resources are not. With a library like this, essentially, if you’re vulnerable to JavaScript injection, there’s not much you can do to keep someone from embedding CSSHttpRequest on your page then using it to pull content from a remote domain. Nasty trick, but it’s totally possible and even trivial to some extent.

There are certainly legitimate reasons to need cross-domain AJAX. However, I wouldn’t think to use such a technique on a public site – it has the feel of a hack since (AJAX isn’t supposed to cross domains, after all), and the potential erosion of public trust is not worth the benefits. As an exercise of an interesting technique, it’s very cool, though.

3D CSS Animated Image Carousel

Here’s a 3D CSS Animated Image Carousel that I created while I was learning about 3D CSS animation. Watch the video above to see the technique in action. If you’re on a 3D CSS animation capable browser (currently a non-production version of MAC Safari and mobile Safari in the iPhone and iPod Touch), go ahead and check it out. The video was shot with my XBOX360 webcam, of all things.

New Theme, Digging Into WordPress

I just recently changed to a new theme for my site. Since then, I’ve been doing my first real digging into the internals of how theming works and how to talk to the back end of WordPress. It’s been a suprisingly pleasant venture – all your content is easily accessible and the interface is clean. I’m just starting to learn PHP (from a .NET background), and it’s been nice to find that I can hack around and usually get the code right on the first or second try.

I’ve also been making some progressive enhancements to the site at the same time. If you came in via a webkit-based browser, you’ll hopefully notice the webkit-only light blue gradient behind post titles, as opposed to a solid color. I also animated the RSS button in the upper right hand corner to grow 10% larger on hover. These are examples of ways to embrace progressive flourishes on your site without breaking the experience for anyone. Next up, I’m going to incorporate rgba into the footer somehow. Hope you enjoy the new layout!

Progressive CSS Animation Tutorial

I’ve been focusing a lot lately on demonstrating some CSS animation techniques. That’s all fine and well, but there is definitely a need for some instructional material on the web. To that end, check out this CSS animation tutorial that I just finished. It will teach you some techniques that are useful today in a mixed-support world for CSS animations. All the examples covered are progressive animations that require little work on your part, and that also don’t significantly impact user experience if they are unable to view them.

I wrote the demo using straight HTML and jQuery UI instead of the normal blogging platform. To that end, there’s no support for comments on the tutorial so feel free to comment here if you’re interested. Enjoy!

CSS Animation Fun

Falling Blocks CSS Animation

I’ve been working a lot more on CSS animations lately. There’s not much documentation out there and what is available is incomplete, so working with them is definitely a bit of a chore. I’ve been creating some examples that are pretty cool and demonstrate some more difficult techniques. They only work in Safari and Chrome, so fire one of those up and click through.

I’ve been working mostly with the onclick event. The hover event is ultimately a bit disappointing because it reverses the animation effect when you stop hovering. That’s good for effects like growing buttons on hover, but not for a lot of other uses. The one-way nature of the onclick event means that it doesn’t cause the animation to reverse itself, which leads to some pretty neat effects. Check out these examples, and let me know if you end up using anything from them – I’m very curious to see what people do with this technology!

Hiding Elements Using CSS Animations

Here’s a quick demo of how to use CSS animation to hide a page element on click. This technique is only useful in a webkit-based browser, such as Safari of Chrome – I’d highly suggest checking it out in one of these browsers.

I’m Off!

Using one of the aforementioned browsers, click on the box above. It should fly off the left side of the page, rotating and getting smaller as it moves off the page. This has the effect of appearing to be removed from the page. In reality, the section is still there, it’s just been moved to the left. This is little more than a tech demo at this point, since CSS animations aren’t supported in the more popular browsers, including Firefox and Internet Explorer – using JavaScript for such a technique is still highly recommended for now.