Mozilla VPN is currently experiencing an outage. Our team is actively working to resolve the issue. Please check the status page for real-time updates. Thank you for your patience.

This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

after upgrading to ff110 problem with css regarding browser tabs

  • 15 respostas
  • 2 have this problem
  • 1 view
  • Last reply by 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 modificouno o

All Replies (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 modificouno o

more options

Thank you all , appreciate your comments. look4