Der Originalblog User_blog:DEmersonJMFM/Understanding_CSS_Selectors wurde im englischen Community Central von dem Benutzer DEmersonJMFM verfasst und veröffentlicht und von den deutschen Portabilitäts-Pionieren für das deutsche Portability Wikia übersetzt.
CSS-Anpassungen sind ein wichtiger Bestandteil einer Wikia-Community und ein solches Styling unterscheidet ein langweiliges Wiki von einem mit dem „Wow!“-Faktor. Obwohl es so wichtig ist, weiß nicht jeder Admin, wie er seine MediaWiki-CSS-Seiten korrekt bearbeiten soll. Dieser Blog-Beitrag ist eine grobe Zusammenfassung, wie man zu einem guten CSS-Styling findet und wie man es wartet.
Wie findet man den richtigen Selektor?
Google Chromes Webseiten-Untersucher
Wahrscheinlich ist die größte Hürde beim Erstellen von CSS für sein Wiki das Finden der richtigen CSS-Klassen und Selektoren für das Element, das man verwenden will. Generell lassen sich solche Informationen durch eine Vielzahl von Browser-Tools finden.
Zum Beispiel können Benutzer, die Google Chrome nutzen, einen Rechtsklick auf das Objekt, das sie verändern wollen tätigen, das Kontextmenü des Browsers öffen. Dieses Menü enthält den Punkt „Untersuchen“ (Strg+Umschalt+I). Bei Browsern wie Firefox heißt das Menüelement „Element untersuchen“ und hat das Tastenkürzel Rechtsklick+Q. Sobald man auf „Untersuchen“ oder „Element untersuchen“ geklickt hat, erscheint ein Fenster, das dem Fenster im Bild ähnelt. Hier kannst du das gesamte Styling der aktuellen Seite sehen oder aber auch nur die Regeln, die dein angeklicktes Element verändern. Sobald man mit der Maus über ein Element in der linken Spalte fährt, sieht man dieses Element hervorgehoben auf der Webseite. Die Style-Selektoren befinden sich in der rechten Spalte. Um die gewünschte Klasse herauszufinden, können einzelne Styles für den Selektor deaktiviert und wieder aktiviert werden, indem man die ankreuzbaren Kästchen links neben den Regeln anklickt. Wenn man dies tut, wird das Element auf der Webseite sofort dementsprechend verändert, damit man sieht, wie die Veränderung die Webseite verändert, ohne eine CSS-Seite bearbeiten zu müssen.
Ein gewählter Selektor wird nicht immer funktionieren, selbst wenn er im Style-Inspektor angezeigt wird (diese Selektoren werden meist ausgegraut). Manchmal musst man die Abstände verändern oder vorne angehängten Code wie div oder section entfernen. Meist hilft das Herumspielen mit den Tools des Browsers bei der Identifizierung des richtigen Klassen-Selektors durch pures Ausprobieren.
Sei so spezifisch wie möglich. Ein häufiger Fehler (der zu ungewollten Styling-Veränderungen im ganzen Wiki führt) ist es, einen Selektor zu benutzen, der zu ungenau ist. Zum Beispiel betrifft .WikiaRail .module das Styling des Chat-Moduls, aber auch jedes anderen Moduls in der Rail. Die angemessenere Wahl wäre stattdessen hier .ChatModule .module. Gib immer Acht, besonders wenn du Überschriften veränderst.
Wo befinden sich die Selektoren?
Persönliches CSS überschreibt Seiten-CSS
Die Beantwortung dieser Frage kann beim Beheben von Styling-Bugs im persönlichen oder wikiweiten CSS helfen. Rechts neben den Selektoren kann die Quelle des Stylings gefunden werden.
site:1- das Styling stammt aus den MediaWiki-CSS-Seiten.user:1- das Styling stammt aus den lokalen oder globalen persönlichen CSS-Seiten des Benutzers.Qualaroo.scss:2- das Standard-Styling von Wikia wird verwendet..- Leer (
element.stylein der Selektor-Umgebung) - das Styling stammt aus Inline-CSS oder einer Vorlage. load.php?debug=...s.importArt...:1- das Styling stammt aus Skript-Seiten (meist aus JS-Seiten).
Plötzlich funktioniert es nicht mehr?
Achte auf plötzliche Klassen-Updates!
Wikia entwickelt sich ständig weiter und verändert den Code, also sollten Änderungen von Klassen erwartet werden. Code, der plötzlich aufhört, zu funktionieren, kann eine Folge einer Klassenänderung sein, die normalerweise im technischen Update-Blog von Wikia angekündigt wird. In diesen Updates gibt es einen Link zu den wöchentlichen Klassenveränderungen, die eine Dokumentation der Klassen- und Styling-Veränderungen beinhalten.
Zusätzliche Tipps
Seiten- und Benutzer-CSS können individuell oder gemeinsam mithilfe von URL-Anweisungen (?useusercss=0 und ?usesitecss=0) am Ende der URL temporär abgeschaltet werden. Das ist beim Herausfiltern von Styling, das das zu verändernde Objekt beeinflussen könnte.
Fürchte dich nicht davor, Fehler zu machen. Einer der besten Wege, CSS zu lernen, ist einfach anzufangen und es auszuprobieren. Beginne mit dem Styling in deinem persönlichen CSS und fahre dann, mit gewonnener Selbstsicherheit, mit dem Erstellen des einzigartigsten Wikis in der digitalen Welt überhaupt fort!