Skip to main content

Chris Coyier

Founder, writer, designer, spam-deleter, email personality

Article

Specifics on CSS Specificity

This article was originally published on August 11, 2008. I am updating it now to fix some inaccuracies in how this concept was presented.

I’ve never specifically covered this subject before. (rimshot!)

The best way to explain it is to start with an example of where specificity gets confusing and perhaps doesn’t behave like you would expect. Then we’ll take a closer look at how to calculate the actual specificity value to determine which selector takes precedence.… Read article “Specifics on CSS Specificity”

Article

Dynamic Page / Replacing Content

This article is an update to this old article, which had an ugly demo and a variety of techniques in it no longer probably considered good practices. This new demo is much cleaner, up to date, and fuller featured. Because the old article was a bit of a different scope, I’ll leave it alone, just refer to this one. Update January 2013: There are better practices now, detailed here.

Let’s say you wanted to make a website where … Read article “Dynamic Page / Replacing Content”

Snippet

Cufon 101

1. Include the JavaScript for Cufón and the Cufón font

<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/TitilliumMaps.font.js"></script>

2. HTML

Normal tags

<h1>Business Solutions</h1>
<h2>Business Insurance</h2>

3. Tell Cufón to replace the fonts for the specified CSS selectors

<script type="text/javascript">
    Cufon.replace('h1, h2', { fontFamily: 'TitilliumMaps26L', hover: true });
</script>

4. Add JavaScript error handling in case there is an error loading

function handleError() { return true; }
window.onerror = handleError;

5. CSS

The font color, size and hover color is controlled via … Read article “Cufon 101”

Article

Organic Tabs

Have you ever seen a tabbed content area in a sidebar that was a little “jerky”? The jerkiness can be caused by a bunch of things, like the content in the tabbed areas are of different heights, or maybe the way the switch happens the current one is hidden for a brief second before the new one shows up and the content below it jumps up and back down quickly. For lack of a better term, I’m calling tabs that … Read article “Organic Tabs”

Article

Table Row and Column Highlighting

In mid-2009 I did a screencast about tables which featured how to do row and column highlighting with jQuery. The method in the video isn’t nearly as efficient as it could be, so this is an update to that. Shout out to Bronislav Klucka who contacted me about the idea.

Attaching events to table cells is the quintessential example, and also read like a history for event handling in jQuery.

Read article “Table Row and Column Highlighting”
Snippet

Cross Domain GET Forwarding

When you do an AJAX request on a website, the URL you request from needs to reside on the same domain as where the request was made from. This is a security restriction imposed by the browser. There is a way to sneak around this by using a bit of a “man in the middle” approach.

PHP, being a server-side language, has the ability to pull content from any URL. So a PHP file can become the man in the … Read article “Cross Domain GET Forwarding”

Article

May is Maintenance Month

There are over 600 blog posts on this site over the course of nearly 3 years. Some of them are… better than others. I think it is the responsible thing to do is try to keep that content current and in good working order. So I’m going to dedicate a full month to it and declare May “Maintenance Month.” I have identified a good number of articles that I would like to go back and revisit. Some because technology has … Read article “May is Maintenance Month”

Snippet

Fallback for CDN hosted jQuery

Several big companies offer copies of jQuery hosted on their CDN’s (Content Delivery Network). Most notoriously Google, but also Microsoft and jQuery themselves. A lot of people swear by this since it saves bandwidth, downloads faster, and perhaps even stays cached jumping between different sites that use the same script.

There is always that twinge of doubt though, that perhaps something goes wrong with these big companies CDN at the script isn’t available (it happens). It’s more reliable to use … Read article “Fallback for CDN hosted jQuery”

Article

jQuery UI’s Position Function (plus, MagicZoom from scratch)

Knowing how to position things where you want them is one of the most important tools in a web designer’s toolbox. Understanding page flow, understanding everything is a box, understanding floats, etc. Once the basics are learned, a common question for intermediate designers is how to position elements relative to other elements. The standard CSS solution for this is to use the ol’ absolute positioning inside relative positioning trick. In a nutshell, you can use set relative positioning (or … Read article “jQuery UI’s Position Function (plus, MagicZoom from scratch)”

Article

My Stuff from jQuery Conference

The Bay Area jQuery Conference was amazingly fun. I met TONS of great people who I’ve wanted to meet forever. It was kinda like a Bluegrass Festival in some ways. The sessions weren’t recorded so unfortunately you can’t check them out that way. I’m going to embed my own slides below and you can view other slideshows from the conference on Slideshare or see pictures on Flickr. … Read article “My Stuff from jQuery Conference”