Tableisten CSS anpassen

Zitat von Horstmann

Hast du den Code von oben denn mal getestet?
Nochmal:

Bei mir tut sich da nichts. Und dürfte sich m. E. auch nicht viel tun. Du definierst --ug-tabs-position für #tabbrowser-tabs:not([overflow]) und nur dafür. Du verwendest es aber nicht dafür. Dann wendest du --ug-tabs-position auf scrollbox[orient="horizontal"] an, für das --ug-tabs-position gar nicht definiert ist. Im allgemeinen definiert man eine CSS-Variable unter :root, so, wie du es in deinem von mir verlinkten Code mit --ug-tab-gap gemacht hast. Dann gilt die Variable für alle Elemente.

Zitat von milupo

Du definierst --ug-tabs-position für #tabbrowser-tabs:not([overflow]) und nur dafür. Du verwendest es aber nicht dafür. Dann wendest du --ug-tabs-position auf scrollbox[orient="horizontal"] an, für das --ug-tabs-position gar nicht definiert ist.

Das passt doch, da die scrollbox ein Kindelement von #tabbrowser-tabs ist. Die Variablen-Definition gilt immer für den kompletten Elemente-Baum darunter. Ansonsten müsste man Variablen immer dort definieren, wo sie verwendet werden, was die komplette Idee von Variablen ad absurdum führen würde, weil man dann gleich den Variableninhalt direkt verwenden könnte. Und du schriebst ja sogar selbst:

Zitat von milupo

Im allgemeinen definiert man eine CSS-Variable unter :root, so, wie du es in deinem von mir verlinkten Code mit --ug-tab-gap gemacht hast. Dann gilt die Variable für alle Elemente.

Das ist genau das gleiche Prinzip, bloß dass :root dem html-Element entspricht und die Gültigkeit entsprechend für das komplette DOM setzt. Du kannst Variablen aber an jeder beliebigen Stelle definieren und damit Variablen nur für bestimmte Teile gültig machen beziehungsweise Variablen für bestimmte Stellen überschreiben. Aus Performance-Sicht ist es besser, je kleiner der Wirksamkeitsbereich ist.

Der Vollständigkeit halber noch: Der Unterschied zwischen :root und html ist die höhere Spezifität von :root, weil das eine Pseudoklasse ist. Außerdem funktioniert :root auch in Nicht-HTML-Dokumenten wie SVG-Dateien. Was den Aspekt betrifft, für welche Elemente die Variable gilt, gibt es aber keinen Unterschied zwischen diesen beiden Selektoren.

Zitat von Sören Hentzschel

Das passt doch, da die scrollbox ein Kindelement von #tabbrowser-tabs ist. Die Variablen-Definition gilt immer für den kompletten Elemente-Baum darunter.

Ach so, danke. Ich habe die Hierarchie nicht überprüft.

Zitat von milupo

Bei mir tut sich da nichts. Und dürfte sich m. E. auch nicht viel tun. Du definierst --ug-tabs-position für #tabbrowser-tabs:not([overflow]) und nur dafür. Du verwendest es aber nicht dafür. Dann wendest du --ug-tabs-position auf scrollbox[orient="horizontal"] an, für das --ug-tabs-position gar nicht definiert ist. Im allgemeinen definiert man eine CSS-Variable unter :root, so, wie du es in deinem von mir verlinkten Code mit --ug-tab-gap gemacht hast. Dann gilt die Variable für alle Elemente.

Danke für's Testen!

Wie von Sören schon erklärt, die Variable wirkt auf die Child Elemente; die Begrenzung auf #tabbrowser-tabs:not([overflow]) soll die Auswirkung der Regel auf eben diesen Bereich eingrenzen, weil ansonsten andere scrollbox Elemente mit angesprochen würden.
Das hat unerwünschte Konsequenzen, wie auch in der von dir verlinkten Thread weiter unten erwähnt.
Ich halte Variablen generell meistens so begrenzt wie möglich, weil die einem sonst auch mal anderorts in die Quere kommen können.

Der Umweg über die Variable deshalb, weil scrollbox in einem shadow Dingens (Fachbegriff) sitzt, und nicht Jeder den Umweg über Javascript gehen möchte oder kann.

Schade daß es nicht klappt; ich kann momentan hier nur durch den Code auf searchfox stöbern und dann raten...

Zitat von Horstmann

Der Umweg über die Variable deshalb, weil scrollbox in einem shadow Dingens (Fachbegriff) sitzt, und nicht Jeder den Umweg über Javascript gehen möchte oder kann.

Genauso ist es, scrollbox sitzt hier in einem shadow-Dingens, korrekt: Es befindet sich unter shadow-root. Auch erkennbar am Attribut part. Da musst du dann schon das Skript userChromeShadow.uc.js zusammen mit der userChromeShadow.css verwenden. Die Variable nutzt dir hier m. E. nichts, weil scrollbox dann dennoch unter shadow-root liegt. Auch mit Variable greifst du ja auf scrollbox unter shadow-root zu.

Zitat von milupo

Genauso ist es, scrollbox sitzt hier in einem shadow-Dingens, korrekt: Es befindet sich unter shadow-root. Auch erkennbar am Attribut part. Da musst du dann schon das Skript userChromeShadow.uc.js zusammen mit der userChromeShadow.css verwenden. Die Variable nutzt dir hier m. E. nichts, weil scrollbox dann dennoch unter shadow-root liegt. Auch mit Variable greifst du ja auf scrollbox unter shadow-root zu.

Der Code funktioniert in der Form, die Variable greift auch in der relevanten shadow-root, jedenfalls bis 115esr; das Script braucht man hier nicht.
Das ist praktische Erfahrung, keine Theorie.

Ich hab den Trick schon oft benutzt, um ::part Gedöns zu manipulieren; meine Vermutung wöre eher, daß sich inzwischen im Fx Code ein paar Funktionen innerhalb der Hierarchie verlagert haben, oder Attribute geändert/hinzugefügt wurden.

Sowas könnte zB noch funktionieren:

#tabbrowser-tabs {
    --ug_outline: 4px solid red;
}

#scrollbutton-up,
#scrollbutton-down {
  outline: var(--ug_outline, 4px solid cyan) !important;
  outline-offset: -2px !important;
}

Damit sollten die Scrollbuttons im Tab overflow rot umrandet sein, aber zB in einem überlaufenden Ordner in der Lesezeichenleiste cyan.

Nimmt man #tabbrowser-tabs {   --ug_outline: 4px solid red;} raus, sollten alle scrollbuttons cyan umrandet sein.

Zitat von Horstmann

jedenfalls bis 115esr

Ich teste hier im Nightly und auch bei ESR sind wir ja schon bei Fx 128, wenn auch noch nicht definitiv. Die Diskussion ging ja von Boersenfeger aus, der ja ebenfalls das Nightly nutzt, auch wenn er deine Variable in seinem Code nur definiert und nicht anwendet.

Abgesehen davon, funktioniert es hier auch mit userChromeShadow.uc.js und userChromeShadow.css nicht. Ich muss auch noch einmal nachfragen, da ich kein Power-Tabber bin: Die beiden Regeln sollen die Tabs in der Tableiste zentrieren und den Inhalt des Popup-Menüs unter der Pfeilspitze rechts zentrieren?

Zitat von Boersenfeger

Sören Hentzschel Ich hatte weiter unten auch den ganzen CSS Code gepostet, der sich mit den Tabs beschäftigt. Ein Script konnte ich durch Testdurchgänge ausschließen ebenso weitere CSS-Codes

Es scheint ja so zu sein, dass mein Code (und der anderer Nutzer) bis 130 funktionierte. Die Frage ist bisher unbeantwortet, ob man das heilen kann?

Wie gesagt: Der von dir gezeigte Code zentriert auch in Firefox 129 nichts. Und du führst eine Variable an, die in dem Code auch überhaupt nicht genutzt wird. Irgendwas fehlt im gezeigten Code also, wenn das bis Firefox 130 funktionierte.

So sieht Firefox mit dem vermeintlich vollständigen Code aus Beitrag #25 in Firefox 129 aus:

Zitat von Sören Hentzschel

So sieht Firefox mit dem vermeintlich vollständigen Code aus Beitrag #25 in Firefox 129 aus:

Zitat von Sören Hentzschel

Irgendwas fehlt im gezeigten Code

Das wurde jetzt wie oft geschrieben? Also irgendwann sollte es doch mal kligeln.

Boersenfeger - das ist deine Sache, als was du dich bezeichnest, nur ist das ja wiederholt so. Und nie bekommt man das gesamte CSS von dir, immer nur Häppchen. Es wurde mehr als 3 Mal festgestellt, dass was fehlt, und wieder kommt da nix. Also bitte, alles packen, anfügen.

Eine Bitte, könnte man bitte endlich Firefox 115 aussen vor lassen? Das hilft nun wirklich nicht. Seit 115 habe auch ich mein CSS anpassen müssen, das nicht abwärtskompatibel ist.

Zitat von Boersenfeger

Hier ists noch richtig im 129.0.2

äh, nö, siehe Bild (Nightly im Hintergrund)

Zitat von Boersenfeger

und so sieht es im Nightly aus

auch hier, aber keines richtig

Der Code von Andreas aus Beitrag #50 funktioniert bei mir ebenfalls – in Fx 129. In Fx 131 jedoch nicht. Auch der Code mit CSS-Variable funktioniert in Fx 129:

#tabbrowser-tabs:not([overflow="true"]) {
	--ug_tabs_position: center;
}
scrollbox[smoothscroll="true"] {
   display: flex !important;
   justify-content: var(--ug_tabs_position, initial) !important;
}

Zeile 5 kann man auch weglassen, ich nehme mal an, das Firefox erkennt, dass es sich bei justify-content um eine Eigenschaft für Flex-Boxen handelt.

Habe gerade gesehen, scrollbox hat das Attribut flex mit dem Wert 1. Da ist display: flex nicht erforderlich.

Wo hast du denn das her? Hab ich was übersehen? :o

justify-content: var(--ug_tabs_position, initial) !important;

Zitat von 2002Andreas

Offensichtlich funktioniert der Code nur via userChrome.css, nicht über die Entwicklerwerkzeuge. Das ist ungut zum Testen…

---

Mit der Ergänzung funktioniert der Code auch in Firefox Nightly:

slot {
  display: contents !important;
}

Nur ist das halt sehr unspezifisch und ich weiß nicht, an welchen Stellen sich das ggf. negativ auswirkt. Ich empfehle hier wirklich dringend, den Weg über userChromeShadow.uc.js zu gehen und den Code spezifischer zu schreiben, damit sich das nur in der Tableiste auswirkt.

Generell sind aktuell im Bereich der Tabs praktisch täglich Änderungen zu erwarten, da mit sowohl vertikalen Tabs als auch Tab-Gruppen, deren Implementierung gestartet ist, gerade zwei große Baustellen bestehen, welche ganz direkt die Tabs betreffen. Und dann kommt noch allgemeines Aufräumen dazu, welches die Implementierung dieser neuen Features begünstigen soll, wozu die Änderung zählt, welche das Problem verursacht hat:

Es ist gerade nicht die Zeit, um Firefox Nightly zu verwenden und sich darauf zu verlassen, dass individuelle Anpassungen des Tab-Codes stabil bleiben.

Zitat von Sören Hentzschel

nicht über die Entwicklerwerkzeuge.

Hallo Sören.

Das betrifft nur den Teil im Code für Tabs mittig.

Zitat von Sören Hentzschel

Mit der Ergänzung funktioniert der Code auch in Firefox Nightly:

Zitat von Sören Hentzschel

Es ist gerade nicht die Zeit

Danke für den Hinweis.

Zitat von .DeJaVu

Wo hast du denn das her? Hab ich was übersehen?

Aus Horstmanns Beitrag von hier:

Beitrag

RE: Tableisten CSS anpassen

[…]

Ich kann von hier aus nur raten; aber erstmal wird die Variable --ug_tabs_position in deinem geposteten Code nirgends angewendet, und zum anderen versteh ich nicht ganz weshalb du das Attribut [smoothscroll="true"] benutzt.

Kannst evtl. mal das spasseshalber testen:

(Quelltext, 7 Zeilen)

---

[…]

-moz-box-pack gibt's schon lange nicht mehr...

Horstmann

23. August 2024 um 21:41

Dafür wurde --ug-tabs-position definiert, in dieser Zeile wird es angewendet. Und Boersenfeger hatte nur --ug-tabs-position definiert, aber nicht unter scrollbox[…] angewendet.

Zitat von Sören Hentzschel

Mit der Ergänzung funktioniert der Code auch in Firefox Nightly:

Auch von mir ein .

Ach das, danke, hatte ich schon wieder verdrängt wegen 115.