Создание Chrome-подобной вкладки для изменения размера с чистым CSS

Question

Я пытаюсь создать вкладки, размер которых немного напоминает вкладки Chrome.Но я не уверен, как и если вообще возможно обойтись без JavaScript.

Меня не волнует поддержка браузера, я только хочу посмотреть, можно ли это сделать с помощью чистого html и css / css3.

Вот спецификация:

• Вкладки никогда не бывают шире текста внутри них
• Когда самая правая вкладка достигает правого края окна при изменении размера, вкладки должны начинать сжиматься (в идеале, сначала это происходит с самой широкой вкладкой).)
• активная вкладка никогда не должна уменьшаться
• При уменьшении вкладок текст должен быть скрыт многоточием
• вкладки будут останавливаться на минимальной ширине, которую я установил (поэтому они не могут перейти на нулевую ширину).

Можно ли это сделать с помощью чего-то вроде display: box;и box-flex: 1;свойства возможно?Я еще не успел это сделать.Я уже сделал это с помощью JavaScript.Но производительность не так хороша, как мне бы хотелось (это БОЛЬШОЕ приложение для wep).

Итак, есть ли какие-нибудь CSS-боги для этого?Если есть способ сделать это с очень ограниченным использованием JavaScript, я также заинтересован.

Спасибо всем!

Answer 1

С флексбоксом вы можете приблизиться к реальному поведению Chrome ...

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/

Однако ваши спецификации невозможны только в CSS.Я также рекомендовал бы, чтобы сохранение «1007» на вкладке «unshrunk» нарушало соглашения, потому что ваши вкладки будут менять положение каждый раз, когда вы нажимаете на них.

Answer 2

Я улучшил Duopixels anwer, используя один дополнительный элемент <span> и display: table-cell вместо реализации flexbox. Таким образом вы достигнете лучшей межбраузерной поддержки / возврата http://jsfiddle.net/w34nm/ (протестировано в IE8 +, Firefox 10, Chrome 17)

PS: вам, вероятно, следует использовать JavaScript, чтобы установить правильные значения ширины для элементов списка

Answer 3

Ну, во-первых, желаемая функциональность заключается не в том, как работают вкладки в Chrome, они просто остаются фиксированного размера до тех пор, пока не будет достаточно места, а затем они сжимаются равномерно, чтобы соответствовать.(Согласно MDN , Вы могли бы сделать это:

Чтобы элементы XUL в контейнере-контейнере имели одинаковый размер, всегда устанавливайте для атрибута equalsize содержащего бокса значение. Этот атрибутне имеет соответствующего свойства CSS.)

Кроме того, визуальное представление того, что вы ищете, было бы очень полезно, я нашел некоторые требования довольно запутанными.

Тем не менееЯ списал это .Дайте мне знать, если это вообще близко.

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; }