Join the Mozilla’s Test Days event from Dec 2–8 to test the new Firefox address bar on Firefox Beta 134 and get a chance to win Mozilla swag vouchers! 🎁

搜索 | 用户支持

防范以用户支持为名的诈骗。我们绝对不会要求您拨打电话或发送短信,及提供任何个人信息。请使用“举报滥用”选项报告涉及违规的行为。

详细了解

after upgrading to ff110 problem with css regarding browser tabs

  • 15 个回答
  • 2 人有此问题
  • 1 次查看
  • 最后回复者为 look4

more options

Appreciate help for the following: 1. these codes don't work anymore in FF 110: #tabbrowser-tab[first-visible-tab="true"] { margin-left: 3px !important; }

2. Also this one for Tab Separators , works ok except , the "last tab separator on the right" disappeared , I mean the left is visible but the right side of the tab has no separator :

.tab-content {
position: relative !important;
overflow: hidden !important;
--separator-color: rgba(255,255,255,0.4);
}

.tab-content::before,
.tab-content::after {
content: '' !important;
display: block !important;
position: absolute !important;
background-color: var(--separator-color) !important;
width: 1px !important;
height: 28px !important;
transform: translateY(24px) !important;
opacity: 0 !important;
transition: opacity 0.2s ease !important;
}

.tab-content::before {
left: 0 !important;
}

.tab-content::after {
right: 0 !important;
}

.tabbrowser-tab[visuallyselected][style*=transform]+.tabbrowser-tab[style*=transform] .tab-content::after {
opacity: var(--tab-separator-opacity) !important;
}

.tabbrowser-tab[style*=transform]:not([visuallyselected]) .tab-content::before,
.tabbrowser-tab[style*=transform]+.tabbrowser-tab:not([visuallyselected]) .tab-content::before {
opacity: var(--tab-separator-opacity) !important;
}

.tabbrowser-tab:not([visuallyselected]):not(:hover):not([multiselected])+.tabbrowser-tab:not([visuallyselected]):not(:hover):not([multiselected]) .tab-content::before {
opacity: var(--tab-separator-opacity) !important;
}

#tabbrowser-tabs[hasadjacentnewtabbutton]:not([overflow]) .tabbrowser-tab[last-visible-tab]:not([visuallyselected]):not(:hover):not([multiselected]) .tab-content::after {
opacity: var(--tab-separator-opacity) !important;
}

#tabbrowser-tabs[overflow] .tabbrowser-tab[pinned]+.tabbrowser-tab:not([pinned]) .tab-content::before {
opacity: 0 !important;
}

Any help appreciated Thanks look4

Appreciate help for the following: 1. these codes don't work anymore in FF 110: #tabbrowser-tab[first-visible-tab="true"] { margin-left: 3px !important; } 2. Also this one for Tab Separators , works ok except , the "last tab separator on the right" disappeared , I mean the left is visible but the right side of the tab has no separator : <pre><nowiki>.tab-content { position: relative !important; overflow: hidden !important; --separator-color: rgba(255,255,255,0.4); } .tab-content::before, .tab-content::after { content: '' !important; display: block !important; position: absolute !important; background-color: var(--separator-color) !important; width: 1px !important; height: 28px !important; transform: translateY(24px) !important; opacity: 0 !important; transition: opacity 0.2s ease !important; } .tab-content::before { left: 0 !important; } .tab-content::after { right: 0 !important; } .tabbrowser-tab[visuallyselected][style*=transform]+.tabbrowser-tab[style*=transform] .tab-content::after { opacity: var(--tab-separator-opacity) !important; } .tabbrowser-tab[style*=transform]:not([visuallyselected]) .tab-content::before, .tabbrowser-tab[style*=transform]+.tabbrowser-tab:not([visuallyselected]) .tab-content::before { opacity: var(--tab-separator-opacity) !important; } .tabbrowser-tab:not([visuallyselected]):not(:hover):not([multiselected])+.tabbrowser-tab:not([visuallyselected]):not(:hover):not([multiselected]) .tab-content::before { opacity: var(--tab-separator-opacity) !important; } #tabbrowser-tabs[hasadjacentnewtabbutton]:not([overflow]) .tabbrowser-tab[last-visible-tab]:not([visuallyselected]):not(:hover):not([multiselected]) .tab-content::after { opacity: var(--tab-separator-opacity) !important; } #tabbrowser-tabs[overflow] .tabbrowser-tab[pinned]+.tabbrowser-tab:not([pinned]) .tab-content::before { opacity: 0 !important; } </nowiki></pre><br> Any help appreciated Thanks look4

由cor-el于修改

所有回复 (15)

more options

Support for first-visible-tab and last-visible-tab and a few other class selectors including last-visible-tab has been removed in 110 (#1808661) and there is only first-visible-unpinned-tab left.

You can use the Browser Toolbox to check what selectors currently are available.

See also:

/* Hide Tab bar with only one Tab - not with tabs below nav-bar - [106-110] */
#tabbrowser-tabs .tabbrowser-tab:only-of-type,
#tabbrowser-tabs .tabbrowser-tab:only-of-type + #tabbrowser-arrowscrollbox-periphery{
  display:none !important;
}
#tabbrowser-tabs, #tabbrowser-arrowscrollbox {min-height:0!important;}
/* #TabsToolbar:not(:hover) */ #alltabs-button {display:none !important;}

more options

Hello cor-el , Thank you , well I tried my best the way you suggested , regretfully , I haven't found a way to address the last tab. Up to FF 109 , all worked fine - FF 110 seems to be a whole new ball game. look4

more options

Try last-of-type

more options

Hi Terry , Thanks , I have already tried last-of-type , it doesn't work in any case. Nothing seems to work actually. look4

more options

last-of-type is correct so something else is wrong.

more options

This rule works for the new tab button case that is says (you do not have rule for the overflow case). Note that you seem to miss a definition of the --tab-separator-opacity var, so I added it for testing.

#tabbrowser-tabs[hasadjacentnewtabbutton]:not([overflow]) .tabbrowser-tab:last-of-type:not([visuallyselected]):not(:hover):not([multiselected]) .tab-content::after {
opacity: var(--tab-separator-opacity) !important;
}

.tab-content {
--tab-separator-opacity: 1;
}

more options

You can consider to try the opposite and have the separators visible by default and hide them when necessary if that is possible or looks not too bad when that fails.

more options

Hello again cor-el and Terry , Indeed Terry , I made a mistake writing the code , last-of-type does work. Well cor-el , your code works fine , opacity is still 0 , the separators are visible by default like it was before and disappear when hovering - so all is well now.

There is another issue though , regarding hovering highlight on sub menu. the one I wrote for the bookmarks works fine : .bookmark-item:hover { border: none !important; background-color: rgba(204,204,204,0.8) !important; cursor: pointer !important; -moz-appearance: none !important } Another hovering code for the rest of the menu bar (tools help view etc...) , when hovering it changes the height of the sub-menu.

Any ideas? Thanks look4

more options

By the way cor-el , I noticed something strange now , I get the last tab right separator if I open more than 4 tabs , meaning I must have 5 tabs opened to get the last tab right. I do not see how this is relevant. look4

more options

Question: so is this part of Firefox or a custom "userChrome.css" edit?

more options

Dropa said

Question: so is this part of Firefox or a custom "userChrome.css" edit?

Let cor-el and others here help them with userChrome.css edits as you will likely tell the OP they have to go elsewhere for such help.

more options

Hello James , I feel now I'm in uncharted waters here since I fail to to make any sense to Dropa's remark. Firefox is not a take it or leave it deal , otherwise what use is the css userchrome and the thousands of users questions regarding Firefox and the usage of userchrome to alter Firefox to their liking. Apart from that, I do not have to like every change that is made to Firefox each update , take a look at user's comments regarding the updates that came past Firefox 56 that changed the whole scenery. So , I don't know what to make of Dropa's remark that keeps everybody silent , except , hey , stop helping this guy. Funny , I have read hundreds of users questions regarding the userchrome , without Dropa's remark. So I'm beginning to feel this is becoming personal. So Mr. Dropa , if you got something useful to say , go ahead and make it out loud! Thanks , cor-el , Terry and the others. look4

more options

Please ignore Dropa's reply as it isn't relevant.

more options

look4 said

Hello James , So Mr. Dropa , if you got something useful to say , go ahead and make it out loud! Thanks , cor-el , Terry and the others.

The vast majority of times when userChrome.css is mentioned in threads he insists they need to look elsewhere for help and does not give any information on places to look for said help. He tends to post a lot of quantity posts with little quality in replies. So I agree with above to ignore Dropa.

由James于修改

more options

Thank you all , appreciate your comments. look4