Making Chrome-like tab resize with pure css

Question

I am trying to create tabs that resize a bit similar to how Chrome tabs does. But I am not sure how and if it is even possible to do without JavaScript.

I don't care about browser support, I only want to see if it can be done with pure html and css/css3.

Here is the spec:

• The tabs are never wider than the text inside them
• When the right most tab reaches the right side of the window on resize, the tabs should start shrinking (ideal is that this happens to the widest tab first)
• the active tab should never shrink
• As the tabs shrink, the text should be hidden by ellipsis
• the tabs will stop at a min-width that I set (so they can't go to zero width).

Can this be made with something like display: box; and box-flex: 1; properties perhaps? I haven't managed to make it yet. I have already made it with JavaScript. But the performance is not as good as I want it to (this is a BIG wep app).

So, any CSS-Gods out there up for it? If there is a way to do it with very limited use of JavaScript, I am also interested.

Thanks all!

Answer 1

You can get pretty close to Chrome's actual behavior with the flexbox...

body {
  font: 12px/130% 'Lucida Sans', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; 
}

ul {
  background-color: #eee;
  display: -webkit-box;
  padding: 10px 10px 0 10px;
}


ul li {
  -webkit-box-flex: 1;
  background: #ddd;
  padding: 10px 15px 6px 15px;
  white-space: nowrap;
  overflow: hidden;
  max-width: 150px;
  min-width: 50px;
  border: solid #ccc 1px;
  border-bottom: none;
  border-radius: 5px 5px 0 0;
  text-overflow: ellipsis;  
}

http://jsfiddle.net/a656n/

​However, your specs are impossible in CSS only. I'd also suggest that keeping the active tab 'unshrunk' breaks conventions because your tabs will change position every time you click on them.

Answer 2

I improved on Duopixels anwer by using one extra <span> element and display: table-cell instead of the flexbox implementation. This way you achieve better cross-browser support/fallback. http://jsfiddle.net/w34nm/ (Tested in IE8+, Firefox 10, Chrome 17)

PS: you should probably use JavaScript to set the right width values on the list items