Das Chrome-Team war dieses Jahr auf der CSS Day-Konferenz stark vertreten. Wir haben den CSS-Hilfedesk geleitet 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 dieser Frage mit Ihnen und möchte Sie bitten, uns in dieser kurzen Umfrage mitzuteilen, was Ihrer Meinung nach in HTML und CSS fehlt. 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 Whiteboard anzupinnen. Nutzer können auch ihre Stimme für Ideen abgeben, indem sie einen Sticker hinzufügen. Die zehn wichtigsten Funktionen sind:
Unterstützung für das Formatieren von Eingaben
Diese Funktion wurde mit 21 Stimmen am häufigsten gewünscht. Sie sollten diese gängigen UI-Elemente einheitlich gestalten können.
Wir bei Chrome sind uns dieses Problems bewusst, da es für Entwickler ein großes Ärgernis ist. Wir arbeiten daran, bessere Lösungen für Entwickler zu entwickeln. So sollen beispielsweise auswählbare, anpassbare Elemente die Möglichkeit bieten, das neue Styling-Verhalten zu aktivieren. Sie können dann beispielsweise Bilder hinzufügen oder die Optionen noch ausgefallener gestalten. Der Vorteil dieses Ansatzes besteht darin, dass bei Bedarf auf ein normales Auswahlmenü zurückgegriffen wird. Dies ist eine progressive Verbesserung.
Visuell ausgeblendet
Mit 19 Stimmen beim CSS Day war dies die zweitbeliebteste Anfrage. Es wird eine Möglichkeit angefragt, Inhalte hinzuzufügen, die nur von Screenreadern verwendet werden. Dies kann ein HTML-Element sein, bei dem der Inhalt nicht angezeigt, sondern nur von einem Screenreader vorgelesen wird.
Normalerweise wird dies heute durch Erstellen einer .visually-hidden-Klasse erreicht, um den Inhalt auszublenden, ihn aber für Screenreader zugänglich zu machen.
Diese Funktion wird häufig angefragt, aber es gibt auch Nutzer, die der Meinung sind, dass sie nicht implementiert werden sollte. Weitere Informationen finden Sie unter Visuell ausgeblendete Inhalte sind ein Hack, der behoben werden muss, nicht verankert und in dieser Diskussion zu CSS WG-Problem 560.
position: sticky inside overflow:hidden
Diese Anfrage hat 16 Stimmen erhalten. Derzeit funktioniert position: sticky nur, wenn alle übergeordneten Elemente overflow: visible sind.
Es gibt ein offenes Problem aus dem Jahr 2017, in dem dies angefordert wird. Auch wenn die ursprüngliche Verwendung von overflow: hidden zum Löschen von Floats heute möglicherweise weniger erforderlich ist, werden im Thread viele weitere Szenarien beschrieben.
Zu height: auto animieren
Bei 12 Stimmen wollten viele Teilnehmer zu height: auto animieren. Wir freuen uns, Ihnen mitteilen zu können, dass diese Funktion mit der CSS-Eigenschaft interpolate-size und der Funktion calc-size() auf der Webplattform verfügbar sein wird.
Sie sind ab Chrome 129 verfügbar.
Weitere Informationen dazu folgen in einem weiteren Beitrag.
Zusätzliche Eingabetypen
Mit HTML5 gibt es viele verschiedene Typen für das <input>-Element, z. B. type="email" für eine E-Mail-Adresse oder type="range" für einen Schieberegler.
Beim CSS Day haben wir 10 Stimmen für weitere dieser Typen erhalten, z. B. für den doppelten Bereich oder für die automatische Vervollständigung mit benutzerdefinierter Datenliste.
Echte Zufallszahlen in CSS
Eine weitere Anfrage mit 10 Stimmen bezog sich auf echte Zufallszahlen in CSS. Diese Funktion wurde in der Vergangenheit für eine zufällige animation-duration angefragt und umgesetzt.
Mixin-Stilklassen
CSS bietet eine Reihe von Funktionen, die zuvor in CSS-Preprocessorn zu finden waren, z. B. Variablen mit benutzerdefinierten Eigenschaften und jetzt auch CSS-Verschachtelung. Wiederverwendbare Mixins sind jedoch noch nicht Teil der Sprache, aber sieben der CSS Day-Teilnehmer waren sehr daran interessiert.
Die CSS-Arbeitsgruppe hat beschlossen, mit der Arbeit an einer Spezifikation für diese Funktion zu beginnen. Sie können der Diskussion zu diesem Thema Ihre Gedanken und Anwendungsfälle hinzufügen.
Globale Stile im Shadow-DOM
Ein weiteres Thema, zu dem es einen langen Diskussionsfaden mit Anwendungsfällen gibt, ist die Anfrage, globale CSS-Styles innerhalb eines Shadow-DOMs anzuwenden. Sechs Personen haben am CSS Day danach gefragt. Mit dieser Funktion könnten globale Stilvorlagen auch auf Webkomponenten angewendet und einzelne CSS-Dateien für alle Komponenten einer Website verwendet werden. In dieser Zusammenfassung von Anwendungsfällen erfährst du, welche Funktionen wir bereits anbieten und welche wir in Zukunft einführen möchten.
Gemischte Einheiten dividieren
Es gab einen Vorschlag für Interop 2024, in dem die Möglichkeit zur Division durch gemischte Einheiten gefordert wurde, z. B. calc(100vw / 1px). Er wurde für Interop 2024 als zu weit gefasst eingestuft. Viele Entwickler, darunter sechs Personen am CSS Day, würden sich jedoch eine Implementierung wünschen.
nth-letter
CSS bietet eine Reihe von Pseudoelementen, die so wirken, als würden Sie einen Bereich von Inhalten in einen Span einschließen. Das Pseudo-Element ::first-letter ist beispielsweise auf den ersten Buchstaben der ersten Zeile des Blockcontainers ausgerichtet, auf den es angewendet wird.
In dieser Liste fehlt ::nth-letter. Sie haben seit etwa 20 Jahren nach ::nth-letter gefragt. Wir wissen also, dass Webentwickler schon lange danach fragen. Beim CSS Day haben sechs Personen dafür gestimmt, was diese Funktion zur letzten der Top 10 der gewünschten Funktionen macht.
Stimmen Sie den Top 10 des CSS Day zu?
Wir würden gerne von einem breiteren Publikum zu diesen Themen hören. Sind diese Themen in Ihrer Top 10? Wenn nicht, gibt es etwas anderes, das Sie sich in CSS und HTML wünschen würden? Fülle einfach dieses kurze Formular aus. Wir fassen die Antworten dann in einem weiteren Beitrag zusammen.