CSS-Tricks

Semantic Animation

Chris Coyier — Tue, 04 Oct 2011 08:24:21 +0000

I recently said this when asked about new tools (e.g. Edge) for building CSS animations:

Empty divs used for nothing but styling were non-semantic and a bad idea before CSS animations and they are a bad idea now.

I stand by that. I feel like we've come a long way as an industry getting everyone on board with semantic markup. Do this, and reap the great rewards of speed, accessibility, maintainability, and SEO.

Then a new shiny thing comes along and the first thing we do is start abandoning our own rules. "Oooo I can make a bird fly across the screen‽" Order me up a few more of them empty divs! I'm surely guilty of this. It doesn't feel like that big of a deal when you're doing it, especially in moderation.

But CSS animations are here to stay. General best practices are going to emerge regarding what types of things we should be using them for, how much is too much, how to approach them semantically, how to offer fallback content, etc. I thought I'd throw in one little idea I had.

Let's consider what animations do for a design. They can give it mood. They can give it attitude. Like other aspects of design, they affect how a user might feel about that page. But they only do these things for sighted users. The empty div does none of these things for non-sighted users. It's just useless cruft.


//AN_Xml:  
//AN_Xml:

What if we were to take that empty div and try to accomplish for non-sighted users all the same things we are accomplishing for our sighted users. Simply putting descriptive text into those divs might be able to get it done for us. Similar to an alt tag for images, but actual inline content meant to be read/enjoyed in same way the animation is meant to be seen/enjoyed.

Perhaps our animation is of a moon rising, and as it rises the sky and ground turn to black. We need two elements to accomplish our animation, and so perhaps they contain the lyrics to CCR's Bad Moon Rising


//AN_Xml:   I see a bad moon rising
//AN_Xml:   I see trouble on the way
//AN_Xml:
//AN_Xml:
//AN_Xml:
//AN_Xml:   I see earthquakes and lightnin’
//AN_Xml:   I see bad times today
//AN_Xml:

The CSS hides this text from view and calls the keyframe animation:

.ground, .moon {
//AN_Xml:   text-indent: -9999px;
//AN_Xml:   overflow: hidden; /* text-indent without this can cause choppy animation */
//AN_Xml:}
//AN_Xml:
//AN_Xml:.ground {
//AN_Xml:   -webkit-animation: ground-to-black 5s ease;
//AN_Xml:   -moz-animation:    ground-to-black 5s ease;
//AN_Xml:   -ms-animation:     ground-to-black 5s ease;
//AN_Xml:}
//AN_Xml:
//AN_Xml:.moon {
//AN_Xml:   -webkit-animation: rising-moon 5s ease;
//AN_Xml:   -moz-animation:    rising-moon 5s ease;
//AN_Xml:   -ms-animation:     rising-moon 5s ease;
//AN_Xml:}
//AN_Xml:
//AN_Xml:/* Plus various keyframe declarations */

View Demo

Notice the names of those keyframe animations. That's another discussion to have in the "semantic animations" vein. Another time.

This text could be anything that relates to the animation. It could describe the animation literally. It could be a poem that elicits the same emotion as the animation. It could be an element.

Woah there, fancy designer boy.

I don't use screen readers, so I don't get to make the call if this is a good idea or not. I imagine there is already enough cruft to fight through that this, despite the good intentions, might be just another thing obstacle on the way to "real content".

I suppose it's like everything else in this world: it depends.

Semantic Animation is a post from CSS-Tricks

Amazon Silk

Chris Coyier — Wed, 28 Sep 2011 21:53:18 +0000

Listen to the engineers behind Amazon's new "Silk" web browser talk about how it uses the cloud to take the load off mobile devices.

Sounds like it does all the asset-requesting for you from the cloud, optimizes it, then sends you down one file that gets rendered into a website. Sounds clever to me, as long as it's secure as hell.

Rumor has it: WebKit based.

Direct Link to Article — Permalink

Amazon Silk is a post from CSS-Tricks

Scalable and Modular Architecture for CSS

Chris Coyier — Wed, 28 Sep 2011 14:07:58 +0000

Jonathan Snook has released an "evolving guide to CSS architecture for sites small and large." My favorite is the "Depth of Applicability" section:

Each rule set that we add to our style sheet creates an ever increasing connection between the CSS and the HTML.

Then goes on to advocate what I would call more gentle CSS selectors that provide more future freedom.

Direct Link to Article — Permalink

Scalable and Modular Architecture for CSS is a post from CSS-Tricks

Better Linkable Tabs

Chris Coyier — Tue, 27 Sep 2011 01:55:26 +0000

I find it's a common desire with "tab" design patterns that there is a way to link to specific tabs. As in, you could give someone a URL and that URL would lead them to that page with the specific desired tab active and displaying the correct content.

If each tab is a completely different URL, it's easy. In the HTML that is served, the appropriate class name is applied to the tab to make it look active, and the appropriate content below is served.

Wufoo uses a tab design pattern inside the app. Each tab is a entirely different page and URL.

If these tabs are "same page" tabs that hide/show different panels of content instantly (or via Ajax), it's a bit harder. A common (and I'd argue semantic) approach to this has been with hash links, e.g.:

http://example.com/#tab-three

Tabs like these are likely "same page" tabs that don't have unique URL's to themselves

With CSS3's :target pseudo class selector, there are ways to make functional tabbed areas with CSS alone (no JavaScript). However, if pure CSS tabs are the goal, this is better.

As much as I've experimented with CSS techniques, I think functional tabbed areas are best accommodated by JavaScript. This is functionality territory, and if we adhere to the traditional model of separation of concerns, it should be handled by JavaScript.

Hash links have a few other problems:

When the page loads with a hash link or the hash links changes, the browser will scroll down so that the element with the ID of that hash is at the top of the page. There is a good chance this is not desirable. The latter is easy to fight with preventDefault(). The former is nearly impossible to deal with cleanly.
Changing the hash tag of a page adds an entry to the browser history, so pressing the back button will go back through previous hashes. There is also a good chance this is not desirable.

Let's solve both problems while accommodating the desire to have a way to link to a specific tab. This is what we are going to do:

Not use hash links but use URL parameters instead (no jump downs).
Use the ultra-hip history.replaceState() so we can change the URL without affecting the back button.

Our URL's will be like:

http://example.com/?tab=tab-three

Rather than re-write JavaScript based tabs from scratch, let's use my existing Organic Tabs demo. We need to adjust very little of the plugin to make this work. We'll add a param parameter so people can choose whatever they want there.

$.organicTabs.defaultOptions = {
//AN_Xml:    "speed": 300,
//AN_Xml:    "param": "tab"
//AN_Xml:};

Then in the part with all the tab-changing functionality, we'll add this one line:

// Change window location to add URL params
//AN_Xml:if (window.history && history.pushState) {
//AN_Xml:  // NOTE: doesn't take into account existing params
//AN_Xml:	history.replaceState("", "", "?" + base.options.param + "=" + listID);
//AN_Xml:}

The tricky part is that we need to pull in the URL parameter when the page loads and do JavaScript stuff with it. That means we'll need to use a server-side language, and intermingle some of it with our JavaScript. Here I'll use PHP:

Update: We can access the query string entirely through JavaScript, and parse out the parts easily. So instead of the PHP that used to be here (not ideal for many reasons) we'll do this instead:

var queryString = {};
//AN_Xml:window.location.href.replace(
//AN_Xml:    new RegExp("([^?=&]+)(=([^&]*))?", "g"),
//AN_Xml:    function($0, $1, $2, $3) { queryString[$1] = $3; }
//AN_Xml:);
//AN_Xml:
//AN_Xml:if (queryString[base.options.param]) {
//AN_Xml:
//AN_Xml:	var tab = $("a[href='#" + queryString[base.options.param] + "']");
//AN_Xml:
//AN_Xml:	tab
//AN_Xml:		.closest(".nav")
//AN_Xml:		.find("a")
//AN_Xml:		.removeClass("current")
//AN_Xml:		.end()
//AN_Xml:		.next(".list-wrap")
//AN_Xml:		.find("ul")
//AN_Xml:		.hide();
//AN_Xml:	tab.addClass("current");
//AN_Xml:	$("#" + queryString[base.options.param]).show();
//AN_Xml:
//AN_Xml:};

This code grabs that URL param and make sure the current tab is highlighted and the correct content is shown.

Functional demo:

View Demo Download Files

Video:

Incomplete-ish

Browser support for history.replaceState (and all the history management stuff) is far from ubiquitous. I'm using a basic feature test here, but not implementing any fallback. The important part, the tab functionality, still works fine. You might wanna do more.

I'm also not taking into account existing URL parameters. If your page is already using them and you also want to use this (e.g. ?foo=bar&tab=tab-one) this would get a bit more complicated. You'd probably snag the entire URL param string and pass it into the plugin. Then parse it apart and re-insert the existing params when you use replaceState().

Better Linkable Tabs is a post from CSS-Tricks

In Praise of the Forums

Chris Coyier — Mon, 26 Sep 2011 16:22:30 +0000

Jane Wells of Automattic lays out four reasons why someone may not use forums for a question they have. Then she disputes all four of them while sharing an example of where a forum post get a lot more done than just answers one dude's question.

The bigger the internet gets, the more valuable it is to make Q&A and customer support public.

Direct Link to Article — Permalink

In Praise of the Forums is a post from CSS-Tricks

Sencha Looks at IE 10

Chris Coyier — Fri, 23 Sep 2011 19:03:35 +0000

Michael Mullany:

...the IE10 HTML5 experience is one of the best we’ve seen on any platform to date.

I've heard from a number of folks that IE 10 will be the most advanced browser to date (support the most standards and new features). We'll see if this stays true when it actually ships.

Notable: transitions, transforms (2D and 3D), animations, shadows, gradients, flexbox and SVG filters.

Direct Link to Article — Permalink

Sencha Looks at IE 10 is a post from CSS-Tricks

Upcoming Speaking Engagements

Chris Coyier — Fri, 23 Sep 2011 03:01:08 +0000

I'll have a little string of events I'll be giving talks at.

September 24, 2011 - BarCamp Tampa
October 1, 2011 - BarCamp Milwaukee
October 3-5, 2011 - Future of Web Apps (London)
October 22, 2011 - BarCamp Philly

I'll (probably) be doing a fork of my pseudo elements talk, which will reduce the pseudo elements stuff to only a part of the time and the rest will be about other ways to improve the way you write HTML and CSS.

Upcoming Speaking Engagements is a post from CSS-Tricks

Radio Buttons with 2-Way Exclusivity

Chris Coyier — Wed, 21 Sep 2011 04:06:43 +0000

Let's say you were tasked with creating a UI in which users can rate three candy bars from their most to least favorite. A grid of radio buttons isn't a terrible way to go about this.

A (small) grid of radio buttons.

The good news is that radio buttons have natural exclusivity in the name-group they are in, and we can use that to our advantage. The bad news is that we have interlocking groups and there is no way to express that in a functional way through HTML alone.

Only one radio button can be selected in each circled group

Let's craft the HTML in such a way that the horizontal groups share the same name, granting exclusivity automatically. And we'll also add an HTML data-* attribute which signifies the column which we'll use to simulate the vertical exclusivity with JavaScript¹.


//AN_Xml:
//AN_Xml:    
//AN_Xml:    
//AN_Xml:    
//AN_Xml:    
//AN_Xml:
//AN_Xml:
//AN_Xml:    
//AN_Xml:    
//AN_Xml:    
//AN_Xml:    
//AN_Xml:
//AN_Xml:
//AN_Xml:    
//AN_Xml:    
//AN_Xml:    
//AN_Xml:    
//AN_Xml:
//AN_Xml:
//AN_Xml:    
//AN_Xml:    
//AN_Xml:    
//AN_Xml:    
//AN_Xml:
//AN_Xml: 1 2 3
Twix 
Snickers 
Butterfingers

Our incredibly simple design can be accomplished with this CSS:

table {
//AN_Xml:    border-collapse: collapse;
//AN_Xml:}
//AN_Xml:td, th {
//AN_Xml:    border: 1px solid #ccc;
//AN_Xml:    padding: 10px;
//AN_Xml:}
//AN_Xml:th:empty {
//AN_Xml:    border: 0;
//AN_Xml:}

I wouldn't have even posted that CSS except I think it's a super useful case of the :empty pseudo class selector.

Now to grant the vertical group exclusivity, we'll use a touch of jQuery:

var col, el;
//AN_Xml:
//AN_Xml:$("input[type=radio]").click(function() {
//AN_Xml:   el = $(this);
//AN_Xml:   col = el.data("col");
//AN_Xml:   $("input[data-col=" + col + "]").prop("checked", false);
//AN_Xml:   el.prop("checked", true);
//AN_Xml:});

When a radio button is clicked, the column is determined and all other radio buttons in that column are turned off, then the clicked on is turned back on.

That's all there is to it.

View Demo Download Files

For the record, I did get this idea from the screencast I linked up earlier in which this idea was briefly mentioned and then discarded.

Also, I'd be interested to hear if people have alternate design pattern ideas for the "rate these three candy bars" thing. That's always fun to think about.

¹ You could, instead, apply the data attributes through JavaScript programatically, or even calculate column on the fly as needed. As ever, there are more ways to kill a cat than choking it with butter.

Radio Buttons with 2-Way Exclusivity is a post from CSS-Tricks

New Poll: What’s Your Favorite Page Title Separator?

Chris Coyier — Tue, 20 Sep 2011 03:53:45 +0000

Just for silly kicks, let's keep on with the page title polls, this time with perhaps the most trivial of all choices. The poll is embedded on the site in the sidebar. Let everyone know what your favorite page title separator is. The en-dash? The vertical pipe? THE DOUBLE COLON‽

New Poll: What’s Your Favorite Page Title Separator? is a post from CSS-Tricks

Poll Results: Favorite Page Title Structure

Chris Coyier — Mon, 19 Sep 2011 17:57:04 +0000

This was an interesting poll because there is no clear consensus on "the best way" for sites to handle page titles. It varies quite a bit even among similar websites. To keep things more focused, I put forth a very specific page: a blog article in a specific category. The choices were:

17%[Site Name] - [Category] - [Article Title]
17%[Article Title] - [Category] - [Site Name]
8%[Article Title]
37%[Article Title] - [Site Name]
17%[Site Name] - [Article Title]

And the winner, with 37% of the vote, [Article Title] - [Site Name]. This was a relief to me, as that's what I use on this site and what I personally like the most. Also: that may have influenced the vote a bit but I like to think of regular readers here as being independently minded.

The winning page title style, in use here on CSS-Tricks

Full, real time results for this poll and all post polls in the polls archive.

These are the things that I think should be considered when choosing a site title structure, in order of importance:

Human understandability & usability - The title useful for humans
SEO value - Title clearly summarizes and correlates to content on page, looks enticing to click, and no funny business
How it bookmarks - The specific page is easy to find again in social or local bookmarks

We should consider the fact that we don't get much room for the page title when it's displayed as a tab (all desktop browsers have tabbed browsing by default). We get about 26 characters at a maximum per tab. So if your website's name is really short, like "NBC", starting with site title might be OK. If it's long, like "Smashing Magazine", you are probably chewing up too much of that valuable tab room starting that way.

The usage of the site in question also bears consideration. I like that the site title at Gmail always starts with "Gmail". I only ever have one tab open of Gmail and I want to be able to find that quickly I don't care what "state" it is in at the moment. Whereas I often have multiple CSS-Tricks tabs open and it's more valuable to me to know the title of the article on that page.

I can't imagine a site where the category would be essential for human usability to be included in the title, but if it's near the end and add some SEO juice, I can't imagine it hurting either.

I'm not overly surprised with the #1 outcome, but I am by last place. [Article Title] was last with only 8% of the vote. With the limited number of visible characters in a title, the limited usefulness of the site title being at the end of the structure, and the "cleanness" of it, I'm surprised there aren't more proponents of it.

Poll Results: Favorite Page Title Structure is a post from CSS-Tricks