Was sagen uns die Umfragen zum Stand von CSS und HTML?

Rachel Andrew

Veröffentlicht: 6. Dezember 2024

Die Ergebnisse der Umfragen State of CSS 2024 und State of HTML 2024 sind jetzt verfügbar. In diesem Beitrag werfen wir einen ersten Blick auf einige der interessantesten Ergebnisse dieser Umfragen.

Optimismus in Bezug auf die Webplattform

Bevor wir uns einige der Probleme ansehen, die Nutzer mit HTML und CSS haben, vermitteln die Umfragen viel Optimismus in Bezug auf die Plattform. Auf die Frage, ob sich die Webplattform insgesamt in die richtige Richtung entwickelt, stimmten 58% der Teilnehmer der Umfrage „State of HTML“ dieser Aussage zu, 18% stimmten ihr sogar voll und ganz zu.

Bei CSS wurde :has() als beliebteste neue CSS-Funktion gewählt. 36% der Befragten gaben an, dass es sich dabei um die beste neue Funktion handelt. Auf Platz 2 landete mit 17% das Zeichen @container, das mit dem CSS-Verschachteln gleichauf lag.

Was verwenden Sie?

Die CSS-Daten haben uns einige Überraschungen beschert. So haben beispielsweise über 75% der Nutzer CSS-Filtereffekte verwendet, was diese Funktion zur am häufigsten verwendeten Funktion macht. Angesichts der Anzahl der Beschwerden über die Kaskade im Laufe der Jahre ist es interessant, dass nur 18,9% der Nutzer Kaskadenebenen verwenden. Vielleicht gibt es hier einen Zusammenhang mit der Verwendung von Tools wie Tailwind, die verhindern, dass Nutzer häufiger in Kaskadenprobleme geraten.

Markierungselemente wie <main> und <nav> sind in der HTML-Umfrage die am häufigsten verwendeten Elemente. Es ist schön zu sehen, dass so viele Nutzer Lazy Loading und responsive Bilder verwenden.

Häufigste Probleme mit der Browserunterstützung

Probleme mit der Interoperabilität oder dem Browsersupport für Funktionen werden immer wieder angesprochen, wenn wir mit Entwicklern sprechen. In den Umfragen wurden Sie direkt nach den Problemen gefragt, die Sie festgestellt haben. Die zehn problematischsten Funktionen sind nach dem Prozentsatz der Nutzer sortiert, die diese Funktion ausgewählt haben.

  • Popover API
  • Ankerpositionierung
  • Containerabfragen
  • :has()
  • CSS-Verschachtelungsansicht
  • Transition API
  • Unterraster
  • Raster
  • <dialog>
  • Progressive Web-Apps

Die Positionierung von Ankern erhielt in beiden Umfragen 11 %, die View Transition API 9% im State of CSS und 8% im State of HTML. Das zeigt, wie wertvoll diese Funktionen für Entwickler sind.

Interessanterweise sind einige der Funktionen interoperabel. Containerabfragen, :has(), CSS-Verschachtelung und Subgrid sind Standard. Die Popover API wäre es auch, wenn es nicht ein Problem mit dem Schließen von Pop-ups auf iOS-Geräten gäbe. Das Element <dialog> ist jetzt weithin verfügbar, ebenso wie das CSS-Rasterlayout. Es kann sich lohnen, sich diese Ergebnisse genauer anzusehen, um herauszufinden, welche Probleme die Nutzer haben. Die Antworten für das Raster beziehen sich beispielsweise oft darauf, dass es schwer zu erlernen ist, anstatt ein tatsächliches Interoperabilitätsproblem zu nennen.

Wir hoffen, dass Baseline Entwicklern dabei hilft, den Status zu verstehen und zu erkennen, ob ein Problem auf eine fehlende Browserkompatibilität zurückzuführen ist oder auf etwas anderes. Es ist schön, dass in diesen Umfragen der Status der Funktionen hervorgehoben wird. Auf webstatus.dev können Sie auch den Verfügbarkeitsstatus für die wichtigsten CSS-Probleme in verschiedenen Browsern einsehen.

Fehlende Features

Außerdem werden die Teilnehmer gefragt, welche Funktionen auf der Plattform fehlen. So können wir sehen, was noch schwierig ist. Die Antwortrate auf diese Frage war niedriger, aber in der Umfrage zum Stand von CSS haben die Teilnehmer am häufigsten nach Mixins, bedingten Logik und dem Masonry-Layout gefragt. Interessanterweise haben Nutzer auch nach einer übergeordneten Auswahl gefragt (:has() bietet diese Funktion) und nach Verschachtelung, die bereits vorhanden ist und in der Baseline als „Neu“ gekennzeichnet ist.

Die Befragten wurden gefragt: „Wenn Sie HTML drei Elemente hinzufügen könnten, welche wären das?“ 51% der Befragten wünschen sich Datentabellen. Andere beliebte Optionen sind Tabs und Ein-/Aus-Schaltflächen.

Worüber möchten Sie mehr erfahren?

Die Umfragen bieten eine Funktion, mit der Sie Artikel einer Leseliste hinzufügen können, wenn Sie nach Abschluss der Umfrage mehr darüber erfahren möchten. Das sind wertvolle Daten – vor allem, wenn Sie Entwicklerinhalte erstellen. In der folgenden Liste sind die zehn wichtigsten Funktionen aus den beiden Umfragen aufgeführt, sortiert nach dem Prozentsatz der Teilnehmer, die sie auf ihre Liste gesetzt haben.

  • Preisvergleichsportal hanging-punctuation
  • Preisvergleichsportal offset-path
  • @scope
  • Ankerpositionierung
  • Benutzerdefinierte Auswahl
  • view-timeline
  • scroll-timeline
  • focusgroup Attribut
  • Animation für diskrete Eigenschaften
  • image()

Die vollständigen Ergebnisse finden Sie in der Leseliste für CSS und der Leseliste für HTML.

Ein Signal aus der Web-Community

Chrome unterstützt diese Umfragen, da wir so Informationen zu Ihren größten Problemen und zu den Dingen erhalten können, die Sie auf der Webplattform am meisten interessieren. Das ist nicht das einzige Signal, das wir verwenden, aber hier können Sie uns direkt Ihre Meinung mitteilen. Vielen Dank, wenn Sie eine oder beide dieser Umfragen ausgefüllt haben. Sie helfen uns, das Web so zu verbessern, wie Sie es sich wünschen. Wenn Sie mithelfen möchten, können Sie noch an der The State of JS-Umfrage teilnehmen.