Grow your CSS skills. Land your dream job.

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.

Comments

  1. Permalink to comment#

    also a test.

    • Permalink to comment#

      Cool! I get to see the new buried comment design too?!

    • Well.. the image from gravatar test failed. Slow servers at Gravatar? I’ll wait a few.

      btw.. while I’m here typing anyway.. I wanted to tell you that you should try to lower your HTTP-requests, Add expire headers in your .htaccess and don’t forget to activate gzip compression.
      High traffic sites like this one will save a lot of money on hosting when they take performance serious.

    • I don’t know if you know this, but Chris made an entire screencast about that about a week or so ago, so he does actually do that,

    • Khalid
      Permalink to comment#

      btw.. while I’m here typing anyway.. I wanted to tell you that you should (…)

      You must be a new visitor, haha :)

  2. Permalink to comment#

    Chris, the new design is amazing. I love the way you worked in the Illustrations and having yet to see the design on a retina, I know I’m due for more excitement.

    With the other developments to the Tag feature on CodePen, I know as an end-user, it will prove extremely useful as the community grows.

    With your debugging of CSS-Tricks and well, all the problems you ever seem to face, I’m amazed at how easy it seems for you to find resolutions. I know you’ll tackle that mobile bug with WebKit, I’d be lost!

    How do you debug so well? Is it FireBug or something greater?

    • Permalink to comment#

      Thanks for reminding me to check the new design out on my Windows mobile. It looks really good. The contrast on the mobile is much better then on the desktop.

  3. Cool design, I think the top Menu fonts are looking crispy. You should try some other smooth fonts. I guess you already know about it. I am checking it in Google Chrome (Windows) :)

    • Windows has problems sometimes with making webfonts smooth, even Helvetica. I have encountered that problem in IE, Firefox and Chrome, although they’re perfectly smooth on my mac.

  4. Permalink to comment#

    Font smoothing isn’t a Windows specific problem, it’s a browser rendering problem. Fonts are perfectly smooth in FF, IE9, and Safari, but render terribly in Chrome and Opera, which is ironic since Google are such a big player in the webfonts movement. It has nothing to do with whether or not you have Cleartype on, or any other nonsense like that, it simply comes down to the browser’s rendering engine and how it handles type.

    • I have no problem in any browsers on Mac, whilst on Windows I have it in IE and Chrome and FF (haven’t tested others).

    • Adrian
      Permalink to comment#

      I’ve seen font problems in Chrome and Firefox on Mac already. Stop being such a fan boy!!

    • I’m not; I’m only pointing out problems that I have had, and heard of from others, most of the time coming from Cleartype.
      And I have made a few websites where even Helvetica, Arial or Times is not smooth, every time people on Windows having that problem.

  5. Monkey
    Permalink to comment#

    50k to install a plugin, good luck with that.

  6. Permalink to comment#

    Sorry Chriss, I dont like this design. The only section I like in this site is the footer area which has the codepen and shoptalk button.

    But no problem. I love the content. End of the day that what I need to have.

  7. Max
    Permalink to comment#

    The new design is just plain ugly. I’m sorry I love this website but I have to be honest.
    This just does not look right. Also the form I am typing into right now used to be something special…

    • Permalink to comment#

      The site doesn’t render very well in IE8 either by the looks of it, just visited today at work for the first time in a while and it was missing alot of styling etc.

    • Lauren Issa
      Permalink to comment#

      I am not loving the new design either, but I keep thinking I’ll get used to it…

      But that is not what I really wanted to comment on. @smedz28, one thing you should have learned about from reading Chris’s site is to think forward. I am loving that he is using forward-thinking code, IE8 be damned!

  8. My favorite aspect of this new design is the focus you’re giving to comments. People always say the comments and subsequent community collaboration are the best part of these blogs but I tend to ignore them because they’re tucked away. In this design you kind of can’t ignore them. Great work!

  9. smedz28
    Permalink to comment#

    Also in firefox I had to guess what the required fields of this comment box were as well as they aren’t marked

  10. Permalink to comment#

    Absolutely love the new design, especially the way you’ve done the css-tricks logo in the top left hand corner, great stuff!

  11. Permalink to comment#

    i liked earlier version, but i think i will love it too once i get used to it.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".