CSS-Tricks Chronicle III

Published by Chris Coyier

Plenty of interesting happenings this week.

The new design launched. If you have things to say specially about it, let's keep them on the launch thread. Bugs on GitHub.

One of the biggest bugs during the launch was that the launch post would instantly crash mobile WebKit browsers. Not good. I made some reduced test cases to track it down. Does crash. Does not crash. Tested on (real) iPhone 4s. iPad 2 did not crash. The difference between the two cases? Just one less comment list item. No JavaScript is involved. It may be an issue with page height or just sheer DOM size? Number of requests maybe? I'll have to do more research and then probably a blog post about it.


I want to thank Pippin Williamson for a bunch of help right at the last minute in getting his plugin Restrict Content Pro whipped into shape for use on The Lodge.


Another launch bug was that the icon font I was using, which worked great in local development, stopped working in production in Firefox and IE 9. It was because I use a CDN on the production site and those browsers disallow loading @font-face fonts across domains. That is, unless they are served with a special header that allows it. A little of this in my .htaccess file to do that:

<FilesMatch "\.(woff|eot|svg|ttf)">
	Header set Access-Control-Allow-Origin *
</FilesMatch>

It worked! Thankfully, because NetDNA honors the headers set by the original files. Good work, NetDNA.


On CodePen, we launched tags which make it easier to find similar pens, for example, Pens using HTML5 canvas. We also have jQuery UI support (which loads both jQuery UI and its base stylesheet). It's also way easier to add third party JS libraries as we have autocomplete going in the external JS input, powered by URLs from CDNjs.com. A few more improvements too, detailed in this blog post. There is a bunch of exciting new features coming too, can't wait to tell everyone about them.


I like it when users use the forums to let others know of browser problems they find. Then take the time to come report back with more findings and solutions.