Power Pages Design-System: CSS sauber überschreiben

Hinweis: Dies ist Teil 2 unserer 3-teiligen Serie zum Thema Power Pages Design.

Inhalt

• Power Pages CSS: Sicher anpassen statt löschen
  • Warum jQuery im Header für Probleme sorgt
  • System-Dateien identifizieren und isolieren
  • Risiken beim Entfernen von Standard-Styles
• Layout-Sprünge (FOUC) gezielt verhindern
  • Wann Skripte ausgeführt werden sollten
  • So sieht das FOUC-Problem aus
  • Layout-Sprünge mit FOUC verhindern
  • FOUC-Vermeidung im Video erklärt
• Drei wichtige Konsequenzen bei der CSS-Manipulation
• Best Practice: Eigenes Design-System in Power Pages umsetzen

Power Pages CSS: Sicher anpassen statt löschen

Im ersten Teil haben wir gesehen, dass Power Pages im Hintergrund automatisch Systemdateien lädt. Viele Entwickler kommen daher auf die Idee: Wenn ich das CSS nicht konfigurieren kann, lösche ich die Referenzen einfach per JavaScript aus dem DOM.

Grundsätzlich ist das technisch möglich. Wenn du diesen Code in dein Web-Template im „Header“ einfügst, werden die Referenzen nach dem Laden der Seite entfernt:

// Remove Bootstrap and system CSS from the page
document
  .querySelectorAll(
    'link[href*="bootstrap"], ' +
      'script[src*="bootstrap"], ' +
      'link[href*="account"], ' +
      'link[href*="preform"], ' +
      'link[href*="portalbasictheme"], ' +
      'link[href*="glyphicons"], ' +
      'link[href*="font-awesome"]'
  )
  .forEach((el) => el.remove());

Warum jQuery im Header für Probleme sorgt

Im Webtemplate “Header” von Power Pages ist nicht sichergestellt, dass zu diesem Zeitpunkt bereits jQuery geladen ist. Es könnte zu einem Fehler kommen, wenn du versuchst, jQuery zu verwenden, bevor es verfügbar ist. Daher ist es sicherer, reines JavaScript zu verwenden, um die Elemente zu entfernen.

Wenn man jQuery versucht einzusetzen, obwohl es noch nicht geladen ist, erhält man einen Fehler wie Uncaught ReferenceError: $ is not defined, was die Ausführung des Skripts stoppt und die Power Pages Seite unbrauchbar macht.

System-Dateien identifizieren und isolieren

Risiken beim Entfernen von Standard-Styles

Sobald dieser Code ausgeführt wird, verschwinden die Standard-Styles. Das Resultat ist ein ungestaltetes HTML-Gerüst. Hinzu kommt: Da auch das JavaScript von Bootstrap entfernt wird, verlieren interaktive Power Pages Komponenten ihre Funktionalität.

Es kommt zu schwer nachvollziehbaren Fehlern, wie im Bild unten zu sehen ist. Die Analyse und Korrektur solcher Fehler ist sehr zeitaufwendig.

Warum tritt dieser Fehler auf?

Die Fehlermeldung Error: color is invalid in setSlot(): oklch(1 0 0) zeigt, dass die Power Pages-Laufzeitumgebung, beispielsweise durch Komponenten wie das Header/Footer-Template, auf CSS-Variablen oder Styles zugreifen will, die gerade entfernt wurden.

Wenn das <link>-Tag für Bootstrap entfernt wird, während der Browser bereits mit dem Parsen begonnen hat, gerät der interne JavaScript-Prozess von Power Pages in einen inkonsistenten Zustand. Das Skript erwartet definierte CSS-Klassen oder Farbschemata, findet diese aber nicht mehr, weil die Quelldatei fehlt.

Ist dieser Fehler wirklich ein Problem?

An dieser Stelle sei kurz erklärt, warum selbst dieser Fehler kein wirkliches Problem darstellt: Die Fehlermeldung ist rein kosmetischer Natur und hat keinerlei Auswirkungen auf die Sicherheit, das Design oder die Funktionalität deiner Seite. Sie betrifft ausschließlich das Standarddesign von Power Pages mit Bootstrap, das ohnehin durch ein eigenes Design-System ersetzt werden soll. Dennoch ist es grundsätzlich wichtig, keine Fehler dauerhaft im Browser zu belassen, um die Qualität und Wartbarkeit der Anwendung sicherzustellen.

Layout-Sprünge (FOUC) gezielt verhindern

Layout-Sprünge, auch bekannt als Flash of Unstyled Content (FOUC), entstehen, wenn beim Entfernen der Standard-Styles das ursprüngliche Design kurz sichtbar bleibt, bevor das eigene Design-System greift. Um einen professionellen und konsistenten Eindruck zu gewährleisten, solltest du gezielt Maßnahmen ergreifen, um dieses Aufblitzen ungestalteter Inhalte zu verhindern.

Wann Skripte ausgeführt werden sollten

Kapselt man den Code in ein window.onload-Event, löst man das anfängliche Fehlerproblem, da der Code erst ausgeführt wird, wenn das DOM vollständig geladen ist. Das Event window.onload garantiert, dass alle Ressourcen (Bilder, Skripte, Styles) vollständig geladen sind, bevor der Code ausgeführt wird. Dadurch wird die Fehlermeldung vermieden, da die Elemente, auf die zugegriffen wird, bereits im DOM vorhanden sind.

// After the page has fully loaded, remove Bootstrap and system CSS
window.addEventListener('load', () => {
  document
    .querySelectorAll(
      'link[href*="bootstrap"], ' +
        'script[src*="bootstrap"], ' +
        'link[href*="account"], ' +
        'link[href*="preform"], ' +
        'link[href*="portalbasictheme"], ' +
        'link[href*="glyphicons"], ' +
        'link[href*="font-awesome"]'
    )
    .forEach((el) => el.remove());
});

Dieser Ansatz ist die einzige Möglichkeit, die Standard-Styles und -Skripte von Power Pages zu entfernen, ohne dass ein Fehler im Browser auftritt.

Allerdings führt diese Methode zu einem anderen Problem: dem Flash of Unstyled Content (FOUC). Da die Seite erst vollständig geladen wird, bevor dein Skript die alten Styles entfernt, sieht der Nutzer für einen kurzen Moment das Standard-Design von Power Pages, das dann plötzlich zu deinem neuen Layout wechselt. Dieses Aufblitzen ist visuell störend und vermittelt einen unprofessionellen Eindruck.

So sieht das FOUC-Problem aus

Das folgende Video zeigt, wie es aussieht, wenn du die Standard-Styles von Power Pages per window.onload entfernst: Zuerst wird die Seite mit dem Standard-Design von Power Pages geladen, und nach einem kurzen Moment springt sie zu deinem eigenen Design-System über. Dieses Aufblitzen des ungestalteten Inhalts ist das typische FOUC-Problem, das bei dieser Methode auftritt.

Layout-Sprünge mit FOUC verhindern

Wenn du die Standard-Styles per window.onload entfernst, tritt ein unschönes Phänomen auf: der Flash of Unstyled Content (FOUC). Da die Seite erst vollständig geladen wird, bevor dein Skript die alten Styles entfernt, sieht der Nutzer für einen kurzen Moment das Standard-Design von Power Pages, das dann abrupt durch dein eigenes Layout ersetzt wird.

Um diesen unerwünschten Effekt zu verhindern, nutzen wir eine „Hide-and-Reveal“-Strategie. Wir verbergen den Seiteninhalt initial per CSS und blenden ihn erst ein, sobald unsere Anpassungen aktiv sind.

Der folgende Code nutzt das “Hide-and-Reveal”-Muster und wird im Header-Webtemplate in der Power Pages Portalverwaltung eingefügt:

<style id="fouc-style">
  /* Hide the body content until the page is fully loaded */
  body {
    visibility: hidden !important;
    opacity: 0 !important;
  }
</style>

<script>
  window.addEventListener('load', () => {
    // ... code to remove Bootstrap and system CSS ...

    // After removing the styles, reveal the content smoothly
    const style = document.getElementById('fouc-style');
    if (style) {
      document.body.style.transition = 'opacity 0.3s ease-in';
      document.body.style.opacity = '1';
      document.body.style.visibility = 'visible';
      style.parentNode.removeChild(style);
    }
  });
</script>

FOUC-Vermeidung im Video erklärt

Das folgende Video zeigt das FOUC-Pattern in Aktion: Zuerst wird die Seite mit dem Standard-Design von Power Pages geladen, und nach einem kurzen Moment wechselt sie zu deinem eigenen Design-System. Mit der “Hide-and-Reveal”-Strategie wird ein fließender Übergang geschaffen, der das unerwünschte Einblenden des ungestalteten Inhalts verhindert und einen einwandfreien Eindruck hinterlässt.

Warum diese Methode so effektiv ist:

• CSS-Blockade: Das visibility: hidden wird sofort vom Browser verarbeitet, noch bevor das Rendering der Seite beginnt.
• Sanfter Übergang: Die Verwendung von opacity in Kombination mit einem kurzen transition-Effekt sorgt dafür, dass die Seite nicht abrupt eingeblendet wird, sondern fließend erscheint.
• Saubere Trennung: Dein eigenes Design-System lädt im Hintergrund bereits, während der Inhalt noch verborgen ist. Sobald der Nutzer den Inhalt sieht, ist dein Styling bereits vollständig angewendet.

Drei wichtige Konsequenzen bei der CSS-Manipulation

Bevor du versuchst, die Microsoft Standarddateien aus dem Portal zu entfernen, solltest du drei wichtige Konsequenzen beachten:

• Funktionsverlust der Komponenten: Formulare, Datagrid-Listen und Navigationselemente von Power Pages verlieren ihr Layout. Sie bauen direkt auf den gelöschten Bootstrap-Klassen auf.
• Defekte Anmeldeseiten: Der Login- und Profil-Bereich wird in Power Pages unbrauchbar. Diese tief integrierten Microsoft-Seiten nutzen die System-Styles intensiv.
• Hoher Wartungsaufwand bei Updates: Bei jedem Power Pages Update können sich Pfade ändern. Ein manueller Skript-Ansatz produziert so schnell unvorhersehbare Layout-Fehler.

Best Practice: Eigenes Design-System in Power Pages umsetzen

Anstatt die Systemdateien von Power Pages per JavaScript aus dem DOM zu entfernen, ist ein professionelles CSS-Management die bewährte Methode. Nutze ein eigenes Design-System und überschreibe das Standard-CSS gezielt.

Um dein eigenes Layout in Power Pages stabil einzubinden, erstellst du eine Custom CSS-Datei und lädst diese nach den Microsoft-Standarddateien. Mit spezifischen CSS-Selektoren oder einem eigenen Klassen-Präfix erhalten deine Styles automatisch Priorität. Definierst du eigene Klassen (wie .my-portal-button) oder nutzt die Container-ID zur CSS-Gewichtung, zwingst du den Browser, dein Design-System zu verwenden. Gleichzeitig bleibt die Grundfunktionalität aller Power Pages Komponenten erhalten.

Auf diese sichere Weise bleibt dein Microsoft Power Pages Portal stabil, überlebt alle zukünftigen System-Updates und entspricht dennoch hundertprozentig deinen individuellen Design-Anforderungen.

Wie du diese Anpassungen architektonisch sauber aufbaust und dabei globale Styles nicht beschädigst, erfährst du im dritten und letzten Teil der Serie:

Serie: Power Pages Design

1. Zurück zu Teil 1: Warum Standard-Dateien immer geladen werden
2. CSS sauber überschreiben (Du bist hier)
3. Weiter mit Teil 3: Entwicklung eines Designsystems