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 specific 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

Stuff you can do with the “Checkbox Hack”

Chris Coyier — Wed, 21 Dec 2011 19:36:30 +0000

The "Checkbox Hack" is where you use a connected label and checkbox input and usually some other element you are trying to control, like this:

Do Something
//AN_Xml:
//AN_Xml:Control me

Then with CSS, you hide the checkbox entirely. Probably by kicking it off the page with absolute positioning or setting its opacity to zero. But just because the checkbox is hidden, clicking the still toggles its value on and off. Then you can use the adjacent sibling combinator to style the

differently based on the :checked state of the input.

input[type=checkbox] {
//AN_Xml:   position: absolute;
//AN_Xml:   top: -9999px;
//AN_Xml:   left: -9999px;
//AN_Xml:   /* For mobile, it's typically better to position checkbox on top of clickable
//AN_Xml:      area and turn opacity to 0 instead. */
//AN_Xml:}
//AN_Xml:
//AN_Xml:/* Default State */
//AN_Xml:div {
//AN_Xml:   background: green;
//AN_Xml:   width: 400px;
//AN_Xml:   height: 100px;
//AN_Xml:   line-height: 100px;
//AN_Xml:   color: white;
//AN_Xml:   text-align: center;
//AN_Xml:}
//AN_Xml:
//AN_Xml:/* Toggled State */
//AN_Xml:input[type=checkbox]:checked ~ div {
//AN_Xml:   background: red;
//AN_Xml:}

View Demo

So you can style an element completely differently depending on the state of that checkbox, which you don't even see. Pretty neat. Let's look at a bunch of things the "Checkbox Hack" can do.

Disclaimer: Some of this stuff crosses the line of what you "should" do with CSS and introduces some bad semantics. It's still wicked fun to play with and cool that it's possible, but in general functional behavior should be controlled by JavaScript.

Custom Designed Radio Buttons and Checkboxes

Hide the default UI of a radio button or checkbox, and display a custom version right on top of it. Probably not generally good practice, as users are familiar with default form elements and how they work. But can be good for enforcing cross browser consistency or in situations where the UI is so obvious anyway it's just for fun.

Pioneered by Ryan Seddon
Similar by Martin Ivanov
For use on Wufoo forms by me

File system like "tree menu"

Demo by Ryan Seddon

Tabbed Areas

The "tabs" design pattern is just toggling on and off of areas, perfect for the checkbox hack. But instead of checkboxes, in which any checkbox can be on or off independently of one another, these tabs use radio buttons in which only one per group can be on at a time (like how only one tab can be active at a time).

Functional CSS tabs revisited

Dropdown Menus

Original by paullferguson and then Forked for betterness by me

Push Toggles

From What's My MPG?

Options from Dabblet

FAQ Answer Revealing

View Demo

Stuff you can do with the “Checkbox Hack” is a post from CSS-Tricks

Adobe-like Arrow Headers

Chris Coyier — Tue, 20 Dec 2011 16:33:14 +0000

Adobe has some pretty cool header bars for modules on their site:

The header bar is divided into left and right sections. The left being an explanatory title and the right being a related link. But let's get super critical of how they did it. First of all, they use a non-sprited image to do it:

That means an extra HTTP request just for the headers. Worse, the :hover effect is a totally separate image. That means yet another HTTP request and a "flash of black" while the second image loads on your first hover.

We can do it with zero images! Here's our version:

View Demo Download Files

The markup for the header is just a title with a link inside:


//AN_Xml:  Community Blue
//AN_Xml:  
//AN_Xml:

Here's the basic setup of the header, with the link on the right with basic coloring, including the straight white line made by a border:

.module h2 {
//AN_Xml:	background: #ccc;
//AN_Xml:	padding: 0 0 0 10px;
//AN_Xml:	font-size: 16px;
//AN_Xml:
//AN_Xml:	/* Thickness of the bar more easily achieved with line-height
//AN_Xml:	   since padding would push link inward.  */
//AN_Xml:	line-height: 2;
//AN_Xml:}
//AN_Xml:.module h2 a {
//AN_Xml:	float: right;
//AN_Xml:	position: relative;
//AN_Xml:	text-decoration: none;
//AN_Xml:	color: #333;
//AN_Xml:	padding: 0 10px;
//AN_Xml:	border-left: 5px solid white;
//AN_Xml:}

Now the trick to getting the arrow within the line is just using CSS triangles applied via the ever-useful pseudo elements.

.module h2 a:before,
//AN_Xml:.module h2 a:after {
//AN_Xml:	content: "";
//AN_Xml:	position: absolute;
//AN_Xml:	/* Pushed down half way, will get pulled back up half height of triangle
//AN_Xml:	   ensures centering if font-size or line-height changes */
//AN_Xml:	top: 50%;
//AN_Xml:	width: 0;
//AN_Xml:	height: 0;
//AN_Xml:}
//AN_Xml:.module h2 a:before {
//AN_Xml:	left: -12px;
//AN_Xml:	/* Triangle */
//AN_Xml:	border-top: 8px solid transparent;
//AN_Xml:	border-bottom: 8px solid transparent;
//AN_Xml:	border-right: 8px solid white;
//AN_Xml:	/* Pull-up */
//AN_Xml:	margin-top: -8px;
//AN_Xml:}
//AN_Xml:.module h2 a:after {
//AN_Xml:	/* Smaller and different position triangle */
//AN_Xml:	left: -5px;
//AN_Xml:	border-top: 6px solid transparent;
//AN_Xml:	border-bottom: 6px solid transparent;
//AN_Xml:	border-right: 6px solid #a2d6eb;
//AN_Xml:	margin-top: -6px;
//AN_Xml:}

One significant difference between ours and theirs is that they have a gradient that goes right through the triangle. That's not possible with ours as it's not practical to apply gradient with the CSS triangle technique. That's not to say gradients are out though, you'd just need to make sure that where the triangle attaches to the main link, the color is solid.

For the demo page I added a few different colors, transitions, and examples where double-triangles could be used to fake an angled line.

View Demo Download Files

Adobe-like Arrow Headers is a post from CSS-Tricks

Multiple Attribute Values

Chris Coyier — Mon, 19 Dec 2011 01:40:00 +0000

Elements can have multiple class names. For instance:

Then in CSS, you could match that element based on any one of them:

/* All these match that */
//AN_Xml:.module { }
//AN_Xml:.accordion { }
//AN_Xml:.expand { }

You can limit your selectors to match only if several of them are present, for example:

// Will only match if element has both
//AN_Xml:.accordion.expand { }

But what about other attributes?

Class names are unique in the ability outlined above. Other attributes are not treated as "multiple values" just because they have a space in them. For instance:

This element just has a data-type attribute with a value of "module accordion expand", not three unique values "module", "accordion" and "expand". But let's say we wanted to be able to select elements based on individual values like we can with class names.

We could do it by using a "*" substring matching attribute selector which will match if the provided string appears anywhere in the value:

[data-type*="module"] {
//AN_Xml:
//AN_Xml:}

or only match when multiple of specific "values" are present:

[data-type*="accordion"][data-type*="expand"] {
//AN_Xml:
//AN_Xml:}

Ever better, use the whitespace separated selector (e.g. [data-type~="expand"]). That way you won't get burned by something like "expand" matching "expander" when you didn't want to.

[data-type~="accordion"][data-type~="expand"] {
//AN_Xml:
//AN_Xml:}

View Demo

Works in IE7+ (because IE 7 was first IE to support attribute selectors)

Multiple Attribute Values is a post from CSS-Tricks

Dabblet

Chris Coyier — Fri, 16 Dec 2011 03:18:40 +0000

The best part about Lea Verou's new in-browser HTML/CSS demo tool? It saves your demos to your GitHub account as gists.

Direct Link to Article — Permalink…

Dabblet is a post from CSS-Tricks

Auto Updating IE

Chris Coyier — Thu, 15 Dec 2011 16:51:49 +0000

Big news from Microsoft:

With automatic updates enabled through Windows Update, customers can receive IE9 and future versions of Internet Explorer seamlessly

Windows XP gets IE 8
Windows Vista and 7 get IE 9

Presumably every new release will happen the same way. So when IE 10 goes final the next Windows Update will include that too for the OS's it will run on.

Direct Link to Article — Permalink

Auto Updating IE is a post from CSS-Tricks

Open a Window with Full Size Unscaled Image

Chris Coyier — Thu, 15 Dec 2011 05:46:43 +0000

For the gallery section of this site, I wanted people to have the ability to see the screenshot at its original size. Due to the fluid nature of this site, it's fairly common for the screenshot to be scaled down to fit into its column. So I put together this little solution.

My plan is to open a window the exact size needed to fit the image. Quick, easy, and perfectly good UX in my opinion. All you have to do is this:

window.open(path-to-image);

Actually it's a bit more complex than that. We need to pass in a bunch of parameters to get the window we want. Namely, the kind with as little chrome as possible. A top bar with a close button and that's about it.

window.open(path-to-image, null, 'height=y, width=x, toolbar=0, location=0, status=0, scrollbars=0, resizeable=0');

Example:

The tricky part is figuring out just exactly what height and width values to pass. You can't just ask the image what size it is. Well you can, but it will lie. It will tell you its current size, not its natural size.

var img = document.getElementById('screenshot');
//AN_Xml:
//AN_Xml:img.width;  // current size, not natural size
//AN_Xml:img.height; // current size, not natural size

To get the natural size, we'll create a new image in the magical ether of JavaScript, set its source to the source of the on-screen image, and then test its width and height. It will report correctly as it's untainted by CSS on the page.

var img = document.getElementById('screenshot');
//AN_Xml:
//AN_Xml:var magicEtherImage = new Image();
//AN_Xml:magicEtherImage.src = img.src;
//AN_Xml:
//AN_Xml:var padding = 20; // little buffer to prevent forced scrollbars
//AN_Xml:
//AN_Xml:// Values to use when opening window
//AN_Xml:var winWidth = magicEtherImage.width + padding;
//AN_Xml:var winHeight = magicEtherImage.height + padding;

I use jQuery on my site, so ultimately my code is like this:

$(".view-full-size").click(function() {
//AN_Xml:
//AN_Xml:  var mainScreenshot = $("#main-screenshot");
//AN_Xml:
//AN_Xml:  var theImage = new Image();
//AN_Xml:  theImage.src = mainScreenshot.attr("src");
//AN_Xml:
//AN_Xml:  var winWidth = theImage.width + 20;
//AN_Xml:  var winHeight = theImage.height + 20;
//AN_Xml:
//AN_Xml:  window.open(this.href,  null, 'height=' + winHeight + ', width=' + winWidth + ', toolbar=0, location=0, status=0, scrollbars=0, resizable=0'); 
//AN_Xml:
//AN_Xml:  return false;
//AN_Xml:
//AN_Xml:});

You can see it in action on single gallery pages like this.

Obviously it doesn't do much on mobile, so I just remove the button with a media query.

Open a Window with Full Size Unscaled Image is a post from CSS-Tricks

New Poll: Your Internet Connection Speed

Chris Coyier — Tue, 13 Dec 2011 23:54:54 +0000

I think it would be interesting to get an idea of what the internet connection speeds are like for CSS-Tricks readers. Connection speed makes such a huge difference in the web browsing experience I hope that getting an understanding of what speeds people are getting will help us all kind that in mind when working on websites.

So go test your speed right now (Download Speed) and pick the most appropriate answer in the poll (in the sidebar). If a mobile device is your main connection, test that, otherwise use your main home/work connection.

Remember, "Mbps"

That's "Megabits per second." Somehow this has become the standard for measuring internet connection speed. Personally, I think this is insane. People understand the size of digital things in bytes, kilobytes, megabytes, gigabytes, and terabytes. Yet instead of using these commons sizes that everyone understands, we use the "bit" versions of those, which are are 8x larger numbers. Because:

8 "Megabits" == 1 "Megabyte"
et al.

Let's stick with "Mbps" since that's what the speed tester reports.

New Poll: Your Internet Connection Speed is a post from CSS-Tricks

TextMate 2

Chris Coyier — Tue, 13 Dec 2011 16:46:18 +0000

The long awaited has arrived (in alpha).

Direct Link to Article — Permalink…

TextMate 2 is a post from CSS-Tricks

Outer Border Radius Tabs

Chris Coyier — Thu, 05 May 2011 17:50:52 +0000

Imagine a real-life tabbed folder. The tabs on those aren't only rounded at the top of the tab, but they also connected to the folder with a rounded edge. Top corners, easy, just border-radius. Bottom corners, not so easy. Steve Smith has a published a neat technique utilizing pseudo elements to do it.

I tackled this same exact idea that I'm using for some upcoming talks and this is how I did it.

Direct Link to Article — Permalink

Advertise here with BSA

Border Radius on Images

Chris Coyier — Thu, 05 May 2011 15:56:37 +0000

If you ever tried to use border-radius on 's, you know that it doesn't always work (even if the browser supports that CSS3 property, like Firefox 3 and Opera 11). The root of it is that the image is content, not a container, and the container is what gets rounded with border-radius. Jonathan Neal has a demo to make this work. Essentially it sets the background of the image element to itself, and then changes the src of the image to a transparent GIF data URI.

Direct Link to Article — Permalink

Advertise here with BSA