Veröffentlicht: 31. März 2025
Ein weiterer Monat ist vergangen und seit dem letzten monatlichen Baseline-Digest ist viel passiert. In dieser Ausgabe fassen wir einige Beiträge zusammen, die wir hier auf web.dev veröffentlicht haben, einige neue Baseline-Funktionen, die verfügbar sind, und einige Updates zu Tools in der Community.
ESLint 0.6.0 wurde veröffentlicht
Vor Kurzem haben wir einen Beitrag zur Unterstützung von CSS-Linting in ESLint veröffentlicht. Zu dieser Einführung gehörte auch eine neue ESLint-Regel (require-baseline), mit der die in Ihrem Projekt verwendeten CSS-Funktionen geprüft werden, um festzustellen, ob sie einen bestimmten Baseline-Grenzwert erreichen.
Vor Kurzem hat ESLint die Version 0.6.0 des @eslint/css-Pakets veröffentlicht. Diese enthält ein wichtiges neues Update, bei dem die Regel require-baseline in use-baseline umbenannt wird. Diese Änderung mag zwar unscheinbar erscheinen, verbessert aber die Lesbarkeit der Regel. Diese Version enthält außerdem einige weitere wichtige Funktionen und Fehlerkorrekturen, z. B. die Möglichkeit, mit der Regel use-baseline verschachtelte CSS-Blöcke zu linten. Wenn Sie eine ältere Version von @eslint/css verwenden, sollten Sie dieses Update herunterladen.
Web Platform Dashboard abfragen
Anfang des Monats haben wir einen Beitrag zur Abfrage des Web Platform Dashboards veröffentlicht. Dieses Dashboard kann über das Frontend und über eine HTTP-API abgefragt werden. Das kann für Tools zur Baseline-Erstellung nützlich sein, da Sie die API abfragen können, um Funktionen zu finden, die einen bestimmten Baseline-Grenzwert erreicht haben.
Diese API kann für Tools nützlich sein, bei denen Sie schnell Informationen zu bestimmten Funktionen benötigen. Mithilfe dieser Tools können Sie beispielsweise ein Script schreiben, das Ihnen in einem bestimmten Intervall mitteilt, welche Funktionen vor Kurzem als „Baseline Newly available“ (Neu verfügbar in der Baseline) oder „Widely available“ (Weitgehend verfügbar) gekennzeichnet wurden. Wenn das für Sie interessant klingt, sollten Sie sich den Artikel unbedingt durchlesen.
Baseline und Polyfills
Baseline soll Klarheit darüber schaffen, welche Funktionen Sie sicher verwenden können. Aber selbst mit dieser zusätzlichen Klarheit müssen Sie darüber nachdenken, wie Sie Funktionen so übernehmen, dass sie für Ihre Webanwendungen sinnvoll sind. Polyfills spielen dabei eine wichtige Rolle. Polyfills werden bei der Baseline nicht berücksichtigt, wenn es darum geht, ob Funktionen neu oder weit verbreitet sind. Außerdem wird nicht angegeben, ob sie verwendet werden sollten. Diese Entscheidung ist spezifisch für Ihre Anwendung, aber sie ist wichtig.
Vor Kurzem haben wir einen Beitrag zur Verwendung von Baselines und Polyfills veröffentlicht. Wir sind der Meinung, dass er einen hilfreichen Rahmen für die Verwendung dieser Technologien bietet. Wir hoffen, dass polyfills bei Funktionen, die neu oder weithin verfügbar sind, weniger notwendig werden. Polyfills sind zweifellos nützliche Tools in Ihrer Entwicklungs-Toolbox, aber sie haben auch Nachteile. Sie können sich negativ auf die Leistung Ihrer Website auswirken und in einigen Fällen sogar zu Problemen mit der Barrierefreiheit führen. Wir hoffen, dass dieser Leitfaden dir bei dieser schwierigen Frage weiterhilft.
contenteditable="plaintext-only" ist jetzt als Baseline verfügbar
Mit dem contenteditable-Attribut eines HTML-Elements kann der Nutzer den Inhalt so ändern, als wäre es ein Textfeld. Sie können das Attribut beispielsweise auf einem <p>-Element platzieren und der Nutzer kann damit wie mit einem <textarea> interagieren. In einigen Anwendungsfällen bietet die Verwendung von contenteditable Vorteile gegenüber typischen Formularelementen.
Nutzer fügen jedoch Inhalte in bearbeitbare Elemente ein, die Rich-Text-Formatierungen enthalten können. Das kann für Nutzer frustrierend sein, die nur unformatierten Text in ein Feld einfügen möchten. Die Kombination aus Attribut und Wert „contenteditable="plaintext-only"“ verhindert dies. Diese Kombination ist seit Kurzem als „Neuer Wert für Baseline“ verfügbar. Weitere Informationen finden Sie im Ankündigungspost. Dort erfahren Sie auch, wie Sie die Bearbeitung für Nutzer verbessern können, die einfach nur Text einfügen möchten, ohne dass unnötige Elemente angezeigt werden.
Intl.DurationFormat ist jetzt als Baseline verfügbar
Sie haben wahrscheinlich schon einmal auf einer Website Text gesehen, der die Zeit bis zu oder nach einem Ereignis angibt, oft in einem String wie „2 Tage, 6 Stunden, 3 Minuten“. Diese Daten sind nützlich, um eine Vielzahl aktueller Informationen zu kommunizieren, werden aber oft von einer Bibliothek bereitgestellt. Außerdem möchten Sie diese Informationen möglicherweise in mehreren Sprachen ausgeben.
Geben Sie Intl.DurationFormat ein. Diese Funktion zur Internationalisierung ist seit Kurzem als Baseline Newly verfügbar. Mit der Klasse Intl.DurationFormat können Sie dem Konstruktor ein Objekt mit den Zeiteinheiten übergeben, die in einen String formatiert werden sollen. Dabei ist fast jede Sprache möglich:
const duration = {
years: 1,
hours: 20,
minutes: 15,
seconds: 35
};
// English output: '1 year, 20 hours, 15 minutes, 35 seconds'
new Intl.DurationFormat('en', { style: 'long' }).format(duration);
// German output: '1 Jahr, 20 Stunden, 15 Minuten und 35 Sekunden'
new Intl.DurationFormat('de', { style: 'long' }).format(duration);
// Spanish output: '1 año, 20 horas, 15 minutos y 35 segundos'
new Intl.DurationFormat('es', { style: 'long' }).format(duration);
Das Tolle daran ist, dass Sie Strings in Ihrer Anwendung, die bisher mit einer Bibliothek formatiert wurden, bald ohne Bibliothek formatieren können. Das spart Ihren Nutzern Kilobytes. Weitere Informationen finden Sie in diesem Beitrag. Dort erfahren Sie auch, wie Sie diese praktische neue Funktion nutzen können.Intl.DurationFormat
Baseline beim W3C Breakouts Day 2025
Kürzlich hat das W3C die 2025er-Ausgabe seines Breakouts Day abgehalten, bei dem Mitglieder Vorträge zu verschiedenen Themen gehalten haben. Am 26. März gab es außerdem eine nützliche Sitzung zum Thema Baseline.
Wenn Sie Baseline noch nicht kennen, erhalten Sie in dieser Sitzung einen guten Überblick. Er deckt die Grundlagen der Baseline ab, z. B. die Konzepte „Neu“ und „Weitgehend verfügbar“, geht aber auch darauf ein, wie diese Definitionen anhand von Daten ermittelt werden, angefangen bei browser-compat-data bis hin zu den web-features-Daten, mit denen wir herausfinden können, welche Funktionen welchen Baseline-Grenzwert erreichen.
Falls Sie diese Sitzung verpasst haben, keine Sorge! Die Folien aus der Sitzung sind bereits verfügbar. Sehen Sie sich diese an, wenn Sie neugierig sind.
Ergebnis
Diese Ausgabe des Monatsresümees markiert nicht nur das Ende des Monats, sondern auch des Quartals. Falls Sie frühere Versionen des Digests verpasst haben, sehen Sie sich die Ausgaben vom Januar und Februar an, um auf den neuesten Stand zu kommen. Wie immer: Bitte lassen Sie uns wissen, wenn wir etwas Wichtiges in Bezug auf die Baseline übersehen haben. Wir werden es dann in einer zukünftigen Version berücksichtigen. Bis zum nächsten Monat!