SitePoint » JavaScript & CSS

Build Awesome Apps with CSS3 Animations

David Rousset — Fri, 03 Feb 2012 13:25:28 +0000

Today’s HTML5 applications can provide awesome experiences thanks to the new CSS3 specifications. One of them is CSS3 Animations. It can help you building rich animations on HTML elements. This can provide interesting feedbacks to the users and enables fast & fluid UIs. As those new animations are most of the time hardware accelerated by the GPU, they definitely raise the quality bar of the new generation of HTML5 applications.

According to the “CSS Animation Module Level 3” specification on the W3C site, CSS3 Animations introduces defined animations, which specify the values that CSS properties will take over a given time interval. This specification is an extension to CSS Transitions.

As CSS3 Animation is an extension to CSS3 Transitions, you should first read the article of my colleague David Catuhe on Transitions here: Introduction to CSS3 Transitions.

We’ll see in this article an interesting demo highlighting the potential of CSS3 animations, how to build simple animations & how to handle fallback in JavaScript:

Let’s first start by quickly demonstrating what CSS3 Animations are. Here is a sample animation of a Star Wars AT-AT which uses CSS3 Animations to animate parts of the transport (and which will fall back to JavaScript if your browser doesn’t support CSS3 Animations):

You can test this sample also in a separate window here: http://david.blob.core.windows.net/html5/css3atat/index.htm

Note: this sample has been tested successfully with native animations under IE10 PP3/PP4, Chrome 15, Firefox 8 & iPad 2 and with JS fallback under IE9 desktop & mobile (Windows Phone). For an unknown reason, it behaves in weird way under Opera 11.50 but works fine with the 11.60. Moreover, our lovely blogging platform is most of the time forcing the IE9 rendering engine via a meta tag. To force it back to the IE10 standards mode, press the F12 key and change the value of “Document Mode” back to IE10. Otherwise, view the demo in a separate window.

This sample is based on the awesome work done by Anthony Calzadilla. You can check other incredible demos on his website here: http://www.anthonycalzadilla.com . I’m a huge fan of the I twitty the fool sample using SVG & CSS3 Animation for instance.

CSS3 Animations

Introduction

Let’s first review on what you can play to build the animations. CSS3 Animations works basically on the same values as CSS3 Transition.

Here they are:

color: interpolated via red, green, blue and alpha components (treating each as a number, see below)
length: interpolated as real numbers.
percentage: interpolated as real numbers.
integer: interpolated via discrete steps (whole numbers). The interpolation happens in real number space and is converted to an integer using floor().
number: interpolated as real (floating point) numbers.
transform list: see CSS Transforms specification: http://www.w3.org/TR/css3-2d-transforms/
rectangle: interpolated via the x, y, width and height components (treating each as a number).
visibility: interpolated via a discrete step. The interpolation happens in real number space between 0 and 1, where 1 is “visible” and all other values are “hidden”.
shadow: interpolated via the color, x, y and blur components (treating them as color and numbers where appropriate). In the case where there are lists of shadows, the shorter list is padded at the end with shadows whose color is transparent and all lengths (x, y, blur) are 0.
gradient: interpolated via the positions and colors of each stop. They must have the same type (radial or linear) and same number of stops in order to be animated.
paint server (SVG): interpolation is only supported between: gradient to gradient and color to color. They then work as above.
space-separated list of above: If the lists have the same number of items, each item in the list is interpolated using the rules above. Otherwise, no interpolation.
a shorthand property: If all the parts of a shorthand can be animated, then interpolation is performed as if each property was individually specified.

And the following properties must be supported for animations:

background-color (color)
background-image (only gradients)
background-position (percentage and length)
border-bottom-color (color)
border-bottom-width (length)
border-color (color)
border-left-color (color)
border-left-width (length)
border-right-color (color)
border-right-width (length)
border-spacing (length)
border-top-color (color)
border-top-width (length)
border-width (length)
bottom (length and percentage)
color (color)
crop (rectangle)
font-size (length and percentage)
font-weight (number)
grid-* (various)
height (length and percentage)
left (length and percentage)
letter-spacing (length)
line-height (number, length and percentage)
margin-bottom (length)
margin-left (length)
margin-right (length)
margin-top (length)
max-height (length and percentage)
max-width (length and percentage)
min-height (length and percentage)
min-width (length and percentage)
opacity (number)
outline-color (color)
outline-offset (integer)
outline-width (length)
padding-bottom (length)
padding-left (length)
padding-right (length)
padding-top (length)
right (length and percentage)
text-indent (length and percentage)
text-shadow (shadow)
top (length and percentage)
vertical-align (keywords, length and percentage)
visibility (visibility)
width (length and percentage)
word-spacing (length and percentage)
z-index (integer)
zoom (number)

SVG

The properties of SVG objects are animatable when they are defined as animatable:true in the SVG specification: http://www.w3.org/TR/SVG/struct.html. But at the time where this article is written, I didn’t manage to combine CSS3 Animation directly on SVG elements in any of the latest browsers versions. Today’s samples on the web are then doing a little trick: they are embedding SVG resources into different DIV animated by CSS3 like the I twitty the fool sample.

Declarations

To declare an animation in a CSS file, here is the kind of generic code you’ll need to write:

@keyframes name_of_the_animation {
  from {
    property_to_animate: initial_value;
  }
  50% {
    property_to_animate: intermediate_value;
  }
  to {
    property_to_animate: final_value;
  }
}

Which could also be written like that:

@keyframes name_of_the_animation {
  0% {
    property_to_animate: initial_value;
  }
  50% {
    property_to_animate: intermediate_value;
  }
  100% {
    property_to_animate: final_value;
  }
}

This animation definition declares 3 steps 0, 50 & 100%. You should at least set a from (or 0%) and a to (or 100%) steps to build a correct animation (minimum 2 steps thus). Once done, you may add as many keyframes as you’d like between 0 and 100% to handle precisely the various steps of your animations.

Once the definition is declared, you can affect it to an element using the classical CSS3 selectors and you’ll need also to configure the animation options. Here the kind of generic blocks you’ll see:

#id_of_the_html_element {
    animation-name: name_of_the_animation;
    animation-duration: number_of_seconds s;
    animation-iteration-count: number | infinite;
}

To better understand, let’s review a real sample. First of all, as the CSS3 Animations specification is still in a draft stage, you’ll need to use the appropriate vendor prefix. Let’s use IE10 as a sample with the –ms prefix then. Let’s now see how the head of our AT-AT is moving.

Here’s the animation declaration:

@-ms-keyframes rotate-skull {
    0% {
        -ms-transform: rotate(0deg)
    }
    25% {
        -ms-transform: rotate(15deg)
    }
    50% {
        -ms-transform: rotate(-5deg)
    }
    55% {
        -ms-transform: rotate(0deg)
    }
    75% {
        -ms-transform: rotate(-10deg)
    }
    100% {
        -ms-transform: rotate(0deg)
    }
}

We’ve got 6 steps (0, 25, 50, 55, 75 & 100%) working on the CSS3 2D transform attributes by changing the value of the rotation.

The animation is then applied via this CSS rule:

#skull
{
    -ms-animation-name: rotate-skull;
    -ms-animation-duration: 7s;
    -ms-animation-iteration-count: infinite;
}

We’re targeting the

element having the “id=skull” and we’re applying the animation named “rotate-skull” on it. The animation will have to be completed in 7s and be played an infinite number of times.

Here is the living result if your browser supports CSS3 Animations:

We could have written this rule in a shorter manner using the animation shorthand property:

#skull {
    -ms-animation: rotate-skull 7s infinite;
}

The animations will be triggered as soon as a matching rule is applied. You can then play or stop animations simply via JavaScript or via CSS3 to play with the classes affected to a tag.

Non-linear animations

The “animation-timing-function” property can be used if you want non-linear animations. You can even mix the type of timing functions during each keyframe.

Basically, CSS3 animations will use cubic bezier curve to smooth the animation by computing different speed over its duration.

The following functions are supported:

linear: Constant speed
cubic-bezier: Speed will be computed according to a cubic bezier curve define by two control points : P0 and P1 (so you will have to define 4 values here : P0x, P0y and P1x, P1y.
ease: Speed will be computed with cubic-bezier(0.25, 0.1, 0.25, 1)
ease-in: Speed will be computed with cubic-bezier(0.42, 0, 1, 1)
ease-inout: Speed will be computed with cubic-bezier(0.42, 0, 0.58, 1)
ease-out: Speed will be computed with cubic-bezier(0, 0, 0.58, 1)

Here is a simulation tool written by David Catuhe that uses pure JavaScript to show the impact of each timing function:

Note: this tool uses in-line SVG supported by Firefox, Chrome, Opera 11.60 & IE9/10. It won’t work properly under Opera 11.50 & Safari on iPad thus.

This is an awesome tool using SVG. You can even play with your mouse on the custom function to edit the curve. If you’d like to know more about this tool, please again have a look to David’s article.

If your browser supports CSS3 animations, let’s now see a simple demo using easing functions to animate a canvas tag containing an animated sprite with CSS3.

Here is the CSS3 animations code that will be used in this demo:

@-ms-keyframes demo {
    from {
    -ms-animation-timing-function: ease;
    -ms-transform: translateX(0px);
    }
    50% {
    -ms-animation-timing-function: ease-in;
    -ms-transform: translateX(300px);
    }
    to {
    -ms-animation-timing-function: ease-inout;
    -ms-transform: translateX(900px);
    }
}
 
#testCanvas
{
    -ms-animation-delay: 0s;
    -ms-animation-duration: 6s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-name: demo;
}

As well as all the vendor prefixes variations to make sure it works also in Google Chrome & Mozilla Firefox. And here’s the living output:

If your browser doesn’t support CSS3 Animation but support canvas, the sprite’s running animation should be displayed but the character won’t move through the width of the screen.

Note: if you’d like to know more about canvas and sprites animation, you can have a look to this article: HTML5 Gaming: animating sprites in Canvas with EaselJS

Delay

The “animation-delay” property simply allows an animation to begin execution some time after it is applied.

Events

3 events could be raised during an animation. They are named “AnimationStart”, “AnimationEnd” and “AnimationIteration”. Depending on your browser, the correct name will be for instance:

Chrome: webkitAnimationEnd
Firefox: mozAnimationEnd
Internet Explorer: MSAnimationEnd

The event will give you the following details:

animationName: name of the animation which raised the event
elapsedTime: the amount of time the animation has been running, in seconds

Here is an usage sample for IE10:

elementToAnimate.addEventListener("MSAnimationEnd", function () {
    alert("the end !");
}, false);

More about CSS3 animations

CSS3 animations are really useful for 2 main reasons:

Hardware acceleration: CSS3 Animations are most of the time directly handled by the GPU and could produce smoother results. This could then be a very interesting approach for mobile devices.
Better separation between code and design: I know there is some debates on this point but with David, we think that a developer shouldn’t be aware of animations or anything related to design as much as possible. In the same way the designer/artist must not be aware of JavaScript. CSS3 offers then this possibility and could let the designers work with their classical tools to generate the appropriate animations on elements, between screens, etc.

To highlight this importance in performance, the following HTML5 game I wrote using a full frame

Browsers Support

Since the Platform Preview 3 of IE10 available in the Windows Developer Preview, we’re supporting CSS3 Animations. And as you can see on the following report produced by caniuse.com, the CSS3 animations are now supported on a wide range of browsers:

But as the specification is not finished yet (working draft), you must use vendor’s prefixes such as –ms-, –moz-, –webkit-, –o- to make a cross-browsers compatible application.

But the question could be: how to handle browsers that don’t support this new feature?

First option is to just do nothing. Thanks to the beauty of graceful degradation, you could just let the user only see a static image if you’ve worked correctly. This is for instance the case of these 2 original samples of Anthony: I Twitty the Fool! and Pure CSS3 AT-AT Walker . When watched in IE9, it looks like we only have a static image. When watched in IE10, the very same code shows nice animations. IE10 users will then have an enhanced version while IE9 will still be able to view and use properly the website. The more modern your browser is, the more visual bonus you will have.

The second option is to detect the feature via a JS library like Modernizr and try to offer the same animation via a JavaScript library that will mimic the animations. This is what we usually call a fallback mechanism. Unfortunately, I haven’t found today a working & complete JS library that could replace CSS3 animations when not supported by the browser.

I have then written a sample JS library more or less specifically designed for the AT-AT sample.

CSS3 Animations JavaScript fallback library

Animations are nothing more than a series of transitions separated by a certain duration defined via the keyframes. I’ve then reused the concepts built by David Catuhe in his transitions helper library. I let you reviewing his article to check the base of the concepts behind the code.

On my side, I’ve added some support to animate the CSS3 2D Transform rotation & translation values and a way to iterate through the keyframes.

Here is the main part of the library you need to review:

// Animation object
// It need the HTML targeted element, the name of the animation, its duration & iteration count and
// the keyframes contained in an array object
// View the animation simply as a sequence of transitions played a certain number of times
ANIMATIONSHELPER.animation = function (target, name, duration, iterationcount, keyframes) {
    // saving the properties values
    this.name = name;
    this.duration = duration;
    this.iterationcount = iterationcount;
    this.target = target;
 
    var elapsedtime = 0;
    var keyframeduration = 0;
    var elapsedtime = 0;
 
    // Transforming the percentage of each keyframe into duration value
    for (var i = 0; i < keyframes.length; i++) {
        keyframeduration = ((keyframes[i].percentage * duration) / 100) - elapsedtime;
        keyframes[i].duration = keyframeduration;
        elapsedtime += keyframeduration;
    }
 
    this.currentTransition = { isPlaying: false };
    this.keyframes = keyframes;
    this.keyframesCount = keyframes.length;
    this.currentKeyFrameIndex = 0;
 
    // The nextTransition() function return the next transition to run
    // based on the current keyframe to play
    this.nextTransition = function (keyframe, ease, customEaseP1X, customEaseP1Y, customEaseP2X, customEaseP2Y) {
        var properties = [];
        var finalValues = [];
        var transition;
 
        // Compared to the original TRANSITIONSHELPER of David Catuhe
        // We need a specific code to play with the CSS3 2D Transform properties values
        if (keyframe.propertyToAnimate === "transform") {
            for (var i = 0; i < keyframe.transformType.length; i++) {
                properties.push(keyframe.transformType[i].type);
                if (keyframe.transformType[i].type == "rotate") {
                    finalValues.push({ deg: keyframe.transformType[i].value1 });
                }
                else {
                    finalValues.push({ x: keyframe.transformType[i].value1, y: keyframe.transformType[i].value2 });
                }
            }
 
            // Create a new transition
            transition = {
                name: this.name + this.currentKeyFrameIndex,
                target: this.target,
                properties: properties,
                finalValues: finalValues,
                originalValues: ANIMATIONSHELPER.extractValues(target.style[ANIMATIONSHELPER.currentTransformProperty], this.name),
                duration: keyframe.duration,
                startDate: (new Date).getTime(),
                currentDate: (new Date).getTime(),
                ease: ease,
                customEaseP1X: customEaseP1X,
                customEaseP2X: customEaseP2X,
                customEaseP1Y: customEaseP1Y,
                customEaseP2Y: customEaseP2Y,
                isPlaying: true,
                type: "transform"
            };
 
            return transition;
        }
        // If it's a classic property to animate, we're using more or less the TRANSITIONSHELPER as-is
        else {
            return TRANSITIONSHELPER.transition(this.target, keyframe.propertyToAnimate, keyframe.value, keyframe.duration, TRANSITIONSHELPER.easingFunctions.linear);
        }
    };
 
    // each animation object has a tick function
    // that will be called every 17 ms (to target 60 fps)
    // This ticker is monitoring the current state of the transition and
    // create a new transition as soon as the old one is finished/dead
    this.tick = function () {
        if (this.iterationcount > 0) {
            if (!this.currentTransition.isPlaying) {
                this.currentTransition = this.nextTransition(this.keyframes[this.currentKeyFrameIndex], ANIMATIONSHELPER.easingFunctions.linear);
                // We're using our own global ticker only for the 2D transformations
                // Otherwise, we're using the one from the TRANSITIONSHELPER library
                if (this.currentTransition.type === "transform") {
                    ANIMATIONSHELPER.currentTransitions.push(this.currentTransition);
                }
                this.currentKeyFrameIndex++;
 
                // We've reached the last keyframe (100%). We're starting back from the beginning
                if (this.currentKeyFrameIndex >= this.keyframesCount) {
                    this.currentKeyFrameIndex = 0;
                    this.iterationcount--;
                }
            }
        }
    };
};

The first part of the code is iterating through each keyframe to compute the exact duration specified by each percentage. We’re then defining a nextTransition() function that will dynamically build the next transition to play based on the current index into the keyframes collection. At last, we’ve got a tick() function that will monitor the current state of the transition applied. Once the transition is finished or dead, it asks for the next transition, push it to the stack of transitions to be played and moves the indexes.

This tick() function is called thanks to this code:

ANIMATIONSHELPER.launchAnimation = function (animation) {
    // Launching the tick service if required
    if (ANIMATIONSHELPER.tickIntervalID == 0) {
        ANIMATIONSHELPER.tickIntervalID = setInterval(ANIMATIONSHELPER.tick, 17);
    }
 
    // Little closure to launch the tick method on the appropriate animation instance
    setInterval(function () { animation.tick(); }, 17);
};

At last, we have this kind of code that helps us building the keyframes:

// Object to build a new generic keyframe (not working on the CSS3 2D Transform properties thus)
ANIMATIONSHELPER.keyframe = function (percentage, propertyToAnimate, value) {
    this.percentage = percentage;
    this.propertyToAnimate = propertyToAnimate;
    this.value = value;
};
 
//Objects to build specific rotation keyframes
ANIMATIONSHELPER.rotationkeyframe = function (percentage, value) {
    this.percentage = percentage;
    this.propertyToAnimate = "transform";
    this.transformType = [];
    this.transformType.push(new ANIMATIONSHELPER.transformType("rotate", value));
};

To highlight its usage, let’s recreate the previous simple CSS3 Animation skull sample with this library :

// number of times you'd like the animations to be run
var iterationsNumber = 100;
 
var skullElement = document.getElementById("skull");
var keyframes = [];
keyframes.push(new ANIMATIONSHELPER.rotationkeyframe(25, 15));
keyframes.push(new ANIMATIONSHELPER.rotationkeyframe(50, -5));
keyframes.push(new ANIMATIONSHELPER.rotationkeyframe(55, 0));
keyframes.push(new ANIMATIONSHELPER.rotationkeyframe(75, -10));
keyframes.push(new ANIMATIONSHELPER.rotationkeyframe(100, 0));
 
var animation1 = new ANIMATIONSHELPER.animation(skullElement, "rotate-skull", 7000,
                            iterationsNumber, keyframes);
 
ANIMATIONSHELPER.launchAnimation(animation1, ANIMATIONSHELPER.easingFunctions.linear);

And here is the result that will now work in every browser supporting CSS3 2D Transform:

At last, the very first sample demonstrated at the beginning of this article uses Modernizr to check the support for CSS3 Animations. If it’s not the case, it loads the code that will mimic the keyframes defined in the file master.css, moz-master.css & ms-master.css :

// Checking if CSS3 animations is supported
if (!Modernizr.cssanimations) {
// if so, we can use our JS fallback library
    supportElement.innerHTML = "CSS3 Animations are not supported";
    LoadJSAnimationsFallback();
}
else {
    // if CSS3 animation is supported, we have nothing to do.
    // The *master.css stylesheets will be automatically applied & used.
    supportElement.innerHTML = "CSS3 Animations are supported";
}

The LoadJSAnimationsFallback() function is defined into jsfallback-master.js which simply contains all the keyframes declarations and the 19 animations needed to mimic the behavior created by Anthony in pure CSS3. In this approach, the designer then needs to rewrite all rules using the library. Another approach could be to parse one of the CSS file using an XHR call and to create dynamically the JavaScript calls to the library. This needs more work as you almost need to reimplement the CSS3 animations specifications in JavaScript!

You now have an idea on the way to build a fallback mechanism to support more browsers while starting to use the latest CSS3 specifications.

You can download the files for the main sample here: http://david.blob.core.windows.net/html5/css3atat/CSS3ATATNonMinified.zip

It contains the unminified versions of the animationsHelper.js, transitionsHelper.js, jsfallback-master.js JavaScript files as well as the various CSS3 declinaison files for the main vendors prefixes.

Conclusion

CSS3 Animations is a powerful technology to push HTML5 applications to a new level. It offers interesting scenarios. Designers could use it to create a new generation of UI screens with smooth & fluid animations without the need of developers. As it’s hardware-accelerated most of the time, developers should also pay attention to this specification. At last, both could collaborate. Designers could work on a series of predefined animations covering most scenarios. Developers could then create JavaScript libraries that will implement those animations. This library could offer in a transparent way 2 implementations: a dynamic generation of CSS3 on the fly or a fallback for older browsers.

Going further

Article about CSS3 Transitions by David Catuhe: Introduction to CSS3 Transitions
CSS3 Animations specifications: http://www.w3.org/TR/css3-animations/
IE Test Drive on CSS3 animations: http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_animations.htm

Other useful posts:

Events are relatively limited in the CSS3 Animation spec. Joe Lambert is proposing an interesting solution to trigger events on each keyframe: CSS Animation Keyframe Events (Javascript solution)

How to Put Your CSS3 on :target

Craig Buckler — Mon, 30 Jan 2012 12:56:51 +0000

CSS pseudo-classes which change styles in response to user actions have been with us for many years. You’ve almost certainly used :hover, :active and :focus; I can (only just) remember the excitement of changing IE4′s link colors back in 1997.

CSS3 also introduced :target; a powerful pseudo-class which can reduce the need for scripting in interactive widgets. Consider a page URL such as http://mysite.com/page#mytarget; an element with the id “mytarget” can have matching :target styles applied.

:target Browser Support

All modern browsers support :target and you won’t experience problems with IE9 or most versions of Chrome, Firefox, Safari and Opera. Unfortunately, that still leaves us with the older versions of IE. I wouldn’t worry too much about IE6 and 7, but IE8 remains the world’s most used browser version. All is not lost, however, since shims such as selectivizr can add :target support without requiring complex workarounds.

A Simple Document :target

We’ve recently been discussing website contracts. Generic contract small print such as payment schedules, hosting conditions, cancellation terms, support policies, glossaries etc. could be contained in one or more web pages. The document could grow to a considerable length even if you try and keep it concise!

Let’s look at a snippet of the document’s HTML5 in contract.html:


Website Contract

	
		Payment Schedule
		Support & Maintenance
		Hosting Terms
		Glossary
	


Payment Schedule
Lorem ipsum dolor sit amet, consectetur adipiscing elit.


Support & Maintenance
Ut euismod tempor porttitor.


Hosting Terms
Suspendisse ac nisl lorem, ut fermentum erat.


Glossary
Aenean id nibh eget nisl blandit hendrerit lobortis ac tortor.

We can use the :target attribute to highlight active sections, e.g.


article:target
{
	background-color: #ffc;
	border: 2px solid #fcc;
}

Anyone viewing the contract can click a navigation menu item to highlight the appropriate section. You can also issue direct links to clients who require specific information, e.g. contract.html#support.

The :target selector offers further versatility — it’s possible to create dynamic effects in HTML5 and CSS without using JavaScript. Further SitePoint articles are coming soon…

What can YOU do with 1 Kilobyte of CSS?

Craig Buckler — Tue, 24 Jan 2012 18:59:16 +0000

I’ve been moaning about bloated web pages for some time now. Despite my protests, web page weights are rapidly approaching 1MB.

The CSS1K project illustrates what you can do with a single kilobyte of slim-lined stylesheet code. It’s been influenced by galleries such as Zen Garden and JavaScript competitions such as js1k.com but, to my knowledge, there’s never been a CSS challenge.

The rules are simple:

You must style the HTML5 page at css1k.com.
Submissions must be in a single CSS file up to 1,024 bytes in size (minification is permitted).
Vendor prefixes do not count toward the total. You should submit non-prefixed code and css1k.com will add the browser prefixes for you.
External resources such as images, fonts and @imports are forbidden. You can’t use data URIs either — shame!
Cross-browser compatibility is preferable, but you can use graceful degradation if necessary.
Your code must be released under the open source MIT license.

There are a few dozen entries so far. I particularly liked:

Skewed — clever, although not a great user experience!
Bbubles — great demonstration of CSS transitions
Bookshelf — what did you expect?
Desktop — Windows XP in 1K!
Geocities — ahh, the nostalgia!

There are relatively few impressive examples so this is your chance to show off your ninja-like CSS skills! If you decide to post an entry, please leave your link in the comments below…

How to Use Character Entities in HTML, CSS and JavaScript

Craig Buckler — Sat, 21 Jan 2012 15:48:42 +0000

You’ve almost certainly encountered entities in HTML pages. They’re commonly used for international characters, mathematical operators, shapes, arrows and other symbols. For example:


♠
♣
♥
♦
©
®

These map directly to UTF-8 characters. The symbol for PI (π) can either be written as π or its UTF-8 number π. You can look-up popular symbols on the HTML Character Entity Reference to discover their HTML entity code and UTF-8 index number.

Strictly speaking, it’s not necessary to use these codes if you’re serving pages as UTF-8; the default character set for HTML and XML documents. However, there may be occasions when you’re not using UTF-8, adjacent characters are causing issues, or it’s difficult to enter a specific symbol on your keyboard. Similarly, you may be using ANSI or another encoding method for CSS and JavaScript files.

Entities in CSS

Adding content via pseudo elements is increasingly common — especially if you’re using webfont icons. To add any UTF-8 character, you need to find its number and convert that to hexadecimal. For Pi, it’s 03C0. This can be added within a CSS file using a preceding backslash, e.g.


#pi:before
{
	content: "\03C0";
}

Entities in JavaScript

Like CSS, JavaScript requires the UTF-8 number in hexadecimal. In this case, however, it must be escaped using a preceding “\u”, e.g.


var pi = "\u03C0";

If the character code is 255 or less, you can also use standard JavaScript 2-digit hexadecimal notation, e.g.


var copyright = "\xA9";

That’s all there is to it. Simple solutions, but ones I always forget!

Webfont Icons: an Alternative to Images

Craig Buckler — Tue, 17 Jan 2012 16:49:01 +0000

Let’s be honest, creating dozens of tiny icons in a graphics package isn’t fun. Even when you’ve gathered a decent set, you end up managing dozens of tiny files or creating image sprites and slicing them in CSS.

Fortunately, HTML5 provides us with another option: webfonts. A font set can contain graphical icons and character sets. Wingdings is the most well known but free fonts such as Iconic can be more useful and provide example HTML and CSS code.

View the webfont icon demonstration page…

Once you’ve found or created a suitable font, you’ll need to convert it to a number of formats to ensure good cross-browser compatibility. The @Font-Face Generator at fontsquirrel.com does the hard work for you and supplies a ZIP file containing all the fonts and CSS code. The font is then imported at the top of your CSS file, e.g.


@font-face {
	font-family: "IconicStroke";
	src: url("iconic_stroke.eot");
	src: url("iconic_stroke.woff") format("woff"),
	url("iconic_stroke.ttf") format("truetype"),
	url("iconic_stroke.otf") format("opentype"),
	url("iconic_stroke.svg#iconic") format("svg");
}

It’s possible to add icon characters to your HTML file, such as using an ‘r’ for Iconic’s RSS icon. However, that may confuse people using screen readers so CSS pseudo elements are a safer option, e.g.

Your HTML:


RSS Feed

Your CSS:


.rss:before
{
	font-family: "IconicStroke";
	content: "r";
}

The Advantages of Webfont Icons

Webfonts can be an ideal alternative to graphics:

fonts can be scaled to any size, use any color and have CSS effects applied
webfonts offer good cross-browser compatibility and even work in IE6
a single font file can be more efficient than multiple images

The Disadvantages of Webfont Icons

Webfonts may not always be appropriate:

font characters are single-color (although CSS3 effects can help)
generating fonts is not as easy as PNGs or SVGs
image file sizes will be smaller if you only require a few icons.

Overall, there’s little to dislike about webfont icons and they could cut development time. Have you used them in any of your projects?

View the webfont icon demonstration page…

What’s New in Firebug 1.9

Craig Buckler — Mon, 09 Jan 2012 17:51:17 +0000

Firebug is the world’s best-known browser development console. All browsers offer decent debugging facilities these days but they all owe a debt of gratitude to Firebug. Even developers who have switched browsers keep Firefox installed because Firebug is so damn good!

If you have Firebug installed in Firefox 5.0 or greater you should have received version 1.9 during the past few days. If not, head over to getfirebug.com for information and download links. Here are some of the new gems you’ll find…

Configurable Docking

Until now, Firebug has either appeared at the bottom of the window or in its own pop-out. It’s now possible to dock it on the top, bottom, left or right of the browser — which is great if you’re using a wide-screen monitor.

To change the position, click the down arrow next to Firebug’s icon followed by “Firebug UI Location”.

Improved Error Reporting

It’s important to know which JavaScript file and line which caused an error but Firebug can now highlight the exact location of syntax issues.

Copy JSON From Ajax Responses

If you’re implementing any type of Ajax functionality, Firebug’s essential. It’s always been possible to view and expand JSON data but you can now copy the whole payload with a right-click.

Resend HTTP Requests

This is a great new feature: right-click any request shown in the Console or Net panels and hit Resend to execute the request again.

It’s ideal for Ajax debugging since you don’t need to reload the page or initiate a new request via your application’s interface.

Font Viewer

Everyone’s using web fonts so Firebug now has a preview tooltip whenever you hover over a font name in the style tab.

There’s also a built-in font viewer within the Net panel whenever a .woff file is downloaded.

Quick Removal of Elements

To quickly remove an item from your page, click the “Inspect Element” icon, highlight the element and press the Delete button on your keyboard .

…and More

You’ll also find several other features such as the protocol and cached headers shown in the Net panel, adding a watch from the DOM panel, and tooltips on conditional breakpoints and array items.

Firebug keeps getting better. Have you discovered any great new features?

Introducing the New Cursor Styles in CSS3

Craig Buckler — Thu, 05 Jan 2012 18:34:56 +0000

The early days of web development were a thrill as new technologies and techniques were discovered. We experienced a few stagnant years in the middle of last decade but, thanks to HTML5, web development has become exciting again. In particular, CSS3 is evolving rapidly and you’ll find some interesting gems in the specifications.

In this article, we’re going to examine the CSS cursor property which, as you’d expect, allows you to change the cursor style as the mouse moves over an element. It’s become increasingly important for interactive web applications…

CSS2 Cursor Styles

CSS2 offered relatively few options (hover over any element to see how the cursor changes):

cursor: auto

cursor: inherit

cursor: crosshair

cursor: default

cursor: help

cursor: move

cursor: pointer

cursor: progress

cursor: text

cursor: wait

cursor: e-resize

cursor: ne-resize

cursor: nw-resize

cursor: n-resize

cursor: se-resize

cursor: sw-resize

cursor: s-resize

cursor: w-resize

CSS3 Cursor Styles

We have more styles to choose from in CSS3. These work in IE9 and the latest versions of Firefox, Chrome, Safari and Opera except where indicated:

cursor: none (not IE, Safari, Opera)

cursor: context-menu (not Firefox, Chrome)

cursor: cell (not Safari)

cursor: vertical-text

cursor: alias (not Safari)

cursor: copy (not Safari)

cursor: no-drop

cursor: not-allowed

cursor: ew-resize

cursor: ns-resize

cursor: nesw-resize

cursor: nwse-resize

cursor: col-resize

cursor: row-resize

cursor: all-scroll

Browser-Specific Cursors

Mozilla and some editions of Chrome and Safari offer a number of vendor-prefixed cursor styles which are likely to become part of the CSS3 specification:

cursor: -webkit-grab; cursor: -moz-grab;

cursor: -webkit-grabbing; cursor: -moz-grabbing;

cursor: -webkit-zoom-in; cursor: -moz-zoom-in;

cursor: -webkit-zoom-out; cursor: -moz-zoom-out;

Creating Your Own Cursor

Finally, you can create your own cursor graphic, e.g.

cursor: url(images/cursor.cur);
cursor: url(images/cursor.png) x y, auto;

Note:

Internet Explorer requires a Windows cursor file (.cur).
Firefox, Chrome and Safari require an image — I’d recommend a 24-bit alpha-transparent PNG.
Firefox also requires a second non-URL cursor fallback value.
It’s not supported in Opera.
x and y are optional properties in Firefox, Chrome and Safari which define the precise pointer position from the top-left of the graphic. If omitted, 0 0 is assumed.

Nice, but it sounds like too much effort to me! I’ll be sticking with the standard cursor styles…

Creating Drill-down Analytics with FusionCharts, PHP, MySQL and JSON

Rob Frieman & Michael McCarthy — Fri, 09 Dec 2011 04:39:12 +0000

If you can measure it, you can manage it. If you can visualize it too, even better. Businesses and individuals are swimming in data – from social networks, to budgets, to resource planning we are surrounded by tools that generate data and most of us build applications that generate even more data for ourselves and our clients. It can be a challenge to distill and present the data generated by your (or your client’s) business in a way that lets them explore the data to answer questions about their business and make decisions in an informed way.

FusionCharts is a very accessible application that lets you configure and deploy multi-level, drill-down charts to present data in an attractive, simple interface. In this article we’ll walk through a simple implementation of FusionCharts using PHP, MySQL and JSON – you can be up and running in no time using your own data.

When you’re working with drill-down data, you need to start with data that naturally aggregates into meaningful groups. In this example, we’re going to use sales volume over time. The time segments will provide the drill-down – we’ll start in years and drill down from there, the core data will be sales counts at a particular date. Other examples could be geographic data, or data that rolls up (or down) through categories.

Approach and assumptions

For this solution, there will be a combination of custom development integrating a self-contained application, the 3D Column chart from FusionCharts. There are almost 3 dozen chart variants to choose from including scatter plot, line graphs, 2D and 3D options, and so on. FusionCharts provides .swf and .js files that are required for the charts to run, you will have to provide the data and the request/response handlers.

This tutorial assumes you have PHP5 and a mySQL database installed on your web server. A functional understanding of JSON and PHP are required. An understanding of HTML, CSS and JavaScript are also helpful, but less critical for this tutorial. This stack is not required – what you really need is a data source and a handler that can take http requests, access the data, and format a response.

For our purposes though we are going to implement this pretty simply so that any request to our php file will have a JSON response containing all of the data we need.

Presentation	`Column3d.swf` embedded in `chart-json.html`
Application controller and data access	`linked-chart.php` responds with JSON
Database

So in our example, any request to chart-json.html will result in the client making request for several assets including javascript files and the swf. When the swf loads it will follow the attributes passed to it in order to load the data, making a request to the php application. That app will access the database, retrieve the data, and format the response. The swf will parse the data contained in the JSON file and build our graph.

Ready to roll? Let’s do it.

Implementing a Linked FusionChart

First, download the core FusionChart JavaScript and Flash files here. Follow the installation instructions found in the index.html file, contained in the zip. LinkedCharts is a feature of FusionCharts that allows you to have unlimited drill-down capabilities where users can click on a data plot item and a child chart will be served up either replacing the current chart or spawned to a child window or frame.

For this tutorial we’ll focus on these files:

/chart-json.html (Click here for code Contains the markup to display the chart. includes the proprietary FusionChart JavaScript and Flash files. invokes linked-chart.php)
/linked-chart.php (Click here for code php that connects to the mySQL database and outputs the data as JSON)
/FusionCharts.js (Code found in zip file. Proprietary FusionChart file that ingests the JSON and injects the data into Column3D.swf)
/Charts/Column3D.swf (Code found in zip file. Displays the user interface to make the data pretty)

First, we’ll need our data. Since our example will work with data that neatly aggregates into portions of the year, we’ll just generate data based on timestamps. We can sort it into groups using SQL later.

SQL to create the database table :

CREATE TABLE 'revenue'
(
  'ID' int(10) unsigned NOT NULL AUTO_INCREMENT,
  'Time' timestamp NOT NULL DEFAULT '0000-00-00 00:00:00',
  PRIMARY KEY ('ID'),
  KEY 'Time' ('Time')
)

Fill the table by way of another php script that will generate 10,000 rows of timestamps over two years that can be used as our sales data over time:

generate-random-data.php

Now let’s build out the logic layer. This is the heart of the application since it handles requests and manages the retrieval of the data and the formatting of the response. Since it’s PHP we’ll be doing a lot in one file: establishing the database connection, gathering the objects we’ll need using SQL statement, sorting and filtering the responses, and then formatting the response into JSON.

First we’ll handle the request and define the params we’ll accept in the URI:

Next, we’ll set up the array to handle our values for segmenting the names of the months. Then use case statements based on the param in the request to select and filter the data into the aggregates we want to provide for drill-down – in this case months and days. The data returned fills the arrays and will be used later in the JSON response sent to the FusionCharts.js calls.
//Months Names
$MonthsNames = array(null, 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec');
//Prepare variables according to type-of-chart
switch($Type)
{
       default:
       case 'monthly':
              $Query = "SELECT MONTH(Time) AS Value, COUNT(*) AS Total FROM 'revenue' WHERE YEAR(Time)={$Year} GROUP BY Value";
              $ResultArray = array_fill(1, 12, 0); // fill the Result array with 0 values for each month
              $ChartHeading = 'Monthly Revenue for the Year: '.$Year;
              $XaxisName = 'Months';
              break;
       case 'daily':
              $Query = "SELECT DAY(Time) AS Value, count(*) AS Total FROM 'revenue' WHERE YEAR(Time)={$Year} AND MONTH(Time)={$Month} GROUP BY Value";
              $ResultArray = array_fill(1, 31, 0);  // fill the Result array with 0 values for each day
              $ChartHeading = 'Daily Revenue for the Month: '.$MonthsNames[$Month].'/'.$Year;
              $XaxisName = 'Days';
              break;
}
Build your database connection and retrieve the data
//Connect to database
$db_host     = 'database-url-goes-here';
$db_database = 'database-name-goes-here';
$db_username = 'database-username-goes-here';
$db_password = 'database-password-here';
if ( !mysql_connect($db_host, $db_username, $db_password))
    die ("Could not connect to the database server.");
if ( !mysql_select_db($db_database))
    die ("Could not select the database.");
//Query the database
$QueryResult = mysql_query($Query);
//Fetch results in the Result Array
while($Row = mysql_fetch_assoc($QueryResult))
       $ResultArray[$Row['Value']]=$Row['Total'];
Now that the data has been retrieved and stored in an array, we’ll need to format our JSON response. The first section of JSON will contain information that FusionCharts will use for labels. Based on the level, the JSON will contain more or less data – 12 rows of data for month, and a variable number of rows for daily.
The key to the drill-down feature is in the ‘link’ attribute – by passing the URI newchart-jsonurl-get-data.php?type=daily&year='.$Year.'&month='.$MonthNumber.' FusionCharts will make the region of data a link and when the user clicks on it the appropriate month of drill-down data will be loaded.
Here’s what the php looks like to generate the JSON
//Generate json: parent node
$Output = '{"chart":{"caption":"'.$ChartHeading.'","xaxisname":"'.$XaxisName.'","yaxisname":"Revenue"}, "data":[';
//Generate JSON: inner nodes for monthly and daily view
switch($Type)
{
       default:
       case 'monthly':
              foreach($ResultArray as $MonthNumber => $value) {  // MonthNumber is month number (1-12)
                     $Output .= '{ "value" : "'.$value.'", "label":"'.$MonthsNames[$MonthNumber].'", "link":"newchart-jsonurl-get-data.php?type=daily&year='.$Year.'&month='.$MonthNumber.'" } ';
                     if ($MonthNumber < count($ResultArray)) {
                           $Output .= ',';
                     }
              }
              break;
       case 'daily':
              foreach($ResultArray as $DayNumber => $value) { // DayNumber is day (1-31)
                     $Output .= '{ "value" : "'.$value.'", "label":"'.$DayNumber.'" } ';
                     if ($DayNumber < count($ResultArray)) {
                           $Output .= ',';
                     }
              }
              break;
}
$Output .= ']}';
//Send output
echo $Output;
?>
Finally, we’ll need that presentation layer and we’ll create an HTML page that will contain the requests we need and the params we want to pass to the LinkedChart.
Code for chart-json.html :
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">





Linked FusionChart using PHP, JSON and MySQL



FusionCharts will load here


And here’s the result:
FusionCharts expects the link to be URL encoded but you can override this by using an ‘unescapelinks’ attribute for your chart. As FusionCharts builds the chart, the links are embedded in the columns allowing users to click on a column and drill down to the next level of data, in this case daily.
You can configure the colors and styles and the levels of drill-down are really throttled by the data that you are working with.
This was a pretty simple example, but you could extend this in a lot of ways. You could make the data accessible via a RESTful interface and add parameters to the URI pattern, for instance. What are some ideas you have? This example is using tabular data, what about drill-down geo-demographic data? Let us know.

What’s New in Opera 11.60

Craig Buckler — Thu, 08 Dec 2011 11:50:36 +0000

Unlike certain browser vendors I could mention, Opera makes an effort to add shiny new features when they release an update. Version 11.60 is no exception although few users will notice changes unless they’re using:

Opera’s built-in email client — it’s been redesigned, or
the address field — it has a new quick bookmarking/speed-dial star icon

Apart from various bug fixes, all the exciting enhancements are under the hood in the Presto 2.10 rendering engine. Developers: prepare to tinker…

New HTML5 Parser

Opera implements the W3C HTML Parsing specification. It defines a set of parsing rules — for valid and invalid HTML — to ensure all browsers produce the same DOM. This will improve website rendering compatibility although we’ll need to wait until all vendors follow suit.

ECMAScript 5.1 Support

Opera 11.60 has full support for the ECMAScript 5.1 specification.

Microdata DOM API

Microdata attributes such as itemprop and itemscope can be queried using JavaScript. For example, assume a page contains contact details defined using the Schema.org person definition:



	Craig Buckler
	URL: http://www.sitepoint.com/author/craig-buckler/

We can interrogate this data using JavaScript:


// fetch the first person in document
var person = document.getItems("http://schema.org/Person")[0];
// show first name defined
alert("This article was written by " + person.properties["name"][0].textContent);

CSS rem Units

CSS rem units calculate the size of a font relative to the root rather than containing elements. The property can be used in CSS or SVG.

Radial Gradients

Opera now offers radial gradient and repeated-radial-gradient to supplement linear gradient support. The syntax:

-o-radial-gradient(position, size and shape, color stops);

for example:

-o-radial-gradient(50% 50%, 50px 50px, #000, #fff)

CSS4 image-rendering Property

This property specifies which scaling algorithms should be used for images, backgrounds, canvas elements, and border images, e.g. crisp-edges, optimize-contrast, nearest-neighbor, optimizespeed, optimizequality etc.

Better HTML5 and Support

The following attributes/properties have been implemented:

preload — can be set to “none” (minimizes server traffic), “metadata” (permits fetching of track lists, durations, etc.) or “automatic” (can optimistically download the entire media resource).
buffered — the time range of the media
seekable — the seekable time range for the media
muted — mutes audio output

Custom Protocol and Content Handlers

You’ve probably used “mailto:email@address.com” or “tel:01-234-567890″ in links to launch default email clients or telephony applications. Opera now supports the new navigator.registerProtocolHandler and navigator.registerContentHandler objects which allows you to create your own protocols and define handlers. For more information, refer to this DEV.OPERA article.

DOM4 Events

Like recent webkit builds, Opera 11.60 allows you to use the following DOM4 APIs:

synthetic events: fire a UI event from code, e.g. pressing a key, focusing on an input field, moving the mouse over an element, etc.
custom events: defining your own event types, e.g. a “die” event when a game character is shot.

Speculative Parsing

Under normal circumstances, browsers delay downloads and rendering until loaded scripts have been executed. Speculative parsing continues to load resources such as images and CSS files in readiness for rendering — this can boost performance on script-heavy pages.

Graceful XML Failure

Rather than show an “XML parsing failed” error, Opera will now attempt to render badly-formatted XML (XHTML) documents as HTML — even when they’re served with the application/xhtml+xml MIME type. While this will fix many rendering problems, you can switch it off in Opera’s config panel.

Even better for those feeling festive, Bruce Lawson has sung a Christmas Carol about the changes.

Opera 11.60 is available for most platforms at opera.com.

5 Tips for More Efficient jQuery Selectors

Craig Buckler — Fri, 25 Nov 2011 07:37:29 +0000

As the name implies, jQuery focuses on queries. The core of the library allows you to find DOM elements using CSS selector syntax and run methods on that collection.

jQuery uses native browser API methods to retrieve DOM collections. Newer browsers support getElementsByClassName, querySelector and querySelectorAll which parses CSS syntax. However, older browsers only offer getElementById and getElementByTagName. In the worst scenarios, jQuery’s Sizzle engine must parse the selector string and hunt for matching elements.

Here are five tips which could help you optimize your jQuery selectors…

1. Use an ID if Possible

HTML ID attributes are unique in every page and even older browsers can locate a single element very quickly:


$("#myelement");

2. Avoid Selecting by Class Only

The following class selector will run quickly in modern browsers:


$(".myclass");

Unfortunately, in older browser such as IE6/7 and Firefox 2, jQuery must examine every element on the page to determine whether “myclass” has been applied.

The selector will be more efficient if we qualify it with a tag name, e.g.


$("div.myclass");

jQuery can now restrict the search to DIV elements only.

3. Keep it Simple!

Avoid overly complex selectors. Unless you have an incredibly complex HTML document, it’s rare you’ll need any more than two or three qualifiers.

Consider the following complex selector:


$("body #page:first-child article.main p#intro em");

p#intro must be unique so the selector can be simplified:


$("p#intro em");

4. Increase Specificity from Left to Right

A little knowledge of jQuery’s selector engine is useful. It works from the last selector first so, in older browsers, a query such as:


$("p#intro em");

loads every em element into an array. It then works up the parents of each node and rejects those where p#intro cannot be found. The query will be particularly inefficient if you have hundreds of em tags on the page.

Depending on your document, the query can be optimized by retrieving the best-qualified selector first. It can then be used as a starting point for child selectors, e.g.


$("em", $("p#intro")); // or
$("p#intro").find("em");

5. Avoid Selector Repetition

It’s rarely necessary to use the same selector twice. The following code selects every p tag three times:


$("p").css("color", "blue");
$("p").css("font-size", "1.2em");
$("p").text("Text changed!");

Remember jQuery offers chaining; multiple methods can be applied to the same collection. Therefore, the same code can be re-written so it applies to a single selector:


$("p").css({ "color": "blue", "font-size": "1.2em"}).text("Text changed!");

You should cache the jQuery object in a variable if you need to use the same set of elements multiple times, e.g.


var $p = $("p");
$p.css("color", "blue");
$p.text("Text changed!");

Unlike standard DOM collections, jQuery collections aren’t live and the object is not updated when paragraph tags are added or removed from the document. You can code around this restriction by creating a DOM collection and passing it to the jQuery function when it’s required, e.g.


var p = document.getElementByTagName("p");
$(p).css("color", "blue");
// update the DOM
$(p).text("Text changed!");

Do you have any further jQuery selector optimization tips?

jQuery Mobile 1.0 Final Released

Craig Buckler — Sat, 19 Nov 2011 09:22:26 +0000

Following a year of thorough testing and debugging by 125 contributors, the final gold version of jQuery Mobile has been released. If you’re developing mobile applications for iOS, Android, Blackberry, Bada, Windows, WebOS, Symbian or MeeGo, you should certainly investigate what jQuery Mobile offers.

Before we go any further, I should clear up some confusion. Despite the name, jQuery Mobile is not jQuery for mobiles! It’s an interface framework which requires the standard jQuery core (1.6.4 is supported at this time). It could be likened to jQuery UI for mobile devices or, more accurately, projects such as Sencha Touch.

In essence, jQuery mobile helps you build cross-platform mobile web applications using HTML5. Common elements such as pages, toolbars, dialogs, lists, navigation and form fields are styled and transformed into an attractive iPhone-inspired mobile interface.

Impressively, jQuery Mobile provides A-grade support for all modern platforms including: iOS 3.2+, Android 2.1+, Windows Phone 7+, Blackberry 6+, WebOS 1.4+, Firefox Mobile, Opera Mobile 11, Meego 1.2, Kindle 3 and Kindle Fire. Lesser browsers such as Blackberry 5, Opera Mini, and Symbian will work but features such as Ajax navigation may be disabled. Older browsers will still receive a functional, non-enhanced HTML-only experience.

A-grade support also extends to the desktop editions of IE (7+), Chrome, Firefox and Opera. That should make testing significantly easier for developers.

How to use jQuery Mobile

The jQuery documentation is impressive:

Those with a little HTML experience can implement basic multi-page templates and transitions using markup alone:




	
	My Page
	
	
	
	



	
		Page One
	
	
		Hello world
		Show page 2
	


	
		Page Two
	
	
		Hello again
		Show page 1

Those requiring more sophistication can access the API to configure the defaults, define events and modify themes.

Building Your Own Theme

If you’re not keen on the subtle blue and gray iPhone design, the theme can be tweaked using CSS. If that’s a little too much effort, try the ThemeRoller application. The whole design can be modified by dragging colors on to interface elements and downloading the customized CSS file.

Suitable File Sizes?

jQuery Mobile’s JavaScript code is contained in a 24KB minified and gzipped file. A further 7KB is required for the CSS theme and 32KB for the jQuery 1.6.4 core. That’s a total of 63KB — a reasonable download for the slowest of connections. Don’t forget that you’ll probably require fewer graphics too.

jQuery Mobile looks great. It won’t magically convert your existing project to a mobile app but it’ll make the task far easier, more reliable and it’ll work on multiple devices.

Are you intending to use jQuery Mobile in your next project?

Developing a Better Country Selector

Craig Buckler — Mon, 14 Nov 2011 18:30:39 +0000

There reaches a point in every web developer’s life when they need a country selector — perhaps for a sign-up form or delivery address. So we find a list of all 249 countries, insert a select box into our HTML code and consider that a job well done.

It’s not.

Country select boxes are dreadful. The problems include:

1. Too many choices
Locating your country within 249 items is a usability nightmare.

2. An awkward interface
Select box controls differ between devices, OSs and browsers but one thing is certain — the user will need to scroll around to find their country. That often means switching from keyboard to mouse or lots of swiping on your mobile.

3. Sorting problems
If your site is primarily visited by US users, an alphabetic list displays “United Arab Emirates” and “United Kingdom” first. Some developers address this by putting the most likely countries at the top but this can confuse users expecting an alphabetically-ordered list.

4. No consideration for alternative country names
Country lists rarely consider alternative names. I live in the UK but any of United Kingdom, UK, Great Britain, GB, Britain or England could be defined by the developer.

5. Poor internalization
What if a Spanish user tries to locate “España” in your English list? At best, they’ll find Estonia. In addition, lists rarely consider international country codes such as ES or US.

6. No consideration for abbreviations or mis-keying
If a user enters a term such as “nited”, “States” or “America” it’s unlikely they’ll locate the USA.

Fortunately, Christian Holst from the Baymard Institute has developed a solution which solves the issues for us: see Redesigning the Country Selector.

It’s a jQuery plugin which replaces a standard HTML select box with an auto-complete control. The jQuery UI Autocomplete plugin is supplied but you can use your own implementation if necessary.

Several properties can be defined in the HTML:

This snippet is identical to most country select code except:

If a data-priority code is defined, it’s assumed to have a higher priority than countries without a code. The lower the priority number, the higher it will appear in the auto-complete list.
A space-separated list of alternative codes and spellings can be defined in the data-alternative-spellings attribute.

To convert the select to an auto-complete box you simply need to call the jQuery plugin method:


$("#country-selector").selectToAutocomplete();

There are many more options so I suggest you try the demonstration and view the documentation at baymard.com/labs/country-selector. The open-source code is released under the MIT License and is available at GitHub.

The plugin is far superior to other implementations I’ve seen — including, ahem, my own. Note that it doesn’t work in IE6 or 7 but those browsers will still display the standard select box. It’s not limited to countries either and you can use any type of data. Recommended.

How to Create Multiple Borders in CSS3

Craig Buckler — Fri, 11 Nov 2011 17:28:27 +0000

The CSS2.1 border property has served us well but it’s a little basic. What if you require two or more borders in different colors? The CSS3 border-image property is an option but it still requires Photoshopping shenanigans and the syntax is quite complex. However, if you simply need a series of solid-color borders, there is an easier alternative: the box-shadow property.

View the multiple border demonstration page…

box-shadow has six arguments:

inset: (optional) if defined, the shadow will appear inside the element.
horizontal: the x distance from the element
vertical: the y distance from the element
blur: (optional) the blur radius, i.e. 0 for no blur
spread: (optional) the distance the shadow spreads, i.e. 1px extends the shadow 1 pixel in all directions so it’s 2px wider and taller than the parent element
color: the shadow color

The little-used spread argument can be used to create a border. For example, a 1 pixel solid black border can be created using no blur and a 1px spread:


box-shadow: 0 0 0 1px #000;

Unlike the border property, box-shadow permits multiple shadows separated with a comma. The last shadow defined sits at the bottom of the stack so, to create the box shown above, we use this code:


box-shadow:
	0 0 0 2px #000,
	0 0 0 3px #999,
	0 0 0 9px #fa0,
	0 0 0 10px #666,
	0 0 0 16px #fd0,
	0 0 0 18px #000;

Note:

The effect works in all the latest browsers including IE9.
It can be combined with border-radius but remember that the radius is applied to the inner element so the outer shadows extrude accordingly.
Unlike a real border, box-shadow does not require space so the effect will flow under other elements.

Some will consider it a hack, but it’s an quick solution for multiple borders which doesn’t require images.

What’s New in jQuery 1.7

Craig Buckler — Sat, 05 Nov 2011 11:15:34 +0000

The web’s most popular JavaScript library has been updated. jQuery 1.7 can now be downloaded from docs.jquery.com/Downloading_jQuery. Alternatively, if you prefer a CDN, use any of the following URLs:

So let’s look at what’s new…

Removed Features

Before we look at the new and shiny stuff, you should check your existing code. Are you using:

event.layerX or event.layerY
jQuery.isNaN() (undocumented utility function)
jQuery.event.proxy() (undocumented method)

If you are, jQuery 1.7 may break your system.

New Event APIs: on() and off()

The new on() and off() methods unify event handling in jQuery so there’s no need to use bind(), delegate() or the older live() calls. The syntax:


$(elements).on( events [, selector] [, data] , handler );
$(elements).off( [events] [, selector] [, handler] );

Example 1 — bind a click event to a link:


// onclick
$("a#mylink").on( "click", MyHandler );
// identical
// to: $("a#mylink").bind( "click", MyHandler );
// or: $("a#mylink").click( MyHandler );

Example 2 — bind a click event to all items in an unordered list using a delegate:


// onclick
$("ul#mylist").on( "click", "li", MyHandler );
// identical to:
// $("ul#mylist").delegate( "li", "click", MyHandler );

The existing bind() and delegate() methods still exist, but the team recommend you use on() and off() for all new projects using jQuery 1.7.

HTML5 Support for IE6, 7 and 8

Methods such as html() now support HTML5 tags such as header, footer and article. Note that you’ll still require the HTML5 shiv in those browsers.

New isNumeric() method

As you probably guessed, the new isNumeric() function returns true if a value is a number, e.g.


$.isNumeric(10);		// true
$.isNumeric("10");		// true
$.isNumeric(0);			// true
$.isNumeric("");		// false
$.isNumeric(true);		// false
$.isNumeric(Infinity);	// false

New Callbacks() object

The jQuery.Callbacks() object returns a multi-purpose object used to manage callback lists. In essence, it’s a generalized way to queue and trigger a series of handlers. It’s an advanced feature — in most situations, the higher-level jQuery.Deferred object will be preferable.

Miscellaneous Improvements and Bug Fixes

The following issues have been addressed:

Delegate event performance has doubled in 1.7. The jQuery team identified that delegation had become increasingly important in application frameworks and made further optimizations to the core code.
Toggling animations including slideToggle() and fadeToggle() now work correctly following a termination of queued effects using stop().
The is() method now correctly filters positional selectors such as :first, :last and :even against the document — not the jQuery object passed to is().
The .removeData() method now accepts one or more keys within an array or a space-separated string.
The .stop() method can be passed an optional string representing the name of the animation queue.
jQuery now supports the Asynchronous Module Definition (AMD) for defining modules and dependencies.

Documentation Updates

For further details of all the new features, refer to the 1.7 documentation page. All new features are tagged with “New in 1.7″.

Should You Upgrade?

That’s the million dollar question. The jQuery team work hard to minimize compatibility issues and version 1.7 is unlikely to break your code. That said, if you’re particularly risk-averse, delay updating for a week or two. Minor bugs are normally found, fixed and released quickly.