Alle paar Monate macht eine Liste neuer HTML-Features die Runde, oft KI-geschrieben, immer im selben Ton: "Das können Sie jetzt endlich nativ, ganz ohne JavaScript." Für ein Kundenportal ist die spannendere Frage aber nicht, was ein Browser kann, sondern was alle Browser Ihrer Nutzer können.
Ein Portal ist kein Entwickler-Laptop mit dem neuesten Chrome. Da sitzen Edge, Firefox und Safari, teils in Enterprise-Versionen mit trägem Update-Zyklus. Ich habe mir die viel geteilte Liste "neuer HTML-Features 2026" vorgenommen und jedes Feature gegen den offiziellen Baseline- und Browser-Support geprüft, nicht gegen den Ausgangsartikel.
Das Ergebnis ist ernüchternd: Von fünf gefeierten Kandidaten sind heute nur zwei echtes Baseline über alle vier Browser-Engines. Die anderen drei fehlen jeweils in mindestens einer Engine, genau der Unterschied, der im Portal über "funktioniert" oder "sieht bei einem Teil der Nutzer kaputt aus" entscheidet. Und eines der fünf ist in Power Pages sogar dann kaputt, wenn der Browser es längst beherrscht, ausgehebelt vom portaleigenen CSS. Dazu weiter unten mehr.
Alle Screenshots stammen aus einem echten Power-Pages-Portal (Enhanced Data Model, Bootstrap 5.2.2), gerendert im aktuellen Chrome.
Wirklich einsatzreif: zwei Kandidaten
Das Popover-Attribut
Das popover-Attribut plus popovertarget macht Tooltips, Info-Boxen und einfache Overlays ohne eine Zeile JavaScript. Der Browser übernimmt Fokus-Management, Schliessen per Escape und den "light dismiss" beim Klick daneben.
Das ist der klare Gewinner: Baseline "newly available" seit Januar 2025, unterstützt von Chrome/Edge, Firefox und Safari. Für FAQ-Hinweise, Feld-Erklärungen oder kleine Bestätigungen können Sie hier bedenkenlos das Bootstrap-Popover-Plugin ablösen. Nur bei sehr alten Browsern (vor 2023/2024) erscheint der Inhalt statisch, er verschwindet also nicht, er ist nur nicht mehr aufklappbar.
Invoker Commands
Mit command und commandfor steuern Sie Dialoge und Popover deklarativ direkt vom Button aus, etwa command="show-modal" für einen <dialog>, ganz ohne addEventListener.
Auch das ist Baseline, aber brandneu: erst seit Dezember 2025 (Safari 26.2 war der letzte Baustein). "Baseline" heisst hier nicht "überall", sondern konkret: Chrome/Edge 135+, Firefox 144+, Safari 26.2+. In einem Umfeld mit gepflegten, aktuellen Browsern eine schöne Vereinfachung. In einem Konzern-Portal mit eingefrorenen Browser-Versionen halten Sie noch einen JavaScript-Fallback bereit.
Nur als Progressive Enhancement: drei Kandidaten mit Lücke
Die nächsten drei werden gerne als "einsatzreif" verkauft. Sind sie nicht, jedenfalls nicht als Basis. Sie funktionieren nur mit @supports-Absicherung und einem sauberen Fallback.
appearance: base-select
Endlich Dropdowns per CSS stylen, inklusive der aufgeklappten Optionsliste über ::picker(select), ohne Select2 & Co. Technisch beeindruckend:
Aber: Firefox unterstützt es gar nicht, und Safari erst seit Version 27 (Mitte September 2026). Es ist damit "Limited availability", kein Baseline. Firefox-Nutzer bekommen das native Dropdown, Ihr Custom-Styling verpufft dort komplett. Nur mit @supports (appearance: base-select) und einem appearance: none-Fallback vertretbar, nie als tragende Lösung.
Und speziell für Power Pages ist die Geschichte noch schmaler: base-select greift nur bei Single-Select-Optionssätzen in Basic Forms, die als natives <select> rendern. Multi-Select-Choices rendern als eigenes Widget, und die Filter in Entity Lists sind Checkboxen und Textfelder, kein <select>. Der praktische Nutzen ist also doppelt begrenzt.
sizes="auto"
Automatische Bildgrössen für responsive srcset-Bilder mit loading="lazy", ohne manuelles sizes. Praktisch, aber ebenfalls ohne Safari-Unterstützung. Immerhin gutmütig: Safari ignoriert das Attribut folgenlos und wählt das Bild wie bisher. Gefahrloses Progressive Enhancement also, aber eben kein "überall schneller".
hidden="until-found"
Eingeklappte Inhalte, die von der Browsersuche (Strg+F) trotzdem gefunden und automatisch aufgeklappt werden, ideal für FAQ-Blöcke und lange Knowledge-Base-Artikel. Chrome kann das seit 2022, Firefox erst seit Februar 2026, und Safari kann es bis heute nicht.
Hier hat sich beim Nachstellen im Demo-Portal ein zweites, viel wichtigeres Problem gezeigt: Das Feature war ab Werk kaputt, obwohl der Browser es kann. Der Grund ist kein Browser, sondern das Portal selbst. Eine der von Power Pages mitgelieferten Stylesheets enthält die Regel [hidden] { display: none !important; }. Das Feature beruht aber darauf, dass ein hidden="until-found"-Element per content-visibility: hidden versteckt und dabei durchsuchbar bleibt. Das display: none !important gewinnt gegen diese UA-Mechanik, nimmt den Inhalt komplett aus dem Rendering und macht ihn für die Browsersuche unsichtbar. Strg+F findet den versteckten Text schlicht nicht, es klappt nichts auf.
Sichtbar wird das Feature erst mit einer Ein-Zeilen-Korrektur, die den Reset gezielt zurücknimmt:
[hidden="until-found"] { display: block !important; content-visibility: hidden; }Danach bleibt der Block eingeklappt, ist aber wieder durchsuchbar, und Strg+F klappt ihn auf:
Das ist genau der Kern dieses Beitrags an einem konkreten Fall: Ein "reifes" HTML-Feature scheitert nicht am Browser, sondern am Power-Pages- und Bootstrap-Kontext. Als Fortschritts-Zuckerl in Ordnung, aber nur mit dem CSS-Override und nur dort, wo der Inhalt auch ohne die Funktion erreichbar bleibt (Safari zeigt ihn nie aufgeklappt).
Vorher prüfen: auf welchem Bootstrap läuft Ihr Portal?
Eine Rahmenbedingung, die in keinem Trend-Artikel steht: Auf welcher Bootstrap-Version Ihr Portal läuft, ist nicht selbstverständlich, und es macht einen Unterschied. Power Pages unterstützt Bootstrap 3.3.6 und Bootstrap 5. Laut Doku ist Version 3 der Default, in der Praxis sehen Sie aber sehr oft Bootstrap 5, weil Bootstrap 5 das Enhanced Data Model voraussetzt und neue Umgebungen und Sites zunehmend genau darauf laufen (mein Demo-Portal etwa auf Bootstrap 5.2.2).
Der praktische Rat lautet deshalb: Schauen Sie zuerst nach, welche Version tatsächlich installiert ist, bevor Sie ein modernes HTML- oder CSS-Feature einbauen, denn es gibt eine Abhängigkeit. Am schnellsten geht das über die Web-Datei bootstrap.min.css Ihrer Site (die Version steht im Kopf-Kommentar) oder über die Site-Einstellung Site/BootstrapV5Enabled. Ein klassisches, jQuery-lastiges Bootstrap-3-Portal ist ein anderes Spielfeld als eine Bootstrap-5-Site.
Kleiner Nebeneffekt in diesem Zusammenhang: Die ältere Regel, dass ein <h1> in verschachtelten <section>-Elementen automatisch schrumpft, wird von den Browsern gerade abgeschafft (Firefox und Chrome warnen bereits in der Konsole, Lighthouse zieht Punkte ab). In Power Pages merken Sie davon meist nichts, weil Bootstrap die Überschriftengrössen ohnehin explizit setzt. Setzen Sie im Zweifel h1 { font-size: 2em; } selbst.
Fazit
| Feature | In Power Pages einsatzreif? | Grund |
|---|---|---|
| Popover-Attribut | Ja | Baseline seit Jan 2025, alle vier Engines |
| Invoker Commands | Ja, mit Fallback | Baseline seit Dez 2025, hohe Mindestversionen |
| appearance: base-select | Nur progressiv | Firefox fehlt; in Power Pages nur Single-Select-Optionssätze |
| sizes="auto" | Nur progressiv | Safari fehlt, aber gefahrlos |
| hidden="until-found" | Nur progressiv, mit CSS-Fix | Safari fehlt; in Power Pages zusätzlich durch [hidden]{display:none!important} ausgehebelt |
Die Regel bleibt unspektakulär und genau deshalb richtig: Ein neues HTML-Feature gehört erst in ein internes oder Demo-Portal, dann prüfen Sie den echten Browser-Mix Ihrer Nutzer, und erst dann kommt es progressiv, mit @supports-Fallback, ins Kundenportal. Nie blind aus einer Feature-Liste übernehmen, egal wie elegant das Feature aussieht.
Weiterführende Artikel
Link-Vorschauen für Power Pages
Open-Graph-Meta-Tags in Power Pages über Web Template, Snippet und Liquid, ein weiteres Frontend-Detail, das im Portal-Kontext eigene Regeln hat.
Artikel lesen → EntwicklungDas Render-Mutate-Refresh-Muster
Ein Architekturmuster, das server-gerendertes Liquid, Server-Logic-Schreibvorgänge und expliziten Resync für datengebundene Power-Pages-Komponenten kombiniert.
Artikel lesen → EntwicklungLiquid FetchXML vs. Web API
Entscheidungsbaum, Performance-Vergleich und Security-Muster zwischen den beiden Datenzugriffswegen in Power Pages.
Artikel lesen →Quellen
- web-features / Baseline (dieselben Daten wie das MDN-Baseline-Widget), Support- und Baseline-Status je Feature, Stand September 2026
- MDN: Popover API und Invoker Commands API
- MDN: Customizable select (appearance: base-select), Status "Limited availability"
- MDN-Blog: h1-element styles in section
- Microsoft Learn: Bootstrap overview und Create new sites with Bootstrap version 5 (Default 3.3.6, Bootstrap 5 mit Enhanced Data Model)
- Hands-on-Nachstellung im Power-Portals-Demo-Portal (Enhanced Data Model, Bootstrap 5.2.2), Chrome 154
