Beiträge von Horstmann

  • :hover pseudo-class einem Element hinzufügen mit Javascript?

    Zitat von Sören Hentzschel

    Rein von der Logik her, wie ich mir vorstelle, was du vorhast, gehört das :hover eh auf das Button-Element, also so in der Art: toolbarbutton:hover .toolbarbutton-icon, wie in deinem ersten Beispiel. Was genau ist denn das Problem damit?

    Das hier, von dem ersten Beitrag: ;)

    Zitat von Horstmann

    Das kam mir schon öfters in die Quere, weil ich gerne mal mit Buttons spiele zum Verbreitern etc., aber die Hoverfunktion nur auf den ganzen Button, nicht aber nur auf das Icon anwenden kann.

    Ich benutze mehrere überbreite Buttons, bei denen ich gerne eine separate Hoverfunktion für Button und Icon hätte, v.a. aus gestalterischen Gründen (Hintergrund etc.).

    Wenn's nicht geht, geht's halt nicht.


  • :hover pseudo-class einem Element hinzufügen mit Javascript?

    Zitat von Sören Hentzschel
    Zitat von Horstmann

    Das hier funktioniert nicht mit CSS, weil .toolbarbutton-icon diese Klasse eben nicht zugewiesen hat:

    Ich denke, dass du hier ein bisschen kompliziert denkst. Ergänze doch einfach die CSS-Regel, die dir fehlt. Du kannst schließlich nicht nur Selektoren verwenden, die es im originalen CSS gibt. Wozu braucht es da überhaupt JavaScript?

    Danke für die Antwort; aber wie kann man zB für .toolbarbutton-icon eine hover spezifische Regel mit CSS hinzufügen?

    Attribute oder sowas in der Art? :/

  • :hover pseudo-class einem Element hinzufügen mit Javascript?

    Das hat mich schon lange interessiert; kann man einem Element eine Klasse oder auch Attribute hinzufügen mit Javascript?

    Solche die schon existieren in Firefox oder generell, nichts Erfundenes.

    Im speziellen Fall als Beispiel die Pseudoklasse :hover.

    Das hier funktioniert mit CSS, weil toolbarbutton im Firefox JS die Klasse "hover" (oder ":hover" ?) zugewiesen hat:

    CSS
    toolbarbutton:hover .toolbarbutton-icon {
    background-color: red !important;
}

    Das hier funktioniert nicht mit CSS, weil .toolbarbutton-icon diese Klasse eben nicht zugewiesen hat:

    CSS
    .toolbarbutton-icon:hover {
    background-color: red !important;
}

    Das kam mir schon öfters in die Quere, weil ich gerne mal mit Buttons spiele zum Verbreitern etc., aber die Hoverfunktion nur auf den ganzen Button, nicht aber nur auf das Icon anwenden kann.

    In vielen Javascripts die wir hier teilen, sehe ich wie class oder Attribute zugewiesen werden für selber gebaute Elemente, komme aber nicht dahinter was der korrekte Code wäre in so einem Fall.

    Kann man da was machen? :/

  • Variablen in CSS nutzen

    Zitat von Mira_Belle

    Warum unten?

    Werden die Einträge nicht von oben nach unten eingelesen?


    CSS liest von unten nach oben, wenn ich mich nicht ganz vertue. :/

    Wie auch immmer, auf jeden Fall hat eine Regel die weiter unten steht Präferenz über die darüber.

    Wenn du zB das in eine CSS Datei schreibst (beides zusammen) :

    CSS
    #nav-bar {
    background-color: green !important;
}

#nav-bar {
    background-color: red !important;
}

    ...ist deine Navbar rot.

    Wenn du beide Farben vertauschst, ist deine Navbar grün.

    Den gleichen Spass kannst du mit importierten CSS Dateien probieren; die untere importierte Datei hat Präferenz über die darüber; Einträge direkt in der userChrome.css haben Präferenz über alle.

    Wenn du 2 Test CSS Dateien anlegst, und den Navbar Code von oben reinschreibst ( diesmal jeweils eine Variante rot oder grün in eine Datei ), dann kannst du das einfach testen.

    userchrome.css :

    CSS
    @import url("farbe2.css");

@import url("farbe1.css");


#nav-bar {
    background-color: lightblue !important;
}

    Deshalb habe ich für zB für schnelle Tests eine extra CSS Datei, die in der Importierliste ganz unten steht; damit kann ich Regeln in den darüber eingetragenen importierten CSS Dateien schnell überschreiben.

    Ich war mal davon ausgegangen, dass der Unterschied zwischen userChrome.css und userContent.css klar ist. ;)

    Und ja, @import Regeln müssen immer ganz oben stehen, vor allen CSS Regeln.

  • neue Schaltfläche "Einheitliche Erweiterungen"

    Zitat von Thomas S.

    Hallo 2002Andreas , vielen Dank für das Script.

    Ich habe damit allerdings folgendes Problem gehabt:

    Ich habe ständig zwei Fenster FF offen. Nur in einem wurde der Button wie gewünscht verschoben. Vermutlich ein Problem mit dem Timing beim FF Programmstart. Um das zu beheben, lasse ich den Timer im Script mit einem Delay von 100 ms laufen.

    Zeile 37 lautet jetzt also }, 100);.

    Damit funktioniert es zuverlässig.

    Hmm, das Problem konnte ich hier nicht feststellen, bei mir lässte er sich in allen Fenstern verschieben, auch ohne die Änderung.

    Aber Hauptsache es klappt. :thumbup:

    Zitat von Thomas S.

    In das Überhangmenü - dahin wollte er aber nicht...

    Hier habe ich aber ein Problem: mit dem Erweiterungsbutton im Überhangmenü öffnet sich das Aufklappfenster der Erweiterungen nur ganz kurz, wenn ich auf den Button klicke, und schliesst sich dann sofort wieder, zusammen mit dem Überhangmenü Fenster.

    Ist der Button in der Navbar, funktioniert das Popup ganz normal.

    Geht das denn bei dir?

  • Variablen in CSS nutzen

    Gute Frage!

    Da müsste vielleicht mal jemand wie Sören Hentzschel was dazu sagen.

    Meine Vermutung wäre, dass idealerweise die CSS Datei mit den Hauptvariablen unten in der @import Liste von CSS Dateien steht, und damit zuerst eingelesen wird und Vorrang hat.

    Oder direkt in der userChrome.css, die Vorrang hat vor importiertem CSS.

    Was Ablageorte angeht, da bin ich überfragt - meine CSS Dateien sind alle im chrome Ordner.

    Meine Vermutung wäre aber auch, dass es komplett schnuppe ist. ;)

    Ich benutze einige Variablen hier kreuz und quer durch meine importierten CSS Dateien, vor allem zum Testen, und hatte noch nie ein Problem.

  • Variablen in CSS nutzen

    Ich glaube da gibt es aber auch einen Unterschied zwischen Variablen die Fx selber benutzt, and welchen die man selber definiert.

    Fx überschreibt seine eigenen :root Variablen in einigen Fällen, um sie je nach Einsatzort/Element anzupassen.

    Zb ein Button in der tabbar und einer in der Lesezeichenleiste kann die gleiche Variable benutzen, wird aber für beide jeweils anders definiert.

    Zitat von Mira_Belle

    D.h. für mein Verständnis, es ist am Besten diese Deklarationen direkt schon in der userChrome.css zu machen,

    wenn sie definitiv "global" wirken sollen.

    Denn wenn die Variablen in zig Dateien verstreut sind, blickt man da ja gar nicht mehr durch.

    Richtig?

    So wie ich sie benutze, scheint es egal zu sein wo du die Definition/Deklaration reinschreibst, sie wirken immer global - meiner beschränkten Erfahrung nach.

    Doppelt solltest du sie natürlich nicht anlegen, dann ginge es nach Präferenzkette.

    Zur Übersichtlichkeit kannst du natürlich alle in die userChrome.css reinschreiben, oder in eine separate importierte CSS Datei.

  • Variablen in CSS nutzen

    Zitat von Mira_Belle

    Toll, jetzt hast Du mich aber verunsichert!

    Heißt das jetzt ich kann in allen anderen CSS-Dateien auch z.B. var(--uc-color-black-light) anstatt den Farbwert einsetzen?

    Ist es dann nicht besser die Deklaration der Variablen direkt in der userChrome.css und eventuell,

    wenn nötig auch in der userContent.css zu machen?

    Solange du die Variable nicht anderweitig überschreibst, sollte eine einmal definierte Variable - in irgendeiner aktiven CSS Datei - für dein gesamtes CSS gelten, egal wo du sie reinschreibst, und in welcher Reihenfolge sie in userChrome.css importiert werden.

    Also sollte sowas wie:

    CSS
    :root {
--uc-color-black-light: pink; 
}

    ...über dein gesamtes CSS als Variable verfügbar sein, mit zB color: var(--uc-color-black-light) !important; .

    Funktioniert so jedenfalls bei mir.

    Ob das auch für Java Scripts gilt, in denen solche CSS Variablen definiert werden, weiss ich allerdings nicht.

    Hier ist ein Thema in dem wir etwas damit rumgespielt hatten; ist am Anfang etwas verwirrend, bietet aber eine Menge Möglichkeiten.

  • Lesezeichen-Menü ganz rechts anzeigen?

    Den Lesezeichen Menü Button kannst du in Symbolleiste anpassen nach rechts in die Lesezeichenleiste ziehen, falls das die Frage war.

    Mich wundert nur dass bei dir der Button Text zeigt, und dass er überhaupt linksbündig zu den anderen Lesezeichen sitzt.

    Falls du CSS Modifikationen in dem Bereich benutzt, solltest du die natürlich teilen.


  • Symbolleiste anpassen senkrechte Trennlinien fehlen

    Zitat von lenny2
    Zitat von Horstmann

    Eine einfache CSS Variante ohne Script

    Ich habe dieses CSS verwendet, es fügt Spaces hinzu, aber keine Separators. Das erwähnte Skript fügt sowohl Spaces als auch Separators hinzu, und im Customize Toolbar Menu sind sie so, wie sie im alten klassischen Firefox waren.

    Der CSS Code kann beides machen, aber das Script macht vermutlich beides ohne extra manuellen Aufwand, und ist in der Anwendung bestimmt viel eleganter.

    Mir gefällt die CSS Lösung vor allem, weil man kein aufwendiges Java-Script braucht, was eher Kompatibiltätsprobleme und evtl. Leistungseinbußen erzeugen könnte als reines CSS.

    Benutzen tue ich es momentan so oder so nicht, war nur eine Fingerübung. ;)

  • non-flexible space wie in früheren Versionen des Browsers

    Eine aktualisierte Version von #7; die für einen verfügbaren Buttons muss man sich wieder raussuchen.

  • Was hört Ihr gerade?

    Zum 10000sten Mal: Ricky Lee Jones' Pop Pop, auf CD.


    Externer Inhalt www.youtube.com
    Inhalte von externen Seiten werden ohne deine Zustimmung nicht automatisch geladen und angezeigt.
    Durch die Aktivierung der externen Inhalte erklärst du dich damit einverstanden, dass personenbezogene Daten an Drittplattformen übermittelt werden. Mehr Informationen dazu haben wir in unserer Datenschutzerklärung zur Verfügung gestellt.