Tabtext zentrieren in Fx 89 (Script)

2002Andreas · 23. April 2021

Hallo @ all..

bis jetzt ist es ja ganz einfach den Tabtext per:

text-align: center !important;

zu zentrieren.

Ab Fx 89 (Proton aktiv) funktioniert das so nicht mehr.

Laut Aussage von Sören:

Zitat

Das Einfachste ist wahrscheinlich, für .tab-label-container via Script [align="start"] auf [align="center"] zu ändern. Aber damit alleine wäre es nicht getan. Für die zweizeilige Darstellung braucht es dann weitere Anpassungen.

#16

braucht man also erst ein Script dafür.

Meine Frage:

Hat schon jemand eine Lösung/Script für die Änderung?

Für jegliche Hilfe wie immer herzlichen Dank vorweg.

milupo · 23. April 2021

Zitat von 2002Andreas

Hat schon jemand eine Lösung/Script für die Änderung?

Nur für protonfreies Nightly. Da habe ich einen kurzen CSS-Code bei Aris gefunden, der aber eben schon älter ist, tab_title_centered.css, aber noch funktioniert:

https://github.com/Aris-t2/Cus…bs/tab_title_centered.css

2002Andreas · 23. April 2021

Zitat von milupo

Nur für protonfreies Nightly.

Danke für deine Hilfe

Den Code von Aris nutze ich hier bereits bis Version 88.

In 89 funktioniert er leider nicht mehr.

milupo · 23. April 2021

Zitat von 2002Andreas

Den Code von Aris nutze ich hier bereits bis Version 88.
In 89 funktioniert er leider nicht mehr.

Aber in Fx 90:

So richtig sinnvoll ist das aber wohl meistens nicht, denn sichtbar wird das nur bei kurzen Tab-Texten.

2002Andreas · 23. April 2021

Zitat von milupo

Aber in Fx 90:

Aber nicht wenn Proton aktiviert ist:

Und so möchte ich es gerne wieder haben dann:

milupo · 23. April 2021

Zitat von 2002Andreas

Aber nicht wenn Proton aktiviert ist:

Ich zitiere mich mal selbst:

Zitat von milupo

Nur für protonfreies Nightly.

Mal sehen, ob wir noch irgendetwas für Proton finden.

Sören Hentzschel · 23. April 2021

Anpassungen für ein "Protonfreies Nightly" wären sinnlos, denn ab Firefox 89 wird es kein anderes Design mehr geben. Anpassungen für Firefox 89 und höher müssen zwangsläufig Proton berücksichtigen. Zumal im Startbeitrag explizit Proton angegeben wurde.

Speravir · 23. April 2021

So etwas wie

CSS

.tab-label-container[align="start"] {
    text-align: center !important;
}

geht nicht? Vielleicht auch spezifischer .tab-label-container[align="start"] .tab-label oder ähnlich.

milupo · 23. April 2021

Ich weiß nicht, es gibt jetzt solche Eigenschaften mit align-Vorsatz. align-items, align-self und align-content. align-self und align-content habe ich versucht, klappt aber nicht.

2002Andreas · 23. April 2021

Zitat von Speravir

geht nicht?

Auch dir vielen Dank für deine Hilfe

Egal wie ich es mache, es funktioniert leider auch nicht.

Speravir · 24. April 2021

Zitat von milupo

Ich weiß nicht, es gibt jetzt solche Eigenschaften mit align-Vorsatz. align-items, align-self und align-content. align-self und align-content habe ich versucht, klappt aber nicht.

Mir ist ~~heute~~ gestern zufällig noch diese Eigenschaft über den Weg gelaufen: justify-self (Link zu MDN, bisher nur englisch), justify-self (SELFHTML-Wiki, deutsch).

Zitat von 2002Andreas

Egal wie ich es mache, es funktioniert leider auch nicht.

Schade!

Sören Hentzschel · 25. April 2021

Ihr bringt ein paar Standards durcheinander, einerseits CSS Flexbox (align-*), andererseits CSS Grid (justify-self). Beides verwendet Firefox hier nicht, sondern das XUL-Boxsystem. Wenn ihr Eigenschaften daraus verwenden wollt, müsst ihr das entsprechende Layout-System auch aktivieren. So würde ein Ansatz mittels CSS Flexbox wohl funktionieren:

CSS

.tab-content {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.tab-label-container {
  margin: auto !important;
}

.tabbrowser-tab > .tab-stack > .tab-content > .tab-close-button {
  flex-shrink: 0 !important;
  padding: 7px !important;
  width: 24px !important;
}

Alles anzeigen

2002Andreas · 25. April 2021

Zitat von Sören Hentzschel

So würde ein Ansatz mittels CSS Flexbox wohl funktionieren:

Hallo Sören,

ganz herzlichen Dank dafür, das funktioniert einwandfrei

Speravir · 25. April 2021

Zitat von Sören Hentzschel

Ihr bringt ein paar Standards durcheinander, einerseits CSS Flexbox (align-*), andererseits CSS Grid (justify-self).

Stümmpt. Wenn ich mir die MDN-Seite im Detail durchgelesen hätte, wäre mir das auch aufgefallen. Allerdings steht dort auch, dass justify-self auch im Blocklevel wirkt.

Zitat von Sören Hentzschel

Wenn ihr Eigenschaften daraus verwenden wollt, müsst ihr das entsprechende Layout-System auch aktivieren. So würde ein Ansatz mittels CSS Flexbox wohl funktionieren:

Teilen