eckige Tabs bei Quantum abrunden

  • Für die userChrome.css:

    Code
    1. #TabsToolbar .tabbrowser-tab {
    2. border-radius: 10px 10px 0 0 !important;
    3. }


    Damit sind sie oben abgerundet, den Wert bitte anpassen. Das geschwungene ist mir zu schwierig...


    Gruß Harry

    FF aktuell/beta/nightly, 64Bit, Linux, openSUSE Leap mit KDE

  • Ich habe in diesem Pfad
    Profilepfad\ft9jgz6l.profilname\chrome\ eine userChrome.css erstellt und das hier

    Code
    1. #TabsToolbar .tabbrowser-tab {
    2. border-radius: 10px 10px 0 0 !important;
    3. }

    erfasst und Firefox neu gestartet. Die Tabs sind immer noch eckig. Habe probeweise die border-radius:-Werte vergrößert und den Browser neu gestartet - ohne Ergebnis. Was mache ich falsch?

  • Ich bin froh dass die runden "Dinger" wieder weg sind (ein Abklatsch von Google Chrome) und außerdem Firefox 57 :klasse::klasse::klasse:
    Aber, Mozilla kann es eben nicht jeden recht machen. Kommt was Neues, schreien viele nach dem Alten (Classic Themen Restorer), aber dafür gibt es hier unsere Spezis mir ihren Scripten 8)

    Gruß Micha


    Ich beantworte keine technische Fragen per PN, ICQ, Email, sondern nur in diesem Forum!

  • und Aris, der ja durchaus weiter bastelt...
    https://github.com/Aris-t2/CustomCSSforFx
    Einzelne Codes können kopiert und eingesetzt werden..
    https://github.com/Aris-t2/Cus…x/tree/master/classic/css
    ..dann den gewünschten Teilbereich anklicken.. :)

  • Ich wäre für detailliertere Beschreibung dankbar. Ich habe probeweise von hier die classic_squared_tabs_transparent.css eingebunden. Hat scheinbar funktioniert. Dann habe ich eine round.css mit diesem Inhalt

    Code
    1. #TabsToolbar .tabbrowser-tab {
    2. border-radius: 10px 10px 0 0 !important;
    3. }


    erstellt und genauso wie classic_squared_tabs_transparent.css eingebunden. Hat leider nichts gebracht. Passende CSS hier hier sehe ich nicht. Wie komme ich weiter?

  • Ich bin froh dass die runden "Dinger" wieder weg sind (ein Abklatsch von Google Chrome)


    Huch? Die "runden Tabs" von Firefox vor Quantum haben sich aber schon deutlich von den Tabs in Chrome unterschieden. Natürlich in dem beschränkten Rahmen, der für mögliche Tab-Formen nun einmal gegeben ist, da gibt es ja nur eine Hand Voll Möglichkeiten. Aber von einem "Abklatsch" war das weit entfernt, zumal zur Form selbst ja auch noch die unterschiedlichen Tab-Breiten und das unterschiedliche Verhalten der Tab-Leiste dazu kommen, was sich alles zur User Experience, die Tabs betreffend, addiert. Also da bestand null Verwechslungsgefahr zwischen Firefox und Chrome. ;)

  • Also bei mir wirkt das gut. Hier nochmal ausführlich:


    Farben und Werte ändern und nicht benötigtes löschen...
    Hast Du den Fux neu gestartet? Und die Groß/Kleinschreibung bei Datei und Verzeichnis beachtet?


    Gruß Harry

    FF aktuell/beta/nightly, 64Bit, Linux, openSUSE Leap mit KDE

  • Dieser Code bewirkt hier keine Rundung der Tabs...
    [attachment=0]Unbenannt.PNG[/attachment]

  • Boersenfeger : Wenn Du border-radius erst auf 0 setzt (border-top-left-radius: 0px !important; und border-top-right-radius: 0px !important;) kannst Du ihn hinterher nicht wieder größer (border-radius: 10px 10px 0 0 !important;) machen. Mit !important Angabe wirkt CSS anders als normal... die erste Angabe siegt meist...
    Bei mir sieht es so aus:
    [attachment=0]Screenshot_20171114_200725.png[/attachment]
    Gruß Harry


  • [...]Mit !important Angabe wirkt CSS anders als normal... die erste Angabe siegt meist...[...]


    Nee, Harry, das stimmt so nicht. !important priorisiert zwar in jedem Fall eine normale Deklaration, aber eine !important-Anweisung, die nachfolgt, überschreibt alle vorangegangenen Angaben. :)


    Ich habe hier meinem Tab-Code mal kurz in der letzten Anweisung einen border-radius vergeben und wie du siehst, wird vorher der mit 0 und !important deklarierte border-radius ebenfalls überschrieben: :wink:

    Windows 10 | FF 62.0 (64-Bit) / FF 61.0 (64-Bit) / FF 63.0 (64-Bit)

  • Zitat

    !important


    Wird eine Eigenschaft mehrfach deklariert, so gilt in der Regel der zuletzt festgelegte Wert. Da dies auch unabsichtlich geschehen kann, existiert die Möglichkeit, einen bestimmten Wert als wichtig zu kennzeichnen. In diesem Fall wird der Wert einer Eigenschaft nicht durch eine nachfolgende Deklaration mit identischer Gewichtung überschrieben.


    Ein Wert wird als wichtig gekennzeichnet, indem nach dem Wert selbst ein Leerzeichen, ein Ausrufezeichen (!) sowie das Schlüsselwort important notiert werden.


    Das stammt aus: https://wiki.selfhtml.org/wiki/CSS/Kaskade


    Nur bei höherer Gewichtung gewinnt die letzte Anweisung.


    Gruß Harry

    FF aktuell/beta/nightly, 64Bit, Linux, openSUSE Leap mit KDE

  • hmmm... ich habe das auch gerade ausprobiert... und war baff erstaunt! Ich dachte immer auf selfhtml.org wäre Verlaß?


    Danke für die Aufklärung, ich nehme also meine Beauptung voll zurück!


    Gruß Harry

    FF aktuell/beta/nightly, 64Bit, Linux, openSUSE Leap mit KDE

  • Grundsätzlich ist selfhtml auch keine schlechte Quelle. Aber die Seite wendet sich in erster Linie an Anfänger und wird auch nicht jede kleine Änderung der Spezifikationen berücksichtigen (können). Vielleicht hat sich da aber auch nur jemand etwas unglücklich ausgedrückt. Passiert mir auch ständig... :P

    Windows 10 | FF 62.0 (64-Bit) / FF 61.0 (64-Bit) / FF 63.0 (64-Bit)

  • Hat sich selfhtml denn mittlereile in den Griff bekommen? Ich verfolge das Projekt nicht mehr, aber das galt früher immer als ganz furchtbare Quelle, ähnlich wie w3schools.


    Allerdings, was dieses Beispiel betrifft: der Test-Case zeigt doch nichts anderes als auf der verlinkten selfhtml-Seite auch steht. Wo genau liegt hier ein Missverständnis vor? Die zitierte Passage ist absolut korrekt.


    Hingegen entspricht das Fazit "Nur bei höherer Gewichtung gewinnt die letzte Anweisung" nicht dem, was auf selfhtml steht.

  • Also ich habe schon ewig nicht mehr auf selfhtml irgendetwas nachgeschaut. Aber w3schools finde ich gar nicht so schlecht, um schnell mal etwas nachzuschlagen. Ist übersichtlicher als MDN, wie ich finde. :)
    Ich denke, das Missverständnis liegt in diesem Satz begründet:

    Zitat

    In diesem Fall wird der Wert einer Eigenschaft nicht durch eine nachfolgende Deklaration mit identischer Gewichtung überschrieben.

    Windows 10 | FF 62.0 (64-Bit) / FF 61.0 (64-Bit) / FF 63.0 (64-Bit)

  • Zitat

    Wird eine Eigenschaft mehrfach deklariert, so gilt in der Regel der zuletzt festgelegte Wert. Da dies auch unabsichtlich geschehen kann, existiert die Möglichkeit, einen bestimmten Wert als wichtig zu kennzeichnen. In diesem Fall wird der Wert einer Eigenschaft nicht durch eine nachfolgende Deklaration mit identischer Gewichtung ( Korrekturangabe: jedoch ohne "wichtig"-Kennung ) überschrieben.


    Der Text war vermutlich richtig gemeint, ich habe ihn jedoch falsch verstanden.


    Gruß Harry


    Ich habe jedenfalls was dazu gelernt...

    FF aktuell/beta/nightly, 64Bit, Linux, openSUSE Leap mit KDE

  • EffPeh : w3schools hat sich gebessert, früher wurde ja extra dafür die Seite w3fools eingerichtet, weil da so viele Schwächen vorhanden waren. Gut möglich, dass es bei selfhtml ähnlich ist, das weiß ich nicht.


    Was den Satz betrifft, der ist ja richtig. Wenn eine Eigenschaft mit !important verstärkt wird, tritt die Regel außer Kraft, dass bei gleicher Spezifität die letzte Regel gewinnt, weil !important quasi Trumpf ist. Hätten beide Regeln die gleiche Spezifikaten und beide ein !important, dann würde natürlich wieder die letzte Regel gewinnen. ;)

  • Ich schätze an w3schools wirklich die übersichtliche Gestaltung und das dort häufig Beispiele zu finden sind, was für mich persönlich wichtig ist. Das mag nicht unbedingt jeder benötigen, aber ich bin Autodidakt und anhand von Beispielen ist bei mir der Lernfaktor höher. :wink:


    Ja, deshalb schrieb ich auch: Vielleicht hat sich da aber auch nur jemand etwas unglücklich ausgedrückt.
    Das ist einfach etwas missverständlich. Besser wäre es so gewesen, wie Harry es "korrigiert" hat. :)

    Windows 10 | FF 62.0 (64-Bit) / FF 61.0 (64-Bit) / FF 63.0 (64-Bit)