Resize Chrome-style contribution with pure css

Question

I'm trying to create tabs that resize a bit like Chrome tabs. But I'm not sure how and if you can do without JavaScript.

I do not need browser support, I just want to see if this can be done with pure html and css / css3.

Here is the specification:

• Tabs will never be wider than the text inside them
• When the right tab reaches the right side of the window when resizing, the tabs should start to shrink (ideally, this happens with the widest tab)
• active tab should never shrink
• As tabs shrink, the text should be hidden by an ellipse
• the tabs will stop with the minimum width that I set (so that they cannot go to zero width).

Can this be done with something like display: box; and box-flex: 1; perhaps properties? I have not succeeded yet. I have already done this using JavaScript. But the performance is not as good as I want (this is a BIG wep application).

So, are there any CSS gods out there for this? If there is a way to do this with very limited use of JavaScript, I am also interested.

Thanks everyone!

Answer 1

You can get closer to the actual behavior of Chrome with 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 specifications are not possible only in CSS. I also suggest that the active "unshrunk" tab break the conventions, because your tabs will change position every time you click on them.

Answer 2

I improved on Duopixels anwer using one additional <span> element and display: table-cell instead of implementing flexbox. This way you get better cross-browser support / reserve. http://jsfiddle.net/w34nm/ (tested in IE8 +, Firefox 10, Chrome 17)

PS: you probably should use javascript to set the correct widths in list items

Answer 3

Well, firstly, your desired functionality is not how the tabs work in Chrome, they just stay fixed in size until there is not enough space, and then they are compressed evenly to fit. (According to MDN , you can do the following:

To make XUL elements in the containing box the same size, set the containing equalsize attribute of the window to the value always. This attribute does not have a corresponding CSS property. )

Also, a visual representation of what you are looking for would be very helpful; I found some of the requirements quite confusing.

However, I canceled this one . Let me know if it's very close.

 ul{ display: -webkit-box; width:500px; background:lightgray; text-align:left;} li{background: gray; text-align:center; height:24px; -webkit-box-flex: 1; min-width:30px; max-width:100px; overflow:hidden; text-overflow: ellipsis; }