CSS & SharePoint – Freunde fürs Leben

«Das Auge isst mit» – dieser Spruch gilt nicht nur für Köche, sondern auch für Entwickler, und genau deswegen ist das Anpassen einer SharePoint Seite oft nicht nur der letzte Schliff, sondern ein wichtiger Bestandteil eines jeden Projektes.

Das SharePoint Color Palette Tool (https://www.microsoft.com/en-us/download/details.aspx?id=38182) nimmt Ihnen durch das Einfärben aller UI Elemente schon einige Arbeit ab, doch ganz gemacht ist es damit noch lange nicht. Oftmals müssen Sie mit CSS noch weitere Anpassungen vornehmen.

«Igitt, CSS»

CSS ist für viele SharePoint Backend Entwickler ein unbekanntes Terrain, die Grundlagen sind aber eigentlich enorm einfach: Ein «Selector» definiert, welche Elemente angesprochen werden, die «Rules» definieren, was mit den Elementen gemacht wird. Wenn ich in SharePoint 2016 ein Logo, welches höher als 50px ist, erkennbar machen will, müsste ich folgende Eigenschaft anpassen:

example_selector

Der Selektor, der oben das Element anspricht, heisst .o365cs-nav-header16 .o365cs-nav-tenantLogo img. Er bedeutet übersetzt, dass alle Bilder (img) angesprochen werden, welche sich in der Klasse o365cs-nav-tenantLogo befinden, die sich wiederum in der überliegenden Klasse o365cs-nav-header16 befinden muss. Wenn dies auf ein Element zutrifft, dann werden die Eigenschaften, welche sich in den geschweiften Klammern befinden, auf das Objekt übertragen.

Mehr Informationen zur Schreibweise finden Sie unter folgendem Link: https://www.w3schools.com/css/css_syntax.asp

«Das ist ja schon cool und so… aber warum werden meine Änderungen nicht übernommen?»

CSS arbeitet mit einem Wertesystem: Eigenschaften, die aus Selektoren mit höheren Werten kommen, überschreiben Eigenschaften der Selektoren mit tieferer Wertigkeit.
Betrachten wir nochmals das Beispiel aus dem vorherigen Kapitel. Wenn Sie die maximale Höhe von Bildern mithilfe des Attributs max-height von 50px auf 100px ändern möchten, dann reicht es nicht aus, img { max-height: 100px; } zu schreiben.

overwrite

Im Beispiel sieht man, dass unser Attribut max-height des zweiten Selektors img durchgestrichen ist. Das liegt daran, dass der erste Selektor .o365cs-nav-header16 .o365cs-nav-tenantLogo img genauer definiert ist.

«Hä? Wie jetzt? Ich spreche ja alle Bilder an!»

Die Bilder werden zwar angesprochen, aber derjenige Selektor, der verwendet wird, um einem Bild die maximale Höhe von 50px zu geben, hat einen höheren Wert als der andere Selektor – und zwar 21 Punkte, um genau zu sein.

Das Wertesystem ist ziemlich einfach:

Name Anwendung Punkte
Typ-Selektor img { max-height: 50px; } 1
Klassen-Selektor .klassenName { max-height: 50px; } 10
ID-Selektor #idName { max-height: 50px; } 100
Important-Attribut img { max-height: 50px !important; } 999999999999999+1

Durch Kombination der Selektoren lässt sich ein Wert erhöhen und die CSS-Eigenschaften von Elementen überschreiben. Der Selektor img aus dem Beispiel des vorherigen Kapitels ist ein Typ-Selektor und hat einen Wert von nur einem Punkt. Kombinieren Sie diesen mit einem Klassen-Selektor zu img.klassenName, erhöhen Sie seinen Wert auf 11 Punkte.
Wenn Sie mit dem Wertesystem experimentieren wollen, können Sie Ihre Selektoren auf folgender Seite prüfen: https://specificity.keegan.st/

Übrigens: SharePoint 2016 arbeitet generell mit Werten unter 200 (Beim Styling der UI-Elemente).

«Genial! Ich verwende jetzt nur noch !important»

Tun Sie das nicht! Für eine saubere Wartung und einen einfacheren Umgang mit CSS ist es essentiell, dass man Eigenschaften von Elementen schnell und einfach überschreiben kann. Als Entwickler möchten Sie sich nicht bei jeder einzelnen Änderung zuerst damit befassen müssen, warum diese nicht angewendet wird. Daher empfehle ich Ihnen, Ihr CSS so aufzubauen, dass Sie mit möglichst tiefen Werten arbeiten können.

Die Seite https://jonassebastianohlsson.com/specificity-graph/ ermöglicht Ihnen, Ihre CSS Files nach Selektoren-Werten zu testen. Dafür können Sie einfach Ihr CSS in das Eingabefeld der Seite einfügen.

ok

Das Bild oben zeigt Ihnen ein Beispiel einer durchschnittlichen Lösung. ID-Selektoren wurden verwendet wenn es nötig war, ansonsten wurde darauf geachtet, mit möglichst kleinen Werten zu arbeiten. Gegen Ende des CSS-Files wurden höhere Werte verwendet, um vorherige Elemente zu überschreiben.

bad

Hier sehen Sie ein ziemlich schlechtes Beispiel. Es wurde oft mit hohen Werten gearbeitet und die Wartung des UI dieser Lösung wird infolgedessen einiges mehr an Aufwand generieren.

Der generelle Leitspruch dazu lautet: «Don’t throw new rules at bugs»

Mehr Infos zu CSS-Workflow finden Sie hier: https://hacks.mozilla.org/2016/05/css-coding-techniques/

Raphael David Antonietti
Frontend Engineer

0 Responses to “CSS & SharePoint – Freunde fürs Leben”



  1. Schreibe einen Kommentar

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s





%d Bloggern gefällt das: