Join the AMA (Ask Me Anything) with the Firefox leadership team to celebrate Firefox 20th anniversary and discuss Firefox’s future on Mozilla Connect. Mark your calendar on Thursday, November 14, 18:00 - 20:00 UTC!

Vanwege onderhoudswerkzaamheden die uw ervaring zouden moeten verbeteren, heeft deze website beperkte functionaliteit. Als een artikel uw probleem niet verhelpt en u een vraag wilt stellen, kan onze ondersteuningsgemeenschap u helpen in @FirefoxSupport op Twitter en /r/firefox op Reddit.

Zoeken in Support

Vermijd ondersteuningsscams. We zullen u nooit vragen een telefoonnummer te bellen, er een sms naar te sturen of persoonlijke gegevens te delen. Meld verdachte activiteit met de optie ‘Misbruik melden’.

Meer info

Deze conversatie is gearchiveerd. Stel een nieuwe vraag als u hulp nodig hebt.

after upgrading to ff110 problem with css regarding browser tabs

  • 15 antwoorden
  • 2 hebben dit probleem
  • 1 weergave
  • Laatste antwoord van 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

Bewerkt door cor-el op

Alle antwoorden (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.

Bewerkt door James op

more options

Thank you all , appreciate your comments. look4