Platzsparende Scrolleisten für Chrome
Gerade auf Netbooks ist Platz wichtig und da sind die 15-17 Pixel für die Scrollleiste auf Webseiten eigentlich verschwendeter Platz. Abhilfe für Google Chrome schaffen einige Erweiterungen, aber es muss nicht immer Erweiterung sein.
Mit dem Anpassen einer Datei, die auch Updates „überleben“ sollte, kann man sich zusätzlichen Platz für die Webseite holen. Auf Windows 7 ist die vertikale Scrollbar 17 Pixel breit. Auf Ubuntu bspw. 15. Mit der Anpassung ist die Scrollbar nur noch 3 Pixel breit und kann zudem noch an das verwendete Design angepasst werden.
Dazu öffnet man die Datei Custom.css in C:\Users\Benutzername\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets (Windows 7 und Vista) mit einem Texteditor. Am besten verwendet man hierfür aber nicht den Texteditor von Windows sondern nutzt Notepad ++.
In diese Daten fügt man diesen CSS-Code ein:
#body{}
::-webkit-scrollbar
{
width: 3px;
height: 3px;
}
::-webkit-scrollbar-track-piece
{
background-color: #ffffff;
-webkit-border-radius: 3px;
}
::-webkit-scrollbar-thumb:vertical
{
height: 5px;
background-color: #666;
-webkit-border-radius: 3px;
}
::-webkit-scrollbar-thumb:horizontal
{
width: 5px;
background-color: #666;
-webkit-border-radius: 3px;
}
Jetzt die Datei speichern und Chrome neustarten. Nun sollte die Scrollbars ungefähr so ausschauen:
(zur Verdeutlichung orange eingerahmt)
Wem das Grau nicht gefällt, braucht nur den Wert #666; zu ändern. Logischerweise lässt sich das auch noch etwas mehr anpassen. So kann man auch einen Abstand zum Bildschirmrand einfügen und die Leiste breiter geschalten.
Auf Ubuntu findet man die Datei in ~/.config/google-chrome/Default/User StyleSheets.
Wem das Ganze zu komplex ist, kann auch auf eine Erweiterung zurückgreifen.
Übrigens kann man als Webmaster ebenfalls die Scrollbars per CSS anpassen. Derzeit kann dies aber nur Webkit. Wie das aussehen kann, zeigt zum Beispiel Sergej Müller auf seinem Blog.
[via]
GoogleWatchBlog bei Google News abonnieren | GoogleWatchBlog-Newsletter
Teile diesen Artikel:
Cool, aber auf manchen Seiten (z.B. mit schwarzem Hindergrund) sieht es schlecht aus. Und wenn man den Hintergrund weg lässt, buggt es.
du kannst ja bspw. noch einen weißen rahmen rum machen.
oder einfach ein helleres grau als Hintergrund nehmen, dann hebt sich das auch etwas besser ab.
Danke für diesen coolen Tipp! 🙂
Thin Scroll Bar
Thin Scroll Bar to increase screen space for little more visibility. It is thin to show current position on the document
The extension simply replaces the default scroll bar provided by the browser.
http://go.gglwat.ch/it7ps6
http://go.gglwat.ch/it7ps6
Genau die Erweiterung ist oben verlinkt.
stimmt.
Die Scrollbar ist definitiv von Unity aberschaut ^^
Aber dennoch gut.
Erinnert mich stark an die Safari-Scrollbars auf dem iPhone. 😉
Ich fand den Scrollbalken im Browser unter Windows immer schon hässlich, aber auch zu breit. Auch unter Mac ist die Scrollleiste kaum schmaler. Mit dieser CSS-Anpassung direkt im Blog-Stylesheet lässt sich diese bis auf ein Minimum reduzieren und kann kontrastreich zum Hintergrund angelegt werden. Und das beste: Ohne JavaScript, nativ im Browser.
Danke für die Nennung meines Blogs, Pascal.
Mit dem Padding und der Breite ist die Scrollleiste an sich doch wohl kaum schmaler als die Standardmäßige 😡
Hinzu kommen die unscharfen Konturen, die das ganze irgendwie nicht wirklich ansprechend aussehen lassen.
Sorry, aber geht garnicht in meinen Augen.
Mit ein wenig CSS-Kentnissen kann jeder das Aussehen der Leiste so anpassen, wie er möchte. Scharf, kantig, rot, abstandlos. Das ist der wesentliche Vorteil der Lösung.
Tja – Dafür kann ich auf deiner Seite nicht mit dem Pfeiltasten scrollen – genauso wenig mit dem Mausrad. Das ganze im aktuellen Stable Build von Chrome.
Für mich ist das nur eine Spielerei. Was interessiert dem Designer, wie die Scrollbar beim User aussieht?
Für mich ist die Scrollbar Bestandteil des Browsers, und nicht Bestandteil der Seite.
@Benny
Es liegt an der Chrome Version. Es funktioniert definitiv auch auf Chrome (Pfeiltasten & Mausrad), sonst würde ich es nicht live stellen, ne.
Das ist ein Fehler in Chrome 11.
Mit Chrome 12 geht es.
Der wird bald kommen.
Tja – wird „bald kommen“ ist, aber nicht „es funktioniert“. Man kann nicht davon ausgehen, dass jeder auf dem Beta oder Dev-Channel hockt oder Nightly Builds von Chromium nutzt.
Demnach kickst du den User, der die Stable nutzt, von deiner Seite.
Mal schauen ob sich diese Funktion irgendwie blocken lässt. Wie gesagt: Das ist Sache des Browsers, und nicht Sache der Webseiten. Ich möchte nicht, dass Webseiten-Betreiber an meiner GUI werkeln können.
Chrome 12 wird nach Googles Zeitplan in der kommenden Woche erscheinen.
Übrigens gibt es einige Seiten, die so was ähnliches schon drin haben:
Twitter. Die machen es aber anders.
Heutzutage kann man eine Webseite auf allen Betriebssystem und Browsern (browser ist für micht alles was NICHT mit I anfängt und nternet Explorer endet) gleich ausschauen lassen. Bei uns bspw. werden Buttons schon jetzt mit CSS geändert.
Der Bug in Chrome hindert mich derzeit daran auch die Scrollleiste etwas anzupassen. Einige Wochen nach Chrome 12 werden wir mit einer solchen Scrollbar experimenteiren, die zu unserem Design passt und browserunabhängig ist, auch wenn es derzeit nur Webkit kann.
Es gibt Websites, die können sich das leisten, auf 0.1 % der Nutzer zu verzichten – tut auch nicht weh, hab ich probiert. Zudem muss man nicht immer auf Experimente verzichen, die in einem Browser fehlerhaft implementiert wurden. Hatten wir beim IE6 schon mal den Salat.
Wie gesagt: Für mich ist die Scrollbar teil der GUI des Browsers, und nicht teil der Webseite, weshalb solch Möglichkeiten gar nicht ins CSS gehören.
Demnächst werde ich mich wohl nach ’ner GWB-Alternative umschauen müssen, nachdem man schon den Ursprungs-WP-Theme so sehr verhunzt hat, dass man am liebsten weinen möchte.
Sei es drum. Aber wer auf „Stable“-User verzichtet, hat den Schuss nicht gehört.
Das hängt mehr vom Betriebssystem ab…
Ich versteh kein Problem nicht. Es funktioniert alles nach wie vor alles. Man kann mit der Maus Scrollen und verschieben geht auch. Nur die Button ↑ und ↓ werden fehlen.
Den Ansatz einer schmalen Scrollbar haben übrigens nicht nur Webmaster. Auch Ubuntu 11.04 setzt darauf und Apples Mac OS X 10.7 wird ebenfalls mit so einem Design ausgeliefert.
ich hab übrigens nicht gesagt, dass wir es 100%ig umsetzen werden. Wir werden es erst einmal intern ausprobieren und dann entscheiden.
Du kannst dir schon mal einen neuen Browser suchen, weil Chromes Druck Vorschau ebenfalls auf diese per CSS gestalteten Scrollbar setzen wird.
PS: was ist dein Problem damit?
Dass es dem GUI des Browsers gehöhrt, ist für mich kein Argument.
PPS: Was stört dich am Design?
@Horst: Es ist ein Unterschied, ob der Browser die GUI mit CSS bearbeitet, oder ob es die Webseite macht. In einem CSS einer Webseite haben solche „Spielereien“ einfach nichts zu suchen, da wie gesagt, der Scrollbalken für mich zur grafischen Oberfläche des Browsers gehört, und nicht zur Webseite, die ich gerade besuche.
@Pascal: Und weiter? Eben. Die Software gibt die GUI vor, und nicht irgendeine Webseite. Zumal das einfach wieder dem „in allen Browsern möglichst gleich auszusehen“ widerspricht. Die -webkit-Klassen erkennen eben auch nur Browser, die mit WebKit arbeiten. So sieht die Seite also in FF oder Opera auch schon wieder anders aus. Und den IE kann, und darf man nun einmal nicht vollends ignorieren.
Ein bisschen weniger Fanboiismus bitte.
Sollte diese Funktion in CSS3 aufgenommen werden, wird es auch der Firefox übernehmen.
Der Internet Explorer ist bei uns nicht mehr weit vom einstelligen Wert entfernt und Webkit hat Mozillas Gecko schon fast eingeholt. D
Wenn man stur nach den Anteilen der Browser geht, muss man auf einige Features verzichten.
Bsp: border-radius:
nativ kann es Opera ~10, Chrome ~6, Firefox 4 sowie Internet Explorer 9
darunter mit -moz-, oder -webkit-prefix
gradient: kann keiner nativ, alle nur mit prefix, -moz, -webkit, -o,
was für Dich dagegen spricht, ist mir nach wie vor schleierhaft. Übrigens gäb es die Buttons sogar, falls es daran scheitert:
http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/overflow-scrollbar-combinations.html
Natürlich, der Werte Herr kann es sich leisten 0,1% der user auszuschließen.
Sag mir wenn ich da falsch liege, aber wenn im Schnitt 25% der Leute Chrome nutzen und davon 80% die aktuelle stabile Version, wo und wie komme ich da auf 0,1%.
Und welchen Vorteil hat es für den Nutzer, davon ausgehend dass die Sache an sich funktioniert, wenn man auf Webseite A einen 4px breiten und schlichten Scrollbalken hat, auf B den Standard des Browsers und auf C son hässliches Geussel wie hierwo jede Definition von Schärfe abhanden gekommen ist?
Im Schnitt 25%? Hehe, träum schön weiter.
Harte Ansage – mehr als zynisches Geblubber muss doch wohl drin sein.
Ich habe mich bei den 25% auf die Statistiken des W3 gestützt.
Auf Grund des Themas deiner Seite und dieser hier gehe ich allerdings davon aus, dass es weit mehr als 25% sind. Was meine Aussage nur noch deutlicher unterstützen würde, und dein Gefasel von 0,1% noch unangebrachter.
Übrigens funktioniert die CSS-Abänderung der Scrollleiste auch in der stabilen Version. Das Problem ist lediglich, dass du die ganze Sache falsch implementierst.
http://go.gglwat.ch/kC3Z4k
Mag ich irgendwie mehr, auch wenn sie nicht so klein sind 🙂
So wenig platz kann man doch gar nicht haben?
Ich denke es geht in erster Linie um den „Style“. Ich mag die Standard-Scrollbalken auch nicht, da die sich einfach 0 ins Gesamtbild von Chrome einfügen. Auch allgemein sind Windows-Scrollbalken einfach nicht die Schönsten.
Ich persönlich nutze da Scrolly.
http://goo.gl/5DKep
Das habe ich auch als erstes gedacht.
Aber wenn man mal mit einem „kleinen Netbook“ Google Chrome öffnet & im Internet surfen will, ist der Balken bestimmt für einige User extrem störend. Da muss man allen Platz nutzen, den man auf den kleinen Netbook Screens hat. 😉
Natürlich kommt das auch auf den persönlichen „Geschmack“ an denke ich.
Das ist wirklich ein super Tipp für Netbook User finde ich.
Zum Glück muss ich nicht zu solchen Maßnahmen greifen, denn ich habe noch genug Platz. Besonders cool finde ich aber, das man auch die Farbe anpassen kann, wenn man will.
Super Artikel.
Führt aber zu kleinen Darstellungsfehlern auf manchen Seiten.
Beispiel wäre da die Wochenansicht im Google Kalendar. Da „verrutscht“ der Teil mit den ganztägigen Terminen etwas
Meine Meinung nach kommt es nur für kleine Tablet PCs in betracht, wo man über den Touchscreen alle scrollt und so die Srollleisten lediglich eine Darstellungs- und keine Bedienfunktion beinhalten. Für mich sind insbesondere die sehr kleinen Scrolleisten bei Textboxen ein Problem, sodass ich mich entschieden habe sie wieder zu deaktivieren.
Ganz generell wäre es schön, wenn man gar nicht so viel scrollen muss, da die Webseiten sich an die Größe des Bildschirmes anpassen. Bei meinen 1920 Pixeln Bildschirmbreite nutzt dieser Blog gerade etwas mehr als die Hälfte.