Anpassen der Scrollbar ab Firefox 69

Pentomino

Folgender Code funktioniert in FF 69 Nightly nicht mehr (zum Verändern der Farbe/Dicke der Scrollbar):

In FF 68 Beta klappt das noch. Welche Veränderungen sind notwendig ab FF 69?

Code

:root{
  
  /* background color [1. color] // thumb/slider color [2. color] (Firefox 64+) *********/
  scrollbar-color: darkblue burlywood;
  
  /* size/width *************************************************************************/
  /*    scrollbar-width: auto; = default OS scrollbars
        scrollbar-width: thin; = small scrollbars without buttons
        scrollbar-width: none; = scrollbars are hidden
        scrollbar-width: 17px; (not working yet, but might be supported in the future)  */
scrollbar-width: thin;
}

Alles anzeigen

2002Andreas

Nutzt du evtl. schon Scripte?

Wenn ja, dieses funktioniert im aktuellem Nightyl einwandfrei:

JavaScript

"use strict";

/* ***********************************************************************************************

 README
 
 Aktivieren einer Einstellung > var ... auf 'true' setzen
 Deaktivieren einer Einstellung > var ... auf 'false' setzen
 Anpassungen vornehmen > Aendern von Werten
 - Farbe - Name: red, blue, transparent / Hexcode: #33CCFF, #FFF
 - Farbe - rgb(a): rgba(0,0,255,0.8) / hsl(a): hsla(240,100%,50%,0.8) // a = Sichtbarkeit
 - Zahlen: 1, 2, 3 ... 10, 11, 12 ...
 - Sichtbarkeit (in Dezimalzahlen): 0.0 bis 1.0 e.g. 1.4, 1,75
 - Farbverlaeufe: linear-gradient(Richtung, Farbe, Farbe, Farbe)
 - Beispiel: linear-gradient(to right, blue, #33CCFF, rgba(0,0,255,0.8))
 
 - Beispiel 2:
    Farbverlauf von links nach rechts - tranparent -> weiss mit 50%er Sichtbarkeit -> tranparent
    linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)
 
 Info
 - Zu kleine Breitenwerte werden sich negativ auf einige Oberflaechenelemente auswirken (z.B. auf Menuelisten)!
 
*********************************************************************************************** */

// Allgemeine Einstellungen

// Scrollbars ausblenden
var hide_scrollbars = false; /* Standard = false */
// Schaltflächen ausblenden
var hide_scrollbar_buttons = false; /* Standard = false */
// benutzerdefinierte Breite
var custom_scrollbar_width = true; /* Standard = false */
var custom_scrollbar_width_value = 13; /* 10-? // Standard = 17 (in px) */
// benutzerdefinierte Sichtbarkeit
var custom_scrollbar_opacity = true; /* Standard = false */
var custom_opacity_value = "0.9"; /* Standard = 1.0 */
// "schwebende" Scrollbars / Scrollbars über dem Webinhalt 
var enable_floating_scrollbars = false; /* Standard = false */
// benutzerdefinierte Scrollbars
var enable_custom_scrollbars = true;
// benutzerdefinierte Hintergrundfarbe bzw. benutzerdefinierter Hintergrundverlauf
var cs_background_color = "#CCCCCC"; /* Standard = #CCCCCC / Transparenter Hintergrund = transparent */
var cs_background_image = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"; /* Standard = none */
// benutzerdefinierte Schiebereglerfarbe bzw. benutzerdefinierter Schiebereglerfarbverlauf
var cs_thumb_color = "#33CCFF"; /* Standard = #33CCFF */
var cs_thumb_image = "(to right,transparent,rgba(255,0,0,0.9),transparent)"; /* Standard = unset */
// benutzerdefinierte Schiebereglerfarbe (hover/ueber) bzw. benutzerdefinierter Schiebereglerfarbverlauf
var cs_thumb_hover_color = "red"; /* Standard = #66FFFF */
var cs_thumb_hover_image = "rgba(255,0,0)"; /* Standard = unset */
// benutzerdefinierte Schiebereglerrundung
var cs_thumb_roundness = 0; /* Standard = 0 (in px) */
// benutzerdefinierte Schiebereglerrandbreite
var cs_thumb_border = 1; /* Standard = 0 (in px) */
// benutzerdefinierte Schiebereglerrandfarbe
var cs_thumb_border_color = "#33CCFF"; /* default ##33CCFF */
// benutzerdefinierte Schaltflaechenfarbe bzw. benutzerdefinierter Schaltflaechenfarbverlauf
var cs_buttons_color = "lightgrey"; /* Standard = #000000 */
var cs_buttons_image = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"; /* Standard = unset */
// benutzerdefinierte Schaltflaechenfarbe (hover/ueber) bzw. benutzerdefinierter Schaltflaechenfarbverlauf
var cs_buttons_hover_color = "#000066"; /* Standard = #000066 */
var cs_buttons_hover_image = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"; /* Standard = unset */
// benutzerdefinierte Schaltflächenrundung
var cs_buttons_roundness = 0; /* Standard = 0 (in px) */


/* ******************************************************************************************** */
/* ******************************************************************************************** */
/* ******************************************************************************************** */


Components.utils.import("resource://gre/modules/Services.jsm");
var ss =  Components.classes["@mozilla.org/content/style-sheet-service;1"].getService(Components.interfaces.nsIStyleSheetService);

var custom_scrollbars = {

  init: function() {

  var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
    \
    @namespace html url("http://www.w3.org/1999/xhtml");\
    \
    scrollbar, scrollcorner {\
      -moz-appearance: none !important;\
      background-color: '+cs_background_color+' !important; \
      background-image: '+cs_background_image+' !important; \
    }\
    scrollbar thumb {\
      -moz-appearance: none !important;\
      background-color: '+cs_thumb_color+' !important;\
      background-image: '+cs_thumb_image+' !important;\
      border-radius: '+cs_thumb_roundness+'px !important;\
      border: '+cs_thumb_border+'px solid '+cs_thumb_border_color+' !important; \
    }\
    scrollbar thumb:hover, scrollbar thumb:active {\
      -moz-appearance: none !important;\
      background-color: '+cs_thumb_hover_color+' !important;\
      background-image: '+cs_thumb_hover_image+' !important;\
    }\
    scrollbar scrollbarbutton {\
      -moz-appearance: none !important;\
      background-color: '+cs_buttons_color+' !important;\
      background-image: '+cs_buttons_image+' !important;\
      border-radius: '+cs_buttons_roundness+'px !important;\
    }\
    scrollbar scrollbarbutton:hover {\
      -moz-appearance: none !important;\
      background-color: '+cs_buttons_hover_color+' !important;\
      background-image: '+cs_buttons_hover_image+' !important;\
    }\
    \
  '), null, null);

  ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);

  }
};

var scrollbar_buttons = {

  init: function() {

  var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
    \
    @namespace html url("http://www.w3.org/1999/xhtml");\
    \
    scrollbar scrollbarbutton {\
      opacity: 0 !important;\
    }\
    scrollbar[orient="vertical"] scrollbarbutton {\
      min-height: 1px !important;\
      height: 1px !important;\
      max-height: 1px !important;\
    }\
    scrollbar[orient="horizontal"] scrollbarbutton {\
      min-width: 1px !important;\
      width: 1px !important;\
      max-width: 1px !important;\
    }\
    \
  '), null, null);

  ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);

  }
};

var scrollbar_width = {

  init: function() {

  var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
    \
    @namespace html url("http://www.w3.org/1999/xhtml");\
    \
    scrollbar[orient="vertical"] scrollbarbutton {\
      min-width: 0 !important;\
      width: '+custom_scrollbar_width_value+'px !important;\
      max-width: '+custom_scrollbar_width_value+'px !important;\
    }\
    scrollbar[orient="horizontal"] scrollbarbutton {\
      min-height: 0 !important;\
      height: '+custom_scrollbar_width_value+'px !important;\
      max-height: '+custom_scrollbar_width_value+'px !important;\
    }\
    \
  '), null, null);

  ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);

  }
};

var floating_scrollbars = {

  init: function() {

  var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
    \
    @namespace html url("http://www.w3.org/1999/xhtml");\
    \
    scrollbar {\
      position: relative !important;\
      z-index: 1000000000 !important;\
    }\
    scrollbar, scrollcorner {\
      background-color: transparent !important; \
      background-image: unset !important; \
    }\
    scrollbar[orient="vertical"] {\
      -moz-margin-start: -'+custom_scrollbar_width_value+'px !important;\
      width: '+custom_scrollbar_width_value+'px !important;\
    }\
    scrollbar[orient="horizontal"] {\
      margin-top: -'+custom_scrollbar_width_value+'px !important;\
      height: '+custom_scrollbar_width_value+'px !important;\
    }\
    \
  '), null, null);

  ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);

  }
};

var scrollbar_opacity = {

  init: function() {

  var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
    \
    @namespace html url("http://www.w3.org/1999/xhtml");\
    \
    scrollbar {\
      opacity: '+custom_opacity_value+' !important;\
    }\
    \
  '), null, null);

  ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);

  }
};

var remove_scrollbars = {

  init: function() {

  var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
    \
    @namespace html url("http://www.w3.org/1999/xhtml");\
    \
    scrollbar, scrollcorner {\
      display: none !important;\
      visibility: collapse !important;\
    }\
    \
  '), null, null);

  ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);

  }
};

// oben aktivierte Einstellungen werden hier ausgefuehrt
if(enable_custom_scrollbars==true) custom_scrollbars.init();
if(hide_scrollbar_buttons==true) scrollbar_buttons.init();
if(custom_scrollbar_width==true) scrollbar_width.init();
if(enable_floating_scrollbars==true) floating_scrollbars.init();
if(custom_scrollbar_opacity==true) scrollbar_opacity.init();
if(hide_scrollbars==true) remove_scrollbars.init();

Alles anzeigen

Pentomino

Danke . Scripte nutze ich schon längere Zeit Der von dir angegebene funktioniert auch, ist mir bekannt, nutze ich auch in anderem Profil. Möchte jedoch auf Scripte in Zukunft ganz verzichten. Deshalb wollte ich zunächst auf .css-codes ausweichen. Irgendwie muss das auch in .css ab FF 69 gehen (bin ich fast sicher)

Boersenfeger

BTW: Ist die Zeile 18 so korrekt?

JavaScript

Farbverlauf von links nach rechts - tranparent -> weiss mit 50%er Sichtbarkeit -> tranparent

... oder wird tranparent nicht transparent geschrieben?

milupo

Zitat von Boersenfeger

BTW: Ist die Zeile 18 so korrekt?
... oder wird tranparent nicht transparent geschrieben?

Du hast schon recht, hier spielt es aber keine Rolle, weil das Wort innerhalb eines Kommentars steht.

2002Andreas

Wenn er man bei seinen eigenen Codes so aufpassen würde

milupo

Zitat von Pentomino

Folgender Code funktioniert in FF 69 Nightly nicht mehr (zum Verändern der Farbe/Dicke der Scrollbar):
In FF 68 Beta klappt das noch. Welche Veränderungen sind notwendig ab FF 69?

Und was bitte schön klappt nicht? Siehe folgenden Screenshot:

Hast du jetzt ein anderes Profil? Funktionieren denn überhaupt CSS-Codes bei dir? Wenn die Antworten ja und nein sind, gehe mal in about:config und setze folgende Einstellung auf true:

toolkit.legacyUserProfileCustomizations.stylesheets

Pentomino

Die Antworten sind bei mir eigentlich "ja" und "ja"

Trotzdem war dein Hinweis die Lösung. Nach Einrichten dieser Einstellung funktioniert es auch mit FF 69 Übrigens zusätzlich arbeiteten auch noch weitere .css-Codes, die ab FF 69 keinerlei "Reaktion" (bei mir) mehr aufwiesen....

Vielen Dank für die rasche Auflösung

milupo

Zitat von Pentomino

Vielen Dank für die rasche Auflösung

Gern geschehen.

Hier noch ein Artikel aus Sörens Blog über die Hintergründe. Du kannst diesen Blogartikel auch auf der Nachrichtenseite des Forums lesen.

https://www.soeren-hentzschel.at/firefox/firefo…userchrome-css/

Pentomino

milupo: Einwandfrei ! Für solche Hinweise und Tipps (für "Anwender", die es interessiert) seid ihr Fachleute in diesem Forum halt unbezahlbar

milupo

Zitat von Pentomino

seid ihr Fachleute in diesem Forum halt unbezahlbar

Ja, leider. Ein paar Cents wären manchmal schon nicht schlecht.

Boersenfeger

Zitat von 2002Andreas

Wenn er man bei seinen eigenen Codes so aufpassen würde

// .. ich wollte nur helfen....

milupo

Zitat von Boersenfeger

// .. ich wollte nur helfen....

Und das ist auch gut so. Aber Andreas hat auch recht und schließlich schließt das Eine das Andere nicht aus.

Dass du bei deinem Code besser aufpassen sollst, ist in erster Linie zu deinem eigenen Vorteil. Aber wenn alles immer schon gut wäre, würde ja nichts besser werden.

Boersenfeger

Ich werde es nie mehr lernen...

Speravir

Zitat von 2002Andreas

Nutzt du evtl. schon Scripte?

Wenn ja, dieses funktioniert im aktuellem Nightyl einwandfrei:

Andreas, bitte Quelle nachtragen. Ich weiß zwar nicht, wo Du es herhast, aber es handelt sich hier um ein Skript von Aris, (inzwischen) verfügbar in seinem CustomJSforFx-Github-Repositorium unter custom_scrollbars.uc.js. Ob du oben die aktuelle Version gepostet hast, habe ich nicht überprüft.

2002Andreas

Zitat von Speravir

um ein Skript von Aris

Hallo Speravir..

das kann gut sein., und dafür danke ich ihm dann auch

Ein sehr großer Teil der hier von vielen Usern geposteten Scripte, die sie u.a. selber nutzen, stammt von hier:

https://github.com/ardiman/userChrome.js

Und auch von aborix, der hier sehr viele Scripte extra für einzelne User erstellt hat.

Ganz zu schweigen von den zig CSS Codes die hier gepostetet werden.

Ich habe noch nicht wirklich erlebt, dass jedesmal ein Link gepostet hat, wer das evtl. mal erstellt hat.

Es reicht völlig aus, wenn du das in den jeweiligen Beiträgen raussuchst, und dann den Link dazu postest.

Boersenfeger

BTW: Diese Diskussion wurde nun bereits mehrfach von Speravir angestossen und ich finde das man es nicht noch zichmal durchkauen muss...

Sören Hentzschel

Würden die Quellen benannt werden, dann wäre es nicht notwendig, immer wieder darauf hinzuweisen. Außerdem wurde nicht nur die Diskussion erneut angestoßen, er hat die Quelle nachgetragen. Dafür Danke.

Zitat von 2002Andreas

Ich habe noch nicht wirklich erlebt, dass jedesmal ein Link gepostet hat, wer das evtl. mal erstellt hat.

Genau das ist ja das Problem.

2002Andreas

Man sollte die Kirche im Dorf lassen wie man so sagt.

Dann müsste der Hinweis auch für jeden noch so kleinen CSS Code gegeben werdern, und nicht nur für die Scripte von Aris.

Ich sagte darum ja auch schon:

Zitat von 2002Andreas

Es reicht völlig aus, wenn du das in den jeweiligen Beiträgen raussuchst, und dann den Link dazu postest.

Komischwerweise wird das auch nur bei Scripten so verlangt, die ich hier poste mit dem Hinweis, ich würde es nutzen.

Bei anderen Usern habe ich den Hinweis nämlich noch nicht gesehen.

Pentomino

Zitat von Sören Hentzschel

Würden die Quellen benannt werden, dann wäre es nicht notwendig, immer wieder darauf hinzuweisen.

Meistens werden Codes in der Tat ohne Quellangabe benannt. Nur würde es wahrscheinlich ohnehin zum Chaos führen, wenn man Benutzer 1 als Quelle angibt, der wiederum das Ganze von Benutzer 2 hat und so weiter. Herauszufinden, wer den Code ursprünglich mal erstellt hat, wäre häufig eine aufwändige Recherchearbeit. Ob das hilfreich ist?

Anpassen der Scrollbar ab Firefox 69

Ähnliche Themen

Multi-Row Tableiste per Userchrome anpassen

Youtube Scrollbar

Scrollleiste schwarz einfärben