Beiträge von Horstmann

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

    Zitat von Sören Hentzschel
    Zitat von Horstmann

    Das Icon selber soll aber nur dann einen Hover-Effekt haben, wenn genau über das Icon gehovert wird


    Aber wieso, wenn das überhaupt keine Funktion erfüllt? Was soll der Effekt dann aussagen? Das trägt dann ja höchstens zur Irritation bei.

    Muss man angewendet haben mit einem breiten Button um's nachzuvollziehen, und dann ist es oft immer noch subjektives Empfinden.

    Design-relevante Wahrnehmung ist ein spannendes Thema (nicht dass ich ein Experte wäre), sprengt aber evtl. hier etwas den Rahmen.

    Jetzt stell ich aber erstmal den Icon HG für :hover wieder auf transparent um für den einen Button; einfach weil es mich nervt, und der Button schon einen extra HG hat bei Hover.

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

    Zitat von BrokenHeart
    Zitat von Sören Hentzschel

    Ich verstehe den Anwendungsfall nicht.

    Das war auch mein erster Gedanke. Wenn etwas sein Aussehen beim 'hovern' verändert, dann weiß ich, dass für das gesamte Element (in dem Fall Button) eine definierte Aktion erfolgt. Wenn ich als Anwender aber beim Drüberfahren mit der Maus nur bei dem Icon eine sichtbare Änderung sehe, dann denke ich doch, ich muss also immer auf das kleine Icon klicken, damit etwas passiert, was ja so nicht stimmt. Von der Benutzerführung her, nicht sehr einleuchtend... :/

    Jungens, es ist nur ein Designfaktor. ;)

    Du und Sören Hentzschel habt völlig recht, dass es für die Anwendung evtl. nicht zwingend Sinn macht.


    Aber: Ihr habt einen verbreiterten Button in der Navbar.

    Der Button ist verbreitert damit man ihn einfacher treffen kann mit der Maus, evtl. weil der Button auch nur bei :hover sichtbar ist.

    Der Button an sich hat auch einen Hintergrund oder ein border-image etc. gebastelt bekommen, was nur bei :hover auftaucht.

    Also wird der gesamte Button zB bei :hover auf eine bestimmte Art und Weise angezeigt.

    Das Icon selber soll aber nur dann einen Hover-Effekt haben, wenn genau über das Icon gehovert wird, und eben nicht wenn wenn über den gesamten Button gehovert wird (der ja schon seinen eigenen Hover Effekt hat).

    Dann macht es schon Sinn - nicht für die Funktion des Buttons, die bleibt gleich und soll es auch - aber für die visuelle Erscheinung und teilweise für die Anwendung.


    Die Frage war aber ob es geht; nach den Antworten hier und anhand meiner Recherchen könnte oder müsste man anscheinend relativ massiv mit Javascript eingreifen, was ich nicht kann und die Sache nicht wert ist.

    Thema mal wieder erledigt. ;)

  • Variablen in CSS nutzen

    Zitat von Mira_Belle

    Echt toll, wenn ich dann mit nur einer Änderung das komplette Farbdesign ändern kann.

    Und das ist nur der Anfang; wenn man damit anfängt komplexe Kalkulationen mit Variablen zu bedienen, oder (auch mit Script selber gemachte) Klassen etc. gegeneinander auszuspielen, dann gibt's kein Halten mehr. =O

    Die meisten meiner eher aufwendigeren Modifikationen haben im Kern eigene Klassen in einem Script zugefügt, und der Rest wird mit CSS Variablen berechnet und plaziert.

    Obwohl das Fehlerpotential recht hoch sein kann, der erste Aufwand auch; aber Spass macht's schon, und die Möglichkeiten sind fast unbegrenzt. ;)

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

    Zitat von BrokenHeart

    Prinzipiell geht das schon:


    Wenn man z.B. beim Icon des 'about:config'-Buttons :hover hinzugefügt und in der Entwicklungsumgebung den :hover-Filter einschaltet, dann sieht man, dass der Selektor funktioniert (nur inline beim 'about:config'-Button über Stilbearbeitung).

    CSS
    toolbar .toolbarbutton-1 > .toolbarbutton-icon:hover {
    filter: brightness(200%) contrast(200%) !important;
}

    Das Problem ist, dass das Icon den hover-Event gar nicht bekommt, weil dieser vorher vom toolbarbutton "konsumiert" wird.

    Hmm, verstehe.

    Ich hatte auch schon mit pointer-events rumprobiert, das wäre dann aber zu viel des Guten, ging aber eh nicht.

    CSS
    .toolbarbutton-1 {
    pointer-events: none !important;
}

.toolbarbutton-1 .toolbarbutton-icon {
    pointer-events: auto !important;
}

    Das Ziel wäre eben dass Sowas in der Art funktioniert; getrenntes :hover Verhalten für Button und Icon im Button:

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

.toolbarbutton-1 .toolbarbutton-icon:hover {
    background-color: lightgrey !important;
}

    Nur um das nochmal verständlicher zu erklären.

    Naja, war nur so eine Idee.

  • Variablen in CSS nutzen

    Zitat von Sören Hentzschel
    Zitat von Horstmann

    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.

    Richtige Beobachtung, falsche Schlussfolgerung. ;) Bei gleicher Spezifität hat eine Regel, die weiter unten steht, Präferenz gegenüber einer Regel, die weiter oben steht. Und zwar, weil CSS von oben nach unten geht, nicht umgekehrt. Die „untere“ Regel überschreibt dann die „obere“ Regel, weil sie danach kommt.

    Wo ich das nur her habe mit von unten nach oben, irgenwo hab ich das mal gelesen...? :/

    Solange das Prinzip funktioniert, ist halb daneben aber ja immer noch ein Treffer. ;)

    Spezifität ist ein gutes Stichwort, damit kann man viel anstellen mit Variablen.

  • :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.