CSS-Tricks

Upcoming Speaking

Chris Coyier — Thu, 05 Jan 2012 02:28:26 +0000

My first half of 2012 is sprinkled with some web conferences I'm very much looking forward to.

February 20-21, Orlando, Florida - InControl

March 9-13, Austin, Texas - SXSW Interactive

April 26-27, Warsaw, Poland - Front-Trends

April 30 - May 4, Las Vegas, Nevada - Future Insights Live

June 6-7, Vancouver, Canada - Interlink Conference

Without giving away too much, my talk will be based around some quick thoughts I posted as What We Don't Know (except at SXSW where I'll probably just be hanging out).

Hope to see some of ya'll around.

Upcoming Speaking is a post from CSS-Tricks

CSS Profiling and Optimization

Chris Coyier — Wed, 04 Jan 2012 23:46:30 +0000

Just as I got done saying how I hope we can soon stop talking about CSS selector performance, Juriy Zaytsev publishes some great research on selector performance using Opera and WebKit's new "style profiler" as part of the dev tools. He was able to save 650ms on page load time on a CSS3 heavy one-page app. Big difference makers: number of selectors, universal selectors, border-radius, and transforms. Worth a thorough read through.

Direct Link to Article — Permalink…

CSS Profiling and Optimization is a post from CSS-Tricks

Looking to Hire Someone for Web Work?

Chris Coyier — Wed, 04 Jan 2012 03:52:55 +0000

The very first thing you should do is start writing. Just open a text file and define exactly who your ideal hire is. What they are like, what they hopefully know, what you'll need from them, and what you can offer them.

Then find somewhere to post it online. Probably your own website for one. Blogs are great for that. Or get more aggressive and do an in-app notification about it. There is no excuse not to have somewhere to post it. Even if you are brand new and don't even have a website yet, you could always use a Google Doc.

Now you need people to see it. Take what you've written and go post it over on Authentic Jobs. I think it's the most mature and successful industry job board. You'll probably get a lot of responses, so use an email filter to help keep yourself organized. I'd probably use an incoming email like "chriscoyier+authenticjobs@gmail.com" so they will be automatically tagged.

Good candidates will be obvious. They will email you and quickly explain in natural language why they are a good candidate. Crappy candidates will write crappy emails. Those are automatically out, since, let's face it, all jobs require good communication.

Another reason to start with Authentic Jobs is because if you don't find someone you like, you can just ask for your money back as it's guaranteed. If that's the case, I'd recommend trying to post on Smashing Jobs, 37 Signals Job Board, Dribbble Jobs, and Forrst.

None of these are free. Nor should they be. It's a crap-job / crap-company filter. If you don't believe me Google around for "free job boards". Companies that aren't willing to invest a few hundred bucks in their most vital assets don't deserve good applicants.

Then obviously: share the link to your job posting on social media stuff. Email people you think might be interested. Email folks you think might know people.

OK I fess up

Here's why I'm writing this: I get quite a few emails like "Hey Chris, we're looking to hire somebody, know anybody looking?". Oh really? Who are you? What will they be working on? What do they need to know? What are they going to earn? What benefits do they get? How should they apply? Should they send you a super vague email like this one? =)

I don't mind folks asking me about hiring, but when you're that vague, you're putting the work on me, and forgive me but I'm just not going to do it. Give me a link where you've got everything clearly defined, and I'll happily look it over and share it with whom I feel appropriate.

Looking to Hire Someone for Web Work? is a post from CSS-Tricks

HTML5 Progress Bars

Chris Coyier — Wed, 04 Jan 2012 02:03:10 +0000

Comprehensive research by Zoltan Hawryluk on the <progress> element. Screenshots of default styling across different browsers, overriding that default styling, shadow dom, polyfills, states, and fancy replacement tricks.

Direct Link to Article — Permalink…

HTML5 Progress Bars is a post from CSS-Tricks

WebKit Selector Performance Changes

Chris Coyier — Sat, 31 Dec 2011 17:13:21 +0000

Nicole Sullivan covers some of Antti Koivisto's work on making CSS selectors faster in WebKit. Clever stuff, which Nicole helps make understandable for all of us. Mostly stuff that helps the browser "rule out" selectors more quickly. I hope other browsers can take the ideas and use them where they can and continue their own innovations. Selector performance is already something that we pretty much don't need to worry about it, I'd love it if we never had to think about it again.

Direct Link to Article — Permalink

WebKit Selector Performance Changes is a post from CSS-Tricks

Responsive Multi Column Data Tables

Chris Coyier — Sat, 31 Dec 2011 02:39:56 +0000

Maggie Costello Wachs from Filament Group shares the best approach to responsive data tables I've seen yet. Remember the problem: exploring a large data table on small screen devices means a bunch of horizontal and vertical scrolling, which sucks. Her solution involves marking columns as "essential" and "optional" with CSS classes and hiding the optional ones with media queries at smaller screen sizes. Then to keep all the data accessible, providing a (dynamically created) dropdown of checkboxes to reveal the hidden optional columns.

Direct Link to Article — Permalink

Responsive Multi Column Data Tables is a post from CSS-Tricks

Public Service Announcement: Watch Your @font-face font-weight

Chris Coyier — Thu, 29 Dec 2011 15:16:35 +0000

Let's say you're browsing Google Web Fonts for a free font to use on your website. You find one you like...

You think it will look nice as headings on your site. So you follow the directions on Google Web Fonts "quick use".

1) Copy/Paste CSS link to page:

2) Copy/Paste font-family CSS to your headings CSS:

h1, h2, h3, h4, h5 {
//AN_Xml:   font-family: 'Spicy Rice', cursive;
//AN_Xml:
//AN_Xml:   /* Your other headings CSS */
//AN_Xml:}

And alas! You've done it, your headings are now in your specially picked out font:

But then you start to notice that the font is a bit muddier than you'd like. It might be hard to explain, but it just doesn't look as good as when you picked it off Google Web Fonts. Or maybe someone else notices and:

The problem is the font is muddier than you originally saw it, and it's all about font-weight.

You see, the default font-weight for headings in browsers is "bold" (or more specifically, 700). And if you looked carefully when choosing this font, you might have noticed:

You might fall prey to this if:

You don't use a reset and didn't specify a font-weight for headings (defaults to user-agent style of bold).
You use Normalize.css instead of a reset, which doesn't adjust the font-weight since bold is consitent cross-browser default.
You explicity set font-weight to bold on headings (like you might if you use a reset).

This isn't Google Web Fonts or the font itself's fault. It's just this font doesn't come in a bold weight and you are asking for it specifically. That means the browser tries to bold the font for you, which is something it's able to do but isn't particularly good at (hence the muddiness).

Fixing it is as simple as being specific with your font-weight to match what the font offers.

h1, h2, h3, h4, h5 {
//AN_Xml:   font-family: 'Spicy Rice', cursive;
//AN_Xml:   font-weight: 400; /* Be specific */
//AN_Xml:   /* Your other headings CSS */
//AN_Xml:}

So yeah. In short:

This is a problem most common in decorative fonts where it's most common there is only one font-weight available. I'd say fonts from paid services like Typekit generally offer fonts with a wider variety of font-weights available, but that's not to say it can't be a problem with Typekit, as it's smart/recommended to load as few weights as you can get away with to lighten the load of your page.

Also note, this is a common problem with italics as well. Say you decide to load a normal, bold, and italic version of a font. If you then have text that is both bold and italic, the browser will have to fake it (because it doesn't have a bold-italic version available) and it will look bad. It happens to me on this site, but I don't think loading an extra whole version of the site is worth it so I just try to avoid it.

Public Service Announcement: Watch Your @font-face font-weight is a post from CSS-Tricks

Get Value of CSS Rotation through JavaScript

Chris Coyier — Wed, 28 Dec 2011 16:42:30 +0000

A comment by aditya:

Is there a way to get the angle [through JavaScript] by which the element is rotated?

Seems like a reasonable request. So we have some HTML:

text

And it's rotated through CSS:

#i-am-rotated {
//AN_Xml:  -webkit-transform: rotate(30deg);
//AN_Xml:  -moz-transform:    rotate(30deg);
//AN_Xml:  -ms-transform:     rotate(30deg);
//AN_Xml:  -o-transform:      rotate(30deg);
//AN_Xml:}

Our goal is to get the number "30" from that element via JavaScript. The modern way to access styling information from an element is getComputedStyle() (Supported in all modern browsers and IE 9+, older IE supported currentStyle()). Let's try and get it with getComputedStyle():

var el = document.getElementById("i-am-rotated");
//AN_Xml:
//AN_Xml:var st = window.getComputedStyle(el, null);
//AN_Xml:
//AN_Xml:var tr = st.getPropertyValue("-webkit-transform") ||
//AN_Xml:         st.getPropertyValue("-moz-transform") ||
//AN_Xml:         st.getPropertyValue("-ms-transform") ||
//AN_Xml:         st.getPropertyValue("-o-transform") ||
//AN_Xml:         st.getPropertyValue("transform") ||
//AN_Xml:         "Either no transform set, or browser doesn't do getComputedStyle";

You might think the value returned would be "rotate(30deg)" and we could run parseInt() on it and get "30". But unfortunately that doesn't work. The actual value we get back is this:

console.log(tr);
//AN_Xml:// matrix(0.8660254037844387, 0.49999999999999994, -0.49999999999999994, 0.8660254037844387, 0, 0)

The browser turns the CSS rotation transform into a matrix transform. I imagine it does this to simplify what could be multiple transforms on the single element into one value. So what are we to do?

Nicolas Gallager researched the matrix transformation for rotate transforms. Which is essentially this:

rotate(Xdeg) = matrix(cos(X), sin(X), -sin(X), cos(X), 0, 0);

We really just need one of these to make a quick equation. We just need to un-sin (opposite of sin, arc sin, asin, sin^-1) on of the values we have to get the radians.

First we get our hands on the separate individual matrix values:

var values = tr.split('(')[1].split(')')[0].split(',');
//AN_Xml:
//AN_Xml:var a = values[0]; // 0.866025
//AN_Xml:var b = values[1]; // 0.5
//AN_Xml:var c = values[2]; // -0.5
//AN_Xml:var d = values[3]; // 0.866025

Then we know sin(X) == 0.5 so asin(0.5) == radians and degrees == radians * 180/π.

So:

var angle = Math.round(Math.asin(b) * (180/Math.PI));
//AN_Xml:console.log(angle);
//AN_Xml:// 30

Yay!

Nicolas took it a bit further by accounting for scale as well. With the full code below, the rotation value can be extracted with any number of other transforms applied.

#complex-transform {
//AN_Xml:  -webkit-transform: rotate(30deg) scale(1.2) skew(10deg) translate(5px, 5px);
//AN_Xml:  -moz-transform:    rotate(30deg) scale(1.2) skew(10deg) translate(5px, 5px);
//AN_Xml:  -ms-transform:     rotate(30deg) scale(1.2) skew(10deg) translate(5px, 5px);
//AN_Xml:  -o-transform:      rotate(30deg) scale(1.2) skew(10deg) translate(5px, 5px);
//AN_Xml:}

var el = document.getElementById("complex-transform");
//AN_Xml:var st = window.getComputedStyle(el, null);
//AN_Xml:var tr = st.getPropertyValue("-webkit-transform") ||
//AN_Xml:         st.getPropertyValue("-moz-transform") ||
//AN_Xml:         st.getPropertyValue("-ms-transform") ||
//AN_Xml:         st.getPropertyValue("-o-transform") ||
//AN_Xml:         st.getPropertyValue("transform") ||
//AN_Xml:         "fail...";
//AN_Xml:
//AN_Xml:// With rotate(30deg)...
//AN_Xml:// matrix(0.866025, 0.5, -0.5, 0.866025, 0px, 0px)
//AN_Xml:console.log('Matrix: ' + tr);
//AN_Xml:
//AN_Xml:// rotation matrix - http://en.wikipedia.org/wiki/Rotation_matrix
//AN_Xml:
//AN_Xml:var values = tr.split('(')[1].split(')')[0].split(',');
//AN_Xml:var a = values[0];
//AN_Xml:var b = values[1];
//AN_Xml:var c = values[2];
//AN_Xml:var d = values[3];
//AN_Xml:
//AN_Xml:var scale = Math.sqrt(a*a + b*b);
//AN_Xml:
//AN_Xml:// arc sin, convert from radians to degrees, round
//AN_Xml:// DO NOT USE: see update below
//AN_Xml:var sin = b/scale;
//AN_Xml:var angle = Math.round(Math.asin(sin) * (180/Math.PI));
//AN_Xml:
//AN_Xml:// works!
//AN_Xml:console.log('Rotate: ' + angle + 'deg');

UPDATE: Turns out this line is way more reliable for calculating angle:

var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));

View Demo

Thanks Nicolas, Divya, and Oli for behind-the-scenes help.

Get Value of CSS Rotation through JavaScript is a post from CSS-Tricks

Thank You (2011 Edition)

Chris Coyier — Mon, 26 Dec 2011 15:20:02 +0000

Hey folks! It's that time of year again where I write a post to say thanks to every person visiting this site. CSS-Tricks is part of my career, so just by virtue of you visiting this site directly helps me.

Like families often send holiday letters to their relatives with a review of their year and the notable things family members have done, I like to write this blog post and review the year at CSS-Tricks through the numbers. (See 2007, 2008, 2009, 2010)

I wrote 264 posts in 2011. 107 of those were "link" posts, which I still count because I do some writing along with them.

I crossed the 1,000 post milestone, now with 1,017 posts. That's an average of 15 posts per month since launch in July 2007.

There have been 41,941 approved comments to the site. Which averages out to about 41 comments per post, which I think is just an amazing level of community involvement. No spam in there either. Akismet has blocked 102,977 spam comments. I am still a big fan of featuring and burying comments as a way of rewarding quality comments and hiding not-spam-but-not-helpful comments, which makes the often-long threads easier to read.

The most ever commented post, with 421 comments, was just this month when I asked about internet connection speed. I've been thinking about doing a week or month where I do all opinion-style article and let the comments roll and this kind of participation encourages that.

Comment graph since launch of site (see)

I had 3 big scares this year:

One day I woke up to find the forums offline. Turns out it was a problem with how Vanilla forums does things and I nearly decided to sunset the forums as I didn't have time to deal with another big forum migration. Fortunately I was able to patch Vanilla in such a way that this nasty problem can't happen again, and the forums are alive and well.
In June, I had some serious performance problems with the site. After tons of troubleshooting, I was able to track it down to my permalink structure in WordPress. This site has 792 "pages" (that's how I do snippets and screencasts) which comes with a serious perfomance penalty when combined with using the /%postname%/ permalink structure in WordPress. I switched away from that and the site was fine. Now that WordPress 3.3 is out, that issue is fixed, and I've switched back.
In December, I found out the domain name css-tricks.com was stolen. Fortunately in about a week I was able to get it back.

In April 2011, SurveyMonkey purchased Wufoo (where I work) for $35m. This purchase meant moving to California to work out of the SurveyMonkey office, which in August 2011 I did and am still there now.

The advertising on the site has seen a bit of a shakeup lately. The block of six 125x125px advertisement in the sidebar are gone and replaced with a single advertisement for Treehouse. They also have the header advertisement. It's essentially a full-site sponsorship, like "CSS-Tricks, brought to you by Treehouse." I worried about removing advertisers that were long-time sponsors and friends to CSS-Tricks, but I think this is the correct move for me. It's a net gain financially and more importantly, the advertisements look better and are more integrated into the responsive nature of the site. I still have some spots on BuySellAds and still quite like their service.

Version 9 of this site rolled out this August and then I release and updated navigation and advertising (calling that v9.2) in November 2011. I'm sure there will be a real v10 in 2012, but that work hasn't started yet in earnest. The more the site grows the harder new versions are. I don't want v10 to be just a re-skin, but a more through audit of the experience of each section of the site. Honestly I bet it's Fall 2012 before that happens, but you never know.

Just this past month has broken some traffic records for the site. I'm now seeing over 1 million uniques per month with over 4 million pageviews. I think traffic will continue to grow. I plan to keep doing everything I always have around here, only in addition, work on the gallery and almanac (new very recently), which is just all the more content for people to find and explore.

Of the 38 million pageviews in the whole of 2011, about 30% of it went to demos. 11% went to the snippets area of the site. 4% went to the forums and another 4% to the screencasts. The most popular article was Perfect Full Page Background Images, which wasn't even written this year.

It's a near draw, 51% vs 49% in Returning Vistors vs New Visitor.

55% of traffic comes from search engines, 29% from referral sites, and 16% direct. The most poplar search term is "css tricks" with 2.5% of search traffic followed by "css shadow" with 1%. The top three referral sites are 1) 1stwebdesigner, 2) Smashing Magazine, 3) Web Design Ledger

The RSS feed hit a peak of 82,888 subscribers. It's still growing in number, but interestingly, growth itself has declined. Where we gained 25,000 new subscribers in 2010, we only gained 18,000 this year. I'm still a huge fan of RSS, but I can see how widespread usage of it is impacted by growth of social media use.

I have received 8,329 messages through the Wufoo contact form on this site, 2,844 were from this year (about 8 a day). I respond to the majority of them, unless they are a request for direct help which I unfortunately don't have the time for and instead recommend the forums.

Speaking of the forums, there are 13,233 forum threads. That's just threads, not total posts which I'm sure is many times that. I have numbers of registered users, but unfortunately it's so mired with spam users that number isn't useful. There are five forum moderators that do great work keeping the forums civil, spam-free, and useful. Thanks to Robskiwarrior, TheDoc, Mottie, jamy_za, and TT_Mark.

Goals

I set pretty loose goals for 2011. One I did mention was wanting to do another book, which I failed at. I'll be more specific this year:

Actually design more things, become better designer
Finish Almanac
Release a book or have serious progress on one
Produce at least one new round of CSS-Tricks merchandise
Release one web app side project
Continue same moderate pace of blogging and shooting screencasts while also posting new things to the gallery and snippets.

So thanks again folks! Here's to a fantastic 2012 for all of us!

Thank You (2011 Edition) is a post from CSS-Tricks

Custom Events are Pretty Cool

Chris Coyier — Fri, 23 Dec 2011 01:46:29 +0000

Let's say you are working on a web application in jQuery and you are tasked with writing an accordion suited to the needs of your web app. You decide to make it into a plugin. That way anywhere in this app that needs an accordion, they can load this plugin and call it upon semantic markup that is ready to become an accordion. Then ta-da, they have a lovely working accordion.

Now another developer is using your accordion and they want to be able to Ajax load some content into one of the sections of the accordion, but only when that section is opened. Together you decide that you should keep your code separate. The generic functionality of how an accordion works should be separate from code specific to one accordion on one page of an app.

Callbacks, the traditional way

One way to approach that would be to write "callbacks" into your plugin. The other developer would specify the name of a function that she wants run when certain actions happen on that accordion. So the calling of it might be like:

$(".accordion").accordion({
//AN_Xml:  panelOpen: myPanelOpenCallback,
//AN_Xml:  panelClose: myPanelCloseCallback;
//AN_Xml:});

And they would have created those callback functions themselves:

function myPanelOpenCallback() {
//AN_Xml:  // Do Ajax stuff
//AN_Xml:}

Then the plugin itself would honor those callbacks in its related internal functions:

$.fn.accordion = function(options) {
//AN_Xml:
//AN_Xml:	return this.each(function(i, el) {
//AN_Xml:
//AN_Xml:	  var base = el;
//AN_Xml:
//AN_Xml:	  base.init = function() {
//AN_Xml:	  	// Do initialization stuff
//AN_Xml:	  };
//AN_Xml:
//AN_Xml:	  base.openPanel = function(panel) {
//AN_Xml:	  	// Open panel
//AN_Xml:
//AN_Xml:		// Do callback
//AN_Xml:		options.panelOpen.call();
//AN_Xml:	  };
//AN_Xml:
//AN_Xml:	  base.closePanel = function(panel) {
//AN_Xml:	  	// Open panel
//AN_Xml:
//AN_Xml:		// Do callback
//AN_Xml:		options.panelClose.call();
//AN_Xml:	  };
//AN_Xml:
//AN_Xml:	  base.init();
//AN_Xml:
//AN_Xml:	});
//AN_Xml:
//AN_Xml:};

View Demo of Callback Model

Custom Events, a better way

Now let's say a third developer gets involved, and they also want to write a bit of JavaScript that reacts to a panel opening as well. For the sake of a use case, say what's inside the accordion panels are settings, and this developer wants to save those settings whenever keys are opened or closed automatically.

Now we're in an interesting position. We've already defined our callback for accordion panels opening and closing. So in the callback model, these developers are going to have to get together on that callback and run both of their code in that one callback. Not that big of a deal, but now we're forced to mix code when that might not be ideal. Remember we started this whole thing off by separating specific functionalities.

Here's where custom events are super rad. Instead of firing off a specified callback, the accordion functionality plugin fires off a custom event. Custom events are just like any other event (e.g. click) only they are only declared and called programmatically.

First, callbacks are gone, we just call the accordion plugin without them:

$(".accordion").accordion();

Now in place of where we called the callbacks, we'll trigger our Custom Event. Basically, just make up a name that makes sense (like you are naming a function).

// OUT
//AN_Xml:// options.panelOpen.call();
//AN_Xml:
//AN_Xml:// IN
//AN_Xml:panel.trigger("panelOpen");

Now our other developers can bind their stuff to this custom event and do their own thing.

$(".panel").on("panelOpen", function() {
//AN_Xml:   // Developer 1: do Ajax stuff
//AN_Xml:});
//AN_Xml:
//AN_Xml:// Meanwhile, in another part of town...
//AN_Xml:$(".panel").on("panelOpen", function() {
//AN_Xml:   // Developer 2: do saving stuff
//AN_Xml:});

Yay for freedom! Yay for separation of functionality!

In my opinion custom events are just better all around. I do think they require a bit more communication though. You'll probably have to write up some comments somewhere that explain what custom events are fired and when and make that easy to discover.

View Demo of Custom Events model

More Information

The scenario outlined above is very simple. The following two articles go way more into depth about Custom Events including more complex examples and more information on how they work.

Demystifying Custom Events in jQuery by Rebecca Murphey
jQuery Special Events by Ben Alman

Custom Events are Pretty Cool is a post from CSS-Tricks

Speech Bubble Arrows that Inherit Parent Color

Chris Coyier — Mon, 06 Feb 2012 17:57:42 +0000

Interesting question:

//AN_Xml:

css3 speech bubble question: for the "triangle"'s border color, how can I set it to whatever its parent div's bgcolor is automagically?
//AN_Xml:
— Jin Yang (@jzy) February 1, 2012

//AN_Xml: