為了改善您的使用體驗,本網站正在進行維護,部分功能暫時無法使用。若本站的文件無法解決您的問題,想要向社群發問的話,請到 Twitter 上的 @FirefoxSupport 或 Reddit 上的 /r/firefox 發問,我們的社群成員將很快會回覆您的疑問。

搜尋 Mozilla 技術支援網站

防止技術支援詐騙。我們絕對不會要求您撥打電話或發送簡訊,或是提供個人資訊。請用「回報濫用」功能回報可疑的行為。

了解更多

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