Browser support for animation is limited to Webkit browsers like Safari and Chrome as well as Firefox. Animation is coming to IE10 and as of now there’s unknown support in Opera. For now you also need to use vendor prefixes, though I won’t be showing the prefixes in this post.

Keyframes

The first thing we need to understand with animation is the idea of keyframes. If you’ve ever worked with Flash or similar you should know what keyframes are.

With transitions we had a starting point and ending point. What we didn’t have was anything in between. Keyframes give us the in between. They give us finer control over the intermediate stages between beginning and ending.

Essentially they define a series of start and end points, with all intermediate keyframes being the ending point for one transition and the starting point for the next. This allows for the variance of durations and timing functions through the entire animation sequence.

@keyframes Rule

In css3 keyframes are specified using an @rule, followed by a user defined name for the animation. Inside are lists of property: value pairs set at different % over the animation. Each % is a new keyframe.

@keyframes 'my-animation' {
  0% {
    left: 0;
  }
  50% {
    left: 250px;
  }
  100% {
    left: 500px;
  }
}

Above are 3 keyframes under the name my-animation. These frames occur at 0%, 50%, and 100% of the animation. Each simply moves an element by setting it’s left property to a new value.

It’s not the most complex animation, but it illustrates the basics of defining @keyframes.

Every keyframe animation must have a rule for 0% (from) and 100% (to) or else it’s invalid. The “from” and “to” keywords can be used instead of the % values. Any properties inside the individual keyframes that can’t be animated are ignored.

The keyframes can be specified in any order, though the sequence will proceed from 0% to 100% as expected. All selectors and values are first determined and sorted in increasing order of time.

You’re not limited to defining one @keyframes rule. Multiple @keyframes can be defined and called in a single document. However @keyframes don’t cascade so an animation will never derive keyframes from more than one @keyframes rule.

Animation Behavior

Animations are what happens between keyframes and they’re similar to transitions in that they change css properties over time with the following key differences.

• Transitions trigger implicitly when a property changes values. The property change causes the transition.
• Animations are explicitly executed when animation properties are applied. The animation causes the property change.

Because of the latter explicit values for any properties being animated are required.

During an animation the computed values of properties are controlled by the animation. These computed values override other values that may have been set. Before and after animations those other values will apply.

Animation Properties

The @keyframes rule above defines the change that will happen over the animation.

Most of the properties below are applied to the element(s) that will undergo that animation. They determine which animation to use and how it will be applied.

There are 7 animation properties and some should look familiar if you’ve spent any time with transitions.

• animation-name
• animation-duration
• animation-timing-function
• animation-iteration-count
• animation-direction
• animation-play-state
• animation-delay

And of course there will be a shorthand animation property combining all of the above.

animation-name property

The animation-name property defines a list of animations that are applied. It’s used to select which @keyframes will apply to an element.

div {
  animation-name: my-animation;
}

The above sets the @keyframes my-animation as the one to use to animate the div.

animation-duration property

Like transition-duration, the animation-duration property defines the length of time over which the entire animation will run. Naturally it takes a time as its value and its default value is 0 or an instant change.

div {
  animation-duration: 5s;
}

animation-timing-function property

The animation-timing-function property describes how the animation progresses and it works the same as transition-timing-function with the same values

• ease
• linear
• ease-in
• ease-out
• ease-in-out
• cubic-bezier

I’ll refer you to my post on transitions for specifics of how each of the above works.

If the timing function is applied to the element it sets the timing over the entire animation, however the timing function can also be set on individual keyframes, which would only affect the timing from that keyframe to the next.

@keyframes 'my-animation' {
  0% {
    left: 0;
    animation-timing-function: ease-in;
  }
  50% {
    left: 250px;
    animation-timing-function: ease-in-out;
  }
  100% {
    left: 500px;
    animation-timing-function: linear;
  }
}

animation-iteration-count property

Transitions run once when some event occurs. Animations can be set to run multiple times. The animation-iteration-count property defines how many times to run the animation sequence.

Its value is a number with the default being 1. A value of infinite means to run the animation forever in an endless loop and a negative value becomes 0.

A non-integer number can be used and will lead to animation ending part way through a cycle. For example setting animation-iteration-count to 2.5 will run the animation 2 ½ times, finishing right in the middle of a cycle.

div {
  animation-iteration-count: 9;
}

The above will run the animation 9 times before stopping.

animation-direction property

The animation-direction property defines whether or not the animation should run in reverse during alternate cycles. It takes 2 values normal (default) or alternate.

div {
  animation-direction: alternate;
}

The above would set odd numbered iterations to proceed in normal direction and even numbered iterations to proceed in reverse or the alternate direction

Alternate also reverses the timing-functions so ease-in played in reverse becomes ease-out during the alternate direction.

animation-play-state property

You can define if the animation is running or paused (the 2 values) with the animation-play-state property.

div {
  animation-play-state: paused;
}

A paused animation continues to display the current value of animation until resumed where the resumed animation will then start at that current display.

animation-delay property

As you’d expect the animation-delay property defines when the animation will start. It works exactly the same as transition-delay.

div {
  animation-delay: 0.5s;
}

The above delays the start of the animation for ½ second.

animation shorthand

Like usual you don’t need to specific all the above properties separately, but can use the shorthand. The shorthand takes the following order.

[<animation-name> | <animation-duration> | <animation-timing-function> | <animation-delay> | <animation-iteration-count> | <animation-direction>] [, [<animation-name> | <animation-duration> | <animation-timing-function> | <animation-delay> | <animation-iteration-count> | <animation-direction>] ]

Multiple animations are separated by a comma.

Animation Events

You can use Javascript to control some aspects of an animation such as whether or not the animation is running or paused. There are 3 animation related events sent to the DOM.

• animationstart — occurs at the start of the animation
• animation end — occurs when the animation finishes
• animation iteration — occurs at the end of each iteration of an animation for which animation-iteration-count is greater than one

Each of the above events has 3 significant properties.

• event.target
• event.animationName
• event.elapsedTime

The event handler can determine the current iteration through a counting mechanism.

With the above in mind you can do things like pause and run an animation with a button click.

Additional Resources

Unlike my simple animation demo there are some really good examples of using css animations on web pages. Here are a couple of collections of examples. There’s a lot of repeat between them.

• 47 Amazing CSS3 Animation Demos
• 50 Awesome Animations made with CSS3

Here’s a really good post on making your animations look more realistic. It covers some basic principals of animation and shows how to apply them using the css described throughout this post.

Johannes Tonollo has recently put up a site called Meaningful Transitions, which seeks to apply principles to animation in user interface design.

Summary

CSS animations aren’t quite everywhere online yet. Browser support is getting closer, but still needs more support, and let’s face it not every page needs to be or should filled with moving parts.

Like transitions though, animations should not be applied to critical design elements and so while browser support may not be completely there you can still use animations to communicate non-critical information or just to have some fun.

Where appropriate they can be a nice addition to a web page. While the properties and keyframes above can be combined to created some complex animations, I hope you can see that it’s not to hard to use them for some simple animations.

Have you experimented with css animations or used them in practice? If so where have you found they work best? How have you used them?

CSS transforms come in two types.

• 2D Transforms allow elements rendered by CSS to be transformed in two-dimensional space.
• 3D Transforms extends CSS Transforms to allow elements rendered by CSS to be transformed in three-dimensional space.

2D transforms have pretty good browser support, by which I mean they work in the current versions of all major browsers.

They won’t work in IE8 and below, however you’re probably used to that, and like transitions we probably shouldn’t be using transforms for critical elements.

I’ve set up a demo illustrating different 2D transforms.

The situation with 3D transforms is different. These will work in Safari and Chrome (as well as mobile Safari and mobile Android), but not much else. IE10 will support them, though with Firefox and Opera it’s anyone’s guess.

Like transitions we’ll need to use vendor prefixes to get things working, though in this post I’ll show properties without the prefixes.

2D CSS Transforms

If you think of a computer monitor as a flat 2-dimensional plane then 2D transforms are a way to manipulate elements on that 2-dimensional plane.

There are only 2 properties we have to deal with, though the magic really happens with the values we give to the first property.

• transform property
• transform-origin property
• transformation functions (values of the transform property)

As we’ll see in a moment it’s the last of these, transform functions where the fun begins.

transform

The values you can give to the transform property are none or one or more transform functions. The idea is to set which transform you’ll be using.

div {
  transform: scale(1.5);
}

The above will scale divs 1.5 times their initial value.

Transforms apply to both block level and inline elements. When we use relative measurements like % they will refer to the element’s box and not its container.

transform-origin

As the name implies the transform-origin property sets the origin of the transformation. The origin becomes a fixed point in the before and after transformation states.

div {
  transform-origin: 0, 0;
}

The above sets the origin to 0,0 and this point will be fixed throughout the transformation.

Values allowed are [percentage | length | left | center | right] [percentage | length | top | center | bottom]

The 1st value is the horizontal point and the 2nd is the vertical point unless one of the keywords used. If either horizontal or vertical value isn’t specified it defaults to center.

Transformation Functions

This is the magic. Transformation functions define how the element is changed. With one exception you should be able to figure out what each does from the name alone.

Matrix

Let’s start with the exception, since it’s the general case for all that follows.

The idea here is that all transformations can be represented by a 3×3 matrix. In the 2D transforms we’re only using the top 2 rows in the matrix for a total of 6 values.

The original coordinate system (pre-transform) = this matrix &times the new coordinate system (post-transform).

In essence the matrix transform function allows you to create a custom transform, while the remaining functions are all specific values of this matrix.

div {
 matrix(<number>, <number>, <number>, <number>, <number>, <number>);
}

You’ll likely use the functions that follow in practice, but should you want to use matrix you would specific each of the 6 values.

Translation

There are 3 translation transforms, which allow you to move an element from one place to another.

• translate(<translation-value>[, <translation-value>])
• translateX(<translation-value>)
• translateY(<translation-value>)

div {
  transform: translate(10px, 30%);
 }

translation-values can be either a length or a % and each of the 3 functions above does just what you think it will do.

All 3 move the element from one location to another by an amount equal to the values set in the function. The first in both x and y coordinates and the latter 2 in one or the other.

When translate is used the first value is the x-coordinate and the second the y-coordinate.

Scale

There are also 3 scaling functions, which I’m sure you can guess make the element larger or smaller

• scale(<number>[, <number>])
• scaleX(<number>)
• scaleY(<number>)

div {
  transform: scale(2.0);
}

Scale takes a unitless number. Numbers larger than 1.0 scale up and numbers less than 1.0 scale down. Like translate we can scale in both the x and y directions or in one or the other.

As with translate the first value is the x-coordinate and the second the y-coordinate.

Rotate

Rotate only has the single function since by definition rotation acts around a fixed point (transform-origin) instead of x and y coordinates.

• rotate(<angle>)

div {
  transform: rotate(45deg);
}

Positive angles rotate clockwise and negative values rotate counter-clockwise

Skew

I’ll give you one guess what skew does. It works similarly to the functions above and comes in the generic and x and y flavors.

• skew(<angle> [, <angle>])
• skewX(<angle>)
• skewY(<angle>)

With skew you define the angle of skew in either or both directions

div {
  transform: skew(5deg, 20deg);
}

Multiple Transforms

You aren’t limited to a single transform, but can use several as a space separated list.

div {
  transform: translate(10px 30%) scale(2.0) rotate(45deg) skew(5deg, 20deg);
}

When multiple transforms are set the net result is the same as if each transform was applied separately in the order in which they were applied.

3D CSS Transforms

If you’ve understood how 2D transforms work you shouldn’t have any trouble understanding 3D transforms either as they simply extend their 2D counterparts.

They use the transform property the same way by specifying one of the transform functions. They also set a transform-origin with the one difference being the z-coordinate added to the x and y coordinates.

div {
  transform-origin: 0, 0, 0;
}

There are a few new properties added as well, which I’ll cover briefly since 3D transforms probably aren’t ready for use yet beyond experimentation.

• transform-style — defines how nested elements are rendered in 3d space. There are 2 values; flat and preserve-3d. Flat means that children of the element are rendered flattened onto the 2d plane of the element and preserve-3d prevents this flattening.
• perspective — applies the same transform as the perspective transform-function (which we’ll get to momentary) except that it applies to children of the element. Values are none or a number.
• perspective-origin — establishes the origin for the perspective set above. Values are [percentage | length | left | center | right] [percentage | length | top | center | bottom].
• backface-visibility — determines if the backside of the transformed element is visible. Values are either visible or hidden.

3D Transformation Functions

The 3D transform functions build on the 2D functions in a rather predictable way, mostly by adding one or 2 new functions to each group that shouldn’t require explanation.

To matrix is added matrix3d, which now takes into account that bottom row of the matrix.

matrix3d(<number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>;)

Again the remaining functions are specific values of matrix or matrix3d

Translate adds:

• translate3d(<translation-value>, <translation-value>, <translation-value>)
• translateZ(<translation-value>)

Scale adds:

• scale3d(<number>, <number>, <number>)
• scaleZ(<number>)

Rotate adds:

• rotate3d(<number>, <number>, <number>, <angle>)
• rotateX(<angle>)
• rotateY(<angle>)
• rotateZ(<angle>)

Because we now have another dimension we can specify around which axis the element will rotate.

Skew doesn’t add anything new, but we do have one new function, perspective.

• perspective(<number>)

Perspective sets a perspective projection matrix, which maps a viewing cube onto a pyramid whose base is infinitely far away and whose peak represents the viewer’s position.

The number set in the function specifics the depth and represents the distance of the z=0 plane from the viewer.

Huh? That’s how I felt reading what perspective does. Perhaps this will be clearer.

Lower values lead to a flatter pyramid and higher values a more pronounced pyramid. The lower the number the more foreshortening in the perspective.

Again these 3D transforms are still not supported well and so for now are more for you to experiment with than use in an actual project. However there are some amazing examples of 3d transforms. You’ll want to use a Webkit browser to see them.

Summary

Like transitions, transforms can be a nice way to add something to the experience of your design. Transforms don’t require a css change in order to happen, though they can certainly happen with changes in the state of an element.

Used sparingly and subtly transforms can work to great effect, but be careful about getting carried away with them.

Few if any want to see elements on your page moving around or changing shape all the time. However adding a glow effect when mousing over an element or setting a background image at an angle can be a nice surprise for your audience.

Because browser support is not 100% there yet, you do need to make sure the transformations you set aren’t critical to the design, but for non-critical things go right ahead and use them.

I’ve built a demo of a navigation bar with and without transitions applied. Mouse over the menu items to see the difference transitions can make.

With every post about css3 something needs to be said about browser support. There’s a section below on support, but for the most part it’s pretty good as long as you remember to use vendor prefixes and aren’t using IE.

Without IE support you might think that transitions aren’t ready for prime time just yet, but this is one area where you can safely use css3 even if it won’t work across all browsers.

In his book CSS3 For Web Designers, Dan Cederholm points out that we can divide the visual experience on websites into two categories:

• critical — branding, usability, accessibility, layout
• non-critical — interaction, visual rewards, feedback, movement

You shouldn’t use the latest and greatest technology for the critical items, but they’re fine to use for the non-critical and transitions play more into the non-critical.

Remove transitions and visitors will still get a fully functional and usable design. They’ll simply be missing a little extra delight.

How to Use CSS3 Transitions

The W3C offers the following clear and simple definition of transitions.

CSS transitions allow property changes in css values to occur smoothly over a specified duration.

Transitions are about having changes happen over some duration instead of instantly. In their simplest form they make these changes less jarring and in more complex forms they allow us to create some interesting animations

There are 4 transition properties we can use:

• transition-property
• transition-duration
• transition-timing-function
• transition-delay

Each is quite simple to understand and put to use.

transition-property

The transition-property defines what properties the transition will apply to. It accepts values of none (the default), all, or a single css property or comma separated list of properties.

nav a {
  transition-property: background-color;
}

The above says that any time the background-color of a link inside the nav element changes a transition should be used.

Transitions can be applied to any element as well as the :before and :after pseudo classes.

transition-duration

A time frame is the key component of a transition so it should be no surprise there’s a property to define this time frame. The transition-duration property takes a time as a value, usually expressed in seconds (s)

nav a {
  transition-duration: 0.5s;
}

The above tells us the transition we’re applying to nav links should occur over a duration of half a second from start to end.

The default value is 0, which is the same immediate change we get without using transitions. Any value greater than 0 slows the transition from the immediate.

transition-timing-function

The timing function describes how the intermediate values during the transition are calculated and allows for the transition to change speed over its duration.

The effects of the timing function are commonly called easing functions.

It’s probably the most complicated part of transitions, though it’s still just as easy to work with. It’ll take me longer to explain than for you to start using.

The timing function is specified using a cubic bezier curve, which you can see in the image above. There are 4 points on the curve (P0, P1, P2, and P3). Point P0 is always located at coordinates (0,0) and point P3 is always at (1,1). Points P1 and P2 are what the timing function changes

The transition-timing-function has 6 values:

• ease (default) — equivalent to cubic-bezier(0.25, 0.1, 0.25, 1.0)
• linear — equivalent to cubic-bezier(0.0, 0.0, 1.0, 1.0)
• ease-in — equivalent to cubic-bezier(0.42, 0, 1.0, 1.0)
• ease-out — equivalent to cubic-bezier(0, 0, 0.58, 1.0)
• ease-in-out — equivalent to cubic-bezier(0.42, 0, 0.58, 1.0)
• cubic-bezier — user defined

With the cubic-bezier value you set 4 numbers between 0 and 1, which correspond to the x and y values (x1, y1, x2, y2) of points P1 and P2 of the curve.

nav a {
  transition-timing-function: linear;
  transition-timing-function: bezier-curve(0.2, 0.4, 0.8, 0.7);
}

For shorter durations the values won’t show much difference and ease or linear will probably suffice. The longer the duration, the greater the difference in the values.

You can read up on the math of bezier curves or you can just play around to see how they work. The latter will be a bit easier.

transition-delay

As you can probably guess the transition-delay property defines when the transition will start. As with duration it accepts a time as it’s value.

The default is 0, which means the transition will begin instantly, though it will still end as defined by the transition-duration.

nav a {
  transition-delay: 0.2s;
}

The above delays the start of the transition for 2 ⁄ 10 of a second.

A negative value can be used and means the transition will start immediately, but will begin part way through the transition as if it had started before the action occurred.

transition shorthand

As with most things css there’s a transition shorthand for the 4 properties above.

nav a {
transition-property | transition-duration | transition-timing-function | transition-delay, [transition-property | transition-duration | transition-timing-function | transition-delay];
}

nav a {
  transition: background 0.5s ease 0.2s;
}

The order is important. The first time value will be applied to duration and second will be applied to delay.

Starting and Reversing a Transition

In general when a transition starts it must complete according to the transition properties set even if those properties are changed by another action. However at times it doesn’t make sense to do this.

A common case is mousing over an element that starts a transition and then quickly mousing out. The rule above says the :hover transition has to complete before transitioning back to it’s initial value, however this doesn’t match expected behavior.

Expected behavior is that on mouse out the original transition stops and immediately moves in reverse. This is what the spec calls for.

You can read the technical explanation about how this is accomplished, but the gist is that whatever part of the transition has happened up to the point where the mouse-out occurred now happens in reverse.

You don’t have to do anything to make this happen either. It’s all automatic.

Properties that can be Transitioned

Quite a few properties can be transitioned from backgrounds and borders to positioning and z-index and all things in between. There’s a complete list in the spec.

Suffice it to say you shouldn’t find yourself lacking for different properties you can transition.

Transition Events

What triggers a transition? Anything that changes. While most examples will show transitions on hover there are more events you can apply them to.

If an element’s style can be triggered to change in any way that change can be transitioned. Some examples:

• :hover
• :focus
• :active
• :checked
• :disabled
• media queries

If you haven’t seen it yet check the latest incarnation of CSS Tricks for an example of the last. As you resize your browser the search box will move to a new location with a transition applied.

One thing you might have wondered while reading this post is why the transition is set on the default state instead of the changed state. Wouldn’t it make sense to define the transition on the hover for example instead of the default link?

The multiple states for which a transition can occur is why the transition property is set on the default state of the element. Imagine having to set a new set of transition properties on each possible triggering state. Much easier to set it once.

Browser Support

I mentioned at the start that browser support is good and bad in the usual suspects. Webkit introduced transition and so they work in both Safari and Chrome. Firefox has supported them since version 4.0 and Opera support began in version 10.5.

Transitions are coming to Internet Explorer in version 10, though we know that means it’ll be awhile before all IE users can see our wonderful transitions.

Again that’s ok since the transition shouldn’t be a critical element in your design. An IE user can see the same instant change they would see if transitions didn’t exist at all.

• Can I Use CSS Transitions
• CSS3 Transitions support in Opera
• CSS transitions: Mozilaa

Do keep in mind that vendor prefixes are still needed for all transition properties in all browsers, including IE10.

nav a {
  -webkit-transition-property: all;
  -moz-transition-property: all;
  -o-transition-property: all;
  -ms-transition-property: all;
  transition-property: all;
}

Summary

CSS transitions are simple to work with and they’re a really nice effect to make changes on your site happen more naturally. Without them changes are instant, but that’s generally not how things work in real life.

Transitions are easy to set up. In fact most of what you’ll be doing is experimenting with different time settings to see if a change looks better occurring over a half second or a full second or some other time frame. You can get rather creative with a few small changes.

You need to use vendor prefixes for now, but browser support is good everywhere outside of IE and support is coming to IE. Since transitions will be non-critical to your design you can safely use them now even if IE users won’t see them yet.

Have you been using transitions in your work yet? Any tips to share for how and where to apply them?

Next week I want to look at another set of properties we can use for non-critical elements in our designs, namely 2D and 3D transforms, which will allow us to move, scale, rotate, and skew design elements.

Today I want to walk through the border-image property and close with a couple of miscellaneous properties around the boxes we’ve been talking about.

Browser support: At the moment browser support for css border images is limited. The latest version of Chrome should support everything here. Safari, Firefox, and Opera should support border images only when the shorthand is used. There is currently no support in IE.

Border Images

CSS3 introduces the ability to use an image as the border around an element in place of one of the border-styles.

It also provides properties for controlling to a greater degree how these images will display as the border. The border-image properties we can use are:

• border-image-source
• border-image-slice
• border-image-width
• border-image-outset
• border-image-repeat

Let’s talk about each of these in more detail and then take a look at the border-image drawing process, which will hopefully tie everything together.

border-image-source

This is the easiest of the properties to understand and perhaps the only one you’ll ever set. As you’d expect it’s used for the path of the image you want to use as the border.

div {
  border-image-source: url("path-to-image");
}

If a value of none is used or if the image can’t be found then border-styles will be applied instead, suggesting that when using border-image you should still provide some default border-styles to fall back to.

This seems pretty simple, but it may surprise you to look at the image above and realize the image on the left becomes the border for the right.

That might not seem obvious, but will hopefully become clearer with the remaining properties. Keep the image above in mind when reading through the rest of this post.

border-image-slice

What’s happening with the border-image above is that it and the area it will be painted on are first sliced into 9 different regions (like a tic-tac-toe board) and then those slices are set around the border of the element.

The border-image-slice property sets how the image itself is divided.

The 9 slices of the image will be 4 corners, 4 edges, and a middle. Again think tic-tac-toe or better, just look at the image above. The middle slice is discarded. It’s treated as fully transparent unless you use the fill keyword.

The border-image-slice property allows you to set the offsets to slice the image into these 9 regions.

Basically it lets you move the lines of the tic-tac-toe board up and down or left and right. The values are the usual number or % with numbers representing px for a raster image and vector coordinates for a vector image.

div {
  border-image-slice: 20 40 20 40;
}

You can add the optional fill value at the end. Assuming a raster image, the above would draw the lines for slicing 20px from the top and bottom and 40px from the left and right.

Negative values are not allowed and values greater then the image size are reduced to 100%. If the 4th value is absent it’s the same as the 2nd. If the 3rd and/or 2nd is absent it’s the same as the 1st value.

The regions may overlap, but if the sums for left and right are greater than the image’s width, the top, bottom, and middle are considered empty or transparent.

border-image-width

The border-image-width property also sets offsets. These are used to divide the painting area into 9 parts that will contain the 9 regions of the image sliced above.

The 4 values set represent the inward distances from the sides of the image area.

div {
  border-image-width: 20px 10% 20 10%;
}

Values can be a length, number, or % with the default being auto.

As above if the 4th value is absent it’s the same as the 2nd. If the 3rd and/or 2nd is absent it’s the same as the 1st value.

Also as above negative values are not allowed and if there’s overlap the numbers are reduced until there is no longer an overlap.

The auto value uses a width that is intrinsic to the width or height of the image slice.

border-image-outset

The border-image-outset specifies the amount by which the border area extends outside the border box

It’s values can be a length or number and the same 4th being absent, etc applies. Once again no negative numbers can be used.

Even if the outset is set to increase the apparent size of the border box, that expanded area doesn’t trigger things like scrolling or mouse events. The area is there for the border-image, but nothing else.

border-image-repeat

The border-image-repeat property sets how the border images for the sides and middle are sized and scaled and has the following values and definitions

• stretch — the image is stretched to fill the area (default)
• repeat — the image is tiled to fill the area
• round — the image is tiled to fill the area with a whole number of images and then rescaled to fill the area remaining
• space — the image is tiled to fill the area with a whole number of images and then space is evenly distributed around the images

Two values should be given, the first for the horizontal and the second for the vertical. If the second isn’t given it’s considered the same as the first.

border-image Drawing Process

The above properties aren’t difficult to understand, but reading through them you may still be thinking, huh? How exactly did that border-image we started with end up looking like the border in the image on the right?

That’s how I felt too reading through the spec. Hopefully the drawing process below helps clarify things a bit.

After the border image (source) is sliced into 9 parts, the resulting nine images are scaled, positioned and tiled into their corresponding regions in 4 steps.

1. Scale to border-image-width — For the top and bottom images the height is set according to the image-slice and then the width is scaled. For the left and right images the width is set and then the height scaled. The corners are scaled to match both the horizontal and the vertical. The middle image is finally scaled to match the top and left images.
2. Scale to border-image-repeat — The top middle and bottom images are the ones that repeat and they are further scaled according to the rules of the value set — stretch, repeat, round, or space.
3. Position the first tile — If repeat is used, the images are centered and then scaled — top, middle, bottom and then left, middle, right. Otherwise the images are placed along the top or left edge
4. Tile and draw — The images are lastly tiled to fill their respective areas. All images are drawn at the same stacking level as normal borders, which is immediately in front of the background. If space was set for background-repeat, partial tiles are discarded and extra space is distributed before, after, and between tiles.

The basic idea again is the border image area and the border image are each divided into 9 parts — 4 corners, 4 edges, and a middle. The size of these parts are determined by the border-image-slice and border-image-width and border-image-outset properties.

The 9 image parts are then placed into the 9 regions of the border image area according to one of several border-image-repeat algorithms.

Using jQuery Nora Brown set up a nice demo to show how border-images work. Play around with the demo if the above isn’t making complete sense to get a better feeling for how it all works and ties together.

border-image Shorthand

Of course all of the above properties can be shorthanded as follows:

<border-image-source> | <border-image-slice> [ / <border-image-width>? [ / <border-image-outset> ]? ]? | <border-image-repeat>

div {
  border-image: url("path-to-image") 20 40 20 40 / 10 20 10 20 / 10 space;
}

Anything omitted is set to its default.

You’re more likely not to set the outset and keep the slice and width the same so:

div {
  border-image: url("path-to-image") 20% repeat;
}

If you’re going to play with border-images you’ll have to use the shorthand. No browser currently supports the individual properties. The usual players should support the shorthand though. All except IE, which is only introducing support in IE10.

Miscellaneous Properties

There are two more properties in regards to boxes that are covered under the css backgrounds and borders module.

• box-decoration-break
• box-shadow

box-decoration-break

The box-decoration-break property sets how to treat boxes that are broken by a page break, a column break, or a line break for inline elements.

It’s used to determine whether to treat the box as broken pieces or continuous and whether each box is wrapped individually with padding and border. It also defines how the background-positioning area is set

The following 2 values can be used:

• clone — each box is individually wrapped with padding, border, border-radius, border-image, and box-shadow. Clone treats the boxes as two individual boxes.
• slice — no individual wrapping of padding and border. The box is considered to be a single box that’s been sliced in two. Padding and border are applied as though the box wasn’t split.

Slice is the default value and probably better indicates that the box is the same from page to page, etc.

p {
  box-decoration-break: clone;
}

As far as I could find, there’s not much browser support yet, though Opera seems to be supporting box-decoration-break.

box-shadow

As you would guess box-shadow adds a shadow to the box, something we previously had to use images to do.

It’s values are a comma-separated list of shadows, each specified by 2–4 length values, an optional color, and an optional ‘inset’ keyword.

<shadow> = inset? && [ <length>{2,4} && <color>? ]

These values represent the horizontal offset, vertical offset, blur radius, spread distance, color, and the optional inset.

.shadow {
  box-shadow: 5px 5px 10px #999;
}

Inset changes the shadow from a drop shadow to an outer shadow and can be used to create some interesting effects. A drop shadow moves an element above the page, while an outer shadow makes an element recede into page.

With spread positive values expand the shadow and negative values contract the shadow. With blur the larger the value the greater the blur.

The shadow shape matches the shape creates by the border-radius, but a border-image has no effect on box shadow.

As is usually the case when talking browser support, the box-shadow property is supported in modern browsers including IE9, but won’t work in IE8 and below.

Summary

Being able to use an image for an element’s border is something you probably agree is nice to be able to do. If you’ve been following along with this post you’ll have noted browser supported isn’t quite what it could be.

However outside of IE8 and below the shorthand should work so you can play with border-images now. And since the fallback is the ordinary border-styles you’d have to use anyway you really should be fine using border-images in any browser, especially as a border image shouldn’t be conveying any essential information.

How border images are drawn may be a little confusing at first, but hopefully this post has helped clear up any confusion you might have had. Hopefully it hasn’t created more confusion.

As I’ve been asking in some of the other css3 posts, have you used border-image in your work and if so how have you found it?

In this post I’ll look at the basic css border and then move into rounded corners with border-radius. Next time I’ll take an in-depth look at working with border-images.

CSS Border

As I said above I’m sure you’re familiar with using css borders. I’m also going to guess there are a few finer points with them that you may not know.

You may get tired of me talking about boxes all the time, but let me refer to the box model once again. Borders are the area between padding and margin. Margins are outside of borders and paddings are inside, but you already knew that.

Borders apply to all html elements except tables when the table’s border-collapse property has been set to collapse.

border-color

As the name implies the border-color sets a color for the border. You can apply any color using an acceptable color name, hexadecimal notation, rgb, or rgba notation.

border-color is actually a shorthand for 4 properties, border-top-color, border-right-color, border-bottom-color, border-left-color.

Most of the time you’re going to set the same color and use the shorthand, but you can achieve some interesting shapes and effects by varying the color along with some other properties.

border-style

You probably use the same 2 or 3 border-styles all the time. Solid most often and perhaps dotted and dashed at times. There are several other values you can use, though.

The border style can be set to none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset

Different browsers will represent these styles somewhat differently. A border-style of ridge won’t look exactly the same in Safari or Chrome as it does in Firefox or IE, but the general characteristics will be the same.

The image above shows what each of these styles should look like approximately, but play with them in different browsers to see how they actually appear.

Like border-color, border-style is also shorthand. You can set each side with border-top-style, etc.

border-width

border-width is, of course, about sizing the width of the border. Allowable values are.

• length (px, em)
• thin
• medium
• thick
• inherit

Generally you’ll set the length since thin, medium, and thick are determined by the browser. They will remain consistent in a document, but otherwise their size is out of your control.

And as with the other two properties above border-width is shorthand for border-top-width, etc.

Border Shorthand

Speaking of shorthand, we can use one shorthand of all 3 of the properties above.

{code type=css}
div {
border-width border-style color;
}

div {
border: 1px solid red;
}
{code}

You don’t need to use all three properties in the shorthand. I often find I want to add top and bottom or left and right borders, but not the other.

{code type=css}
div {
border: solid red;
border-width: 1px 0;
}
{code}

Rounded Corners

In css every element is a rectangular box. There’s no way around it. Curves are nice though, and for years developers had to use images to show curves on web pages.

The border-radius property changed that.

border-radius

At its simplest you set a border-radius by giving it a single value as either a length or %

{code type=css}
div {
border-radius: 10px;
}
{code}

The 10px represents the radius of a circle at each corner and the corner is drawn as an arc of this circle instead of as a 90 degree corner.

The above is shorthand for:

{code type=css}
div {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
{code}

There’s more though. Each corner can have both a horizontal and vertical radius. You show these two values with a slash. The values before the slash are the horizontal values and those after the slash are vertical.

{code type=css}
div {
border-top-left-radius: 10px / 2%;
}
{code}

Putting things back together in the shorthand you get

{code type=css}
div {
border-radius: 10px 5px 15px 10px / 5px 10px 15px 20px;
}
{code}

The corners follow a clockwise top-left, top-right, bottom-right, bottom-left order. If the bottom-left value is omitted it’s the same as the top-right and if the bottom-right is omitted it’s the same as the top-left. The opposite corner in both cases.

The border-radius property has pretty good support in modern browsers, though it won’t work in IE8 or below. Until recently you needed to use vendor specific prefixes, but that’s no longer the case in the latest browsers including IE9.

For IE8 and below I find jQuery offers a nice solution that works similarly to the css. You can see it demonstrated here. The demo links to the jQuery plugin it relies on.

Corner Shaping

The resulting shape of the corner can vary based on both the border radius and the border width.

It’s easiest to see in the image above, which is the effect of a a rounded corner connecting two borders of unequal thickness (left) and the effect of a rounded corner on two borders that are thicker than the radius of the corner (right).

This happens because the radius of the padding edge (inner border) is the radius of the outer border minus the corresponding border thickness, which can result in a negative or positive value as well as a value of 0.

Corner Clipping

Last week I talked about the background-clipping property. The background, though not a border-image (which we’ll get to next week) are clipped to the curve of the border-radius.

Other things such as the overflow property are also clipped to the curve and mouse events don’t occur outside the curve.

The element is still a rectangular shape, but many things can’t happen in the small area between the curve and 90 degree corner that’s no longer seen.

Color and Style Transitions

When the borders meeting at a corner have different properties set (color, radius, etc) a transition has to occur.

Again this is probably easiest to see in the image above, which shows several different rounded corners and the area over which a transition will exist.

I won’t attempt to explain the math involved because I have no idea what it is.

The important thing to know is that this transition exists and that we can probably have some fun playing around with different values and see what happens.

Overlapping Curves

Corner curves can’t overlap. If the radii of two adjacent corners exceeds the size of the border box, browsers will proportionally reduce the values until they no longer overlap.

The values may be further reduced if they interfere with things like scrollbars as well.

Again I’ll spare you the complicated algorithm, though you’re welcome to check for yourself if you’re interested in the math.

The Effect of border-radius on Tables

The border-radius properties do apply to tables or inline-tables, though potentially may not if the border-collapse of the table is set to collapse.

The effect of border-radius on inline elements is undefined. There may be a definition in the future, but for now your guess is as good as anyone’s as to what will happen.

Perhaps it’s best not to use the border-radius properties on tables at the moment.

Summary

Much of the above was probably familiar to you. We’ve all been using borders for years and for the last few I’m sure the border-radius has entered the work of many of you.

While most of what’s included in this post seems simple on the surface there’s quite a bit you can do with borders if you experiment, especially if you play around with the height and width of the content box.

You can create some interesting shapes with css borders and with the addition of some pseudo elements you can create some rather complex shapes

Hopefully I’ve been able to introduce you to a few new things or perhaps clear up something that hasn’t been obvious. Play around with css borders and see what you can do.

I’d like to run through the different background properties css3 offers us. Some of what follows I’m sure will be familiar to you. Some will probably be new. Hopefully this post will give you a greater understanding of a property you use all the time.

Note: As mentioned in the comments below support for some of what’s in this post is less than I originally thought.

The space and round values don’t appear to be working (outside of Opera) for the background-repeat property and issues have been reported with background-position. My apologies for not being aware of these limitations earlier.

CSS Background

The first thing to understand is what does css consider as background and we’ll turn to the css box model with its content, padding, border, and margin for an answer.

Everything except margins is considered background, though we’ll see in a bit that css3 allows us to alter this background painting area to some degree,

Backgrounds can be transparent (the default), filled with color, or filled with images. Different properties determine which is used and in the case of images further properties are used to determine how the images are sized, positioned, and more.

In practice you’ll often use the background shorthand to set all these properties, but let’s look at them individually. I’ll come back to the shorthand later in this post.

background-color

I’m sure you’ve set a css background color before. For those who’ve never used it here’s one way you’d set a background color on paragraphs.

p {background-color: red;}

You can also use hexadecimal or rgb notation instead.

p {background-color: #f00;}
p {background-color: #ff0000;}
p {background-color: rgb(255, 0, 0;)}

All 3 lines of css above are equivalent and set a red background on the paragraph.

One last way to specify a background-color is rgba. The “a” stands for alpha transparency and is set as a fraction between 0 and 1, with 0 being fully transparent and 1 being fully opaque.

p {background-color: rgba(255, 0, 0, 0.5);}

The above sets the background to the same red as before, though at 50% opacity. Browser support for rgba isn’t as good as rgb, but the fallback is generally to present the color as completely opaque or with an “a” of 1.0.

The one thing you might not be familiar with is that the background-color will be clipped according to the background-clip property.

We’ll get to this property shortly, but for now know it’s a way to prevent color from appearing behind the border of your element or even behind the element’s padding.

background-image

I’m sure you’ve also set a background-image before. What’s nice is that in css3 we can add multiple images like so:

body {background-image: url("image1"), url("image2"), url("image3")}

The above adds 3 background images to the body of a document.

Each image creates a new background layer so the images sit one on top of another. A value of none, an image with 0 width and height, or an image that fails to download still creates a new layer, though one that doesn’t show an image.

The first image in the list is seen as being closest to the viewer and each successive image is one layer further into the background. If a background color is also specified, it’s painted below all images and is furthest from the viewer.

There are two important guidelines you should follow when setting background-images.

• Specify a background-color along with background-image(s) to preserve contrast for text if the images(s) don’t display.
• Don’t use background-images to convey important information as they may not display in all browsers.

Background images will be sized, positioned, and tiled according properties we’ll cover momentarily.

With multiple images the values of these other properties will also be a comma separated list and the first value will correspond to the first image, etc.

If there are excess values at the end of these other properties, they’ll be ignored and if there are not enough the given values are repeated until there are enough to match the images.

Browser support for multiple background images is good in all browsers, except for Internet Explorer 8 and below.

background-repeat

Background-repeat determines how background-images are tiled and has the allowed values of no-repeat, repeat-x, repeat-y, repeat, space, and round.

• no-repeat — the image isn’t tiled
• repeat-x — the image tiles horizontally only
• repeat-y — the image tiles vertically only
• repeat — the image tiles both horizontally and vertically
• space — the image will tile to fill the background with as many complete images as possible. The images wil then be spaced evenly with first and last images touching the edge
• round — image will be tiled to fill the background with as many complete images as possible. The images will then be scaled to fit the area exactly.

You’ve no doubt used all of the first 4 values above, but how many of you were aware of the last 2. I know I wasn’t.

body {
  background-repeat: no-repeat, repeat-y, space;
}

Assuming the 3 background images from above the first wouldn’t be repeated, the second would be repeated vertically, and the last would use the space algorithm to repeat the images both horizontally and vertically.

background-attachment

The background-attachment property determines how the image scrolls with respect to the viewport. It has the 3 values below

• fixed — the image doesn’t scroll. It’s fixed where it is.
• local — the image scrolls with the element’s content. It’s fixed to the content.
• scroll — the image scrolls with element. It’s fixed to element.

body {
  background-attachment: fixed;
}

The above keeps the background-image fixed in place with respect to the body.

I can’t think of a single time I’ve ever set the background-attachment to local. Most of the time I leave it as the default (scroll), but sometimes fixing the image can make for an interesting effect.

background-position

By default background images are painted at the top-left corner of an element, but they don’t have to be. You can change where they’re positioned through the background-position property.

The background-position can be set horizontally, vertically, or both. Horizontally you can use the values center, left, and right. Vertically you can use the values center, top, and bottom. In both directions you can set a % or length.

body {
  background-position: right 20px;
}

The above positions the image 20px down along the right edge of the element.

When 2 values are set the first is assumed to be the horizontal and the second vertical, unless the keywords say otherwise. When only one is set the second is assumed to be center.

% and length represent an offset from the top-left corner, however if 3 or 4 values are given then % or length is offset from keyword

body {
  background-position: bottom 10px right 20%;
}

The above paints the image 10px from bottom and 20% from right.

CSS3 Background Properties

Outside of the ability to use multiple background images all of the above have been available for awhile. Below are some new background properties specific to css3.

They work in most browsers, however they won’t work in IE8 or below.

background-clip

Earlier in this post I mentioned that the background was everything in the element’s box except for the margins. This and the next property can alter that.

The background-clip property determines where a background is clipped, which determines the background painting area. It has the following values

• border-box — painted within (clipped to) border
• padding-box — painted within (clipped to) padding
• content-box — painted within (clipped to) content

body {
  background-clip: content-box;
}

The above clips the image or color so it only displays behind the content part of the element’s box. The color or image will not show behind the element’s padding or border.

This is another property I can’t claim to have used, but having learned of it I can think of times when I would want to.

background-origin

Similar is the background-origin property, which sets the origin for the background-position property. It’s values are the same as background-clip.

• border-box — positioned relative to border box
• padding-box — positioned relative to padding box
• content-box — positioned relative to content box

body {
  background-origin: padding-box;
}

Above the image or color would start inside the body border and behind any padding on the body.

Note that if the background-attachment is fixed then background-position has no effect.

background-size

The last property we can set on backgrounds is background-size. While images will be whatever size they are by default (the auto value) you can control the image size in several ways.

The obvious values are the usual % and length.

body {
  background-size: 300px 40%;
}

The first value is the width and the second the height. Negative values are not permitted.

If only one value is given, the second is assumed to be auto. When one value or both are set to auto the image size is resolved using the images aspect ratio or failing that 100%.

There are 2 other values that control how the image might be sized.

• contain — scales the image while preserving its aspect ratio to the largest size that both height and width can still fit within the background area
• cover — scales the image while preserving its aspect ratio to the smallest size that both height and width can still fit within the background area

If neither width or height is specified then the image is sized based on the contain method above.

Background Property Shorthand

While you might set the above background properties individually, most of the time you’ll likely use the shorthand. In the past I’ve always placed the color first, the image second, and then any other properties after without thinking much to their order.

It’s always seemed to work, but it’s incorrect. The W3C specifies the following order.

• <bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2}
• <final-bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2} || <background-color>

background-image background-position / background-size background-repeat background-attachment background-origin background-clip color;

Color can only be used on the final background layer. A single background image is of course the final background layer.

body {background: url("image.png") top left / 95% 95% no-repeat scroll padding-box content-box #333;}

The above is equivalent to:

body {
  background-image: url("image.png");
  background-position: top left;
  background-size: 95% 95%;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-origin: padding-box;
  background-clip: content-box;
  background-color: #333};
}

You don’t have to specify a value for every property in the shorthand. To use the shorthand on multiple images you would separate each set of values by a comma, remembering only to use a color on the last set of values.

Summary

CSS backgrounds are something you no doubt use on every site. However you may not have been familiar with each of the different background properties available or some of the values for the properties you do know.

While much of the time you’ll happily let defaults reign with most of these properties, a few give you some nice control over how and where your background images display.

Browsers support is generally good for multiple images and the three new properties, origin, clip, and size, but do know that IE8 and below won’t support them.

That may or may not be an issue depending on which browsers you need to support and how you’re using these properties.

Hopefully this post has given you a greater understanding of a property you likely know well. Have you used any of the new properties or worked with multiple background images yet? If so how have you used them and how have they worked for you?

Once again I want to thank Pedro for emailing me the idea to talk about css tables. I hope I cover what you’re interested in knowing.

Let’s get to the how of css tables first and then tackle the question of whether or not you’d want to use them in practice.

How to Create CSS Tables

The css table model is based on the html4 table model and has pretty good browser support. In both table models the table structure parallels the visual display of the table itself.

Rows are primary. The row is specified explicitly and columns are derived from how the rows and cells are set up.

I’m sure you’ve worked with html tables before and if you have you shouldn’t have any problem creating css tables.

Each html table element has an equivalent css display value. The only real difference is that there’s no distinction between td and th with the css variety.

Below are the html table elements and their corresponding css display value.

table     { display: table }
tr        { display: table-row }
thead     { display: table-header-group }
tbody     { display: table-row-group }
tfoot     { display: table-footer-group }
col       { display: table-column }
colgroup  { display: table-column-group }
td, th    { display: table-cell }
caption   { display: table-caption }

Captions can be positioned above or below the table with the caption-side property

#caption {caption-side: top}
#caption {caption-side: bottom}

Looking at the above it shouldn’t be too hard to figure out how to set up a css table. Here’s a simple example.

<div id="table">
  <div class="row">
    <span class="cell"></span>
    <span class="cell"></span>
     <span class="cell"></span>
  </div>
  <div class="row">
    <span class="cell"></span>
    <span class="cell"></span>
     <span class="cell"></span>
  </div>
  <div class="row">
    <span class="cell"></span>
    <span class="cell"></span>
     <span class="cell"></span>
  </div>
</div>

#table {display: table;}
.row {display: table-row;}
.cell {display: table-cell;}

If you look only at the html above you can easily see the basic table structure except that I’ve used div and span with ids and classes instead of table, tr, and td.

A relatively small amount of css then presents the divs and spans as the familiar table, table row, and table cell.

In addition to the above the css table model includes an inline-table value, which defines a new table the same as display: table, but does so according to the inline formatting context.

Columns and Column-Groups

While tables cells are always descendants of table rows it makes sense to set some properties on columns. The css table model allows for the following on columns and column-groups

• border — The usual properties as long as border-collapse has been set to collapse on the table element
• background — The usual properties as long as both row and cell have background set to transparent
• width — Sets a max-width on the column
• visibility — If set to collapse (the only available value) then column cells don’t display, cells spanning into other columns are clipped, and width of the table is adjusted

CSS Table Stacking Context

Different table elements have different stacking contexts for the purpose of adding backgrounds to these different layers.

These layers can be seen in the image below.

1. table – lowest layer
2. column group
3. columns
4. row group
5. rows
6. cells – highest layer

The background of any layer will only be seen if all the layers above it have backgrounds set to transparent.

This can be a nice way to show an empty cell is truly empty by having its background be transparent and letting the background of the row, column, or table show through.

Table Layout Algorithm

The width of css tables can be calculated using one of two algorithms. This can be controlled through the table-layout property and the 2 values below.

• fixed — The width of the layout is not determined by its content, but rather by the widths set on the table, cells, borders, and/or cell spacing
• auto — The width of table is set by width of columns and borders

The important thing to consider is that a fixed table-layout is a one-pass calculation and very quick. On the other hand auto requires the same multiple passes of html tables. It’s also the default value.

If you explicitly set a width on the table then the fixed table layout algorithm will be used.

By default the cell height will be the minimum necessary to display the contents of the cell, but you can also explicitly set heights. All cells in a row will be the height of the cell with the maximum minimum necessary height.

The vertical-align property of each table cell determines the cell’s alignment within the row

• baseline
• top
• bottom
• middle
• sub, super, text-top, text-bottom, <length>, <percentage>

The last group of values do not apply to cells, but the text within the cells. The cell is aligned at the baseline instead.

CSS Table Borders

There are 3 interesting properties for table borders

• border-collapse — values can be collapse, separate, or inherit
• border-spacing — values can be <length> (horizontal), <length> (vertical), or inherit. border-spacing is the distance between cell borders.
• empty-cells — values can be show, hide, or inherit. If cells are empty or set to visibility: hidden content doesn’t show by default. Setting empty-cells: show on the table will cause backgrounds and borders to display for the empty cell.

Should You Use CSS Tables?

Are css tables better than html tables? If so what advantages do they have and if not why should we use them at all? Good questions that I don’t have great answers for.

I can say I’ve never used a css table in practice and have no intention of using them any time soon. If a page calls for tabular content it strikes me than an html table is called for and I think we have and will have better techniques for site layout than css tables.

I took a look at an older post I wrote on css vs tables to remind myself of the cons for using html tables for layout over a combination of divs and css.

• Extra code — html tables require more structural code than divs, but css tables use just as much. If anything css tables use more since ids and classes will likely be added. If html tables use too much code then css tables do too.
• Rigid structure — html tables are source dependent. The order you structure the cells is the same order in which they’ll display. The same is essentially true of css tables as well.
• Browser rendering — browsers require multiple passes at the structure of html tables. They should only require one pass to display a css table if the table-layout is set to fixed. They’ll require the same multiple passes if set to auto.

Considering the above css tables aren’t offering enough benefit over html tables to use them for layout.

We could reach and suggest that since the css can be easily changed a css table is less rigid than an html table, but in practice I think they’re going to be just as rigid.

CSS tables do have the advantage of being more semantically correct as we can choose html elements that better describe our content.

Overall it’s hard for me to see much improvement in css tables over html tables, some perhaps, but not enough to justify to myself using them.

I think some of the other css layout modules on the horizon will be better and even our current practice of using floats and positioning for layout are still a better option.

At the same time I can’t say I’ve worked much with css tables. This post is the most time I’ve spend with them since they’ve been introduced and I’m open to someone else’s reasons for why we should use them.

I have a hunch they’ll remain in use to solve some specific problems like vertically centering content or cleverly switching the display order of different elements in a responsive design.

They may also prove to be a good pattern for navigation. I don’t see them being a viable solution to the problem of layouts though.

Summary

CSS tables are pretty simple to understand and use. It’s mostly a matter of remembering the corresponding css display property values for the basic html table elements.

table becomes display: table. td becomes display: table-cell, etc.

There are some nice features of css tables like the ability to collapse one or more columns through the visibility: collapse property and they can be used as solutions to some specific problems.

However they don’t provide enough advantage for me over html tables when it comes to layout. Their advantages seem minor and a bit of a reach. Ultimately I think we have better layout solutions than both html and css tables.

Again though I’m open to being convinced otherwise.

Have you used css tables in practice? If so how? Have you used them for site layout? To present tabular data? To solve a specific problem?

For now I want to look at all the other values for display. There’s more than you might realize.

The CSS Display Property

You probably don’t set the display property all that often and yet you use it all the time.

All elements have a default display and most of the time that default is exactly what you want. In fact when you choose to use a div, it’s mainly because of it’s default display value of block.

Let’s take a look at some of the values display can take. Again I’ll leave the table values until next week.

• block
• inline
• inline-block
• list-item
• none
• inherit

There are a few other values, which we’ll get to later in this post, but above are the basics.

I’m sure they’re all familiar to you and yet they deserve a little more explorations, particularly in the differences between block and inline boxes.

Block and Inline Formatting Contexts

Block level elements are laid out according to the box model, where each block has a width and height, as well as vertical and horizontal padding, border, and margin. Blocks are displayed vertically one after the other, with the distance between them depending on the margins set.

Vertical margins collapse. If one box has a margin-bottom of 30px and the other has a margin-top of 20px, there isn’t 50px of space between them. The margins collapse to the larger value so there would only be 30px of space between the blocks.

Inline elements are displayed horizontally and don’t follow the box model. Horizontally their padding and margin is respected, but not so vertically. The heights of inline boxes are set according to the rules of line-height calculations. For the most part that will mean the height of the containing block.

The are 2 key differences between block and inline boxes.

1. Block elements are laid out vertically while inline elements are laid out horizontally
2. Block elements form a new box according to the box model, while inline elements don’t

Inline-block elements are a combination of the two. They act like inline boxes on the outside, being laid out horizontally, but they’re block level boxes on the inside. They do form a new box and have vertical paddings and margins.

List-items behave like block level elements with the addition of an extra box (the marker box) used to place a marker. Ordered and unordered lists are one containing block level box with several block and market box combinations inside.

When the value of display is set to none, no box of any kind is created. The element has effectively been removed from the document flow and other elements behave as though it doesn’t exist.

Inherit naturally means to use the same value as set on the parent element.

I realize these are simple concepts, but they do sit at the foundation of so many other things where css layouts are concerned.

For example floating a block level element changes it from being laid out vertically to horizontally. Positioning the same box has other elements treating it as though its display was set to none, while the box treats itself as the same block level element it’s always been.

Other Display Values

I mentioned above there are more values for display. Some are seldom used and others while not used much now, likely will in the future.

• run-in
• flexbox
• grid
• templates (display: abc) — there’s no value templates, rather the template module allows for a variety of different values
• ruby

I’ve covered flexbox previously and will point you there for details. I’d like to cover both grids and templates in future posts so I’ll save more details for those posts. I hope you don’t mind.

Today I’ll briefly touch on run-in and ruby.

Run-in Boxes

The W3C gives the following rules for run-in boxes.

• If the run-in box contains a block box, the run-in box becomes a block box.
• If a sibling block box (that does not float and is not absolutely positioned) follows the run-in box, the run-in box becomes the first inline box of the block box. A run-in cannot run in to a block that already starts with a run-in or that itself is a run-in.
• Otherwise, the run-in box becomes a block box.

Chris Coyier does a better job of explaining why you’d actually use display: run-in.

It’s essentially a way to get page headings to sit inline with the text that follows them. Floating the headings or setting them to display: inline won’t work.

Browser support is growing for run-in, but it’s still not what you’d call great.

The CSS Ruby Model

Ruby is the commonly used name for a run of text that appears in the immediate vicinity of another run of text. One of these runs of text is considered the base and the other the text. The base serves as an annotation and pronunciation guide for the text.

If after reading the above you said “huh?” to yourself then you did what I did when reading about ruby in the spec.

It mainly applies to East Asian languages and East Asian typography and I won’t pretend to know much about either.

An element set to display as ruby has it’s own ruby box model and there are actually several ruby display properties.

• ruby
• ruby-base
• ruby-text
• ruby-base-container
• ruby-text-container

I’m going to guess most of you won’t encounter display: ruby beyond this post and instead of trying to present more details I’ll just point you again to the W3C ruby spec if you’re interested in knowing more.

Summary

Every element behaves according to one of the display property values. Most elements will either display as either block or inline. List items naturally default to list-item. Odds are you don’t set the display property all that often and generally fine with the defaults.

I realize this post is probably rather basic for many of you. Hopefully it helped clear up something about the difference between block and inline boxes or introduced you to a new display value you’d like to explore.

Next week I’ll take a look at the display values we didn’t talk about today, namely those values that are associated with the css table module.

Here are the 3 css selector posts in case you missed any.

• Do You Use These 7 Attribute Selectors In Your CSS?
• How To Use CSS Combinators and Simple Pseudo Class Selectors
• How To Use Structural Pseudo Classes and Pseudo Element Selectors

One thing I should say at the outset is that for most of us what follows probably isn’t going to significantly affect anything on our sites. I’ll talk more about this later in the post, but please know you aren’t likely to see large savings in performance from optimizing your selectors.

How Do Browsers Read Selectors?

This entire discussion is based on how browsers read selectors in order to identify which html gets styled and the key is that browsers will read your selector from right to left.

div.nav > ul li a[title]

A browser seeing the above selector will first try to match a[title] in the html, and then proceed to the left matching li, ul, and finally div.nav.

This last part of the selector (in this case a[title]) is called the “key selector” and it’s ultimately what will determine how efficient your selector will be.

The sooner browsers can filter out a mismatch, the less they have to check and, the more efficient the selector. David Hyatt writing about selector performance for Mozilla tells us:

This is the key to dramatically increasing performance. The fewer rules required to check for a given element, the faster style resolution will be.

Since a selector that fails is more efficient than if the same selector matches we want to optimize key selectors to fail. The more specific the key selector, the quicker the browser find mismatches.

So which type of selector is most and least efficient?

Selector Efficiency

Below is the order of efficiency for selectors. IDs are the most efficient and pseudo classes and pseudo elements are the least efficient.

1. id (#myid)
2. class (.myclass)
3. tag (div, h1, p)
4. adjacent sibling (h1 + p)
5. child (ul > li)
6. descendent (li a)
7. universal (*)
8. attribute (a[rel="external"])
9. pseudo-class and pseudo element (a:hover, li:first)

Looking at the above list we’d prefer our key selector to be an id or class than a child or descendent selector. CSS3 selectors like pseudo-classes and attributes are very useful, but also the most inefficient.

div #myid

will be more efficient than

#myid div

because the key selector of the first is more efficient than the key selector of the second.

Adding tags in front of ids and classes also slows thing down and makes the selector less efficient so

#myid
.myclass

are more efficient than

p#myid
p.myclass

Guidelines from Mozilla

In David’s article he offered some guidelines for writing efficient css selectors, which I’ll present below.

• Avoid Universal Rules
• Don’t qualify ID Rules with tag names or classes
• Don’t qualify Class Rules with tag names
• Use the most specific category possible
• Avoid the descendant selector
• Tag Category rules should never contain a child selector
• Question all usages of the child selector
• Rely on inheritance
• Use scoped stylesheets

You can read his original article for more details. It’s a quick read. It is also over 10 years old. Not that its age invalidates any of the information. Browsers still match selectors from right to left after all.

However a few details like saying descendant selectors are the least efficient should be updated, as there now exist new and less efficient selectors that didn’t exist when the article was written.

Does it Matter?

This is all well and good, but does any of it matter? Should you rewrite existing stylesheets to make your selectors more efficient? If ids are the most efficient selector should you start adding ids to every html element in your document?

Probably not. For one there’s a balance between writing semantic code and writing code for improved performance. There are advantages to both semantics and performance and we shouldn’t choose one entirely over the other.

Second selector efficiency and inefficiency probably isn’t going to impact most sites all that much.

We’re not talking a difference of several seconds from most to least efficient. We’re talking about milliseconds in the worst case. For the majority of sites you aren’t going to notice a difference and the effort likely outweighs the savings.

That said a large site that generates a lot of traffic probably will see a difference and it might very well be worth the effort to optimize selectors.

It also makes sense to understand how this works and be more efficient in general For example knowing that

#myid

is more efficient than

p#myid

why would you add the tag in front?

I wouldn’t make my html less semantic or clutter it with extra code to save a few milliseconds, but I would change

ul#nav li a

to

#nav a

as a matter of practice, since the second is faster and requires no change to the html.

Are you going to notice the difference on most of the sites you develop? Again not likely, but still why wouldn’t you choose to be more efficient where you can?

I wouldn’t take this information and start recoding live sites to make them more efficient, but why not take a few minutes to learn which selector patterns perform better and use the more efficient patterns when you have the choice to use several.

Testing Your Selectors

Steve Souders created a page where you can test different selectors to compare their efficiency. I’ve played with it a little ad the results agree with what I’ve posted above.

• CSS Test Creator

I don’t know how accurate the test results are, but it’s worth playing around to get a feel for how quickly some selectors are in comparison to others.

Jon Sykes ran some tests of his own a few years ago mainly to look at the effect of descendent selectors on performance.

• Testing CSS Performance
• Testing CSS Performance (pt 2)
• More CSS Performance Testing (pt 3)

His conclusion at the end of the series:

be aware that descender and child selectors can affect performance, but don’t worry about them so much as to not use them.

After seeing the tests above Steve Souders ran his own test coming to the conclusion that the gains from optimizing selectors are probably not worth the cost for most sites.

In a later post he received some feedback about web pages where inefficient selectors did make a noticeable difference and ultimately recommends optimizing the key selector of css selectors.

Summary

There’s definitely a performance hit in using some selector patterns over others, but how significant is that performance hit? The answer will depend on the specific site and selectors.

For most sites it probably won’t make much of a difference. You shouldn’t be concerned that the selectors you used developing your last site now need to be revisited and optimized.

However you may want to consider selector efficiency when developing your next site. At the very least it makes sense to understand which patterns are more and less efficient.

Every little bit helps so why not be more efficient where you can be and if you happen to be working on that large trafficked site those little bits can add up to significant savings.

Have you spent any time optimizing your css selectors? Have you noticed any difference in page load times and was it worth the effort?

Note: Once again a reminder that the numbers in parenthesis represent which level css the selector was introduced in.

Structural Pseudo-Classes

Structural pseudo-classes were introduced as a way to target html elements based on information in the document tree that aren’t easily represented by simple selectors or combinators. Most were introduced in css3.

You may already be using a few of these. If you aren’t you likely find yourself wanting to target the elements they select. Without them we generally have to add a class or id to the element we’re targeting.

E:root (3) — matches an element E that’s the root of the document. In html this is always the html element.

:root {background: blue;}
html {background: blue;}

The lines of css above are functionally equivalent. Perhaps not the most useful structural pseudo-class, but the easiest to explain.

E:nth-child(n) (3) — matches an element E that’s the nth child of its parent.

Assuming we have a table with a large number of rows.

tr:nth-child(4) {background: #ccc;}

The css above says to find the 4th row and give it a background color that’s a light gray.

A common use of the nth-child pseudo-class is coloring alternate rows of a table.

tr:nth-child(2n+1) {background: #ccc;}
tr:nth-child(2n) {background: #eee;}

2n+1 represents odd numbered rows and 2n represents even numbered rows. Special odd and even values can also be used.

tr:nth-child(odd) {background: #ccc;}
tr:nth-child(even) {background: #eee;}

You aren’t limited to 2 though. Any number can be used.

tr:nth-child(10n+1) {background: #ccc;}

Here the 11th, 21st, 31st, etc rows would be given a light gray background.

E:nth-last-child(n) (3) — matches an element E that’s the nth child of its parent, counting from the last child.

nth-last child works similarly to nth-child, except that the count starts from the last element in the list as opposed to the first. Again assuming a table with a large number of rows.

tr:nth-last-child(1) {background: #ccc;}

Here the last row is the one to get the background color.

tr:nth-last-child(4) {background: #ccc;}

Here the 4th last row gets the background color.

All the same values can be used

tr:nth-last-child(2n+1) {background: #ccc;}
tr:nth-last-child(2n) {background: #eee;}

tr:nth-last-child(odd) {background: #ccc;}
tr:nth-last-child(even) {background: #eee;}

Both of the above would result in all odd and even rows getting different background colors. While you probably wouldn’t use nth-last-child for these, you could.

More typical use of nth-last-child is to target a specific or few specific items at the end of the list.

:nth-of-type and :nth-last-of-type

The rest of the structural pseudo-classes are plays on the above two so if you understand how the above two work all you’ll need to understand the rest is how they differ.

E:nth-of-type(n) (3) — matches an element E that’s the nth sibling of its type

E:nth-last-of-type(n) (3) — matches an element E that’s the nth sibling of its type, counting from the last one

nth-of-type() and nth-last-of-type() work the same way nth-child() and nth-last-child() work, the difference being that what we’re targeting has to be a specific type of element as opposed to any child element.

You’d use the of-type classes when the parent of the element you’re targeting has different types of elements as children.

<div>
 <p></p>
< img src="" alt="" / >
 <p></p>
  <ul>
    <li></li>
    <li></li>
  </ul>
 <p></p>
</div>

p:nth-of-type(2) {font-size: 1.2em;}
p:nth-last-of-type(1) {font-size: 1.2em;}

I’m sure you can figure out which paragraphs are targeted by the css above Again we’re using the of-type pseudo-classes because the elements inside the div are of mixed type.

:first-child and :last-child

These two pseudo-classes are shortcuts for nth-child(1) and nth-last-child(1). Like the two nth classes these require all the children to be of the same type.

E:first-child (2) — matches an element E that’s the first child of its parent

E:last-child (3) — matches an element E that’s the last child of its parent

A common use is in navigation bars when you want to style either the first, last or both menu items in the list differently than those in the middle of the bar.

Often I’ll add a border between menu items in navigation bars by setting either a left or right border. However that necessitates either adding a border to one end or removing it from the other. li:last-child and li:first-child come in handy for this.

:first-of-type and :last-of-type

These two elements are the functional equivalent of nth-of-type(1) and nth-last-of-type(1). They work the same as first-child and last-child except that they only target an element of a specific type.

E:first-of-type (3) — matches an element E that’s first sibling of its type.

E:last-of-type (3) — matches an element E that’s last sibling of its type.

Styling the first of last paragraph inside a div, article, or section might be a common use for the first and last of-type classes.

only-child and only-of-type

These next two elements are again similar except that they only target elements with a single child.

E:only-child (3) — matches an element E that’s the only child of its parent.

E:only-of-type (3) — matches an element E that’s the only sibling of its type.

With only-child you’d have only the one element inside the parent. With only-of-type you could have multiple children, but only the one type of element you’re targeting.

:empty

E:empty (3) — matches an element E that has no children (including text nodes)

:empty is a way to target empty tags. For example it wouldn’t match

<p>Some text</p>

It would match

<p></p>

Ideally you won’t leave any empty tags in your html so I’m not sure how useful this one is. Perhaps as a way to find and remove any empty tags you’ve accidentally left behind.

Pseudo Elements

There are some things we want to style in practice, but have no way at all to select based on information in the document tree.

Normally to select these items we’d have to add an element like a span and also give it some kind of class. Pseudo elements are a way to target these items.

We have 4 pseudo elements we can target

::first-line pseudo element

E::first-line (1) — matches the first formatted line of an element E.

p:first-line {text-transform: uppercase;}

The above changes the first line in all paragraphs to uppercase. Of course the first line of text can be somewhat dynamic if you’ve created a flexible layout and the browser width is varied.

::first-letter pseudo element

E::first-letter (1) — matches the first formatted letter of an element E.

Similar to first-line, first-letter styles only the first letter differently. An obvious use is to create drop caps.

<p class="intro">This is the first paragraph</p>

p.intro::first-letter {font-size:4em; font-weight:bold; color: #f00; float:left;}

::before and ::after pseudo elements

E::before (2) — matches generated content before an element E.

E::after (2) — matches generated content after an element E.

The ::before and ::after pseudo elements are ways to add content before or after an element. Common uses are to add a quote image before and after blockquotes or to use your own special bullet in front of a list.

<blockquote></blockquote>

blockquote::before {content: "‘"}
blockquote::after {content: "’"}

The above adds a single left quotation mark before the blockquote and a single right quotation mark after it.

While there will be times when you don’t specifically want to add any content you still need to include the content property with ::before and ::after. Leaving it blank is allowed, but it must be included.

blockquote::before {content: "";}

You can do quite a lot with these two pseudo elements as seen in the video above or this demo for building a css solar system.

Double or Single Colon?

One note about all 4 pseudo elements is their use of a double colon out front.

This is technically the correct syntax however browsers that accept pseudo elements also allow a single colon and the double colon doesn’t work in all browsers.

For practical purposes you’re better off using the single colon for now so:

• :first-letter
• :last-letter
• :before
• :after

Browser Support

Generally browser support for pseudo elements is better than the structural pseudo classes, though it varies some. The elements will work as far back as IE8 and with first-letter and first-line support goes back to IE5.5. Yep, you read that right.

Most of the structural pseudo classes don’t start working until IE9, though support for first-child goes back to IE6.

• CSS contents and browser compatibility
• pseudo elements support
• CSS3 Selectors Test

Summary

Like the other selectors we’ve covered you may have already used some of these in practice, while others may be completely new to you.

You’ll find more support for the pseudo elements than the structural pseudo classes, but you can likely find practical uses for most everything mentioned here.

I hope this walk through of css selectors has been useful and brought to light a few selectors you may not use or be familiar with. I know that’s been the case for me and hopefully these posts will serve as a reminder for both of our development practice.