Würde ich auch nicht mehr nutzen wollen, der Rotstift ist ja schon durch etliche -moz gegangen,
Das kannst du machen, wenn man aber keine Wahl hat und es noch keinen Standard für Firefox gibt, muss man halt noch proprietäre Eigenschaften verwenden.
Vor und Zurück Schaltfläche CSS funktioniert nicht mehr richtig
-
Endor -
25. Februar 2023 um 11:22 -
Erledigt
-
-
Und im allerallerallerschlimmsten Fall dann eben mit 6 unterschiedlichen Icons die 3 Zustände pro Button basteln, in etwa so:
CSS#forward-button:not([disabled="true"]):not([open="true"]):hover .toolbarbutton-icon { list-style-image: url("beispiel.svg")!important; }Die aller-Taste klemmt, sorry
Spoiler anzeigen
#forward-button:not([disabled="true"])[open="true"]:hover,
#forward-button:not([disabled="true"])[open="true"]:hover .toolbarbutton-icon,
#back-button:not([disabled="true"])[open="true"]:hover,
#back-button:not([disabled="true"])[open="true"]:hover .toolbarbutton-icon {
background-color: white !important;
overflow: hidden!important;
}
#forward-button:not([disabled="true"]):hover,
#forward-button:not([disabled="true"]):hover .toolbarbutton-icon,
#back-button:not([disabled="true"]):hover,
#back-button:not([disabled="true"]):hover .toolbarbutton-icon {
background-color: black !important;
overflow: hidden!important;
}
#forward-button:not([disabled="true"]),
#forward-button:not([disabled="true"]) .toolbarbutton-icon,
#back-button:not([disabled="true"]),
#back-button:not([disabled="true"]) .toolbarbutton-icon {
background-color: green !important;
overflow: hidden!important;
}
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#forward-button .toolbarbutton-icon {
list-style-image: url("chrome://global/skin/icons/arrow-right.svg")!important;
fill: orange !important;
fill-opacity: 1 !important;
opacity: 1 !important;
overflow: hidden!important;
}
#back-button .toolbarbutton-icon {
list-style-image: url("chrome://global/skin/icons/arrow-left.svg")!important;
fill: orange !important;
fill-opacity: 1 !important;
opacity: 1 !important;
overflow: hidden!important;
}
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#forward-button:not([disabled="true"]):not([open="true"]):hover .toolbarbutton-icon {
list-style-image: url("chrome://global/skin/icons/arrow-right.svg")!important;
fill: gray !important;
fill-opacity: 1 !important;
opacity: 1 !important;
transform: rotate(90deg) !important;
transition: transform 0.2s linear 0.3s, fill 0.2s linear 0.3s !important;
overflow: hidden!important;
}
#back-button:not([disabled="true"]):not([open="true"]):hover .toolbarbutton-icon{
list-style-image: url("chrome://global/skin/icons/arrow-left.svg")!important;
fill: red !important;
fill-opacity: 1 !important;
opacity: 1 !important;
transform: rotate(-90deg) !important;
transition: transform 0.2s linear 0.3s, fill 0.2s linear 0.3s !important;
overflow: hidden!important;
}
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#forward-button:not([disabled="true"])[open="true"] .toolbarbutton-icon {
list-style-image: url("chrome://global/skin/icons/arrow-right.svg")!important;
fill: purple !important;
fill-opacity: 1 !important;
opacity: 1 !important;
transform: rotate(90deg) !important;
overflow: hidden!important;
}
#back-button:not([disabled="true"])[open="true"] .toolbarbutton-icon {
list-style-image: url("chrome://global/skin/icons/arrow-left.svg")!important;
fill: yellow !important;
fill-opacity: 1 !important;
opacity: 1 !important;
transform: rotate(-90deg) !important;
overflow: hidden!important;
}
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#forward-button:not([disabled="true"])[open="true"]:hover .toolbarbutton-icon {
list-style-image: url("chrome://global/skin/icons/arrow-right.svg")!important;
fill: blue !important;
fill-opacity: 1 !important;
opacity: 1 !important;
transform: rotate(90deg) !important;
overflow: hidden!important;
}
#back-button:not([disabled="true"])[open="true"]:hover .toolbarbutton-icon {
list-style-image: url("chrome://global/skin/icons/arrow-left.svg")!important;
fill: vanilla !important;
fill-opacity: 1 !important;
opacity: 1 !important;
transform: rotate(-90deg) !important;
overflow: hidden!important;
}
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#forward-button[disabled="true"],
#back-button[disabled="true"] {
background-color: lightgray !important;
opacity: 0.8 !important;
overflow: hidden!important;
}
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#forward-button[disabled="true"] .toolbarbutton-icon {
list-style-image: url("chrome://global/skin/icons/arrow-right.svg")!important;
fill: yellow !important;
fill-opacity: 0.25 !important;
overflow: hidden!important;
}
#back-button[disabled="true"] .toolbarbutton-icon {
list-style-image: url("chrome://global/skin/icons/arrow-left.svg")!important;
fill: magenta !important;
fill-opacity: 0.25 !important;
overflow: hidden!important;
}
-
Noch ein Versuch:
Hallo 2002Andreas.
War ein paar Stunden nicht vor dem PC.
Vielen Dank, das funktioniert super.
Nochmals vielen Dank.
Mfg.
Endor -
Vielen Dank, das funktioniert super.
Freut mich, dass wir doch noch eine Lösung gefunden haben.
War gern geschehen.
-
Dann habe ich irgendwas nicht richtig verstanden, weil aus dem verlinkten Bugzilla (Nightly-Thread)
Das bezieht sich alleine auf -moz-image-region, worum es in dem verlinkten Bugzilla-Ticket geht, nicht auf -moz- im Allgemeinen.
Also ist nicht jegliches -moz XUL zugehörig?
Richtig. Es gibt ja auch -webkit-, -ms-, und -o-, die entsprechenden Browser haben alle kein XUL.
Es war früher Gang und Gäbe, Hersteller-Präfixes zu verwenden, solange eine Eigenschaft noch nicht standardisiert oder die Implementierung noch in Entwicklung war. Der Plan war, das Präfix dann zu entfernen, sobald die Eigenschaft produktiv genutzt werden kann. Heute vermeidet man das und nutzt stattdessen interne Optionen (via about:config in Firefox), weil man die bittere Erfahrung gemacht hat, dass Webentwickler Eigenschaften mit Hersteller-Präfix auf Produktiv-Seiten verwenden und dann die Websites nie wieder anpassen. Das ist auch der Grund, wieso Browser heute noch so viele Eigenschaften auch mit Hersteller-Präfix unterstützen, obwohl diese längst auch ohne genutzt werden können, und dies vermutlich für immer tun werden (müssen), weil zu viele Websites kaputt gingen, wenn man die Unterstützung dafür bei so mancher Eigenschaft entfernen würde.
