Absolut notwendige Einträge für die mehrzeilige Tableiste (und nur dafür)

  • Firefox-Version
    77.01 (64 Bit)
    Betriebssystem
    Windoof 10

    Hallo an die Communitiy!

    Den Code für die mehrzeilige Tableiste habe ich von diesem Posting.

    Jetzt habe ich mal die auskommentierten Zeilen großteils aus der userChrome.css gelöscht, da ich mir die kompletten Anpassungen in einzelne (Unter)-css-Dateien packen will (sollte ja besser sein).

    Jetzt frage ich mich (und natürlich auch die Community ;) ) welche der Zeilen in meiner userChrome.css absolut notwendig sind, damit die mehrzeilige Anzeige grundsätzlich funktioniert. Nachdem die Anpassung der mehrzeiligen Tableiste für mich passt, kommt auch dieser Code in eine eigene "Unter-"-css.
    Dinge wie "Farben der Tabs", "abgerundete Tabs" usw. würde ich aber gerne in weiteren (Unter)-css-Dateien einstellen.

    Zumindest teilweise habe ich diverse Änderungen schon getestet und mit dem "@ import url" in die "Haupt"-css eingefügt - wegen der weiteren Tests sind diese Zeilen momentan natürlich auskommentiert. (step by step)

    Interessant wäre für mich auch eine Erklärung, was welcher Eintrag macht, damit ich das Ganze ein bisschen besser verstehe (ev. mit weiterführenden Links).

    Gelesen habe ich schon mal die Anpassungen mittels userchrome und die Anleitung Inspektor. Danke an milupo für die doch recht einfachen Erklärungen.

    Soweit die Einleitung - hier der Inhalt meiner momentanen userChrome.css:



    Mir persönlich würden die Angaben der Zeilennummern ausreichen (z. B.: Lösche die Zeilen 3, 4, 8, 17 - 29 da sie (hier) nur unnötige Leerzeilen sind, auch die Zeile 30 kann gelöscht werden - wegen dem mehr oder weniger sinnvollen Kommentar ;))

    Auch bei Änderungen wäre für mich die Zeilennummer ausreichend (z.B.: Ändere in der Zeile 44 von "black" auf "green").

    Da ich mir jetzt nicht sicher bin, ob meine Fragen im obigen "Geschreibsel" klar verständlich waren, hier nochmals die Fragen:

    1. Welche Zeilen im css-Code sind für die reine Funktion der mehrzeiligen Tableiste absolut erforderlich - und welche Zeilen sind rein optische Anpassungen?

    2. Welche Bedeutung haben die verschiedenen Einträge (vielleicht gibt es ja hilfreiche (idealerweise deutschsprachige) Links zum "Selbststudium"). Tante Google liefert da leider nicht so gute Ergebnisse. Das erste Beispiel was mir nicht ganz klar ist, betrifft die Zeilen 32 und 33. Wieso muß diese Angabe erfolgen? Wenn sich die Person, die den betreffenden Code geschrieben hat, an die entsprechenden Regeln hält, dann ist die Angabe doch zwecklos - oder?
    Ein weiteres Beispiel welches mir nicht ganz klar ist, betrifft die Zeilen 43, 47 und 50. In Zeile 43 steht nach "#TabsToolbar" noch "not(:-moz-lwtheme)", in Zeile 47 steht nach "#TabsToolbar" nur ":-moz-lwtheme" und in Zeile 50 kein "-moz-lwtheme" zu finden. Wieso eigentlich?
    Sofern ich die Anleitung von milupo richtig verstanden habe, dann werden hier für den Identifikator "TabsToolbar" in Abhängigkeit von "-moz-lwtheme" verschiedene Werte für beispielsweise eine Farbe festgelegt - oder?

    Vielen Dank schon mal für Antworten!
    Es gibt dann noch einige weitere Fragen von mir. Einige werden (gerade noch) hier dazupassen, bei anderen Fragen muß ich dann neue Themen erstellen. Step by step ;) .

    Lg vom ActrosHasser

    Einmal editiert, zuletzt von ActrosHasser (26. Juni 2020 um 03:03) aus folgendem Grund: "Profillink" auf Markierung "@Name" geändert - da ich beim Erstellen des Beitrages "auf der Leitung" stand.

  • Zeile 139 bis einschl. Zeile 173 sind nur für die mehrzeilige Tableiste.

  • 2002Andreas Vielen Dank! Das klappt schon mal!

    Ein Teil ist erledigt. Doch der nächste folgt sogleich. (Frei nach irgendeinem Autor ;) )

    Dazu habe ich einen Screenshot angehängt. Kann man hier unterschiedliche Tabbreiten definieren, die sich irgendwie automatisch einstellen?

    Im Screenshot habe ich verschiedene Farbmarkierungen gesetzt. Einmal Gelb mit der Nummer 1 und dann noch Pink mit der Nummer 2.

    Ich würde es gerne haben, daß die Tabs mit gelber Markierung (1) (und weitere Tabs mit ähnlicher Textlänge) etwas schmäler sind. Die Tabs mit der pinken Markierung (2) würden mit der (festen) Breite von 180 passen. Bei den gelb markierten Tabs ist ja zwischen dem letzten Buchstaben des Seitentitels und dem Symbol der Stummschaltung freier Platz. Wenn man hier den rechten Rand des Tabs nach links verschieben könnte, dann hätten natürlich mehr Tabs in der Zeile Platz. Es kann natürlich sein, daß das nicht funktionieren wird - dann hab ich halt Pech gehabt.

    Hmm, stellt sich jetzt nur noch die Frage, ob das jetzt noch zur grundsätzlichen Funktion, oder doch schon zur Optik zählt - denn das möchte ich ja dann in einer extra css machen.

    Edit: (zusätzlich zur Angabe des Bearbeitungsgrundes) *selbstsarkassmus on* Tja, dieses blöde "@" Zeichen. Wenn man nicht daran denkt, dieses Zeichen und einen Namen zu verwenden. *selbstsarkassmus off*

    Einmal editiert, zuletzt von ActrosHasser (26. Juni 2020 um 03:22) aus folgendem Grund: Markierung eingefügt (siehe auch Bearbeitungsgrund im Posting 1) und eine Veränderung einer Wortwahl (von Gelb auf gelber Markierung)

  • Es ist sogar an der entsprechenden Stelle kommentiert.

    Wenn ich es richtig verstehe, dann gilt diese Angabe aber nur für alle Tabs im Fenster. Oder kann man die betreffende Zeile mehrfach mit unterschiedlichen Werten verwenden?

    Mein Wunsch wäre, daß der 1. Tab z.B. 100 Pixel breit ist, der nächste Tab hat dann eine Breite von 200 Pixel, der 3. Tab ist dann 180 Pixel breit, usw. (aber es ist immer abhängig davon, wie lang bzw. kurz der Text ist.).

    Ich habe es gerade so ausprobiert:

    .tabbrowser-tab:not([pinned]) {

    min-width: 100px !important; /* Zusätzlicher Test (passender Wert 150px)*/

    min-width: 150px !important; /* Feste Breite des einzelnem Tabs (Originalwert 100px) (passender Wert 150px)*/

    min-width: 200px !important; /* Zusätzlicher Test (Originalwert 100px) (passender Wert 150px)*/

    }



    Das funktioniert leider nicht bei mir. Da haben alle Tabs die letzte angegebene Breite (200).

    Ich hänge jetzt noch ein Bild an, in dem ich unterhalb ungefähr "gezeichnet" habe, wie ich es gerne hätte.camp-firefox.de/attachment/26240/

  • Vielleicht hätte ich das in meinem letzten Beitrag dazu schreiben sollen: Der Kommentar ist falsch. Die Eigenschaft heißt min-width und das heißt übersetzt minimale Breite, nicht feste Breite. Mit dem Code im letzten Beitrag definierst du dreimal die minimale Breite, die letzte Zeile gewinnt. Also sind alle Tabs Minimum 200px breit. Wenn du nur 60px definierst, dann sind Tabs auch nur Minimum 60px Breit und Tabs, die mehr Platz benötigen, sind breiter.

    Ich bin jetzt aber nur vom Code ausgegangen, der bereits so genutzt wird, ich habe es nicht getestet. Wenn das so nicht klappt, dann hat der Code meines Erachtens bereits vorher nicht so funktioniert, wie er gedacht war.

  • ActrosHasser : Ich denke, dass das, was du dir vorstellst, in CSS überhaupt nicht möglich ist (lasse mich gern eines besseren belehren). Unterschiedliche Breiten für die einzelnen Tabs in Abhängigkeit von der Textlänge könnte man vielleicht mit JavaScript realisieren, wenn man den entsprechenden Event zur Darstellung des Seitentitels im Tab abfragt. Allerdings frage ich mich, ob das wirklich sinnvoll wäre, da sich ja der Seitentitel oft mehrmals (z.B beim Laden des Inhalts) ändern kann und es dann zu einem ständigen Nachjustieren der Größe des entsprechenden Tabs und damit zum Verschieben aller nachfolgenden Tabs kommen würde.

  • Ich denke, dass das, was du dir vorstellst, in CSS überhaupt nicht möglich ist (lasse mich gern eines besseren belehren)

    Sicher.

    Wie gesagt, dafür gibt es ja min-width. Man muss halt schauen, woher die Breite kommt, weil das alleine nicht reicht und die Tabs trotzdem mehr Platz einnehmen. Das habe ich gerade mal schnell geschaut. Man muss im gleichen Element noch -moz-box-flex: 0 !important; setzen. Das ist im Firefox-Code nämlich auf 200 gesetzt.

  • Man muss im gleichen Element noch -moz-box-flex: 0 !important; setzen. Das ist im Firefox-Code nämlich auf 200 gesetzt.

    Ja, stimmt. Habe es gerade in der Entwicklungsumgbung ausprobiert. Hätte ich vielleicht vorher mal nachschauen sollen;).

    Bei mir steht übrigens bei moz-box-flex: 100. (FF68).

    Finde diese Anpassung trotzdem, wie weiter oben beschrieben, nicht optimal, da die Tabs sich bei geändertem Seitentitel immer wieder verschieben. Aber das ist wohl Geschmackssache...

  • Sören Hentzschel Danke für Deine Antworten. Dann wäre der Kommentar leider auch schon in diesem Thema falsch - denn von dort habe ich den (Grund)Css-Code. Momentan ist für mich nur wichtig, daß ein Kommentar dort steht, damit ich weiß, wo ich die Breite des Tabs anpassen kann.

    BrokenHeart Danke für Deine Antwort. Ich möchte es einfach mal austesten, um zu sehen, wie es für mich aussieht - ändern kann ich es dann immer noch. Die ersten beiden Tabs (Messenger bzw. Facebook) von meinem Bild bleiben (übrigens) immer die Gleichen - in diesem Profil.


    Edit: Einen Teil gelöscht, da es sich bei der Frage doch um eine optische Anpassung handelt, und es sich dann durch ein neues Thema um ein Crossposting handeln würde.

    Sören Hentzschel Kann dieses Thema dann bitte geschlossen werden?

    Einmal editiert, zuletzt von ActrosHasser (12. Juli 2020 um 12:36) aus folgendem Grund: Teil gelöscht - Bitte "um Schließung des Themas" eingefügt