Data publikacji: 31 marca 2025 r.
Minął kolejny miesiąc i od ostatniego miesięcznego podsumowania danych wydarzyło się wiele rzeczy. W tym wydaniu omówimy niektóre publikowane przez nas na stronie web.dev posty, nowe funkcje dostępne w wersji podstawowej oraz aktualizacje narzędzi w społeczności.
Ukazała się wersja ESLint 0.6.0
Niedawno opublikowaliśmy informację o wsparciu dla ESLint w zakresie sprawdzania kodu CSS. W ramach tego uaktualnienia dodaliśmy nową regułę ESLint (require-baseline), która sprawdza funkcje CSS używane w projekcie i sprawdza, czy osiągają określony próg wartości docelowej.
Niedawno ESLint wprowadził wersję 0.6.0 pakietu @eslint/css, która zawiera ważną nową aktualizację, w ramach której reguła require-baseline została przemianowana na use-baseline. Ta aktualizacja jest pozornie niewielka, ale poprawia czytelność reguły. W tej wersji znajdziesz też inne ważne funkcje i poprawki błędów, takie jak dodanie możliwości stosowania reguły use-baseline do sprawdzania wbudowanych bloków CSS. Jeśli używasz wcześniejszej wersji @eslint/css, zapoznaj się z tą aktualizacją.
Jak wysyłać zapytania do panelu platformy internetowej
Wcześniej w tym miesiącu opublikowaliśmy post na temat wykonywania zapytań do panelu platformy internetowej. Zapytania do tego panelu można wysyłać za pomocą interfejsu użytkownika oraz interfejsu HTTP API. Może to być przydatne w przypadku narzędzi do tworzenia punktów odniesienia, ponieważ możesz wysłać zapytanie do interfejsu API, aby znaleźć funkcje, które osiągnęły określony próg punktu odniesienia.
Ten interfejs API może być przydatny w przypadku narzędzi, w których przypadku trzeba szybko uzyskać informacje o konkretnych funkcjach. Za pomocą tego typu narzędzi możesz np. napisać skrypt, który w określonym przedziale czasu informuje, które funkcje stały się dostępne jako nowe lub dostępne powszechnie. Jeśli to brzmi jak coś przydatnego, przeczytaj ten post.
Jak rozumieć punkt odniesienia i polyfille
Podstawowe informacje mają na celu ułatwienie określenia, których funkcji można bezpiecznie używać. Mimo to, nawet po uzyskaniu dodatkowych informacji, nadal trzeba zastanowić się, jak stosować funkcje w sposób odpowiedni dla Twoich aplikacji internetowych. W ramach tego procesu dużą rolę odgrywają rozwiązania typu „polyfill”. Podstawa nie uwzględnia polyfilli w przypadku określania, czy funkcje są dostępne w wersji nowej czy powszechnej, ani nie próbuje określić, czy należy ich używać. Ta decyzja zależy od Twojej aplikacji, ale jest bardzo ważna.
Niedawno opublikowaliśmy post na temat podejścia do bazy i polyfillów. Uważamy, że stanowi on przydatną podstawę do rozważań na temat ich stosowania. Mamy nadzieję, że funkcje, które stają się dostępne w wersji podstawowej lub powszechnej, sprawią, że polyfille staną się mniej potrzebne. Bez wątpienia polyfille są przydatnymi narzędziami w Twoim zestawie narzędzi programistycznych, ale mają też wady – mogą negatywnie wpływać na wydajność witryny, a w niektórych przypadkach mogą nawet powodować problemy z dostępnością. Mamy nadzieję, że ten przewodnik pomoże Ci rozwiązać ten trudny problem.
Karta contenteditable="plaintext-only" jest teraz dostępna jako domyślna
Atrybut contenteditable w elemencie HTML pozwala użytkownikowi zmieniać zawartość tak, jakby była ona polem tekstowym. Oznacza to, że możesz umieścić atrybut w elemencie <p>, a użytkownik będzie mógł z nim wchodzić w interakcje jak z elementem <textarea>. W niektórych przypadkach stosowanie contenteditable ma zalety w porównaniu z typowymi elementami formularza.
Użytkownicy wklejają jednak treści do elementów możliwych do edycji, a te mogą zawierać sformatowany tekst, co może być frustrujące dla osób, które chcą wkleić do pola niesformatowany tekst. Zapobiega temu kombinacja atrybutu/wartości contenteditable="plaintext-only", która niedawno stała się dostępna jako nowa wartość domyślna. Aby dowiedzieć się więcej, przeczytaj post z ogłoszeniem i dowiedz się, jak zapewnić lepsze możliwości edycji użytkownikom, którzy chcą wstawiać tekst bez zbędnych elementów.
Karta Intl.DurationFormat jest teraz dostępna jako domyślna
Pewnie zdarzyło Ci się kiedyś otworzyć witrynę i zobaczyć krótki tekst, który informuje o czasie do lub po jakimś wydarzeniu. Często wygląda on tak: „2 dni, 6 godzin, 3 minuty”. Te dane są przydatne do przekazywania wielu aktualnych informacji, ale często są dostarczane przez bibliotekę. Możesz też chcieć wyświetlać te informacje w różnych językach.
Oto Intl.DurationFormat, funkcja dotycząca internacjonalizacji, która niedawno stała się dostępna w wersji podstawowej. Dzięki klasie Intl.DurationFormat możesz przekazać konstruktorowi obiekt zawierający jednostki czasu, które chcesz sformatować w postaci ciągu znaków, i to w prawie każdym języku, jaki możesz sobie wyobrazić:
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);
Ciekawe jest to, że jeśli Twoja aplikacja korzysta z biblioteki do formatowania takich ciągów znaków, wkrótce będziesz mógł to robić bez tej biblioteki, oszczędzając kilobajty dla użytkowników. Więcej informacji znajdziesz w poście z ogłoszeniem o Intl.DurationFormat, w którym znajdziesz też wskazówki dotyczące korzystania z tej przydatnej nowej funkcji.
Punkt odniesienia na konferencji W3C Breakouts Day 2025
Niedawno W3C zorganizowało edycję 2025 roku Breakouts Day, podczas której członkowie organizacji prezentowali różne tematy. 26 marca odbyła się przydatna sesja na temat wartości docelowych.
Jeśli dopiero zaczynasz korzystać z Baseline, ta sesja zapewni Ci szybki przegląd tej funkcji. Omawia on podstawy dotyczące wartości referencyjnych, takie jak pojęcia „Nowo dostępne” i „Dostępne powszechnie”, ale także wyjaśnia, jak te definicje są określane na podstawie danych, począwszy od browser-compat-data, aż po dane web-features, które pomagają nam określić, które funkcje osiągają dany próg wartości referencyjnej.
Jeśli nie udało Ci się wziąć udziału w tej sesji, nie martw się. Prezentacja z tej sesji jest już dostępna, więc jeśli jesteś ciekaw, jak wyglądała, możesz ją obejrzeć.
To wszystko.
Ten numer miesięcznego zestawienia nie tylko podsumowuje koniec miesiąca, ale też kwartału. Jeśli poprzednie wersje biuletynu Ci umknęły, zapoznaj się z wydaniami z stycznia i lutego, aby dowiedzieć się wszystkiego, co wydarzyło się w przypadku Baseline w pierwszym kwartale tego roku. Jak zwykle poinformuj nas, jeśli pominęliśmy coś związanego z poziomem bazowym. Upewnimy się wtedy, że zostanie to uwzględnione w kolejnych wydaniach. Do zobaczenia za miesiąc.