Stylish – Websites selbst stylen

Ich denke mal jeder kennt es. Man ist im Internet unterwegs und man kann wieder einmal etwas nicht richtig lesen, weil der Webdesigner nicht dran gedacht hat, dass es auch Menschen gibt, welche eine andere Auflösung haben, ein anderes Sehverhalten haben oder ähnliches. Auch die Zeilenlänge ist manchmal ein Problem, gerade bei Widescreen-Monitoren. Mit Stylish – einem Add-On für Firefox – ist das nun vorbei!

Zumindest für Menschen, welche sich etwas mit distem Webdesignen auskennen, denn man muss sich zumindest ein bisschen mit CSS auskennen. Denn diese Sprache gibt den heutigen Webseiten ihr Aussehen. Stylish kann direkt auf diese Eigenschaften via Browser-Stylesheet (Das Stylesheet, welches jeder Browser von Haus aus mitliefert) zugreifen.

Für Menschen, welche sich nicht mit CSS auskennen, gibt es natürlich auch noch eine Alternative. Auf Userstyles.org kann man sich bereits vorgefertigte Styles herunterladen, welche das Aussehen einer Seite vollautomatisch und in Echtzeit verändern. Nach einem Klick auf „Site styles“ bekommt man eine kleine Übersicht über die populärsten Seiten – bzw. diejenigen, welche am häufigsten gesucht wurden.

Denn eine Suche bringt diese Seite natürlich auch mit. Über diese kann man gezielt nach Seiten suchen, welche nicht in dieser kleinen Liste aufgeführt sind. Wie zum Beispiel google.de, denn dort ist nur google.com aufgeführt, doch auch diese kann man leicht ändern, was SemperVideo in einem zweiteiligen Videotutorial sehr schön zeigt. Die Links zu diesem Tutorial sind am Ende des Beitragen zu finden.

In diesem Tutorial wird auch sehr gut erklärt, wie man Styles von Userstyles.org installiert, deaktiviert und wieder aktiviert. Für unerfahrene User ist es auf jeden Fall ein Blick wert.

Ein Beispielcode für ein eigens von mir verändertes Stylesheet möchte ich hier auch einmal zeigen. Dieser Code ist für mein Stammforum dem Homepage-Forum. Dieses passt sich von der Breite her immer dem Browserfenster an und das ist manchmal sehr belastend, wenn man einen Widescreen hat und längere Texte lesen muss. Ich habe das Fenster zwar nicht maximiert, doch auch 1280 Pixel sind zu viel.

Aus diesem Grund habe ich den Zeilenabstand erhöht und die Textabschnitte schmaler gemacht. Das ganze sieht dann in Stylish so aus:

@-moz-document domain(homepage-forum.de) {
  div[id^=post_message_] {
    width:35em !important;
    line-height:1.5 !important;
    margin-left:5px !important
  }
  div[id^="post_message_"] div[class="smallfont"]+table {
    width:45em !important;
    line-height:1.5 !important;
    margin-left:-10px !important
  }
  td.alt2 {
    line-height:1.5 !important
  }
}

Für die meisten wird das ganze jetzt nach Fachchinesisch aussehen, doch ich nehme mir mal die Freiheit das ganze ein wenig zu erklären:

Der Teil @-moz-document domain(homepage-forum.de) ist so ziemlich der wichtigste Teil. Dieser sagt Firefox, dass diese Anweisungen nur für die Seite „homepage-forum.de“ gelten sollen. Das ganze wird in geschweifte Klammern gefasst, damit der Browser weiß, wo es anfängt und wo es aufhört, eine typische CSS-Syntax.

Die weiteren Teile sind eher den Profis unter den Webdesigner bekannt, denn ein Code wie div[id^=post_message_] ist schon sehr speziell und wird nur von modernen Browsern unterstützt. Also noch keiner Version des Internet Explorers. Der Anfang – also div – steuert das Element an, welches formatiert werden soll, doch würden wir dies alleine stehen lassen, dann wären alle dieser Elemente betroffen.

Aus diesem Grund fügen wir den Teil hinzu, welcher in den eckigen Klammern steht. Dieser besagt folgendes: Ein Element, welches eine ID besitzt die mit der Zeichenreihenfolge post_message_ beginnt. Das trifft im Homepage-Forum auf alle Posts zu. Das Zeichen ^ ist das wichtigste an dieser Stelle, da ohne dieses alle Elemente mit der ID post_message_ angewählt werden würden und diese gibt es nicht – so werden alle angewählt, welche damit beginnen.

Ein weiteres Mal folgen geschweifte Klammern, welche Anweisungen für dieses Element fassen. Die Eigenschaft width gibt die Breite an. Ich habe diese mit 35em gesetzt, was in diesem Fall knapp 500 Pixel sind. Em habe ich gewählt, da sich dies auch bei Schriftvergrößerung mit vergrößert. Das !important hinter der Anweisung ist sehr wichtig, da die meisten Angaben sonst nicht übernommen werden. Es besagt, dass diese Regel auf jeden Fall benutzt werden soll, egal was irgendwo anders angegeben wurde.

Das dürfte dann auch als kleinen Exkurs reichen, da dieser Beitrag sonst zu lang wird.

Kurz möchte ich aber noch die Frage beantworten, wie man herausfindet, welches Element wie benannt ist. Entweder man streicht es an und benutzt die Firefox-Funktion „Auswahlquelltext anzeigen“ oder man benutzt das Add-On Web Developer, welches jeder Webdesigner so oder so installiert haben sollte. Bei diesem geht man dann auf die Option „Informationen“ und dann auf den Punkt „Elementinformationen einblenden“. Dann kann man mit der Maus über die einzelnen Bereiche fahren und bekommt angezeigt, wie diese verschachtelt sind. Nach einem Klick auf dieses Element bekommt man noch nähere Informationen.

Links zum Thema:

• Stylish-Download
• Stylish für Chrome
• Userstyles.org
• SemperVideo Tutorial Teil 1 – Teil 2
• Web Developer-Download