Blog

All thoughts and opinions in my blog are my own and do not represent the position of my employer.

CSS3 transitions and z-index

This is just a reminder that you can apply transitions to an element’s z-index (aka, where it lays in the stack), but only by stepping through the layers. The browser has to keep z-index in whole numbers. This makes total sense, but it’s something I forgot about on a recent project.

I was working on an interface with overlapping elements, and I wanted whichever one was hovered to come to the front of the stack. I wanted this move to the front to look smoother, instead of one element just jumping out from behind another one suddenly. “Aha!” my brain said. “I will add a transition!” But my brain hadn’t thought this all the way through, and, of course, it didn’t work.

If you stop to think about it (which I eventually did), this makes perfect sense. If you want to take one element with z-index:1 and transition it to lay on top of another element with z-index:2, how in the world is the browser supposed to create intermediate steps between those two values? You can’t have an element with a z-index value of 1.5. An element can’t kinda overlap another element. Either it’s above or below. The browser can’t create some weird, merged together state where the two elements are on the same level and intermixing, both partially transparent on just the spots that are sharing the same level.*

What the browser can do is increment the z-index value in whole numbers over the course of your transition duration. So, if I have an element with a z-index value of 1 and I want to gradually get to 10, the browser can first set z-index to 2, then 3, then 4, and so on. If you have a short transition duration or a long way to go from your starting value to your ending value (like changing z-index from 1 to 1000), it will step through these changes very quickly.

Here’s a demo of z-index transitioning slowly so you can see how the browser increases the z-index value step by step; hover over the block labeled One to see it happen. Here are some screenshots of the same demo taken along the course of the transition.

The first div is naturally at the bottom of the stack.

The first div is naturally at the bottom of the stack (z-index: 1).

When hovered and the transition begins, it first jumps on top of the Two div.

When hovered and the transition begins, it first jumps completely on top of the Two div as it simultaneously becomes opaque.

Notice that it is never partly on top and partly below any given div. It's entirely above divs Two and Three here, and entirely below divs Four and Five.

Notice that it is never partly on top and partly below any given div. It’s entirely above divs Two and Three here, and entirely below divs Four and Five.

The transition is almost over now. It's worked it's way up to z-index 4 at this point.

The transition is almost over now. It’s worked it’s way up to z-index: 4 at this point.

By the end of the transition, it has z-index of 6 and is on top of all the other divs.

By the end of the transition, it has z-index: 6 and is on top of all the other divs.

So remember: z-index is indeed one of the properties you can apply a transition to, but the transition has to happen in full steps, not necessarily as gradually as you might imagine it in your head.

* If the elements you’re transitioning z-index on are partially transparent (using HSLA for the background color, for instance) to begin with, you can kind of fake this effect. But if you look closely, you can still see the moment the element swaps places with another in the stack. It’s just harder to notice.

Flexbox syntax for IE 10

Yesterday in my presentation on CSS3 Layout I talked about the different syntaxes that the Flexible Box Layout module (Flexbox) has gone through on its journey to candidate recommendation. As I said in my talk, IE 10 didn’t have time to update to the new syntax before it came out last fall, so it uses the syntax that first came out in 2011, with the -ms- prefix tacked on.

Fortunately, Flexbox basically works the same way between IE 10 and the current syntax; it just uses some different property and value names. To help you keep track of the differences, I quickly created this table today comparing the current, standard-to-be syntax with the 2011 syntax that IE uses. This is not meant to be some comprehensive, precise reference, just a quick and dirty cheat sheet, but hopefully it will be useful to you (and me) someday.

Current vs 2011 Flexbox Syntax
Current Syntax Differences in 2011 Syntax What It Does
flex and inline-flex values for display property flexbox and inline-flexbox values creates flex container
flex-direction property none specifies orientation of flex items’ layout (horizontally or vertically and upwards or downwards)
flex-wrap property none controls whether flex items can lay out on multiple lines or just one
flex-flow shorthand property none see flex-direction and flex-wrap properties above
order property flex-order property rearranges flex items’ spot in the visual layout order
flex-grow property doesn’t exist as separate property, equivalent to positive flexibility component of flex value specifies proportion of extra space to distribute to each flex item’s main dimension
flex-shrink property doesn’t exist as separate property, equivalent to negative flexibility component of flex value specifies proportion of overflowing size to subtract from each flex item’s main dimension
flex-basis property doesn’t exist as separate property, equivalent to preferred size component of flex value specifies starting size to use before adding or subtracting extra space
flex shorthand property same property name but portions of value are named positive flexibility, negative flexibility, and preferred size see flex-grow, flex-shrink, and flex-basis properties above
justify-content property with flex-start, flex-end, center, space-between, and space-around values flex-pack property with start, end, center, justify, and distribute values aligns flex items along the main axis (set with flex-direction) of the current line
align-content property with same values as justify-content plus stretch flex-line-pack property with same values as flex-pack plus stretch aligns lines of flex items (if multi-line) along the cross axis
align-items property with flex-start, flex-end, center, baseline, and stretch values flex-align property with start, end, center, baseline, and stretch values aligns flex items along the cross axis of the current line
align-self property with same values as align-items plus auto flex-item-align property with same values as flex-align plus auto overrides align-items on individual flex item in the current line

So does my creation of this table mean I’m recommending you feed IE 10 the 2011 syntax? Ehhhh….I don’t know.

I’m not going to tell you whether or not you should feed IE 10 the 2011 syntax, on that future day when you start using Flexbox on a live site. On the one hand, it sucks to write CSS that will never become a standard. On the other hand, this syntax is isolated to IE 10 and always will be, so it’s safe and stable. (This is assuming that IE 11 will update to the new syntax, which I don’t see why they wouldn’t.) So I’m undecided.

The bottom line is that we don’t have to make this decision right now because we’re not using Flexbox just yet. Let’s wait until Flexbox becomes production-ready before we decide which browsers to support and at what level.

Until then, play around with Flexbox, and remember that if you want to test out your experiments in IE 10, you’ll need to use the 2011 syntax prefixed with -ms-, and that’s what this is here for.

CSS3 Layout presentation at In Control Orlando

Today I spoke at In Control in Orlando on CSS3 Layout. For a decade we’ve been using floats for creating CSS layouts, and while they’re still the best choice for creating most multi-column designs, we’ve all been frustrated by their quirks and limitations. So in this presentation, I talked about some of the new and exciting CSS layout techniques that are either working right now, right around the corner, or a little ways down the road. I focused on how Grid Layout and Flexible Box Layout (aka Flexbox) will be able to be used in the future to create layouts, but also how to use Flexbox in practical ways as a progressive enhancement technique for the layouts you’re crafting today.

You can view the slides on SlideShare, or download the slides here:

CSS3 Layout (PDF, 2 mb)

CSS3 Layout Demos

I showed a few examples of how to use Grid Layout and Flexible Box Layout and wanted to share my demo files with you so you could poke around in the code  if you like. The last two demos have fallback CSS in place so that they still look fine in other browsers; it was not part of my presentation to do that with the first two demos.

Related resources

Here are several links to related resources, a few of which are in the slides plus many more that were not but which I recommend and think you’ll find useful.

The W3C CSS3 specs I covered

Flexible Box Layout

Grid Layout

Other CSS3 layout techniques

View more posts:

Archives by Category

  • Announcements (32)

    Learn what's happening in my career or industry, including information about my speaking engagements and books.

  • Articles (40)

    Informational or theoretical articles about a variety of web design topics, including CSS, HTML, accessibility, usability, and visual design.

  • Inspiration (8)

    Collections of images or links to others' design work that I find inspiring and think you will too.

  • Tutorials (5)

    Step-by-step articles that you can follow along with to learn a particular web design technique, including CSS layout and CSS3 effects.

Archives by Month