Das Chrome-Team war dieses Jahr auf der CSS Day-Konferenz stark vertreten. Wir haben den CSS-Helpdesk betrieben und Fragen der Teilnehmer beantwortet. Außerdem hatten wir ein Whiteboard, auf dem wir die Teilnehmer gefragt haben, was ihrer Meinung nach noch in CSS fehlt. In diesem Beitrag teile ich die Ergebnisse der Frage und bitte Sie, uns mitzuteilen, was Ihrer Meinung nach in HTML und CSS fehlt. Nehmen Sie dazu an dieser kurzen Umfrage teil. Stimmen Sie den Teilnehmern des CSS Day zu?
Die zehn häufigsten Anfragen
Die Teilnehmer wurden gebeten, Ideen auf Haftnotizen zu schreiben und sie an das Board zu kleben. Außerdem konnten sie ihre Stimme für Ideen abgeben, indem sie einen Sticker hinzufügten. Die zehn wichtigsten Funktionen sind:
Unterstützung für das Formatieren von Eingaben
Das war unser am häufigsten gewünschtes Feature mit 21 Stimmen. Sie möchten diese gängigen UI-Elemente auf konsistente Weise gestalten.
Wir sind uns bewusst, dass dies ein großes Problem für Entwickler ist, und arbeiten an besseren Lösungen. Anpassbare Auswahlelemente sollen beispielsweise eine Möglichkeit bieten, neues Stylingverhalten zu aktivieren. Sie könnten dann beispielsweise Bilder oder einen noch aufwendigeren Stil für Optionen hinzufügen. Der Vorteil dieses Ansatzes besteht darin, dass auf ein normales Auswahlmenü zurückgegriffen wird, sodass es sich um eine progressive Verbesserung handelt.
Visuell ausgeblendet
Mit 19 Stimmen beim CSS Day war dies der zweitbeliebteste Wunsch. In der Anfrage geht es darum, Inhalte hinzuzufügen, die nur von Screenreadern verwendet werden. Das kann ein HTML-Element sein, in dem der Inhalt nicht angezeigt, sondern nur von einem Screenreader vorgelesen wird.
Normalerweise wird dies erreicht, indem eine .visually-hidden-Klasse erstellt wird, um den Inhalt auszublenden, ihn aber weiterhin für Screenreader zugänglich zu machen.
Auch wenn dies ein häufig geäußerter Wunsch ist, gibt es Nutzer, die der Meinung sind, dass dies nicht implementiert werden sollte. Weitere Informationen finden Sie unter Visually hidden content is a hack that needs to be resolved, not enshrined und in der Diskussion zu CSS WG issue 560.
position: sticky inside overflow:hidden
Diese Anfrage hat 16 Stimmen erhalten. Derzeit funktioniert position: sticky nur, wenn alle Elternteile overflow: visible sind.
Es gibt ein offenes Problem aus dem Jahr 2017, in dem dies gefordert wird. Der ursprüngliche Anwendungsfall, die Verwendung von overflow: hidden zum Entfernen von Floats zu ermöglichen, ist heute vielleicht weniger erforderlich, aber im Thread werden viele andere Szenarien beschrieben.
Animieren bis height: auto
Bei 12 Stimmen wollten viele Teilnehmer height: auto animieren. Wir freuen uns, dass diese Funktion mit der CSS-Eigenschaft interpolate-size und der Funktion calc-size() auf die Webplattform kommt.
Sie sind ab Chrome 129 verfügbar.
Wir werden in Zukunft einen Beitrag mit weiteren Informationen dazu veröffentlichen.
Zusätzliche Eingabetypen
Mit HTML5 wurden viele verschiedene Typen für das <input>-Element eingeführt, z. B. type="email" für eine E-Mail-Adresse oder type="range" für einen Bereichsschieberegler.
Am CSS Day haben wir 10 Stimmen für weitere Typen erhalten, z. B. „double range“ oder „autocomplete“ mit benutzerdefinierter Datenliste.
Echte Zufallszahlen in CSS
Eine weitere Anfrage mit 10 Stimmen betraf echte Zufallszahlen in CSS. Dies wurde in der Vergangenheit für eine zufällige animation-duration angefordert und umgangen.
Stilklassen mischen
CSS hat eine Reihe von Funktionen hinzugefügt, die zuvor in CSS-Präprozessoren zu finden waren: Variablen mit benutzerdefinierten Eigenschaften und jetzt auch CSS-Nesting. Wiederverwendbare Mixins sind jedoch noch nicht Teil der Sprache, aber sieben der CSS Day-Teilnehmer waren daran interessiert.
Es gibt einen Beschluss der CSS-Arbeitsgruppe, mit der Arbeit an einer Spezifikation für diese Funktion zu beginnen. Sie können Ihre Gedanken und Anwendungsfälle in der Diskussion in diesem Issue einbringen.
Globale Stile im Shadow-DOM
Ein weiteres Problem mit einem großen Diskussionsthread zu Anwendungsfällen ist die Anfrage, globale CSS-Stile in einem Shadow-DOM zuzulassen. Sechs Personen haben dies am CSS-Tag gefordert. Mit dieser Funktion können globale Reset-Stile auch in Webkomponenten angewendet werden und einzelne CSS-Dateien funktionieren für alle Komponenten einer Website. Hier findest du eine Zusammenfassung der Anwendungsfälle. Lass uns wissen, ob du diese Funktion auch gern nutzen würdest.
Gemischte Einheiten dividieren
Es gab einen Vorschlag für Interop 2024, in dem die Möglichkeit gefordert wurde, durch gemischte Einheiten zu dividieren, z. B. calc(100vw / 1px). Es wurde als zu breit für Interop 2024 eingestuft, aber viele Entwickler, darunter sechs Personen beim CSS Day, würden sich eine Implementierung wünschen.
nth-letter
CSS hat eine Reihe von Pseudoelementen, die sich so verhalten, als hätten Sie einen Span-Tag um einen bestimmten Inhaltsabschnitt gesetzt. Das Pseudoelement ::first-letter zielt beispielsweise auf den ersten Buchstaben der ersten Zeile des Blockcontainers ab, auf den es angewendet wird.
In dieser Liste fehlt ::nth-letter, und Sie fragen seit etwa 20 Jahren nach ::nth-letter. Wir wissen also, dass Webentwickler sich schon lange danach sehnen. Beim CSS Day stimmten sechs Personen dafür. Damit ist es die letzte der zehn am häufigsten gewünschten Funktionen.
Stimmen Sie der Top 10 des CSS Day zu?
Wir würden uns freuen, von einem breiteren Publikum zu diesen Problemen zu hören. Sind diese Probleme für Sie auch von großer Bedeutung? Wenn nicht, gibt es etwas anderes, das Sie gerne in CSS und HTML sehen würden? Füllen Sie dazu dieses kurze Formular aus. Wir fassen die Antworten dann in einem weiteren Beitrag zusammen.