Fandom

Wikia Deutschland

Kommentare10

Warum MediaWiki-CSS besser als Inline-CSS ist

Störung durch Adblocker erkannt!


Wikia ist eine gebührenfreie Seite, die sich durch Werbung finanziert. Benutzer, die Adblocker einsetzen, haben eine modifizierte Ansicht der Seite.

Wikia ist nicht verfügbar, wenn du weitere Modifikationen in dem Adblocker-Programm gemacht hast. Wenn du sie entfernst, dann wird die Seite ohne Probleme geladen.

Viele von euch haben sicherlich schon einmal den Quelltext-Editor benutzt, doch nur ein Teil der Bearbeiter nutzt diesen regelmäßig. Dieser Blog richtet sich primär an diese Bearbeiter, für alle anderen dürfte das Ende aber vielleicht auch interessant werden. ;)

Style-Attribut

Jeder kennt das Gefühl: Du sitzt 5 Minuten vor einem Artikel, tippst ein paar Zeilen Wikitext ein und aus dem Nichts erscheint eine gestalteter formatierter Absatz. Nach diesem Meisterwerk behandeln dich alle wie einen Zauberer der Neuzeit, dabei war es doch ganz einfach!

Meistens wurde in solchen Fällen das Style-Attribut verwendet, denn mit dessen Hilfe lassen sich CSS-Eigenschaften wie Textfarbe und Rahmen ganz einfach festlegen. Doch ist das wirklich der beste Weg, um seine Texte schön zu gestalten?

MediaWiki-CSS

„Wie, nicht der beste Weg? Es gibt noch andere?“ könnte jetzt die Frage lauten. Wenn das der Fall sein sollte, hast du dich wohl noch nicht so mit der MediaWiki-CSS beschäftigt.

Um für jeden Skin CSS-Anpassungen vorzunehmen, wird die MediaWiki:Common.css verwendet. Die MediaWiki-CSS-Seiten funktionieren im Prinzip genau so wie die persönlichen CSS-Seiten. Jedoch wirken die MediaWiki-Anpassungen auf alle Benutzer eines Wikis.

Anwendung

Puh, jetzt haben wir 4 CSS-Seiten, aber wir wissen nicht, wie mithilfe dieser Seiten unsere Artikel beeinflussen. Wenn du es gesehen hast, solltest du keine großen Schwierigkeiten beim Verstehen haben.

Es braucht eigentlich nur 2 große Schritte, um eine Artikelanpassung mithlife von MediaWiki-CSS zu erreichen:

CSS-Klasse erstellen

Der erste Schritt ist, eine CSS-Klasse auf der MediaWiki-Seite zu erstellen. Dazu fügen wir einfach folgenden Code auf die MediaWiki-Seite ein:


.Name

{

}


„Name“ ersetzen wir einfach durch einen geeigneten Klassennamen. Wenn die Klasse eine Warnungsbox-Formatierung bewirkt, bietet sich „Warnung“ gut an.

Wenn wir uns mit unserem Namen begnügt haben, kommen wir zur eigentlichen Arbeit: Die Klasse wird mit Anpassungen gefüllt. Da wir eine Warnungsbox erstellen wollen, verleihen wir ihr ein auffälliges Aussehen:


.Name

{

background:#333333;

border:2px solid #AA0000;

border-radius:15px;

color:#EE0000;

text-align:center;

}


Nun haben wir eine CSS-Klasse definiert, womit auch schon der erste Schritt beendet ist.

Die CSS-Klasse in einem HTML-Element aufrufen

Im zweiten Schritt suchen wir uns ein Element, auf das wir unsere Anpassungen anwenden wollen. Dazu nehmen wir zum Beispiel ein <div>-Element und ersetzen das „style“-Attribut durch ein „class“-Attribut. Dort fügen wir jetzt den Namen unserer Klasse ein, und zwar so:


<div class="Warnung">

Achtung!

</div>


Falls wir nun eine CSS-Klasse namens „Warnung“ in der korrespondierenden MediaWiki-Seite haben, werden die Anpasungen auf das <div>-Element angewandt. In unserem Beispiel dürfte das so aussehen:

Achtung!

Somit haben wir dieses Element mit MediaWiki-CSS angepasst. Jetzt können wir weitere Elemente damit anpassen, ohne dabei die CSS-Anpassungen neu eingeben zu müssen!

Vorteile

Da erklärt der Trollo wie man auf die CSS-Klassen umsteigt, doch warum sollte man zum geliebten style-Attribut adieu sagen und sich in das tiefe dunkle CSS-Loch mit gewissen Drachen stürzen?

Die Gründe sind eigentlich ganz simpel und verständlich:

Cache

Ein wichtigste Grund ist, dass das MediaWiki-CSS im Cache gespeichert wird. Beim Inline-CSS hingegen werden die Anpassungen jedes Mal neu geladen und besonders bei Artikeln mit vielen Anpassungen…dauert…das…lange. Langfristig gesehen bietet das einen sehr großen Vorteil gegenüber dem Inline-CSS, besonders für größere Wikis.

Zeitersparnis

Inline-CSS nimmt viel Zeit in Anspruch, denn besonders bei Elementen mit vielen Anpassungen muss man oft lange tippen oder kopieren. Bei MediaWiki-CSS muss man die Anpassungen nur ein einziges Mal aufschreiben und im Artikel den Klassennamen eingeben. Die Zeitersparnis ist daher oft enorm.

Einheitlichkeit

Es ist immer wieder unschön zu sehen, wie in einem Artikel 4 verschieden aussehende Tabellen stehen. Würde man MediaWiki-CSS benutzen, wäre das sicherlich nicht passiert, außer wenn ein DAU es geschafft hätte, verschiedene CSS-Klassen zu verwenden. Aber auch für andere Elemente ist MediaWiki-CSS anwendbar, zum Beispiel auf Hinweisboxen oder hervorgehobenen Text.

Änderung auf Knopfdruck

Falls man das Design eines Wikis verändert, muss man auch das zugehörige Inline-CSS von Vorlagen, Tabellen und Textabschnitten verändern. Besonders bei großen Wikis ist das anstrengend, weshalb sich oft auch von Design-Veränderungen fern gehalten wird.

Das MediaWiki-CSS befindet sich auf einer bis vier Seiten und die Änderungen werden sofort auf jedes Element angewandt, das CSS-Klassen verwendet. Besonders für Admins ist das ein großer Vorteil.

Code-Schnipsel

Manche Elemente sollten oder können kein class-Attribut erhalten. Dabei wird die CSS-Klasse des Elementes verändert, ohne eine neue zu erstellen. Einige der Klassen dieser Elemente, sowie ein paar andere nützliche Code-Schnipsel habe ich hier aufgeführt:

h

.WikiaPage h2


Dieser Code verändert die größten Überschriften im Wiki, die mit ==text== erzeugt werden. h3, h4 und h5 jeweils die weiteren Unterüberschriften.

page

.page-Seitenname


Durch diesen Code wird nur das CSS auf einer bestimmten Seite verwendet. Leerzeichen, Bindestriche, Doppelpunkte und andere Sonderzeichen werden einach durch Unterstriche ersetzt.

WikiPageHeader

.WikiPageHeader {display:none}


Möchte man Seitentitel nicht auf der Seite erscheinen lassen, wird dieser Code verwendet. In Verbindung mit page kann man damit auf bestimmten Seiten Seitentitel ausblenden.

CSS-Lego

Stein für Stein können wir ein großes Konstrukt bilden, hier sprechen wir von Lego. Doch das gleiche geht auch bei CSS!

CSS-Klassen sind beliebig miteinander kombinierbar, daher bieten sich uns viele Gestaltungsmöglichkeiten.

Um mehrere CSS-Klassen auf ein Objekt anzuwenden, geben wir einfach folgenden Wikitext ein:

<div class="Klasse1 Klasse2">


Wir müssen also lediglich unsere CSS-Klassen mit Leerzeichen getrennt hintereinander schreiben.

Wenn wir oft gebrauchte Anpassungen in der MediaWiki-CSS als Klasse definieren, bieten wir so eine praktische Funktion für andere Benutzer. Benutzer, die sonst zu unvertraut mit dem Quelltext-Editor sind.

Hier habe ich noch oft gefragten Code aufgeführt, den man einfach kopieren und verändern kann.

Schlusswort

Das war es schon wieder mit meinem Blog. In meinem nächsten Blog werde ich das CSS von portablen Infoboxen behandeln. Habt ihr Feedback, Bitten oder Vorschläge für weitere Blogthemen? Die Kommentare sind das perfekte Mittel dafür!

Auch bei Fandom

Zufälliges Wiki