说到浏览器，除了 edge 以外，还有什么浏览器支持垂直标签页+标签页分组功能的吗？

edge 是越更新越臃肿了，所以想找一个别的浏览器做代替的
硬要求就是垂直标签页和标签页分组

目前试过
1.vivaldi：
有垂直标签页功能，也有分组，但是不能自动进分组。
举个例子就是我打开 V2EX ，然后点开一个帖子，在标签页右键把同一个 domain 的添加到分组里面。
这个时候如我保留最少 2 个标签页，再打开别的标签页的时候一直会是这个分组里面的，但是一旦只剩下最后一个标签页，就自动解除分组了。

2.firefox:
通过 tree style tabs 这个扩展可以垂直标签页。
从某个页面打开的链接都会变成这个标签页的 child ，这点我觉得还挺不错的。
觉得不好的点就是边栏的自动隐藏，因为标签页前面有展开的小箭头以及 child 标签页有缩进，所以自动隐藏之后参差不齐，看起来非常难受。

3.brave:
也下载下来试了一下，flags 里面有 vertical-tabs 的属性，但是设置为 true 之后重启浏览器还是没有垂直标签页的功能。

yfugibr

2023-03-15 18:08:26 +08:00

tree style tab 可以搭配这个 css 用，css 苦手，花了好长时间才写出来，可以自己再调调
在 tab 上右键菜单时会有问题（没有 hover 事件

```css

/* disable close box */
tab-item:not(:hover) tab-item-substance tab-closebox {
display: none;
}

/* replace favoricon to collepase icon on hover */
tab-item tab-item-substance:not(:hover) tab-twisty,
tab-item:not([data-child-ids]) tab-twisty,
tab-item:is([data-child-ids]) tab-item-substance:hover tab-favicon {
width: 0px;
min-width: 0px;
visibility: hidden;
}

/* hide scrollbar */
#tabbar {
overflow-y: auto !important;
scrollbar-width: none;
--shift-tabs-for-scrollbar-distance: 0em;
}

/* for auto hide sidebar */
:root.sidebar {
--transition-time: 300ms;
--transition-delay: 200ms;
}

/* center favicon */

tab-item tab-item-substance tab-twisty,
tab-item tab-item-substance tab-faviocn {
margin-left: 6px;
}

/* to hide text on min sidebar */

tab-item tab-item-substance tab-label {
margin-left: 8px;
}

:root:not(:hover) tab-item tab-item-substance tab-sound-button {
visibility: hidden;
}

/* hide indent space on not hover, to show all favicon on min sidebar */

:root:not(:hover) tab-item tab-item-substance {
margin-left: 0px;
}

tab-item:not(.expanding) tab-item-substance {
transition: margin-left var(--transition-time) ease;
}

:root:hover tab-item:not(.expanding) tab-item-substance {
transition: margin-left var(--transition-time) ease var(--transition-delay);
}

/* hide indent line */
:root:not(:hover) tab-item .extra-items-container.indent {
opacity: 0;
}

tab-item .extra-items-container.indent {
transition: opacity var(--transition-time) ease;
}

:root:hover tab-item .extra-items-container.indent {
transition: opacity var(--transition-time) ease var(--transition-delay);
}

/* move container color to left */
tab-item tab-item-substance .contextual-identity-marker {
left: 0 !important;
right: auto !important;
}
```